Split netjson viewer into html and javascript file
[oonf.git] / files / netjson_viewer / netjson_view.js
1 /* settings */
2 var common_edge_postfix = "bit/s";
3 var common_node_prefix  = "192.168.0.";
4 var netjsonurl = "http://169.254.0.101/cgi/netjson.cgi";
5
6 var selectedColor = {
7     border:     '#2BE97C',
8     background: '#D2FFE5',
9     highlight: {
10         border: '#2BE97C',
11         background: '#D2FFE5',
12     },
13 };
14
15 /* global variables */
16 var visNodes, visEdges, visNetwork;
17 var autoupdate_timeout;
18 var xmlhttp;
19
20 String.prototype.startsWith = function (pattern) {
21     if (this.length < pattern.length) {
22         return false;
23     }
24     return pattern == this.substring(0, pattern.length);
25 };
26
27 String.prototype.endsWith = function (pattern) {
28     if (this.length < pattern.length) {
29         return false;
30     }
31     return pattern == this.substring(-pattern.length);
32 };
33
34 function init_network() {
35     var options = {
36     };
37
38     // create an array with nodes
39     visNodes = new vis.DataSet([], options);
40
41     // create an array with edges
42     visEdges = new vis.DataSet([], options);
43
44     // create a network
45     var container = document.getElementById("networkgraph");
46     var visData = {
47         nodes: visNodes,
48         edges: visEdges
49     };
50
51     options = {
52         edges: {
53             smooth: {
54                 type: 'continuous'
55             }
56         },
57     };
58     visNetwork = new vis.Network(container, visData, options);
59   
60     firstLookup = true;
61 }
62
63 function layout_nodes(element) {
64     var jsonNodes = element.nodes;
65     var newIds = []
66     var oldIds = []
67     
68     /* add new nodes */
69     newIds = []
70     oldIds = visNodes.getIds()
71     for (ni = 0; ni < jsonNodes.length; ni++) {
72         var nId = jsonNodes[ni].id;
73         var nColor = null;
74         
75         var nLabel = nId;
76         if (nId.startsWith(common_node_prefix)) {
77             nLabel = nId.substring(common_node_prefix.length);
78         }
79                         
80         newIds.push(nId);
81         if (jsonNodes[ni].id == element.router_id) {
82             nColor = selectedColor;
83         }
84
85         if (!visNodes.get(nId)) {   
86             visNodes.add(
87                 {
88                     id:    nId,
89                     label: nLabel,
90                     mass:  4,
91                     color: nColor,
92                 }
93             );
94         }
95     }
96     
97     /* remove old nodes */
98     for (ni = 0; ni < oldIds.length; ni++) {
99         if (newIds.indexOf(oldIds[ni]) == -1) {
100             visNodes.remove(oldIds[ni]);
101         }
102     }
103 }
104
105 function layout_edges(element) {
106     var jsonEdges = element.links;
107     var newIds = []
108     var oldIds = []
109     var undirectedEdges = {}
110     
111     /* calculate unidirectional edges */
112     newIds = []
113     oldIds = visEdges.getIds()
114     for (ei = 0; ei < jsonEdges.length; ei++) {
115         var eFrom = jsonEdges[ei].source;
116         var eTo = jsonEdges[ei].target;
117         
118         if (eFrom > eTo) {
119             var tmp = eTo;
120             eTo = eFrom;
121             eFrom = tmp;
122         }
123
124         var uuid = eFrom + "-" + eTo;
125         
126         var edge = undirectedEdges[uuid];
127         if (edge == null) {
128             edge = {
129                 uuid:      eFrom + "-" + eTo,
130                 from:      eFrom,
131                 to:        eTo,
132                 width:     1,
133                 arrows:    "",
134                 fromLabel: "-",
135                 toLabel:   "-"
136             };
137             undirectedEdges[uuid] = edge;
138         };
139                 
140         newIds.push(edge.uuid);
141         
142         var eLabel =  jsonEdges[ei].weight.toString();
143         if (jsonEdges[ei].properties) {
144             if (jsonEdges[ei].properties["weight_txt"]) {
145                 eLabel = jsonEdges[ei].properties["weight_txt"];
146             }
147             if (jsonEdges[ei].properties["outgoing_tree"] == "true") {
148                 edge.width=3;
149                 if (jsonEdges[ei].source == eFrom) {
150                     edge.arrows = "to";
151                 }
152                 else {
153                     edge.arrows = "from";
154                 }
155             }
156         }
157         
158         if (jsonEdges[ei].source == eFrom) {
159             edge.fromLabel = eLabel;
160         }
161         else {
162             edge.toLabel = eLabel;
163         }
164     }
165     
166     /* add new edges */
167     for (ei = 0; ei < newIds.length; ei++) {
168         var edge = undirectedEdges[newIds[ei]];
169         var label = "";
170         
171         var flen = edge.fromLabel.length - common_edge_postfix.length;
172         var tlen = edge.toLabel.length - common_edge_postfix.length;
173         
174         if (edge.fromLabel == edge.toLabel) {
175             label = edge.fromLabel;
176         }
177         else if (edge.fromLabel.endsWith(common_edge_postfix)
178                 && edge.fromLabel.endsWith(common_edge_postfix)) {
179             label = edge.fromLabel.substring(0, flen).trim() + "/"
180                 + edge.toLabel.substring(0, tlen).trim()
181                 + " " + common_edge_postfix;             
182         }
183         else {
184             label = edge.fromLabel + "/" + edge.toLabel;
185         }
186         
187         if (visEdges.get(edge.uuid)) {
188             visEdges.update(
189                 {
190                     id:          edge.uuid,
191                     label:       label,
192                     width:       edge.width,
193                     arrows:      edge.arrows,
194                 }
195             );
196         }
197         else {
198             visEdges.add(
199                 {
200                     id:          edge.uuid,
201                     from:        edge.from,
202                     to:          edge.to,
203                     label:       label,
204                     length:      200,
205                     width:       edge.width,
206                     arrows:      edge.arrows,
207                     font: {
208                         align:       "top",
209                     }
210                 }
211             );
212         }
213     }
214
215     /* remove old edges */
216     for (ei = 0; ei < oldIds.length; ei++) {
217         if (newIds.indexOf(oldIds[ei]) == -1) {
218             visEdges.remove(oldIds[ei]);
219         }
220     }
221 }
222
223 function xmlhttp_changed()
224 {
225     if (xmlhttp.readyState==XMLHttpRequest.DONE && xmlhttp.status==200) {
226         console.log("Got update");
227         
228         obj = JSON.parse(xmlhttp.responseText);
229
230         if (obj.type != "NetworkCollection") {
231             return;
232         }
233
234         for (index = 0; index < obj.collection.length; index++) {
235             element = obj.collection[index];
236
237             if (element.router_id.indexOf(':') != -1) {
238                 continue;
239             }
240
241             if (element.type == "NetworkGraph") {
242                 layout_nodes(element);
243                 layout_edges(element);
244             }
245         }
246         
247         var checkbox = document.getElementById("autoupdate");
248         if (checkbox.checked) {
249             autoupdate_timeout = window.setTimeout(send_request, 5000);
250         }
251     }
252 }
253
254 function checkbox_clicked() {
255     var checkbox = document.getElementById("autoupdate");
256     if (checkbox.checked === false) {
257         window.clearTimeout(autoupdate_timeout);
258     }
259     else {
260         send_request();
261     }    
262 }
263
264 function send_request() {
265     xmlhttp.open("GET",netjsonurl,true);
266     xmlhttp.send();
267 }
268
269 function init_netjson_viewer() {
270     xmlhttp = new XMLHttpRequest();
271     xmlhttp.onreadystatechange=xmlhttp_changed
272     init_network();
273     send_request();
274 }