Johannes Zellner
95 lines
2.9 KiB
Vue
95 lines
2.9 KiB
Vue
<script setup>
|
|
|
|
import { useI18n } from 'vue-i18n';
|
|
const i18n = useI18n();
|
|
const t = i18n.t;
|
|
|
|
import { ref, onMounted, computed, useTemplateRef } from 'vue';
|
|
import { Button, InputDialog } from 'pankow';
|
|
import { prettyLongDate } from 'pankow/utils';
|
|
import { APP_TYPES } from '../../constants.js';
|
|
import AppsModel from '../../models/AppsModel.js';
|
|
|
|
const appsModel = AppsModel.create();
|
|
|
|
const inputDialog = useTemplateRef('inputDialog');
|
|
|
|
const props = defineProps([ 'app' ]);
|
|
|
|
const latestBackup = ref(null);
|
|
const isAppStopped = computed(() => {
|
|
return appsModel.isStopped(props.app);
|
|
});
|
|
|
|
async function onToggleRunState() {
|
|
if (isAppStopped.value) {
|
|
const [error] = await appsModel.start(props.app.id);
|
|
if (error) return console.error(error);
|
|
} else {
|
|
const [error] = await appsModel.stop(props.app.id);
|
|
if (error) return console.error(error);
|
|
}
|
|
}
|
|
|
|
async function onUninstall() {
|
|
const yes = await inputDialog.value.confirm({
|
|
title: t('app.uninstallDialog.title', { app: (props.app.label || props.app.fqdn) }),
|
|
message: t('app.uninstallDialog.description', { app: (props.app.label || props.app.fqdn) }),
|
|
confirmStyle: 'danger',
|
|
confirmLabel: t('app.uninstallDialog.uninstallAction'),
|
|
rejectLabel: t('main.dialog.cancel')
|
|
});
|
|
|
|
if (!yes) return;
|
|
|
|
const [error] = await appsModel.uninstall(props.app.id);
|
|
if (error) return console.error(error);
|
|
|
|
window.location.href = '/#/apps';
|
|
}
|
|
|
|
function onArchive() {
|
|
// TODO
|
|
}
|
|
|
|
onMounted(() => {
|
|
latestBackup.value = null;
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<InputDialog ref="inputDialog" />
|
|
|
|
<div>
|
|
<div>
|
|
<label>{{ $t('app.uninstall.startStop.title') }}</label>
|
|
<p>{{ $t('app.uninstall.startStop.description') }}</p>
|
|
<Button @click="onToggleRunState()"
|
|
:disabled="app.taskId || app.error || app.installationState === 'pending_start' || app.installationState === 'pending_stop'"
|
|
:loading="app.installationState === 'pending_start' || app.installationState === 'pending_stop'"
|
|
>
|
|
{{ $t(isAppStopped ? 'app.uninstall.startStop.startAction' : 'app.uninstall.startStop.stopAction') }}
|
|
</Button>
|
|
</div>
|
|
|
|
<hr v-if="app.type !== APP_TYPES.PROXIED"/>
|
|
|
|
<div v-if="app.type !== APP_TYPES.PROXIED">
|
|
<label>{{ $t('app.archive.title') }}</label>
|
|
<p v-html="$t('app.archive.description')"></p>
|
|
<p class="text-bold text-success" v-if="latestBackup" v-html="$t('app.archive.latestBackupInfo', { date: prettyLongDate(uninstall.latestBackup.creationTime) })"></p>
|
|
<p class="text-bold text-warning" v-else v-html="$t('app.archive.noBackup')"></p>
|
|
<Button :disabled="!latestBackup" @click="onArchive()">{{ $t('app.archive.action') }}</Button>
|
|
</div>
|
|
|
|
<hr/>
|
|
|
|
<div>
|
|
<label>{{ $t('app.uninstall.uninstall.title') }}</label>
|
|
<p>{{ $t('app.uninstall.uninstall.description') }}</p>
|
|
<Button danger @click="onUninstall()">{{ $t('app.uninstall.uninstall.uninstallAction') }}</button>
|
|
</div>
|
|
</div>
|
|
</template>
|