media_player_client/src/components/ClockSignalSourceDialog.vue

<template>
  <q-dialog persistent v-model="show_dialog" @before-hide="resetData">
    <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("clock") }}
            </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: 55vw; height: 50vh"
          class="scroll"
        >
          <q-list>
            <q-item v-if="false">
              <q-item-section avatar class="head_1">
                {{ $t("font name") }}
              </q-item-section>
              <q-item-section>
                <q-input v-model="clock_entity.font_name" />
              </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="clock_entity.font_size" type="number" />
              </q-item-section>
              <q-item-section avatar>
                <q-checkbox
                  v-model="clock_entity.bold"
                  left-label
                  :label="$t('font bold')"
                />
              </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="clock_entity.font_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="clock_entity.font_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
                  v-model="clock_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="clock_entity.background_color" />
                      </q-popup-proxy>
                    </q-icon>
                  </template>
                </q-input>
              </q-item-section>
              <q-item-section avatar>
                <q-checkbox
                  v-model="clock_entity.background_transparent"
                  left-label
                  :label="$t('background transparent')"
                />
              </q-item-section>
            </q-item>
          </q-list>
        </q-card-section>

        <q-separator />
        <q-card-actions>
          <q-space />
          <q-btn
            :loading="loading"
            flat
            :label="$t('close and reset')"
            color="primary"
            v-close-popup
          />
          <q-btn
            ref="accept"
            flat
            :label="$t('close and save')"
            :loading="loading"
            type="submit"
            color="primary"
          />
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
  <file-manage-dialog ref="file_manage_dialog" />
</template>

<style scoped>
.head_1 {
  width: 15%;
}
</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 } from "quasar";
import { useI18n } from "vue-i18n";
import ClockWindowParamEntity from "src/entities/ClockWindowParamEntity";

export default defineComponent({
  name: "ComponentClockSignalSourceDialog",
  components: {},

  setup() {
    let $store = useStore();
    let $q = useQuasar();
    let $t = useI18n();

    let show_dialog = ref(false);
    let loading = ref(false);

    let clock_entity: Ref<ClockWindowParamEntity> = ref(
      new ClockWindowParamEntity()
    );

    let _resolove: any = null;

    const initialize_properties = (json: string) => {
      if (json) {
        try {
          const temp = JSON.parse(json);
          clock_entity.value = temp;
        } catch {}
      }
    };

    return {
      show_dialog,
      loading,
      clock_entity,
      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 {
              clock_entity.value.font_size = parseInt(
                clock_entity.value.font_size.toString()
              );
              _resolove(JSON.stringify(clock_entity.value));
            } catch {
              _resolove();
            }
          }
          show_dialog.value = false;
        } catch {}
        loading.value = false;
      },
    };
  },
});
</script>