add: error state view

web/remote/index.html

@@ -11,6 +11,7 @@
     <meta name="msapplication-TileColor" content="#2b5797">
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="/share/css/remote/remote.css">
+    <link rel="stylesheet" href="/share/css/remote/status.css">
     <link rel="stylesheet" href="/share/css/remote/actions.css">
     <link rel="stylesheet" href="/share/css/vars.css">
     <link rel="stylesheet" href="/share/css/main.css">

web/share/css/remote/remote.css

@@ -30,44 +30,6 @@ div#hosts div.host {
     border-radius: 6px;
 }
 
-span.bulb {
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    display: inline-block;
-    margin-right: 8px;
-}
-
-div[state='unknown'] span.bulb {
-    background-color: yellow;
-}
-
-div[state='online'] span.bulb {
-    background-color: limegreen;
-}
-
-div[state='offline'] span.bulb {
-    background-color: grey;
-}
-
-span.state {
-    margin-left: 24px;
-    color: grey;
-    user-select: none;
-}
-
-div[state='unknown'] span.state::before {
-    content: "[ Unknown ]";
-}
-
-div[state='online'] span.state::before {
-    content: "[ Online ]";
-}
-
-div[state='offline'] span.state::before {
-    content: "[ Offline ]";
-}
-
 span.hostname {
     font-size: 18px;
     font-weight: 500;

web/share/css/remote/status.css

@@ -0,0 +1,45 @@
+span.bulb {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    display: inline-block;
+    margin-right: 8px;
+}
+
+div[state='unknown'] span.bulb {
+    background-color: yellow;
+}
+
+div[state='online'] span.bulb {
+    background-color: limegreen;
+}
+
+div[state='offline'] span.bulb {
+    background-color: grey;
+}
+
+div[state='error'] span.bulb {
+    background-color: orangered;
+}
+
+span.state {
+    margin-left: 24px;
+    color: grey;
+    user-select: none;
+}
+
+div[state='unknown'] span.state::before {
+    content: "[ Unknown ]";
+}
+
+div[state='online'] span.state::before {
+    content: "[ Online ]";
+}
+
+div[state='offline'] span.state::before {
+    content: "[ Offline ]";
+}
+
+div[state='error'] span.state::before {
+    content: "[ Error ]";
+}

web/share/js/remote/main.js

@@ -104,8 +104,12 @@ function actionPerform(target, action) {
 		let result = JSON.parse(response).result;
 
 		if (result.code != 0) {
-			let state = $$$(`.host[name='${target}'] span.state`)[0];
-			state.innerHTML = '  ⦻  Failed';
+			let element = $$$(`.host[name='${target}']`)[0];
+			let state = element.querySelector('span.state');
+
+			element.setAttribute("state", "error");
+			state.innerHTML = '  ⦻  '
+			                + action[0] + action.slice(1).toLowerCase();
 			setTimeout(() => updateState(status[target]), 5000);
 		}
 	}, body, contentType);
@@ -148,7 +152,7 @@ function makeView(hosts) {
 		  </div>
 		`;
 
-		let actions = child.querySelector(".remote-actions");
+		let buttons = child.querySelector(".remote-actions");
 		for (const action of host.actions) {
 			let button = document.createElement("button");
 			button.classList.add("remote-action");
@@ -160,7 +164,7 @@ function makeView(hosts) {
 				                + action[0] + action.slice(1).toLowerCase();
 				actionPerform(host.name, action);
 			};
-			actions.appendChild(button);
+			buttons.appendChild(button);
 		}
 		updateState(host, child);
 	}