jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Initial move from angular shell to vue

Browse Source
This commit is contained in:
Johannes Zellner
2025-03-16 11:12:49 +01:00
parent 5fd4e2f008
commit 3a32aab066
18 changed files with 387 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
dashboard/src/Index.vue
View File

@@ -2,6 +2,11 @@
import { onMounted, ref } from 'vue';
import { Notification } from 'pankow';
import { API_ORIGIN } from './constants.js';
import ProfileModel from './models/ProfileModel.js';
import DashboardModel from './models/DashboardModel.js';
import Sidebar from './components/Sidebar.vue';
import Headerbar from './components/Headerbar.vue';
import AppsView from './views/AppsView.vue';
import AppConfigureView from './views/AppConfigureView.vue';
import AppstoreView from './views/AppstoreView.vue';
@@ -48,7 +53,15 @@ const VIEWS = {
VOLUMES: 'volumes',
};
const dashboardModel = DashboardModel.create();
const profileModel = ProfileModel.create();
const view = ref('');
const profile = ref({});
const subscription = ref({
plan: {},
});
const config = ref({});
function onHashChange() {
const v = location.hash.slice(2);
@@ -96,11 +109,8 @@ function onHashChange() {
} else if (v === VIEWS.VOLUMES) {
view.value = VIEWS.VOLUMES;
} else {
view.value = '';
window.location.hash = '/' + VIEWS.APPS;
}
// hack for layout to avoid consuming space if vue view is not active
document.getElementById('app').style.height = view.value ? 'auto' : '0';
}
onMounted(async () => {
@@ -111,34 +121,58 @@ onMounted(async () => {
window.addEventListener('hashchange', onHashChange);
onHashChange();
let [error, result] = await profileModel.get();
if (error) return console.error(error);
profile.value = result;
[error, result] = await dashboardModel.config();
if (error) return console.error(error);
config.value = result;
// TODO need to be reactive when name or icon changes
window.document.title = result.cloudronName;
document.getElementById('favicon').href = `${API_ORIGIN}/api/v1/cloudron/avatar?ts=${Date.now()}`;
});
</script>
<template>
<div>
<div style="overflow: hidden; height: 100%;">
<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" />
<EmailView v-else-if="view === VIEWS.EMAIL" />
<EmailDomainView v-else-if="view === VIEWS.EMAIL_DOMAIN" />
<EmailsEventlogView v-else-if="view === VIEWS.EMAILS_EVENTLOG" />
<EventlogView v-else-if="view === VIEWS.EVENTLOG" />
<MailboxesView v-else-if="view === VIEWS.EMAILS_MAILBOXES" />
<MailinglistsView v-else-if="view === VIEWS.EMAILS_MAILINGLISTS" />
<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 style="display: flex; flex-direction: row; overflow: hidden; height: 100%;">
<Sidebar :profile="profile" :config="config"/>
<div style="flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; height: 100%;">
<Headerbar :subscription="subscription" :profile="profile"/>
<div style="overflow: auto; flex-grow: 1;">
<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" />
<EmailView v-else-if="view === VIEWS.EMAIL" />
<EmailDomainView v-else-if="view === VIEWS.EMAIL_DOMAIN" />
<EmailsEventlogView v-else-if="view === VIEWS.EMAILS_EVENTLOG" />
<EventlogView v-else-if="view === VIEWS.EVENTLOG" />
<MailboxesView v-else-if="view === VIEWS.EMAILS_MAILBOXES" />
<MailinglistsView v-else-if="view === VIEWS.EMAILS_MAILINGLISTS" />
<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>
</div>
</div>
</div>
</template>