Add app configure location view

dashboard/src/views/AppConfigureView.vue

@@ -13,15 +13,18 @@ import Display from '../components/app/Display.vue';
 import Email from '../components/app/Email.vue';
 import Eventlog from '../components/app/Eventlog.vue';
 import Info from '../components/app/Info.vue';
+import Location from '../components/app/Location.vue';
 import Resources from '../components/app/Resources.vue';
 import Repair from '../components/app/Repair.vue';
 import Security from '../components/app/Security.vue';
 import Uninstall from '../components/app/Uninstall.vue';
 import Updates from '../components/app/Updates.vue';
 import AppsModel from '../models/AppsModel.js';
+import TasksModel from '../models/TasksModel.js';
 import { API_ORIGIN, APP_TYPES, ISTATES, RSTATES, HSTATES } from '../constants.js';
 
 const appsModel = AppsModel.create();
+const tasksModel = TasksModel.create();
 const installationStateLabel = AppsModel.installationStateLabel;
 
 const busy = ref(true);
@@ -33,6 +36,7 @@ const infoMenu = ref([]);
 const hasLocalStorage = ref(false);
 const hasOptionalServices = ref(false);
 const hasEmail = ref(false);
+const busyStopTask = ref(false);
 
 const isAppStopped = computed(() => {
   return appsModel.isStopped(app.value);
@@ -114,6 +118,17 @@ async function refresh() {
   refreshTimer = setTimeout(refresh, 2000);
 }
 
+async function onStopAppTask() {
+  if (!app.value.taskId) return;
+
+  busyStopTask.value = true;
+
+  const [error] = await tasksModel.stop(app.value.taskId);
+  if (error) console.error(error);
+
+  busyStopTask.value = false;
+}
+
 onMounted(async () => {
   const tmp = window.location.hash.slice('#/app/'.length);
   if (!tmp) return;
@@ -151,6 +166,7 @@ onBeforeUnmount(() => {
         </div>
 
         <div style="display: flex; gap: 10px; align-items: center;">
+          <Button v-if="app.taskId" danger tool outline icon="fa-solid fa-xmark" v-tooltip="'Cancel Task'" :loading="busyStopTask" :disabled="busyStopTask" @click="onStopAppTask()"/>
           <Button secondary tool
             @click="onToggleRunState()"
             :disabled="app.taskId || app.error || app.installationState === 'pending_start' || app.installationState === 'pending_stop'"
@@ -168,6 +184,10 @@ onBeforeUnmount(() => {
         </div>
       </div>
 
+      <div class="apptask-progress">
+        <div class="apptask-progress-filled" :style="{ width: app.progress+'%' }"></div>
+      </div>
+
       <div class="configure-body">
         <div class="configure-menu">
           <div class="configure-menu-item" @click="onSetView('info')" :active="view === 'info' ? true : null">{{ $t('app.infoTabTitle') }}</div>
@@ -191,7 +211,7 @@ onBeforeUnmount(() => {
         <div class="configure-content">
           <Info v-if="view === 'info'" :app="app"/>
           <Display :app="app" v-if="view === 'display'"/>
-          <div v-if="view === 'location'"></div>
+          <Location :app="app" v-if="view === 'location'"/>
           <div v-if="view === 'proxy'"></div>
           <Access :app="app" v-if="view === 'access'"/>
           <Resources :app="app" v-if="view === 'resources'"/>
@@ -221,6 +241,7 @@ onBeforeUnmount(() => {
 }
 
 .titlebar h2 {
+  flex-grow: 1;
   padding: 0;
   margin: 0;
   display: flex;
@@ -251,12 +272,44 @@ onBeforeUnmount(() => {
 
 .titlebar {
   display: flex;
-  margin-bottom: 20px;
   justify-content: space-between;
   background-color: var(--pankow-body-background-color);
 }
 
+.apptask-progress {
+  position: relative;
+  width: 100%;
+  height: 5px;
+  text-align: center;
+  border-radius: 10px;
+  color: var(--pankow-text-color);
+}
+
+.apptask-progress-filled {
+  background-color: var(--pankow-color-primary);
+  position: relative;
+  top: 0;
+  left: 0;
+  height: 100%;
+  border-radius: 10px;
+  z-index: 1;
+  background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
+  background-size: 40px 40px;
+  animation: apptask-progress-bar-stripes 1s linear infinite;
+  transition: width 300ms;
+}
+
+@keyframes apptask-progress-bar-stripes {
+  from {
+    background-position: 40px 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+
 .configure-body {
+  margin-top: 20px;
   display: flex;
 }