diff --git a/web/remote/index.html b/web/remote/index.html index 1154b03d..876ede00 100644 --- a/web/remote/index.html +++ b/web/remote/index.html @@ -11,6 +11,7 @@ + diff --git a/web/share/css/remote/remote.css b/web/share/css/remote/remote.css index 968c7c10..338e3ddf 100644 --- a/web/share/css/remote/remote.css +++ b/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; diff --git a/web/share/css/remote/status.css b/web/share/css/remote/status.css new file mode 100644 index 00000000..d648a138 --- /dev/null +++ b/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 ]"; +} diff --git a/web/share/js/remote/main.js b/web/share/js/remote/main.js index 575cd9e9..cd8f4fcd 100644 --- a/web/share/js/remote/main.js +++ b/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) { `; - 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); }