media_player_client/src/components/FusionSettings/GridSettings.vue

<template>
  <div class="row">
    <div class="col-12">
      <div class="row">
        <div class="col-12">
          <div class="row">
            <div class="col-4"></div>
            <div class="col-4 q-pt-sm"><q-select outlined v-model="model[0]"
                @update:model-value="update_row_col(0, model[0])" :options="options" :dense="true" :options-dense="true"
                :label="$t('wall row')" /> </div><q-checkbox @update:model-value="send_off(0)"
              v-model="RowsColumns[0]" />
          </div>
        </div>
        <div class="col-12">
          <div class="row">
            <div class="col-4"></div>
            <div class="col-4 q-pt-sm"><q-select outlined v-model="model[1]"
                @update:model-value="update_row_col(1, model[1])" :options="options" :dense="true" :options-dense="true"
                :label="$t('wall col')" /> </div><q-checkbox @update:model-value="send_off(1)"
              v-model="RowsColumns[1]" />
          </div>
        </div>
        <div class="col-12">
          <div class="row" style="min-height: 40px;">
            <div class="col-4"></div>
            <div class="col-4 q-pt-sm">
              <div class="row">
                <div class="col-4"><span>{{ $t('line color') }}</span></div>
                <div class="col-8 border" @click="isshowhex = true; index = 0" :style="{ 'background-color': color[0] }"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12">
          <div class="row" style="min-height: 40px;">
            <div class="col-4"></div>
            <div class="col-4 q-pt-sm">
              <div class="row">
                <div class="col-4"><span>{{ $t('background color') }}</span></div>
                <div class="col-8 border" @click="isshowhex = true; index = 1" :style="{ 'background-color': color[1] }"></div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="col-12">
          <div class="row" style="min-height: 40px;">
            <div class="col-4"></div>
            <div class="col-4 q-pt-sm">
              <div class="row">
                <div class="col-4"><span>{{ $t('center line color') }}</span></div>
                <div class="col-8 border" @click="isshowhex = true; index = 2" :style="{ 'background-color': color[2] }"></div>
              </div>
            </div>
            <div><q-checkbox v-model="RowsColumns[2]" @update:model-value="send_off(2)" /></div>
          </div>
        </div> -->
        <!-- <div class="col-12">
          <div class="row" style="min-height: 40px;">
            <div class="col-4"></div>
            <div class="col-4 q-pt-sm">
              <div class="row">
                <div class="col-4"><span>{{ $t('center circle color') }}</span></div>
                <div class="col-8 border" @click="isshowhex = true; index = 3" :style="{ 'background-color': color[3] }"></div>
              </div>
            </div>
            <div><q-checkbox v-model="RowsColumns[3]" @update:model-value="send_off(3)" /></div>
          </div>
        </div> -->
      </div>
    </div>
    <div v-if="isshowhex" style="margin: 0 auto;text-align: center;"><q-color no-header-tabs no-footer
        v-model="color[index]" class="my-picker" /> <q-btn style="margin-top: 0.5rem;" color="white" @click="submit"
        class=" q-pt-sm" text-color="black" :label="$t('submit')" /></div>
  </div>
</template>

<style scoped>
.border{
  border: 1px solid;
}
</style>

<script lang="ts">
import vue3ResizeDrag from "/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue";
import { defineComponent, ref, reactive } from "vue";
import { useStore } from "src/store";
import { useI18n } from "vue-i18n";
import GlobalData from "src/common/GlobalData";

export default defineComponent({
  name: "ComponentGridSettings",
  components: {
    vue3ResizeDrag
  },
  setup() {
    let set = GlobalData.getInstance().getCurrentClient();
    let $store = useStore();
    let $t = useI18n();
    const RowsColumns = reactive([false, false, false, false]);
    const hex = ref("")
    const isshowhex = ref(false);
    const index = ref(0);
    const color = reactive(["#ffffff", "#CCCCCC", "#000", "#000"]);
    let model = reactive([20, 40]);
    let options = ref([10, 20, 30, 40, 50]);
    const submit = () => {
      isshowhex.value = false
      switch (index.value) {
        case 0:
          set?.SetBlendingOption("blending_grids_line_color", color[index.value]);
          break;
        case 1:
          set?.SetBlendingOption("blending_grids_background_color", color[index.value]);
          break;
        case 2:
          //set?.SetBlendingOption("blending_grids_line_color",color[index.value]);
          break;
        case 3:
          //set?.SetBlendingOption("blending_grids_line_color",color[index.value]);
          break;
        default:
          break;
      }
    }
    const update_row_col = (type: number, value: number) => {
      switch (type) {
        case 0:
          set?.SetBlendingOption("blending_grids_row", value + "");
          break;
        case 1:
          set?.SetBlendingOption("blending_grids_column", value + "");
          break;
        default:
          break;
      }
    }
    const send_off = (type: number) => {
      setTimeout(() => {
        switch (type) {
          case 0:
            set?.SetBlendingOption("blending_grids_hide_row", RowsColumns[type] + "");
            break;
          case 1:
            if (!RowsColumns[1]) RowsColumns[2] = false; RowsColumns[3] = false
            set?.SetBlendingOption("blending_grids_hide_column", RowsColumns[type] + "");
            break;
          case 2:

            break;
          case 3:

            break;
          default:
            break;
        }
      }, 100);
    }
    const use_server_config =()=>{
      let server_conf=JSON.parse($store.state.fusion_configuration).options
      model[0]=Number(server_conf.blending_grids_row)
      model[1]=Number(server_conf.blending_grids_column)
      color[0]=server_conf.blending_grids_line_color
      RowsColumns[0]=server_conf.blending_grids_hide_row==="false"?false:true
      RowsColumns[1]=server_conf.blending_grids_hide_column==="false"?false:true

    }
    use_server_config()
    return {
      model,
      options,
      hex,
      submit,
      RowsColumns,
      isshowhex,
      index,
      color,
      update_row_col,
      send_off
    };
  },
});
</script>