380 lines
11 KiB
Vue
380 lines
11 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: 50vw">
|
|
<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") : type == 2 ? $t("edit") : $t("view")
|
|
}}{{ $t(" ") }}{{ $t("timing task") }}
|
|
</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: 50vh; width: 50vw" class="scroll">
|
|
<q-list>
|
|
<q-item>
|
|
<q-item-section avatar class="width_5_1">{{
|
|
$t("name") + ":"
|
|
}}</q-item-section>
|
|
<q-item-section>
|
|
<q-input
|
|
autofocus
|
|
:loading="loading"
|
|
:disable="loading"
|
|
filled
|
|
v-model="task_name"
|
|
:hint="$t('please input task name')"
|
|
lazy-rules
|
|
:rules="[
|
|
(val) =>
|
|
(val && val.length > 0) || $t('Please type something'),
|
|
]"
|
|
clearable
|
|
>
|
|
</q-input>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section avatar class="width_5_1"
|
|
>{{ $t("task type") }}:</q-item-section
|
|
>
|
|
<q-item-section>
|
|
<q-select
|
|
v-model="timing_type"
|
|
:loading="loading"
|
|
:disable="loading"
|
|
:options="timing_type_options"
|
|
emit-value
|
|
map-options
|
|
/>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section avatar class="width_5_1">{{
|
|
$t("time") + ":"
|
|
}}</q-item-section>
|
|
<q-item-section>
|
|
<q-input
|
|
filled
|
|
v-model="timing_time"
|
|
:loading="loading"
|
|
mask="fulltime"
|
|
:rules="['fulltime']"
|
|
>
|
|
<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="timing_time"
|
|
with-seconds
|
|
format24h
|
|
now-btn
|
|
>
|
|
<div class="row items-center justify-end">
|
|
<q-btn
|
|
v-close-popup
|
|
:label="$t('close')"
|
|
:disable="loading"
|
|
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="width_5_1">{{
|
|
$t("loop") + ":"
|
|
}}</q-item-section>
|
|
<q-item-section>
|
|
<div class="row">
|
|
<q-item-section>
|
|
<q-checkbox v-model="day1" :label="$t('monday')" />
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-checkbox v-model="day2" :label="$t('tuesday')" />
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-checkbox v-model="day3" :label="$t('wednesday')" />
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-checkbox v-model="day4" :label="$t('thursday')" />
|
|
</q-item-section>
|
|
</div>
|
|
<div class="row">
|
|
<q-item-section>
|
|
<q-checkbox v-model="day5" :label="$t('friday')" />
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-checkbox v-model="day6" :label="$t('saturday')" />
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-checkbox v-model="day7" :label="$t('sunday')" />
|
|
</q-item-section>
|
|
<q-item-section> </q-item-section>
|
|
</div>
|
|
</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')"
|
|
no-caps
|
|
color="primary"
|
|
v-close-popup
|
|
/>
|
|
<q-btn
|
|
ref="accept"
|
|
flat
|
|
:label="$t('Accept')"
|
|
no-caps
|
|
:loading="loading"
|
|
type="submit"
|
|
color="primary"
|
|
/>
|
|
</q-card-actions>
|
|
</q-form>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.width_5_1 {
|
|
width: 20%;
|
|
}
|
|
</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";
|
|
import { api } from "boot/axios";
|
|
import { HttpProtocol } from "src/entities/HttpProtocol";
|
|
import TimingTaskEntity from "src/entities/TimingTaskEntity";
|
|
import { EWeekDays } from "src/entities/EWeekDays";
|
|
|
|
export default defineComponent({
|
|
name: "ComponentTimingTaskDialog",
|
|
|
|
setup() {
|
|
let $store = useStore();
|
|
let $q = useQuasar();
|
|
let $t = useI18n();
|
|
|
|
let type = ref(0);
|
|
|
|
let show_dialog = ref(false);
|
|
let loading = ref(false);
|
|
|
|
const timing_type_options = ref([
|
|
{
|
|
label: $t.t("power on"),
|
|
|
|
value: 1,
|
|
},
|
|
{
|
|
label: $t.t("power off"),
|
|
|
|
value: 2,
|
|
},
|
|
]);
|
|
|
|
const task_name = ref($t.t("new task"));
|
|
const timing_type = ref(1);
|
|
const timing_time = ref("00:09:00");
|
|
|
|
let enabled = true;
|
|
let ext_data = "";
|
|
|
|
let day1 = ref(true);
|
|
let day2 = ref(true);
|
|
let day3 = ref(true);
|
|
let day4 = ref(true);
|
|
let day5 = ref(true);
|
|
let day6 = ref(true);
|
|
let day7 = ref(true);
|
|
|
|
let _resolve: any = null;
|
|
let _reject: any = null;
|
|
|
|
const clean_promise = () => {
|
|
try {
|
|
if (_resolve && typeof _resolve == "function") {
|
|
_resolve(null);
|
|
} else if (_reject && typeof _reject == "function") {
|
|
_reject(null);
|
|
}
|
|
_resolve = null;
|
|
_reject = null;
|
|
} catch {}
|
|
};
|
|
|
|
return {
|
|
show_dialog,
|
|
timing_type_options,
|
|
timing_type,
|
|
timing_time,
|
|
task_name,
|
|
day1,
|
|
day2,
|
|
day3,
|
|
day4,
|
|
day5,
|
|
day6,
|
|
day7,
|
|
type,
|
|
loading,
|
|
showDialog() {
|
|
throw "please use showDialogAsync function";
|
|
},
|
|
showDialogAsync(_type: number, options: TimingTaskEntity) {
|
|
return new Promise((resolve, reject) => {
|
|
clean_promise();
|
|
|
|
type.value = _type ?? 1;
|
|
if (options) {
|
|
timing_type.value = options.task_type;
|
|
timing_time.value = options.timing_time;
|
|
task_name.value = options.task_name;
|
|
day1.value =
|
|
(options.timing_week_days & EWeekDays.EWeekMonday) == 0
|
|
? false
|
|
: true;
|
|
day2.value =
|
|
(options.timing_week_days & EWeekDays.EWeekTuesday) == 0
|
|
? false
|
|
: true;
|
|
day3.value =
|
|
(options.timing_week_days & EWeekDays.EWeekWednesday) == 0
|
|
? false
|
|
: true;
|
|
day4.value =
|
|
(options.timing_week_days & EWeekDays.EWeekThursday) == 0
|
|
? false
|
|
: true;
|
|
day5.value =
|
|
(options.timing_week_days & EWeekDays.EWeekFriday) == 0
|
|
? false
|
|
: true;
|
|
day6.value =
|
|
(options.timing_week_days & EWeekDays.EWeekSaturday) == 0
|
|
? false
|
|
: true;
|
|
day7.value =
|
|
(options.timing_week_days & EWeekDays.EWeekSunday) == 0
|
|
? false
|
|
: true;
|
|
}
|
|
|
|
_resolve = resolve;
|
|
_reject = reject;
|
|
|
|
show_dialog.value = true;
|
|
});
|
|
},
|
|
resetData() {
|
|
loading.value = false;
|
|
timing_type.value = 1;
|
|
timing_time.value = "00:09:00";
|
|
task_name.value = $t.t("new task");
|
|
day1.value = true;
|
|
day2.value = true;
|
|
day3.value = true;
|
|
day4.value = true;
|
|
day5.value = true;
|
|
day6.value = true;
|
|
day7.value = true;
|
|
|
|
enabled = true;
|
|
ext_data = "";
|
|
|
|
if (_reject) {
|
|
try {
|
|
_reject(null);
|
|
} catch {}
|
|
}
|
|
_resolve = null;
|
|
_reject = null;
|
|
},
|
|
async onSubmit() {
|
|
loading.value = true;
|
|
|
|
const data = new TimingTaskEntity();
|
|
data.enabled = enabled;
|
|
data.timing_time = timing_time.value;
|
|
data.timing_week_days = 0;
|
|
data.task_name = task_name.value;
|
|
if (day1.value) data.timing_week_days |= EWeekDays.EWeekMonday;
|
|
if (day2.value) data.timing_week_days |= EWeekDays.EWeekTuesday;
|
|
if (day3.value) data.timing_week_days |= EWeekDays.EWeekWednesday;
|
|
if (day4.value) data.timing_week_days |= EWeekDays.EWeekThursday;
|
|
if (day5.value) data.timing_week_days |= EWeekDays.EWeekFriday;
|
|
if (day6.value) data.timing_week_days |= EWeekDays.EWeekSaturday;
|
|
if (day7.value) data.timing_week_days |= EWeekDays.EWeekSunday;
|
|
|
|
data.task_type = timing_type.value;
|
|
data.ext_data = ext_data;
|
|
|
|
if (_resolve) {
|
|
try {
|
|
_resolve(data);
|
|
} catch {}
|
|
}
|
|
_resolve = null;
|
|
_reject = null;
|
|
loading.value = false;
|
|
show_dialog.value = false;
|
|
|
|
loading.value = false;
|
|
},
|
|
};
|
|
},
|
|
});
|
|
</script>
|