501 lines
15 KiB
Vue
501 lines
15 KiB
Vue
<template>
|
|
<div
|
|
class="row full-width"
|
|
style="height: 35vh"
|
|
@touchstart="$event.stopPropagation()"
|
|
v-show="$store.state.power_state"
|
|
>
|
|
<div :class="'col-' + ($store.state.landspace ? '9' : '8')">
|
|
<div class="q-ma-md bg-primary">
|
|
<div class="row bg-primary">
|
|
<q-tabs
|
|
v-model="tab"
|
|
dense
|
|
inline-label
|
|
class="col-12 text-white bg-accent"
|
|
style="border: none"
|
|
active-color="secondary"
|
|
indicator-color="secondary"
|
|
active-bg-color="primary"
|
|
align="justify"
|
|
>
|
|
<q-tab
|
|
name="signal_source"
|
|
no-caps
|
|
icon="img:pad/signal_source_tab_icon.png"
|
|
:label="$t('signal source')"
|
|
/>
|
|
<q-separator dark vertical inset />
|
|
|
|
<q-tab
|
|
name="singal_polling"
|
|
no-caps
|
|
icon="img:pad/polling_tab_icon.png"
|
|
:label="$t('signal polling')"
|
|
/>
|
|
<q-separator dark vertical inset />
|
|
|
|
<q-tab
|
|
name="mode"
|
|
no-caps
|
|
icon="img:pad/mode_tab_icon.png"
|
|
:label="$t('mode')"
|
|
/>
|
|
<q-separator dark vertical inset />
|
|
|
|
<q-tab
|
|
name="plan"
|
|
no-caps
|
|
icon="img:pad/plan_tab_icon.png"
|
|
:label="$t('plan')"
|
|
/>
|
|
</q-tabs>
|
|
</div>
|
|
<q-separator />
|
|
|
|
<q-tab-panels v-model="tab" animated class="fit text-black">
|
|
<q-tab-panel
|
|
name="signal_source"
|
|
class="full-width __panel_item q-pa-xs"
|
|
>
|
|
<q-scroll-area class="fit q-pr-md">
|
|
<draggable
|
|
class="row q-px-md"
|
|
v-model="signal_sources"
|
|
group="signal_source"
|
|
item-key="uuid"
|
|
:move="() => false"
|
|
@drop="onSignalSourceDrop($event)"
|
|
>
|
|
<template #item="{ element }">
|
|
<div class="col-4 q-pr-sm q-pb-sm">
|
|
<q-btn
|
|
class="col-row fit overflow-hidden bg-accent text-white"
|
|
:icon="getItemIcon(element.window_type)"
|
|
>
|
|
<span class="col q-ml-md text-left">
|
|
{{ element.name }}
|
|
</span>
|
|
</q-btn>
|
|
</div>
|
|
</template>
|
|
</draggable>
|
|
</q-scroll-area>
|
|
</q-tab-panel>
|
|
<q-tab-panel
|
|
name="singal_polling"
|
|
class="full-width __panel_item q-pa-xs"
|
|
>
|
|
<q-scroll-area class="fit q-pr-md">
|
|
<draggable
|
|
class="row q-px-md"
|
|
v-model="pollings"
|
|
group="polling"
|
|
item-key="uuid"
|
|
:move="() => false"
|
|
@drop="onPollingDrop($event)"
|
|
>
|
|
<template #item="{ element }">
|
|
<div class="col-4 q-pr-sm q-pb-sm">
|
|
<q-btn
|
|
class="col-row fit overflow-hidden bg-accent text-white"
|
|
icon="img:pad/polling_icon.png"
|
|
>
|
|
<span class="col q-ml-md text-left">
|
|
{{ element.name }}
|
|
</span>
|
|
</q-btn>
|
|
</div>
|
|
</template>
|
|
</draggable>
|
|
</q-scroll-area>
|
|
</q-tab-panel>
|
|
|
|
<q-tab-panel name="mode" class="full-width __panel_item q-pa-xs">
|
|
<q-scroll-area class="fit q-pr-md">
|
|
<draggable
|
|
class="row q-px-md"
|
|
v-model="modes"
|
|
group="mode"
|
|
item-key="uuid"
|
|
:move="() => false"
|
|
@drop="onModeDrop($event)"
|
|
>
|
|
<template #item="{ element }">
|
|
<div class="col-4 q-pr-sm q-pb-sm">
|
|
<q-btn
|
|
class="col-row fit overflow-hidden bg-accent text-white"
|
|
icon="img:pad/mode_icon.png"
|
|
>
|
|
<span class="col q-ml-md text-left">
|
|
{{ element.name }}
|
|
</span>
|
|
</q-btn>
|
|
</div>
|
|
</template>
|
|
</draggable>
|
|
</q-scroll-area>
|
|
</q-tab-panel>
|
|
<q-tab-panel name="plan" class="full-width __panel_item q-pa-xs">
|
|
<q-scroll-area class="fit q-pr-md">
|
|
<draggable
|
|
class="row q-px-md"
|
|
v-model="plans"
|
|
group="plans"
|
|
item-key="uuid"
|
|
:move="() => false"
|
|
@drop="onPlanDrop($event)"
|
|
>
|
|
<template #item="{ element }">
|
|
<div class="col-4 q-pr-sm q-pb-sm">
|
|
<q-btn
|
|
class="col-row fit overflow-hidden bg-accent text-white"
|
|
icon="img:pad/plan_icon.png"
|
|
>
|
|
<span class="col q-ml-md text-left">
|
|
{{ element.name }}
|
|
</span>
|
|
</q-btn>
|
|
</div>
|
|
</template>
|
|
</draggable>
|
|
</q-scroll-area>
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="full-height"
|
|
:class="'col-' + ($store.state.landspace ? '3' : '4')"
|
|
>
|
|
<div>
|
|
<div class="row q-my-lg" style="width: 1px; height: 1px"></div>
|
|
<div class="row q-my-md" style="width: 1px; height: 1px"></div>
|
|
<div class="row">
|
|
<q-space />
|
|
<q-btn
|
|
:disable="!can_next_prev_window || plan_running"
|
|
icon="img:pad/play_control/play_prev_icon.png"
|
|
flat
|
|
size="1.2rem"
|
|
class="col-auto"
|
|
@click="playPrev($event)"
|
|
/>
|
|
<q-btn
|
|
:disable="!can_pause_window || plan_running"
|
|
:icon="
|
|
selected_window?.paused
|
|
? 'img:pad/play_control/play_icon.png'
|
|
: 'img:pad/play_control/pause_icon.png'
|
|
"
|
|
flat
|
|
size="2.4rem"
|
|
class="col-auto"
|
|
@click="selected_window?.paused ? play($event) : pause($event)"
|
|
/>
|
|
<q-btn
|
|
:disable="!can_next_prev_window || plan_running"
|
|
icon="img:pad/play_control/play_next_icon.png"
|
|
flat
|
|
size="1.2rem"
|
|
class="col-auto"
|
|
@click="playNext($event)"
|
|
/>
|
|
<q-space />
|
|
</div>
|
|
<div class="row q-my-sm">
|
|
<q-space />
|
|
<q-btn
|
|
:disable="plan_running"
|
|
icon="img:pad/play_control/volume_down_icon.png"
|
|
flat
|
|
size="1.2rem"
|
|
class="col-auto"
|
|
@click="volumeDown($event)"
|
|
/>
|
|
<q-btn
|
|
:disable="plan_running"
|
|
:icon="
|
|
selected_window?.muted
|
|
? 'img:pad/play_control/mute_icon.png'
|
|
: 'img:pad/play_control/unmute_icon.png'
|
|
"
|
|
flat
|
|
size="1.2rem"
|
|
class="col-auto"
|
|
@click="
|
|
selected_window?.muted ? unmuteWindow($event) : muteWindow($event)
|
|
"
|
|
/>
|
|
<q-btn
|
|
:disable="plan_running"
|
|
icon="img:pad/play_control/volume_up_icon.png"
|
|
flat
|
|
size="1.2rem"
|
|
class="col-auto"
|
|
@click="volumeUp($event)"
|
|
/>
|
|
<q-space />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<q-space />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.__panel_item {
|
|
height: 27vh;
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, Ref, ref, computed, watch } from "vue";
|
|
import { useQuasar } from "quasar";
|
|
import { useI18n } from "vue-i18n";
|
|
import { useStore } from "src/store";
|
|
import draggable from "src/third_lib/vuedraggable/vuedraggable";
|
|
import { SignalSourceEntity } from "src/entities/SignalSourceEntity";
|
|
import { Common } from "src/common/Common";
|
|
import EventBus, { EventNamesDefine } from "src/common/EventBus";
|
|
import GlobalData from "src/common/GlobalData";
|
|
import { WindowOpenNotifyEntity } from "src/entities/MultimediaWindowEntity";
|
|
|
|
export default defineComponent({
|
|
name: "PadBottomBarPage",
|
|
components: { draggable },
|
|
setup() {
|
|
const $store = useStore();
|
|
const $q = useQuasar();
|
|
const $t = useI18n();
|
|
|
|
const signal_sources = computed({
|
|
get: () =>
|
|
$store.state.signal_sources.filter(
|
|
(element) => element && !element.local_file_flag
|
|
),
|
|
set: (val) => null,
|
|
});
|
|
|
|
const modes = computed({
|
|
get: () => $store.state.modes,
|
|
set: (val) => null,
|
|
});
|
|
|
|
const pollings = computed({
|
|
get: () => $store.state.pollings,
|
|
set: (val) => null,
|
|
});
|
|
|
|
const plans = computed({
|
|
get: () => $store.state.plans,
|
|
set: (val) => null,
|
|
});
|
|
|
|
const tab = ref("signal_source");
|
|
|
|
let selected_window: Ref<WindowOpenNotifyEntity | null> = ref(null);
|
|
let is_multimedia_window = ref(false);
|
|
|
|
let can_pause_window = ref(false);
|
|
let can_next_prev_window = ref(false);
|
|
|
|
const plan_running = computed(
|
|
() => $store.state.current_running_plan.trim() != ""
|
|
);
|
|
|
|
watch(
|
|
() => $store.state.selected_window,
|
|
(newValue, oldValue) => {
|
|
const window = $store.state.windows.find(
|
|
(element) => element && element.uuid == newValue
|
|
);
|
|
if (window) {
|
|
selected_window.value = window;
|
|
const signal_source = GlobalData.getInstance().signal_source.find(
|
|
(element) =>
|
|
element && element.uuid == window.signal_source_table_uuid
|
|
);
|
|
if (signal_source) {
|
|
const type = window.polling
|
|
? window.polling_window_type
|
|
: signal_source.window_type;
|
|
is_multimedia_window.value =
|
|
type == "EwindowType::Multimedia" ||
|
|
type == "EwindowType::Rtsp" ||
|
|
type == "EwindowType::HdmiIn";
|
|
|
|
can_pause_window.value =
|
|
type == "EwindowType::Multimedia" ||
|
|
type == "EwindowType::HdmiIn";
|
|
can_next_prev_window.value = type == "EwindowType::Multimedia";
|
|
}
|
|
} else {
|
|
selected_window.value = null;
|
|
is_multimedia_window.value = false;
|
|
}
|
|
}
|
|
);
|
|
|
|
const emit_drop_events = (evt: any, type: string) => {
|
|
if (
|
|
evt.data &&
|
|
evt.event &&
|
|
evt.event.changedTouches &&
|
|
evt.event.changedTouches.length
|
|
) {
|
|
const touchX = evt.event.changedTouches[0].pageX;
|
|
const touchY = evt.event.changedTouches[0].pageY;
|
|
EventBus.getInstance().emit(EventNamesDefine.DropToWall, {
|
|
type,
|
|
data: evt.data,
|
|
pos: {
|
|
x: touchX,
|
|
y: touchY,
|
|
},
|
|
});
|
|
}
|
|
};
|
|
|
|
return {
|
|
tab,
|
|
signal_sources,
|
|
modes,
|
|
pollings,
|
|
plans,
|
|
selected_window,
|
|
is_multimedia_window,
|
|
can_pause_window,
|
|
can_next_prev_window,
|
|
plan_running,
|
|
loga(a: any) {
|
|
console.log(a);
|
|
},
|
|
getItemIcon(item_type: string) {
|
|
let icon_map = new Map([
|
|
["EwindowType::Normal", "img:pad/source_icon/media.png"],
|
|
["EwindowType::Multimedia", "img:pad/source_icon/media.png"],
|
|
["EwindowType::Web", "img:pad/source_icon/web.png"],
|
|
["EwindowType::Image", "img:pad/source_icon/image.png"],
|
|
["EwindowType::Pdf", "img:pad/source_icon/pdf.png"],
|
|
["EwindowType::Ppt", "img:pad/source_icon/ppt.png"],
|
|
["EwindowType::Rtsp", "img:pad/source_icon/rtsp.png"],
|
|
["EwindowType::Subtitles", "img:pad/source_icon/subtitles.png"],
|
|
["EwindowType::Clock", "img:pad/source_icon/clock.png"],
|
|
["EwindowType::Weather", "img:pad/source_icon/weather.png"],
|
|
["EwindowType::HdmiIn", "img:pad/source_icon/hdmi_in.png"],
|
|
["EwindowType::HdmiIn", "img:pad/source_icon/timer.png"],
|
|
]);
|
|
|
|
if (icon_map.has(item_type)) {
|
|
return icon_map.get(item_type);
|
|
} else {
|
|
return "img:pad/source_icon/media.png";
|
|
}
|
|
},
|
|
onSignalSourceDrop(evt: any) {
|
|
try {
|
|
emit_drop_events(evt, "signal_source");
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
},
|
|
onPollingDrop(evt: any) {
|
|
try {
|
|
emit_drop_events(evt, "polling");
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
},
|
|
onModeDrop(evt: any) {
|
|
try {
|
|
emit_drop_events(evt, "mode");
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
},
|
|
onPlanDrop(evt: any) {
|
|
try {
|
|
emit_drop_events(evt, "plan");
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
},
|
|
volumeUp(evt: MouseEvent) {
|
|
evt.stopPropagation();
|
|
if (selected_window.value) {
|
|
let volume = selected_window.value.volume + 5;
|
|
if (volume > 100) {
|
|
volume = 100;
|
|
}
|
|
GlobalData.getInstance()
|
|
.getCurrentClient()
|
|
?.setWindowVolume(selected_window.value.window_id, volume);
|
|
}
|
|
},
|
|
muteWindow(evt: MouseEvent) {
|
|
evt.stopPropagation();
|
|
if (selected_window.value) {
|
|
GlobalData.getInstance()
|
|
.getCurrentClient()
|
|
?.muteWindow(selected_window.value.window_id);
|
|
}
|
|
},
|
|
unmuteWindow(evt: MouseEvent) {
|
|
evt.stopPropagation();
|
|
if (selected_window.value) {
|
|
GlobalData.getInstance()
|
|
.getCurrentClient()
|
|
?.unmuteWindow(selected_window.value.window_id);
|
|
}
|
|
},
|
|
volumeDown(evt: MouseEvent) {
|
|
evt.stopPropagation();
|
|
if (selected_window.value) {
|
|
let volume = selected_window.value.volume - 5;
|
|
if (volume < 0) {
|
|
volume = 0;
|
|
}
|
|
GlobalData.getInstance()
|
|
.getCurrentClient()
|
|
?.setWindowVolume(selected_window.value.window_id, volume);
|
|
}
|
|
},
|
|
playNext(evt: MouseEvent) {
|
|
evt.stopPropagation();
|
|
if (selected_window.value) {
|
|
GlobalData.getInstance()
|
|
.getCurrentClient()
|
|
?.windowPlayNext(selected_window.value.window_id);
|
|
}
|
|
},
|
|
play(evt: MouseEvent) {
|
|
evt.stopPropagation();
|
|
if (selected_window.value) {
|
|
GlobalData.getInstance()
|
|
.getCurrentClient()
|
|
?.playWindow(selected_window.value.window_id);
|
|
}
|
|
},
|
|
pause(evt: MouseEvent) {
|
|
evt.stopPropagation();
|
|
if (selected_window.value) {
|
|
GlobalData.getInstance()
|
|
.getCurrentClient()
|
|
?.pauseWindow(selected_window.value.window_id);
|
|
}
|
|
},
|
|
playPrev(evt: MouseEvent) {
|
|
evt.stopPropagation();
|
|
if (selected_window.value) {
|
|
GlobalData.getInstance()
|
|
.getCurrentClient()
|
|
?.windowPlayPrev(selected_window.value.window_id);
|
|
}
|
|
},
|
|
};
|
|
},
|
|
});
|
|
</script>
|