media_player_client/src/components/ModeTree.vue

301 lines
9.7 KiB
Vue
Raw Normal View History

2021-08-24 15:20:01 +08:00
<template>
<div>
<q-scroll-area
:style="{ height: content_height + 'px' }"
style="width: 20vw"
>
<q-tree ref="tree" :nodes="tree_nodes" node-key="uuid" labelKey="name">
<template v-slot:default-header="prop">
<q-item
class="full-width"
clickable
2022-06-14 17:58:27 +08:00
:disable="!$store.state.power_state"
@dblclick="
(evt) => {
if (!$store.state.power_state) {
return;
}
if (
$store.state.current_running_plan.trim() == '' &&
!prop.node.is_group
) {
callMode(prop.node.item_data);
} else {
$q.notify({
type: 'warning',
message: $t('plan running! can\'t call mode!'),
position: 'top',
timeout: 1500,
});
}
}
"
>
<q-item-section avatar>
<q-icon
:name="
prop.node.is_group
? 'img:source_icon/group.png'
2022-03-30 14:52:20 +08:00
: 'img:new_icon/mode_icon.png'
2021-08-24 15:20:01 +08:00
"
color="orange"
size="28px"
class="q-mr-sm"
/>
</q-item-section>
<q-item-section>
<div class="text-weight-bold text-primary">
<span v-if="prop.node.item_data && !prop.node.is_group"
>({{ prop.node.item_data?.number }})
</span>
&nbsp;&nbsp;{{ prop.node.name }}
</div>
</q-item-section>
2022-06-14 17:58:27 +08:00
<q-popup-proxy :context-menu="$store.state.power_state">
<q-list>
<q-item
v-if="
prop.node.name == $t('mode') ||
(prop.node.is_group && prop.node.item_data)
"
clickable
v-close-popup
v-ripple
@click="
$refs.mode_dialog.showDialog({
2021-08-24 15:20:01 +08:00
type: 1,
data: { uuid: prop.node.uuid },
2021-08-24 15:20:01 +08:00
})
"
>
<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('mode') ||
(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>
2021-08-24 15:20:01 +08:00
<q-item
clickable
v-ripple
v-close-popup
v-if="prop.node.item_data"
@click="updateToCurrentWindowList($event, prop.node)"
>
<q-item-section avatar
><q-icon name="refresh"
/></q-item-section>
<q-item-section>{{
$t("update to current window list")
}}</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>
</q-scroll-area>
2021-08-24 15:20:01 +08:00
</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 { ModeEntity, ModeTreeItemEntity } from "src/entities/ModeEntity";
import EventBus, { EventNamesDefine } from "src/common/EventBus";
import { NotifyMessage } from "src/common/ClientConnection";
import { Protocol } from "src/entities/WSProtocol";
2021-08-24 15:20:01 +08:00
export default defineComponent({
name: "ComponentModeTree",
2021-08-24 15:20:01 +08:00
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 content_height = ref(0);
const refresh_content_height = () => {
content_height.value = window.innerHeight - 135;
};
refresh_content_height();
EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
refresh_content_height();
});
2021-08-24 15:20:01 +08:00
const tree: any | null = ref(null);
onMounted(async () => {
2022-03-03 16:36:47 +08:00
while (!tree.value?.nodes?.length) {
2021-08-24 15:20:01 +08:00
await Common.waitFor(100);
}
tree.value?.setExpanded("", true);
});
return {
tree,
tree_nodes,
content_height,
2021-08-24 15:20:01 +08:00
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",
2021-12-22 11:25:04 +08:00
timeout: 1500,
2021-08-24 15:20:01 +08:00
});
},
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",
2021-12-22 11:25:04 +08:00
timeout: 1500,
2021-08-24 15:20:01 +08:00
});
},
updateToCurrentWindowList(evt: MouseEvent, data: ModeTreeItemEntity) {
if (
data &&
data.item_data &&
data.item_data.uuid &&
data.item_data.uuid.trim() != ""
) {
const uuid = data.item_data.uuid;
$q.dialog({
title: $t.t("update to current window list"),
message:
$t.t(
"the list of previously saved window list is about to be overwritten"
) +
"," +
$t.t("are you sure about the update") +
"?",
cancel: true,
persistent: true,
}).onOk(async () => {
try {
const response = (await GlobalData.getInstance()
.getCurrentClient()
?.updateModeWindowList(
uuid
)) as Protocol.UpdateModeWindowListResponseEntity;
$q.notify({
color: response && response.success ? "positive" : "negative",
icon: response && response.success ? "done" : "warning",
message:
$t.t("update to current window list") +
(response && response.success
? $t.t("success")
: $t.t("fail")) +
"!",
position: "top",
timeout: 1500,
});
} catch (e) {
console.log(e);
}
});
}
},
2021-08-24 15:20:01 +08:00
};
},
});
</script>