improve: action page design; add: daemon status

2025-09-06 06:37:01 +00:00 · 2024-07-18 11:30:58 +07:00
parent da7cb91456
commit 61bad158e8
13 changed files with 130 additions and 21 deletions
--- a/webroot/css/index.css
+++ b/webroot/css/index.css
@@ -14,7 +14,6 @@
  --lock-desc: #c9c9c9;
  --lock: #fff;
  --font-family: 'ProductSans Regular', 'ProductSans Italic', sans-serif;
-  /* --font-system: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif */
 }

 .radios input[type=radio] {
@@ -196,7 +195,7 @@ a {
 .button {
  padding: 1em 0 1em 0;
  border-radius: 30px;
-  transition: transform 0.05s ease-in-out;
+  transition: transform 0.15s ease-in-out;
  background-color: var(--button);
 }

@@ -339,4 +338,20 @@ input:checked + .slider:before {

 .slider.round:before {
  border-radius: 50%;
-}
+}
+
+/* Responsive CSS */
+@media only screen and (max-width: 600px) {
+  .button_list {
+    display: grid;
+    grid-template-columns: 1fr;
+    column-gap: 20px;
+  }
+  .button {
+    padding: 1em 0 1em 0;
+    border-radius: 30px;
+    margin: 0.6em 0 0.6em;
+    transition: transform 0.15s ease-in-out;
+    background-color: var(--button);
+  }
+}
--- a/webroot/index.html
+++ b/webroot/index.html
@@ -117,21 +117,33 @@
      <div id="panel_actions_header" class="header">Actions</div>
      <div style="padding: 40px 0px;"></div>
      <!-- INFO: Settings card body (Daemon32) -->
-      <div id="daemon32" class="dim card" style="margin: 0 15px 0 15px;">
-        <div class="dimc content" style="font-size: 1.1em; padding-left: 5px; padding-top: 6px; padding-bottom: 14px;">Daemon (32 bit)</div>
-        <div class="dimc content button_list">
-          <div id="daemon32_stop_button" class="center button">Stop</div>
-          <div id="daemon32_start_button" class="center button">Start</div>
-          <div id="daemon32_exit_button" class="center button">Exit</div>
+      <div id="daemon32" class="dimc" style="display: block; margin: 0 15px 0 15px; border-radius: 20px;">
+        <div class="dimc liste" style="padding: 30px 22px 30px; border-radius: 20px;">
+          <div class="dimc" style="font-size: 1.22em;">Daemon (32 bit)</div>
+          <div id="daemon32_status" class="dimc" style="font-size: 1.1em;">Unknown</div>
+        </div>
+
+        <div class="small_card_bg" style="padding: 25px 20px 25px 20px; border-radius: 20px;">
+          <div class="small_card_bg button_list">
+            <div id="daemon32_stop_button" class="center button">Stop</div>
+            <div id="daemon32_start_button" class="center button">Start</div>
+            <div id="daemon32_exit_button" class="center button">Exit</div>
+          </div>
        </div>
      </div>
      <!-- INFO: Settings card body (Daemon64) -->
-      <div id="daemon64" class="dim card" style="margin: 15px 15px 0 15px;">
-        <div class="dimc content" style="font-size: 1.1em; padding-left: 5px; padding-top: 6px; padding-bottom: 22px;">Daemon (64 bit)</div>
-        <div class="dimc content button_list">
-          <div id="daemon64_stop_button" class="center button">Stop</div>
-          <div id="daemon64_start_button" class="center button">Start</div>
-          <div id="daemon64_exit_button" class="center button">Exit</div>
+      <div id="daemon64" class="dimc" style="display: block; margin: 15px 15px 0 15px; border-radius: 20px;">
+        <div class="dimc liste" style="padding: 30px 22px 30px; border-radius: 20px;">
+          <div class="dimc" style="font-size: 1.22em;">Daemon (64 bit)</div>
+          <div id="daemon64_status" class="dimc" style="font-size: 1.1em;">Unknown</div>
+        </div>
+
+        <div class="small_card_bg" style="padding: 25px 20px 25px 20px; border-radius: 20px;">
+          <div class="small_card_bg button_list">
+            <div id="daemon64_stop_button" class="center button">Stop</div>
+            <div id="daemon64_start_button" class="center button">Start</div>
+            <div id="daemon64_exit_button" class="center button">Exit</div>
+          </div>
        </div>
      </div>
    </div>
--- a/webroot/js/language.js
+++ b/webroot/js/language.js
@@ -1,3 +1,4 @@
+import { setError } from './main.js'
 import { translateActionPage } from './translate/action.js'
 import { translateHomePage } from './translate/home.js'
 import { translateModulesPage } from './translate/modules.js'
@@ -9,7 +10,7 @@ export async function setNewLanguage(locate, initialize) {

  translateHomePage(old_translations, new_translations)
  translateModulesPage(new_translations)
-  translateActionPage(new_translations)
+  translateActionPage(old_translations, new_translations)
  translateSettingsPage(new_translations)

  /* INFO: lang modal */
@@ -27,7 +28,8 @@ export async function setNewLanguage(locate, initialize) {
 }

 export async function getTranslations(locate) {
-  const translateData = await fetch(`./lang/${locate}.json`).catch(() => { /* INFO: noop */ })
+  const translateData = await fetch(`./lang/${locate}.json`)
+    .catch((err) => setError('WebUI', err.stack ? err.stack : err.message))

  return translateData.json()
 }
--- a/webroot/js/main.js
+++ b/webroot/js/main.js
@@ -1,19 +1,19 @@
 import { fullScreen, exec, toast } from './kernelsu.js'
 import { setNewLanguage, getTranslations } from './language.js'

-function setError(place, issue) {
+export function setError(place, issue) {
  const fullErrorLog = setErrorData(`${place}: ${issue}`)
  document.getElementById('errorh_panel').innerHTML = fullErrorLog
  toast(`${place}: ${issue}`)
 }

-function setLangData(mode) {
+export function setLangData(mode) {
  localStorage.setItem('/system/language', mode)

  return localStorage.getItem('/system/language')
 }

-function setErrorData(errorLog) {
+export function setErrorData(errorLog) {
  const getPrevious = localStorage.getItem('/system/error')
  const finalLog = getPrevious && getPrevious.length !== 0 ? getPrevious + `\n` + errorLog : errorLog

--- a/webroot/js/translate/action.js
+++ b/webroot/js/translate/action.js
@@ -1,4 +1,4 @@
-export function translateActionPage(new_translations) {
+export function translateActionPage(old_translations, new_translations) {
  /* INFO: action card */
  document.getElementById('panel_actions_header').innerHTML = new_translations.page.action.header

@@ -15,4 +15,44 @@ export function translateActionPage(new_translations) {
    document.getElementById('daemon64_start_button').innerHTML = new_translations.page.action.daemonButton.start
    document.getElementById('daemon64_exit_button').innerHTML = new_translations.page.action.daemonButton.exit
  }
+
+  /* INFO: daemon32 status card */
+  const daemon32_status = document.getElementById('daemon32_status')
+  switch (daemon32_status.innerHTML.replace(/(\r\n|\n|\r)/gm, '').trim()) {
+    case old_translations.page.action.status.unknown: {
+      daemon32_status.innerHTML = new_translations.page.action.status.unknown
+
+      break
+    }
+    case old_translations.page.action.status.notWorking: {
+      daemon32_status.innerHTML = new_translations.page.action.status.notWorking
+
+      break
+    }
+    case old_translations.page.action.status.ok: {
+      daemon32_status.innerHTML = new_translations.page.action.status.ok
+
+      break
+    }
+  }
+
+  /* INFO: daemon64 status card */
+  const daemon64_status = document.getElementById('daemon64_status')
+  switch (daemon64_status.innerHTML.replace(/(\r\n|\n|\r)/gm, '').trim()) {
+    case old_translations.page.action.status.unknown: {
+      daemon64_status.innerHTML = new_translations.page.action.status.unknown
+
+      break
+    }
+    case old_translations.page.action.status.notWorking: {
+      daemon64_status.innerHTML = new_translations.page.action.status.notWorking
+
+      break
+    }
+    case old_translations.page.action.status.ok: {
+      daemon64_status.innerHTML = new_translations.page.action.status.ok
+
+      break
+    }
+  }
 }
--- a/webroot/lang/en_US.json
+++ b/webroot/lang/en_US.json
@@ -41,6 +41,11 @@
        "start": "Start",
        "stop": "Stop",
        "exit": "Exit"
+      },
+      "status": {
+        "unknown": "Unknown",
+        "notWorking": "Not Working",
+        "ok": "Working"
      }
    },
    "settings": {
--- a/webroot/lang/ja_JP.json
+++ b/webroot/lang/ja_JP.json
@@ -41,6 +41,11 @@
        "start": "スタート",
        "stop": "ストップ",
        "exit": "終了"
+      },
+      "status": {
+        "unknown": "Unknown",
+        "notWorking": "Not Working",
+        "ok": "Working"
      }
    },
    "settings": {
--- a/webroot/lang/pt_BR.json
+++ b/webroot/lang/pt_BR.json
@@ -41,6 +41,11 @@
        "start": "Iniciar",
        "stop": "Parar",
        "exit": "Sair"
+      },
+      "status": {
+        "unknown": "Desconhecido",
+        "notWorking": "Não funcionando",
+        "ok": "Funcionando"
      }
    },
    "settings": {
--- a/webroot/lang/ro_RO.json
+++ b/webroot/lang/ro_RO.json
@@ -41,6 +41,11 @@
        "start": "Start",
        "stop": "Stop",
        "exit": "Ieșire"
+      },
+      "status": {
+        "unknown": "Unknown",
+        "notWorking": "Not Working",
+        "ok": "Working"
      }
    },
    "settings": {
--- a/webroot/lang/ru_RU.json
+++ b/webroot/lang/ru_RU.json
@@ -41,6 +41,11 @@
        "start": "Старт",
        "stop": "Пауза",
        "exit": "Стоп"
+      },
+      "status": {
+        "unknown": "Unknown",
+        "notWorking": "Not Working",
+        "ok": "Working"
      }
    },
    "settings": {
--- a/webroot/lang/vi_VN.json
+++ b/webroot/lang/vi_VN.json
@@ -41,6 +41,11 @@
        "start": "Chạy",
        "stop": "Dừng",
        "exit": "Thoát"
+      },
+      "status": {
+        "unknown": "Không xác định",
+        "notWorking": "Không hoạt động",
+        "ok": "Đang hoạt động"
      }
    },
    "settings": {
--- a/webroot/lang/zh_CN.json
+++ b/webroot/lang/zh_CN.json
@@ -41,6 +41,11 @@
        "start": "启动",
        "stop": "停止",
        "exit": "退出"
+      },
+      "status": {
+        "unknown": "Unknown",
+        "notWorking": "Not Working",
+        "ok": "Working"
      }
    },
    "settings": {
--- a/webroot/lang/zh_TW.json
+++ b/webroot/lang/zh_TW.json
@@ -41,6 +41,11 @@
        "start": "啟動",
        "stop": "停止",
        "exit": "退出"
+      },
+      "status": {
+        "unknown": "Unknown",
+        "notWorking": "Not Working",
+        "ok": "Working"
      }
    },
    "settings": {