media_player_client/src/components/SpecialVideoGridSettingDialog.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: 35vw">
      <q-form @submit="onSubmit">
        <q-card-section class="q-ma-none q-pa-sm">
          <div class="row">
            <div class="col-auto text-h6">
              {{ $t("grid setting") }}
            </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: 35vw" class="scroll">
          <q-list>
            <q-item>
              <q-item-section>
                <q-select
                  :label="$t('wall row')"
                  :options="[1, 2, 3, 4, 5, 6, 7, 8, 9]"
                  v-model="wall_row"
                  :error="has_error"
                  :error-message="error_message"
                >
                </q-select>
              </q-item-section>
            </q-item>
            <q-item>
              <q-item-section>
                <q-select
                  :label="$t('wall col')"
                  :options="[1, 2, 3, 4, 5, 6, 7, 8, 9]"
                  v-model="wall_col"
                  :error="has_error"
                  :error-message="error_message"
                >
                </q-select>
              </q-item-section>
            </q-item>
            <q-item>
              <q-item-section>
                <q-select
                  :label="$t('rotation')"
                  :options="rotation_options"
                  v-model="rotation"
                >
                </q-select>
              </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></style>

<script lang="ts">
import { defineComponent, ref, watch, computed } from "vue";
import { useStore } from "src/store";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
import GlobalData from "src/common/GlobalData";

export default defineComponent({
  name: "ComponentSpecialVideoGridSettingDialog",

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

    let show_dialog = ref(false);
    let loading = ref(false);
    const wall_row = ref(1);
    const wall_col = ref(4);
    const has_error = ref(false);
    const error_message = ref("");

    const rotation_options = ref(["0", "90", "180", "270"]);
    const rotation = ref("0");

    rotation.value =
      GlobalData.getInstance()?.applicationConfig
        ?.special_video_layout_rotation ?? "0";

    const check_wall_col_row = (
      col: number,
      row: number,
      show_tooltip: boolean = true
    ) => {
      if (col * row > 9) {
        if (show_tooltip) {
          const message =
            $t.t("row multiply column should be less than or equal to ") +
            9 +
            "!";

          $q.notify({
            type: "warning",
            message: message,
            position: "top",
            timeout: 2000,
          });
          has_error.value = true;
          error_message.value = message;
        }
        return false;
      }
      return true;
    };

    watch(
      () => wall_row.value,
      (nv, ov) => {
        if (check_wall_col_row(wall_col.value, nv, false)) {
          if (has_error.value) {
            has_error.value = false;
          }
        }
      }
    );

    watch(
      () => wall_col.value,
      (nv, ov) => {
        if (check_wall_col_row(nv, wall_row.value, false)) {
          if (has_error.value) {
            has_error.value = false;
          }
        }
      }
    );

    return {
      show_dialog,
      loading,
      wall_row,
      wall_col,
      rotation_options,
      rotation,
      has_error,
      error_message,

      showDialog() {
        show_dialog.value = true;

        wall_col.value = parseInt(
          (GlobalData.getInstance().applicationConfig?.wall_col ?? 1).toString()
        );
        if (isNaN(wall_col.value)) {
          wall_col.value = 1;
        }

        wall_row.value = parseInt(
          (GlobalData.getInstance().applicationConfig?.wall_row ?? 4).toString()
        );
        if (isNaN(wall_row.value)) {
          wall_row.value = 4;
        }

        rotation.value =
          GlobalData.getInstance()?.applicationConfig
            ?.special_video_layout_rotation ?? "0";
      },
      resetData() {
        loading.value = false;
      },

      async onSubmit() {
        loading.value = true;
        try {
          if (check_wall_col_row(wall_col.value, wall_row.value)) {
            GlobalData.getInstance()
              .getCurrentClient()
              ?.setWallRowCol(wall_row.value, wall_col.value);
            switch (rotation.value) {
              case "0":
              case "90":
              case "180":
              case "270":
                GlobalData.getInstance()
                  .getCurrentClient()
                  ?.setSpecialVideoLayoutRotation(rotation.value ?? "0");
                break;
              default:
                GlobalData.getInstance()
                  .getCurrentClient()
                  ?.setSpecialVideoLayoutRotation("0");
                break;
            }

            show_dialog.value = false;
          }
        } catch {}
        loading.value = false;
      },
    };
  },
});
</script>