source: trunk/WebDID/did.js@ 19234

Last change on this file since 19234 was 18920, checked in by tbretz, 8 years ago
Updated to v20r20 - This also includes some minor fixes, I requested.
File size: 14.5 KB
Line 
1
2Ext.require(['*']);
3
4Ext.onReady(function(){
5
6
7 var randomNumber = Math.floor(Math.random()*10000001);
8
9 Ext.QuickTips.init();
10
11 var storeNodes = Ext.create('Ext.data.TreeStore', {
12 proxy: {
13 type: 'rest',
14 url: '/didData.json',
15 extraParams: {
16 browser: randomNumber
17 },
18 reader: {
19 type: 'json',
20 root: 'children'
21 }
22 },
23 autoLoad: false,
24 folderSort: true,
25 sorters: [{
26 property: 'text',
27 direction: 'ASC'
28 }],
29 root: {
30 text: 'TopNode',
31 id: 'src',
32 expanded: true
33 },
34 listeners: {
35 load: function(myStore, node, records, successful, eopts) {
36// if(node.get('text') == "Nodes")
37// document.write("I am here "+node.text+" "+node.get('text'));
38// node.expand();
39// serviceInfo.update(node.get('text'));
40// var node = getNodeById('Nodes');
41// node.expand();
42// node.expandChildren();
43// searchInfo.update("Expanding " +node.get('text'));
44 setTimeout(expandRoot, 100);
45 }
46// refresh: function(myStore, eopts) {
47// searchInfo.update("Refreshing");
48// node.expand(1);
49// serviceInfo.update("refresh "+myStore.getName());
50// }
51// beforeexpand: function( node, eopts) {
52// this.load({
53// params: {
54// node: node.text
55// }
56// });
57// }
58 }
59 });
60
61 function expandRoot()
62 {
63 var node;
64
65 node = storeNodes.getRootNode();
66 node.expandChildren();
67 }
68
69 var storeServices = Ext.create('Ext.data.TreeStore', {
70 proxy: {
71 type: 'rest',
72 url: '/didServices.json',
73 extraParams: {
74 browser: randomNumber
75 },
76 reader: {
77 type: 'json',
78 root: 'children'
79 }
80 },
81 folderSort: true,
82 sorters: [{
83 property: 'text',
84 direction: 'ASC'
85 }],
86 root: {
87 text: 'TopNode',
88 id: 'src',
89 expanded: true
90 },
91 listeners: {
92 load: function(myStore, node, records, successful, eopts) {
93 node.expand(1);
94 }
95 }
96 });
97
98 function clearServices()
99 {
100 storeServices.load();
101 serviceInfoArea.setVisible(1);
102 commandInfoArea.setVisible(0);
103 serviceInfoArea.update("");
104 }
105
106 var serviceInfoArea = Ext.create('Ext.Panel', {
107 layout: 'fit',
108 id: 'details-panel',
109 title: 'Service Info',
110 width: 580,
111 flex: 3,
112 autoScroll: true,
113 border: false,
114 html: '',
115 tools: [{
116 type: 'gear',
117 id: 'update',
118 handler: function(e, toolEl, panel, tc) {
119 UpdateButton = tc;
120 if(UpdateService)
121 {
122 UpdateService = 0;
123 tc.setType('refresh');
124// tc.show();
125//console.log("changed icon 1", UpdateService);
126 }
127 else
128 {
129 UpdateService = 1;
130 tc.setType('gear');
131// tc.show();
132//console.log("changed icon 2", UpdateService);
133 }
134 }
135 }]
136 });
137
138 var serviceButton = Ext.create('Ext.Button', {
139 text: 'Stop Updating',
140 margin: '5 5 5 5',
141 handler: function() {
142//console.log('changed icon');
143// var pattern = commandData.getRawValue();
144// query(pattern, -1);
145 }
146 });
147/*
148 var serviceInfoArea = Ext.create('Ext.form.Panel', {
149 layout: 'vbox',
150 id: 'svc-details-panel',
151 title: 'Service Info',
152 width: 580,
153// flex: 3,
154// autoScroll: true,
155 border: false,
156// html: 'Command test'
157 align:'stretch',
158 tools: [{
159 type: 'gear',
160 handler: function(e, toolEl, panel, tc) {
161 UpdateButton = tc;
162 if(UpdateService)
163 {
164 UpdateService = 0;
165 tc.setType('refresh');
166// tc.show();
167//console.log("changed icon 1", UpdateService);
168 }
169 else
170 {
171 UpdateService = 1;
172 tc.setType('gear');
173// tc.show();
174 doGetService();
175//console.log("changed icon 2", UpdateService);
176 }
177 }
178 }],
179 items: [serviceButton,serviceInfo]
180 });
181*/
182 var commandInfo = Ext.create('Ext.Panel', {
183 layout: 'fit',
184// id: 'details-panel',
185// title: 'Service Info',
186 width: 580,
187// flex: 3,
188// autoScroll: true,
189 border: false,
190 margin: '5 5 5 5',
191 html: 'Some Info'
192 });
193
194
195 var commandData = Ext.create('Ext.form.field.Text', {
196 width: 400,
197// id: 'pattern',
198 xtype: 'textfield',
199 name: 'Search pattern',
200 labelAlign: 'top',
201 fieldLabel: "Please enter items separated by spaces:<br />(for example: 2 0x123 'A' 23.4 \"a text\")",
202 labelPad: 5,
203 labelSeparator: "",
204// labelWidth: 45,
205// allowBlank: false,
206 margin: '5 5 5 5'
207 });
208
209 var commandButton = Ext.create('Ext.Button', {
210 text: 'Send',
211 margin: '5 5 5 5',
212 handler: function() {
213 var pattern = commandData.getRawValue();
214 query(pattern, -1);
215 }
216 });
217
218 var commandInfoArea = Ext.create('Ext.form.Panel', {
219 layout: 'vbox',
220 id: 'cmd-details-panel',
221 title: 'Send Command',
222 width: 580,
223// flex: 3,
224// autoScroll: true,
225 border: false,
226// html: 'Command test'
227 align:'stretch',
228 items: [commandInfo, commandData, commandButton]
229 });
230
231 var serviceCommandArea = Ext.create('Ext.form.Panel', {
232 layout: 'vbox',
233// title: 'Service Info',
234 width: 580,
235 region: 'east',
236 align:'stretch',
237 items: [serviceInfoArea, commandInfoArea]
238 });
239/*
240 var serviceInfo = Ext.create('Ext.Panel', {
241 id: 'details-panel',
242 title: 'Service Info',
243 region: 'east',
244// bodyStyle: 'padding-bottom:15px;background:#eee;',
245 autoScroll: true,
246 html: ''
247 });
248*/
249
250 var HTTPPacket = new XMLHttpRequest();
251 HTTPPacket.onreadystatechange = process;
252 var HTTPPollPacket = new XMLHttpRequest();
253 HTTPPollPacket.onreadystatechange = pollAnswer;
254 var HTTPQueryPacket = new XMLHttpRequest();
255 HTTPQueryPacket.onreadystatechange = queryAnswer;
256 var requestNumber = 0;
257 var LastService = "";
258 var LastId = "";
259 var forceUpdate = 0;
260 var timeoutid;
261 var pollid;
262 var CurrService = "";
263 var OldNServices = 0;
264 var OldNServers = 0;
265 var OldNnodes = 0;
266 var OldNSearch = -1;
267 var UpdateService = 1;
268 var UpdateButton = 0;
269
270
271 function poll()
272 {
273// if(!pollid)
274// return;
275 requestNumber = requestNumber + 1;
276 HTTPPollPacket.open( "GET", "/didPoll.json/src?dimservice="+CurrService+"&reqNr="+requestNumber+"&reqId="+randomNumber+"&force=0", true );
277 HTTPPollPacket.send( null );
278 }
279 function pollAnswer()
280 {
281 var answer;
282 if ( HTTPPollPacket.readyState != 4 )
283 return;
284 answer = HTTPPollPacket.responseText;
285 if(answer == "")
286 {
287 pollid = setTimeout(poll, 5000);
288 return;
289 }
290 var items = answer.split(" ");
291 if((items[0] != OldNServices) || (items[1] != OldNServers))
292 {
293// storeHeader.load();
294 headerList.update(items[1]+" Servers Known - "+items[0]+" Services Available (on "+items[2]+" nodes)");
295 }
296 if((items[1] != OldNServers) || (items[2] != OldNnodes))
297 {
298 storeNodes.load();
299 clearServices();
300 }
301 if(items[3] != 0)
302 doGetService();
303 OldNServices = items[0];
304 OldNServers = items[1];
305 OldNnodes = items[2];
306 if(items[4] != OldNSearch)
307 {
308 if(items[4] != 0)
309 searchInfo.update("Showing: "+items[5]+" Servers - "+items[4]+" Services (on "+items[6]+" nodes)");
310 else
311 searchInfo.update("Showing: All");
312 OldNSearch = items[4];
313 }
314 pollid = setTimeout(poll, 5000);
315 }
316
317 function query(pattern, force)
318 {
319 if(pollid)
320 clearTimeout(pollid);
321 pollid = 0;
322 requestNumber = requestNumber + 1;
323 HTTPQueryPacket.open( "GET", "/didQuery.json/src?dimservice="+pattern+"&reqNr="+requestNumber+"&reqId="+randomNumber+"&force="+force, true );
324 HTTPQueryPacket.send( null );
325 }
326 function queryAnswer()
327 {
328 var answer;
329 if ( HTTPQueryPacket.readyState != 4 )
330 return;
331 answer = HTTPQueryPacket.responseText;
332 if(answer == "load")
333 {
334 storeNodes.load();
335 clearServices();
336 poll();
337 }
338 else
339 pollid = setTimeout(poll, 1000);
340// poll();
341 }
342
343 function doGetService()
344 {
345 if(LastService != "")
346 getService(LastService, LastId);
347 }
348 function getService(name, id)
349 {
350 if(pollid)
351 clearTimeout(pollid);
352 pollid = 0;
353 forceUpdate = 0;
354 if(LastService != name)
355 {
356 forceUpdate = 1;
357 UpdateService = 1;
358 if(UpdateButton)
359 UpdateButton.setType('gear');
360 LastService = name;
361 LastId = id;
362 }
363 var items = id.split("|");
364 if(items.length == 3)
365 {
366// serviceInfo.update(name + " is a DIM Command");
367 commandInfo.update(name + " is a DIM Command");
368// serviceInfo.setVisible(0);
369// commandInfoArea.setVisible(1);
370 CurrService = "";
371 forceUpdate = -1;
372// return;
373 }
374 var name1 = name.replace(/\?/g,"%3F");
375 name1 = name1.replace(/\&/g,"%26");
376 if(forceUpdate != -1)
377 CurrService = name1;
378 requestNumber = requestNumber + 1;
379 if(UpdateService)
380 {
381 HTTPPacket.open( "GET", "/didServiceData.json/src?dimservice="+name1+"&id=src&reqNr="+requestNumber+"&reqId="+randomNumber+"&force="+forceUpdate, true );
382 HTTPPacket.send( null );
383 }
384 }
385 function process()
386 {
387 serviceInfoArea.update("Updating - state "+HTTPPacket.readyState+"...");
388console.log("receiveing", HTTPPacket.readyState);
389 if ( HTTPPacket.readyState != 4 )
390 return;
391 if(HTTPPacket.responseText == "")
392 {
393// timeoutid = window.setTimeout(doGetService, 5000);
394 pollid = setTimeout(poll, 5000);
395 return;
396 }
397 if(forceUpdate != -1)
398 {
399// if(UpdateService)
400// {
401 serviceInfoArea.update(HTTPPacket.responseText);
402console.log("received answer", HTTPPacket.responseText);
403 serviceInfoArea.setVisible(1);
404 commandInfoArea.setVisible(0);
405// }
406 }
407 else
408 {
409 commandInfo.update(HTTPPacket.responseText);
410 serviceInfoArea.setVisible(0);
411 commandInfoArea.setVisible(1);
412 }
413// timeoutid = window.setTimeout(doGetService, 5000);
414 pollid = setTimeout(poll, 5000);
415 }
416
417 var serviceList = Ext.create('Ext.tree.Panel', {
418 title: 'Services',
419 width: 360,
420 height: 150,
421 store: storeServices,
422 rootVisible: false,
423 autoScroll: true,
424 listeners: {
425 itemclick: function(view, rec, item, index, evtObj) {
426 getService(rec.get('text'),rec.get('id'));
427 }
428 }
429 });
430
431 var nodeTree = Ext.create('Ext.tree.Panel', {
432 title: 'Nodes & Servers',
433 width: 360,
434 height: 150,
435 store: storeNodes,
436 rootVisible: false,
437 autoScroll: true,
438// deferRowRender: true,
439 listeners: {
440 itemclick: function(view, rec, item, index, evtObj) {
441 if(rec.get('leaf') == true)
442 {
443 storeServices.load({
444 params: {
445 dimserver: rec.get('text'),
446 dimnode: rec.get('parentId'),
447 dimserverid: rec.get('id')
448 }
449 });
450 }
451 }
452 }
453 });
454/*
455 var storeHeader = Ext.create('Ext.data.Store', {
456 proxy: {
457 type: 'rest',
458 url: '/didHeader.json',
459 reader: {
460 type: 'json',
461 root: 'items'
462 }
463 },
464// autoLoad: true,
465 fields: ['text']
466 });
467
468 var headerList = Ext.create('Ext.grid.Panel', {
469 layout: 'fit',
470 title: 'DID - DIM Information Display',
471// width: 500,
472 height: 70,
473 store: storeHeader,
474 hideHeaders: true,
475 columns: [{ text: 'Text', dataIndex: 'text', flex: 1 }]
476 });
477*/
478 var headerList = Ext.create('Ext.Panel', {
479 layout: 'fit',
480 title: 'DID - DIM Information Display',
481 id: 'top-panel',
482 width: 2000,
483 height: 55,
484// margin: '5 0 5 5',
485// border: 0,
486 bodyPadding: '5 0 5 5',
487 html: ''
488 });
489
490 var searchButton = Ext.create('Ext.Button', {
491 text: 'Search',
492 margin: '2 0 5 5',
493 handler: function() {
494// var pattern = getElementById('pattern');
495// serviceInfo.update(inputArea.getRawValue());
496// storeServices.removeAll();
497// storeServices.load({
498// params: {
499// dimserver: "",
500// dimnode: "",
501// dimserverid: ""
502// }
503// });
504 clearServices();
505 var pattern = inputArea.getRawValue();
506 query(pattern, 0);
507 }
508 });
509
510 var allButton = Ext.create('Ext.Button', {
511 text: 'Show All',
512 margin: '2 0 5 5',
513 handler: function() {
514// var pattern = getElementById('pattern');
515// serviceInfo.update(inputArea.getRawValue());
516// var pattern = inputArea.getRawValue();
517// query(pattern);
518// storeServices.removeAll();
519// storeServices.load({
520// params: {
521// dimserver: "",
522// dimnode: "",
523// dimserverid: ""
524// }
525// });
526 clearServices();
527 var pattern = "";
528 query(pattern, 0);
529 }
530 });
531
532 var searchInfo = Ext.create('Ext.Panel', {
533 layout: 'fit',
534 id: 'search-panel',
535// title: 'Service Info',
536// region: 'east',
537// bodyStyle: 'padding-bottom:15px;background:#eee;',
538// autoScroll: true,
539 margin: '5 0 5 10',
540// bodyBorder: false,
541 border: 0,
542 html: ''
543 });
544
545 var inputArea = Ext.create('Ext.form.field.Text', {
546 width: 400,
547 id: 'pattern',
548 xtype: 'textfield',
549 name: 'Search pattern',
550 fieldLabel: 'pattern',
551 labelWidth: 45,
552// allowBlank: false,
553 margin: '2 0 5 5'
554 });
555
556 var searchArea = Ext.create('Ext.form.Panel', {
557 layout: 'hbox',
558 title: 'Service Search',
559 width: 2000,
560// height: 30,
561// margins: '2 0 5 5',
562 items: [inputArea, searchButton, allButton, searchInfo]
563 });
564
565
566 Ext.create('Ext.Viewport', {
567 layout: 'border',
568 title: 'DID',
569 items: [{
570 layout: 'vbox',
571 id: 'layout-browser3',
572 region:'north',
573 border: false,
574 split:true,
575 margins: '2 0 5 5',
576 items: [headerList, searchArea]
577 },{
578 layout: 'fit',
579 id: 'layout-browser',
580 region:'west',
581 border: false,
582 split:true,
583 margins: '2 0 5 5',
584 width: 220,
585 minSize: 100,
586 maxSize: 500,
587 items: [nodeTree]
588 },{
589 layout: 'fit',
590 id: 'layout-browser1',
591 region:'center',
592 border: false,
593 split:true,
594 margins: '2 0 5 5',
595 minSize: 100,
596 maxSize: 500,
597// items: [nodeTree, serviceList]
598 items: [serviceList]
599 },{
600 layout: 'fit',
601 id: 'layout-browser2',
602 region:'east',
603 border: false,
604 split:true,
605 margins: '2 0 5 5',
606 width: 580,
607 minSize: 100,
608 maxSize: 600,
609 items: [serviceCommandArea]
610 }
611 ],
612 renderTo: Ext.getBody()
613 });
614 commandInfoArea.setVisible(0);
615// storeHeader.load();
616// pollid = window.setTimeout(poll, 1000);
617 poll();
618});
Note: See TracBrowser for help on using the repository browser.