Modify nemo-ui(table style changes) 51/31951/1
authorswsiyu <swsiyu@163.com>
Sun, 27 Dec 2015 09:00:50 +0000 (17:00 +0800)
committerswsiyu <swsiyu@163.com>
Sun, 27 Dec 2015 09:03:22 +0000 (17:03 +0800)
Change-Id: If35f3c88ed7aca181b42ba474efc955730b8d53a
Signed-off-by: swsiyu <swsiyu@163.com>
nemo-ui/src/main/resources/nemo/css/nemo_main.css
nemo-ui/src/main/resources/nemo/css/nemo_user_main.css
nemo-ui/src/main/resources/nemo/js/intentTopo.js
nemo-ui/src/main/resources/nemo/js/phyNetwork.js
nemo-ui/src/main/resources/nemo/js/svg.xml
nemo-ui/src/main/resources/nemo/js/virNetwork.js
nemo-ui/src/main/resources/nemo/js/vnMapping.js
nemo-ui/src/main/resources/nemo/module/test/bod_userJson.js
nemo-ui/src/main/resources/nemo/nemo.tpl.html
nemo-ui/src/main/resources/nemo/nemo.tpl.user.html
nemo-ui/src/main/resources/nemo/register.html

index 49ccef4614dc7eadd30f3e68c9c27d1732ce1519..908c4e607a0de471c16299814babff1bd3fe4417 100644 (file)
@@ -104,18 +104,21 @@ margin-bottom: 20px;
   width:923px !important;\r
   line-height: 10px;\r
 }\r
-#physicalTables{\r
-\r
+#mappingTable{\r
+  width: 850px;\r
+  margin: 0px auto;\r
 }\r
 .group table{\r
   border-collapse:collapse;\r
-  margin: 10px auto;\r
+  /*margin: 10px auto;*/\r
   border-spacing:0;\r
  /* border-left:1px solid #888;\r
   border-top:1px solid #888;*/\r
   background:#efefef;\r
-  width: 100%;\r
-  margin-bottom: 20px;\r
+  /*width: 100%;*/\r
+  width: 820px;\r
+  margin-bottom: 2px;\r
+   table-layout: fixed;\r
 }\r
 .group caption{\r
   font-size: 18px;\r
@@ -128,17 +131,39 @@ margin-bottom: 20px;
 }\r
 .group table th{\r
    border:1px solid black; \r
+   padding:2px 0px;\r
    font-weight: bold;\r
    background-color: #ccc;\r
\r
 }\r
 .group table th,.group table td{\r
-  padding:2px 5px;\r
   text-align: center;\r
+   font-size: 15px;\r
+}\r
+table#virNodeTab,table#virLinkTab{\r
+  table-layout: fixed;\r
+}\r
+table#virNodeTab td,table#virLinkTab td{\r
+ white-space: nowrap;\r
+ overflow: hidden;\r
+ text-overflow:ellipsis;\r
+}\r
+table.tableHead{\r
+ margin-bottom: 5px !important;\r
+}\r
+div.tableBodyContainer{\r
+  height: 200px;\r
+  width: 835px;\r
+  overflow: auto;\r
+  margin-bottom: 20px;\r
+}\r
+div.nodetableBodyContainer{\r
+  height: 150px;\r
+  overflow: auto;\r
+   margin-bottom: 20px;\r
 }\r
 \r
 div#pageContent {\r
-  height: 1020px;\r
+  /*height: 1020px;*/\r
 }\r
   \r
 body {\r
index 429965d3d965b300336470128f9fb09b52e4fad2..71b3b9173395920187f3af6c6a3868aad37d61f6 100644 (file)
@@ -2,7 +2,7 @@
 body{\r
        /*width:1200px;*/\r
        height: 1000px;\r
-       background-color: rgb(57,57,57);\r
+       /*background-color: rgb(65, 64, 66);*/\r
        color: black;\r
        font-size: 18px;\r
 }\r
@@ -24,9 +24,26 @@ div{border-radius: 5px;}
     /*background:-moz-linear-gradient(left,#eee, #aaa);*/\r
     /*background:-webkit-gradient(linear, 20% 0%, 100% 0%, color-stop(0.3,#aaa),color-stop(0.5,#bbb),color-stop(1,#444444));*/\r
 }\r
+.header p{\r
+       float: left;\r
+}\r
+.header span{\r
+  color:#000 !important;\r
+  text-shadow:0 0 0 #fff;\r
+  text-decoration: underline;\r
+  /*text-decoration-color:green;*/\r
+  /*border-bottom:1px solid green;*/\r
+  font-weight: normal;\r
+  font-size: 18px;\r
+  line-height: 30px;\r
+  display: inline-block;\r
+  margin-left: 20px;\r
+  cursor: pointer;\r
+  font-family:'cursive','-webkit-pictograp',sans-serif,Verdana;\r
+}\r
 .group{\r
     width:1000px;\r
-       height: 700px;\r
+       /*height: 700px;*/\r
        margin: 0px auto;\r
        background: #ccc;\r
        /*border: 2px solid yellow;*/\r
@@ -73,7 +90,7 @@ svg{
        /*margin-left: 5px;*/\r
 }\r
 #nemo_str_show span.keyWords{\r
-       color:red;\r
+       color:deeppink;\r
 }\r
 \r
 /*jquery ui tab css start*/\r
