Move app stop/start into uninstall again and add restart button in main toolbar

dashboard/src/components/app/Uninstall.vue

@@ -5,9 +5,9 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef } from 'vue';
-import { Button, InputDialog } from '@cloudron/pankow';
+import { Button, InputDialog, Spinner } from '@cloudron/pankow';
 import { prettyLongDate } from '@cloudron/pankow/utils';
-import { APP_TYPES } from '../../constants.js';
+import { APP_TYPES, RSTATES } from '../../constants.js';
 import AppsModel from '../../models/AppsModel.js';
 
 const appsModel = AppsModel.create();
@@ -55,6 +55,47 @@ async function onArchive() {
   window.location.href = '/#/apps';
 }
 
+const TARGET_RUN_STATE = {
+  START: Symbol('start'),
+  STOP: Symbol('stop'),
+};
+
+function targetRunState() {
+  // if we have an error, we want to retry the pending state, otherwise toggle the runstate
+  if (props.app.error) {
+    if (props.app.error.installationState === ISTATES.PENDING_START) return TARGET_RUN_STATE.START;
+    else return TARGET_RUN_STATE.STOP;
+  } else {
+    if (props.app.runState === RSTATES.STOPPED) return TARGET_RUN_STATE.START;
+    else return TARGET_RUN_STATE.STOP;
+  }
+}
+
+const toggleRunStateBusy = ref(false);
+async function onStartApp() {
+  toggleRunStateBusy.value = true;
+
+  const [error] = await appsModel.start(props.app.id);
+  if (error) {
+    toggleRunStateBusy.value = false;
+    return console.error(error);
+  }
+
+  setTimeout(() => toggleRunStateBusy.value = false, 3000);
+}
+
+async function onStopApp() {
+  toggleRunStateBusy.value = true;
+
+  const [error] = await appsModel.stop(props.app.id);
+  if (error) {
+    toggleRunStateBusy.value = false;
+    return console.error(error);
+  }
+
+  setTimeout(() => toggleRunStateBusy.value = false, 3000);
+}
+
 onMounted(async () => {
   let [error, result] = await appsModel.backups(props.app.id);
   if (error) return console.error(error);
@@ -75,6 +116,16 @@ onMounted(async () => {
   <div>
     <InputDialog ref="inputDialog" />
 
+    <div v-if="app.type !== APP_TYPES.PROXIED">
+      <div>{{ $t('app.uninstall.startStop.description') }}</div>
+      <br/>
+      <Button v-if="!app.progress && targetRunState() === TARGET_RUN_STATE.START" primary :loading="toggleRunStateBusy" :disabled="toggleRunStateBusy" @click="onStartApp()">{{ $t('app.uninstall.startStop.startAction') }}</Button>
+      <Button v-else-if="!app.progress" primary :loading="toggleRunStateBusy" :disabled="toggleRunStateBusy" @click="onStopApp()">{{ $t('app.uninstall.startStop.stopAction') }}</Button>
+      <Spinner v-else />
+    </div>
+
+    <hr style="margin-top: 20px"/>
+
     <div v-if="app.type !== APP_TYPES.PROXIED">
       <label>{{ $t('app.archive.title') }}</label>
       <div v-html="$t('app.archive.description')"></div>