lingling
/
media_player_client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成模式功能

This commit is contained in:
fangxiang 2021-08-24 15:20:01 +08:00
parent 470724fb57
commit 3c028a87b9
17 changed files with 1870 additions and 331 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
src/common/ClientConnection.ts
View File

@ -1,3 +1,4 @@
import { ModeEntity } from "src/entities/ModeEntity";
import NormalWindowRequestEntity from "src/entities/NormalWindowRequestEntity";
import { SignalSourceEntity } from "src/entities/SignalSourceEntity";
import { Protocol } from "src/entities/WSProtocol";
@ -251,6 +252,80 @@ export default class ClientConnection {
}
}
public async getModes() {
try {
return await this.doRpc<Protocol.GetModesResponseEntity>(
new Protocol.GetModesRequestEntity()
);
} catch (e) {
console.error(e);
}
}
public async addModeGroup(group_uuid: string, name: string) {
try {
return await this.doRpc<Protocol.AddModeGroupResponseEntity>(
new Protocol.AddModeGroupRequestEntity(0, group_uuid, name)
);
} catch (e) {
console.error(e);
}
}
public async editModeGroup(uuid: string, name: string) {
try {
return await this.doRpc<Protocol.EditModeGroupResponseEntity>(
new Protocol.EditModeGroupRequestEntity(0, uuid, name)
);
} catch (e) {
console.error(e);
}
}
public async deleteModeGroup(uuid: string) {
try {
return await this.doRpc<Protocol.DeleteModeGroupResponseEntity>(
new Protocol.DeleteModeGroupRequestEntity(0, uuid)
);
} catch (e) {
console.error(e);
}
}
public async addMode(group_uuid?: string, name?: string) {
try {
return await this.doRpc<Protocol.AddModeResponseEntity>(
new Protocol.AddModeRequestEntity(0, name, group_uuid)
);
} catch (e) {
console.error(e);
}
}
public async editMode(uuid?: string, name?: string) {
try {
return await this.doRpc<Protocol.EditModeResponseEntity>(
new Protocol.EditModeRequestEntity(0, name, uuid)
);
} catch (e) {
console.error(e);
}
}
public async deleteMode(uuid: string) {
try {
return await this.doRpc<Protocol.DeleteModeResponseEntity>(
new Protocol.DeleteModeRequestEntity(0, uuid)
);
} catch (e) {
console.error(e);
}
}
public callMode(uuid: string) {
this.ws?.send(JSON.stringify(new Protocol.CallModeRequestEntity(uuid)));
}
public async getApplicationSettins() {
try {
return await this.doRpc<Protocol.GetApplicationConfigResponseEntity>(
@ -308,8 +383,8 @@ export default class ClientConnection {
public async addSignalSourceGroup(parent_uuid: string, name: string) {
try {
return await this.doRpc<Protocol.AddSignalSourcesGroupResponseEntity>(
new Protocol.AddSignalSourcesGroupRequestEntity(0, parent_uuid, name)
return await this.doRpc<Protocol.AddSignalSourceGroupResponseEntity>(
new Protocol.AddSignalSourceGroupRequestEntity(0, parent_uuid, name)
);
} catch (e) {
console.error(e);
@ -318,8 +393,8 @@ export default class ClientConnection {
public async editSignalSourceGroup(uuid: string, name: string) {
try {
return await this.doRpc<Protocol.EditSignalSourcesGroupResponseEntity>(
new Protocol.EditSignalSourcesGroupRequestEntity(0, uuid, name)
return await this.doRpc<Protocol.EditSignalSourceGroupResponseEntity>(
new Protocol.EditSignalSourceGroupRequestEntity(0, uuid, name)
);
} catch (e) {
console.error(e);
@ -328,8 +403,8 @@ export default class ClientConnection {
public async deleteSignalSourceGroup(uuid: string) {
try {
return await this.doRpc<Protocol.DeleteSignalSourcesGroupResponseEntity>(
new Protocol.DeleteSignalSourcesGroupRequestEntity(0, uuid)
return await this.doRpc<Protocol.DeleteSignalSourceGroupResponseEntity>(
new Protocol.DeleteSignalSourceGroupRequestEntity(0, uuid)
);
} catch (e) {
console.error(e);
@ -338,8 +413,8 @@ export default class ClientConnection {
public async addSignalSource(item: SignalSourceEntity) {
try {
return await this.doRpc<Protocol.AddSignalSourcesResponseEntity>(
new Protocol.AddSignalSourcesRequestEntity(0, item)
return await this.doRpc<Protocol.AddSignalSourceResponseEntity>(
new Protocol.AddSignalSourceRequestEntity(0, item)
);
} catch (e) {
console.error(e);
@ -348,8 +423,8 @@ export default class ClientConnection {
public async editSignalSource(item: SignalSourceEntity) {
try {
return await this.doRpc<Protocol.EditSignalSourcesResponseEntity>(
new Protocol.EditSignalSourcesRequestEntity(0, item)
return await this.doRpc<Protocol.EditSignalSourceResponseEntity>(
new Protocol.EditSignalSourceRequestEntity(0, item)
);
} catch (e) {
console.error(e);
@ -358,8 +433,8 @@ export default class ClientConnection {
public async deleteSignalSource(uuid: string) {
try {
return await this.doRpc<Protocol.DeleteSignalSourcesResponseEntity>(
new Protocol.DeleteSignalSourcesRequestEntity(0, uuid)
return await this.doRpc<Protocol.DeleteSignalSourceResponseEntity>(
new Protocol.DeleteSignalSourceRequestEntity(0, uuid)
);
} catch (e) {
console.error(e);

11
src/common/GlobalData.ts
View File

@ -1,6 +1,7 @@
import { SessionStorage } from "quasar";
import ApplicationConfigEntity from "src/entities/ApplicationConfigEntity";
import { HttpProtocol } from "src/entities/HttpProtocol";
import { ModeEntity } from "src/entities/ModeEntity";
import { SignalSourceEntity } from "src/entities/SignalSourceEntity";
import ClientConnection from "./ClientConnection";
import EventBus, { EventNamesDefine } from "./EventBus";
@ -54,6 +55,16 @@ export default class GlobalData {
this._signal_sources = sources;
}
_modes: ModeEntity[] = [];
public get modes() {
return this._modes;
}
public set modes(modes: ModeEntity[]) {
this._modes = modes;
}
constructor() {
const url: string | null = SessionStorage.getItem("url");
let name: string | null = SessionStorage.getItem("name");

2
src/components/FileManageDialog.vue
View File

@ -595,7 +595,7 @@ export default defineComponent({
resetData() {
loading.value = false;
files.value = [];
path.value = "";
path.value = default_path.value;
status.value = "normal";
upload_url.value = "";
if (resolve) {

265
src/components/ModeDialog.vue Normal file
View File

@ -0,0 +1,265 @@
<template>
<q-dialog persistent v-model="show_dialog" @before-hide="resetData">
<q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 45vw">
<q-form @submit="onSubmit">
<q-card-section class="q-ma-none q-pa-sm">
<div class="row">
<div class="col-auto text-h6">
{{
type == 1
? $t("add mode")
: type == 2
? $t("edit mode")
: type == 3
? $t("delete mode")
: "add"
}}
</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 style="max-height: 50vh; width: 45vw" class="scroll">
<q-list>
<q-item>
<q-item-label>{{ $t("parent group") }}:</q-item-label>
</q-item>
<q-item class="q-pa-none q-ma-none">
<q-item-section style="padding-right: 10px">
<q-tree
ref="tree"
class="scroll"
:class="loading ? 'disable_tree' : ''"
v-model:selected="selected"
:nodes="tree_nodes"
default-expand-all
node-key="uuid"
labelKey="name"
filter="group filter"
:filter-method="treeNodesFilter"
>
<template v-slot:default-header="prop">
<q-item
class="full-width"
:class="
prop.tree.selected == prop.key ? 'item-selected-bg' : ''
"
>
<q-item-section avatar>
<q-icon
:name="'img:source_icon/group.png'"
color="orange"
size="28px"
class="q-mr-sm"
/>
</q-item-section>
<q-item-section>
<div class="text-weight-bold text-primary">
{{ prop.node.name }}
</div>
</q-item-section>
</q-item>
</template>
</q-tree>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-input
autofocus
:loading="loading"
:disable="loading"
filled
v-model="name"
:label="$t('mode name')"
:hint="$t('please input mode name')"
lazy-rules
:rules="[
(val) =>
(val && val.length > 0) || $t('Please type something'),
]"
@keydown="
(evt) => {
if (evt.keyCode == 13) {
$refs?.accept?.click();
}
}
"
>
<template v-if="name" v-slot:append>
<q-icon
name="cancel"
@click.stop="name = null"
class="cursor-pointer"
/>
</template>
</q-input>
</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('Accept')"
:loading="loading"
type="submit"
color="primary"
/>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
<style scoped>
.disable_tree {
background: #9e9e9e;
cursor: wait;
pointer-events: none;
}
</style>
<script lang="ts">
import { defineComponent, ref, watch, computed } from "vue";
import { useStore } from "src/store";
import GlobalData from "src/common/GlobalData";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
export default defineComponent({
name: "ComponentModeDialog",
setup() {
let $store = useStore();
let $q = useQuasar();
let $t = useI18n();
let show_dialog = ref(false);
let type = ref(1);
let name = ref(null);
let uuid = ref("");
const selected: any = ref(null);
let loading = ref(false);
const tree_nodes = computed({
get: () => $store.state.mode_tree,
set: (val) => {},
});
watch(
() => selected.value,
(newValue, oldValue) => {
if (newValue == null) {
selected.value = "";
}
}
);
const requestAddMode = async () => {
let response = await GlobalData.getInstance()
.getCurrentClient()
?.addMode(selected.value, name.value ?? "");
if (response) {
$q.notify({
color: response.success ? "positive" : "negative",
icon: response.success ? "done" : "warning",
message:
$t.t("add mode") +
(response.success ? $t.t("success") : $t.t("fail")) +
"!",
position: "top",
timeout: 1000,
});
}
};
const requestEditMode = async () => {
let response = await GlobalData.getInstance()
.getCurrentClient()
?.editMode(uuid.value, name.value ?? "");
if (response) {
$q.notify({
color: response.success ? "positive" : "negative",
icon: response.success ? "done" : "warning",
message:
$t.t("edit mode") +
(response.success ? $t.t("success") : $t.t("fail")) +
"!",
position: "top",
timeout: 1000,
});
}
};
return {
show_dialog,
type,
name,
uuid,
selected,
loading,
tree_nodes,
showDialog(options: any) {
if (options) {
console.log(options);
type.value = options.type ?? 1;
if (type.value == 2) {
name.value = options.data?.name ?? null;
selected.value = options.data?.item_data?.group_uuid ?? null;
uuid.value = options.data?.item_data?.uuid ?? null;
} else {
selected.value = options.data?.uuid ?? null;
uuid.value = options.data?.uuid ?? null;
}
}
show_dialog.value = true;
},
resetData() {
loading.value = false;
(selected.value = null), (name.value = null);
type.value = 1;
},
treeNodesFilter(node: any, filter: any) {
return node.is_group;
},
async onSubmit() {
loading.value = true;
try {
await (type.value == 2 ? requestEditMode() : requestAddMode());
show_dialog.value = false;
} catch {}
loading.value = false;
},
};
},
});
</script>

263
src/components/ModeGroupDialog.vue Normal file
View File

@ -0,0 +1,263 @@
<template>
<q-dialog persistent v-model="show_dialog" @before-hide="resetData">
<q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 45vw">
<q-form @submit="onSubmit">
<q-card-section class="q-ma-none q-pa-sm">
<div class="row">
<div class="col-auto text-h6">
{{
type == 1
? $t("add group")
: type == 2
? $t("edit group")
: type == 3
? $t("delete group")
: "add"
}}
</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 style="max-height: 50vh; width: 45vw" class="scroll">
<q-list>
<q-item v-if="type != 2">
<q-item-label>{{ $t("parent group") }}:</q-item-label>
</q-item>
<q-item v-if="type != 2" class="q-pa-none q-ma-none">
<q-item-section style="padding-right: 10px">
<q-tree
ref="tree"
class="scroll"
:class="loading ? 'disable_tree' : ''"
v-model:selected="selected"
:nodes="tree_nodes"
default-expand-all
node-key="uuid"
labelKey="name"
filter="group filter"
:filter-method="treeNodesFilter"
>
<template v-slot:default-header="prop">
<q-item
class="full-width"
:class="
prop.tree.selected == prop.key ? 'item-selected-bg' : ''
"
>
<q-item-section avatar>
<q-icon
:name="'img:source_icon/group.png'"
color="orange"
size="28px"
class="q-mr-sm"
/>
</q-item-section>
<q-item-section>
<div class="text-weight-bold text-primary">
{{ prop.node.name }}
</div>
</q-item-section>
</q-item>
</template>
</q-tree>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-input
autofocus
:loading="loading"
:disable="loading"
filled
v-model="name"
:label="$t('group name')"
:hint="$t('please input group name')"
lazy-rules
:rules="[
(val) =>
(val && val.length > 0) || $t('Please type something'),
]"
@keydown="
(evt) => {
if (evt.keyCode == 13) {
$refs?.accept?.click();
}
}
"
>
<template v-if="name" v-slot:append>
<q-icon
name="cancel"
@click.stop="name = null"
class="cursor-pointer"
/>
</template>
</q-input>
</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('Accept')"
:loading="loading"
type="submit"
color="primary"
/>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
<style scoped>
.disable_tree {
background: #9e9e9e;
cursor: wait;
pointer-events: none;
}
</style>
<script lang="ts">
import { defineComponent, ref, watch, computed } from "vue";
import { useStore } from "src/store";
import GlobalData from "src/common/GlobalData";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
export default defineComponent({
name: "ComponentModeGroupDialog",
setup() {
let $store = useStore();
let $q = useQuasar();
let $t = useI18n();
let show_dialog = ref(false);
let type = ref(1);
let name = ref(null);
let uuid = ref("");
const selected: any = ref(null);
let loading = ref(false);
const tree_nodes = computed({
get: () => $store.state.mode_tree,
set: (val) => {},
});
watch(
() => selected.value,
(newValue, oldValue) => {
if (newValue == null) {
selected.value = "";
}
}
);
const requestAddModeGroup = async () => {
let response = await GlobalData.getInstance()
.getCurrentClient()
?.addModeGroup(selected.value, name.value ?? "");
if (response) {
$q.notify({
color: response.success ? "positive" : "negative",
icon: response.success ? "done" : "warning",
message:
$t.t("add group") +
(response.success ? $t.t("success") : $t.t("fail")) +
"!",
position: "top",
timeout: 1000,
});
}
};
const requestEditModeGroup = async () => {
let response = await GlobalData.getInstance()
.getCurrentClient()
?.editModeGroup(uuid.value, name.value ?? "");
if (response) {
$q.notify({
color: response.success ? "positive" : "negative",
icon: response.success ? "done" : "warning",
message:
$t.t("edit group") +
(response.success ? $t.t("success") : $t.t("fail")) +
"!",
position: "top",
timeout: 1000,
});
}
};
return {
show_dialog,
type,
name,
uuid,
selected,
loading,
tree_nodes,
showDialog(options: any) {
if (options) {
type.value = options.type ?? 1;
if (type.value == 2) {
name.value = options.data?.name ?? null;
}
selected.value = options.data?.uuid ?? null;
uuid.value = options.data?.uuid ?? null;
}
show_dialog.value = true;
},
resetData() {
loading.value = false;
(selected.value = null), (name.value = null);
type.value = 1;
},
treeNodesFilter(node: any, filter: any) {
return node.is_group;
},
async onSubmit() {
loading.value = true;
try {
await (type.value == 2
? requestEditModeGroup()
: requestAddModeGroup());
show_dialog.value = false;
} catch {}
loading.value = false;
},
};
},
});
</script>

297
src/components/ModeTree.vue Normal file
View File

@ -0,0 +1,297 @@
<template>
<div>
<q-tree ref="tree" :nodes="tree_nodes" node-key="uuid" labelKey="name">
<template v-slot:default-header="prop">
<q-item
class="full-width"
clickable
@dblclick="
(evt) => !prop.node.is_group && callMode(prop.node.item_data)
"
>
<q-item-section avatar>
<q-icon
:name="
prop.node.is_group
? 'img:source_icon/group.png'
: 'img:source_icon/hdmi.png'
"
color="orange"
size="28px"
class="q-mr-sm"
/>
</q-item-section>
<q-item-section>
<div class="text-weight-bold text-primary">
{{ prop.node.name }}
</div>
</q-item-section>
<q-popup-proxy context-menu>
<q-popup-proxy context-menu />
<q-list>
<q-item
v-if="
prop.node.name == $t('root') ||
(prop.node.is_group && prop.node.item_data)
"
clickable
v-close-popup
v-ripple
@click="
$refs.mode_dialog.showDialog({
type: 1,
data: { uuid: prop.node.uuid },
})
"
>
<q-item-section avatar><q-icon name="add" /></q-item-section>
<q-item-section>{{ $t("add mode item") }}</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
v-if="
prop.node.name == $t('root') ||
(prop.node.is_group && prop.node.item_data)
"
v-ripple
@click="
() =>
$refs.group_dialog.showDialog({
type: 1,
data: prop.node,
})
"
>
<q-item-section avatar
><q-icon name="create_new_folder"
/></q-item-section>
<q-item-section>{{ $t("add group") }}</q-item-section>
</q-item>
<q-item
clickable
v-ripple
v-close-popup
v-if="prop.node.item_data"
@click="
() =>
(prop.node.is_group
? $refs.group_dialog
: $refs.mode_dialog
).showDialog({
type: 2,
data: prop.node,
})
"
>
<q-item-section avatar><q-icon name="edit" /></q-item-section>
<q-item-section>{{ $t("edit") }}</q-item-section>
</q-item>
<q-item
clickable
v-ripple
v-close-popup
v-if="prop.node.item_data"
@click="
(evt) => deleteItem(evt, prop.node.is_group, prop.node.uuid)
"
>
<q-item-section avatar
><q-icon color="red" name="delete"
/></q-item-section>
<q-item-section>{{ $t("delete") }} &nbsp;</q-item-section>
</q-item>
</q-list>
</q-popup-proxy>
</q-item>
</template>
</q-tree>
</div>
<mode-group-dialog ref="group_dialog" />
<mode-dialog ref="mode_dialog" />
</template>
<script lang="ts">
import { defineComponent, computed, onMounted, ref, nextTick } from "vue";
import { useStore } from "src/store";
import ModeGroupDialog from "src/components/ModeGroupDialog.vue";
import ModeDialog from "src/components/ModeDialog.vue";
import { Common } from "src/common/Common";
import GlobalData from "src/common/GlobalData";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
import EventBus, { EventNamesDefine } from "src/common/EventBus";
import { Protocol } from "src/entities/WSProtocol";
import { ModeEntity } from "src/entities/ModeEntity";
export default defineComponent({
name: "PageModeTree",
components: { ModeGroupDialog, ModeDialog },
setup() {
const $store = useStore();
const $q = useQuasar();
const $t = useI18n();
const tree_nodes = computed({
get: () => $store.state.mode_tree,
set: (val) => {},
});
const tree: any | null = ref(null);
onMounted(async () => {
while (!tree.value.nodes.length) {
await Common.waitFor(100);
}
tree.value?.setExpanded("", true);
});
interface _ResponseMessage {
packet: Protocol.PacketEntity;
data: string;
}
EventBus.getInstance().on(
EventNamesDefine.NotifyMessage,
(response: _ResponseMessage) => {
if (response) {
switch (response.packet.command) {
case Protocol.Commands.kRpcAddMode:
{
const temp = JSON.parse(
response.data
) as Protocol.ModeAddNotifyEntity;
if (temp) {
GlobalData.getInstance().modes.push(temp.mode);
$store.commit("addModeTreeItem", {
parent: temp.mode.group_uuid,
is_group: false,
item_data: temp.mode,
});
}
}
break;
case Protocol.Commands.kRpcDeleteMode:
{
const temp = JSON.parse(
response.data
) as Protocol.ModeDeleteNotifyEntity;
if (temp) {
$store.commit("deleteModeTreeItem", {
is_group: false,
uuid: temp.uuid,
});
}
}
break;
case Protocol.Commands.kRpcEditMode:
{
const temp = JSON.parse(
response.data
) as Protocol.ModeEditNotifyEntity;
if (temp) {
$store.commit("setModeTreeItem", {
is_group: false,
item_data: temp.mode,
});
}
}
break;
case Protocol.Commands.kRpcAddModeGroup:
{
const temp = JSON.parse(
response.data
) as Protocol.ModeGroupAddNotifyEntity;
if (temp) {
$store.commit("addModeTreeItem", {
parent: temp.mode_group.parent_uuid,
is_group: true,
item_data: temp.mode_group,
});
}
}
break;
case Protocol.Commands.kRpcDeleteModeGroup:
{
const temp = JSON.parse(
response.data
) as Protocol.ModeGroupDeleteNotifyEntity;
if (temp) {
$store.commit("deleteModeTreeItem", {
is_group: true,
uuid: temp.uuid,
});
}
}
break;
case Protocol.Commands.kRpcEditModeGroup:
{
const temp = JSON.parse(
response.data
) as Protocol.ModeGroupEditNotifyEntity;
if (temp) {
$store.commit("setModeTreeItem", {
is_group: true,
item_data: temp.mode_group,
});
}
}
break;
}
}
}
);
return {
tree,
tree_nodes,
loga(a: any) {
console.log(a);
},
async deleteItem(
evt: PointerEvent | null,
is_group: boolean,
uuid: string
) {
let success = false;
if (is_group) {
let response = await GlobalData.getInstance()
.getCurrentClient()
?.deleteModeGroup(uuid);
if (response) {
success = response.success;
}
} else {
let response = await GlobalData.getInstance()
.getCurrentClient()
?.deleteMode(uuid);
if (response) {
success = response.success;
}
}
$q.notify({
color: success ? "positive" : "negative",
icon: success ? "done" : "warning",
message:
$t.t("delete") + (success ? $t.t("success") : $t.t("fail")) + "!",
position: "top",
timeout: 1000,
});
},
callMode(item: ModeEntity) {
GlobalData.getInstance().getCurrentClient()?.callMode(item.uuid);
$q.notify({
color: "positive",
icon: "done",
message: $t.t("call mode directives send") + $t.t("success") + "!",
position: "top",
timeout: 1000,
});
},
};
},
});
</script>

2
src/components/GroupDialog.vue → src/components/SignalSourceGroupDialog.vue
View File

@ -155,7 +155,7 @@ import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
export default defineComponent({
name: "ComponentGroupDialog",
name: "ComponentSignalSourceGroupDialog",
setup() {
let $store = useStore();

308
src/components/SignalSourceTree.vue Normal file
View File

@ -0,0 +1,308 @@
<template>
<div>
<q-tree ref="tree" :nodes="tree_nodes" node-key="uuid" labelKey="name">
<template v-slot:default-header="prop">
<q-item
class="full-width"
clickable
:draggable="!prop.node.is_group"
@dragstart="(evt) => onDragStart(evt, prop.node)"
>
<q-item-section avatar>
<q-icon
:name="
prop.node.is_group
? 'img:source_icon/group.png'
: getItemIcon(prop.node.item_data?.window_type)
"
color="orange"
size="28px"
class="q-mr-sm"
/>
</q-item-section>
<q-item-section>
<div class="text-weight-bold text-primary">
{{ prop.node.name }}
</div>
</q-item-section>
<q-popup-proxy context-menu>
<q-popup-proxy context-menu />
<q-list>
<q-item
v-if="
prop.node.name == $t('root') ||
(prop.node.is_group &&
prop.node.item_data &&
!prop.node.item_data.system_default)
"
clickable
v-close-popup
v-ripple
@click="
$refs.signal_source_dialog.showDialog({
type: 1,
parent_node: prop.node.uuid,
})
"
>
<q-item-section avatar><q-icon name="add" /></q-item-section>
<q-item-section>{{
$t("add signal source item")
}}</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
v-if="
prop.node.name == $t('root') ||
(prop.node.is_group &&
prop.node.item_data &&
!prop.node.item_data.system_default)
"
v-ripple
@click="
() =>
$refs.group_dialog.showDialog({
type: 1,
data: prop.node,
})
"
>
<q-item-section avatar
><q-icon name="create_new_folder"
/></q-item-section>
<q-item-section>{{ $t("add group") }}</q-item-section>
</q-item>
<q-item
clickable
v-ripple
v-close-popup
v-if="
prop.node.item_data && !prop.node.item_data.system_default
"
@click="
() =>
(prop.node.is_group
? $refs.group_dialog
: $refs.signal_source_dialog
).showDialog({
type: 2,
data: prop.node,
})
"
>
<q-item-section avatar><q-icon name="edit" /></q-item-section>
<q-item-section>{{ $t("edit") }}</q-item-section>
</q-item>
<q-item
clickable
v-ripple
v-close-popup
v-if="
prop.node.item_data && !prop.node.item_data.system_default
"
@click="
(evt) => deleteItem(evt, prop.node.is_group, prop.node.uuid)
"
>
<q-item-section avatar
><q-icon color="red" name="delete"
/></q-item-section>
<q-item-section>{{ $t("delete") }} &nbsp;</q-item-section>
</q-item>
</q-list>
</q-popup-proxy>
</q-item>
</template>
</q-tree>
</div>
<signal-source-group-dialog ref="group_dialog" />
<signal-source-dialog ref="signal_source_dialog" />
</template>
<script lang="ts">
import { defineComponent, computed, onMounted, ref, nextTick } from "vue";
import { useStore } from "src/store";
import { SignalSourceTreeItemEntity } from "src/entities/SignalSourceEntity";
import SignalSourceGroupDialog from "src/components/SignalSourceGroupDialog.vue";
import SignalSourceDialog from "src/components/SignalSourceDialog.vue";
import { Common } from "src/common/Common";
import GlobalData from "src/common/GlobalData";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
import EventBus, { EventNamesDefine } from "src/common/EventBus";
import { Protocol } from "src/entities/WSProtocol";
export default defineComponent({
name: "PageSignalSourceTree",
components: { SignalSourceGroupDialog, SignalSourceDialog },
setup() {
const $store = useStore();
const $q = useQuasar();
const $t = useI18n();
const tree_nodes = computed({
get: () => $store.state.signal_source_tree,
set: (val) => $store.commit("setSignalSourceTree", val),
});
const tree: any | null = ref(null);
onMounted(async () => {
while (!tree.value.nodes.length) {
await Common.waitFor(100);
}
tree.value?.setExpanded("", true);
});
interface _ResponseMessage {
packet: Protocol.PacketEntity;
data: string;
}
EventBus.getInstance().on(
EventNamesDefine.NotifyMessage,
(response: _ResponseMessage) => {
if (response) {
switch (response.packet.command) {
case Protocol.Commands.kRpcAddSignalSource:
{
const temp = JSON.parse(
response.data
) as Protocol.SignalSourceAddNotifyEntity;
if (temp) {
GlobalData.getInstance().signal_source.push(
temp.signal_source
);
$store.commit("addSignalSourceTreeItem", {
parent: temp.signal_source.group_uuid,
is_group: false,
item_data: temp.signal_source,
});
}
}
break;
case Protocol.Commands.kRpcDeleteSignalSource:
{
const temp = JSON.parse(
response.data
) as Protocol.SignalSourceDeleteNotifyEntity;
if (temp) {
$store.commit("deleteSignalSourceTreeItem", {
is_group: false,
uuid: temp.uuid,
});
}
}
break;
case Protocol.Commands.kRpcEditSignalSource:
{
const temp = JSON.parse(
response.data
) as Protocol.SignalSourceEditNotifyEntity;
if (temp) {
$store.commit("setSignalSourceTreeItem", {
is_group: false,
item_data: temp.signal_source,
});
}
}
break;
case Protocol.Commands.kRpcAddSignalSourceGroup:
{
const temp = JSON.parse(
response.data
) as Protocol.SignalSourceGroupAddNotifyEntity;
if (temp) {
$store.commit("addSignalSourceTreeItem", {
parent: temp.signal_source_group.parent_uuid,
is_group: true,
item_data: temp.signal_source_group,
});
}
}
break;
case Protocol.Commands.kRpcDeleteSignalSourceGroup:
{
const temp = JSON.parse(
response.data
) as Protocol.SignalSourceGroupDeleteNotifyEntity;
if (temp) {
$store.commit("deleteSignalSourceTreeItem", {
is_group: true,
uuid: temp.uuid,
});
}
}
break;
case Protocol.Commands.kRpcEditSignalSourceGroup:
{
const temp = JSON.parse(
response.data
) as Protocol.SignalSourceGroupEditNotifyEntity;
if (temp) {
$store.commit("setSignalSourceTreeItem", {
is_group: true,
item_data: temp.signal_source_group,
});
}
}
break;
}
}
}
);
return {
tree,
tree_nodes,
loga(a: any) {
console.log(a);
},
onDragStart(e: DragEvent, node: SignalSourceTreeItemEntity) {
e.dataTransfer?.setData("uuid", node.uuid);
e.dataTransfer?.setData("node_object", JSON.stringify(node));
if (e.dataTransfer) {
e.dataTransfer.dropEffect = "move";
}
},
getItemIcon(item_type: string) {
return Common.getSignalSourceIcon(item_type);
},
async deleteItem(
evt: PointerEvent | null,
is_group: boolean,
uuid: string
) {
let success = false;
if (is_group) {
let response = await GlobalData.getInstance()
.getCurrentClient()
?.deleteSignalSourceGroup(uuid);
if (response) {
success = response.success;
}
} else {
let response = await GlobalData.getInstance()
.getCurrentClient()
?.deleteSignalSource(uuid);
if (response) {
success = response.success;
}
}
$q.notify({
color: success ? "positive" : "negative",
icon: success ? "done" : "warning",
message:
$t.t("delete") + (success ? $t.t("success") : $t.t("fail")) + "!",
position: "top",
timeout: 1000,
});
},
};
},
});
</script>

42
src/entities/ModeEntity.ts Normal file
View File

@ -0,0 +1,42 @@
import BaseEntity from "./BaseEntity";
export class ModeEntity extends BaseEntity {
group_uuid: string = "";
name: string = "";
public static copy(dest: ModeEntity, src?: ModeEntity) {
if (!src) {
src = new ModeEntity();
}
dest.uuid = src.uuid;
dest.base_note = src.base_note;
dest.name = src.name;
dest.group_uuid = src.group_uuid;
}
}
export class ModeTreeItemEntity {
uuid = "";
parent = "";
name = "";
is_group = false;
children: ModeTreeItemEntity[] = [];
item_data: ModeEntity | null = null;
constructor(
uuid?: string,
parent?: string,
name?: string,
is_group?: boolean,
item_data?: any,
children?: ModeTreeItemEntity[]
) {
this.uuid = uuid ?? "";
this.parent = parent ?? "";
this.name = name ?? "";
this.is_group = is_group ?? false;
this.children = children ?? (Array.isArray(children) ? children : []);
this.item_data = item_data;
}
}

250
src/entities/WSProtocol.ts
View File

@ -1,6 +1,7 @@
import { SignalSourceEntity } from "./SignalSourceEntity";
import ApplicationConfigEntity from "./ApplicationConfigEntity";
import { WindowOpenNotifyEntity } from "./MultimediaWindowEntity";
import { ModeEntity } from "./ModeEntity";
export namespace Protocol {
export class Commands {
@ -37,6 +38,10 @@ export namespace Protocol {
return Commands.PROTOCOL_PREFIX + "RpcGetSignalSources";
}
public static get kRpcGetModes() {
return Commands.PROTOCOL_PREFIX + "RpcGetModes";
}
public static get kRpcGetApplicationConfig() {
return Commands.PROTOCOL_PREFIX + "RpcGetApplicationConfig";
}
@ -89,6 +94,34 @@ export namespace Protocol {
return Commands.PROTOCOL_PREFIX + "RpcEditSignalSource";
}
public static get kRpcAddModeGroup() {
return Commands.PROTOCOL_PREFIX + "RpcAddModeGroup";
}
public static get kRpcDeleteModeGroup() {
return Commands.PROTOCOL_PREFIX + "RpcDeleteModeGroup";
}
public static get kRpcEditModeGroup() {
return Commands.PROTOCOL_PREFIX + "RpcEditModeGroup";
}
public static get kRpcAddMode() {
return Commands.PROTOCOL_PREFIX + "RpcAddMode";
}
public static get kRpcDeleteMode() {
return Commands.PROTOCOL_PREFIX + "RpcDeleteMode";
}
public static get kCallMode() {
return Commands.PROTOCOL_PREFIX + "CallMode";
}
public static get kRpcEditMode() {
return Commands.PROTOCOL_PREFIX + "RpcEditMode";
}
public static get kSetApplicationConfig() {
return Commands.PROTOCOL_PREFIX + "SetApplicationConfig";
}
@ -107,6 +140,7 @@ export namespace Protocol {
Commands.kLogout,
Commands.kRpcGetWindows,
Commands.kRpcGetSignalSources,
Commands.kRpcGetModes,
Commands.kRpcGetApplicationConfig,
Commands.kMoveWindow,
Commands.kResizeWindow,
@ -119,6 +153,12 @@ export namespace Protocol {
Commands.kRpcAddSignalSource,
Commands.kRpcDeleteSignalSource,
Commands.kRpcEditSignalSource,
Commands.kRpcAddModeGroup,
Commands.kRpcDeleteModeGroup,
Commands.kRpcEditModeGroup,
Commands.kRpcAddMode,
Commands.kRpcDeleteMode,
Commands.kRpcEditMode,
Commands.kSetApplicationConfig,
]);
@ -190,6 +230,26 @@ export namespace Protocol {
}
}
export class GetModesRequestEntity extends PacketEntity {
timestamp = new Date().getMilliseconds();
constructor(rpcid?: number) {
super();
this.rpc_id = rpcid ?? 0;
this.command = Commands.kRpcGetModes;
}
}
export class GetModesResponseEntity extends PacketEntity {
modes: ModeEntity[] = [];
mode_groups: [] = [];
constructor() {
super();
this.command = Commands.kRpcGetModes;
}
}
export class GetApplicationConfigRequestEntity extends PacketEntity {
timestamp: number = new Date().getMilliseconds();
@ -329,7 +389,7 @@ export namespace Protocol {
}
}
export class AddSignalSourcesGroupRequestEntity extends Protocol.PacketEntity {
export class AddSignalSourceGroupRequestEntity extends Protocol.PacketEntity {
parent_uuid = "";
name = "";
@ -342,7 +402,7 @@ export namespace Protocol {
}
}
export class AddSignalSourcesGroupResponseEntity extends Protocol.PacketEntity {
export class AddSignalSourceGroupResponseEntity extends Protocol.PacketEntity {
success = false;
constructor() {
@ -351,7 +411,7 @@ export namespace Protocol {
}
}
export class EditSignalSourcesGroupRequestEntity extends Protocol.PacketEntity {
export class EditSignalSourceGroupRequestEntity extends Protocol.PacketEntity {
uuid = "";
name = "";
@ -364,7 +424,7 @@ export namespace Protocol {
}
}
export class EditSignalSourcesGroupResponseEntity extends Protocol.PacketEntity {
export class EditSignalSourceGroupResponseEntity extends Protocol.PacketEntity {
success = false;
constructor() {
@ -373,7 +433,7 @@ export namespace Protocol {
}
}
export class DeleteSignalSourcesGroupRequestEntity extends Protocol.PacketEntity {
export class DeleteSignalSourceGroupRequestEntity extends Protocol.PacketEntity {
uuid = "";
constructor(rcp_id?: number, uuid?: string) {
@ -384,7 +444,7 @@ export namespace Protocol {
}
}
export class DeleteSignalSourcesGroupResponseEntity extends Protocol.PacketEntity {
export class DeleteSignalSourceGroupResponseEntity extends Protocol.PacketEntity {
success = false;
constructor() {
@ -393,7 +453,7 @@ export namespace Protocol {
}
}
export class AddSignalSourcesRequestEntity extends Protocol.PacketEntity {
export class AddSignalSourceRequestEntity extends Protocol.PacketEntity {
entity: SignalSourceEntity | null = null;
constructor(rcp_id?: number, entity?: SignalSourceEntity) {
super();
@ -403,7 +463,7 @@ export namespace Protocol {
}
}
export class AddSignalSourcesResponseEntity extends Protocol.PacketEntity {
export class AddSignalSourceResponseEntity extends Protocol.PacketEntity {
success = false;
constructor() {
@ -412,7 +472,7 @@ export namespace Protocol {
}
}
export class EditSignalSourcesRequestEntity extends Protocol.PacketEntity {
export class EditSignalSourceRequestEntity extends Protocol.PacketEntity {
entity: SignalSourceEntity | null = null;
parent_uuid: string = "";
constructor(
@ -428,7 +488,7 @@ export namespace Protocol {
}
}
export class EditSignalSourcesResponseEntity extends Protocol.PacketEntity {
export class EditSignalSourceResponseEntity extends Protocol.PacketEntity {
success = false;
constructor() {
@ -437,7 +497,7 @@ export namespace Protocol {
}
}
export class DeleteSignalSourcesRequestEntity extends Protocol.PacketEntity {
export class DeleteSignalSourceRequestEntity extends Protocol.PacketEntity {
uuid: string = "";
constructor(rcp_id?: number, uuid?: string) {
super();
@ -447,7 +507,7 @@ export namespace Protocol {
}
}
export class DeleteSignalSourcesResponseEntity extends Protocol.PacketEntity {
export class DeleteSignalSourceResponseEntity extends Protocol.PacketEntity {
success = false;
constructor() {
@ -455,7 +515,6 @@ export namespace Protocol {
this.command = Protocol.Commands.kRpcDeleteSignalSource;
}
}
export class SignalSourceGroupEntity extends Protocol.PacketEntity {
parent_uuid: string = "";
name: string = "";
@ -488,6 +547,171 @@ export namespace Protocol {
new SignalSourceGroupEntity();
}
export class AddModeGroupRequestEntity extends Protocol.PacketEntity {
parent_uuid = "";
name = "";
constructor(rcp_id?: number, parent_uuid?: string, name?: string) {
super();
this.rpc_id = rcp_id ?? 0;
this.command = Protocol.Commands.kRpcAddModeGroup;
this.parent_uuid = parent_uuid ?? "";
this.name = name ?? "";
}
}
export class AddModeGroupResponseEntity extends Protocol.PacketEntity {
success = false;
constructor() {
super();
this.command = Protocol.Commands.kRpcAddModeGroup;
}
}
export class EditModeGroupRequestEntity extends Protocol.PacketEntity {
uuid = "";
name = "";
constructor(rcp_id?: number, uuid?: string, name?: string) {
super();
this.rpc_id = rcp_id ?? 0;
this.command = Protocol.Commands.kRpcEditModeGroup;
this.uuid = uuid ?? "";
this.name = name ?? "";
}
}
export class EditModeGroupResponseEntity extends Protocol.PacketEntity {
success = false;
constructor() {
super();
this.command = Protocol.Commands.kRpcEditModeGroup;
}
}
export class DeleteModeGroupRequestEntity extends Protocol.PacketEntity {
uuid = "";
constructor(rcp_id?: number, uuid?: string) {
super();
this.rpc_id = rcp_id ?? 0;
this.command = Protocol.Commands.kRpcDeleteModeGroup;
this.uuid = uuid ?? "";
}
}
export class DeleteModeGroupResponseEntity extends Protocol.PacketEntity {
success = false;
constructor() {
super();
this.command = Protocol.Commands.kRpcDeleteMode;
}
}
export class AddModeRequestEntity extends Protocol.PacketEntity {
name: string;
group_uuid: string;
constructor(rcp_id?: number, name?: string, group_uuid?: string) {
super();
this.rpc_id = rcp_id ?? 0;
this.command = Protocol.Commands.kRpcAddMode;
this.name = name ?? "";
this.group_uuid = group_uuid ?? "";
}
}
export class AddModeResponseEntity extends Protocol.PacketEntity {
success = false;
constructor() {
super();
this.command = Protocol.Commands.kRpcAddMode;
}
}
export class EditModeRequestEntity extends Protocol.PacketEntity {
name: string;
uuid: string;
constructor(rcp_id?: number, name?: string, uuid?: string) {
super();
this.rpc_id = rcp_id ?? 0;
this.command = Protocol.Commands.kRpcEditMode;
this.name = name ?? "";
this.uuid = uuid ?? "";
}
}
export class EditModeResponseEntity extends Protocol.PacketEntity {
success = false;
constructor() {
super();
this.command = Protocol.Commands.kRpcEditMode;
}
}
export class DeleteModeRequestEntity extends Protocol.PacketEntity {
uuid: string = "";
constructor(rcp_id?: number, uuid?: string) {
super();
this.rpc_id = rcp_id ?? 0;
this.command = Protocol.Commands.kRpcDeleteMode;
this.uuid = uuid ?? "";
}
}
export class DeleteModeResponseEntity extends Protocol.PacketEntity {
success = false;
constructor() {
super();
this.command = Protocol.Commands.kRpcDeleteMode;
}
}
export class CallModeRequestEntity extends Protocol.PacketEntity {
uuid: string;
constructor(uuid: string) {
super();
this.command = Protocol.Commands.kCallMode;
this.flag = Protocol.PacketEntity.FLAG_REQUEST;
this.uuid = uuid;
}
}
export class ModeGroupEntity extends Protocol.PacketEntity {
parent_uuid: string = "";
name: string = "";
}
export class ModeAddNotifyEntity extends Protocol.PacketEntity {
mode: ModeEntity = new ModeEntity();
}
export class ModeDeleteNotifyEntity extends Protocol.PacketEntity {
uuid: string = "";
}
export class ModeEditNotifyEntity extends Protocol.PacketEntity {
mode: ModeEntity = new ModeEntity();
}
export class ModeGroupAddNotifyEntity extends Protocol.PacketEntity {
mode_group: ModeGroupEntity = new ModeGroupEntity();
}
export class ModeGroupDeleteNotifyEntity extends Protocol.PacketEntity {
uuid: string = "";
}
export class ModeGroupEditNotifyEntity extends Protocol.PacketEntity {
mode_group: ModeGroupEntity = new ModeGroupEntity();
}
export class SetApplicationConfigRequestEntity extends Protocol.PacketEntity {
key: string = "";
value: string = "";

11
src/i18n/zh-CN/index.ts
View File

@ -117,4 +117,15 @@ export default {
"dbclick select file": "双击选择文件",
"local disk": "本地磁盘",
usb: "U盘",
"Please input vaild ip address": "请输入合法的IP地址",
"server ip address": "服务器地址",
"please input server ip address": "请输入服务器地址",
mode: "模式",
plan: "预案",
"add mode item": "添加模式",
"all mode directives send": "模式调用发送",
"please input mode name": "请输入模式名称",
"add mode": "添加模式",
"mode name": "模式名称",
"edit mode": "修改模式",
};

13
src/layouts/MainLayout.vue
View File

@ -23,9 +23,13 @@
<router-view />
</div>
<!-- left -->
<div v-if="landspace" class="col-2" style="border: 1px solid #bdbdbd">
<left-tool-bar />
<!-- right -->
<div
v-if="landspace"
class="col-auto overflow-auto"
style="border: 1px solid #bdbdbd"
>
<right-tool-bar />
</div>
</div>
</q-page-container>
@ -74,6 +78,7 @@
import { defineComponent, reactive } from "vue";
import LeftToolBar from "src/pages/LeftToolBar.vue";
import RightToolBar from "src/pages/RightToolBar.vue";
import TopToolBar from "src/pages/TopToolBar.vue";
import EventBus, { EventNamesDefine } from "src/common/EventBus";
@ -85,7 +90,7 @@ class _Data {
export default defineComponent({
name: "MainLayout",
components: { LeftToolBar, TopToolBar },
components: { LeftToolBar, RightToolBar, TopToolBar },
setup() {
const data = reactive(new _Data());

298
src/pages/LeftToolBar.vue
View File

@ -1,308 +1,20 @@
<template>
<div>
<q-tree ref="tree" :nodes="tree_nodes" node-key="uuid" labelKey="name">
<template v-slot:default-header="prop">
<q-item
class="full-width"
clickable
:draggable="!prop.node.is_group"
@dragstart="(evt) => onDragStart(evt, prop.node)"
>
<q-item-section avatar>
<q-icon
:name="
prop.node.is_group
? 'img:source_icon/group.png'
: getItemIcon(prop.node.item_data?.window_type)
"
color="orange"
size="28px"
class="q-mr-sm"
/>
</q-item-section>
<q-item-section>
<div class="text-weight-bold text-primary">
{{ prop.node.name }}
<signal-source-tree />
</div>
</q-item-section>
<q-popup-proxy context-menu>
<q-popup-proxy context-menu />
<q-list>
<q-item
v-if="
prop.node.name == $t('root') ||
(prop.node.is_group &&
prop.node.item_data &&
!prop.node.item_data.system_default)
"
clickable
v-close-popup
v-ripple
@click="
$refs.signal_source_dialog.showDialog({
type: 1,
parent_node: prop.node.uuid,
})
"
>
<q-item-section avatar><q-icon name="add" /></q-item-section>
<q-item-section>{{
$t("add signal source item")
}}</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
v-if="
prop.node.name == $t('root') ||
(prop.node.is_group &&
prop.node.item_data &&
!prop.node.item_data.system_default)
"
v-ripple
@click="
() =>
$refs.group_dialog.showDialog({
type: 1,
data: prop.node,
})
"
>
<q-item-section avatar
><q-icon name="create_new_folder"
/></q-item-section>
<q-item-section>{{ $t("add group") }}</q-item-section>
</q-item>
<q-item
clickable
v-ripple
v-close-popup
v-if="
prop.node.item_data && !prop.node.item_data.system_default
"
@click="
() =>
(prop.node.is_group
? $refs.group_dialog
: $refs.signal_source_dialog
).showDialog({
type: 2,
data: prop.node,
})
"
>
<q-item-section avatar><q-icon name="edit" /></q-item-section>
<q-item-section>{{ $t("edit") }}</q-item-section>
</q-item>
<q-item
clickable
v-ripple
v-close-popup
v-if="
prop.node.item_data && !prop.node.item_data.system_default
"
@click="
(evt) => deleteItem(evt, prop.node.is_group, prop.node.uuid)
"
>
<q-item-section avatar
><q-icon color="red" name="delete"
/></q-item-section>
<q-item-section>{{ $t("delete") }} &nbsp;</q-item-section>
</q-item>
</q-list>
</q-popup-proxy>
</q-item>
</template>
</q-tree>
</div>
<group-dialog ref="group_dialog" />
<signal-source-dialog ref="signal_source_dialog" />
</template>
<script lang="ts">
import { defineComponent, computed, onMounted, ref, nextTick } from "vue";
import { useStore } from "src/store";
import { SignalSourceTreeItemEntity } from "src/entities/SignalSourceEntity";
import GroupDialog from "src/components/GroupDialog.vue";
import SignalSourceDialog from "src/components/SignalSourceDialog.vue";
import { Common } from "src/common/Common";
import GlobalData from "src/common/GlobalData";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
import EventBus, { EventNamesDefine } from "src/common/EventBus";
import { Protocol } from "src/entities/WSProtocol";
import { defineComponent } from "vue";
import SignalSourceTree from "src/components/SignalSourceTree.vue";
export default defineComponent({
name: "PageLeftToolBar",
components: { GroupDialog, SignalSourceDialog },
components: { SignalSourceTree },
setup() {
const $store = useStore();
const $q = useQuasar();
const $t = useI18n();
const tree_nodes = computed({
get: () => $store.state.signal_source_tree,
set: (val) => $store.commit("setSignalSourceTree", val),
});
const tree: any | null = ref(null);
onMounted(async () => {
while (!tree.value.nodes.length) {
await Common.waitFor(100);
}
tree.value?.setExpanded("", true);
});
interface _ResponseMessage {
packet: Protocol.PacketEntity;
data: string;
}
EventBus.getInstance().on(
EventNamesDefine.NotifyMessage,
(response: _ResponseMessage) => {
if (response) {
switch (response.packet.command) {
case Protocol.Commands.kRpcAddSignalSource:
{
const temp = JSON.parse(
response.data
) as Protocol.SignalSourceAddNotifyEntity;
if (temp) {
GlobalData.getInstance().signal_source.push(
temp.signal_source
);
$store.commit("addSignalSourceTreeItem", {
parent: temp.signal_source.group_uuid,
is_group: false,
item_data: temp.signal_source,
});
}
}
break;
case Protocol.Commands.kRpcDeleteSignalSource:
{
const temp = JSON.parse(
response.data
) as Protocol.SignalSourceDeleteNotifyEntity;
if (temp) {
$store.commit("deleteSignalSourceTreeItem", {
is_group: false,
uuid: temp.uuid,
});
}
}
break;
case Protocol.Commands.kRpcEditSignalSource:
{
const temp = JSON.parse(
response.data
) as Protocol.SignalSourceEditNotifyEntity;
if (temp) {
$store.commit("setSignalSourceTreeItem", {
is_group: false,
item_data: temp.signal_source,
});
}
}
break;
case Protocol.Commands.kRpcAddSignalSourceGroup:
{
const temp = JSON.parse(
response.data
) as Protocol.SignalSourceGroupAddNotifyEntity;
if (temp) {
$store.commit("addSignalSourceTreeItem", {
parent: temp.signal_source_group.parent_uuid,
is_group: true,
item_data: temp.signal_source_group,
});
}
}
break;
case Protocol.Commands.kRpcDeleteSignalSourceGroup:
{
const temp = JSON.parse(
response.data
) as Protocol.SignalSourceGroupDeleteNotifyEntity;
if (temp) {
$store.commit("deleteSignalSourceTreeItem", {
is_group: true,
uuid: temp.uuid,
});
}
}
break;
case Protocol.Commands.kRpcEditSignalSourceGroup:
{
const temp = JSON.parse(
response.data
) as Protocol.SignalSourceGroupEditNotifyEntity;
if (temp) {
$store.commit("setSignalSourceTreeItem", {
is_group: true,
item_data: temp.signal_source_group,
});
}
}
break;
}
}
}
);
return {
tree,
tree_nodes,
loga(a: any) {
console.log(a);
},
onDragStart(e: DragEvent, node: SignalSourceTreeItemEntity) {
e.dataTransfer?.setData("uuid", node.uuid);
e.dataTransfer?.setData("node_object", JSON.stringify(node));
if (e.dataTransfer) {
e.dataTransfer.dropEffect = "move";
}
},
getItemIcon(item_type: string) {
return Common.getSignalSourceIcon(item_type);
},
async deleteItem(
evt: PointerEvent | null,
is_group: boolean,
uuid: string
) {
let success = false;
if (is_group) {
let response = await GlobalData.getInstance()
.getCurrentClient()
?.deleteSignalSourceGroup(uuid);
if (response) {
success = response.success;
}
} else {
let response = await GlobalData.getInstance()
.getCurrentClient()
?.deleteSignalSource(uuid);
if (response) {
success = response.success;
}
}
$q.notify({
color: success ? "positive" : "negative",
icon: success ? "done" : "warning",
message:
$t.t("delete") + (success ? $t.t("success") : $t.t("fail")) + "!",
position: "top",
timeout: 1000,
});
},
};
return {};
},
});
</script>

38
src/pages/Login.vue
View File

@ -14,8 +14,44 @@
@reset="onReset"
class="q-gutter-md"
>
<q-input
:loading="data.loading"
:disable="data.loading"
filled
v-model="data.ip_address"
:label="$t('server ip address')"
:hint="$t('please input server ip address')"
lazy-rules
:rules="[
(val) =>
(val && val.length > 0) || $t('Please type something'),
(val) =>
val == 'localhost' ||
/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
val
) ||
$t('Please input vaild ip address'),
]"
@keydown="
(evt) => {
if (evt.keyCode == 13) {
$refs?.password_input?.focus();
}
}
"
>
<template v-if="data.ip_address" v-slot:append>
<q-icon
name="cancel"
@click.stop="data.ip_address = null"
class="cursor-pointer"
/>
</template>
</q-input>
<q-input
autofocus
ref="user_name"
:loading="data.loading"
:disable="data.loading"
filled
@ -112,7 +148,7 @@ class _Data {
user_name: string | null = null;
password: string | null = null;
loading = false;
ip_address = "127.0.0.1";
ip_address = window.location.hostname;
show_password = false;
constructor() {

44
src/pages/RightToolBar.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<div>
<q-tabs
v-model="tab_value"
dense
class="text-grey"
active-color="primary"
indicator-color="primary"
align="justify"
narrow-indicator
>
<q-tab name="mode" :label="$t('mode')" />
<q-tab name="plan" :label="$t('plan')" />
</q-tabs>
<q-separator />
<q-tab-panels v-model="tab_value" animated>
<q-tab-panel name="mode">
<mode-tree />
</q-tab-panel>
<q-tab-panel name="plan">
<div class="text-h6">Alarms</div>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</q-tab-panel>
</q-tab-panels>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import ModeTree from "src/components/ModeTree.vue";
export default defineComponent({
name: "PageRightToolBar",
components: { ModeTree },
setup() {
let tab_value = ref("mode");
return { tab_value };
},
});
</script>

26
src/pages/WallPage.vue
View File

@ -122,6 +122,13 @@ const _getSignalSources = async () => {
?.getSignalSources()) as Protocol.GetSignalSourcesResponse;
};
const _getModes = async () => {
const global_data = GlobalData.getInstance();
return (await global_data
.getCurrentClient()
?.getModes()) as Protocol.GetModesResponseEntity;
};
const _initSignalSourceTree = async (options: _OptionsType) => {
const $store = options?.$store;
if ($store) {
@ -137,6 +144,21 @@ const _initSignalSourceTree = async (options: _OptionsType) => {
}
};
const _initModeTree = async (options: _OptionsType) => {
const $store = options?.$store;
if ($store) {
try {
let response = await _getModes();
if (response) {
$store.commit("buildModeTree", { options, response });
GlobalData.getInstance().modes = response.modes;
}
} catch (e) {
console.error(e);
}
}
};
const _getApplicationConfig = async (options: _OptionsType) => {
const global_data = GlobalData.getInstance();
global_data.applicationConfig = (
@ -177,9 +199,9 @@ const _initialize = async (options: _OptionsType) => {
await _getApplicationConfig(options);
await _initSignalSourceTree(options).then(() => {
await _initSignalSourceTree(options);
await _initModeTree(options);
_getWindows(options);
});
}
};

230
src/store/index.ts
View File

@ -1,4 +1,5 @@
import { store } from "quasar/wrappers";
import { ModeEntity, ModeTreeItemEntity } from "src/entities/ModeEntity";
import { WindowOpenNotifyEntity } from "src/entities/MultimediaWindowEntity";
import {
SignalSourceEntity,
@ -29,6 +30,7 @@ export interface StateInterface {
// Declared as unknown to avoid linting issue. Best to strongly type as per the line above.
initialized: boolean;
signal_source_tree: SignalSourceTreeItemEntity[];
mode_tree: ModeTreeItemEntity[];
wall_row: number;
wall_col: number;
device_screen_width: number;
@ -77,6 +79,165 @@ class _TreeHelper {
}
}
}
public static addTreeItem(
tree: any,
defaultItem: () => any,
createTreeItem: (
uuid: string,
parent: string,
name: string,
is_group: boolean
) => any,
playload?: any
) {
if (tree && playload) {
const parent = playload.parent ?? "";
const is_group = playload.is_group ?? false;
let item_data = playload.item_data ?? defaultItem();
let node = _TreeHelper.findNode(tree[0], "uuid", item_data.uuid);
if (node) {
return;
}
node = _TreeHelper.findNode(tree[0], "uuid", parent);
if (node) {
const node_item = createTreeItem(
item_data.uuid,
parent,
item_data.name,
is_group
);
node_item.item_data = item_data;
(<any[]>node.children).push(node_item);
}
}
}
public static setTreeItem(
tree: any,
defaultItem: () => any,
copy: (left: any, right: any) => void,
playload?: any
) {
if (tree && playload) {
let item_data = playload.item_data ?? defaultItem();
let node = _TreeHelper.findNode(tree[0], "uuid", item_data.uuid);
if (node) {
copy(node.item_data, item_data);
node.name = item_data.name;
}
}
}
public static deleteTreeItem(tree: any, playload?: any) {
if (tree && playload && playload.uuid) {
let parent = _TreeHelper.findNodeParent(tree[0], "uuid", playload.uuid);
if (parent) {
let node_index = (<any[]>parent.children).findIndex(
(item) => item && item.uuid == playload.uuid
);
if (node_index != -1) {
(<any[]>parent.children).splice(node_index, 1);
}
}
}
}
public static findGroupsByParent(parent: string, array: any[]) {
return array.filter((item) => {
return item && item.parent_uuid == parent;
});
}
public static findItemsByParent(parent: string, array: any[]) {
return array.filter((item) => {
return item && item.group_uuid == parent;
});
}
public static buildGroup(
parent: any,
createTreeItem: (
uuid?: string,
parent?: string,
name?: string,
is_group?: boolean,
item_data?: any,
children?: any[]
) => any,
group_array: any[],
item_array: any[]
) {
if (parent) {
for (let item of _TreeHelper.findGroupsByParent(
parent.uuid,
group_array
)) {
const node_item = createTreeItem(
item.uuid,
parent.uuid,
item.name,
true
);
node_item.item_data = item;
parent.children.push(node_item);
_TreeHelper.buildGroup(
node_item,
createTreeItem,
group_array,
item_array
);
}
for (let item of _TreeHelper.findItemsByParent(parent.uuid, item_array)) {
const node_item = createTreeItem(
item.uuid,
parent.uuid,
item.name,
false,
item
);
parent.children.push(node_item);
}
}
}
public static buildTree(
tree: any,
group_name: string,
items_name: string,
createTreeItem: (
uuid?: string,
parent?: string,
name?: string,
is_group?: boolean,
item_data?: any,
children?: any[]
) => any,
playload?: any
) {
if (
tree &&
playload &&
playload.response &&
playload.options &&
playload.options.$t
) {
const $t = playload.options.$t;
const groups = playload.response[group_name] ?? [];
const items = playload.response[items_name] ?? [];
const root = createTreeItem("", "", $t.t("root"), true);
tree.splice(0, tree.length);
tree.push(root);
_TreeHelper.buildGroup(root, createTreeItem, groups, items);
} else {
console.error(playload);
}
}
}
// provide typings for `useStore` helper
@ -92,6 +253,7 @@ export default store(function (/* { ssrContext } */) {
// state
initialized: false,
signal_source_tree: [],
mode_tree: [],
wall_col: 1,
wall_row: 1,
device_screen_width: 1920,
@ -189,6 +351,7 @@ export default store(function (/* { ssrContext } */) {
state.device_screen_height = num;
}
},
// signal source
setSignalSourceTree(
state: StateInterface,
playload?: SignalSourceTreeItemEntity[]
@ -198,9 +361,6 @@ export default store(function (/* { ssrContext } */) {
}
},
clearSignalSourceTree(state: StateInterface, playload?: any) {
// if (state.signal_source_tree) {
// state.signal_source_tree.splice(0, state.signal_source_tree.length);
// }
state.signal_source_tree = [];
},
pushSignalSourceTreeItem(
@ -343,6 +503,70 @@ export default store(function (/* { ssrContext } */) {
console.error(playload);
}
},
//mode tree
setModeTree(
state: StateInterface,
playload?: SignalSourceTreeItemEntity[]
) {
if (playload) {
state.mode_tree = playload;
}
},
clearModeTree(state: StateInterface, playload?: any) {
state.mode_tree = [];
},
pushModeTreeItem(
state: StateInterface,
playload?: SignalSourceTreeItemEntity
) {
if (playload) {
state.mode_tree.push(playload);
}
},
addModeTreeItem(state: StateInterface, playload?: any) {
_TreeHelper.addTreeItem(
state.mode_tree,
() => new ModeEntity(),
(uuid: string, parent: string, name: string, is_group: boolean) =>
new ModeTreeItemEntity(uuid, parent, name, is_group),
playload
);
},
setModeTreeItem(state: StateInterface, playload?: any) {
_TreeHelper.setTreeItem(
state.mode_tree,
() => new ModeEntity(),
(left: any, right: any) => ModeEntity.copy(left, right),
playload
);
},
deleteModeTreeItem(state: StateInterface, playload?: any) {
_TreeHelper.deleteTreeItem(state.mode_tree, playload);
},
buildModeTree(state: StateInterface, playload?: any) {
_TreeHelper.buildTree(
state.mode_tree,
"mode_groups",
"modes",
(
uuid?: string,
parent?: string,
name?: string,
is_group?: boolean,
item_data?: any,
children?: SignalSourceTreeItemEntity[]
) =>
new ModeTreeItemEntity(
uuid,
parent,
name,
is_group,
item_data,
children
),
playload
);
},
},
// enable strict mode (adds overhead!)