Add initial uninstall view and ensure location hash is updated on tab change

2025-02-21 11:51:52 +01:00
parent 26e8eb8c11
commit 8132920ed8
2 changed files with 79 additions and 2 deletions
@@ -0,0 +1,72 @@
+<script setup>
+
+import { ref, onMounted } from 'vue';
+import { Button } from 'pankow';
+import { prettyLongDate } from 'pankow/utils';
+import { APP_TYPES, ISTATES, RSTATES } from '../../constants.js';
+
+const props = defineProps([ 'app' ]);
+const emit = defineEmits([ 'changed' ]);
+
+const latestBackup = ref(null);
+const isAppStopped = ref(false);
+
+function onToggleRunState() {
+  // TOOD
+}
+
+function onUninstall() {
+  // TOOD
+}
+
+function onArchive() {
+  // TOOD
+}
+
+onMounted(() => {
+  latestBackup.value = null;
+
+  const app = props.app;
+
+  // show 'Start App' if app is starting or is stopped
+  if (app.installationState === ISTATES.PENDING_START || app.installationState === ISTATES.PENDING_STOP) {
+      isAppStopped.value = app.installationState === ISTATES.PENDING_START;
+  } else {
+      isAppStopped.value = app.runState === RSTATES.STOPPED;
+  }
+});
+
+</script>
+
+<template>
+  <div style="display: flex; gap: 20px;">
+    <div style="flex-basis: 33%;">
+      <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" style="flex-basis: 33%;">
+      <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 style="flex-basis: 33%;">
+      <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>