添加注册对话框

package.json

@@ -16,6 +16,7 @@
     "axios": "^0.21.1",
     "core-js": "^3.21.0",
     "element-resize-detector": "^1.2.4",
+    "qrcode.vue": "^3.3.3",
     "quasar": "^2.5.5",
     "reconnecting-websocket": "^4.4.0",
     "v-viewer": "^3.0.9",

src/common/ClientConnection.ts

@@ -648,6 +648,26 @@ export default class ClientConnection {
     }
   }
 
+  public async getRegisterInfo() {
+    try {
+      return await this.doRpc<Protocol.GetRegisterInfoResponseEntity>(
+        new Protocol.GetRegisterInfoRequestEntity(0)
+      );
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  public async registerDevice(register_code: string, active_code: string) {
+    try {
+      return await this.doRpc<Protocol.RegisterDeviceResponseEntity>(
+        new Protocol.RegisterDeviceRequestEntity(register_code, active_code, 0)
+      );
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
   public async setSubtitle(subtitle: SubtitleEntity) {
     try {
       return await this.doRpc<Protocol.SetSubtitleResponseEntity>(

src/components/RegisterDialog.vue

@@ -0,0 +1,236 @@
+<template>
+  <q-dialog
+    persistent
+    v-model="show_dialog"
+    @before-hide="resetData"
+    @keydown="
+      (evt) => {
+        if (evt.keyCode == 27) {
+          show_dialog = false;
+        }
+      }
+    "
+  >
+    <q-card class="overflow-hidden" style="max-width: 70vw">
+      <q-form @submit="onSubmit">
+        <q-card-section class="q-ma-none q-pa-sm">
+          <div class="row">
+            <div class="col-auto text-h6">
+              {{ $t("register dialog") }}
+            </div>
+            <q-space />
+            <div>
+              <q-btn
+                :loading="loading"
+                flat
+                round
+                icon="close"
+                color="red"
+                v-close-popup
+              >
+                <q-tooltip>
+                  {{ $t("close") }}
+                </q-tooltip>
+              </q-btn>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-section class="scroll" style="width: 60vw">
+          <q-list>
+            <q-item>
+              <q-item-section avatar class="header_label">
+                {{ $t("register code") }}
+              </q-item-section>
+              <q-item-section>
+                <div style="word-break: break-all">
+                  {{ register_code }}
+                </div>
+              </q-item-section>
+              <q-item-section avatar>
+                <qrcode-vue :value="register_code" level="H" />
+              </q-item-section>
+              <q-item-section avatar>
+                <q-btn
+                  round
+                  flat
+                  icon="content_copy"
+                  color="green"
+                  @click="
+                    copyToClipboard(register_code).then(() =>
+                      $q.notify({
+                        color: 'positive',
+                        icon: 'done',
+                        message: $t('copy') + $t('success'),
+                        position: 'top',
+                        timeout: 1500,
+                      })
+                    )
+                  "
+                >
+                  <q-tooltip>
+                    {{ $t("copy") }}{{ $t("register code") }}
+                  </q-tooltip>
+                </q-btn>
+              </q-item-section>
+            </q-item>
+            <q-item>
+              <q-item-section avatar class="header_label">
+                {{ $t("active code") }}
+              </q-item-section>
+              <q-item-section>
+                <q-input
+                  type="textarea"
+                  v-model="active_code"
+                  lazy-rules
+                  :rules="[
+                    (val) =>
+                      (val && val.length > 0) || $t('Please type something'),
+                  ]"
+                />
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn
+            :loading="loading"
+            flat
+            :label="$t('Cancel')"
+            color="primary"
+            v-close-popup
+          />
+          <q-btn
+            ref="accept"
+            flat
+            :label="$t('register')"
+            :loading="loading"
+            type="submit"
+            color="primary"
+          />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.header_label {
+  width: 20%;
+}
+</style>
+
+<script lang="ts">
+import {
+  defineComponent,
+  ref,
+  Ref,
+  watch,
+  computed,
+  onMounted,
+  onBeforeUnmount,
+  nextTick,
+} from "vue";
+import { useStore } from "src/store";
+import { useQuasar, copyToClipboard } from "quasar";
+import { useI18n } from "vue-i18n";
+import GlobalData from "src/common/GlobalData";
+import QrcodeVue from "qrcode.vue";
+
+export default defineComponent({
+  name: "ComponentRegisterDialog",
+  components: { QrcodeVue },
+  setup() {
+    let $store = useStore();
+    let $q = useQuasar();
+    let $t = useI18n();
+
+    let show_dialog = ref(false);
+    let loading = ref(false);
+    let register_code: Ref<string> = ref("");
+    let active_code: Ref<string> = ref("");
+
+    return {
+      show_dialog,
+      loading,
+      register_code,
+      active_code,
+      copyToClipboard,
+      isShow() {
+        return show_dialog.value;
+      },
+      async showDialog() {
+        show_dialog.value = true;
+        loading.value = true;
+
+        try {
+          let response = await GlobalData.getInstance()
+            .getCurrentClient()
+            ?.getRegisterInfo();
+          if (response) {
+            if (response.registered) {
+              const app_config = GlobalData.getInstance().applicationConfig;
+              if (app_config) {
+                app_config.registered = true;
+                show_dialog.value = false;
+              }
+            }
+            register_code.value = response.register_code;
+          }
+          loading.value = false;
+        } catch (e) {
+          console.log(e);
+          show_dialog.value = false;
+        }
+      },
+      resetData() {
+        loading.value = false;
+        active_code.value = "";
+        register_code.value = "";
+      },
+
+      async onSubmit() {
+        loading.value = true;
+        try {
+          let success = false;
+          const response = await GlobalData.getInstance()
+            .getCurrentClient()
+            ?.registerDevice(register_code.value, active_code.value);
+          if (response) {
+            success = response.success;
+          }
+
+          $q.notify({
+            color: success ? "positive" : "negative",
+            icon: success ? "done" : "warning",
+            message:
+              $t.t("register device") +
+              (success ? $t.t("success") : $t.t("fail")) +
+              "!",
+            position: "top",
+            timeout: 1500,
+          });
+          show_dialog.value = false;
+        } catch {}
+        loading.value = false;
+      },
+      toggleFullScreen(e: any) {
+        console.log(e);
+        const target = e.target.parentNode.parentNode.parentNode;
+        console.log(target);
+        $q.fullscreen
+          .toggle(target)
+          .then(() => {})
+          .catch((err) => {
+            console.error(err);
+          });
+      },
+    };
+  },
+});
+</script>

src/entities/WSProtocol.ts

@@ -228,6 +228,12 @@ export namespace Protocol {
     public static get kRpcGetSubtitle() {
       return Commands.PROTOCOL_PREFIX + "RpcGetSubtitle";
     }
+    public static get kRpcGetRegisterInfo() {
+      return Commands.PROTOCOL_PREFIX + "RpcGetRegisterInfo";
+    }
+    public static get kRpcRegisterDevice() {
+      return Commands.PROTOCOL_PREFIX + "RpcRegisterDevice";
+    }
 
     public static get kRpcSetSubtitle() {
       return Commands.PROTOCOL_PREFIX + "RpcSetSubtitle";
@@ -383,6 +389,8 @@ export namespace Protocol {
       Commands.kRpcDeletePolling,
       Commands.kSetApplicationConfig,
       Commands.kRpcGetSubtitle,
+      Commands.kRpcGetRegisterInfo,
+      Commands.kRpcRegisterDevice,
       Commands.kRpcSetSubtitle,
       Commands.kRpcGetScreenSize,
       Commands.kScreenSizeChanged,
@@ -1428,6 +1436,47 @@ export namespace Protocol {
     }
   }
 
+  export class GetRegisterInfoRequestEntity extends Protocol.PacketEntity {
+    timestamp: number = new Date().getMilliseconds();
+    constructor(rcp_id?: number) {
+      super();
+      this.rpc_id = rcp_id ?? 0;
+      this.command = Protocol.Commands.kRpcGetRegisterInfo;
+    }
+  }
+
+  export class GetRegisterInfoResponseEntity extends Protocol.PacketEntity {
+    registered: boolean = false;
+    register_code: string = "";
+
+    constructor() {
+      super();
+      this.command = Protocol.Commands.kRpcGetRegisterInfo;
+    }
+  }
+
+  export class RegisterDeviceRequestEntity extends Protocol.PacketEntity {
+    timestamp: number = new Date().getMilliseconds();
+    register_code: string = "";
+    active_code: string = "";
+    constructor(register_code: string, active_code: string, rcp_id?: number) {
+      super();
+      this.rpc_id = rcp_id ?? 0;
+      this.command = Protocol.Commands.kRpcRegisterDevice;
+      this.register_code = register_code;
+      this.active_code = active_code;
+    }
+  }
+
+  export class RegisterDeviceResponseEntity extends Protocol.PacketEntity {
+    success: boolean = false;
+
+    constructor() {
+      super();
+      this.command = Protocol.Commands.kRpcRegisterDevice;
+    }
+  }
+
   export class SetSubtitleRequestEntity extends Protocol.PacketEntity {
     subtitle: SubtitleEntity = new SubtitleEntity();
     constructor(rcp_id?: number, subtitle?: SubtitleEntity) {

src/i18n/zh-CN/index.ts

@@ -372,4 +372,8 @@ export default {
     "强制输出： 强制指定分辨率输出",
   "FOCEOUTPUT(CUSTOM): uses the specified timing output":
     "强制输出(自定义): 使用指定时序强制输出",
+  "register code": "注册码",
+  copy: "拷贝",
+  "register dialog": "注册对话框",
+  "active code": "激活码",
 };

src/pages/Index.vue

@@ -3,10 +3,11 @@
     <wall-page />
     <media-control-page />
   </q-page>
+  <register-dialog ref="register_dialog" />
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, Ref, ref } from "vue";
 import WallPage from "src/pages/WallPage.vue";
 import MediaControlPage from "src/pages/MediaControlPage.vue";
 import EventBus, { EventNamesDefine } from "src/common/EventBus";
@@ -17,9 +18,11 @@ import Initializer from "src/common/Initializer";
 import GlobalData from "src/common/GlobalData";
 import RemoteDataExangeProcesser from "src/common/RemoteDataExangeProcesser";
 
+import RegisterDialog from "src/components/RegisterDialog.vue";
+
 export default defineComponent({
   name: "PageIndex",
-  components: { WallPage, MediaControlPage },
+  components: { WallPage, MediaControlPage, RegisterDialog },
   setup() {
     const $store = useStore();
     const $q = useQuasar();
@@ -31,6 +34,8 @@ export default defineComponent({
       $q,
     };
 
+    const register_dialog: Ref<any> = ref(null);
+
     new Initializer(options).initialize().then(() => {
       $store.commit("setInitialized");
     });
@@ -67,7 +72,10 @@ export default defineComponent({
       } catch {
         register = false;
       }
-      if (!register) {
+      if (
+        !register &&
+        (!register_dialog.value || !register_dialog.value.isShow())
+      ) {
         $q.notify({
           color: "negative",
           icon: "report_problem",
@@ -82,8 +90,9 @@ export default defineComponent({
               label: $t.t("register"),
               color: "blue",
               handler: () => {
-                // TODO show register dialog
+                if (register_dialog.value) {
-                console.log("show register dialog");
+                  register_dialog.value.showDialog();
+                }
               },
             },
           ],
@@ -94,7 +103,9 @@ export default defineComponent({
     };
     setInterval(checkRegistered, 5000);
 
-    return {};
+    return {
+      register_dialog,
+    };
   },
 });
 </script>

yarn.lock

@@ -6497,6 +6497,11 @@ pupa@^2.1.1:
   dependencies:
     escape-goat "^2.0.0"
 
+qrcode.vue@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.npmmirror.com/qrcode.vue/-/qrcode.vue-3.3.3.tgz#00262244311a0ee1956fb7a0e238197ff7e14cfa"
+  integrity sha512-OsD4tQjIbxg/K6D5ZkWjBdYI9eg9K2i8qeYILdEAX5mdAydSAxV7xKmmZSP/hA12olLqEMZ9ryqDQrwa9jEMgw==
+
 qs@6.7.0:
   version "6.7.0"
   resolved "https://registry.npmmirror.com/qs/download/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"