Launch apps from web UI

src_assets/common/assets/web/apps.html

@@ -89,10 +89,13 @@
           <tr v-for="(app,i) in apps" :key="i">
             <td>{{app.name}}</td>
             <td>
-              <button class="btn btn-primary mx-1" @click="editApp(i)">
+              <button class="btn btn-success me-2" :disabled="app.launching" @click="launchApp(i)">
+                <i class="fas fa-play"></i> {{ $t('apps.launch') }}
+              </button>
+              <button class="btn btn-primary me-2" :disabled="app.launching" @click="editApp(i)">
                 <i class="fas fa-edit"></i> {{ $t('apps.edit') }}
               </button>
-              <button class="btn btn-danger mx-1" @click="showDeleteForm(i)">
+              <button class="btn btn-danger" :disabled="app.launching" @click="showDeleteForm(i)">
                 <i class="fas fa-trash"></i> {{ $t('apps.delete') }}
               </button>
             </td>
@@ -407,14 +410,7 @@
       };
     },
     created() {
-      fetch("/api/apps", {
-        credentials: 'include'
-      })
-        .then((r) => r.json())
-        .then((r) => {
-          console.log(r);
-          this.apps = r.apps;
-        });
+      this.loadApps();
 
       fetch("/api/config", {
         credentials: 'include'
@@ -423,6 +419,15 @@
         .then(r => this.platform = r.platform);
     },
     methods: {
+      loadApps() {
+        fetch("/api/apps", {
+          credentials: 'include'
+        })
+          .then(r => r.json())
+          .then(r => {
+            this.apps = r.apps.map(i => ({...i, launching: false}));
+          });
+      },
       newApp() {
         this.editForm = {
           name: "",
@@ -443,6 +448,25 @@
         this.editForm.index = -1;
         this.showEditForm = true;
       },
+      launchApp(id) {
+        const app = this.apps[id];
+        if (confirm(this.$t('apps.launch_warning'))) {
+          app.launching = true;
+          fetch("/api/apps/launch?id=" + id, {
+            credentials: 'include',
+            method: "POST",
+          })
+          .then(r => r.json())
+          .then(r => {
+            if (r.status == "true") {
+              alert(this.$t('apps.launch_success'));
+            } else {
+              alert(this.$t('apps.launch_failed') + r.error);
+            }
+          })
+          .finally(() => app.launching = false);
+        }
+      },
       editApp(id) {
         this.editForm = JSON.parse(JSON.stringify(this.apps[id]));
         this.editForm.index = id;

src_assets/common/assets/web/public/assets/locale/en.json

@@ -74,6 +74,10 @@
     "global_prep_name": "Global Prep Commands",
     "image": "Image",
     "image_desc": "Application icon/picture/image path that will be sent to client. Image must be a PNG file. If not set, Apollo will send default box image.",
+    "launch": "Launch",
+    "launch_warning": "Are you sure you want to launch this app? This will terminate the currently running app.",
+    "launch_success": "App launched successfully!",
+    "launch_failed": "App launch failed: ",
     "loading": "Loading...",
     "name": "Name",
     "output_desc": "The file where the output of the command is stored, if it is not specified, the output is ignored",

src_assets/common/assets/web/public/assets/locale/zh.json

@@ -72,6 +72,10 @@
     "global_prep_name": "全局预处理命令",
     "image": "图片",
     "image_desc": "发送到客户端的应用程序图标/图片/图像的路径。图片必须是 PNG 文件。如果未设置，Apollo 将发送默认图片。",
+    "launch": "启动",
+    "launch_warning": "确定要启动此应用吗？这将会终止当前已启动的应用。",
+    "launch_success": "应用启动成功！",
+    "launch_failed": "应用启动失败：",
     "loading": "加载中...",
     "name": "名称",
     "output_desc": "存储命令输出的文件，如果未指定，输出将被忽略",