Show running app in Apps page

src_assets/common/assets/web/apps.html

@@ -89,15 +89,18 @@
           <tr v-for="(app,i) in apps" :key="app.uuid">
             <td>{{app.name}}</td>
             <td>
-              <button class="btn btn-success me-2" :disabled="app.launching" @click="launchApp(app)">
-                <i class="fas fa-play"></i> {{ $t('apps.launch') }}
-              </button>
-              <button class="btn btn-primary me-2" :disabled="app.launching" @click="editApp(app)">
+              <button class="btn btn-primary me-2" :disabled="actionDisabled" @click="editApp(app)">
                 <i class="fas fa-edit"></i> {{ $t('apps.edit') }}
               </button>
-              <button class="btn btn-danger" :disabled="app.launching" @click="showDeleteForm(app)">
+              <button class="btn btn-danger me-2" :disabled="actionDisabled" @click="showDeleteForm(app)">
                 <i class="fas fa-trash"></i> {{ $t('apps.delete') }}
               </button>
+              <button class="btn btn-warning" :disabled="actionDisabled" @click="closeApp()" v-if="currentApp === app.uuid">
+                <i class="fas fa-stop"></i> {{ $t('apps.close') }}
+              </button>
+              <button class="btn btn-success" :disabled="actionDisabled" @click="launchApp(app)" v-else>
+                <i class="fas fa-play"></i> {{ $t('apps.launch') }}
+              </button>
             </td>
           </tr>
         </tbody>
@@ -444,12 +447,14 @@
       return {
         apps: [],
         showEditForm: false,
+        actionDisabled: false,
         editForm: null,
         detachedCmd: "",
         coverSearching: false,
         coverFinderBusy: false,
         coverCandidates: [],
         platform: "",
+        currentApp: ""
       };
     },
     created() {
@@ -469,6 +474,7 @@
           .then(r => r.json())
           .then(r => {
             this.apps = r.apps.map(i => ({...i, launching: false}));
+            this.currentApp = r.current_app;
           });
       },
       newApp() {
@@ -477,20 +483,40 @@
       },
       launchApp(app) {
         if (confirm(this.$t('apps.launch_warning'))) {
-          app.launching = true;
+          this.actionDisabled = true;
           fetch("./api/apps/launch?uuid=" + app.uuid, {
             credentials: 'include',
             method: "POST",
           })
           .then(r => r.json())
           .then(r => {
-            if (r.status) {
-              alert(this.$t('apps.launch_success'));
-            } else {
+            if (!r.status) {
               alert(this.$t('apps.launch_failed') + r.error);
             }
           })
-          .finally(() => app.launching = false);
+          .finally(() => {
+            this.actionDisabled = false;
+            this.loadApps()
+          });
+        }
+      },
+      closeApp() {
+        if (confirm(this.$t('apps.close_warning'))) {
+          this.actionDisabled = true;
+          fetch("./api/apps/close", {
+            credentials: 'include',
+            method: "POST"
+          })
+          .then((r) => r.json())
+          .then((r) => {
+            if (!r.status) {
+              alert("apps.close_failed")
+            }
+          })
+          .finally(() => {
+            this.actionDisabled = false;
+            this.loadApps()
+          });
         }
       },
       editApp(app) {
@@ -620,7 +646,6 @@
       save() {
         this.editForm.name = this.editForm.name.trim();
         this.editForm["image-path"] = this.editForm["image-path"].toString().trim().replace(/"/g, '');
-        delete this.editForm["launching"];
         delete this.editForm["id"];
         fetch("./api/apps", {
           credentials: 'include',

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

@@ -40,6 +40,9 @@
     "applications_title": "Applications",
     "auto_detach": "Continue streaming if the application exits quickly",
     "auto_detach_desc": "This will attempt to automatically detect launcher-type apps that close quickly after launching another program or instance of themselves. When a launcher-type app is detected, it is treated as a detached app.",
+    "close": "Terminate",
+    "close_warning": "Are you sure to terminate the current running app?",
+    "close_failed": "App termination failed.",
     "cmd": "Command",
     "cmd_desc": "The main application to start. If blank, no application will be started.",
     "cmd_note": "If the path to the command executable contains spaces, you must enclose it in quotes.",
@@ -80,7 +83,6 @@
     "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",

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

@@ -40,6 +40,9 @@
     "applications_title": "应用",
     "auto_detach": "启动串流后应用突然关闭时不退出串流",
     "auto_detach_desc": "这将尝试自动检测在启动另一个程序或自身实例后很快关闭的启动类应用。 检测到启动型应用程序时，它会被视为一个分离的应用程序。",
+    "close": "终止",
+    "close_warning": "确定要终止当前正在运行的APP吗？",
+    "close_failed": "APP终止失败。",
     "cmd": "命令",
     "cmd_desc": "要启动的主要应用程序。如果为空，将不会启动任何应用程序。",
     "cmd_note": "如果命令中可执行文件的路径包含空格，则必须用引号括起来。",