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

Show app configure menu items only when applicable

Browse Source
This commit is contained in:
Johannes Zellner
2025-02-25 15:21:32 +01:00
parent 9f8bde7078
commit 62b648c70f
2 changed files with 49 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
dashboard/src/views/AppConfigureView.vue
View File

@@ -27,6 +27,8 @@ const view = ref('');
const link = ref('');
const infoMenu = ref([]);
const hasLocalStorage = ref(false);
const hasOptionalServices = ref(false);
const hasEmail = ref(false);
const isAppStopped = computed(() => {
return appsModel.isStopped(app.value);
@@ -56,6 +58,8 @@ async function refresh() {
link.value = (result.installationState !== ISTATES.INSTALLED || result.health !== HSTATES.HEALTHY || result.runState === RSTATES.STOPPED) ? '' : result.fqdn;
hasLocalStorage.value = result.manifest && result.manifest.addons && result.manifest.addons.localstorage;
hasOptionalServices.value = result.manifest && result.manifest.addons && (result.manifest.addons.turn?.optional || result.manifest.addons.redis?.optional);
hasEmail.value = result.manifest && result.manifest.addons && (result.manifest.addons.sendmail || result.manifest.addons.recvmail);
// TODO info menu will likely not change during polling
infoMenu.value = [];
@@ -130,15 +134,15 @@ onBeforeUnmount(() => {
<div class="configure-outer">
<div class="configure-inner">
<div class="titlebar">
<a class="applink" :href="link || null" target="_blank">
<div style="display: flex; flex-grow: 1;">
<img :src="API_ORIGIN + app.iconUrl" v-fallback-image="API_ORIGIN + '/img/appicon_fallback.png'" style="height: 64px; width: 64px; margin-right: 10px;"/>
<h2>
{{ app.label || app.fqdn }}<br/>
<div class="statelable">
<a class="applink" :href="link || null" target="_blank">{{ app.label || app.fqdn }}</a>
<div class="statelabel">
{{ installationStateLabel(app) }} {{ app.message ? ' - ' + app.message : '' }}
</div>
</h2>
</a>
</div>
<div style="display: flex; gap: 10px; align-items: center;">
<Button secondary tool
@@ -162,21 +166,21 @@ onBeforeUnmount(() => {
<div class="configure-menu">
<div class="configure-menu-item" @click="onSetView('info')" :active="view === 'info' ? true : null">{{ $t('app.infoTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('display')" :active="view === 'display' ? true : null">{{ $t('app.displayTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('location')" :active="view === 'location' ? true : null">{{ $t('app.locationTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('proxy')" :active="view === 'proxy' ? true : null">Proxy</div>
<div class="configure-menu-item" @click="onSetView('access')" :active="view === 'access' ? true : null">{{ $t('app.accessControlTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('resources')" :active="view === 'resources' ? true : null">{{ $t('app.resourcesTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('services')" :active="view === 'services' ? true : null">{{ $t('app.servicesTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('storage')" :active="view === 'storage' ? true : null">{{ $t('app.storageTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('graphs')" :active="view === 'graphs' ? true : null">{{ $t('app.graphsTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('location')" :active="view === 'location' ? true : null" v-if="app.accessLevel === 'admin'">{{ $t('app.locationTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('proxy')" :active="view === 'proxy' ? true : null" v-if="app.type === APP_TYPES.PROXIED">Proxy</div>
<div class="configure-menu-item" @click="onSetView('access')" :active="view === 'access' ? true : null" v-if="app.accessLevel === 'admin'">{{ $t('app.accessControlTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('resources')" :active="view === 'resources' ? true : null" v-if="app.type !== APP_TYPES.PROXIED">{{ $t('app.resourcesTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('services')" :active="view === 'services' ? true : null" v-if="app.type !== APP_TYPES.PROXIED && hasOptionalServices">{{ $t('app.servicesTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('storage')" :active="view === 'storage' ? true : null" v-if="app.accessLevel === 'admin' && app.type !== APP_TYPES.PROXIED">{{ $t('app.storageTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('graphs')" :active="view === 'graphs' ? true : null" v-if="app.type !== APP_TYPES.PROXIED">{{ $t('app.graphsTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('security')" :active="view === 'security' ? true : null">{{ $t('app.securityTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('email')" :active="view === 'email' ? true : null">{{ $t('app.emailTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('cron')" :active="view === 'cron' ? true : null">{{ $t('app.cronTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('email')" :active="view === 'email' ? true : null" v-if="app.accessLevel === 'admin' && hasEmail && app.type !== APP_TYPES.PROXIED">{{ $t('app.emailTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('cron')" :active="view === 'cron' ? true : null" v-if="app.type !== APP_TYPES.PROXIED">{{ $t('app.cronTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('updates')" :active="view === 'updates' ? true : null">{{ $t('app.updatesTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('backups')" :active="view === 'backups' ? true : null">{{ $t('app.backupsTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('backups')" :active="view === 'backups' ? true : null" v-if="app.type !== APP_TYPES.PROXIED">{{ $t('app.backupsTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('repair')" :active="view === 'repair' ? true : null">{{ $t('app.repairTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('eventlog')" :active="view === 'eventlog' ? true : null">{{ $t('app.eventlogTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('uninstall')" :active="view === 'uninstall' ? true : null">{{ $t('app.uninstallTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('uninstall')" :active="view === 'uninstall' ? true : null" v-if="app.accessLevel === 'admin'">{{ $t('app.uninstallTabTitle') }}</div>
</div>
<div class="configure-content">
<Info v-if="view === 'info'" :app="app"/>
@@ -213,6 +217,9 @@ onBeforeUnmount(() => {
.titlebar h2 {
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.statelabel {