media_player_client/src/store/index.ts

import { store } from "quasar/wrappers";
import MultimediaWindowEntity from "src/entities/MultimediaWindowEntity";
import { SignalSourceTreeItemEntity } from "src/entities/SignalSourceEntity";
import { InjectionKey, reactive } from "vue";
import { useI18n } from "vue-i18n";
import {
  createStore,
  Store as VuexStore,
  useStore as vuexUseStore,
} from "vuex";

// import example from './module-example'
// import { ExampleStateInterface } from './module-example/state';

/*
 * If not building with SSR mode, you can
 * directly export the Store instantiation;
 *
 * The function below can be async too; either use
 * async/await or return a Promise which resolves
 * with the Store instance.
 */

export interface StateInterface {
  // Define your own store structure, using submodules if needed
  // example: ExampleStateInterface;
  // Declared as unknown to avoid linting issue. Best to strongly type as per the line above.
  example: unknown;
  signal_source_tree: SignalSourceTreeItemEntity[];
  wall_row: number;
  wall_col: number;
  device_screen_width: number;
  device_screen_height: number;
  windows: MultimediaWindowEntity[];
}

// provide typings for `this.$store`
declare module "@vue/runtime-core" {
  interface ComponentCustomProperties {
    $store: VuexStore<StateInterface>;
  }
}

// provide typings for `useStore` helper
export const storeKey: InjectionKey<VuexStore<StateInterface>> =
  Symbol("vuex-key");

export default store(function (/* { ssrContext } */) {
  const Store = createStore<StateInterface>({
    modules: {
      // example
    },
    state: {
      // state
      example: "",
      signal_source_tree: [],
      wall_col: 1,
      wall_row: 1,
      device_screen_width: 1920,
      device_screen_height: 1080,
      windows: [],
    },

    mutations: {
      clearWindows(state: StateInterface, playload?: any) {
        state.windows = [];
      },
      pushWindow(state: StateInterface, playload?: any) {
        const window = playload as MultimediaWindowEntity;
        if (window) {
          state.windows.push(window);
        }
      },
      removeWindow(state: StateInterface, playload?: any) {
        const uuid = playload.uuid;
        if (uuid) {
          let index = state.windows.findIndex(
            (item) => item && item.uuid == uuid
          );
          if (index >= 0) {
            state.windows.splice(index, 1);
          }
        } else {
          console.log("uuid???");
        }
      },
      editWindow(state: StateInterface, playload?: any) {
        const uuid = playload.uuid;
        const new_window = playload.new_window as MultimediaWindowEntity;
        if (uuid && new_window) {
          let index = state.windows.findIndex(
            (item) => item && item.uuid == uuid
          );
          if (index >= 0) {
            state.windows[index] = new_window;
          }
        }
      },
      setWallCol(state: StateInterface, playload?: any) {
        const num = parseInt(playload);
        if (num != NaN && num > 0) {
          state.wall_col = num;
        }
      },
      setWallRow(state: StateInterface, playload?: any) {
        const num = parseInt(playload);
        if (num != NaN && num > 0) {
          state.wall_row = num;
        }
      },
      setDeviceScreenWidth(state: StateInterface, playload?: any) {
        const num = parseInt(playload);
        if (num != NaN && num > 0) {
          state.device_screen_width = num;
        }
      },
      setDeviceScreenHeight(state: StateInterface, playload?: any) {
        const num = parseInt(playload);
        if (num != NaN && num > 0) {
          state.device_screen_height = num;
        }
      },
      setSignalSourceTree(state: StateInterface, playload?: any) {
        const item = playload as SignalSourceTreeItemEntity[];
        if (item) {
          state.signal_source_tree = item;
        }
      },
      clearSignalSourceTree(state: StateInterface, playload?: any) {
        // if (state.signal_source_tree) {
        //   state.signal_source_tree.splice(0, state.signal_source_tree.length);
        // }
        state.signal_source_tree = [];
      },
      pushSignalSourceTreeItem(state: StateInterface, playload?: any) {
        let item = playload as SignalSourceTreeItemEntity;
        if (item) {
          state.signal_source_tree.push(item);
        }
      },
      buildSignalSourceTree(state: StateInterface, playload?: any) {
        const buildGroup = (
          parent: SignalSourceTreeItemEntity,
          group_array: any[],
          item_array: any[]
        ) => {
          if (parent) {
            for (let item of findGroupsByParent(parent.uuid, group_array)) {
              const node_item = new SignalSourceTreeItemEntity(
                item.uuid,
                parent.uuid,
                item.name,
                true
              );
              parent.children.push(node_item);
              buildGroup(node_item, group_array, item_array);
            }

            for (let item of findItemsByParent(parent.uuid, item_array)) {
              const node_item = new SignalSourceTreeItemEntity(
                item.uuid,
                parent.uuid,
                item.name,
                false,
                item
              );
              parent.children.push(node_item);
            }
          }
        };

        const findGroupsByParent = (parent: string, array: any[]) => {
          return array.filter((item) => {
            return item && item.parent_uuid == parent;
          });
        };

        const findItemsByParent = (parent: string, array: any[]) => {
          return array.filter((item) => {
            return item && item.group_uuid == parent;
          });
        };

        if (
          playload &&
          playload.response &&
          playload.options &&
          playload.options.$t
        ) {
          const $t = playload.options.$t;
          const signal_source_groups =
            playload.response.signal_source_groups ?? [];
          const signal_sources = playload.response.signal_sources ?? [];

          const root = new SignalSourceTreeItemEntity(
            "",
            "",
            $t.t("root"),
            true
          );

          state.signal_source_tree.splice(0, state.signal_source_tree.length);
          state.signal_source_tree.push(root);

          buildGroup(root, signal_source_groups, signal_sources);
        } else {
          console.error(playload);
        }
      },
    },

    // enable strict mode (adds overhead!)
    // for dev mode and --debug builds only
    strict: !!process.env.DEBUGGING,
  });

  return Store;
});

export function useStore() {
  return vuexUseStore(storeKey);
}