459 lines
14 KiB
Vue
459 lines
14 KiB
Vue
<template>
|
|
<q-dialog
|
|
persistent
|
|
v-model="show_dialog"
|
|
@before-hide="resetData"
|
|
@keydown="
|
|
(evt) => {
|
|
if (!loading && evt.keyCode == 27) {
|
|
show_dialog = false;
|
|
}
|
|
}
|
|
"
|
|
>
|
|
<q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 60vw">
|
|
<q-form @submit="onSubmit">
|
|
<q-card-section class="q-ma-none q-pa-sm">
|
|
<div class="row">
|
|
<div class="col-auto text-h6">
|
|
{{ $t("timer") }}
|
|
</div>
|
|
<q-space />
|
|
<div>
|
|
<q-btn
|
|
:loading="loading"
|
|
flat
|
|
round
|
|
icon="close"
|
|
:disable="loading"
|
|
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: 68vh; width: 55vw" class="scroll">
|
|
<q-list>
|
|
<q-item>
|
|
<q-item-section avatar class="head_1">
|
|
{{ $t("timer type") }}
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-select
|
|
v-model="timer_entity.direction"
|
|
:options="[
|
|
{
|
|
label: $t('forward timer'),
|
|
value: true,
|
|
},
|
|
{
|
|
label: $t('backward timer'),
|
|
value: false,
|
|
},
|
|
]"
|
|
emit-value
|
|
map-options
|
|
>
|
|
</q-select>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section avatar class="head_1">
|
|
{{ $t("timer mode") }}
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-select
|
|
v-model="timer_entity.is_relative_time"
|
|
:options="[
|
|
{
|
|
label: $t('relative time'),
|
|
value: true,
|
|
},
|
|
{
|
|
label: $t('absolute time'),
|
|
value: false,
|
|
},
|
|
]"
|
|
emit-value
|
|
map-options
|
|
>
|
|
</q-select>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item v-if="timer_entity.is_relative_time">
|
|
<q-item-section avatar class="head_1">
|
|
{{ $t("duration") }}
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-input
|
|
v-model="timer_entity.relative_time_s"
|
|
type="number"
|
|
min="0"
|
|
max="4294967295"
|
|
lazy-rules
|
|
:rules="[
|
|
(val) =>
|
|
(val && val.toString().length > 0) ||
|
|
$t('Please type something'),
|
|
]"
|
|
>
|
|
<template v-slot:append>
|
|
<span>{{ $t("second") }}</span>
|
|
</template>
|
|
</q-input>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item v-else>
|
|
<q-item-section avatar class="head_1">
|
|
{{
|
|
timer_entity.direction ? $t("start time") : $t("target time")
|
|
}}
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-input
|
|
filled
|
|
v-model="timer_entity.absolute_time"
|
|
:rules="[
|
|
(v) =>
|
|
(v &&
|
|
/^(\d{4})\/(\d{2})\/(\d{2}) (\d{2}):(\d{2}):(\d{2})$/.test(
|
|
v
|
|
)) ||
|
|
$t('time format error'),
|
|
]"
|
|
lazy-rules
|
|
:hint="
|
|
$t('example: 2022/01/01 00:00:00') +
|
|
'(' +
|
|
$t(
|
|
'the start time should not exceed the current time, and the target time should not be less than the current time'
|
|
) +
|
|
')'
|
|
"
|
|
>
|
|
<template v-slot:prepend>
|
|
<q-icon name="event" class="cursor-pointer">
|
|
<q-popup-proxy
|
|
cover
|
|
transition-show="scale"
|
|
transition-hide="scale"
|
|
>
|
|
<q-date
|
|
v-model="timer_entity.absolute_time"
|
|
mask="YYYY/MM/DD HH:mm:ss"
|
|
now-btn
|
|
with-seconds
|
|
>
|
|
<div class="row items-center justify-end">
|
|
<q-btn
|
|
v-close-popup
|
|
label="Close"
|
|
color="primary"
|
|
flat
|
|
/>
|
|
</div>
|
|
</q-date>
|
|
</q-popup-proxy>
|
|
</q-icon>
|
|
</template>
|
|
|
|
<template v-slot:append>
|
|
<q-icon name="access_time" class="cursor-pointer">
|
|
<q-popup-proxy
|
|
cover
|
|
transition-show="scale"
|
|
transition-hide="scale"
|
|
>
|
|
<q-time
|
|
v-model="timer_entity.absolute_time"
|
|
mask="YYYY/MM/DD HH:mm:ss"
|
|
format24h
|
|
now-btn
|
|
with-seconds
|
|
>
|
|
<div class="row items-center justify-end">
|
|
<q-btn
|
|
v-close-popup
|
|
label="Close"
|
|
color="primary"
|
|
flat
|
|
/>
|
|
</div>
|
|
</q-time>
|
|
</q-popup-proxy>
|
|
</q-icon>
|
|
</template>
|
|
</q-input>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section avatar class="head_1">
|
|
{{ $t("font size") }}
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-input
|
|
v-model="timer_entity.font_size"
|
|
type="number"
|
|
lazy-rules
|
|
:rules="[
|
|
(val) =>
|
|
(val && val.toString().length > 0) ||
|
|
$t('Please type something'),
|
|
]"
|
|
>
|
|
<template v-slot:append>
|
|
<span>pt</span>
|
|
</template>
|
|
</q-input>
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-item>
|
|
<q-item-section avatar class="head_1">
|
|
{{ $t("font color") }}
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-input
|
|
v-model="timer_entity.text_color"
|
|
:rules="['anyColor']"
|
|
>
|
|
<template v-slot:append>
|
|
<q-icon name="colorize" class="cursor-pointer">
|
|
<q-popup-proxy
|
|
cover
|
|
transition-show="scale"
|
|
transition-hide="scale"
|
|
>
|
|
<q-color v-model="timer_entity.text_color" />
|
|
</q-popup-proxy>
|
|
</q-icon>
|
|
</template>
|
|
</q-input>
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-item>
|
|
<q-item-section avatar class="head_1">
|
|
{{ $t("background color") }}
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-input
|
|
:disable="timer_entity.background_transparent"
|
|
v-model="timer_entity.background_color"
|
|
:rules="['anyColor']"
|
|
>
|
|
<template v-slot:append>
|
|
<q-icon name="colorize" class="cursor-pointer">
|
|
<q-popup-proxy
|
|
cover
|
|
transition-show="scale"
|
|
transition-hide="scale"
|
|
>
|
|
<q-color v-model="timer_entity.background_color" />
|
|
</q-popup-proxy>
|
|
</q-icon>
|
|
</template>
|
|
</q-input>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section avatar class="head_1">
|
|
{{ $t("text") }}
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-input v-model="timer_entity.text" />
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-checkbox
|
|
v-model="timer_entity.background_transparent"
|
|
left-label
|
|
:label="$t('background transparent')"
|
|
>
|
|
</q-checkbox>
|
|
</q-item-section>
|
|
|
|
<q-item-section>
|
|
<q-checkbox
|
|
left-label
|
|
v-model="timer_entity.multiple_lines"
|
|
:label="$t('multiple lines')"
|
|
>
|
|
</q-checkbox>
|
|
</q-item-section>
|
|
|
|
<q-item-section>
|
|
<q-checkbox
|
|
left-label
|
|
v-model="timer_entity.show_second"
|
|
:label="$t('second')"
|
|
>
|
|
</q-checkbox>
|
|
</q-item-section>
|
|
|
|
<q-item-section>
|
|
<q-checkbox
|
|
left-label
|
|
v-model="timer_entity.show_minute"
|
|
:label="$t('minute')"
|
|
>
|
|
</q-checkbox>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-checkbox
|
|
left-label
|
|
v-model="timer_entity.show_hour"
|
|
:label="$t('hour_2_')"
|
|
>
|
|
</q-checkbox>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-checkbox
|
|
left-label
|
|
v-model="timer_entity.show_day"
|
|
:label="$t('day')"
|
|
>
|
|
</q-checkbox>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-card-section>
|
|
|
|
<q-separator />
|
|
<q-card-actions>
|
|
<q-space />
|
|
<q-btn
|
|
:loading="loading"
|
|
flat
|
|
no-caps
|
|
:label="$t('close and reset')"
|
|
color="primary"
|
|
v-close-popup
|
|
/>
|
|
<q-btn
|
|
ref="accept"
|
|
flat
|
|
no-caps
|
|
:label="$t('close and save')"
|
|
:loading="loading"
|
|
type="submit"
|
|
color="primary"
|
|
/>
|
|
</q-card-actions>
|
|
</q-form>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.head_1 {
|
|
width: 25%;
|
|
}
|
|
|
|
.head_2 {
|
|
width: 12%;
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, ref, Ref, watch, computed } from "vue";
|
|
import { useStore } from "src/store";
|
|
import GlobalData from "src/common/GlobalData";
|
|
import { useQuasar, date as DateHelper } from "quasar";
|
|
import { useI18n } from "vue-i18n";
|
|
import TimerWidgetWindowParamEntity from "src/entities/TimerWidgetWindowParamEntity";
|
|
|
|
export default defineComponent({
|
|
name: "ComponentTimerSignalSourceDialog",
|
|
components: {},
|
|
|
|
setup() {
|
|
let $store = useStore();
|
|
let $q = useQuasar();
|
|
let $t = useI18n();
|
|
|
|
let show_dialog = ref(false);
|
|
let loading = ref(false);
|
|
|
|
const timer_date = ref("2022/01/01");
|
|
const timer_time = ref("00:00:00");
|
|
|
|
let timer_entity: Ref<TimerWidgetWindowParamEntity> = ref(
|
|
new TimerWidgetWindowParamEntity()
|
|
);
|
|
|
|
let _resolove: any = null;
|
|
|
|
const initialize_properties = (json: string) => {
|
|
if (json) {
|
|
try {
|
|
const temp = JSON.parse(json);
|
|
|
|
for (const item of Object.keys(timer_entity.value)) {
|
|
if (typeof temp[item] != "undefined") {
|
|
(<any>timer_entity.value)[item] = temp[item];
|
|
}
|
|
}
|
|
} catch {}
|
|
}
|
|
};
|
|
|
|
return {
|
|
show_dialog,
|
|
loading,
|
|
timer_entity,
|
|
timer_date,
|
|
timer_time,
|
|
|
|
showDialogAsync(options: any) {
|
|
if (_resolove) {
|
|
_resolove();
|
|
_resolove = null;
|
|
}
|
|
show_dialog.value = true;
|
|
initialize_properties(options);
|
|
|
|
return new Promise((resolove) => {
|
|
_resolove = resolove;
|
|
});
|
|
},
|
|
resetData() {
|
|
loading.value = false;
|
|
if (_resolove) {
|
|
_resolove();
|
|
_resolove = null;
|
|
}
|
|
},
|
|
async onSubmit() {
|
|
loading.value = true;
|
|
try {
|
|
if (_resolove) {
|
|
try {
|
|
timer_entity.value.font_size = parseInt(
|
|
timer_entity.value.font_size.toString()
|
|
);
|
|
timer_entity.value.relative_time_s = parseInt(
|
|
timer_entity.value.relative_time_s.toString()
|
|
);
|
|
_resolove(JSON.stringify(timer_entity.value));
|
|
} catch {
|
|
_resolove();
|
|
}
|
|
}
|
|
show_dialog.value = false;
|
|
} catch {}
|
|
loading.value = false;
|
|
},
|
|
};
|
|
},
|
|
});
|
|
</script>
|