隐藏菜单添加语言设置

2022-06-15 11:15:32 +08:00 · 2022-06-15 11:15:32 +08:00 · 3d3dfd505f
parent 081c1a27ee
commit 3d3dfd505f
7 changed files with 171 additions and 94 deletions
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "media_player_client",
-  "version": "1.4.13",
+  "version": "1.4.14",
  "description": "A Quasar Framework app",
  "productName": "MediaPlayerClient",
  "author": "fangxiang <fangxiang@cloudview.work>",
--- a/src/App.vue
+++ b/src/App.vue
@ -42,6 +42,16 @@ export default defineComponent({
      console.log(e);
    }

+    {
+      const user_search = (<any>window).user_search || {};
+      if (typeof user_search == "object") {
+        $store.commit(
+          "setAvancedDebug",
+          typeof user_search["debug"] != "undefined"
+        );
+      }
+    }
+
    window.onresize = (evt: any) =>
      EventBus.getInstance().emit(EventNamesDefine.WindowResize, evt);

--- a/src/components/AdvancedDebugDialog.vue
+++ b/src/components/AdvancedDebugDialog.vue
@ -39,7 +39,7 @@
        <q-card-section style="max-height: 50vh; width: 35vw" class="scroll">
          <q-list>
            <q-item>
-              <q-item-section avatar>{{ $t("function") }}:</q-item-section>
+              <q-item-section avatar>{{ $t("function") }}</q-item-section>
              <q-item-section>
                <q-checkbox
                  v-model="function_output_board"
@ -68,7 +68,7 @@
                  :disable="loading"
                />
              </q-item-section>
-              <q-item-section>
+              <q-item-section avatar>
                <q-btn
                  @click="setDeviceAttribute"
                  :label="$t('commit')"
@ -77,8 +77,51 @@
                />
              </q-item-section>
            </q-item>
+            <q-item>
+              <q-item-section avatar>
+                {{ $t("language") }}
+              </q-item-section>
+              <q-item-section>
+                <div class="row q-gutter-sm">
+                  <q-radio
+                    color="cyan"
+                    :loading="loading"
+                    :disable="loading"
+                    class="offset-md-1 col"
+                    v-model="target_language"
+                    val="zh-CN"
+                    :label="$t('chinese')"
+                  />
+                  <q-radio
+                    color="cyan"
+                    :loading="loading"
+                    :disable="loading"
+                    class="offset-md-1 col"
+                    v-model="target_language"
+                    val="en-US"
+                    :label="$t('english')"
+                  />
+                </div>
+              </q-item-section>
+              <q-item-section avatar>
+                <q-btn
+                  @click="setSystemLanguage"
+                  :label="$t('commit')"
+                  outline
+                  color="primary"
+                />
+              </q-item-section>
+            </q-item>
+
            <q-separator class="q-mt-md" />
+
            <q-item class="q-mt-md">
+              <q-item-section>
+                <q-btn @click="showDeviceInfo"> {{ $t("device info") }} </q-btn>
+              </q-item-section>
+            </q-item>
+
+            <q-item class="q-mt-xs">
              <q-item-section>
                <q-btn @click="restartDevice"> {{ $t("restart") }} </q-btn>
              </q-item-section>
@ -107,7 +150,7 @@
 <script lang="ts">
 import { defineComponent, ref, watch, computed, nextTick } from "vue";
 import { useStore } from "src/store";
-import { useQuasar } from "quasar";
+import { useQuasar, date as $date } from "quasar";
 import { useI18n } from "vue-i18n";
 import GlobalData from "src/common/GlobalData";
 import { Protocol } from "src/entities/WSProtocol";
@ -126,6 +169,7 @@ export default defineComponent({
    const function_center_control = ref(false);
    const function_output_board = ref(false);
    const function_mirroring_output = ref(false);
+    const target_language = ref("zh-CN");

    return {
      show_dialog,
@ -133,6 +177,7 @@ export default defineComponent({
      function_center_control,
      function_output_board,
      function_mirroring_output,
+      target_language,

      showDialog() {
        show_dialog.value = true;
@ -171,6 +216,78 @@ export default defineComponent({
      restartDevice() {
        GlobalData.getInstance().getCurrentClient()?.restartDevice();
      },
+      async showDeviceInfo() {
+        const get_time_text = (s: number, show_ss: boolean = true) => {
+          console.log(s);
+          var time = "";
+          var second = s % 60;
+          var minute = parseInt((parseInt(s.toString()) / 60).toString()) % 60;
+          if (show_ss) {
+            time = second + $t.t("SS");
+          }
+          if (minute >= 1) {
+            time = minute + $t.t("MM") + time;
+          }
+          var hour =
+            parseInt((parseInt((s / 60).toString()) / 60).toString()) % 24;
+          if (hour >= 1) {
+            time = hour + $t.t("HH") + time;
+          }
+          var day = parseInt(
+            (
+              parseInt((parseInt((s / 60).toString()) / 60).toString()) / 24
+            ).toString()
+          );
+          if (day >= 1) {
+            time = day + $t.t("DD") + time;
+          }
+          return time;
+        };
+
+        let system_run_time = 0;
+        let system_idle_time = 0;
+        let current_system_time = 0;
+        let server_run_time = 0;
+        let server_all_run_time = 0;
+
+        try {
+          const response = await GlobalData.getInstance()
+            .getCurrentClient()
+            ?.getSystemTimes();
+          if (response) {
+            system_run_time = response.system_run_time;
+            system_idle_time = response.system_idle_time;
+            current_system_time = response.current_system_time;
+            server_run_time = response.server_run_time;
+            server_all_run_time = response.server_all_run_time;
+          }
+        } catch (e) {
+          console.log(e);
+        }
+        $q.dialog({
+          html: true,
+          title: "<div class='text-h4'>" + $t.t("device info") + "</div>",
+          message: `<div class="text-h6">
+          ${$t.t("device resolution")} : ${$store.state.device_screen_width}X${
+            $store.state.device_screen_height
+          }@${$store.state.device_screen_refresh_rate}<br />
+          ${$t.t("system run time")} :  ${get_time_text(system_run_time)} <br />
+          ${$t.t("system idle rate")} :  ${(
+            (system_idle_time / (system_run_time * 4)) *
+            100
+          ).toFixed(0)} % <br />
+          ${$t.t("server run time")} :  ${get_time_text(server_run_time)} <br />
+          ${$t.t("server all run time")} :  ${get_time_text(
+            server_all_run_time,
+            false
+          )} <br />
+          ${$t.t("current server system time")} : ${$date.formatDate(
+            new Date(current_system_time),
+            "YYYY-MM-DD HH:mm:ss"
+          )}<br />
+          </div>`,
+        });
+      },
      setDeviceAttribute() {
        let attribute = Protocol.EDeviceAttribute.None;
        if (function_center_control.value) {
@ -194,6 +311,18 @@ export default defineComponent({
          timeout: 1500,
        });
      },
+      setSystemLanguage() {
+        GlobalData.getInstance()
+          .getCurrentClient()
+          ?.setServerLanguage(target_language.value);
+        $q.notify({
+          color: "positive",
+          icon: "done",
+          message: $t.t("set language") + $t.t("success") + "!",
+          position: "top",
+          timeout: 1500,
+        });
+      },
    };
  },
 });
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@ -3,8 +3,8 @@

 export default {
  title: "MediaPlayerWebAPP",
-  failed: "Action failed",
-  success: "Action was successful",
+  failed: " failed",
+  success: " successful",
  CN_BERWEEN_SUFFIX: "",
  "clean screen": "Clear",
  "full screen window": "Maximize",
--- a/src/index.template.html
+++ b/src/index.template.html
@ -53,6 +53,24 @@
    <link rel="icon" type="image/ico" href="favicon.ico" />
  </head>
  <script src="./media_control_client_language.js"></script>
+  <script type="text/javascript">
+    window.user_search = {};
+    var search = window.location.search;
+    if (search.indexOf("?") != -1) {
+      search = search.substr(1);
+      var temp = search.split("&");
+      for (var i = 0; i < temp.length; i++) {
+        var info = temp[i].split("=");
+        if (info) {
+          if (info.length >= 2) {
+            window.user_search[info[0]] = decodeURI(info[1]);
+          } else if (info.length >= 1) {
+            window.user_search[info[0]] = null;
+          }
+        }
+      }
+    }
+  </script>

  <body>
    <!-- DO NOT touch the following DIV -->
--- a/src/pages/TopToolBar.vue
+++ b/src/pages/TopToolBar.vue
@ -292,15 +292,6 @@
              {{ $t("CN/EN switch") }}
            </q-item-section>
          </q-item>
-          <q-item clickable v-close-popup @click="showDeviceInfo">
-            <q-item-section avatar>
-              <!-- <q-icon name="devices" /> -->
-              <q-icon name="img:new_icon/device_info.png" />
-            </q-item-section>
-            <q-item-section>
-              {{ $t("device info") }}
-            </q-item-section>
-          </q-item>
          <q-item
            clickable
            v-close-popup
@ -408,13 +399,7 @@ import { Protocol } from "src/entities/WSProtocol";
 import GlobalData from "src/common/GlobalData";
 import { api } from "boot/axios";
 import { HttpProtocol } from "src/entities/HttpProtocol";
-import {
-  SessionStorage,
-  Cookies,
-  openURL,
-  useQuasar,
-  date as $date,
-} from "quasar";
+import { SessionStorage, Cookies, openURL, useQuasar } from "quasar";
 import { useI18n } from "vue-i18n";
 import { ConnectTableEntity } from "src/entities/ConnectTableEntity";
 import ClientConnection from "src/common/ClientConnection";
@ -453,44 +438,12 @@ export default defineComponent({
        0
    );

-    let system_run_time = 0;
-    let system_idle_time = 0;
-    let current_system_time = 0;
-    let server_run_time = 0;
-    let server_all_run_time = 0;
-
    const window_rect_edit_dialog: Ref<any> = ref(null);

    const plan_running = computed(
      () => $store.state.current_running_plan.trim() != ""
    );

-    const get_time_text = (s: number, show_ss: boolean = true) => {
-      console.log(s);
-      var time = "";
-      var second = s % 60;
-      var minute = parseInt((parseInt(s.toString()) / 60).toString()) % 60;
-      if (show_ss) {
-        time = second + $t.t("SS");
-      }
-      if (minute >= 1) {
-        time = minute + $t.t("MM") + time;
-      }
-      var hour = parseInt((parseInt((s / 60).toString()) / 60).toString()) % 24;
-      if (hour >= 1) {
-        time = hour + $t.t("HH") + time;
-      }
-      var day = parseInt(
-        (
-          parseInt((parseInt((s / 60).toString()) / 60).toString()) / 24
-        ).toString()
-      );
-      if (day >= 1) {
-        time = day + $t.t("DD") + time;
-      }
-      return time;
-    };
-
    const checkRegistered = () => {
      if (
        GlobalData.getInstance().getCurrentClient()?.is_connected &&
@ -666,45 +619,6 @@ export default defineComponent({
          window.location.reload();
        }
      },
-      async showDeviceInfo() {
-        try {
-          const response = await GlobalData.getInstance()
-            .getCurrentClient()
-            ?.getSystemTimes();
-          if (response) {
-            system_run_time = response.system_run_time;
-            system_idle_time = response.system_idle_time;
-            current_system_time = response.current_system_time;
-            server_run_time = response.server_run_time;
-            server_all_run_time = response.server_all_run_time;
-          }
-        } catch (e) {
-          console.log(e);
-        }
-        $q.dialog({
-          html: true,
-          title: "<div class='text-h4'>" + $t.t("device info") + "</div>",
-          message: `<div class="text-h6">
-          ${$t.t("device resolution")} : ${$store.state.device_screen_width}X${
-            $store.state.device_screen_height
-          }@${$store.state.device_screen_refresh_rate}<br />
-          ${$t.t("system run time")} :  ${get_time_text(system_run_time)} <br />
-          ${$t.t("system idle rate")} :  ${(
-            (system_idle_time / (system_run_time * 4)) *
-            100
-          ).toFixed(0)} % <br />
-          ${$t.t("server run time")} :  ${get_time_text(server_run_time)} <br />
-          ${$t.t("server all run time")} :  ${get_time_text(
-            server_all_run_time,
-            false
-          )} <br />
-          ${$t.t("current server system time")} : ${$date.formatDate(
-            new Date(current_system_time),
-            "YYYY-MM-DD HH:mm:ss"
-          )}<br />
-          </div>`,
-        });
-      },
      async powerOff() {
        let success = false;
        try {
--- a/src/store/index.ts
+++ b/src/store/index.ts
@ -284,7 +284,7 @@ export default store(function (/* { ssrContext } */) {
    state: {
      // state
      initialized: false,
-      advanced_debug: window.location.href.indexOf("advanced_debug=1") != -1,
+      advanced_debug: false,
      signal_source_tree: [],
      polling_tree: [],
      mode_tree: [],
@ -332,6 +332,12 @@ export default store(function (/* { ssrContext } */) {
          state.device_attribute = num;
        }
      },
+      setAvancedDebug(state: StateInterface, playload?: any) {
+        if (playload || playload == "true") {
+          console.log("debug", playload);
+        }
+        state.advanced_debug = playload;
+      },
      setArrayValue(state: StateInterface, playload?: any) {
        if (Array.isArray(playload.value)) {
          const arr: Array<any> = (<any>state)[playload.name];