@cryptotaxi247 / MeshCentral / commits / 0078ad4c

Moving 90% of style definition from default.handlebars to style.css

Jovan Strika committed Apr 8, 2019 at 00:14 UTC 0078ad4c5f417248f75d17b35835c898391a6c2d
2 files changed +1059 -298
public/styles/style.css
+590 -7
@@ -6,6 +6,7 @@
6 font-size: 13px;
7 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
8 background-color: #d3d9d6;
9 + overflow-y: hidden;
10 }
11
12 #container {
@@ -29,6 +30,15 @@
30 border-left: 0px none #b7b7b7;
31 }
32
33 + .fulldesk #container {
34 + width: 100%;
35 + min-width: 700px;
36 + min-height: 0px;
37 + border-right: 0px none #b7b7b7;
38 + border-left: 0px none #b7b7b7;
39 + position: unset;
40 + }
41 +
42 #masthead {
43 width: auto;
44 margin: 0;
@@ -49,6 +59,16 @@
59 width: 100%;
60 }
61
62 + .fulldesk #masthead {
63 + display: none;
64 + }
65 + .fulldesk #mastheadx {
66 + display: none;
67 + }
68 + .fulldesk #p11deviceNameHeader {
69 + display: none;
70 + }
71 +
72 #masthead .title {
73 float: left;
74 height: 66px;
@@ -84,6 +104,13 @@
104 .arg_hide #page_content {
105 left: 0px;
106 }
107 + .fulldesk #page_content {
108 + position: static;
109 + top: 0;
110 + left: 0;
111 + right: 0;
112 + bottom: 0;
113 + }
114
115 #page_leftbar {
116 height: calc(100vh - 66px);
@@ -93,7 +120,6 @@
120 background: #113962;
121 background: linear-gradient(to bottom, #104893 0%,#113962 100%);
122 color: white;
96 - display: none;
123 }
124 .fullscreen #page_leftbar {
125 display: block;
@@ -101,11 +127,19 @@
127 .arg_hide #page_leftbar {
128 display: none;
129 }
130 + .fulldesk #page_leftbar {
131 + display: none;
132 + }
133
134 #topbar {
135 /* height: 24px; */
136 position: relative;
137 }
138 +
139 + .fulldesk #topbar {
140 + display: none;
141 + }
142 +
143 .topbar_td {
144 width: 100px;
145 height: 24px;
@@ -129,6 +163,16 @@
163 height: 22px
164 }
165
166 +#MainMenuSpan {
167 + display: table;
168 +}
169 + .fullscreen #MainMenuSpan {
170 + display: none;
171 + }
172 + .fulldesk #MainMenuSpan {
173 + display: none;
174 + }
175 +
176 #column_l {
177 position: relative;
178 float: left;
@@ -139,6 +183,9 @@
183 max-height: calc(100vh - 111px);
184 min-width: unset;
185 }
186 +.room4submenu {
187 + max-height: calc(100vh - 159px) !important;
188 +}
189
190 .fullscreen #column_l {
191 height: calc(100vh - 135px);
@@ -146,6 +193,18 @@
193 overflow-y: auto;
194 }
195
196 + .fulldesk #column_l {
197 + width: 100%;
198 + height: unset;
199 + margin-left: unset;
200 + overflow-y: unset;
201 + padding: 0;
202 + max-height: unset;
203 + }
204 + .fulldesk #column_l_bottomgap {
205 + display: none;
206 + }
207 +
208 #centralTable {
209 width: 100%;
210 }
@@ -203,6 +262,9 @@
262 padding-top: 5px;
263 padding-bottom: 5px;
264 }
265 + .fulldesk #footer {
266 + display: none;
267 + }
268
269 /* Support for footer made with table */
270 #footer table {
@@ -261,9 +323,8 @@
323 border-radius: 5px;
324 position: fixed;
325 top: 180px;
264 - left: 50%;
326 + left: calc((100% / 2) - 200px);
327 width: 400px;
266 - margin-left: -200px;
328 }
329
330 #dialogHeader {
@@ -278,6 +339,17 @@
339 margin-left: 8px;
340 }
341
342 +.dialogText {
343 + width: 100%;
344 + max-height: 260px;
345 + overflow-x: hidden;
346 + overflow-y: auto;
347 + line-height: 160%
348 +}
349 +.dialogTextLog {
350 + font-size:10px
351 +}
352 +
353 #dialog1 {
354 margin: auto;
355 text-align: center;
@@ -313,11 +385,392 @@
385 width: 80px;
386 }
387
388 +#ua_fileaccessquota {
389 + width: 80px;
390 + text-align: right
391 +}
392 +
393 +#broadcastMessage {
394 + width: 370px;
395 + height: 100px;
396 + resize: none;
397 +}
398 +
399 +#idx_deskFullBtn2 {
400 + float: left;
401 + font-size: large;
402 + cursor: pointer;
403 + display: none;
404 +}
405 + .fulldesk #idx_deskFullBtn2 {
406 + display: block;
407 + }
408 + .fulldesk #deskFullBtn {
409 + display: none;
410 + }
411 +
412 #p0message {
413 margin: 50px;
414 text-align: center;
415 }
416
417 +#devListToolbarViewIcons {
418 + float:right;
419 +}
420 +
421 +#devListToolbarSpan {
422 + width: 100%;
423 + height: 24px;
424 + background-color: #d3d9d6;
425 + vertical-align: middle;
426 + border-spacing: 0
427 +}
428 +
429 +#SearchInput {
430 + width:120px;
431 +}
432 +
433 +#devListToolbarView, #devListToolbarSort, #devListToolbarSize {
434 + float: right;
435 +}
436 +
437 +#refreshmap {
438 + margin-left:5px;
439 +}
440 +
441 +/* Example if <table> is relplaced with <div><p> then image can be defined in css
442 +#NoMeshesPanel {
443 + background: url(../images/info.png) no-repeat 23px 20px;
444 + height: 48px;
445 + width: 47px;
446 + width: 100%;
447 + border: none;
448 + margin: auto;
449 + padding: 20px;
450 +}
451 + #NoMeshesPanel p {
452 + display: inline-block;
453 + vertical-align: middle;
454 + margin-left: 60px;
455 + } */
456 +
457 + #NoMeshesPanel a {
458 + cursor: pointer;
459 + }
460 + #NoMeshesPanel table {
461 + width: 100%;
462 + padding: 20px
463 + }
464 + NoMeshesPanel img {
465 + height: 48px;
466 + width: 47px;
467 + }
468 +
469 +#xdevices {
470 + max-height: calc(100vh - 239px);
471 + overflow-y: auto;
472 + overflow-x: hidden;
473 + -webkit-overflow-scrolling: touch;
474 +}
475 +
476 +#xdevicesmap {
477 + height: calc(100vh - 239px);
478 + width: 100%;
479 + overflow: hidden;
480 + position: relative;
481 +}
482 +#xmapSearchResultsDlg {
483 + position: absolute;
484 + max-height: 280px;
485 + left: 5px;
486 + top: 5px;
487 + max-width: 250px;
488 + z-index: 1000;
489 + background-color: #EEE;
490 + box-shadow: 0px 0px 15px #666;
491 +}
492 +#xmapSearchResultsBck {
493 + width: 100%;
494 + background-color: #003366;
495 + color: #FFF;
496 + border-radius: 5px 5px 0 0;
497 +}
498 +
499 +#xmapSearchClose {
500 + float: right;
501 + padding: 5px;
502 + cursor: pointer;
503 +}
504 +
505 +.xmapItem {
506 + overflow-y: auto;
507 + width: 100%;
508 + max-height: 240px
509 +}
510 +.xmapItemSel1 {
511 + cursor: pointer;
512 + padding: 5px;
513 + background-color: #F5F5F5;
514 +}
515 +.xmapItemSel1 {
516 + cursor: pointer;
517 + padding: 5px;
518 + background-color: #EBEBEB;
519 +}
520 +
521 +#xmap-info-window {
522 + text-shadow: 0px 0px 15px #FFF
523 +}
524 +
525 +#p2 a, #p6 a, #p10 a {
526 + cursor: pointer;
527 +}
528 +
529 +#p2AccountImage {
530 + width: 150px;
531 + height: 103px;
532 + margin-bottom: 10px;
533 + margin-right: 20px;
534 + float:right;
535 +}
536 +
537 +.p2AccountActions {
538 + width: 15px;
539 + display: inline-block;
540 +}
541 +.p2AccountActions span {
542 + color: green;
543 + font-size: 10px;
544 +}
545 +
546 +.newMeshBtn {
547 + background: url(../images/icon-addnew.png) no-repeat 0px 0px;
548 + height: 12px;
549 + width: 12px;
550 + cursor: pointer;
551 + border: none;
552 + padding-left: 15px;
553 +}
554 +
555 +#p2noMeshFound, #p2ServerActionsBackup, #p2ServerActionsRestore, #p2ServerActionsVersion, #p2ServerActionsErrors, #serverStats {
556 + margin-left:40px;
557 +}
558 +
559 +.pTable {
560 + width: 100%;
561 + height: 24px;
562 + background-color: #d3d9d6;
563 + margin-bottom: 4px;
564 + vertical-align: middle;
565 + border-spacing: 0;
566 +
567 +}
568 +
569 +#p3users {
570 + max-height: calc(100vh - 243px);
571 + overflow-y: auto;
572 +}
573 +.p3usersTable {
574 + width: 100%;
575 + border-spacing: 0;
576 + padding: 0;
577 +}
578 +.p3usersTable th {
579 + color: gray;
580 +}
581 +
582 +#p3events {
583 + height: calc(100vh - 243px);
584 + overflow-y: scroll
585 +}
586 +
587 +.p3eventsTable {
588 + width: 100%;
589 + border-spacing: 0;
590 + padding: 0;
591 +}
592 +.p3eventsTable {
593 + width: 100%;
594 + border-spacing: 0;
595 + padding: 0;
596 +}
597 +
598 +#p4name, #p4email, #p4pass1, #p4pass2 {
599 + width: 230px;
600 +}
601 +
602 +#p5filehead {
603 + width: 100%;
604 + background-color: #d3d9d6;
605 + text-align: left;
606 + padding: 4px;
607 +}
608 +
609 +#p5filesubhead {
610 + background-color: #E4E9E7;
611 + height: 28px;
612 +}
613 +
614 +#p5rightOfButtons {
615 + float: right;
616 + margin-top: 3px;
617 +}
618 +
619 +#p5filetable {
620 + width: 100%;
621 + height: calc(100vh - 294px);
622 + overflow: auto;
623 + -webkit-user-select: none;
624 + position: relative;
625 +}
626 +
627 +#p5PublicShare {
628 + display: none;
629 + width: 100%;
630 + overflow: auto;
631 + -webkit-user-select: none;
632 + background-color: lightsteelblue;
633 +}
634 +
635 +#bigok {
636 + width: 256px;
637 + overflow: hidden;
638 + position: absolute;
639 + left: 337px;
640 + top: 20px;
641 + text-align: center;
642 + font-size: 1600%;
643 + color: #AAAAAA;
644 +}
645 +
646 +#bigfail {
647 + width: 256px;
648 + overflow: hidden;
649 + position: absolute;
650 + left: 337px;
651 + top: 20px;
652 + text-align: center;
653 + font-size: 1600%;
654 + color: #AAAAAA;
655 +}
656 +
657 +.chartViewCanvas {
658 + width: 60px;
659 + display: inline-block;
660 +}
661 +
662 +.chartViewText {
663 + width: 160px;
664 + display: inline-block;
665 +}
666 +
667 +#serverCpuChart, #serverMemoryChart {
668 + width: 60px;
669 + height: 60px;
670 +}
671 +
672 +#p10BackButton, #p11BackButton {
673 + float:left
674 +}
675 +
676 +#p10html2 table {
677 + color: black;
678 + background-color: #EEE;
679 + border-color: #AAA;
680 + border-width: 1px;
681 + border-style: solid;
682 + border-collapse: collapse;
683 + width: 100%;
684 +}
685 + #p10html2 thead {
686 + background-color:#AAAAAA;
687 + font-weight:bold;
688 + }
689 + #p10html2 thead tr {
690 + background-color:#AAAAAA;
691 + font-weight:bold;
692 + }
693 + #p10html2 thead img {
694 + float: right;
695 + cursor: pointer;
696 + padding: 3px;
697 + }
698 + #p10html2 .altBack {
699 + background-color: #DDD;
700 + }
701 +
702 +.pwState {
703 + display: table-cell;
704 + height: 16px;
705 +}
706 +.pwsYellow { background-color: yellow; }
707 +.pwsTransparent { background-color: #00000000; }
708 +.pwsBlack { background-color: black; }
709 +.pwsBlue { background-color: blue; }
710 +.pwsBlue2 { background-color: blue; }
711 +.pwsLightblue { background-color: lightblue; }
712 +.pwsBlueviolet { background-color: blueviolet; }
713 +.pwsDarkgreen { background-color: darkgreen; }
714 +.pwsLightseagreen { background-color: lightseagreen; }
715 +.pwsLightseagreen2 { background-color: lightseagreen; }
716 +
717 +.p10html3right {
718 + float: right;
719 + font-size: x-small;
720 +}
721 +
722 +.p10html3left {
723 + font-size: x-small;
724 +}
725 +
726 +#MainComputerImage {
727 + border-width: 0px;
728 + height: 200px;
729 + width: 200px;
730 +}
731 +
732 +#MainComputerState {
733 + font-size: 12px;
734 + font-weight: bold;
735 + width: 100%;
736 + text-align: center;
737 +}
738 +
739 +#d2groupop {
740 + float: right;
741 + width: 250px;
742 +}
743 +
744 +#p12warning, #p12warning2, #p14warning, #p14warning2 {
745 + max-width: 100%;
746 + display:none;
747 + cursor: pointer;
748 + margin-bottom: 5px;
749 +}
750 +
751 +#MainMeshImage {
752 + border-width: 0px;
753 + height: 200px;
754 + width: 200px;
755 + float: right;
756 +}
757 +
758 +#DeskTools {
759 + position: absolute;
760 + width: 400px;
761 + height: 100%;
762 + background-color: gray;
763 + top: 0;
764 + right: 0;
765 + border-left: 2px solid lightgray;
766 + display: none;
767 +}
768 +#DeskToolsRefreshButton {
769 + float: right;
770 + padding: 3px;
771 + cursor: pointer;
772 +}
773 +
774 a {
775 color: #036;
776 text-decoration: underline;
@@ -559,6 +1012,14 @@ a {
1012 background-color: #606060;
1013 }
1014
1015 + .style3x.fullselect {
1016 + background-color: #003366;
1017 + }
1018 +
1019 + .style3x.semiselect {
1020 + background-color: #606060;
1021 + }
1022 +
1023 .style3sel {
1024 text-align: center;
1025 color: white;
@@ -566,6 +1027,7 @@ a {
1027 font-weight: bold;
1028 }
1029
1030 +
1031 .style4 {
1032 color: white;
1033 text-decoration: none;
@@ -578,13 +1040,20 @@ a {
1040 }
1041
1042 .style6 {
581 - text-align: center;
1043 + text-align: left;
1044 background-color: #D3D9D6;
1045 + padding:3px;
1046 }
1047
1048 .style7 {
1049 font-size: large;
1050 background-color: #FFFFFF;
1051 + width: 180px;
1052 +}
1053 +
1054 +.style9 {
1055 + max-width: 400px;
1056 + overflow: hidden;
1057 }
1058
1059 .style10 {
@@ -597,6 +1066,7 @@ a {
1066 }
1067
1068 .style14 {
1069 + height: 100%;
1070 text-align: left;
1071 background-color: #D3D9D6;
1072 }
@@ -606,6 +1076,17 @@ a {
1076 background-color: #D3D9D6;
1077 }
1078
1079 +.icon2 {
1080 + float: left;
1081 + margin: 7px;
1082 +}
1083 +
1084 +.warningbox {
1085 + width: auto;
1086 + border-radius: 8px;
1087 + padding: 8px;
1088 + background-color: lightsalmon;
1089 +}
1090
1091 .fileIcon1 {
1092 background: url(data:image/gif;base64,R0lGODlhEAAQAJEDAPb49Y2Sj9LT2f///yH5BAEAAAMALAAAAAAQABAAAAImnI+py+1vhJwyUYAzHTL4D3qdlJWaIFJqmKod607sDKIiDUP63hQAOw==);
@@ -686,6 +1167,13 @@ a {
1167 background-repeat: repeat;
1168 background-attachment: scroll;
1169 }
1170 + #p3events .g1 {
1171 + float: none;
1172 + }
1173 + #p3users .g1 {
1174 + height:24px;
1175 + float: left;
1176 + }
1177
1178 .g1s {
1179 background-image: linear-gradient(to right, #ffffff 0%, #b9b9b9 100%);
@@ -704,11 +1192,26 @@ a {
1192 background-repeat: repeat;
1193 background-attachment: scroll;
1194 }
1195 + #p3events .g2 {
1196 + float: none;
1197 + }
1198 + #p3users .g2 {
1199 + height:24px;
1200 + float: right;
1201 + }
1202
1203 .g2s {
1204 background-image: linear-gradient(to right, #b9b9b9 0%, #ffffff 100%);
1205 }
1206
1207 +.h1pre {
1208 + width: 16px;
1209 + height: 100%;
1210 + float: left;
1211 + font-size: large;
1212 + background-color: #FFFFFF;
1213 +}
1214 +
1215 .h1 {
1216 background-position: 0% 0%;
1217 width: 14px;
@@ -722,6 +1225,13 @@ a {
1225 background-attachment: scroll;
1226 }
1227
1228 +.h2end {
1229 + height: 100%;
1230 + width: 20px;
1231 + float: right;
1232 + background-color: #ffffff
1233 +}
1234 +
1235 .h2 {
1236 background-position: 0% 0%;
1237 width: 14px;
@@ -762,6 +1272,23 @@ a {
1272 float: left;
1273 margin-bottom: 2px;
1274 }
1275 + #p3users .bar {
1276 + width: 100%;
1277 + font-size: medium;
1278 + }
1279 +
1280 +.baricon {
1281 + float: left;
1282 + height: 24px;
1283 + width: 24px;
1284 + background-color: white;
1285 +}
1286 + .baricon div {
1287 + width: 16px;
1288 + margin-top: 4px;
1289 + margin-left: 2px;
1290 + height: 16px
1291 + }
1292
1293 .bar2 {
1294 font-size: large;
@@ -905,14 +1432,61 @@ a {
1432 cursor: pointer;
1433 padding: 4px
1434 }
908 -.deskToolsBar {
909 - padding:3px;
1435 +
1436 +#deskarea3x {
1437 + background: black;
1438 + text-align: center;
1439 + position: relative;
1440 + overflow: hidden;
1441 +}
1442 +
1443 +#DeskFocus {
1444 + overflow: hidden;
1445 + color: transparent;
1446 + border:3px dotted rgba(255,0,0,.2);
1447 + position: absolute;
1448 + border-radius: 5px;
1449 +}
1450 +
1451 +#DeskParent {
1452 + overflow:hidden
1453 +}
1454 +
1455 +#Desk {
1456 + overflow: hidden;
1457 + width: 100%;
1458 + -ms-touch-action: none;
1459 + margin-left: 0px;
1460 +}
1461 +
1462 +
1463 +#deskToolsBar {
1464 + position: absolute;
1465 + padding: 3px;
1466 + border-radius: 3px 3px 0px 0px;
1467 + top: 5px;
1468 + left: 4px;
1469 + bottom: 26px;
1470 + background-color:lightgray;
1471 + cursor: pointer;
1472 }
1473
1474 +#DeskToolsProcesses {
1475 + overflow-y: scroll;
1476 + position: absolute;
1477 + top: 24px;
1478 + bottom: 0px;
1479 + width: 100%
1480 +}
1481 +
1482 +.deskToolsBar {
1483 + padding: 3px;
1484 +}
1485 .deskToolsBar:hover {
1486 background-color: #EFE8B6;
1487 }
1488
1489 +
1490 .userTableHeader {
1491 border-bottom: 1pt solid lightgray;
1492 padding-top: 4px;
@@ -1006,8 +1580,17 @@ a {
1580
1581 .hoverButton {
1582 opacity: 0.5;
1583 + width: 10px;
1584 + height: 10px;
1585 }
1586
1587 .hoverButton:hover {
1588 opacity: 1;
1013 - }
\ No newline at end of file
1589 + }
1590 +
1591 +.tagSpan {
1592 + background-color: lightgray;
1593 + padding: 3px;
1594 + margin-right: 4px;
1595 + border-radius: 5px;
1596 +}
\ No newline at end of file
views/default.handlebars
+469 -291
@@ -25,12 +25,12 @@
25 <script type="text/javascript" src="scripts/agent-redir-rtc-0.1.0.js"></script>
26 <script type="text/javascript" src="scripts/agent-desktop-0.0.2.js"></script>
27 <script type="text/javascript" src="scripts/qrcode.min.js"></script>
28 - <script type="text/javascript" src="scripts/u2f-api.js"></script>
28 + <script keeplink=1 type="text/javascript" src="scripts/u2f-api.js"></script>
29 <script keeplink=1 type="text/javascript" src="scripts/charts.js"></script>
30 <script keeplink=1 type="text/javascript" src="scripts/filesaver.1.1.20151003.js"></script>
31 <script keeplink=1 type="text/javascript" src="scripts/ol.js"></script>
32 <script keeplink=1 type="text/javascript" src="scripts/ol3-contextmenu.js"></script>
33 - <title>MeshCentral</title>
33 + <title>{{{title}}}</title>
34 </head>
35 <body id="body" onload="if (typeof(startup) !== 'undefined') startup();" oncontextmenu="handleContextMenu(event)" style="display:none">
36 <!-- right click menu -->
@@ -42,112 +42,107 @@
42 <div id="cxevents" class="cmtext" onclick="cmaction(5,event)">Events</div>
43 <div id="cxconsole" class="cmtext" onclick="cmaction(6,event)">Console</div>
44 <hr id="cxmgroupsplit" />
45 - <div id="cxmdesktop" class="cmtext" onclick="cmaction(7,event)" style=display:none>Multi-Desktop</div>
45 + <div id="cxmdesktop" class="cmtext" onclick="cmaction(7,event)" style="display:none">Multi-Desktop</div>
46 </div>
47 <div id="meshContextMenu" class="contextMenu,noselect" style="display: none; min-width: 0px">
48 <div id="cxselectall" class="cmtext" onclick="cmmeshaction(1,event)">Select All</div>
49 <div id="cxselectnone" class="cmtext" onclick="cmmeshaction(2,event)">Select None</div>
50 - <hr id="cxmgroupsplit2" style=display:none />
51 - <div id="cxmmdesktop" class="cmtext" style=display:none onclick="cmmeshaction(3,event)">Multi-Desktop</div>
50 + <hr id="cxmgroupsplit2" style="display:none" />
51 + <div id="cxmmdesktop" class="cmtext" style="display:none" onclick="cmmeshaction(3,event)">Multi-Desktop</div>
52 </div>
53 <!-- main page -->
54 <div id=container style=max-height:100vh;position:relative>
55 <div id="notifiyBox" class="notifiyBox" style="display:none"></div>
56 <div id=mastheadx></div>
57 - <div id=masthead class=noselect style="background:url(logo.png) 0px 0px;background-color:#036;background-repeat:no-repeat;height:66px;width:100%;overflow:hidden">
58 - <div style="float:left;height:66px;color:#c8c8c8;padding-left:20px;padding-top:8px">
59 - <strong><font style="font-size:46px;font-family:Arial,Helvetica,sans-serif">{{{title}}}</font></strong>
60 - </div>
61 - <div style="float:left;height:66px;color:#c8c8c8;padding-left:5px;padding-top:14px">
62 - <strong><font style="font-size:14px;font-family:Arial,Helvetica,sans-serif">{{{title2}}}</font></strong>
63 - </div>
57 + <div id=masthead class=noselect>
58 + <div class="title">{{{title}}}</div>
59 + <div class="title2">{{{title2}}}</div>
60 <div style="float:right">
65 - <div id=notificationCount onclick="clickNotificationIcon()" class="unselectable" style="display:none;min-width:28px;font-size:20px;border-radius:5px;background-color:lightblue;text-align:center;margin:8px;cursor:pointer;padding:4px" title="Click to view current notifications">0</div>
61 + <div id=notificationCount onclick="clickNotificationIcon()" class="unselectable" style="display: none;" title="Click to view current notifications">0</div>
62 </div>
63 <p id="logoutControl">{{{logoutControl}}}</p>
64 </div>
69 - <div id="page_leftbar" style="height:calc(100vh - 66px);width:90px;position:absolute;z-index:1000;background:#113962;background:linear-gradient(to bottom, #104893 0%,#113962 100%);color:white;display:none">
65 + <div id="page_leftbar">
66 <div style="height:16px"></div>
67 <div id=LeftMenuMyDevices class="lbbutton lbbuttonsel" title="My Devices" onclick=go(1)>
72 - <div class="lb2" style="position:absolute;top:6px;left:6px"></div>
68 + <div class="lb2"></div>
69 </div>
70 <div id=LeftMenuMyAccount class="lbbutton" title="My Account" onclick=go(2)>
75 - <div class="lb1" style="position:absolute;top:6px;left:6px"></div>
71 + <div class="lb1"></div>
72 </div>
73 <div id=LeftMenuMyEvents class="lbbutton" title="My Events" onclick=go(3)>
78 - <div class="lb3" style="position:absolute;top:6px;left:6px"></div>
74 + <div class="lb3"></div>
75 </div>
76 <div id=LeftMenuMyFiles class="lbbutton" title="My Files" onclick=go(5)>
81 - <div class="lb4" style="position:absolute;top:6px;left:6px"></div>
77 + <div class="lb4"></div>
78 </div>
79 <div id=LeftMenuMyUsers class="lbbutton" title="My Users" onclick=go(4)>
84 - <div class="lb5" style="position:absolute;top:6px;left:6px"></div>
80 + <div class="lb5"></div>
81 </div>
82 <div id=LeftMenuMyServer class="lbbutton" title="My Server" onclick=go(6) style="display:none">
87 - <div class="lb6" style="position:absolute;top:6px;left:6px"></div>
83 + <div class="lb6"></div>
84 </div>
85 </div>
90 - <div id="page_content" style="max-height:calc(100vh - 130px)">
86 + <div id="page_content">
87 <div id=topbarmaster>
88 <div id=topbar class=noselect>
89 <div>
90 <div style="position:relative">
95 - <div style="position:absolute;top:3px;right:6px">
96 - <span title="Toggle full width" style="cursor:pointer;color:white" onclick="toggleFullScreen(1)">&harr;</span>
97 - </div>
98 - <table id=MainMenuSpan style=width:100%;height:22px cellpadding=0 cellspacing=0 class=style1>
91 + <div id=toggle title="Toggle full width" onclick="toggleFullScreen(1)">&harr;</div>
92 + <table id=MainMenuSpan cellpadding=0 cellspacing=0 class=style1>
93 <tr>
100 - <td id=MainMenuMyDevices style=width:100px;height:24px;cursor:pointer class=style3x onclick=go(1)>My Devices</td>
101 - <td id=MainMenuMyAccount style=width:100px;height:24px;cursor:pointer class=style3x onclick=go(2)>My Account</td>
102 - <td id=MainMenuMyEvents style=width:100px;height:24px;cursor:pointer class=style3x onclick=go(3)>My Events</td>
103 - <td id=MainMenuMyFiles style=width:100px;height:24px;cursor:pointer class=style3x onclick=go(5)>My Files</td>
104 - <td id=MainMenuMyUsers style=width:100px;height:24px;cursor:pointer;display:none class=style3x onclick=go(4)>My Users</td>
105 - <td id=MainMenuMyServer style=width:100px;height:24px;cursor:pointer;display:none class=style3x onclick=go(6)>My Server</td>
106 - <td class=style3 style="text-align:right;height:24px">&nbsp;</td>
94 + <td id=MainMenuMyDevices class="topbar_td style3x" onclick=go(1)>My Devices</td>
95 + <td id=MainMenuMyAccount class="topbar_td style3x" onclick=go(2)>My Account</td>
96 + <td id=MainMenuMyEvents class="topbar_td style3x" onclick=go(3)>My Events</td>
97 + <td id=MainMenuMyFiles class="topbar_td style3x" onclick=go(5)>My Files</td>
98 + <td id=MainMenuMyUsers class="topbar_td style3x" onclick=go(4)>My Users</td>
99 + <td id=MainMenuMyServer class="topbar_td style3x" onclick=go(6)>My Server</td>
100 + <td class="topbar_td_end style3">&nbsp;</td>
101 </tr>
102 </table>
109 - <div id=MainSubMenuSpan style=display:none>
110 - <table id=MainSubMenu style=width:100%;height:22px cellpadding=0 cellspacing=0 class=style1>
103 + <div id=MainSubMenuSpan style="display:none">
104 + <table id=MainSubMenu cellpadding=0 cellspacing=0 class=style1>
105 <tr>
112 - <td id=MainDev style=width:100px;height:24px;cursor:pointer class=style3x onclick=go(10)>General</td>
113 - <td id=MainDevDesktop style=width:100px;height:24px;cursor:pointer class=style3x onclick=go(11)>Desktop</td>
114 - <td id=MainDevTerminal style=width:100px;height:24px;cursor:pointer class=style3x onclick=go(12)>Terminal</td>
115 - <td id=MainDevFiles style=width:100px;height:24px;cursor:pointer;display:none class=style3x onclick=go(13)>Files</td>
116 - <td id=MainDevEvents style=width:100px;height:24px;cursor:pointer class=style3x onclick=go(16)>Events</td>
117 - <td id=MainDevAmt style=width:100px;height:24px;cursor:pointer class=style3x onclick=go(14)>Intel&reg; AMT</td>
118 - <td id=MainDevConsole style=width:100px;height:24px;cursor:pointer class=style3x onclick=go(15)>Console</td>
119 - <td class=style3 style=height:24px>&nbsp;</td>
106 + <td id=MainDev class="topbar_td style3x" onclick=go(10)>General</td>
107 + <td id=MainDevDesktop class="topbar_td style3x" onclick=go(11)>Desktop</td>
108 + <td id=MainDevTerminal class="topbar_td style3x" onclick=go(12)>Terminal</td>
109 + <td id=MainDevFiles class="topbar_td style3x" onclick=go(13)>Files</td>
110 + <td id=MainDevEvents class="topbar_td style3x" onclick=go(16)>Events</td>
111 + <td id=MainDevAmt class="topbar_td style3x" onclick=go(14)>Intel&reg; AMT</td>
112 + <td id=MainDevConsole class="topbar_td style3x" onclick=go(15)>Console</td>
113 + <td class="topbar_td_end style3">&nbsp;</td>
114 </tr>
115 </table>
116 </div>
123 - <div id=MeshSubMenuSpan style=display:none>
124 - <table id=MeshSubMenu style=width:100%;height:22px cellpadding=0 cellspacing=0 class=style1>
117 + <div id=MeshSubMenuSpan style="display:none">
118 + <table id=MeshSubMenu cellpadding=0 cellspacing=0 class=style1>
119 <tr>
126 - <td id=MeshGeneral style=width:100px;height:24px;cursor:pointer class=style3x onclick=go(20)>General</td>
127 - <td class=style3 style=height:24px>&nbsp;</td>
120 + <td id=MeshGeneral class="topbar_td style3x" onclick=go(20)>General</td>
121 + <td class="topbar_td_end style3">&nbsp;</td>
122 </tr>
123 </table>
124 </div>
131 - <div id=UserSubMenuSpan style=display:none>
132 - <table id=UserSubMenu style=width:100%;height:22px cellpadding=0 cellspacing=0 class=style1>
125 + <div id=UserSubMenuSpan style="display:none">
126 + <table id=UserSubMenu cellpadding=0 cellspacing=0 class=style1>
127 <tr>
134 - <td id=UserGeneral style=width:100px;height:24px;cursor:pointer class=style3x onclick=go(30)>General</td>
135 - <td id=UserEvents style=width:100px;height:24px;cursor:pointer class=style3x onclick=go(31)>Events</td>
136 - <td class=style3 style=height:24px>&nbsp;</td>
128 + <td id=UserGeneral class="topbar_td style3x" onclick=go(30)>General</td>
129 + <td id=UserEvents class="topbar_td style3x" onclick=go(31)>Events</td>
130 + <td class="topbar_td_end style3">&nbsp;</td>
131 </tr>
132 </table>
133 </div>
140 - <div id=ServerSubMenuSpan style=display:none>
141 - <table id=ServerSubMenu style=width:100%;height:22px cellpadding=0 cellspacing=0 class=style1>
134 + <div id=ServerSubMenuSpan style="display:none">
135 + <table id=ServerSubMenu cellpadding=0 cellspacing=0 class=style1>
136 <tr>
143 - <td id=ServerGeneral style=width:100px;height:24px;cursor:pointer class=style3x onclick=go(6)>General</td>
144 - <td id=ServerConsole style=width:100px;height:24px;cursor:pointer class=style3x onclick=go(115)>Console</td>
145 - <td class=style3 style=height:24px>&nbsp;</td>
137 + <td id=ServerGeneral class="topbar_td style3x" onclick=go(6)>General</td>
138 + <td id=ServerStats class="topbar_td style3x" onclick=go(40)>Stats</td>
139 + <td id=ServerConsole class="topbar_td style3x" onclick=go(115)>Console</td>
140 + <td class="topbar_td_end style3">&nbsp;</td>
141 </tr>
142 </table>
143 </div>
144 <div id=UserDummyMenuSpan>
150 - <table id=UserDummyMenu style=width:100%;height:22px cellpadding=0 cellspacing=0 class=style1>
145 + <table id=UserDummyMenu cellpadding=0 cellspacing=0 class=style1>
146 <tr><td class=style3 style="text-align:right;height:24px">&nbsp;</td></tr>
147 </table>
148 </div>
@@ -156,38 +151,38 @@
151 </div>
152 </div>
153 <div id="column_l">
159 - <div id=p0 style=display:none>
160 - <div id=p0message style=margin:50px;text-align:center><span id=p0span>Server disconnected</span>, <href onclick=reload() style=cursor:pointer><u>click to reconnect</u></href>.</div>
154 + <div id=p0 style="display:none">
155 + <div id=p0message><span id=p0span>Server disconnected</span>, <href onclick=reload() style=cursor:pointer><u>click to reconnect</u></href>.</div>
156 </div>
162 - <div id=p1 style=display:none>
163 - <div style="float:right;display:none" id="devListToolbarViewIcons">
157 + <div id=p1 style="display:none">
158 + <div style="display:none" id="devListToolbarViewIcons">
159 <div id=devViewButton1 class="viewSelector" onclick=onDeviceViewChange(1) title="Columns"><div class="viewSelector2"></div></div>
160 <div id=devViewButton2 class=viewSelector onclick=onDeviceViewChange(2) title="List"><div class="viewSelector1"></div></div>
161 <div id=devViewButton3 class=viewSelector onclick=onDeviceViewChange(3) title="Desktops"><div class="viewSelector3"></div></div>
162 <div id=devViewButton4 class=viewSelector onclick=onDeviceViewChange(4) title="Map"><div class="viewSelector4"></div></div>
163 </div><div><h1>My Devices</h1></div>
169 - <table class="noselect" style=width:100%;height:24px;background-color:#d3d9d6;vertical-align:middle;border-spacing:0>
164 + <table id="devListToolbarSpan" class="noselect">
165 <tr>
166 <td class=h1></td>
172 - <td id=devListToolbar class=style14 style=display:none>
167 + <td id=devListToolbar class=style14 style="display:none">
168 &nbsp;&nbsp;<input type="button" id="SelectAllButton" onclick="selectallButtonFunction();" value="Select All" />&nbsp;
169 <input type=button id=GroupActionButton disabled="disabled" value="Group Action" onclick=groupActionFunction() />&nbsp;
175 - <input id=SearchInput type=text style=width:120px placeholder=Filter onchange=masterUpdate(5) onkeyup=masterUpdate(5) autocomplete=off onfocus=onSearchFocus(1) onblur=onSearchFocus(0) />&nbsp;
170 + <input id=SearchInput type=text placeholder=Filter onchange=masterUpdate(5) onkeyup=masterUpdate(5) autocomplete=off onfocus=onSearchFocus(1) onblur=onSearchFocus(0) />&nbsp;
171 <label><input type=checkbox id=RealNameCheckBox onclick=onRealNameCheckBox() /><span title="Show devices operating system name">OS Name</span></label>
172 </td>
178 - <td id=kvmListToolbar class=style14 style=height:100%;display:none>
173 + <td id=kvmListToolbar class=style14 style="display:none">
174 &nbsp;&nbsp;<input type="button" onclick="connectAllKvmFunction()" value="Connect All" />&nbsp;
175 <input type="button" onclick="disconnectAllKvmFunction()" value="Disconnect All" />&nbsp;
176 <label><input type="checkbox" id="autoConnectDesktopCheckbox" onclick="autoConnectDesktops(event)" title="Automatic connect" />Auto&nbsp;</label>
177 <input type="button" onclick="showMultiDesktopSettings()" value="Settings" />&nbsp;
178 </td>
184 - <td id=devMapToolbar class=style14 style=height:100%;display:none>
179 + <td id=devMapToolbar class=style14 style="display:none">
180 &nbsp;&nbsp;<input type=text id=mapSearchLocation placeholder="Search Location" onfocus=onMapSearchFocus(1) onblur=onMapSearchFocus(0) />
181 <input type=button value=Search title="Search for location" onclick=getSearchLocation() />
187 - <input type=button id=refreshmap title="Reset map view" value=Reset style=margin-left:5px onclick=refreshMap(false,true) />
182 + <input type=button id=refreshmap title="Reset map view" value=Reset onclick=refreshMap(false,true) />
183 </td>
184 <td class="auto-style1" style=height:100%>
190 - <div style="float:right;display:none" id=devListToolbarView>
185 + <div style="display:none" id=devListToolbarView>
186 View
187 <select id=viewselect onchange=onDeviceViewChange()>
188 <option value=1>Columns</option>
@@ -196,7 +191,7 @@
191 <option id=viewselectmapoption value=4>Map</option>
192 </select>
193 </div>
199 - <div style=float:right;display:none id=devListToolbarSort>
194 + <div style="display:none" id=devListToolbarSort>
195 Sort
196 <select id=sortselect onchange=masterUpdate(6)>
197 <option>Group</option>
@@ -206,7 +201,7 @@
201 </select>
202 &nbsp;
203 </div>
209 - <div style=float:right;display:none id=devListToolbarSize>
204 + <div style="display:none" id=devListToolbarSize>
205 Size
206 <select id=sizeselect onchange=onDeviceViewChange()>
207 <option value=0>Small</option>
@@ -219,65 +214,65 @@
214 <td class=h2></td>
215 </tr>
216 </table>
222 - <div id=NoMeshesPanel style=display:none>
223 - <table style="width:100%;padding:20px">
217 + <div id=NoMeshesPanel style="display:none">
218 + <table>
219 <tr>
220 <td valign="top" style="width: 50px">
226 - <img src="images/info.png" height="48" width="47" />
221 + <img src="images/info.png" />
222 </td>
223 <td>
229 - To get started, <a onclick=account_createMesh() style=cursor:pointer><strong>click here to create a device group</strong></a>.
224 + To get started, <a onclick=account_createMesh() ><strong>click here to create a device group</strong></a>.
225 </td>
226 </tr>
227 </table>
228 </div>
234 - <div id="xdevices" class="noselect" style="max-height:calc(100vh - 239px);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;display:none"></div>
235 - <div id="xdevicesmap" style="height:calc(100vh - 239px);width:100%;overflow:hidden;position:relative;display:none">
236 - <div id=xmapSearchResultsDlg style="position:absolute;display:none;max-height:280px;left:5px;top:5px;max-width:250px;z-index:1000;background-color:#EEE;box-shadow:0px 0px 15px #666">
237 - <div style="width:100%;background-color:#003366;color:#FFF;border-radius:5px 5px 0 0">
238 - <div id=xmapSearchClose style=float:right;padding:5px;cursor:pointer onclick=mapCloseSearchWindow()><b>X</b></div>
229 + <div id="xdevices" class="noselect" style="display:none"></div>
230 + <div id="xdevicesmap" style="display:none">
231 + <div id=xmapSearchResultsDlg style="display:none">
232 + <div id=xmapSearchResultsBck>
233 + <div id=xmapSearchClose onclick=mapCloseSearchWindow()><b>X</b></div>
234 <div style=padding:5px>Location Results</div>
235 <div style=width:100%;margin:6px></div>
236 </div>
237 <div id=xmapSearchResults style=margin:6px></div>
238 </div>
239 </div>
245 - <div id="xmap-info-window" style="text-shadow: 0px 0px 15px #FFF"></div>
240 + <div id="xmap-info-window"></div>
241 </div>
242 <div id=p2 style="display:none">
243 <h1>My Account</h1>
249 - <img id="p2AccountImage" alt="" width=150 height=103 src=images/mainaccount.jpg style=margin-bottom:10px;margin-right:20px;float:right />
244 + <img id="p2AccountImage" alt="" src="images/mainaccount.jpg"/>
245 <div id="p2AccountSecurity" style="display:none">
246 <p><strong>Account security</strong></p>
247 <div style="margin-left:25px">
253 - <div id="manageAuthApp"><div style="width:15px;display:inline-block"><span id="authAppSetupCheck" style="color:green;font-size:10px"><strong>&#x2713;</strong></span></div><span><a onclick="account_manageAuthApp()" style="cursor:pointer">Manage authenticator app</a><br /></span></div>
254 - <div id="manageHardwareOtp"><div style="width:15px;display:inline-block"><span id="authKeySetupCheck" style="color:green;font-size:10px"><strong>&#x2713;</strong></span></div><span><a onclick="account_manageHardwareOtp(0)" style="cursor:pointer">Manage security keys</a><br /></span></div>
255 - <div id="manageOtp"><div style="width:15px;display:inline-block"><span id="authCodesSetupCheck" style="color:green;font-size:10px"><strong>&#x2713;</strong></span></div><span><a onclick="account_manageOtp(0)" style="cursor:pointer">Manage backup codes</a><br /></span></div>
248 + <div id="manageAuthApp"><div class="p2AccountActions"><span id="authAppSetupCheck"><strong>&#x2713;</strong></span></div><span><a onclick="account_manageAuthApp()">Manage authenticator app</a><br /></span></div>
249 + <div id="manageHardwareOtp"><div class="p2AccountActions"><span id="authKeySetupCheck"><strong>&#x2713;</strong></span></div><span><a onclick="account_manageHardwareOtp(0)">Manage security keys</a><br /></span></div>
250 + <div id="manageOtp"><div class="p2AccountActions"><span id="authCodesSetupCheck"><strong>&#x2713;</strong></span></div><span><a onclick="account_manageOtp(0)">Manage backup codes</a><br /></span></div>
251 </div>
252 </div>
253 <div id="p2AccountActions">
254 <p><strong>Account actions</strong></p>
255 <p style="margin-left:40px">
261 - <span id="verifyEmailId" style="display:none"><a onclick="account_showVerifyEmail()" style="cursor:pointer">Verify email</a><br /></span>
262 - <a onclick="account_showChangeEmail()" style="cursor:pointer">Change email address</a><br />
263 - <a onclick="account_showChangePassword()" style="cursor:pointer">Change password</a><span id="p2nextPasswordUpdateTime"></span><br />
264 - <a onclick="account_showDeleteAccount()" style="cursor:pointer">Delete account</a><br />
256 + <span id="verifyEmailId" style="display:none"><a onclick="account_showVerifyEmail()">Verify email</a><br /></span>
257 + <a onclick="account_showChangeEmail()">Change email address</a><br />
258 + <a onclick="account_showChangePassword()">Change password</a><span id="p2nextPasswordUpdateTime"></span><br />
259 + <a onclick="account_showDeleteAccount()">Delete account</a><br />
260 </p>
261 <br style=clear:both />
262 </div>
263 <strong>Device Groups</strong>
269 - ( <a onclick=account_createMesh() style=cursor:pointer><img height=12 src="images/icon-addnew.png" width=12 border=0 /> New</a> )
264 + ( <a onclick=account_createMesh() class="newMeshBtn"> New</a> )
265 <br /><br />
266 <div id=p2meshes></div>
272 - <div id=p2noMeshFound style=margin-left:40px;display:none>No device groups. <a onclick=account_createMesh() style=cursor:pointer><strong>Get started here!</strong></a></div>
267 + <div id=p2noMeshFound style="display:none">No device groups. <a onclick=account_createMesh()><strong>Get started here!</strong></a></div>
268 <br style=clear:both />
269 </div>
275 - <div id=p3 style=display:none>
270 + <div id=p3 style="display:none">
271 <h1>My Events</h1>
277 - <table style=width:100%;height:24px;background-color:#d3d9d6;margin-bottom:4px;vertical-align:middle;border-spacing:0>
272 + <table class="pTable">
273 <tr>
274 <td class=h1></td>
280 - <td>&nbsp;<input id=p2deleteall type=button onclick=showDeleteAllEventsDialog() style=display:none value="Delete All..." /></td>
275 + <td>&nbsp;<input id=p2deleteall type=button onclick=showDeleteAllEventsDialog() style="display:none" value="Delete All..." /></td>
276 <td class=auto-style1>
277 Show
278 <select id=p3limitdropdown onchange=refreshEvents()>
@@ -291,11 +286,11 @@
286 <td class=h2></td>
287 </tr>
288 </table>
294 - <div id=p3events style="height:calc(100vh - 243px);overflow-y:scroll"></div>
289 + <div id=p3events style=""></div>
290 </div>
296 - <div id=p4 style=display:none>
291 + <div id=p4 style="display:none">
292 <h1>My Users</h1>
298 - <table style=width:100%;height:24px;background-color:#d3d9d6;margin-bottom:4px;vertical-align:middle;border-spacing:0>
293 + <table class="pTable">
294 <tr>
295 <td class=h1></td>
296 <td class=style14>
@@ -310,14 +305,14 @@
305 <td class=h2></td>
306 </tr>
307 </table>
313 - <div id="p3users" style="max-height:calc(100vh - 243px);overflow-y:auto"></div>
308 + <div id="p3users"></div>
309 </div>
315 - <div id=p5 style=display:none>
310 + <div id=p5 style="display:none">
311 <h1>My Files</h1>
312 <table id="p5toolbar" style="width:100%" cellpadding="0" cellspacing="0">
313 <tr>
319 - <td style="width:100%;background-color:#d3d9d6;text-align:left;padding:4px" valign=bottom>
320 - <div id="p5rightOfButtons" style="float:right;margin-top:3px"></div>
314 + <td id="p5filehead" valign=bottom>
315 + <div id="p5rightOfButtons"></div>
316 <div>
317 <input type=button id=p5FolderUp disabled="disabled" onclick="p5folderup();" value="Up" />&nbsp;
318 <input type=button id=p5SelectAllButton disabled="disabled" onclick="p5selectallfile();" value="Select All" onkeypress="return false;" onkeydown="return false;" />&nbsp;
@@ -332,7 +327,7 @@
327 </td>
328 </tr>
329 <tr>
335 - <td style="background-color:#E4E9E7;height:28px">
330 + <td id="p5filesubhead">
331 <div style=float:right>
332 <select id=p5sortdropdown onchange=updateFiles()>
333 <option value="1" selected="selected">Sort by name</option>
@@ -347,7 +342,7 @@
342 </td>
343 </tr>
344 </table>
350 - <div id="p5filetable" style="width:100%;height:calc(100vh - 294px);overflow:auto;-webkit-user-select:none;position:relative">
345 + <div id="p5filetable">
346 <!--
347 <form id=p5fileCatchAll method=post enctype=multipart/form-data action=uploadfile.ashx target=fileUploadFrame>
348 <input type=file id=p5fileCatchAllInput name=files style="position:absolute;left:0;width:100%;top:0;bottom:0;opacity:0;display:none" onchange="p5fileCatchAllInputChanged(event)" />
@@ -355,34 +350,34 @@
350 <input type=submit id=p5fileCatchAllSubmit style="display:none" />
351 </form>
352 -->
358 - <div id="p5PublicShare" style="display:none;width:100%;overflow:auto;-webkit-user-select:none;background-color:lightsteelblue"><div style="padding:4px">These files are shared publicly, click "link" to get public url.</div></div>
359 - <div id="bigok" style="width:256px;overflow:hidden;position:absolute;left:337px;top:20px;text-align:center;font-size:1600%;color:#AAAAAA;display:none"><b>&checkmark;</b></div>
360 - <div id="bigfail" style="width:256px;overflow:hidden;position:absolute;left:337px;top:20px;text-align:center;font-size:1600%;color:#AAAAAA;display:none"><b>&#10007;</b></div>
353 + <div id="p5PublicShare" style=""><div style="padding:4px">These files are shared publicly, click "link" to get public url.</div></div>
354 + <div id="bigok" style="display:none"><b>&checkmark;</b></div>
355 + <div id="bigfail" style="display:none"><b>&#10007;</b></div>
356 <span id="p5files"></span>
357 </div>
358 <table id="p5toolbarBottom" style=width:100% cellpadding=0 cellspacing=0>
364 - <tr><td class=style6 style="text-align:left;padding:3px">&nbsp;<span id="p5bottomstatus"></span></td></tr>
359 + <tr><td class=style6>&nbsp;<span id="p5bottomstatus"></span></td></tr>
360 </table>
361 </div>
367 - <div id=p6 style=display:none>
368 - <img id=MainMeshImage src="serverpic.ashx" style=border-width:0px;height:200px;width:200px;float:right>
362 + <div id=p6 style="display:none">
363 + <img id=MainMeshImage src="serverpic.ashx">
364 <h1>My Server</h1>
365 <p id="p2ServerActions"><strong>Server actions</strong></p>
366 <p style="margin-left:40px">
372 - <div id="p2ServerActionsBackup" style="margin-left:40px"><a href="/backup.zip" rel="noreferrer noopener" target="_blank" style="cursor:pointer">Download server backup</a></div>
373 - <div id="p2ServerActionsRestore" style="margin-left:40px"><a onclick="server_showRestoreDlg()" style="cursor:pointer">Restore server with backup</a></div>
374 - <div id="p2ServerActionsVersion" style="margin-left:40px"><a onclick="server_showVersionDlg()" style="cursor:pointer">Check server version</a></div>
375 - <div id="p2ServerActionsErrors" style="margin-left:40px"><a onclick="server_showErrorsDlg()" style="cursor:pointer">Show server error log</a></div>
367 + <div id="p2ServerActionsBackup"><a href="/backup.zip" rel="noreferrer noopener" target="_blank">Download server backup</a></div>
368 + <div id="p2ServerActionsRestore"><a onclick="server_showRestoreDlg()">Restore server with backup</a></div>
369 + <div id="p2ServerActionsVersion"><a onclick="server_showVersionDlg()">Check server version</a></div>
370 + <div id="p2ServerActionsErrors"><a onclick="server_showErrorsDlg()">Show server error log</a></div>
371 </p>
372 <br /><strong>Server Statistics</strong><br /><br />
378 - <div id="serverStats" style="margin-left:40px">
373 + <div id="serverStats">
374 <div id="serverCpuChartView" style="display:none">
380 - <div style="width:60px;display:inline-block"><canvas id="serverCpuChart" style="width:60px;height:60px"></canvas></div>
381 - <div style="width:160px;display:inline-block" id="serverCpuChartText"></div>
375 + <div class="chartViewCanvas"><canvas id="serverCpuChart"></canvas></div>
376 + <div class="chartViewText" id="serverCpuChartText"></div>
377 </div>
378 <div id="serverMemoryChartView" style="display:none">
384 - <div style="width:60px;display:inline-block"><canvas id="serverMemoryChart" style="width:60px;height:60px"></canvas></div>
385 - <div style="width:160px;display:inline-block" id="serverMemoryChartText"></div>
379 + <div class="chartViewCanvas"><canvas id="serverMemoryChart"></canvas></div>
380 + <div class="chartViewText" id="serverMemoryChartText"></div>
381 </div><br /><br />
382 <div id="serverStatsTable"></div>
383 </div>
@@ -392,36 +387,36 @@
387 <tr>
388 <td style=width:auto valign=top>
389 <div id=p10title>
395 - <div id="p10BackButton" style="float:left"><div class="backButton" onclick=goBack() title="Back"><div class="backButtonEx"></div></div></div>
390 + <div id="p10BackButton"><div class="backButton" onclick=goBack() title="Back"><div class="backButtonEx"></div></div></div>
391 <h1>General - <span id=p10deviceName></span></h1>
392 </div>
393 <div id=p10html></div>
394 </td>
395 <td style=width:20px></td>
396 <td style=width:200px>
402 - <a style=cursor:pointer onclick=p10showiconselector()><img id=MainComputerImage style=border-width:0px;height:200px;width:200px></a>
403 - <div style="width:100%;text-align:center"><strong><span id=MainComputerState></span></strong></div>
397 + <a onclick=p10showiconselector()><img id=MainComputerImage></a>
398 + <div id=MainComputerState></div>
399 </td>
400 </tr>
401 </table><br>
402 <div id=p10html2></div>
403 <div id=p10html3></div>
404 </div>
410 - <div id=p11 class=noselect style=display:none>
405 + <div id=p11 class="noselect" style="display:none">
406 <div id="p11title">
407 <div id=p11deviceNameHeader>
413 - <div id="p11BackButton" style="float:left"><div class="backButton" onclick=goBack() title="Back"><div class="backButtonEx"></div></div></div>
414 - <div style="float:right" id="devListToolbarViewIcons"><div class="viewSelector" onclick=deskToggleFull(event) title="Full Screen. Hold shift to browser full screen."><div class="viewSelector5"></div></div></div>
408 + <div id="p11BackButton"><div class="backButton" onclick=goBack() title="Back"><div class="backButtonEx"></div></div></div>
409 + <div id="devListToolbarViewIcons"><div class="viewSelector" onclick=deskToggleFull(event) title="Full Screen. Hold shift to browser full screen."><div class="viewSelector5"></div></div></div>
410 <h1>Desktop - <span id=p11deviceName></span></h1>
411 </div>
412 </div>
418 - <div id="p14warning" style='max-width:100%;display:none;cursor:pointer;margin-bottom:5px' onclick="showFeaturesDlg()">
419 - <div class=icon2 style="float:left;margin:7px"></div>
420 - <div style='width:auto;border-radius:8px;padding:8px;background-color:lightsalmon'>Intel&reg; AMT Redirection port or KVM feature is disabled<span id="p14warninga">, click here to enable it.</span></div>
413 + <div id="p14warning" onclick="showFeaturesDlg()">
414 + <div class="icon2"></div>
415 + <div class="warningbox">Intel&reg; AMT Redirection port or KVM feature is disabled<span id="p14warninga">, click here to enable it.</span></div>
416 </div>
422 - <div id="p14warning2" style='max-width:100%;display:none;cursor:pointer;margin-bottom:5px' onclick="showPowerActionDlg()">
423 - <div class=icon2 style="float:left;margin:7px"></div>
424 - <div style='width:auto;border-radius:8px;padding:8px;background-color:lightsalmon'>Remote computer is not powered on, click here to issue a power command.</div>
417 + <div id="p14warning2" onclick="showPowerActionDlg()">
418 + <div class="icon2"></div>
419 + <div class="warningbox">Remote computer is not powered on, click here to issue a power command.</div>
420 </div>
421 <table id=deskarea0 cellpadding=0 cellspacing=0 style="width:100%;padding:0px;padding:0px;margin-top:0px">
422 <tr id=deskarea1>
@@ -437,7 +432,7 @@
432 <input type="button" title="Change the power state of the remote machine" onkeypress="return false" onkeydown="return false" value="Power Actions..." onclick="showPowerActionDlg()" style="margin-right:3px;display:none">
433 </div>
434 <div>
440 - <div id="idx_deskFullBtn2" onclick=deskToggleFull(event) style="float:left;font-size:large;cursor:pointer;display:none">&nbsp;&#x2716;</div>
435 + <div id="idx_deskFullBtn2" onclick=deskToggleFull(event)>&nbsp;&#x2716;</div>
436 <input type="button" id="autoconnectbutton1" value="AutoConnect" onclick=autoConnectDesktop(event) onkeypress="return false" onkeydown="return false" style="display:none">
437 <span id=connectbutton1span>&nbsp;<input type=button id=connectbutton1 value="Connect" onclick=connectDesktop(event,1) onkeypress="return false" onkeydown="return false" disabled="disabled"></span>
438 <span id=connectbutton1hspan>&nbsp;<input type=button id=connectbutton1h value="HW Connect" onclick=connectDesktop(event,2) onkeypress="return false" onkeydown="return false" disabled="disabled"></span>
@@ -452,17 +447,17 @@
447 </td>
448 </tr>
449 <tr id=deskarea3>
455 - <td id=deskarea3x style="background:black;text-align:center;position:relative;overflow:hidden">
456 - <div id=DeskFocus style="overflow:hidden;color:transparent;border:3px dotted rgba(255,0,0,.2);position:absolute;border-radius:5px" oncontextmenu="return false" onmousedown=dmousedown(event) onmouseup=dmouseup(event) onmousemove=dmousemove(event)></div>
457 - <div id=DeskParent style="overflow:hidden">
458 - <canvas id=Desk width=640 height=480 style="overflow:hidden;width:100%;-ms-touch-action:none;margin-left:0px" oncontextmenu="return false" onmousedown=dmousedown(event) onmouseup=dmouseup(event) onmousemove=dmousemove(event) onmousewheel=dmousewheel(event)></canvas>
450 + <td id=deskarea3x style="">
451 + <div id=DeskFocus oncontextmenu="return false" onmousedown=dmousedown(event) onmouseup=dmouseup(event) onmousemove=dmousemove(event)></div>
452 + <div id=DeskParent>
453 + <canvas id=Desk width=640 height=480 oncontextmenu="return false" onmousedown=dmousedown(event) onmouseup=dmouseup(event) onmousemove=dmousemove(event) onmousewheel=dmousewheel(event)></canvas>
454 </div>
460 - <div id=DeskTools style="position:absolute;width:400px;height:100%;background-color:gray;top:0;right:0;border-left:2px solid lightgray;display:none">
461 - <a id=DeskToolsRefreshButton style="float:right;padding:3px;cursor:pointer" onclick="refreshDeskTools()">Refresh</a>
462 - <div id=DeskToolsBar style="position:absolute;padding:3px;border-radius: 3px 3px 0px 0px;top:5px;left:4px;bottom:26px;background-color:lightgray;cursor:pointer">Processes</div>
455 + <div id=DeskTools>
456 + <a id=DeskToolsRefreshButton style="" onclick="refreshDeskTools()">Refresh</a>
457 + <div id=DeskToolsBar>Processes</div>
458 <div style="position:absolute;top:26px;left:4px;right:4px;bottom:4px;background-color:lightgray;text-align:left">
459 <div style="border-bottom:1px solid darkgray;padding:3px"><a style=width:50px;padding-right:5px;float:left;cursor:pointer title="Sort by process id" onclick=sortProcess(0)>PID</a><a style=cursor:pointer title="Sort by name" onclick=sortProcess(1)>Name</a></div>
465 - <div id="DeskToolsProcesses" style="overflow-y:scroll;position:absolute;top:24px;bottom:0px;width:100%"></div>
460 + <div id="DeskToolsProcesses" style=""></div>
461 </div>
462 </div>
463 </td>
@@ -470,7 +465,7 @@
465 <tr id=deskarea4>
466 <td style=padding-top:2px;padding-bottom:2px;background:#C0C0C0>
467 <div style=float:right;text-align:right>
473 - <select id=termdisplays style=display:none onchange=deskSetDisplay(event) onclick=deskGetDisplayNumbers(event)></select>&nbsp;
468 + <select id=termdisplays style="display:none" onchange=deskSetDisplay(event) onclick=deskGetDisplayNumbers(event)></select>&nbsp;
469 <input id=DeskToolsButton type=button value=Tools title="Toggle tools view" onkeypress="return false" onkeydown="return false" onclick="toggleDeskTools()">&nbsp;
470 <span id=DeskChatButton style="float:right;margin-top:1px;margin-right:4px;cursor:pointer" title="Open chat window to this computer"><img src='images/icon-chat.png' onclick=deviceChat() height=16 width=16 style=padding-top:2px /></span>
471 <span id=DeskNotifyButton style="float:right;margin-top:1px;margin-right:4px;cursor:pointer" title="Display a notification on the remote computer"><img src='images/icon-notify.png' onclick=deviceToastFunction() height=16 width=16 style=padding-top:2px /></span>
@@ -500,13 +495,13 @@
495 <div id="p12BackButton" style="float:left"><div class="backButton" onclick=goBack() title="Back"><div class="backButtonEx"></div></div></div>
496 <h1>Terminal - <span id=p12deviceName></span></h1>
497 </div>
503 - <div id="p12warning" style='max-width:100%;display:none;cursor:pointer;margin-bottom:5px' onclick=showFeaturesDlg()>
504 - <div class="icon2" style="float:left;margin:7px"></div>
505 - <div style='width:auto;border-radius:8px;padding:8px;background-color:lightsalmon'>Intel&reg; AMT Redirection port or KVM feature is disabled<span id="p14warninga">, click here to enable it.</span></div>
498 + <div id="p12warning" onclick=showFeaturesDlg()>
499 + <div class="icon2"></div>
500 + <div class="warningbox">Intel&reg; AMT Redirection port or KVM feature is disabled<span id="p14warninga">, click here to enable it.</span></div>
501 </div>
507 - <div id="p12warning2" style='max-width:100%;display:none;cursor:pointer;margin-bottom:5px' onclick=showPowerActionDlg()>
508 - <div class="icon2" style="float:left;margin:7px"></div>
509 - <div style='width:auto;border-radius:8px;padding:8px;background-color:lightsalmon'>Remote computer is not powered on, click here to issue a power command.</div>
502 + <div id="p12warning2" onclick=showPowerActionDlg()>
503 + <div class="icon2"></div>
504 + <div class="warningbox">Remote computer is not powered on, click here to issue a power command.</div>
505 </div>
506 <table cellpadding=0 cellspacing=0 style="width:100%;padding:0px;padding:0px;margin-top:0px">
507 <tr>
@@ -556,7 +551,7 @@
551 </tr>
552 </table>
553 </div>
559 - <div id=p13 style=display:none>
554 + <div id=p13 style="display:none">
555 <div id="p13title">
556 <div id="p13BackButton" style="float:left"><div class="backButton" onclick=goBack() title="Back"><div class="backButtonEx"></div></div></div>
557 <h1>Files - <span id=p13deviceName></span></h1>
@@ -613,17 +608,17 @@
608 <span id="p13files"></span>
609 </div>
610 <table id="p13toolbarBottom" style=width:100% cellpadding=0 cellspacing=0>
616 - <tr><td class=style6 style="text-align:left;padding:3px">&nbsp;<span id="p13bottomstatus"></span></td></tr>
611 + <tr><td class=style6>&nbsp;<span id="p13bottomstatus"></span></td></tr>
612 </table>
613 </div>
619 - <div id=p14 style=display:none>
614 + <div id=p14 style="display:none">
615 <div id="p14title">
616 <div id="p14BackButton" style="float:left"><div class="backButton" onclick=goBack() title="Back"><div class="backButtonEx"></div></div></div>
617 <h1>Intel&reg; AMT - <span id=p14deviceName></span></h1>
618 </div>
619 <iframe id=p14iframe style="width:100%;height:calc(100vh - 242px);border:0;overflow:hidden" src="/commander.htm"></iframe>
620 </div>
626 - <div id=p15 style=display:none>
621 + <div id=p15 style="display:none">
622 <div id="p15title">
623 <div id="p15BackButton" style="float:left"><div class="backButton" onclick=goBack() title="Back"><div class="backButtonEx"></div></div></div>
624 <h1><span id=p15deviceName></span></h1>
@@ -663,16 +658,16 @@
658 </tr>
659 </table>
660 </div>
666 - <div id=p16 style=display:none>
661 + <div id=p16 style="display:none">
662 <div id="p16title">
663 <div id="p16BackButton" style="float:left"><div class="backButton" onclick=goBack() title="Back"><div class="backButtonEx"></div></div></div>
664 <h1>Events - <span id=p16deviceName></span></h1>
665 </div>
671 - <div style=width:100%;height:24px;background-color:#d3d9d6;margin-bottom:4px>
672 - <div class=style7 style=width:16px;height:100%;float:left>&nbsp;</div>
673 - <div class=h1 style=height:100%;float:left>&nbsp;</div>
674 - <!--<div class=style14 style=height:100%;float:left>&nbsp;&nbsp;<input id=p31deleteall type=button style=display:none value="Delete All..." />&nbsp;</div>-->
675 - <div class=style14 style=height:100%;float:left>&nbsp;&nbsp;<input type=button value=Refresh onclick=refreshDeviceEvents() />&nbsp;</div>
666 + <div style="width:100%;height:24px;background-color:#d3d9d6;margin-bottom:4px">
667 + <div class="h1pre">&nbsp;</div>
668 + <div class="h1" style="float:left">&nbsp;</div>
669 + <!--<div class=style14 style=height:100%;float:left>&nbsp;&nbsp;<input id=p31deleteall type=button style="display:none" value="Delete All..." />&nbsp;</div>-->
670 + <div class="style14" style="float:left">&nbsp;&nbsp;<input type=button value=Refresh onclick=refreshDeviceEvents() />&nbsp;</div>
671 <div class="auto-style1" style="height:100%;float:right">
672 Show
673 <select id=p16limitdropdown onchange=refreshDeviceEvents()>
@@ -682,8 +677,8 @@
677 <option value=500>Last 500</option>
678 <option value=1000>Last 1000</option>
679 </select>
685 - <div style="height:100%;width:20px;float:right;background-color:#ffffff"></div>
686 - <div class=h2 style=height:100%;float:right>&nbsp;</div>
680 + <div class="h2end"></div>
681 + <div class="h2" style="height:100%;float:right">&nbsp;</div>
682 </div>
683 </div>
684 <div id=p16events style="max-height:calc(100vh - 267px);overflow-y:auto"></div>
@@ -697,7 +692,7 @@
692 <h1>General - <span id=p20meshName></span></h1>
693 <p id=p20info></p>
694 </div>
700 - <div id=p30 style=display:none>
695 + <div id=p30 style="display:none">
696 <table style="width:100%" cellpadding="0" cellspacing="0">
697 <tr>
698 <td style=width:auto valign=top>
@@ -720,14 +715,14 @@
715 <div id=p30html2></div>
716 <div id=p30html3></div>
717 </div>
723 - <div id=p31 style=display:none>
718 + <div id=p31 style="display:none">
719 <div style="float:left"><div class="backButton" onclick=goBack() title="Back"><div class="backButtonEx"></div></div></div>
720 <h1>Events - <span id=p31userName></span></h1>
726 - <div style=width:100%;height:24px;background-color:#d3d9d6;margin-bottom:4px>
727 - <div class=style7 style=width:16px;height:100%;float:left>&nbsp;</div>
728 - <div class=h1 style=height:100%;float:left>&nbsp;</div>
729 - <!--<div class=style14 style=height:100%;float:left>&nbsp;&nbsp;<input id=p31deleteall type=button style=display:none value="Delete All..." />&nbsp;</div>-->
730 - <div class=style14 style=height:100%;float:left>&nbsp;&nbsp;<input type=button value=Refresh onclick=refreshUsersEvents() />&nbsp;</div>
721 + <div style="width:100%;height:24px;background-color:#d3d9d6;margin-bottom:4px">
722 + <div class="h1pre">&nbsp;</div>
723 + <div class="h1" style="height:100%;float:left">&nbsp;</div>
724 + <!--<div class=style14 style=float:left>&nbsp;&nbsp;<input id=p31deleteall type=button style="display:none" value="Delete All..." />&nbsp;</div>-->
725 + <div class="style14" style="float:left">&nbsp;&nbsp;<input type=button value=Refresh onclick=refreshUsersEvents() />&nbsp;</div>
726 <div class="auto-style1" style="height:100%;float:right">
727 Show
728 <select id=p31limitdropdown onchange=refreshUsersEvents()>
@@ -737,12 +732,36 @@
732 <option value=500>Last 500</option>
733 <option value=1000>Last 1000</option>
734 </select>
740 - <div style="height:100%;width:20px;float:right;background-color:#ffffff"></div>
735 + <div class="h2end"></div>
736 <div class="h2" style="height:100%;float:right;">&nbsp;</div>
737 </div>
738 </div>
739 <div id=p31events style="max-height:calc(100vh - 267px);overflow-y:scroll"></div>
740 </div>
741 + <div id=p40 style="display:none;height:calc(100vh - 170px)">
742 + <h1>My Server Stats</h1>
743 + <div style=width:100%;height:24px;background-color:#d3d9d6;margin-bottom:4px>
744 + <div style="float:right">
745 + <select id=p40type onchange=updateServerTimelineStats()>
746 + <option value=0>Connections</option>
747 + <option value=1>Memory</option>
748 + </select>&nbsp;
749 + <select id=p40time onchange=updateServerTimelineHours()>
750 + <option value=3>Last 3 hours</option>
751 + <option value=8>Last 8 hours</option>
752 + <option value=24>Last day</option>
753 + <option value=168>Last week</option>
754 + <option value=5040>Last 30 days</option>
755 + </select>&nbsp;
756 + <img src=images/link4.png height=10 width=10 title="Download data points (.csv)" style=cursor:pointer onclick=p40downloadEvents()>&nbsp;
757 + </div>
758 + <div>
759 + &nbsp;<input value="Refresh" type="button" onclick="refreshServerTimelineStats()" />
760 + &nbsp;<input id=p40log type="checkbox" onclick="updateServerTimelineHours()" />Log-X
761 + </div>
762 + </div>
763 + <canvas id=serverMainStats style="height:calc(100vh - 250px);max-height:calc(100vh - 250px);width:100%"></canvas>
764 + </div>
765 <br id="column_l_bottomgap" />
766 </div>
767 <div id=footer class=noselect>
@@ -758,20 +777,20 @@
777 </tr>
778 </table>
779 </div>
761 - <div id=dialog style="z-index:1000;background-color:#EEE;box-shadow:0px 0px 15px #666;font-family:Arial,Helvetica,sans-serif;border-radius:5px;position:fixed;top:160px;width:400px;left:calc((100% / 2) - 200px);display:none">
762 - <div style="width:100%;background-color:#003366;color:#FFF;border-radius:5px 5px 0 0">
780 + <div id=dialog style="display:none">
781 + <div id=dialogHeader>
782 <div id=id_dialogclose style=float:right;padding:3px;margin-right:3px;cursor:pointer onclick=setDialogMode()>&#x2716;</div>
783 <div id=id_dialogtitle style=padding:5px></div>
784 <div style=width:100%;margin:6px></div>
785 </div>
767 - <div style="margin-right:16px;margin-left:8px">
768 - <div id=dialog1 style="margin:auto;text-align:center;margin:3px">
769 - <div id=id_dialogMessage style="padding:10px"></div>
786 + <div id=dialogBody>
787 + <div id=dialog1>
788 + <div id=id_dialogMessage style=""></div>
789 </div>
771 - <div id=dialog2 style="margin:auto;margin:3px">
790 + <div id=dialog2 style="">
791 <div id=id_dialogOptions></div>
792 </div>
774 - <div id=dialog3 style="margin:auto;margin:3px">
793 + <div id=dialog3 style="">
794 <div style=height:26px>
795 <select id=d3uploadMode style=float:right;width:260px onchange=d3modechange()>
796 <option value=1>Local file upload</option>
@@ -781,9 +800,9 @@
800 </div>
801 <div id=d3localmode style=height:26px;display:none>
802 <form id=d3localmodeform method=post enctype=multipart/form-data action=uploadfile.ashx target=fileUploadFrame>
784 - <input type=text id=d3attrib name=attrib style=display:none />
803 + <input type=text id=d3attrib name=attrib style="display:none" />
804 <input type=file id=d3localFile name=files style=float:right;width:260px onchange=d3setActions() />
786 - <input type=submit id=d3submit style=display:none />
805 + <input type=submit id=d3submit style="display:none" />
806 </form>
807 <div>Upload File</div>
808 </div>
@@ -848,14 +867,14 @@
867 </div>
868 </div>
869 <div id="idx_dlgButtonBar" style="padding:10px;margin-bottom:4px">
851 - <input id="idx_dlgCancelButton" type="button" value="Cancel" style="float:right;width:80px;margin-left:5px" onclick="dialogclose(0)">
852 - <input id="idx_dlgOkButton" type="button" value="OK" style="float:right;width:80px" onclick="dialogclose(1)">
853 - <div style="height:25px"><input id=idx_dlgDeleteButton type=button value=Delete style="width:80px;display:none" onclick="dialogclose(2)"></div>
870 + <input id="idx_dlgCancelButton" type="button" value="Cancel" style="" onclick="dialogclose(0)">
871 + <input id="idx_dlgOkButton" type="button" value="OK" style="" onclick="dialogclose(1)">
872 + <div style="height:25px"><input id=idx_dlgDeleteButton type=button value=Delete style="display:none" onclick="dialogclose(2)"></div>
873 </div>
874 </div>
856 - <iframe name="fileUploadFrame" style=display:none></iframe>
857 - <form style=display:none method=post action=uploadfile.ashx enctype=multipart/form-data target=fileUploadFrame><input id=p5fileDragName name="name"><input id=p5fileDragSize name="size"><input id=p5fileDragType name="type"><input id=p5fileDragData name="data"><input id=p5fileDragLink name="link"><input type=submit id=p5loginSubmit2 style=display:none /></form>
858 - <form style=display:none method=post action=uploadnodefile.ashx enctype=multipart/form-data target=fileUploadFrame><input id=p13fileDragName name="name"><input id=p13fileDragSize name="size"><input id=p13fileDragType name="type"><input id=p13fileDragData name="data"><input id=p13fileDragLink name="link"><input type=submit id=p13loginSubmit2 style=display:none /></form>
875 + <iframe name="fileUploadFrame" style="display:none"></iframe>
876 + <form style="display:none" method=post action=uploadfile.ashx enctype=multipart/form-data target=fileUploadFrame><input id=p5fileDragName name="name"><input id=p5fileDragSize name="size"><input id=p5fileDragType name="type"><input id=p5fileDragData name="data"><input id=p5fileDragLink name="link"><input type=submit id=p5loginSubmit2 style="display:none" /></form>
877 + <form style="display:none" method=post action=uploadnodefile.ashx enctype=multipart/form-data target=fileUploadFrame><input id=p13fileDragName name="name"><input id=p13fileDragSize name="size"><input id=p13fileDragType name="type"><input id=p13fileDragData name="data"><input id=p13fileDragLink name="link"><input type=submit id=p13loginSubmit2 style="display:none" /></form>
878 <audio id="chimes"><source src="sounds/chimes.mp3" type="audio/mp3"></audio>
879 </div>
880 </div>
@@ -939,10 +958,10 @@
958 QV('p14title', !(hide & 8));
959 QV('p15title', !(hide & 8));
960 QV('p16title', !(hide & 8));
942 - if (hide & 16) {
943 - QV('page_leftbar', false);
944 - QS('page_content').left = '0px';
945 - }
961 + //if (hide & 16) {
962 + // QV('page_leftbar', false);
963 + // QS('page_content').left = '0px';
964 + //}
965 }
966
967 // We are looking at a single device, remove all the back buttons
@@ -1014,8 +1033,9 @@
1033 for (var c = 1; c < 27; c++) x += "<option value='" + c + "'>Ctrl-" + String.fromCharCode(64 + c) + " (" + c + ")</option>";
1034 QH('specialkeylist', x);
1035
1017 - // Setup server stats panel
1018 - setupServerStats();
1036 + // Setup server stats panels
1037 + setupGeneralServerStats();
1038 + setupServerTimelineStats();
1039 }
1040
1041 // Toggle the web page to full screen
@@ -1023,8 +1043,11 @@
1043 if (toggle === 1) { webPageFullScreen = !webPageFullScreen; putstore('webPageFullScreen', webPageFullScreen); }
1044 var hide = 0;
1045 if (args.hide) { hide = parseInt(args.hide); }
1046 + console.log("-----------hide:", hide)
1047 if (webPageFullScreen == false) {
1027 - QS('container').width = '960px';
1048 + QC('body').remove("fullscreen");
1049 + QC('body').remove("arg_hide");
1050 + /* QS('container').width = '960px';
1051 QS('container')['border-right'] = '1px solid #b7b7b7';
1052 QS('container')['border-left'] = '1px solid #b7b7b7';
1053 QS('container')['min-width'] = '960px';
@@ -1035,12 +1058,14 @@
1058 QS('column_l')["overflow-y"] = '';
1059 QS('column_l')["max-height"] = (xxcurrentView >= 10) ? 'calc(100vh - 159px)' : 'calc(100vh - 135px)';
1060 QS('container').position = '';
1038 - QS('page_content').position = '';
1039 - QV('MainMenuSpan', true);
1061 + QS('page_content').position = '';
1062 + QV('MainMenuSpan', true); */
1063 QV('UserDummyMenuSpan', false);
1064 QV('page_leftbar', false);
1065 } else {
1043 - QS('container').position = 'absolute';
1066 + QC('body').add("fullscreen");
1067 + if (hide & 16) QC('body').add("arg_hide");
1068 + /* QS('container').position = 'absolute';
1069 QS('container').width = '100%';
1070 QS('container').top = '0px';
1071 QS('container').bottom = '0px';
@@ -1057,7 +1082,7 @@
1082 QS('column_l').width = 'calc(100% - 30px)';
1083 QS('column_l')["overflow-y"] = 'auto';
1084 QS('column_l')["max-height"] = 'calc(100vh - 135px)';
1060 - QV('MainMenuSpan', false);
1085 + QV('MainMenuSpan', false); */
1086 QV('UserDummyMenuSpan', (xxcurrentView < 10) && webPageFullScreen);
1087 QV('page_leftbar', !(hide & 16));
1088 }
@@ -1209,7 +1234,11 @@
1234 function onMessage(server, message) {
1235 switch (message.action) {
1236 case 'serverstats': {
1212 - updateServerStats(message);
1237 + updateGeneralServerStats(message);
1238 + break;
1239 + }
1240 + case 'servertimelinestats': {
1241 + setServerTimelineStats(message.events);
1242 break;
1243 }
1244 case 'authcookie': {
@@ -1289,7 +1318,7 @@
1318 node.lastconnect = message.time;
1319 node.lastaddr = message.addr;
1320 if ((currentNode._id == node._id) && (Q('MainComputerState').innerHTML == '')) {
1292 - QH('MainComputerState', '<span style=font-size:12px>Last seen:<br />' + new Date(node.lastconnect).toLocaleDateString() + ', ' + new Date(node.lastconnect).toLocaleTimeString() + '</span>');
1321 + QH('MainComputerState', '<span>Last seen:<br />' + new Date(node.lastconnect).toLocaleDateString() + ', ' + new Date(node.lastconnect).toLocaleTimeString() + '</span>');
1322 }
1323 }
1324 break;
@@ -1333,7 +1362,7 @@
1362 if (message.netif == null) {
1363 QH('d2netinfo', 'No network interface information available for this device.');
1364 } else {
1336 - var x = '<div style=width:100%;max-height:260px;overflow-x:hidden;overflow-y:auto;line-height:160%>';
1365 + var x = '<div class=dialogText>';
1366
1367 if (currentNode.lastconnect) { x += addHtmlValue2('Last agent connection', new Date(currentNode.lastconnect).toLocaleString()); }
1368 if (currentNode.lastaddr) {
@@ -1365,7 +1394,7 @@
1394 }
1395 case 'serverversion': {
1396 if ((xxdialogMode == 2) && (xxdialogTag == 'MeshCentralServerUpdate')) {
1368 - var x = '<div style=width:100%;max-height:260px;overflow-x:hidden;overflow-y:auto;line-height:160%>';
1397 + var x = '<div class=dialogText>';
1398 if (!message.current) { message.current = 'Unknown'; }
1399 if (!message.latest) { message.latest = 'Unknown'; }
1400 x += addHtmlValue2('Current Version', '<b>' + EscapeHtml(message.current) + '</b>');
@@ -1385,7 +1414,7 @@
1414 if (message.data == null) {
1415 setDialogMode(2, "MeshCentral Server Errors", 1, null, 'Server has no error log.');
1416 } else {
1388 - var x = '<div style=width:100%;max-height:260px;overflow-x:hidden;overflow:auto;line-height:160%;font-size:10px><pre>' + message.data + '<pre></div>';
1417 + var x = '<div class="dialogText dialogTextLog"><pre>' + message.data + '<pre></div>';
1418 setDialogMode(2, "MeshCentral Server Errors", 3, server_showErrorsDlgEx, x + '<br /><label><input id=d2updateCheck type=checkbox onclick=server_showVersionDlgUpdate() /> Check and click OK to clear error log.</label>');
1419 server_showVersionDlgUpdate();
1420 }
@@ -1519,8 +1548,10 @@
1548 meshserver.send({ action: 'otp-hkey-setup-response', response: registrationResponse, name: Q('dp1keyname').value });
1549 setDialogMode(2, "Add Security Key", 0, null, '<br />Checking...<br /><br /><br />', 'otpauth-hardware-manage');
1550 } else {
1522 - var errorCodes = ['', 'Unknown error', 'Bad request', 'Unsupported configuration', 'This key was already registered', 'Timeout'];
1523 - setDialogMode(2, "Add Security Key", 1, null, '<br />' + errorCodes[registrationResponse.errorCode] + '.<br /><br />');
1551 + if (xxdialogMode && (xxdialogTag != 'otpauth-hardware-manage')) {
1552 + var errorCodes = ['', 'Unknown error', 'Bad request', 'Unsupported configuration', 'This key was already registered', 'Timeout'];
1553 + setDialogMode(2, "Add Security Key", 1, null, '<br />' + errorCodes[registrationResponse.errorCode] + '.<br /><br />');
1554 + }
1555 }
1556 }, message.request.timeoutSeconds);
1557 break;
@@ -1540,15 +1571,15 @@
1571 setDialogMode(2, "Add Security Key", 2, null, x);
1572
1573 var publicKey = message.request;
1543 - message.request.challenge = Uint8Array.from(atob(message.request.challenge), c => c.charCodeAt(0))
1544 - message.request.user.id = Uint8Array.from(atob(message.request.user.id), c => c.charCodeAt(0))
1545 - navigator.credentials.create({ publicKey })
1546 - .then((newCredentialInfo) => {
1574 + message.request.challenge = Uint8Array.from(atob(message.request.challenge), function (c) { return c.charCodeAt(0) })
1575 + message.request.user.id = Uint8Array.from(atob(message.request.user.id), function (c) { return c.charCodeAt(0) })
1576 + navigator.credentials.create({ publicKey: publicKey })
1577 + .then(function(newCredentialInfo) {
1578 // Public key credential
1579 var r = { rawId: btoa(String.fromCharCode.apply(null, new Uint8Array(newCredentialInfo.rawId))), response: { attestationObject: btoa(String.fromCharCode.apply(null, new Uint8Array(newCredentialInfo.response.attestationObject))), clientDataJSON: btoa(String.fromCharCode.apply(null, new Uint8Array(newCredentialInfo.response.clientDataJSON))) }, type: newCredentialInfo.type };
1580 meshserver.send({ action: 'webauthn-endregister', response: r });
1581 setDialogMode(0);
1551 - }).catch((error) => {
1582 + }, function(error) {
1583 // Error
1584 setDialogMode(2, "Add Security Key", 1, null, "ERROR: " + error);
1585 });
@@ -1562,6 +1593,7 @@
1593 masterUpdate(32);
1594 }
1595 switch (message.event.action) {
1596 + case 'servertimelinestats': { addServerTimelineStats(message.event.data); break; }
1597 case 'accountcreate':
1598 case 'accountchange': {
1599 // An account was created or changed
@@ -2682,7 +2714,7 @@
2714
2715 var powerStateStrings = ['', '<span title="Device is powered on.">Powered</span>', '<span title="Device is in sleep state (S1).">Sleeping</span>', '<span title="Device is in sleep state (S2).">Sleeping</span>', '<span title="Device is in deep sleep state (S3).">Deep Sleep</span>', '<span title="Device is in hibernating state (S4).">Hibernating</span>', '<span title="Device is in powered off state (S5).">Soft-Off</span>', '<span title="Device is detected but power state could not be obtained.">Present</span>'];
2716 var powerStateStrings2 = ['', 'Device is powered', 'Device is in sleep state (S1)', 'Device is in sleep state (S2)', 'Device is in deep sleep state (S3)', 'Device is hibernating (S4)', 'Device is in soft-off state (S5)', 'Device is present, but power state cannot be determined'];
2685 - var powerColorTable = ['#00000000', 'black', 'blue', 'blue', 'lightblue', 'blueviolet', 'darkgreen', 'lightseagreen', 'lightseagreen'];
2717 + var powerColorTable = ['pwsTransparent', 'pwsBlack', 'pwsBlue', 'pwsBlue2', 'pwsLightblue', 'pwsBlueviolet', 'pwsDarkgreen', 'pwsLightseagreen', 'pwsLightseagreen2'];
2718 function NodeStateStr(node) {
2719 var states = [];
2720 if (node.state > 0 && node.state < powerStatetable.length) state.push(powerStatetable[node.state]);
@@ -2731,7 +2763,7 @@
2763
2764 function groupActionFunction() {
2765 var x = "Select an operation to perform on all selected devices. Actions will be performed only with proper rights.<br /><br />";
2734 - x += addHtmlValue('Operation', '<select id=d2groupop style=float:right;width:250px><option value=100>Wake-up devices</option><option value=4>Sleep devices</option><option value=3>Reset devices</option><option value=2>Power off devices</option><option value=102>Move to device group</option><option value=101>Delete devices</option></select>');
2766 + x += addHtmlValue('Operation', '<select id=d2groupop><option value=100>Wake-up devices</option><option value=4>Sleep devices</option><option value=3>Reset devices</option><option value=2>Power off devices</option><option value=102>Move to device group</option><option value=101>Delete devices</option></select>');
2767 setDialogMode(2, "Group Action", 3, groupActionFunctionEx, x);
2768 }
2769
@@ -3445,12 +3477,12 @@
3477 function formatSearchData(data) {
3478 try {
3479 QH('xmapSearchResults','');
3448 - var dataInfo = JSON.parse(data), count = 0, x = '<div style="overflow-y:auto;width:100%;max-height:240px">';
3480 + var dataInfo = JSON.parse(data), count = 0, x = '<div class="xmapItem">';
3481 for (var i = 0; i < dataInfo.length; i++) {
3482 if (dataInfo[i].display_name && dataInfo[i].boundingbox[0] && dataInfo[i].boundingbox[1] && dataInfo[i].boundingbox[2] && dataInfo[i].boundingbox[3]) {
3483 count++;
3452 - var color = (i % 2 == 0)?'F5F5F5':'EBEBEB';
3453 - x += '<div style=cursor:pointer;padding:5px;background-color:#' + color + ' onclick=mapGotoSelectedLocation(this)><div>' + dataInfo[i].display_name + '</div><div style=display:none>' + dataInfo[i].boundingbox[0] + '!#!' + dataInfo[i].boundingbox[1] + '!#!' + dataInfo[i].boundingbox[2] + '!#!' + dataInfo[i].boundingbox[3] + '</div></div>';
3484 + var itemclass = (i % 2 == 0)?'xmapItemSel1':'xmapItemSel1';
3485 + x += '<div class="' + itemclass + '" onclick=mapGotoSelectedLocation(this)><div>' + dataInfo[i].display_name + '</div><div style=display:none>' + dataInfo[i].boundingbox[0] + '!#!' + dataInfo[i].boundingbox[1] + '!#!' + dataInfo[i].boundingbox[2] + '!#!' + dataInfo[i].boundingbox[3] + '</div></div>';
3486 }
3487 }
3488 x += '</div>';
@@ -3545,7 +3577,7 @@
3577 // Add node name
3578 var nname = EscapeHtml(node.name);
3579 if (nname.length == 0) { nname = '<i>None</i>'; }
3548 - if ((meshrights & 4) != 0) { nname = '<span title="Click here to edit the server-side device name" onclick=showEditNodeValueDialog(0) style=cursor:pointer>' + nname + ' <img class=hoverButton width=10 height=10 src="images/link5.png" /></span>'; }
3580 + if ((meshrights & 4) != 0) { nname = '<span title="Click here to edit the server-side device name" onclick=showEditNodeValueDialog(0) style=cursor:pointer>' + nname + ' <img class=hoverButton src="images/link5.png" /></span>'; }
3581 QH('p10deviceName', nname);
3582 QH('p11deviceName', nname);
3583 QH('p12deviceName', nname);
@@ -3579,7 +3611,7 @@
3611 // Attribute: Description
3612 var description = node.desc?EscapeHtml(node.desc):"<i>None</i>";
3613 if ((meshrights & 4) != 0) {
3582 - x += addDeviceAttribute('Description', '<span onclick=showEditNodeValueDialog(2) style=cursor:pointer>' + description + ' <img class=hoverButton width=10 height=10 src="images/link5.png" /></span>');
3614 + x += addDeviceAttribute('Description', '<span onclick=showEditNodeValueDialog(2) style=cursor:pointer>' + description + ' <img class=hoverButton src="images/link5.png" /></span>');
3615 } else {
3616 x += addDeviceAttribute('Description', description);
3617 }
@@ -3653,8 +3685,8 @@
3685
3686 // Node grouping tags
3687 var groupingTags = '<i>None</i>';
3656 - if (node.tags != null) { groupingTags = ''; for (var i in node.tags) { groupingTags += '<span style="background-color:lightgray;padding:3px;margin-right:4px;border-radius:5px">' + node.tags[i] + '</span>'; } }
3657 - x += addDeviceAttribute('Tags', '<span onclick=showEditNodeValueDialog(3) style=cursor:pointer>' + groupingTags + ' <img class=hoverButton width=10 height=10 src="images/link5.png" /></span>');
3688 + if (node.tags != null) { groupingTags = ''; for (var i in node.tags) { groupingTags += '<span class="tagSpan">' + node.tags[i] + '</span>'; } }
3689 + x += addDeviceAttribute('Tags', '<span onclick=showEditNodeValueDialog(3) style=cursor:pointer>' + groupingTags + ' <img class=hoverButton src="images/link5.png" /></span>');
3690
3691 x += '</table><br />';
3692 // Show action button, only show if we have permissions 4, 8, 64
@@ -3667,23 +3699,23 @@
3699 masterUpdate(256);
3700
3701 // Show bottom buttons
3670 - x = '<div style=float:right;font-size:x-small>';
3702 + x = '<div class="p10html3right">';
3703 if ((meshrights & 4) != 0) {
3704 // TODO: Show change group only if there is another mesh of the same type.
3673 - x += '&nbsp;<a style=cursor:pointer onclick=p10showChangeGroupDialog(["' + node._id + '"]) title="Move this device to a different device group">Change Group</a>';
3674 - x += '&nbsp;<a style=cursor:pointer onclick=p10showDeleteNodeDialog("' + node._id + '") title="Remove this device">Delete Device</a>';
3705 + x += '&nbsp;<a onclick=p10showChangeGroupDialog(["' + node._id + '"]) title="Move this device to a different device group">Change Group</a>';
3706 + x += '&nbsp;<a onclick=p10showDeleteNodeDialog("' + node._id + '") title="Remove this device">Delete Device</a>';
3707 }
3676 - x += '</div><div style=font-size:x-small>';
3677 - if (mesh.mtype == 2) x += '<a style=cursor:pointer onclick=p10showNodeNetInfoDialog("' + node._id + '") title="Show device network interface information">Interfaces</a>&nbsp;';
3678 - if (xxmap != null) x += '<a style=cursor:pointer onclick=p10showNodeLocationDialog("' + node._id + '") title="Show device locations information">Location</a>&nbsp;';
3679 - if (((meshrights & 8) != 0) && (mesh.mtype == 2)) x += '<a style=cursor:pointer onclick=p10showMeshCmdDialog(1,"' + node._id + '") title="Traffic router used to connect to a device thru this server.">Router</a>&nbsp;';
3708 + x += '</div><div class="p10html3left">';
3709 + if (mesh.mtype == 2) x += '<a onclick=p10showNodeNetInfoDialog("' + node._id + '") title="Show device network interface information">Interfaces</a>&nbsp;';
3710 + if (xxmap != null) x += '<a onclick=p10showNodeLocationDialog("' + node._id + '") title="Show device locations information">Location</a>&nbsp;';
3711 + if (((meshrights & 8) != 0) && (mesh.mtype == 2)) x += '<a onclick=p10showMeshCmdDialog(1,"' + node._id + '") title="Traffic router used to connect to a device thru this server.">Router</a>&nbsp;';
3712
3713 // RDP link, show this link only of the remote machine is Windows.
3714 if (((connectivity & 1) != 0) && (clickOnce == true) && (mesh.mtype == 2) && ((meshrights & 8) != 0)) {
3683 - if ((node.agent.id > 0) && (node.agent.id < 5)) { x += '<a style=cursor:pointer onclick=p10clickOnce("' + node._id + '","RDP2",3389) title="Requires Microsoft ClickOnce support in your browser.">RDP</a>&nbsp;'; }
3715 + if ((node.agent.id > 0) && (node.agent.id < 5)) { x += '<a onclick=p10clickOnce("' + node._id + '","RDP2",3389) title="Requires Microsoft ClickOnce support in your browser.">RDP</a>&nbsp;'; }
3716 if (node.agent.id > 4) {
3685 - x += '<a style=cursor:pointer onclick=p10clickOnce("' + node._id + '","PSSH",22) title="Requires Microsoft ClickOnce support in your browser.">Putty</a>&nbsp;';
3686 - x += '<a style=cursor:pointer onclick=p10clickOnce("' + node._id + '","WSCP",22) title="Requires Microsoft ClickOnce support in your browser.">WinSCP</a>&nbsp;';
3717 + x += '<a onclick=p10clickOnce("' + node._id + '","PSSH",22) title="Requires Microsoft ClickOnce support in your browser.">Putty</a>&nbsp;';
3718 + x += '<a onclick=p10clickOnce("' + node._id + '","WSCP",22) title="Requires Microsoft ClickOnce support in your browser.">WinSCP</a>&nbsp;';
3719 }
3720 }
3721 x += '</div><br>'
@@ -3754,7 +3786,7 @@
3786 refreshDeviceEvents();
3787
3788 // Update the web page title
3757 - if ((currentNode) && (xxcurrentView >= 10) && (xxcurrentView < 20)) { document.title = 'MeshCentral - ' + currentNode.name; } else { document.title = 'MeshCentral'; }
3789 + if ((currentNode) && (xxcurrentView >= 10) && (xxcurrentView < 20)) { document.title = '{{{title}}} - ' + currentNode.name; } else { document.title = '{{{title}}}'; }
3790 }
3791 setupDesktop(); // Always refresh the desktop, even if we are on the same device, we need to do some canvas switching.
3792 if (!panel) panel = 10;
@@ -3881,15 +3913,15 @@
3913 var width = Math.round(((te - ts) * totalWidth) / 86400000);
3914 if (width > 0) {
3915 var title = powerStateStrings2[block[2]] + ' from ' + new Date(ts).toLocaleTimeString() + ' to ' + new Date(te).toLocaleTimeString() + '.';
3884 - datavalue += '<div title="' + title + '" style=display:table-cell;width:' + width + 'px;background-color:' + powerColor(block[2]) + ';height:16px></div>';
3916 + datavalue += '<div class="pwState ' + powerColor(block[2]) + '" title="' + title + '" style="width:' + width + 'px;"></div>';
3917 }
3918 }
3919 }
3888 - x += '<tr style=' + (((count % 2) == 0)?'background-color:#DDD':'') + '><td><div>&nbsp;' + date.toLocaleDateString() + '<div></div></div></td><td><div>' + datavalue + '</div></td></tr>';
3920 + x += '<tr class=' + (((count % 2) == 0)?'altBack':'') + '><td><div>&nbsp;' + date.toLocaleDateString() + '<div></div></div></td><td><div>' + datavalue + '</div></td></tr>';
3921 ++count;
3922 date = new Date(date.getTime() - (1000 * 60 * 60 * 24)); // Substract one day
3923 }
3892 - QH('p10html2', '<table style="color:black;background-color:#EEE;border-color:#AAA;border-width:1px;border-style:solid;border-collapse:collapse" border=0 cellpadding=2 cellspacing=0 width=100%><tbody><tr style=background-color:#AAAAAA;font-weight:bold><th scope=col style=text-align:center;width:150px>Day</th><th scope=col style=text-align:center><img style=float:right;cursor:pointer;padding:3px onclick=p10downloadPowerEvents() title="Download power events" src="images/link4.png" />7 Day Power State</th></tr>' + x + '</tbody></table>');
3924 + QH('p10html2', '<table cellpadding=2 cellspacing=0><thead><tr style=><th scope=col style=text-align:center;width:150px>Day</th><th scope=col style=text-align:center><img onclick=p10downloadPowerEvents() title="Download power events" src="images/link4.png" />7 Day Power State</th></tr></thead><tbody>' + x + '</tbody></table>');
3925 }
3926
3927 // Download the power events for the current device
@@ -3899,7 +3931,7 @@
3931 }
3932
3933 // Return a color for the given power state
3902 - function powerColor(x) { if (x < powerColorTable.length) { return powerColorTable[x]; } return 'yellow'; }
3934 + function powerColor(x) { if (x < powerColorTable.length) { return powerColorTable[x]; } return 'pwsYellow'; }
3935
3936 // Return true if the time block is visible within the start/end period
3937 function isTimeBlockInside(start, end, blockStart, blockEnd) {
@@ -3909,7 +3941,7 @@
3941 return false;
3942 }
3943
3912 - function addDeviceAttribute(name, value) { return '<tr><td class=style7 style=width:180px>' + name + '</td><td class=style9 style=max-width:400px;overflow:hidden>' + value + '</td></tr>'; }
3944 + function addDeviceAttribute(name, value) { return '<tr><td class=style7>' + name + '</td><td class=style9>' + value + '</td></tr>'; }
3945
3946 function editDeviceAmtSettings(nodeid, func) {
3947 if (xxdialogMode) return;
@@ -4459,19 +4491,20 @@
4491 var browserfullscreen = false;
4492 function deskToggleFull(e) {
4493 fullscreen = !fullscreen;
4462 - QV('mastheadx', !fullscreen);
4494 + /* QV('mastheadx', !fullscreen);
4495 QV('masthead', !fullscreen);
4464 - QV('topbar', !fullscreen);
4496 + QV('topbar', !fullscreen);
4497 QV('p11deviceNameHeader', !fullscreen);
4498 QV('footer', !fullscreen);
4499 QV('column_l_bottomgap', !fullscreen);
4500 QV('idx_deskFullBtn2', fullscreen);
4501 QV('deskFullBtn', !fullscreen);
4470 - QV('page_leftbar', !fullscreen);
4502 + QV('page_leftbar', !fullscreen); */
4503 if (fullscreen) {
4504 + QC('body').add("fulldesk");
4505 // If shift is pressed, enter browser full screen.
4506 if (e.shiftKey == true) { enterBrowserFullscreen(Q('deskarea0')); browserfullscreen = true; }
4474 - QS('column_l').width = '930px';
4507 + /* QS('column_l').width = '930px';
4508 QS('column_l').height = '';
4509 QS('column_l')['margin-left'] = '';
4510 QS('column_l')['overflow-y'] = '';
@@ -4483,15 +4516,16 @@
4516 QS('container')['border-left'] = '0';
4517 QS('column_l').padding = '0';
4518 QS('column_l').width = '100%';
4486 - QS('column_l')["max-height"] = '';
4519 + QS('column_l')["max-height"] = ''; */
4520 } else {
4521 + QC('body').remove("fulldesk");
4522 exitBrowserFullscreen();
4523 browserfullscreen = false;
4490 - QS('container').width = '960px';
4524 + /* QS('container').width = '960px';
4525 QS('container')['border-right'] = '1px solid #b7b7b7';
4526 QS('container')['border-left'] = '1px solid #b7b7b7';
4527 QS('column_l').padding = '0 15px';
4494 - QS('column_l').width = '930px';
4528 + QS('column_l').width = '930px'; */
4529 toggleFullScreen();
4530 }
4531 deskAdjust();
@@ -6433,18 +6467,20 @@
6467 var x = '', dateHeader = null;
6468 for (var i in events) {
6469 var event = events[i], time = new Date(event.time);
6436 - if (time.toLocaleDateString() != dateHeader) {
6437 - if (dateHeader != null) x += '</table>';
6438 - x += '<table style=width:100% cellpadding=0 cellspacing=0><tr><td colspan=4 class=DevSt>' + time.toLocaleDateString() + '</td></tr>';
6439 - dateHeader = time.toLocaleDateString();
6440 - }
6441 - var icon = 'si3';
6442 - if (event.etype == 'user') icon = 'm2';
6443 - if (event.etype == 'server') icon = 'si3';
6470 + if (event.msg) {
6471 + if (time.toLocaleDateString() != dateHeader) {
6472 + if (dateHeader != null) x += '</table>';
6473 + x += '<table class=p3eventsTable cellpadding=0 cellspacing=0><tr><td colspan=4 class=DevSt>' + time.toLocaleDateString() + '</td></tr>';
6474 + dateHeader = time.toLocaleDateString();
6475 + }
6476 + var icon = 'si3';
6477 + if (event.etype == 'user') icon = 'm2';
6478 + if (event.etype == 'server') icon = 'si3';
6479
6445 - var msg = event.msg.split('(R)').join('&reg;');
6446 - if (event.username && event.username != userinfo.name) { msg += ': ' + event.username; }
6447 - x += '<tr onmouseover=eventMouseHover(this,1) onmouseout=eventMouseHover(this,0) style=cursor:pointer><td style=width:18px><div class=' + icon + '></div></td><td class=g1 style=float:none>&nbsp;</td><td style=background-color:#C9C9C9>' + time.toLocaleTimeString() + ' - ' + msg + '</td><td class=g2 style=float:none>&nbsp;</td></tr><tr style=height:2px></tr>';
6480 + var msg = event.msg.split('(R)').join('&reg;');
6481 + if (event.username && event.username != userinfo.name) { msg += ': ' + event.username; }
6482 + x += '<tr onmouseover=eventMouseHover(this,1) onmouseout=eventMouseHover(this,0) style=cursor:pointer><td style=width:18px><div class=' + icon + '></div></td><td class=g1>&nbsp;</td><td class=style10>' + time.toLocaleTimeString() + ' - ' + msg + '</td><td class=g2>&nbsp;</td></tr><tr style=height:2px></tr>';
6483 + }
6484 }
6485 if (dateHeader != null) x += '</table>';
6486 if (x == '') x = "<br><i>No Events Found</i><br><br>";
@@ -6495,8 +6531,8 @@
6531 else if (userSearch.startsWith('n:')) { emailSearch = null; userSearch = userSearch.substring(2); }
6532
6533 // Display the users using the sorted list
6498 - var x = '<table style=width:100% cellpadding=0 cellspacing=0>', addHeader = true;
6499 - x += '<th style=color:gray>Name<th style=color:gray;width:80px>Groups<th style=color:gray;width:120px>Last&nbsp;Access<th style=color:gray;width:120px>Permissions';
6534 + var x = '<table class=p3usersTable cellpadding=0 cellspacing=0>', addHeader = true;
6535 + x += '<th>Name<th style=width:80px>Groups<th style=width:120px>Last&nbsp;Access<th style=width:120px>Permissions';
6536
6537 // Online users
6538 for (var i in sortedUserIds) {
@@ -6582,9 +6618,9 @@
6618 if ((user.siteadmin != null) && ((user.siteadmin & 32) != 0) && (user.siteadmin != 0xFFFFFFFF)) { username += ' <img src="images/padlock12.png" height=12 width=8 title="Account is locked" style="margin-top:2px" />'; }
6619
6620 x += '<tr onmouseover=userMouseHover(this,1) onmouseout=userMouseHover(this,0)><td style=cursor:pointer onclick=gotoUser(\"' + encodeURIComponent(user._id) + '\")>';
6585 - x += '<div class=bar style=height:24px;width:100%;font-size:medium>';
6586 - x += '<div style=float:left;height:24px;width:24px;background-color:white><div class="' + icon + gray + '" style=width:16px;margin-top:4px;margin-left:2px;height:16px></div></div>';
6587 - x += '<div class=g1 style=height:24px;float:left></div><div class=g2 style=height:24px;float:right></div>';
6621 + x += '<div class=bar>';
6622 + x += '<div class=baricon><div class="' + icon + gray + '"></div></div>';
6623 + x += '<div class=g1></div><div class=g2></div>';
6624 x += '<div><span>' + username + '</span>' + msg + '</div></div><td style=text-align:center>' + groups + '<td style=text-align:center>' + lastAccess + '<td style=text-align:center>' + permissions;
6625 return x;
6626 }
@@ -6626,7 +6662,7 @@
6662
6663 function showUserBroadcastDialog() {
6664 if (xxdialogMode) return;
6629 - var x = 'Broadcast a message to all connected users.<textarea id=broadcastMessage value="" style=width:370px;height:100px;resize:none maxlength=256 /></textarea>';
6665 + var x = 'Broadcast a message to all connected users.<textarea id=broadcastMessage value="" maxlength="256"/></textarea>';
6666 setDialogMode(2, "Broadcast Message", 3, showUserBroadcastDialogEx, x);
6667 Q('broadcastMessage').focus();
6668 }
@@ -6638,10 +6674,10 @@
6674 function showCreateNewAccountDialog() {
6675 if (xxdialogMode) return;
6676 var x = '';
6641 - x += addHtmlValue('Name', '<input id=p4name style=width:230px maxlength=64 onchange=showCreateNewAccountDialogValidate() onkeyup=showCreateNewAccountDialogValidate() />');
6642 - x += addHtmlValue('Email', '<input id=p4email style=width:230px maxlength=256 onchange=showCreateNewAccountDialogValidate() onkeyup=showCreateNewAccountDialogValidate() />');
6643 - x += addHtmlValue('Password', '<input id=p4pass1 type=password style=width:230px maxlength=256 onchange=showCreateNewAccountDialogValidate() onkeyup=showCreateNewAccountDialogValidate() />');
6644 - x += addHtmlValue('Password', '<input id=p4pass2 type=password style=width:230px maxlength=256 onchange=showCreateNewAccountDialogValidate() onkeyup=showCreateNewAccountDialogValidate() />');
6677 + x += addHtmlValue('Name', '<input id=p4name maxlength=64 onchange=showCreateNewAccountDialogValidate() onkeyup=showCreateNewAccountDialogValidate() />');
6678 + x += addHtmlValue('Email', '<input id=p4email maxlength=256 onchange=showCreateNewAccountDialogValidate() onkeyup=showCreateNewAccountDialogValidate() />');
6679 + x += addHtmlValue('Password', '<input id=p4pass1 type=password maxlength=256 onchange=showCreateNewAccountDialogValidate() onkeyup=showCreateNewAccountDialogValidate() />');
6680 + x += addHtmlValue('Password', '<input id=p4pass2 type=password maxlength=256 onchange=showCreateNewAccountDialogValidate() onkeyup=showCreateNewAccountDialogValidate() />');
6681 x += '<div><input id=p4resetNextLogin type=checkbox />Force password reset on next login.</div>';
6682
6683 if (passRequirements) {
@@ -6671,7 +6707,7 @@
6707 haltEvent(e);
6708 userid = decodeURIComponent(userid);
6709 var x = '<div>';
6674 - x += '<input type=checkbox onchange=showUserAdminDialogValidate() id=ua_fileaccess>Server Files, <input type=number onchange=showUserAdminDialogValidate() maxlength=10 style=width:80px;text-align:right id=ua_fileaccessquota>k max, blank for default<br><hr/>';
6710 + x += '<input type=checkbox onchange=showUserAdminDialogValidate() id=ua_fileaccess>Server Files, <input type=number onchange=showUserAdminDialogValidate() maxlength=10 id=ua_fileaccessquota>k max, blank for default<br><hr/>';
6711 x += '<input type=checkbox onchange=showUserAdminDialogValidate() id=ua_fulladmin>Full Administrator<br>';
6712 x += '<input type=checkbox onchange=showUserAdminDialogValidate() id=ua_serverbackup>Server Backup<br>';
6713 x += '<input type=checkbox onchange=showUserAdminDialogValidate() id=ua_serverrestore>Server Restore<br>';
@@ -6756,7 +6792,7 @@
6792 var x = '<div style=min-height:80px><table style=width:100%>';
6793 var email = user.email?EscapeHtml(user.email):'<i>Not set</i>', everify = '';
6794 if (serverinfo.emailcheck) { everify = ((user.emailVerified == true)?'<b style=color:green;cursor:pointer title="Email is verified">&#x1F5F8</b> ':'<b style=color:red;cursor:pointer title="Email not verified">&#x1F5F4</b> '); }
6759 - x += addDeviceAttribute('Email', everify + "<a style=cursor:pointer onclick=p30showUserEmailChangeDialog(event,\"" + userid + "\")>" + email + '</a> <a style=cursor:pointer onclick=doemail(event,\"' + user.email + '\")><img class=hoverButton width=10 height=10 src="images/link1.png" /></a>');
6795 + x += addDeviceAttribute('Email', everify + "<a style=cursor:pointer onclick=p30showUserEmailChangeDialog(event,\"" + userid + "\")>" + email + '</a> <a style=cursor:pointer onclick=doemail(event,\"' + user.email + '\")><img class=hoverButton src="images/link1.png" /></a>');
6796 x += addDeviceAttribute('Server Rights', premsg + "<a style=cursor:pointer onclick=showUserAdminDialog(event,\"" + userid + "\")>" + msg + "</a>");
6797 if (user.quota) x += addDeviceAttribute('Server Quota', EscapeHtml(parseInt(user.quota) / 1024) + ' k');
6798 x += addDeviceAttribute('Creation', new Date(user.creation * 1000).toLocaleString());
@@ -7169,10 +7205,10 @@
7205 }
7206
7207 //
7172 - // Server Statistics
7208 + // MyServer General
7209 //
7210
7175 - function setupServerStats() {
7211 + function setupGeneralServerStats() {
7212 window.serverStatCpu = new Chart(document.getElementById('serverCpuChart').getContext('2d'), {
7213 type: 'doughnut',
7214 data: { datasets: [{ data: [0, 0], backgroundColor: ['#AAAAAA', '#00AA00'] }], labels: ['Used', 'Free'] },
@@ -7186,7 +7222,7 @@
7222 }
7223
7224 var lastServerStats = null;
7189 - function updateServerStats(message) {
7225 + function updateGeneralServerStats(message) {
7226 if (message != null) { lastServerStats = message; } else { message = lastServerStats; }
7227 if (message == null) return;
7228
@@ -7220,6 +7256,131 @@
7256 QH('serverStatsTable', x);
7257 }
7258
7259 + //
7260 + // MyServer Stats
7261 + //
7262 +
7263 + var serverTimelineStats = null;
7264 + var serverTimelineConfig = {
7265 + type: 'line',
7266 + data: { labels: [], datasets: [{ label: '', backgroundColor: 'rgba(255, 99, 132, .5)', borderColor: 'rgb(255, 99, 132)', data: [], fill: true }] },
7267 + options: {
7268 + responsive: true,
7269 + maintainAspectRatio: false,
7270 + scales: {
7271 + xAxes: [{ type: 'time', time: { tooltipFormat: 'll HH:mm' }, display: true, scaleLabel: { display: false, labelString: '' } }],
7272 + yAxes: [{ type: 'linear', display: true, scaleLabel: { display: true, labelString: '' } }]
7273 + }
7274 + }
7275 + };
7276 +
7277 + function refreshServerTimelineStats(stats) { meshserver.send({ action: 'servertimelinestats', hours: 24 }); }
7278 + function pastDate(hours) { var t = new Date(); t.setTime(t.getTime() - (60 * 60 * 1000 * hours)); return t; }
7279 + function setServerTimelineStats(stats) { serverTimelineStats = stats; updateServerTimelineStats(); }
7280 + function addServerTimelineStats(stats) {
7281 + if (serverTimelineStats == null) return;
7282 + serverTimelineStats.push(stats);
7283 + var chartType = Q('p40type').value;
7284 + if (chartType == 0) {
7285 + serverTimelineConfig.data.datasets[0].data.push({ x: stats.time, y: stats.conn.ca });
7286 + serverTimelineConfig.data.datasets[1].data.push({ x: stats.time, y: stats.conn.cu });
7287 + serverTimelineConfig.data.datasets[2].data.push({ x: stats.time, y: stats.conn.us });
7288 + serverTimelineConfig.data.datasets[3].data.push({ x: stats.time, y: stats.conn.rs });
7289 + if (stats.conn.am != null) { serverTimelineConfig.data.datasets[4].data.push({ x: stats.time, y: stats.conn.am }); }
7290 + } else if (chartType == 1) {
7291 + serverTimelineConfig.data.datasets[0].data.push({ x: stats.time, y: stats.mem.external / (1024 * 1024) });
7292 + serverTimelineConfig.data.datasets[1].data.push({ x: stats.time, y: stats.mem.heapUsed / (1024 * 1024) });
7293 + serverTimelineConfig.data.datasets[2].data.push({ x: stats.time, y: stats.mem.heapTotal / (1024 * 1024) });
7294 + serverTimelineConfig.data.datasets[3].data.push({ x: stats.time, y: stats.mem.rss / (1024 * 1024) });
7295 + } /* else if (chartType == 2) {
7296 + serverTimelineConfig.data.datasets[0].data.push({ x: stats.time, y: stats.db.meshes });
7297 + serverTimelineConfig.data.datasets[1].data.push({ x: stats.time, y: stats.db.nodes });
7298 + serverTimelineConfig.data.datasets[2].data.push({ x: stats.time, y: stats.db.users });
7299 + serverTimelineConfig.data.datasets[3].data.push({ x: stats.time, y: stats.db.total });
7300 + } */
7301 + updateServerTimelineHours();
7302 + }
7303 + function updateServerTimelineHours() {
7304 + serverTimelineConfig.options.scales.yAxes[0].type = (Q('p40log').checked ? 'logarithmic' : 'linear');
7305 + serverTimelineConfig.options.scales.xAxes[0].time = { min: pastDate(Q('p40time').value) };
7306 + window.serverMainStats.update();
7307 + }
7308 + function setupServerTimelineStats() { window.serverMainStats = new Chart(document.getElementById('serverMainStats').getContext('2d'), serverTimelineConfig); }
7309 +
7310 + function updateServerTimelineStats() {
7311 + var data, chartType = Q('p40type').value, timeAfter = pastDate(Q('p40time').value);
7312 + serverTimelineConfig.options.scales.xAxes[0].time = { min: timeAfter };
7313 + if (chartType == 0) { // Connections
7314 + serverTimelineConfig.options.scales.yAxes[0].scaleLabel.labelString = 'Connection Count';
7315 + data = {
7316 + labels: [pastDate(0), timeAfter],
7317 + datasets: [
7318 + { label: 'Agents', data: [], backgroundColor: 'rgba(158, 151, 16, .1)', borderColor: 'rgb(158, 151, 16)', fill: true },
7319 + { label: 'Users', data: [], backgroundColor: 'rgba(16, 84, 158, .1)', borderColor: 'rgb(16, 84, 158)', fill: true },
7320 + { label: 'User Sessions', data: [], backgroundColor: 'rgba(255, 99, 132, .1)', borderColor: 'rgb(255, 99, 132)', fill: true },
7321 + { label: 'Relay Sessions', data: [], backgroundColor: 'rgba(39, 158, 16, .1)', borderColor: 'rgb(39, 158, 16)', fill: true },
7322 + { label: 'Intel AMT', data: [], backgroundColor: 'rgba(134, 16, 158, .1)', borderColor: 'rgb(134, 16, 158)', fill: true }
7323 + ]
7324 + };
7325 + for (var i = 0; i < serverTimelineStats.length; i++) {
7326 + var t = new Date(serverTimelineStats[i].time);
7327 + if (serverTimelineStats[i].conn) {
7328 + data.datasets[0].data.push({ x: serverTimelineStats[i].time, y: serverTimelineStats[i].conn.ca });
7329 + data.datasets[1].data.push({ x: serverTimelineStats[i].time, y: serverTimelineStats[i].conn.cu });
7330 + data.datasets[2].data.push({ x: serverTimelineStats[i].time, y: serverTimelineStats[i].conn.us });
7331 + data.datasets[3].data.push({ x: serverTimelineStats[i].time, y: serverTimelineStats[i].conn.rs });
7332 + if (serverTimelineStats[i].conn.am != null) { data.datasets[4].data.push({ x: serverTimelineStats[i].time, y: serverTimelineStats[i].conn.am }); }
7333 + }
7334 + }
7335 + } else if (chartType == 1) { // Memory
7336 + serverTimelineConfig.options.scales.yAxes[0].scaleLabel.labelString = 'Megabytes';
7337 + data = {
7338 + labels: [pastDate(0), timeAfter],
7339 + datasets: [
7340 + { label: 'External', data: [], backgroundColor: 'rgba(158, 151, 16, .1)', borderColor: 'rgb(158, 151, 16)', fill: true },
7341 + { label: 'Heap Used', data: [], backgroundColor: 'rgba(16, 84, 158, .1)', borderColor: 'rgb(16, 84, 158)', fill: true },
7342 + { label: 'Heap Total', data: [], backgroundColor: 'rgba(255, 99, 132, .1)', borderColor: 'rgb(255, 99, 132)', fill: true },
7343 + { label: 'RSS', data: [], backgroundColor: 'rgba(39, 158, 16, .1)', borderColor: 'rgb(39, 158, 16)', fill: true }
7344 + ]
7345 + };
7346 + for (var i = 0; i < serverTimelineStats.length; i++) {
7347 + data.datasets[0].data.push({ x: serverTimelineStats[i].time, y: serverTimelineStats[i].mem.external / (1024 * 1024) });
7348 + data.datasets[1].data.push({ x: serverTimelineStats[i].time, y: serverTimelineStats[i].mem.heapUsed / (1024 * 1024) });
7349 + data.datasets[2].data.push({ x: serverTimelineStats[i].time, y: serverTimelineStats[i].mem.heapTotal / (1024 * 1024) });
7350 + data.datasets[3].data.push({ x: serverTimelineStats[i].time, y: serverTimelineStats[i].mem.rss / (1024 * 1024) });
7351 + }
7352 + } /*else if (chartType == 2) { // Database
7353 + serverTimelineConfig.options.scales.yAxes[0].scaleLabel.labelString = 'Records';
7354 + data = {
7355 + labels: [pastDate(0), timeAfter],
7356 + datasets: [
7357 + { label: 'Groups', data: [], backgroundColor: 'rgba(158, 151, 16, .1)', borderColor: 'rgb(158, 151, 16)', fill: true },
7358 + { label: 'Devices', data: [], backgroundColor: 'rgba(16, 84, 158, .1)', borderColor: 'rgb(16, 84, 158)', fill: true },
7359 + { label: 'Users', data: [], backgroundColor: 'rgba(255, 99, 132, .1)', borderColor: 'rgb(255, 99, 132)', fill: true },
7360 + { label: 'Records', data: [], backgroundColor: 'rgba(39, 158, 16, .1)', borderColor: 'rgb(39, 158, 16)', fill: true }
7361 + ]
7362 + };
7363 + for (var i = 0; i < serverTimelineStats.length; i++) {
7364 + data.datasets[0].data.push({ x: serverTimelineStats[i].time, y: serverTimelineStats[i].db.meshes });
7365 + data.datasets[1].data.push({ x: serverTimelineStats[i].time, y: serverTimelineStats[i].db.nodes });
7366 + data.datasets[2].data.push({ x: serverTimelineStats[i].time, y: serverTimelineStats[i].db.users });
7367 + data.datasets[3].data.push({ x: serverTimelineStats[i].time, y: serverTimelineStats[i].db.total });
7368 + }
7369 + }*/
7370 + serverTimelineConfig.data = data;
7371 + window.serverMainStats.update();
7372 + }
7373 +
7374 + function p40downloadEvents() {
7375 + var csv = "time, conn.agent, conn.users, conn.usersessions, conn.relaysession, conn.intelamt, mem.external, mem.heapused, mem.heaptotal, mem.rss\r\n";
7376 + for (var i = 0; i < serverTimelineStats.length; i++) {
7377 + if (serverTimelineStats[i].conn && serverTimelineStats[i].mem) {
7378 + csv += new Date(serverTimelineStats[i].time) + ', ' + serverTimelineStats[i].conn.ca + ', ' + serverTimelineStats[i].conn.cu + ', ' + serverTimelineStats[i].conn.us + ', ' + serverTimelineStats[i].conn.rs + ', ' + (serverTimelineStats[i].conn.am ? serverTimelineStats[i].conn.am : '') + ', ' + serverTimelineStats[i].mem.external + ', ' + serverTimelineStats[i].mem.heapUsed + ', ' + serverTimelineStats[i].mem.heapTotal + ', ' + serverTimelineStats[i].mem.rss + '\r\n';
7379 + }
7380 + }
7381 + saveAs(new Blob([csv], { type: "application/octet-stream" }), "ServerStats.csv");
7382 + }
7383 +
7384 //
7385 // POPUP DIALOG
7386 //
@@ -7274,64 +7435,78 @@
7435 function go(x) {
7436 if (xxdialogMode || xxcurrentView == x) return;
7437 // Edit this line when adding a new screen
7277 - for (var i = 0; i < 32; i++) { QV('p' + i, i == x); }
7438 + for (var i = 0; i < 41; i++) { QV('p' + i, i == x); }
7439 xxcurrentView = x;
7440
7441 + // Remove top bar selection
7442 + var mainBarItems = ['MainMenuMyDevices', 'MainMenuMyAccount', 'MainMenuMyEvents', 'MainMenuMyFiles', 'MainMenuMyUsers', 'MainMenuMyServer'];
7443 + for (var i in mainBarItems) {
7444 + QC(mainBarItems[i]).remove('fullselect');
7445 + QC(mainBarItems[i]).remove('semiselect');
7446 + }
7447 +
7448 // Remove left bar selection
7449 var leftBarItems = ['LeftMenuMyDevices', 'LeftMenuMyAccount', 'LeftMenuMyEvents', 'LeftMenuMyFiles', 'LeftMenuMyUsers', 'LeftMenuMyServer'];
7282 - for (var i in leftBarItems) { Q(leftBarItems[i]).classList.remove('lbbuttonsel'); Q(leftBarItems[i]).classList.remove('lbbuttonsel2'); }
7450 + for (var i in leftBarItems) {
7451 + QC(leftBarItems[i]).remove('lbbuttonsel');
7452 + QC(leftBarItems[i]).remove('lbbuttonsel2');
7453 + }
7454
7284 - // My Devices
7455 QV('topbar', x != 0);
7286 - if (x >= 10 && x < 20) { QS('MainMenuMyDevices').backgroundColor = "#606060"; } else { QS('MainMenuMyDevices').backgroundColor = ((x == 1) ? "#003366" : "#808080"); }
7287 - if (x == 1 || (x >= 10 && x < 20)) { Q('LeftMenuMyDevices').classList.add('lbbuttonsel'); }
7288 - if (x == 1) { Q('LeftMenuMyDevices').classList.add('lbbuttonsel2'); }
7456 + // Define class for Menu(s) as fully or semi active.
7457 + var mainMenuActiveClass = (x < 9 ? 'fullselect' : 'semiselect');
7458 + var leftMenuActiveClass = (x < 9 ? 'lbbuttonsel2' : 'lbbuttonsel');
7459 +
7460 + // My Devices
7461 + if (x == 1 || (x >= 10 && x < 20)) QC('MainMenuMyDevices').add(mainMenuActiveClass);
7462 + if (x == 1 || (x >= 10 && x < 20)) QC('LeftMenuMyDevices').add(leftMenuActiveClass);
7463
7464 // My Account
7291 - if (x >= 20 && x < 30) { QS('MainMenuMyAccount').backgroundColor = "#606060"; } else { QS('MainMenuMyAccount').backgroundColor = ((x == 2) ? "#003366" : "#808080"); }
7292 - if (x == 2 || (x >= 20 && x < 30)) { Q('LeftMenuMyAccount').classList.add('lbbuttonsel'); }
7293 - if (x == 2) { Q('LeftMenuMyAccount').classList.add('lbbuttonsel2'); }
7465 + if (x == 2 || (x >= 20 && x < 30)) QC('MainMenuMyAccount').add(mainMenuActiveClass);
7466 + if (x == 2 || (x >= 20 && x < 30)) QC('LeftMenuMyAccount').add(leftMenuActiveClass);
7467
7468 // My Events
7296 - QS('MainMenuMyEvents').backgroundColor = ((x == 3) ? "#003366" : "#808080");
7297 - if (x == 3) { Q('LeftMenuMyEvents').classList.add('lbbuttonsel', 'lbbuttonsel2'); }
7469 + if (x == 3) QC('MainMenuMyEvents').add(mainMenuActiveClass);
7470 + if (x == 3) QC('LeftMenuMyEvents').add(leftMenuActiveClass);
7471
7472 // My Users
7300 - if (x >= 30 && x < 40) { QS('MainMenuMyUsers').backgroundColor = "#606060"; } else { QS('MainMenuMyUsers').backgroundColor = ((x == 4) ? "#003366" : "#808080"); }
7301 - if (x == 4 || (x >= 30 && x < 40)) { Q('LeftMenuMyUsers').classList.add('lbbuttonsel'); }
7302 - if (x == 4) { Q('LeftMenuMyUsers').classList.add('lbbuttonsel2'); }
7473 + if (x == 4 || (x >= 30 && x < 40)) QC('MainMenuMyUsers').add(mainMenuActiveClass);
7474 + if (x == 4 || (x >= 30 && x < 40)) QC('LeftMenuMyUsers').add(leftMenuActiveClass);
7475
7476 // My Files
7305 - QS('MainMenuMyFiles').backgroundColor = ((x == 5) ? "#003366" : "#808080");
7306 - if (x == 5) { Q('LeftMenuMyFiles').classList.add('lbbuttonsel', 'lbbuttonsel2'); }
7477 + if (x == 5) QC('MainMenuMyFiles').add(mainMenuActiveClass);
7478 + if (x == 5) QC('LeftMenuMyFiles').add(leftMenuActiveClass);
7479
7480 // My Server
7309 - QS('MainMenuMyServer').backgroundColor = (((x == 6) || (x == 115)) ? "#003366" : "#808080");
7310 - if (((x == 6) || (x == 115))) { Q('LeftMenuMyServer').classList.add('lbbuttonsel', 'lbbuttonsel2'); }
7481 + if ((x == 6) || (x == 115)) QC('MainMenuMyServer').add(mainMenuActiveClass);
7482 + if ((x == 6) || (x == 115)) QC('LeftMenuMyServer').add(leftMenuActiveClass);
7483
7484 // column_l max-height
7313 - if (webPageFullScreen) {
7314 - QS('column_l')["max-height"] = 'calc(100vh - 135px)';
7485 + if (!webPageFullScreen && x >= 10) {
7486 + QC('column_l').add('room4submenu');
7487 } else {
7316 - QS('column_l')["max-height"] = (x >= 10) ? 'calc(100vh - 159px)' : 'calc(100vh - 135px)';
7488 + QC('column_l').remove('room4submenu');
7489 }
7490 +
7491 + // Jovan, please check. I think this part is not needed anymore. Removing class will revert to default style
7492 + /*
7493 if ((x == 0) && (webPageFullScreen)) {
7494 QS('page_content').position = '';
7495 QV('page_leftbar', false);
7496 QS('column_l').height = 'calc(100vh - 110px)';
7497 QS('column_l')["max-height"] = '';
7323 - }
7498 + } */
7499
7500 QV('MainSubMenuSpan', x >= 10 && x < 20);
7501 QV('UserDummyMenuSpan', (x < 10) && (x != 6) && webPageFullScreen);
7502 QV('MeshSubMenuSpan', x >= 20 && x < 30);
7503 QV('UserSubMenuSpan', x >= 30 && x < 40);
7329 - QV('ServerSubMenuSpan', x == 6 || x == 115);
7330 - var panels = { 10: 'MainDev', 11: 'MainDevDesktop', 12: 'MainDevTerminal', 13: 'MainDevFiles', 14: 'MainDevAmt', 15: 'MainDevConsole', 20: 'MeshGeneral', 30: 'UserGeneral', 31: 'UserEvents', 6: 'ServerGeneral', 115: 'ServerConsole' };
7504 + QV('ServerSubMenuSpan', x == 6 || x == 115 || x == 40);
7505 + var panels = { 10: 'MainDev', 11: 'MainDevDesktop', 12: 'MainDevTerminal', 13: 'MainDevFiles', 14: 'MainDevAmt', 15: 'MainDevConsole', 20: 'MeshGeneral', 30: 'UserGeneral', 31: 'UserEvents', 6: 'ServerGeneral', 40: 'ServerStats', 115: 'ServerConsole' };
7506 for (var i in panels) {
7332 - Q(panels[i]).classList.remove('style3x');
7333 - Q(panels[i]).classList.remove('style3sel');
7334 - Q(panels[i]).classList.add((x == i) ? 'style3sel' : 'style3x');
7507 + QC(panels[i]).remove('style3x');
7508 + QC(panels[i]).remove('style3sel');
7509 + QC(panels[i]).add((x == i) ? 'style3sel' : 'style3x');
7510 }
7511
7512 // Panel 115 is weird, it's panel 15 for device console but used as a server console.
@@ -7342,8 +7517,11 @@
7517
7518 if (x == 1) masterUpdate(4);
7519
7520 + // Fetch the server timeline stats if needed
7521 + if ((x == 40) && (serverTimelineStats == null)) { refreshServerTimelineStats(); }
7522 +
7523 // Update the web page title
7346 - if ((currentNode) && (x >= 10) && (x < 20)) { document.title = 'MeshCentral - ' + currentNode.name; } else { document.title = 'MeshCentral'; }
7524 + if ((currentNode) && (x >= 10) && (x < 20)) { document.title = '{{{title}}} - ' + currentNode.name; } else { document.title = '{{{title}}}'; }
7525 }
7526
7527 // Generic methods
@@ -7351,7 +7529,7 @@
7529 function putstore(name, val) { try { if (typeof (localStorage) === 'undefined') return; localStorage.setItem(name, val); } catch (e) { } }
7530 function getstore(name, val) { try { if (typeof (localStorage) === 'undefined') return val; var v = localStorage.getItem(name); if ((v == null) || (v == null)) return val; return v; } catch (e) { return val; } }
7531 //function addLink(x, f) { return "<a style=cursor:pointer;color:darkblue;text-decoration:none onclick='" + f + "'>&diams; " + x + "</a>"; }
7354 - function addLink(x, f) { return "<span style=cursor:pointer;text-decoration:none onclick='" + f + "'>" + x + " <img class=hoverButton width=10 height=10 src=images/link5.png></span>"; }
7532 + function addLink(x, f) { return "<span style=cursor:pointer;text-decoration:none onclick='" + f + "'>" + x + " <img class=hoverButton src=images/link5.png></span>"; }
7533 function addLinkConditional(x, f, c) { if (c) return addLink(x, f); return x; }
7534 function haltEvent(e) { if (e.preventDefault) e.preventDefault(); if (e.stopPropagation) e.stopPropagation(); return false; }
7535 function addOption(q, t, i) { var option = document.createElement("option"); option.text = t; option.value = i; Q(q).add(option); }
@@ -7384,4 +7562,4 @@
7562
7563 </script>
7564 </body>
7387 -</html>
7565 +</html>
\ No newline at end of file