media_player_client/src/components/TimingTaskDialog.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("timing task") }}
            </div>
            <q-space />
            <div>
              <q-btn
                :loading="loading"
                flat
                round
                icon="close"
                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')"
                              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>