cloudron-box/dashboard/src/components/Index.vue

<template>
  <div>
    <Notification />
    <SupportView v-if="view === VIEWS.SUPPORT" />
    <VolumesView v-if="view === VIEWS.VOLUMES" />
  </div>
</template>

<script>

import { Notification } from 'pankow';

import SupportView from './SupportView.vue';
import VolumesView from './VolumesView.vue';

const VIEWS = {
  SUPPORT: 'support',
  VOLUMES: 'volumes',
};

export default {
  name: 'Index',
  components: {
    Notification,
    SupportView,
    VolumesView,
  },
  data() {
    return {
      VIEWS,
      accessToken: localStorage.token,
      view: ''
    };
  },
  methods: {
  },
  async mounted() {
    if (!localStorage.token) {
      console.error('Set localStorage.token');
      return;
    }

    const that = this;
    function onHashChange() {
      const view = location.hash.slice(2);

      if (view === VIEWS.SUPPORT) {
        that.view = VIEWS.SUPPORT;
      } else if (view === VIEWS.VOLUMES) {
        that.view = VIEWS.VOLUMES;
      } else {
        that.view = '';
      }

      // hack for layout to avoid consuming space if vue view is not active
      document.getElementById('app').style.height = that.view ? 'auto' : '0';
    }

    window.addEventListener('hashchange', onHashChange);
    onHashChange();
  }
};

</script>

<style>

</style>