source: branches/FACT++_lidctrl_usb/dim/WebDID/did.js@ 20115

Last change on this file since 20115 was 18058, checked in by tbretz, 10 years ago
Updated to v20r11
File size: 14.4 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+"...");
388 if ( HTTPPacket.readyState != 4 )
389 return;
390 if(HTTPPacket.responseText == "")
391 {
392// timeoutid = window.setTimeout(doGetService, 5000);
393 pollid = setTimeout(poll, 5000);
394 return;
395 }
396 if(forceUpdate != -1)
397 {
398// if(UpdateService)
399// {
400 serviceInfoArea.update(HTTPPacket.responseText);
401 serviceInfoArea.setVisible(1);
402 commandInfoArea.setVisible(0);
403// }
404 }
405 else
406 {
407 commandInfo.update(HTTPPacket.responseText);
408 serviceInfoArea.setVisible(0);
409 commandInfoArea.setVisible(1);
410 }
411// timeoutid = window.setTimeout(doGetService, 5000);
412 pollid = setTimeout(poll, 5000);
413 }
414
415 var serviceList = Ext.create('Ext.tree.Panel', {
416 title: 'Services',
417 width: 360,
418 height: 150,
419 store: storeServices,
420 rootVisible: false,
421 autoScroll: true,
422 listeners: {
423 itemclick: function(view, rec, item, index, evtObj) {
424 getService(rec.get('text'),rec.get('id'));
425 }
426 }
427 });
428
429 var nodeTree = Ext.create('Ext.tree.Panel', {
430 title: 'Nodes & Servers',
431 width: 360,
432 height: 150,
433 store: storeNodes,
434 rootVisible: false,
435 autoScroll: true,
436// deferRowRender: true,
437 listeners: {
438 itemclick: function(view, rec, item, index, evtObj) {
439 if(rec.get('leaf') == true)
440 {
441 storeServices.load({
442 params: {
443 dimserver: rec.get('text'),
444 dimnode: rec.get('parentId'),
445 dimserverid: rec.get('id')
446 }
447 });
448 }
449 }
450 }
451 });
452/*
453 var storeHeader = Ext.create('Ext.data.Store', {
454 proxy: {
455 type: 'rest',
456 url: '/didHeader.json',
457 reader: {
458 type: 'json',
459 root: 'items'
460 }
461 },
462// autoLoad: true,
463 fields: ['text']
464 });
465
466 var headerList = Ext.create('Ext.grid.Panel', {
467 layout: 'fit',
468 title: 'DID - DIM Information Display',
469// width: 500,
470 height: 70,
471 store: storeHeader,
472 hideHeaders: true,
473 columns: [{ text: 'Text', dataIndex: 'text', flex: 1 }]
474 });
475*/
476 var headerList = Ext.create('Ext.Panel', {
477 layout: 'fit',
478 title: 'DID - DIM Information Display',
479 id: 'top-panel',
480 width: 2000,
481 height: 55,
482// margin: '5 0 5 5',
483// border: 0,
484 bodyPadding: '5 0 5 5',
485 html: ''
486 });
487
488 var searchButton = Ext.create('Ext.Button', {
489 text: 'Search',
490 margin: '2 0 5 5',
491 handler: function() {
492// var pattern = getElementById('pattern');
493// serviceInfo.update(inputArea.getRawValue());
494// storeServices.removeAll();
495// storeServices.load({
496// params: {
497// dimserver: "",
498// dimnode: "",
499// dimserverid: ""
500// }
501// });
502 clearServices();
503 var pattern = inputArea.getRawValue();
504 query(pattern, 0);
505 }
506 });
507
508 var allButton = Ext.create('Ext.Button', {
509 text: 'Show All',
510 margin: '2 0 5 5',
511 handler: function() {
512// var pattern = getElementById('pattern');
513// serviceInfo.update(inputArea.getRawValue());
514// var pattern = inputArea.getRawValue();
515// query(pattern);
516// storeServices.removeAll();
517// storeServices.load({
518// params: {
519// dimserver: "",
520// dimnode: "",
521// dimserverid: ""
522// }
523// });
524 clearServices();
525 var pattern = "";
526 query(pattern, 0);
527 }
528 });
529
530 var searchInfo = Ext.create('Ext.Panel', {
531 layout: 'fit',
532 id: 'search-panel',
533// title: 'Service Info',
534// region: 'east',
535// bodyStyle: 'padding-bottom:15px;background:#eee;',
536// autoScroll: true,
537 margin: '5 0 5 10',
538// bodyBorder: false,
539 border: 0,
540 html: ''
541 });
542
543 var inputArea = Ext.create('Ext.form.field.Text', {
544 width: 400,
545 id: 'pattern',
546 xtype: 'textfield',
547 name: 'Search pattern',
548 fieldLabel: 'pattern',
549 labelWidth: 45,
550// allowBlank: false,
551 margin: '2 0 5 5'
552 });
553
554 var searchArea = Ext.create('Ext.form.Panel', {
555 layout: 'hbox',
556 title: 'Service Search',
557 width: 2000,
558// height: 30,
559// margins: '2 0 5 5',
560 items: [inputArea, searchButton, allButton, searchInfo]
561 });
562
563
564 Ext.create('Ext.Viewport', {
565 layout: 'border',
566 title: 'DID',
567 items: [{
568 layout: 'vbox',
569 id: 'layout-browser3',
570 region:'north',
571 border: false,
572 split:true,
573 margins: '2 0 5 5',
574 items: [headerList, searchArea]
575 },{
576 layout: 'fit',
577 id: 'layout-browser',
578 region:'west',
579 border: false,
580 split:true,
581 margins: '2 0 5 5',
582 width: 220,
583 minSize: 100,
584 maxSize: 500,
585 items: [nodeTree]
586 },{
587 layout: 'fit',
588 id: 'layout-browser1',
589 region:'center',
590 border: false,
591 split:true,
592 margins: '2 0 5 5',
593 minSize: 100,
594 maxSize: 500,
595// items: [nodeTree, serviceList]
596 items: [serviceList]
597 },{
598 layout: 'fit',
599 id: 'layout-browser2',
600 region:'east',
601 border: false,
602 split:true,
603 margins: '2 0 5 5',
604 width: 580,
605 minSize: 100,
606 maxSize: 600,
607 items: [serviceCommandArea]
608 }
609 ],
610 renderTo: Ext.getBody()
611 });
612 commandInfoArea.setVisible(0);
613// storeHeader.load();
614// pollid = window.setTimeout(poll, 1000);
615 poll();
616});
Note: See TracBrowser for help on using the repository browser.