120 lines
3.7 KiB
Vue
120 lines
3.7 KiB
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>
|