380 lines
9.9 KiB
Vue
380 lines
9.9 KiB
Vue
<template>
|
|
<div
|
|
class="window_class window_flag"
|
|
:class="
|
|
$props.window.uuid == $store.state.selected_window
|
|
? 'window_selected'
|
|
: 'window_normal'
|
|
"
|
|
@mousedown="onMouseDown"
|
|
@click="onClick"
|
|
@touchend="onTouchEnd"
|
|
:style="{
|
|
background: $props.window.client_color,
|
|
}"
|
|
>
|
|
<q-popup-proxy context-menu>
|
|
<q-list>
|
|
<q-item
|
|
clickable
|
|
v-close-popup
|
|
:disable="$props.disable"
|
|
@click="$emit('edit_volume', $props.window.window_id)"
|
|
v-if="false && !$props.window.muted && is_audo_player_window"
|
|
>
|
|
<q-item-section> {{ $t("edit volume") }} </q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
v-close-popup
|
|
:disable="$props.disable"
|
|
@click="$emit('mute_unmute', $props.window.window_id)"
|
|
v-if="false && is_audo_player_window"
|
|
>
|
|
<q-item-section>
|
|
{{ $props.window.muted ? $t("unmute") : $t("mute") }}
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
v-close-popup
|
|
:disable="$props.disable"
|
|
@click="$emit('replace_this_window', $props.window.window_id)"
|
|
>
|
|
<q-item-section> {{ $t("replace window") }} </q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
v-if="$store.state.isLedPlayer()"
|
|
v-close-popup
|
|
:disable="$props.disable"
|
|
@click="$emit('edit_rect', $props.window.window_id)"
|
|
>
|
|
<q-item-section> {{ $t("edit window rect") }} </q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
v-close-popup
|
|
:disable="$props.disable"
|
|
@click="$emit('close_this_window', $props.window.window_id)"
|
|
>
|
|
<q-item-section> {{ $t("close this window") }} </q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
v-close-popup
|
|
:disable="$props.disable"
|
|
@click="$emit('close_other_windows', $props.window.window_id)"
|
|
>
|
|
<q-item-section>
|
|
{{ $t("close other windows") }}
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
v-if="false"
|
|
clickable
|
|
v-close-popup
|
|
:disable="$props.disable"
|
|
@click="$emit('close_all_windows', $props.window.window_id)"
|
|
>
|
|
<q-item-section> {{ $t("close all windows") }} </q-item-section>
|
|
</q-item>
|
|
<q-item clickable v-if="false">
|
|
<q-item-section>{{ $t("trimming window") }}</q-item-section>
|
|
<q-item-section side>
|
|
<q-icon name="keyboard_arrow_right" />
|
|
</q-item-section>
|
|
|
|
<q-menu anchor="top end" self="top start">
|
|
<q-list>
|
|
<q-item v-close-popup :disable="$props.disable" clickable>
|
|
<q-item-section>{{ $t("trimming window pos") }}</q-item-section>
|
|
</q-item>
|
|
<q-item v-close-popup :disable="$props.disable" clickable>
|
|
<q-item-section>{{
|
|
$t("trimming window size")
|
|
}}</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
</q-item>
|
|
<q-item
|
|
v-if="false"
|
|
clickable
|
|
v-close-popup
|
|
:disable="$props.disable"
|
|
@click="$emit('top_window', $props.window.window_id)"
|
|
>
|
|
<q-item-section>
|
|
{{ $t("top window") }}
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
v-if="false"
|
|
clickable
|
|
v-close-popup
|
|
:disable="$props.disable"
|
|
@click="$emit('lower_window', $props.window.window_id)"
|
|
>
|
|
<q-item-section>
|
|
{{ $t("lower window") }}
|
|
</q-item-section>
|
|
</q-item>
|
|
<div>
|
|
<q-item
|
|
clickable
|
|
v-close-popup
|
|
:disable="$props.disable"
|
|
@click="$emit('start_polling', $props.window.window_id)"
|
|
v-if="!$props.window.polling"
|
|
>
|
|
<q-item-section> {{ $t("start polling") }} </q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
v-close-popup
|
|
:disable="$props.disable"
|
|
@click="$emit('stop_polling', $props.window.window_id)"
|
|
v-else
|
|
>
|
|
<q-item-section>
|
|
{{ $t("stop polling") }}
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
v-if="show_pollong_setting_context_menu"
|
|
clickable
|
|
v-close-popup
|
|
:disable="$props.disable || $props.window.polling"
|
|
@click="$emit('polling_setting', $props.window.window_id)"
|
|
>
|
|
<q-item-section> {{ $t("polling setting") }} </q-item-section>
|
|
</q-item>
|
|
</div>
|
|
</q-list>
|
|
</q-popup-proxy>
|
|
<div class="row title_bar full-width">
|
|
<q-icon
|
|
size="1.5em"
|
|
:name="
|
|
getItemIcon(
|
|
$props.window.polling
|
|
? $props.window.polling_window_type
|
|
: signal_source.window_type
|
|
)
|
|
"
|
|
class="q-mr-xs"
|
|
/>
|
|
<span v-if="$props.window.polling">{{
|
|
$props.window.polling_title
|
|
}}</span>
|
|
<span v-else>{{ signal_source.name }}</span>
|
|
<q-space />
|
|
<div>
|
|
<q-spinner-box
|
|
v-if="$props.window.polling"
|
|
color="primary"
|
|
size="1.5em"
|
|
/>
|
|
<q-tooltip>{{ $t("polling now") }}</q-tooltip>
|
|
</div>
|
|
<div>
|
|
<q-icon
|
|
v-if="
|
|
$props.window.polling
|
|
? calc_is_audio_player_window($props.window.polling_window_type)
|
|
: is_audo_player_window
|
|
"
|
|
size="1.5em"
|
|
:name="$props.window.muted ? 'volume_off' : 'volume_up'"
|
|
/>
|
|
<q-tooltip>{{
|
|
$t($props.window.muted ? "muted now" : "unmuted now")
|
|
}}</q-tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.window_class {
|
|
}
|
|
|
|
.window_flag {
|
|
}
|
|
|
|
.window_selected {
|
|
outline-style: dashed;
|
|
outline-color: #166fab;
|
|
}
|
|
|
|
.window_normal {
|
|
border: 1px solid #166fab;
|
|
}
|
|
|
|
.title_bar {
|
|
border: 1px solid black;
|
|
}
|
|
|
|
.top {
|
|
z-index: 1;
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { Common } from "src/common/Common";
|
|
import GlobalData from "src/common/GlobalData";
|
|
import { defineComponent, ref, watch, computed, getCurrentInstance } from "vue";
|
|
import { useStore } from "src/store";
|
|
import { SignalSourceEntity } from "src/entities/SignalSourceEntity";
|
|
|
|
class _Flags {
|
|
get up_flag() {
|
|
return 0x0001;
|
|
}
|
|
get down_flag() {
|
|
return 0x0002;
|
|
}
|
|
get left_flag() {
|
|
return 0x0004;
|
|
}
|
|
get right_flag() {
|
|
return 0x0008;
|
|
}
|
|
}
|
|
|
|
export default defineComponent({
|
|
name: "ComponentWindow",
|
|
|
|
components: {},
|
|
props: {
|
|
signal_source_table_uuid: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
window: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
disable: {
|
|
type: Boolean,
|
|
},
|
|
mouse_area_flag: {
|
|
type: Boolean,
|
|
},
|
|
plan_running: {
|
|
type: Boolean,
|
|
},
|
|
show_pollong_setting_context_menu: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
emits: [
|
|
"close_this_window",
|
|
"close_other_windows",
|
|
"close_all_windows",
|
|
"replace_this_window",
|
|
"top_window",
|
|
"lower_window",
|
|
"edit_volume",
|
|
"mute_unmute",
|
|
"stop_polling",
|
|
"start_polling",
|
|
"polling_setting",
|
|
"dbtouch",
|
|
"edit_rect",
|
|
],
|
|
setup(props, { emit }) {
|
|
const $store = useStore();
|
|
|
|
const signal_source = ref(new SignalSourceEntity());
|
|
|
|
const reload_signal_source = () => {
|
|
SignalSourceEntity.copy(
|
|
signal_source.value,
|
|
GlobalData.getInstance().getSignalSource(props.signal_source_table_uuid)
|
|
);
|
|
};
|
|
|
|
const calc_is_audio_player_window = (window_type: string) => {
|
|
return (
|
|
window_type == "EwindowType::Multimedia" ||
|
|
window_type == "EwindowType::Rtsp" ||
|
|
window_type == "EwindowType::HdmiIn"
|
|
);
|
|
};
|
|
|
|
const is_audo_player_window = computed(() =>
|
|
calc_is_audio_player_window(signal_source.value.window_type)
|
|
);
|
|
|
|
watch(
|
|
() => props.window,
|
|
(n, o) => {
|
|
reload_signal_source();
|
|
}
|
|
);
|
|
reload_signal_source();
|
|
|
|
const flags = new _Flags();
|
|
let ctrl_press_flag = false;
|
|
|
|
let prev_touch_time = 0;
|
|
|
|
const onclick = (evt: UIEvent) => {
|
|
if (props.plan_running) {
|
|
return;
|
|
}
|
|
if (ctrl_press_flag) {
|
|
ctrl_press_flag = false;
|
|
return;
|
|
}
|
|
if (!props.mouse_area_flag) {
|
|
// evt.stopPropagation();
|
|
if (props.window.uuid != $store.state.selected_window) {
|
|
GlobalData.getInstance()
|
|
.getCurrentClient()
|
|
?.focusIn(props.window.window_id);
|
|
}
|
|
$store.commit("setSelectedWindow", props.window.uuid);
|
|
}
|
|
};
|
|
|
|
return {
|
|
signal_source,
|
|
flags,
|
|
is_audo_player_window,
|
|
|
|
calc_is_audio_player_window,
|
|
onMouseDown(evt: MouseEvent) {
|
|
if (evt.ctrlKey) {
|
|
ctrl_press_flag = true;
|
|
}
|
|
},
|
|
onTouchEnd(evt: TouchEvent) {
|
|
if ((<any>window).touchPriority) {
|
|
let time = Date.now();
|
|
if (time - prev_touch_time < 300) {
|
|
emit("dbtouch");
|
|
} else {
|
|
onclick(evt);
|
|
}
|
|
prev_touch_time = time;
|
|
}
|
|
},
|
|
onClick(evt: MouseEvent) {
|
|
if ((<any>window).touchPriority) {
|
|
return;
|
|
}
|
|
onclick(evt);
|
|
},
|
|
|
|
getItemIcon(item_type: string) {
|
|
return Common.getSignalSourceIcon(item_type);
|
|
},
|
|
};
|
|
},
|
|
});
|
|
</script>
|