@@ -91,7 +108,8 @@ svg{
 }\r
 .ui-widget-header {\r
   border: 1px solid #ccc;\r
-  background: #ccc url("../images/ui-bg_gloss-wave_35_f6a828_500x100.png") 50% 50% repeat-x;\r
+  background: #aaa url("../images/ui-bg_gloss-wave_35_f6a828_500x100.png") 50% 50% repeat-x;\r
+  background:#aaa;\r
   color: #fff;\r
   font-weight: bold;\r
 }\r
@@ -115,5 +133,5 @@ li.ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active a{
 }\r
 /*jquery ui tab css end*/\r
 div#pageContent {\r
-  height: 1000px;\r
+  /*height: 1000px;*/\r
 }
\ No newline at end of file
index 306b09e3950e54fd63fd2b18d3ed729e34b8696f..6d0ffc579dec3c7f71be135a7d1308beb146b189 100644 (file)
@@ -26,7 +26,7 @@ function getIntentInfos(){
        if(!Datas){\r
        Datas=userinfo;\r
        }\r
-       // IntentInfos=Datas;\r
+       IntentInfos=Datas;\r
        //return virtualDatas;\r
  }\r
 \r
@@ -54,7 +54,7 @@ getIntentInfos();
  }\r
 \r
  function getIntentInfoByName(user_name,Data){\r
-               //console.log(1);\r
+     console.log(Data);\r
        if(typeof(Data)=='string'){\r
     var user_json = JSON.parse(Data);\r
     }\r
@@ -256,14 +256,14 @@ getIntentInfos();
 \r
 \r
                //get Radio\r
-               var cir_r = parseInt(jQuery("#" + src_group + " circle:eq(0)").attr("r"));\r
+               var cir_r = parseInt(jQuery("[id='" + src_group + "'] circle:eq(0)").attr("r"));\r
 \r
 \r
                //get circle cx cy\r
-               src_cx = parseInt(jQuery("#" + src_group + " circle:eq(0)").attr("cx"));\r
-               src_cy = parseInt(jQuery("#" + src_group + " circle:eq(0)").attr("cy"));\r
-               dest_cx = parseInt(jQuery("#" + dest_group + " circle:eq(0)").attr("cx"));\r
-               dest_cy = parseInt(jQuery("#" + dest_group + " circle:eq(0)").attr("cy"));\r
+               src_cx = parseInt(jQuery("[id='" + src_group + "'] circle:eq(0)").attr("cx"));\r
+               src_cy = parseInt(jQuery("[id='" + src_group + "'] circle:eq(0)").attr("cy"));\r
+               dest_cx = parseInt(jQuery("[id='" + dest_group + "'] circle:eq(0)").attr("cx"));\r
+               dest_cy = parseInt(jQuery("[id='" + dest_group + "'] circle:eq(0)").attr("cy"));\r
                console.log(src_cx + "  " + src_cy + "  " + dest_cx + "   " + dest_cy);\r
 \r
                //calculate deg\r
@@ -358,10 +358,10 @@ getIntentInfos();
                if (conn_name != null && typeof(conn_name) != "undefined")\r
                        jQuery("#" + conn_name).remove();\r
                try {\r
-                       var node_cx_1 = jQuery("#" + node_name_1 + "_group").attr("cx");\r
-                       var node_cy_1 = jQuery("#" + node_name_1 + "_group").attr("cy");\r
-                       var node_cx_2 = jQuery("#" + node_name_2 + "_group").attr("cx");\r
-                       var node_cy_2 = jQuery("#" + node_name_2 + "_group").attr("cy");\r
+                       var node_cx_1 = jQuery("[id='" + node_name_1 + "_group']").attr("cx");\r
+                       var node_cy_1 = jQuery("[id='" + node_name_1 + "_group']").attr("cy");\r
+                       var node_cx_2 = jQuery("[id='" + node_name_2 + "_group']").attr("cx");\r
+                       var node_cy_2 = jQuery("[id='" + node_name_2 + "_group']").attr("cy");\r
                        // console.log(node_cx_1);\r
                        // console.log(node_cy_1);\r
                        // console.log(node_cx_2);\r
@@ -903,8 +903,8 @@ getIntentInfos();
                                if(myTarget!='go-through') continue;\r
                                var flow_name = flow_list[user_data["operations"]["operation"][operation_cursor]["target-object"]];\r
                                var chain_name = node_list[user_data["operations"]["operation"][operation_cursor]["action"][0]["parameter-values"]["string-value"][0]["value"]];\r
-                               var node_start = jQuery("#" + flow_name).attr("node_start");\r
-                               var node_end = jQuery("#" + flow_name).attr("node_end");\r
+                               var node_start = jQuery("[id='" + flow_name+"']").attr("node_start");\r
+                               var node_end = jQuery("[id='" + flow_name+"']").attr("node_end");\r
                                var c1_flag = 0;\r
                                var c2_flag = 0;\r
                                for (var i = 0; i < jQuery("#service_svg2 path").length; i++) {\r
index da12a7bf7cfb83ae01e139a748054f443fb08233..0b78798866aa7b069e63e4f657cfdaf4e5d91125 100644 (file)
@@ -433,7 +433,7 @@ createPhyicalNodeTable:function (id,Data){
            physicalnodes[Mynode[i]['node-id']].push([interPort,exterPort]);
        }
        console.log(physicalnodes);
-       jQuery("#"+id).find('tr:gt(1)').empty();
+       jQuery("#"+id).find('tr:gt(0)').empty();
        for(var item in physicalnodes){
                var $tr='<tr><td>'+item+'</td><td>'+physicalnodes[item][0]+'</td>'
                $tr+='<td>'+physicalnodes[item][1][0]+'</td><td>'+physicalnodes[item][1][1]+'</td>'
@@ -454,7 +454,7 @@ createPhyicalLinkTable:function (id,Data){
 
        }
        console.log(physaicallinks);
-       jQuery("#"+id).find('tr:gt(1)').empty();
+       jQuery("#"+id).find('tr:gt(0)').empty();
        for(var item in physaicallinks){
                var $tr='<tr><td>'+item+'</td><td>'+physaicallinks[item][0]+'</td>'
                 $tr+='<td>'+physaicallinks[item][1]+'</td><td>'+physaicallinks[item][2]+'</td>';
index b005ac8270af8f7f6345842fb26f7644db34e52b..cd3aeda557d490dfca289f0557eb9de63fdf24dc 100644 (file)
                <text id="internet_title1" x="762.1320343559643" y="229.8679656440358" fill="black" text-anchor="middle" stroke="black" stroke-width="0.8">ext-group</text>\r
                <text id="internet_title2" x="762.1320343559643" y="247.8679656440358" fill="                       " text-anchor="middle">internet</text>\r
        </g>\r
+</svg>\r
+\r
+<svg id="service_svg2" width="800" height="560" viewBox="100 40 900 780">\r
+       <path id="c2" node_start="interior" node_end="dmz1.n2" type="connection" d="M762.1320343559642 662.1320343559643 Lundefined undefined" stroke="black" stroke-width="1" fill="black"></path>\r
+       <path id="dmz1_c1" node_start="dmz1_n1" node_end="dmz1.n2" type="connection" d="M337.86796564403573 662.1320343559643 Lundefined undefined" stroke="black" stroke-width="1" fill="black"></path>\r
+       <path id="c1" node_start="internet" node_end="dmz1_n1" type="connection" d="M762.1320343559643 237.8679656440358 L337.86796564403573 662.1320343559643" stroke="black" stroke-width="1" fill="black"></path>\r
+       <defs>\r
+               <marker id="idArrow2" viewBox="0 0 20 20" refX="0" refY="10" markerUnits="strokeWidth" markerWidth="6" markerHeight="15" orient="auto"><path d="M 0 0 L 20 10 L0 20 z" fill="purple" stroke="black"></path> </marker> \r
+               <marker id="idtext2" viewBox="0 0 120 50" refX="0" refY="0" markerUnits="strokeWidth" markerWidth="20" markerHeight="20" orient="auto"><text style="font-family:sans-serif; font-size:14pt;" x="20" y="20">text</text></marker>\r
+       </defs>\r
+       <g id="dmz1.n2" type="l2-group" sub="dmz1.n2" ip-prefix="192.168.12.0/24">\r
+               <circle id="dmz1.n2_group" cx="337.86796564403573" cy="237.86796564403573" r="90" stroke="black" stroke-width="3" fill="white"></circle>\r
+               <rect id="vm2" x="282.86796564403573" y="212.86796564403573" width="110" height="34" stroke="black" stroke-width="1" fill="white"></rect>\r
+               <rect id="server1" x="282.86796564403573" y="255.86796564403573" width="110" height="34" stroke="black" stroke-width="1" fill="white"></rect>\r
+               <text id="dmz1.n2_title1" x="337.86796564403573" y="189.86796564403573" fill="black" text-anchor="middle" stroke="black" stroke-width="0.8">dmz1.n2</text>\r
+               <text id="dmz1.n2_title2" x="337.86796564403573" y="206.86796564403573" fill="black" text-anchor="middle">l2-group</text>\r
+               <text id="vm2_text" x="337.86796564403573" y="232.86796564403573" fill="black" text-anchor="middle">vm2</text>\r
+               <text id="server1_text" x="337.86796564403573" y="277.86796564403573" fill="black" text-anchor="middle">server1</text>\r
+       </g>\r
+       <g id="dmz1_n1" type="chain-group" sub="dmz1_n1" flow="0">\r
+               <circle id="dmz1_n1_group" cx="337.86796564403573" cy="662.1320343559643" r="90" stroke="black" stroke-width="3" fill="white"></circle>\r
+               <rect id="dmz1.fw1" x="280.86796564403573" y="637.1320343559643" width="114" height="50" stroke="black" stroke-width="1" fill="white"></rect>\r
+               <text id="dmz1_n1_title1" x="337.86796564403573" y="614.1320343559643" fill="black" text-anchor="middle" stroke="black" stroke-width="0.8">dmz1_n1</text>\r
+               <text id="dmz1_n1_title2" x="337.86796564403573" y="632.1320343559643" fill="black" text-anchor="middle">chain-group</text>\r
+               <text id="dmz1.fw1_text" x="337.86796564403573" y="662.1320343559643" fill="black" text-anchor="middle">dmz1.fw1</text>\r
+       </g>\r
+       <g id="interior" type="ext-group" sub="interior" ip-prefix="192.168.13.0/24">\r
+               <circle id="interior_group" cx="762.1320343559642" cy="662.1320343559643" r="90" stroke="black" stroke-width="3" fill="white"></circle>\r
+               <text id="interior_title1" x="762.1320343559642" y="654.1320343559643" fill="black" text-anchor="middle" stroke="black" stroke-width="0.8">interior</text>\r
+               <text id="interior_title2" x="762.1320343559642" y="672.1320343559643" fill="                       " text-anchor="middle">ext-group</text>\r
+       </g>\r
+       <g id="internet" type="ext-group" sub="internet" ip-prefix="172.168.1.0/24">\r
+               <circle id="internet_group" cx="762.1320343559643" cy="237.8679656440358" r="90" stroke="black" stroke-width="3" fill="white"></circle>\r
+               <text id="internet_title1" x="762.1320343559643" y="229.8679656440358" fill="black" text-anchor="middle" stroke="black" stroke-width="0.8">internet</text>\r
+               <text id="internet_title2" x="762.1320343559643" y="247.8679656440358" fill="                       " text-anchor="middle">ext-group</text>\r
+       </g>\r
 </svg>
\ No newline at end of file
index d437eab460954a4a21f59a751cece2778decc7e3..4e057058b50fd4e7ed30a6e4fd7e35b0ba9a3ee0 100644 (file)
@@ -21,7 +21,8 @@ var VirtualDatas='';
                                        alert("No Virtual Data");
                        },
                        error:function(data){
-                       alert("Get Virtual Data Error!");
+                       // alert("Get Virtual Data Error!");
+                       console.log("Get Virtual Data Error!");
                        }
                });
         return virData;
@@ -36,7 +37,7 @@ var VirtualDatas='';
        // console.log(VirtualDatas);
        //return virtualDatas;
  }
-
+//getVirtualDatas();
 function getVirtualInfoById(user_id,Data){
        if(!Data) Data=VirtualDatas;
        if(!Data) return;
@@ -286,7 +287,7 @@ createVirtualNodeTable:function (id,Data){
        for(var item in virtualnodes){          
                // if(virtualnodes[item][1]!='external-node'){}
 
-           var $tr='<tr><td>'+virtualnodes[item].virtual_node_id+'</td><td>'+virtualnodes[item].virtual_node_name+'</td>'
+           var $tr='<tr><td title='+virtualnodes[item].virtual_node_id+'>'+virtualnodes[item].virtual_node_id+'</td><td>'+virtualnodes[item].virtual_node_name+'</td>'
                $tr+='<td>'+'virtual '+virtualnodes[item].virtual_node_name.substring(1,virtualnodes[item].virtual_node_name.length-1)+'</td>'
                $tr+='<td>'+virtualnodes[item].internal_port_number+'</td><td>'+virtualnodes[item].external_port_number+'</td>'
                $tr+='</tr>'
@@ -310,7 +311,7 @@ createVirtualLinkTable:function (id,Data){
        console.log(virtuallinks);
        jQuery("#"+id).find('tr:gt(1)').empty();
        for(var item in virtuallinks){
-               var $tr='<tr><td>'+item+'</td><td>'+virtual_nodes[virtuallinks[item][0]][1]+'-'+virtual_nodes[virtuallinks[item][1]][1]+'</td>'
+               var $tr='<tr><td title='+item+'>'+item+'</td><td>'+virtual_nodes[virtuallinks[item][0]][1]+'-'+virtual_nodes[virtuallinks[item][1]][1]+'</td>'
                 $tr+='<td>'+virtual_nodes[virtuallinks[item][0]][1]+'<td>'+virtual_nodes[virtuallinks[item][1]][1]+'</td>';
                 $tr+='<td>'+virtuallinks[item][3]+'kbps'+'</td><td>'+virtuallinks[item][4]+'ms'+'</td>';
                 $tr+='</tr>'
index fb20300e7b4de3e1486c4ef287bf836ccc02cc01..dd02eb6b8b835433472d7b1cb46bb8445d71afe9 100644 (file)
@@ -26,14 +26,14 @@ function getMappingResults() {
 function getMappingDatas() {\r
        var Datas = getMappingResults();\r
        if (!Datas) {\r
-               Datas = MappingResults;\r
+               Datas = VnMappingJson;\r
        }\r
        MappingResults = Datas;\r
        //return virtualDatas;\r
 }\r
 \r
 getMappingResults();\r
-\r
+//getMappingDatas();\r
 function getMappingResultById(user_id, Data) {\r
        if (!Data) Data = MappingResults;\r
        if (!Data) return;\r
@@ -105,7 +105,7 @@ var createMappingTables = {
                                        virtualnodes[Mynode[i]['node-id']] = Mynode[i]['physical-resource-requirement'][0]['attribute-value']['string-value'];\r
                        }\r
                        console.log(virtualnodes);\r
-                       jQuery("#" + id).find('tr:gt(1)').empty();\r
+                       // jQuery("#" + id).find('tr:gt(0)').empty();\r
                        var count=0;\r
                        for(var x in virtual_nodes){count++;}\r
                        if(count==0) return;\r
@@ -138,7 +138,7 @@ var createMappingTables = {
                        for(var x in virtual_nodes){count++;}\r
                        if(count==0) return;\r
                        for (var i in virtuallinks) {\r
-                               var $tr = '<tr><td>' + virtual_nodes[virtuallinks[i][0]][1] + '-' + virtual_nodes[virtuallinks[i][1]][1] + '</td><td>' + virtual_nodes[virtuallinks[i][0]][1] + '</td><td>' + virtual_nodes[virtuallinks[i][1]][1] + '</td><td>' + PathId[i] + '</td>'\r
+                               var $tr = '<tr><td>' + virtual_nodes[virtuallinks[i][0]][1] + '-' + virtual_nodes[virtuallinks[i][1]][1] + '</td><td>' + virtual_nodes[virtuallinks[i][0]][1] + '</td><td>' + virtual_nodes[virtuallinks[i][1]][1] + '</td><td title='+PathId[i]+'>' + PathId[i].substring(0,14)+'...' + '</td>'\r
                                var pathsNode = ''\r
                                for (var nodesPath in paths[PathId[i]]) {\r
                                        pathsNode += paths[PathId[i]][nodesPath] + '-';\r
@@ -166,7 +166,10 @@ var createMappingTables = {
                        }\r
                        console.log(PathId);\r
                        var Paths = [];\r
-                       var sourcePaths = physicalData['physical-network']['physical-paths']['physical-path'];\r
+                       var sourcePaths = physicalData['physical-network']['physical-paths'];\r
+                       if(!sourcePaths) return Paths;\r
+\r
+                       sourcePaths = physicalData['physical-network']['physical-paths']['physical-path'];\r
                        // console.log(sourcePaths);\r
                        for (var path in PathId) {\r
                                for (var sp in sourcePaths) {\r
index 294b0006f203e0e4b6c874d9e99ffd67c7241ed0..6b983d39222c4cf0da2332e89df4c0edfef663e7 100644 (file)
@@ -339,7 +339,7 @@ userinfo={
                 }\r
               ],\r
               "node-type": "fw",\r
-              "node-name": "dmz1_fw1"\r
+              "node-name": "dmz1.fw1"\r
             },\r
             {\r
               "node-id": "ae83ca1d-43ef-4d02-a48b-6c250bb084bd",\r
@@ -430,7 +430,7 @@ userinfo={
                 }\r
               ],\r
               "node-type": "l2-group",\r
-              "node-name": "dmz1_n2",\r
+              "node-name": "dmz1.n2",\r
               "sub-node": [\r
                 {\r
                   "node-id": "6c787caa-156a-49ed-8546-547bdccf283c",\r
@@ -501,7 +501,7 @@ userinfo={
             {\r
               "node-id": "0dc22c0a-8ff0-448f-afc3-86fa22976242",\r
               "node-type": "chain-group",\r
-              "node-name": "dmz1_n1",\r
+              "node-name": "dmz1.n1",\r
               "sub-node": [\r
                 {\r
                   "node-id": "9d6f5343-f38e-4101-ab60-309e6322ace3",\r
@@ -539,7 +539,7 @@ userinfo={
                 }\r
               ],\r
               "connection-type": "p2p",\r
-              "connection-name": "dmz1_c1"\r
+              "connection-name": "dmz1.c1"\r
             },\r
             {\r
               "connection-id": "06c60ef9-f16d-4368-9697-aa6b1cf1340a",\r
@@ -580,7 +580,7 @@ userinfo={
                   }\r
                 }\r
               ],\r
-              "flow-name": "dmz1_f1"\r
+              "flow-name": "dmz1.f1"\r
             }\r
           ]\r
         },\r
index 40350c285b731cd3f1d9efc5c64342bd0156cdbf..b3550a5a1ec23508b6a325e2c90823ce22555877 100644 (file)
@@ -74,7 +74,7 @@
             // SFC\r
             //userId='af4fc2be-e3f4-4388-a8ef-3aabae872f2b';\r
             //Bod\r
-            //userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b'\r
+            //var userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b'\r
              //if(userId=='0') userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b';\r
             $('#service_svg2').empty();\r
             $("#nemo_str_show").empty();\r
@@ -98,8 +98,8 @@
            // var virtualData=getVirtualJson();\r
             var userId=$("#selectUser option:selected").val();\r
             jQuery('#vir_graph').empty();\r
-            jQuery("#virNodeTab").find('tr:gt(1)').empty();\r
-            jQuery("#virLinkTab").find('tr:gt(1)').empty();\r
+            jQuery("#virNodeTab").find('tr:gt(0)').empty();\r
+            jQuery("#virLinkTab").find('tr:gt(0)').empty();\r
             // SFC\r
             //userId='af4fc2be-e3f4-4388-a8ef-3aabae872f2b';\r
             //Bod\r
          // $(".tabs ul li[aria-controls='Mapping']").click();\r
         $(".tabs ul li[aria-controls='Mapping']").click(function(){\r
             var userId=$("#selectUser option:selected").val();\r
-            //if(userId=='0') userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b';\r
-            jQuery("#mapVirNodeTab").find('tr:gt(1)').empty();\r
-            jQuery("#mapVirLinkTab").find('tr:gt(1)').empty();\r
+            userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b';\r
+            jQuery("#mapVirNodeTab").find('tr:gt(0)').empty();\r
+            jQuery("#mapVirLinkTab").find('tr:gt(0)').empty();\r
             if(!physicalData||!PnMappingResults||!VirtualDatas) return;\r
             var virtualData = getVirtualInfoById(userId);\r
             if(!virtualData) return;\r
             if(!getPnMappingResultById(userId)) return;\r
             // console.log(createMappingTables);\r
+            console.log(virtualData);\r
               createMappingTables.createVirtualNodeTable('mapVirNodeTab',virtualData);\r
             // console.log(linkArray);\r
               createMappingTables.createVirtualLinkTable('mapVirLinkTab',virtualData,getPnMappingResultById(userId),physicalData);\r
             //Bod\r
             //userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b'\r
 \r
-            //if(userId=='0') userId='14ce424a-3e50-4a2a-ad5c-b29845158c8b';\r
-            if(!intent_info) return;\r
+            if(!IntentInfos) return;\r
             var user_data = getIntentInfoById(userId);\r
             if(!user_data) return;\r
+            \r
             analyjson_topo(user_data);\r
             parseNemoLan(user_data);\r
-        //set keyWords style\r
+            \r
+            //set keyWords style\r
            $("#nemo_str_show p").each(function(){\r
             var $res=$(this);\r
             keyWords.forEach(function(item,index,array){\r
     });\r
 \r
        $('#logout').click(function(){\r
-        // alert(1);\r
         setCookie('nemo_userpwd','',-1);\r
         $("#pageContent").empty();\r
         $("#pageContent").load('src/app/nemo/register.html');\r
-        // alert(2);\r
        });\r
 \r
         });\r
                 <div id='PhyNet'>\r
                     <div id="phy_graph"></div>\r
                     <div id='physicalTables'>\r
-                         <table id="phyNodeTab" border='1'>\r
-                    <caption>Physical Node</caption>\r
-                       <tr>\r
+                      <table class='tableHead'>\r
+                        <caption>Physical Node</caption>\r
+                         <colgroup>\r
+                         <col style="width: 25%;"/>\r
+                         <col style="width: 25%;" />\r
+                         <col style="width: 25%;"/>\r
+                         <col style="width: 25%;" />\r
+                         </colgroup>\r
+                        <tr>\r
                         <th>Physical Node ID</th><th>Physical Node Type</th>\r
                         <th>Internal Physical Port Number</th><th>External Physical Port Number</th>\r
                         </tr>\r
-                   </table>\r
+                      </table>\r
 \r
-                    <table id="phyLinkTab" border='1'>\r
-                    <caption>Physical Link</caption>\r
-                       <tr>\r
+                      <div class='tableBodyContainer'>\r
+                         <table id="phyNodeTab" border='1'>\r
+                         <colgroup>\r
+                         <col style="width: 25%;"/>\r
+                         <col style="width: 25%;" />\r
+                         <col style="width: 25%;"/>\r
+                         <col style="width: 25%;" />\r
+                         </colgroup>\r
+                         </table>\r
+                      </div>\r
+\r
+                        <table class='tableHead'>\r
+                        <caption>Physical Link</caption>\r
+                         <colgroup>\r
+                         <col style="width: 30%;"/>\r
+                         <col style="width: 20%;" />\r
+                         <col style="width: 20%;"/>\r
+                         <col style="width: 10%;" />\r
+                         <col style="width: 10%;" />\r
+                         <col style="width: 10%;" />\r
+                         </colgroup>\r
+                        <tr>\r
                         <th>Physical Link ID</th><th>Source Physical Node</th>\r
-                       <th>Destination Physical Node</th><th>Metric</th>\r
-                       <th>Bandwidth</th> <th>Delay</th>\r
-                       </tr>\r
-                   </table>\r
+                        <th>Destination Physical Node</th><th>Metric</th>\r
+                        <th>Bandwidth</th><th>Delay</th>\r
+                        </tr>\r
+                     </table>\r
+                    \r
+                    <div class='tableBodyContainer'>\r
+                    <table id="phyLinkTab" border='1'>                    \r
+                       <colgroup>\r
+                         <col style="width: 30%;"/>\r
+                         <col style="width: 20%;" />\r
+                         <col style="width: 20%;"/>\r
+                         <col style="width: 10%;" />\r
+                         <col style="width: 10%;" />\r
+                         <col style="width: 10%;" />\r
+                         </colgroup>\r
+                    </table>\r
+                    </div>\r
+                    \r
                     </div>\r
                 </div>\r
 \r
                <div id="VirNet">\r
                 <div id="vir_graph"></div>\r
                 <div id='virtualTables'>\r
-                         <table id="virNodeTab" border='1'>\r
+\r
+                   <table class='tableHead' border='1'>\r
                     <caption>Virtual Node</caption>\r
+                    <colgroup>\r
+                    <col style="width: 20%;"/>\r
+                    <col style="width: 20%;" />\r
+                    <col style="width: 20%;"/>\r
+                    <col style="width: 20%;" />\r
+                    <col style="width: 20%;"/>\r
+                    </colgroup>\r
                        <tr>\r
                         <th>Virtual Node ID</th><th>Virtual Node Name</th>\r
                         <th>Virtual Node Type</th>\r
                         </tr>\r
                    </table>\r
 \r
-                    <table id="virLinkTab" border='1'>\r
+                    <div class='tableBodyContainer'>\r
+                    <table id="virNodeTab" border='1'>\r
+                    <colgroup>\r
+                    <col style="width: 20%;"/>\r
+                    <col style="width: 20%;" />\r
+                    <col style="width: 20%;"/>\r
+                    <col style="width: 20%;" />\r
+                    <col style="width: 20%;"/>\r
+                    </colgroup>\r
+                   </table>\r
+                    </div>\r
+               \r
+                   <table class='tableHead' border='1'>\r
                     <caption>Virtual Link</caption>\r
+                    <colgroup>\r
+                    <col style="width: 20%;" />\r
+                    <col style="width: 20%;"/>\r
+                    <col style="width: 20%;" />\r
+                    <col style="width: 20%;"/>\r
+                    <col style="width: 10%;" />\r
+                    <col style="width: 10%;"/>\r
+                    </colgroup>\r
                        <tr>\r
                         <th>Virtual Link ID</th><th>Virtual Link Name</th>\r
                         <th>Source Virtual Node</th>\r
                        <th>Bandwidth</th> <th>Delay</th>\r
                        </tr>\r
                    </table>\r
+               \r
+\r
+                    <div class='tableBodyContainer'>\r
+                    <table id="virLinkTab" border='1'>\r
+                      <colgroup>\r
+                    <col style="width: 20%;" />\r
+                    <col style="width: 20%;"/>\r
+                    <col style="width: 20%;" />\r
+                    <col style="width: 20%;"/>\r
+                    <col style="width: 10%;" />\r
+                    <col style="width: 10%;"/>\r
+                    </colgroup>\r
+                   </table>\r
+                   </div>\r
                     </div>\r
                </div>\r
                <div id="Mapping">\r
-                   <table id="mapVirNodeTab" border='1'>\r
+                    \r
+                    <div id='mappingTable'>\r
+                   <table class='tableHead' border='1'>\r
                     <caption>Virtual Node Mapping Table</caption>\r
+                    <colgroup>\r
+                    <col style="width: 50%;" />\r
+                    <col style="width: 50%;"/>\r
+                    </colgroup>\r
                        <tr><th>Virtual Node</th><th>Physical Node</th></tr>\r
                    </table>\r
+                    \r
+                   <div class='tableBodyContainer'>\r
+                   <table id="mapVirNodeTab" border='1'>\r
+                    <colgroup>\r
+                    <col style="width: 50%;" />\r
+                    <col style="width: 50%;"/>\r
+                    </colgroup>\r
+                   </table>\r
+                    </div> \r
 \r
-                    <table id="mapVirLinkTab" border='1'>\r
+                     <table class='tableHead' border='1'>\r
                     <caption>Virtual Link Mapping Table</caption>\r
+                    <colgroup>\r
+                    <col style="width: 20%;">\r
+                    <col style="width: 15%;">\r
+                    <col style="width: 15%;">\r
+                    <col style="width: 20%;">\r
+                    <col style="width: 30%;">\r
+                    </colgroup>                     \r
                        <tr>\r
                         <th>Virtual Link</th><th>Source Virtual Node</th>\r
                        <th>Destination Virtual Node</th><th>Physical Path</th>\r
                        <th>Physical Nodes passed by Path</th>\r
                        </tr>\r
                    </table>\r
+                    \r
+                    <div class='tableBodyContainer'>\r
+                    <table id="mapVirLinkTab" border='1'>\r
+                    <colgroup>\r
+                    <col style="width: 20%;">\r
+                    <col style="width: 15%;">\r
+                    <col style="width: 15%;">\r
+                    <col style="width: 20%;">\r
+                    <col style="width: 30%;">\r
+                    </colgroup>\r
+                   </table>\r
+                   </div>\r
+                  </div>\r
                </div>\r
         </div>\r
 \r
index d1a1aaeccd7ae96a665fe4e7bdb3e816082e2b26..949520e8c99cc12af1607dc812000367f0d69a21 100644 (file)
@@ -6,9 +6,11 @@
     <link href="src/app/nemo/css/nemo_user_main.css" rel="stylesheet" />\r
 \r
     <!-- // <script src="src/app/nemo/module/migrate.js"></script> -->\r
+    <!-- // <script src="src/app/nemo/module/migrate_js.js"></script> -->\r
 \r
     <script src="src/app/nemo/module/keyWords.js"></script>\r
-    <!-- // <script src="src/app/nemo/module/bod_userJson.js"></script> -->\r
+    <!-- // <script src="src/app/nemo/module/test/bod_userJson.js"></script> -->\r
+    <!-- // <script src="src/app/nemo/module/test/servicechain_userJson.js"></script> -->\r
     <script src="src/app/nemo/js/Nemo_Main.js"></script>\r
     <script src="src/app/nemo/js/Nemo_Annouce_vis.js"></script>\r
     <script src="src/app/nemo/js/phyNetwork.js"></script>\r
                var user_str = localStorage.getItem("nemo_userInfo");\r
         console.log(user_str);\r
         jQuery(document).ready(function ($) {\r
+        \r
+        (function(){\r
         if(user_str){\r
             user_str=JSON.parse(user_str);\r
             var userName=user_str.userName;\r
             //get topo data\r
+            if(!userName) return true;\r
             $('.header p').html($('.header p').html().replace('xxx',userName));\r
             var user_data=getIntentInfoByName(userName,IntentInfos);\r
-             analyjson_topo(user_data);\r
-             parseNemoLan(user_data);\r
+            // var user_data=getIntentInfoByName(userName,userinfo);\r
+            console.log(user_data);\r
+            analyjson_topo(user_data);\r
+            parseNemoLan(user_data);\r
 \r
              //set keyWords style\r
-           $("#nemo_str_show p").each(function(){\r
-            var $res=$(this);\r
-            keyWords.forEach(function(item,index,array){\r
-                // console.log(item);\r
-                $res.html($res.html().replace(item,"<span class='keyWords'>"+item+"</span>"));\r
-            });\r
-        });\r
+            $("#nemo_str_show p").each(function(){\r
+             var $res=$(this);\r
+             keyWords.forEach(function(item,index,array){\r
+                 // console.log(item);\r
+                 $res.html($res.html().replace(item,"<span class='keyWords'>"+item+"</span>"));\r
+                });\r
+             });\r
+        } \r
+       }());\r
+\r
+        $('#user_logout').click(function(){\r
+        // console.log(1);\r
+        // alert(1);\r
+        setCookie('nemo_userpwd','',-1);\r
+        $("#pageContent").empty();\r
+        $("#pageContent").load('src/app/nemo/register.html');\r
+        // alert(2);\r
+       });   \r
 \r
-        }      \r
+      \r
         });\r
     </script>\r
 </head>\r
 <body>\r
-      <div class="header"><p>Hello xxx!</p></div>\r
+      <div class="header"><p>Hello xxx!</p><span id='user_logout'>Logout</span></div>\r
 \r
         <div class="group">\r
             <div class="up">\r
index 17c43e51a0ea85cc814e82fa61763be84a0dbf3a..ce2461b0e98419e354a62b68e80f82d33b16dda3 100644 (file)
@@ -62,6 +62,40 @@ function getCookie(name)
                        });\r
        return user_data;\r
       }\r
+      function userLogin(userName,userPassword){\r
+        jQuery.ajax({\r
+                       url: "/restconf/config/nemo-intent:users/",\r
+                       type: "GET",\r
+                       async: false,\r
+                       dataType: "json",\r
+                       success: function(data) {\r
+                       console.log(data);\r
+                       //data=JSON.stringify(data);\r
+                       var name_data_list=data["users"]["user"];\r
+               for (var i in name_data_list) {\r
+                       if (name_data_list[i]["user-name"] == userName) {\r
+                               if (name_data_list[i]["user-password"]==userPassword)\r
+                               {\r
+                                       userInfoStorage.userName=userName;\r
+                                       localStorage.setItem("nemo_userInfo",JSON.stringify(userInfoStorage));\r
+                               setCookie('nemo_username',userName);\r
+                       setCookie('nemo_userpwd',userPassword);\r
+                               $("#pageContent").empty();\r
+                       $("#pageContent").load('src/app/nemo/nemo.tpl.user.html');\r
+                return;\r
+                           }\r
+                           else{\r
+                               alert("User's password  is wrong!");\r
+                               return;\r
+                           }\r
+                       }\r
+                   }\r
+                   alert("There is no user named "+userName);\r
+                       },\r
+                       error: function(data) {console.log(data);}\r
+                  });\r
+      }\r
+      //use cookie remember the last username and password ,and use them login\r
       (function(){\r
        var cook_username=getCookie('nemo_username');\r
        var cook_userpwd=getCookie('nemo_userpwd');\r
@@ -71,6 +105,9 @@ function getCookie(name)
                $("#pageContent").empty();\r
             $("#pageContent").load('src/app/nemo/nemo.tpl.html');\r
        }\r
+       else{\r
+               userPassword(cook_username,cook_userpwd);\r
+       }\r
       }());\r
       $("#usename").focus();\r
 //add enter evevt\r
@@ -96,37 +133,7 @@ function getCookie(name)
             $("#pageContent").load('src/app/nemo/nemo.tpl.html');\r
             }\r
             else{\r
-            jQuery.ajax({\r
-                       url: "/restconf/config/nemo-intent:users/",\r
-                       type: "GET",\r
-                       async: false,\r
-                       dataType: "json",\r
-                       success: function(data) {\r
-                       console.log(data);\r
-                       //data=JSON.stringify(data);\r
-                       var name_data_list=data["users"]["user"];\r
-               for (var i in name_data_list) {\r
-                       if (name_data_list[i]["user-name"] == userName) {\r
-                               if (name_data_list[i]["user-password"]==userPassword)\r
-                               {\r
-                                       userInfoStorage.userName=userName;\r
-                                       localStorage.setItem("nemo_userInfo",JSON.stringify(userInfoStorage));\r
-                               // setCookie('username',userName);\r
-                               // setCookie('username',userPassword);\r
-                               $("#pageContent").empty();\r
-                       $("#pageContent").load('src/app/nemo/nemo.tpl.user.html');\r
-                return;\r
-                           }\r
-                           else{\r
-                               alert("User's password  is wrong!");\r
-                               return;\r
-                           }\r
-                       }\r
-                   }\r
-                   alert("There is no user named "+userName);\r
-                       },\r
-                       error: function(data) {console.log(data);}\r
-                  });\r
+               userLogin(userName,userPassword);\r
            }\r
            });\r
                \r