Add app configure services view

dashboard/src/components/app/Services.vue

@@ -0,0 +1,62 @@
+<script setup>
+
+import { ref } from 'vue';
+import { Switch, FormGroup } from 'pankow';
+import AppsModel from '../../models/AppsModel.js';
+
+const { app } = defineProps([ 'app' ]);
+
+const appsModel = AppsModel.create();
+
+const hasOptionalTurn = ref(app.manifest.addons?.turn?.optional);
+const turnEnabled = ref(app.enableTurn);
+const turnBusy = ref(false);
+
+async function onTurnChange(value) {
+  turnBusy.value = true;
+
+  const [error] = await appsModel.configure(app.id, 'turn', { enable: value });
+  if (error) {
+    turnBusy.value = false;
+    turnEnabled.value = !value;
+    return console.error(error);
+  }
+
+  turnBusy.value = false;
+}
+
+const hasOptionalRedis = ref(app.manifest.addons?.redis?.optional);
+const redisEnabled = ref(app.enableRedis);
+const redisBusy = ref(false);
+
+async function onRedisChange(value) {
+  redisBusy.value = true;
+
+  const [error] = await appsModel.configure(app.id, 'redis', { enable: value });
+  if (error) {
+    redisBusy.value = false;
+    redisEnabled.value = !value;
+    return console.error(error);
+  }
+
+  redisBusy.value = false;
+}
+
+</script>
+
+<template>
+  <div>
+    <FormGroup v-if="hasOptionalTurn">
+      <label>{{ $t('app.turn.title') }} <sup><a href="https://docs.cloudron.io/apps/#turn" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
+      <Switch @change="onTurnChange" v-model="turnEnabled" :label="$t(turnEnabled ? 'app.turn.enable' : 'app.turn.disable')" :disabled="turnBusy || app.error || app.taskId" v-tooltip="app.error ? 'App is in error state' : (app.taskId ? 'App is busy' : '')"/>
+    </FormGroup>
+
+    <hr v-if="hasOptionalTurn && hasOptionalRedis">
+
+    <FormGroup v-if="hasOptionalRedis">
+      <label>{{ $t('app.redis.title') }} <sup><a href="https://docs.cloudron.io/apps/#redis" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
+      <Switch @change="onRedisChange" v-model="redisEnabled" :label="$t(redisEnabled ? 'app.redis.enable' : 'app.redis.disable')" :disabled="redisBusy || app.error || app.taskId" v-tooltip="app.error ? 'App is in error state' : (app.taskId ? 'App is busy' : '')"/>
+    </FormGroup>
+
+  </div>
+</template>