[TASK] add hostname to nodeView

webroot/css/map.css

@@ -12,19 +12,19 @@
 	border-left: 3px solid green;
 }
 .leaflet-container .node.client5 {
-	border-border: 3px solid green;
+	border-right: 3px solid green;
 }
 .leaflet-container .node.client24-warn {
 	border-left: 3px solid yellow;
 }
 .leaflet-container .node.client5-warn {
-	border-border: 3px solid yellow;
+	border-right: 3px solid yellow;
 }
 .leaflet-container .node.client24-crit {
 	border-left: 3px solid red;
 }
 .leaflet-container .node.client5-crit {
-	border-border: 3px solid red;
+	border-right: 3px solid red;
 }
 .leaflet-container .nodeicon-label {
 	font-size: 12px;

webroot/js/config.js

@@ -23,12 +23,12 @@ const config = {
      */
 		'heatmap': {
 			'wifi24': {
-				'size': 230,
+				'size': 30,
 				'opacity': 0.5,
 				'alphaRange': 1
 			},
 			'wifi5': {
-				'size': 230,
+				'size': 30,
 				'opacity': 0.5,
 				'alphaRange': 1
 			}

webroot/js/gui_node.js

@@ -15,6 +15,8 @@ const guiNode = {};
 		titleID = null,
 		ago = null,
 
+		hostnameInput = null,
+
 		marker = null,
 		map = null,
 		geoJsonLayer = null,
@@ -66,6 +68,7 @@ const guiNode = {};
 			return;
 		}
 		titleName.innerHTML = node.hostname;
+		hostnameInput.value = node.hostname;
 		// eslint-disable-next-line one-var
 		const latlng = [node.location.latitude, node.location.longitude];
 
@@ -96,6 +99,7 @@ const guiNode = {};
 
 		const title = domlib.newAt(el, 'h1'),
 			lastseen = domlib.newAt(el, 'p'),
+			hostname = domlib.newAt(el, 'p'),
 			mapEl = domlib.newAt(el, 'div');
 
 		titleName = domlib.newAt(title, 'span');
@@ -106,6 +110,22 @@ const guiNode = {};
 		domlib.newAt(lastseen, 'span').innerHTML = 'Lastseen: ';
 		ago = domlib.newAt(lastseen, 'span');
 
+		domlib.newAt(hostname, 'span').innerHTML = 'Hostname: ';
+		hostnameInput = domlib.newAt(hostname, 'input');
+		hostnameInput.setAttribute('placeholder', 'Hostname');
+		hostnameInput.addEventListener('focusin', () => {
+			editing = true;
+		});
+		hostnameInput.addEventListener('focusout', () => {
+			editing = false;
+
+			const node = store.getNode(currentNodeID);
+
+			node.hostname = hostnameInput.value;
+
+			socket.sendnode(node);
+		});
+
 
 		mapEl.style.height = '300px';
 		map = L.map(mapEl).setView(config.map.view.bound, config.map.view.zoom);