添加注册对话框

This commit is contained in:
fangxiang 2022-03-09 15:42:05 +08:00
parent d14e94e820
commit d4e87d6764
7 changed files with 332 additions and 6 deletions

View File

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

View File

@ -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) { public async setSubtitle(subtitle: SubtitleEntity) {
try { try {
return await this.doRpc<Protocol.SetSubtitleResponseEntity>( return await this.doRpc<Protocol.SetSubtitleResponseEntity>(

View File

@ -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>

View File

@ -228,6 +228,12 @@ export namespace Protocol {
public static get kRpcGetSubtitle() { public static get kRpcGetSubtitle() {
return Commands.PROTOCOL_PREFIX + "RpcGetSubtitle"; 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() { public static get kRpcSetSubtitle() {
return Commands.PROTOCOL_PREFIX + "RpcSetSubtitle"; return Commands.PROTOCOL_PREFIX + "RpcSetSubtitle";
@ -383,6 +389,8 @@ export namespace Protocol {
Commands.kRpcDeletePolling, Commands.kRpcDeletePolling,
Commands.kSetApplicationConfig, Commands.kSetApplicationConfig,
Commands.kRpcGetSubtitle, Commands.kRpcGetSubtitle,
Commands.kRpcGetRegisterInfo,
Commands.kRpcRegisterDevice,
Commands.kRpcSetSubtitle, Commands.kRpcSetSubtitle,
Commands.kRpcGetScreenSize, Commands.kRpcGetScreenSize,
Commands.kScreenSizeChanged, 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 { export class SetSubtitleRequestEntity extends Protocol.PacketEntity {
subtitle: SubtitleEntity = new SubtitleEntity(); subtitle: SubtitleEntity = new SubtitleEntity();
constructor(rcp_id?: number, subtitle?: SubtitleEntity) { constructor(rcp_id?: number, subtitle?: SubtitleEntity) {

View File

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

View File

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

View File

@ -6497,6 +6497,11 @@ pupa@^2.1.1:
dependencies: dependencies:
escape-goat "^2.0.0" 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: qs@6.7.0:
version "6.7.0" version "6.7.0"
resolved "https://registry.npmmirror.com/qs/download/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc" resolved "https://registry.npmmirror.com/qs/download/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"