cloudron-box/dashboard/src/Index.vue

<script setup>

import { onMounted, ref } from 'vue';
import { Notification } from 'pankow';
import AppsView from './views/AppsView.vue';
import AppConfigureView from './views/AppConfigureView.vue';
import AppstoreView from './views/AppstoreView.vue';
import BackupsView from './views/BackupsView.vue';
import BrandingView from './views/BrandingView.vue';
import DomainsView from './views/DomainsView.vue';
import EventlogView from './views/EventlogView.vue';
import NetworkView from './views/NetworkView.vue';
import ProfileView from './views/ProfileView.vue';
import ServicesView from './views/ServicesView.vue';
import SettingsView from './views/SettingsView.vue';
import SupportView from './views/SupportView.vue';
import SystemView from './views/SystemView.vue';
import UserDirectoryView from './views/UserDirectoryView.vue';
import UsersView from './views/UsersView.vue';
import VolumesView from './views/VolumesView.vue';

const VIEWS = {
  APPS: 'apps',
  APP: 'app',
  APPSTORE: 'appstore',
  BACKUPS: 'backups',
  BRANDING: 'branding',
  DOMAINS: 'domains',
  EVENTLOG: 'eventlog',
  NETWORK: 'network',
  PROFILE: 'profile',
  SERVICES: 'services',
  SETTINGS: 'settings',
  SUPPORT: 'support',
  SYSTEM: 'system',
  USER_DIRECTORY: 'user-directory',
  USERS: 'users',
  VOLUMES: 'volumes',
};

const view = ref('');

function onHashChange() {
  const v = location.hash.slice(2);

  if (v === VIEWS.APPS) {
    view.value = VIEWS.APPS;
  } else if (v.indexOf(VIEWS.APPSTORE) === 0) {
    view.value = VIEWS.APPSTORE;
  } else if (v.indexOf(VIEWS.APP) === 0) {
    view.value = VIEWS.APP;
  } else if (v === VIEWS.BACKUPS) {
    view.value = VIEWS.BACKUPS;
  } else if (v === VIEWS.BRANDING) {
    view.value = VIEWS.BRANDING;
  } else if (v === VIEWS.DOMAINS) {
    view.value = VIEWS.DOMAINS;
  } else if (v === VIEWS.EVENTLOG) {
    view.value = VIEWS.EVENTLOG;
  } else if (v === VIEWS.NETWORK) {
    view.value = VIEWS.NETWORK;
  } else if (v === VIEWS.PROFILE) {
    view.value = VIEWS.PROFILE;
  } else if (v === VIEWS.SERVICES) {
    view.value = VIEWS.SERVICES;
  } else if (v === VIEWS.SETTINGS) {
    view.value = VIEWS.SETTINGS;
  } else if (v === VIEWS.SUPPORT) {
    view.value = VIEWS.SUPPORT;
  } else if (v === VIEWS.SYSTEM) {
    view.value = VIEWS.SYSTEM;
  } else if (v === VIEWS.USER_DIRECTORY) {
    view.value = VIEWS.USER_DIRECTORY;
  } else if (v === VIEWS.USERS) {
    view.value = VIEWS.USERS;
  } else if (v === VIEWS.VOLUMES) {
    view.value = VIEWS.VOLUMES;
  } else {
    view.value = '';
  }

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

onMounted(async () => {
  if (!localStorage.token) {
    console.error('Set localStorage.token');
    return;
  }

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

</script>

<template>
  <div>
    <Notification />

    <AppsView v-if="view === VIEWS.APPS" />
    <AppConfigureView v-if="view === VIEWS.APP" />
    <AppstoreView v-else-if="view === VIEWS.APPSTORE" />
    <BackupsView v-else-if="view === VIEWS.BACKUPS" />
    <BrandingView v-else-if="view === VIEWS.BRANDING" />
    <DomainsView v-else-if="view === VIEWS.DOMAINS" />
    <EventlogView v-else-if="view === VIEWS.EVENTLOG" />
    <NetworkView v-else-if="view === VIEWS.NETWORK" />
    <ProfileView v-else-if="view === VIEWS.PROFILE" />
    <ServicesView v-else-if="view === VIEWS.SERVICES" />
    <SettingsView v-else-if="view === VIEWS.SETTINGS" />
    <SupportView v-else-if="view === VIEWS.SUPPORT" />
    <SystemView v-else-if="view === VIEWS.SYSTEM" />
    <UserDirectoryView v-else-if="view === VIEWS.USER_DIRECTORY" />
    <UsersView v-else-if="view === VIEWS.USERS" />
    <VolumesView v-else-if="view === VIEWS.VOLUMES" />
  </div>
</template>