Added html hover on some elements of the web application
Ylian Saint-Hilaire committed
Nov 12, 2018 at 18:36 UTC
62fa7aa368496d6cec3f18bc1aac515386476b6d
4 files changed
+89
-33
meshcentral.js
+8
-3
@@ -368,7 +368,7 @@ function CreateMeshCentralServer(config, args) {
368
obj.updateMeshCore();
369
obj.updateMeshCmd();
370
371
- // Setup and start the redirection server if needed
371
+ // Setup and start the redirection server if needed. We must start the redirection server before Let's Encrypt.
372
if ((obj.args.redirport != null) && (typeof obj.args.redirport == 'number') && (obj.args.redirport != 0)) {
373
obj.redirserver = require('./redirserver.js').CreateRedirServer(obj, obj.db, obj.args, obj.StartEx2);
374
} else {
@@ -383,7 +383,7 @@ function CreateMeshCentralServer(config, args) {
383
// Load server certificates
384
obj.certificateOperations = require('./certoperations.js').CertificateOperations();
385
obj.certificateOperations.GetMeshServerCertificate(obj, obj.args, obj.config, function (certs) {
386
- if (obj.config.letsencrypt == null) {
386
+ if ((obj.config.letsencrypt == null) || (obj.redirserver == null)) {
387
obj.StartEx3(certs); // Just use the configured certificates
388
} else {
389
var le = require('./letsencrypt.js');
@@ -448,7 +448,12 @@ function CreateMeshCentralServer(config, args) {
448
var i;
449
450
// If the certificate is un-configured, force LAN-only mode
451
- if (obj.certificates.CommonName == 'un-configured') { console.log('Server name not configured, running in LAN-only mode.'); obj.args.lanonly = true; }
451
+ if (obj.certificates.CommonName == 'un-configured') { /*console.log('Server name not configured, running in LAN-only mode.');*/ obj.args.lanonly = true; }
452
+
453
+ // Write server version and run mode
454
+ var productionMode = (process.env.NODE_ENV && (process.env.NODE_ENV == 'production'));
455
+ var runmode = (obj.args.lanonly ? 2 : (obj.args.wanonly ? 1 : 0));
456
+ console.log('MeshCentral v' + obj.currentVer + ', ' + (['Hybrid (LAN + WAN) mode', 'WAN mode', 'LAN mode'][runmode]) + (productionMode ? ', Production mode.' : '.'));
457
458
// Check that no sub-domains have the same DNS as the parent
459
for (i in obj.config.domains) {
package.json
+1
-1
@@ -1,6 +1,6 @@
1
{
2
"name": "meshcentral",
3
- "version": "0.2.2-u",
3
+ "version": "0.2.2-v",
4
"keywords": [
5
"Remote Management",
6
"Intel AMT",
public/styles/style.css
+30
@@ -281,6 +281,24 @@ a {
281
font-weight: bold;
282
}
283
284
+.style3x {
285
+ text-align: center;
286
+ color: white;
287
+ background-color: #808080;
288
+ font-weight: bold;
289
+}
290
+
291
+ .style3x:hover {
292
+ background-color: #606060;
293
+ }
294
+
295
+.style3sel {
296
+ text-align: center;
297
+ color: white;
298
+ background-color: #003366;
299
+ font-weight: bold;
300
+}
301
+
302
.style4 {
303
color: white;
304
text-decoration: none;
@@ -402,6 +420,10 @@ a {
420
background-attachment: scroll;
421
}
422
423
+.g1s {
424
+ background-image: linear-gradient(to right, #ffffff 0%, #b9b9b9 100%);
425
+}
426
+
427
.g2 {
428
background-position: 0% 0%;
429
width: 14px;
@@ -416,6 +438,10 @@ a {
438
background-attachment: scroll;
439
}
440
441
+.g2s {
442
+ background-image: linear-gradient(to right, #b9b9b9 0%, #ffffff 100%);
443
+}
444
+
445
.h1 {
446
background-position: 0% 0%;
447
width: 14px;
@@ -458,6 +484,10 @@ a {
484
background-color: #c9c9c9;
485
}
486
487
+.e2s {
488
+ background-color: #b9b9b9;
489
+}
490
+
491
.bar {
492
font-size: large;
493
background-color: #C9C9C9;
views/default.handlebars
+50
-29
@@ -95,25 +95,25 @@
95
</div>
96
<table id=MainMenuSpan style=width:100%;height:22px cellpadding=0 cellspacing=0 class=style1>
97
<tr>
98
- <td id=MainMenuMyDevices style=width:100px;height:24px;cursor:pointer class=style3 onclick=go(1)>My Devices</td>
99
- <td id=MainMenuMyAccount style=width:100px;height:24px;cursor:pointer class=style3 onclick=go(2)>My Account</td>
100
- <td id=MainMenuMyEvents style=width:100px;height:24px;cursor:pointer class=style3 onclick=go(3)>My Events</td>
101
- <td id=MainMenuMyFiles style=width:100px;height:24px;cursor:pointer class=style3 onclick=go(5)>My Files</td>
102
- <td id=MainMenuMyUsers style=width:100px;height:24px;cursor:pointer;display:none class=style3 onclick=go(4)>My Users</td>
103
- <td id=MainMenuMyServer style=width:100px;height:24px;cursor:pointer;display:none class=style3 onclick=go(6)>My Server</td>
98
+ <td id=MainMenuMyDevices style=width:100px;height:24px;cursor:pointer class=style3x onclick=go(1)>My Devices</td>
99
+ <td id=MainMenuMyAccount style=width:100px;height:24px;cursor:pointer class=style3x onclick=go(2)>My Account</td>
100
+ <td id=MainMenuMyEvents style=width:100px;height:24px;cursor:pointer class=style3x onclick=go(3)>My Events</td>
101
+ <td id=MainMenuMyFiles style=width:100px;height:24px;cursor:pointer class=style3x onclick=go(5)>My Files</td>
102
+ <td id=MainMenuMyUsers style=width:100px;height:24px;cursor:pointer;display:none class=style3x onclick=go(4)>My Users</td>
103
+ <td id=MainMenuMyServer style=width:100px;height:24px;cursor:pointer;display:none class=style3x onclick=go(6)>My Server</td>
104
<td class=style3 style="text-align:right;height:24px"> </td>
105
</tr>
106
</table>
107
<div id=MainSubMenuSpan style=display:none>
108
<table id=MainSubMenu style=width:100%;height:22px cellpadding=0 cellspacing=0 class=style1>
109
<tr>
110
- <td id=MainDev style=width:100px;height:24px;cursor:pointer class=style3 onclick=go(10)>General</td>
111
- <td id=MainDevDesktop style=width:100px;height:24px;cursor:pointer class=style3 onclick=go(11)>Desktop</td>
112
- <td id=MainDevTerminal style=width:100px;height:24px;cursor:pointer class=style3 onclick=go(12)>Terminal</td>
113
- <td id=MainDevFiles style=width:100px;height:24px;cursor:pointer;display:none class=style3 onclick=go(13)>Files</td>
114
- <td id=MainDevEvents style=width:100px;height:24px;cursor:pointer class=style3 onclick=go(16)>Events</td>
115
- <td id=MainDevAmt style=width:100px;height:24px;cursor:pointer class=style3 onclick=go(14)>Intel® AMT</td>
116
- <td id=MainDevConsole style=width:100px;height:24px;cursor:pointer class=style3 onclick=go(15)>Console</td>
110
+ <td id=MainDev style=width:100px;height:24px;cursor:pointer class=style3x onclick=go(10)>General</td>
111
+ <td id=MainDevDesktop style=width:100px;height:24px;cursor:pointer class=style3x onclick=go(11)>Desktop</td>
112
+ <td id=MainDevTerminal style=width:100px;height:24px;cursor:pointer class=style3x onclick=go(12)>Terminal</td>
113
+ <td id=MainDevFiles style=width:100px;height:24px;cursor:pointer;display:none class=style3x onclick=go(13)>Files</td>
114
+ <td id=MainDevEvents style=width:100px;height:24px;cursor:pointer class=style3x onclick=go(16)>Events</td>
115
+ <td id=MainDevAmt style=width:100px;height:24px;cursor:pointer class=style3x onclick=go(14)>Intel® AMT</td>
116
+ <td id=MainDevConsole style=width:100px;height:24px;cursor:pointer class=style3x onclick=go(15)>Console</td>
117
<td class=style3 style=height:24px> </td>
118
</tr>
119
</table>
@@ -121,7 +121,7 @@
121
<div id=MeshSubMenuSpan style=display:none>
122
<table id=MeshSubMenu style=width:100%;height:22px cellpadding=0 cellspacing=0 class=style1>
123
<tr>
124
- <td id=MeshGeneral style=width:100px;height:24px;cursor:pointer class=style3 onclick=go(20)>General</td>
124
+ <td id=MeshGeneral style=width:100px;height:24px;cursor:pointer class=style3x onclick=go(20)>General</td>
125
<td class=style3 style=height:24px> </td>
126
</tr>
127
</table>
@@ -129,8 +129,8 @@
129
<div id=UserSubMenuSpan style=display:none>
130
<table id=UserSubMenu style=width:100%;height:22px cellpadding=0 cellspacing=0 class=style1>
131
<tr>
132
- <td id=UserGeneral style=width:100px;height:24px;cursor:pointer class=style3 onclick=go(30)>General</td>
133
- <td id=UserEvents style=width:100px;height:24px;cursor:pointer class=style3 onclick=go(31)>Events</td>
132
+ <td id=UserGeneral style=width:100px;height:24px;cursor:pointer class=style3x onclick=go(30)>General</td>
133
+ <td id=UserEvents style=width:100px;height:24px;cursor:pointer class=style3x onclick=go(31)>Events</td>
134
<td class=style3 style=height:24px> </td>
135
</tr>
136
</table>
@@ -1659,6 +1659,19 @@
1659
var updateDevicesTimer = null;
1660
function updateDevices() { if (updateDevicesTimer != null) return; updateDevicesTimer = setTimeout(updateDevicesEx, 200); }
1661
1662
+ // Highlights the device being hovered
1663
+ function devMouseHover(element, over) {
1664
+ var e = element.children[1].children[1];
1665
+ e.children[0].classList.remove('g1s');
1666
+ e.children[1].classList.remove('e2s');
1667
+ e.children[2].classList.remove('g2s');
1668
+ if (over == 1) {
1669
+ e.children[0].classList.add('g1s');
1670
+ e.children[1].classList.add('e2s');
1671
+ e.children[2].classList.add('g2s');
1672
+ }
1673
+ }
1674
+
1675
var deviceHeaderId = 0;
1676
var deviceHeaderTotal = 0;
1677
var deviceHeadersTitles = {};
@@ -1754,7 +1767,7 @@
1767
var realw = Q('xdevices').clientWidth - 30;
1768
var xw = Math.floor(realw / 301);
1769
xw = 301 + Math.floor((realw - (xw * 301)) / xw);
1757
- r += '<div id=devs style=display:inline-block;width:' + xw + 'px;height:50px;padding-top:1px;padding-bottom:1px><div style=width:22px;height:50%;float:left;padding-top:12px><input class="' + nodes[i].meshid + ' DeviceCheckbox" onclick=p1updateInfo() value=devid_' + nodes[i]._id + ' type=checkbox></div><div style=height:100%;cursor:pointer onclick=gotoDevice(\'' + nodes[i]._id + '\')><div class="i' + icon + '" style=width:50px;float:left></div><div style=height:100%><div class=g1></div><div class=e2><div class=e1 style=width:' + (xw - 100) + 'px title="' + title + '">' + name + '</div><div>' + nodestate + '</div></div><div class=g2></div></div></div></div>';
1770
+ r += '<div id=devs onmouseover=devMouseHover(this,1) onmouseout=devMouseHover(this,0) style=display:inline-block;width:' + xw + 'px;height:50px;padding-top:1px;padding-bottom:1px><div style=width:22px;height:50%;float:left;padding-top:12px><input class="' + nodes[i].meshid + ' DeviceCheckbox" onclick=p1updateInfo() value=devid_' + nodes[i]._id + ' type=checkbox></div><div style=height:100%;cursor:pointer onclick=gotoDevice(\'' + nodes[i]._id + '\')><div class="i' + icon + '" style=width:50px;float:left></div><div style=height:100%><div class=g1></div><div class=e2><div class=e1 style=width:' + (xw - 100) + 'px title="' + title + '">' + name + '</div><div>' + nodestate + '</div></div><div class=g2></div></div></div></div>';
1771
} else if (view == 2) {
1772
r += '<tr><td><div id=devs class=bar18 style=height:18px;width:100%;font-size:medium>';
1773
r += '<div style=width:22px;float:left;background-color:white><input class="' + nodes[i].meshid + ' DeviceCheckbox" onclick=p1updateInfo() value=devid_' + nodes[i]._id + ' type=checkbox></div>';
@@ -5009,7 +5022,7 @@
5022
if (meshrights == 0xFFFFFFFF) rights = 'Full Administrator'; else if (meshrights == 0) rights = 'No Rights';
5023
5024
// Print the mesh information
5012
- r += '<div style=display:inline-block;width:431px;height:50px;padding-top:1px;padding-bottom:1px;float:left><div style=float:left;width:30px;height:100%></div><div style=height:100%;cursor:pointer onclick=gotoMesh(\'' + i + '\')><div class=mi style=float:left;width:50px;height:50px></div><div style=height:100%><div class=g1></div><div class=e2 style=width:300px><div class=e1>' + EscapeHtml(meshes[i].name) + '</div><div>' + rights + '</div></div><div class=g2 style=float:left></div></div></div></div>';
5025
+ r += '<div onmouseover=devMouseHover(this,1) onmouseout=devMouseHover(this,0) style=display:inline-block;width:431px;height:50px;padding-top:1px;padding-bottom:1px;float:left><div style=float:left;width:30px;height:100%></div><div style=height:100%;cursor:pointer onclick=gotoMesh(\'' + i + '\')><div class=mi style=float:left;width:50px;height:50px></div><div style=height:100%><div class=g1></div><div class=e2 style=width:300px><div class=e1>' + EscapeHtml(meshes[i].name) + '</div><div>' + rights + '</div></div><div class=g2 style=float:left></div></div></div></div>';
5026
}
5027
5028
meshcount = count;
@@ -5520,6 +5533,17 @@
5533
// MY EVENTS
5534
//
5535
5536
+ // Highlights the device being hovered
5537
+ function eventMouseHover(e, over) {
5538
+ e.children[1].classList.remove('g1s');
5539
+ e.children[2].style['background-color'] = ((over == 0) ? '#c9c9c9' : '#b9b9b9');
5540
+ e.children[3].classList.remove('g2s');
5541
+ if (over == 1) {
5542
+ e.children[1].classList.add('g1s');
5543
+ e.children[3].classList.add('g2s');
5544
+ }
5545
+ }
5546
+
5547
function events_update() {
5548
var x = '', dateHeader = null;
5549
for (var i in events) {
@@ -5536,7 +5560,7 @@
5560
5561
var msg = event.msg.split('(R)').join('®');
5562
if (event.username && event.username != userinfo.name) { msg += ': ' + event.username; }
5539
- x += '<tr><td style=width:18px><div class=' + icon + '></div></td><td class=g1 style=float:none> </td><td style=background-color:#C9C9C9>' + time.toLocaleTimeString() + ' - ' + msg + '</td><td class=g2 style=float:none> </td></tr><tr style=height:2px></tr>';
5563
+ 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> </td><td style=background-color:#C9C9C9>' + time.toLocaleTimeString() + ' - ' + msg + '</td><td class=g2 style=float:none> </td></tr><tr style=height:2px></tr>';
5564
}
5565
if (dateHeader != null) x += '</table>';
5566
if (x == '') x = "<br><i>No Events Found</i><br><br>";
@@ -6310,18 +6334,15 @@
6334
6335
QV('MainSubMenuSpan', x >= 10 && x < 20);
6336
QV('UserDummyMenuSpan', (x < 10) && webPageFullScreen);
6313
- QS('MainDev').backgroundColor = ((x == 10) ? "#003366" : "#808080");
6314
- QS('MainDevDesktop').backgroundColor = ((x == 11) ? "#003366" : "#808080");
6315
- QS('MainDevTerminal').backgroundColor = ((x == 12) ? "#003366" : "#808080");
6316
- QS('MainDevFiles').backgroundColor = ((x == 13) ? "#003366" : "#808080");
6317
- QS('MainDevEvents').backgroundColor = ((x == 16) ? "#003366" : "#808080");
6318
- QS('MainDevAmt').backgroundColor = ((x == 14) ? "#003366" : "#808080");
6319
- QS('MainDevConsole').backgroundColor = ((x == 15) ? "#003366" : "#808080");
6337
QV('MeshSubMenuSpan', x >= 20 && x < 30);
6321
- QS('MeshGeneral').backgroundColor = ((x == 20) ? "#003366" : "#808080");
6338
QV('UserSubMenuSpan', x >= 30 && x < 40);
6323
- QS('UserGeneral').backgroundColor = ((x == 30) ? "#003366" : "#808080");
6324
- QS('UserEvents').backgroundColor = ((x == 31) ? "#003366" : "#808080");
6339
+ var panels = { 10: 'MainDev', 11: 'MainDevDesktop', 12: 'MainDevTerminal', 13: 'MainDevFiles', 14: 'MainDevAmt', 15: 'MainDevConsole', 20: 'MeshGeneral', 30: 'UserGeneral', 31: 'UserEvents' };
6340
+ for (var i in panels) {
6341
+ Q(panels[i]).classList.remove('style3x');
6342
+ Q(panels[i]).classList.remove('style3sel');
6343
+ Q(panels[i]).classList.add((x == i) ? 'style3sel' : 'style3x');
6344
+ }
6345
+
6346
if (x == 1) updateDevicesEx();
6347
}
6348