Line data    Source code

       1             : // @ts-check
       2             : 
       3             : import { TITLE, VERSION } from './Consts';
       4             : import Vue from 'vue';
       5             : import { forEach, get, isArray, isEmpty, isNil, pullAllBy } from 'lodash';
       6             : import { mapState } from 'vuex';
       7             : 
       8             : import { install } from "./utilities";
       9             : 
      10           1 : install(Vue);
      11             : /**
      12             :  * @typedef {V.Instance<typeof component>} Instance
      13             :  */
      14           1 : const component = Vue.extend({
      15             :   name: 'App',
      16           5 :   data() { return { TITLE, VERSION, showRoutes: false }; },
      17             :   computed: {
      18             :     .../** @type { page(): string|null } */mapState([ "page" ]),
      19             :     .../** @type {{ camConfig(): object }} */mapState(
      20             :       "cameras", { camConfig: "cameras" })
      21             :   },
      22             :   /** @this {Instance} */
      23             :   mounted() {
      24             :     // sets dark theme
      25             :     /** @type {string} */
      26           5 :     const theme = get(this.$route.query, 'theme');
      27           5 :     if (!isNil(theme)) {
      28           0 :       this.$store.commit('ui/update', { darkMode: theme === 'dark' });
      29           0 :       this.$store.dispatch('ui/applyTheme');
      30             :     }
      31             : 
      32             :     // retrieve camera configuration
      33           5 :     this.$store.commit('update', { loading: true });
      34           5 :     this.$store.sources.cam.connect()
      35             :     .then(() => {
      36             :       // update routes
      37           5 :       if (this.$router && !isEmpty(this.camConfig)) {
      38             :         /** @type {{ name: string, path: string }[]} */
      39           5 :         const pages = [];
      40           5 :         forEach(this.camConfig, (cams, page) => {
      41          10 :           if (!isEmpty(cams)) {
      42          10 :             pages.push({ name: page, path: `/${page}` });
      43             :           }
      44             :         });
      45             : 
      46           5 :         if (!isEmpty(pages) &&
      47             :           isArray(get(this.$router, [ 'options', 'routes' ]))) {
      48             :           // remove any duplicate
      49           5 :           pullAllBy(this.$router.options.routes, pages, 'name');
      50             : 
      51           5 :           this.$router.options.routes.push(...pages);
      52             : 
      53             :           // navigate to the first page
      54           5 :           if (this.$router.currentRoute?.path === '/') {
      55           1 :             this.$router.push(pages[0]?.path || '/');
      56             :           }
      57             : 
      58           5 :           this.showRoutes = true;
      59             :         }
      60             :       }
      61             :     })
      62             :     .finally(() => {
      63           5 :       this.$store.commit('update', { loading: false });
      64             :     });
      65             :   }
      66             : });
      67             : 
      68             : export default component;