Implement app start/stop and add app state polling for the moment

dashboard/src/components/app/Uninstall.vue

@@ -1,46 +1,53 @@
 <script setup>
 
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue';
 import { Button } from 'pankow';
 import { prettyLongDate } from 'pankow/utils';
 import { APP_TYPES, ISTATES, RSTATES } from '../../constants.js';
+import AppsModel from '../../models/AppsModel.js';
+
+const appsModel = AppsModel.create();
 
 const props = defineProps([ 'app' ]);
 const emit = defineEmits([ 'changed' ]);
 
 const latestBackup = ref(null);
-const isAppStopped = ref(false);
+const isAppStopped = computed(() => {
+  // show 'Start App' if app is starting or is stopped
+  if (props.app.installationState === ISTATES.PENDING_START || props.app.installationState === ISTATES.PENDING_STOP) {
+    return props.app.installationState === ISTATES.PENDING_START;
+  } else {
+    return props.app.runState === RSTATES.STOPPED;
+  }
+});
 
-function onToggleRunState() {
-  // TOOD
+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);
+  }
 }
 
 function onUninstall() {
-  // TOOD
+  // TODO
 }
 
 function onArchive() {
-  // TOOD
+  // TODO
 }
 
 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%;">
+  <div>
+    <div>
       <label>{{ $t('app.uninstall.startStop.title') }}</label>
       <p>{{ $t('app.uninstall.startStop.description') }}</p>
       <Button @click="onToggleRunState()"
@@ -51,9 +58,9 @@ onMounted(() => {
       </Button>
     </div>
 
-    <!-- <hr v-if="app.type !== APP_TYPES.PROXIED"/> -->
+    <hr v-if="app.type !== APP_TYPES.PROXIED"/>
 
-    <div v-if="app.type !== APP_TYPES.PROXIED" style="flex-basis: 33%;">
+    <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>
@@ -61,9 +68,9 @@ onMounted(() => {
       <Button :disabled="!latestBackup" @click="onArchive()">{{ $t('app.archive.action') }}</Button>
     </div>
 
-    <!-- <hr/> -->
+    <hr/>
 
-    <div style="flex-basis: 33%;">
+    <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>