From b724e80ee2c7f386a947b08947222bb3e453ba5f Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Wed, 18 Oct 2023 23:45:46 +0200
Subject: [PATCH] [Settings UI] Added `Stop` and `Restart` application buttons.

---
 .../src/components/elements/RestartButton.vue | 35 ++++++++++++++
 .../src/components/elements/StopButton.vue    | 44 +++++++++++++++++
 .../panels/Settings/Application.vue           | 47 +++++++++++++++++++
 .../src/components/panels/Settings/Index.vue  |  4 +-
 .../components/panels/Settings/sections.json  |  7 +++
 5 files changed, 136 insertions(+), 1 deletion(-)
 create mode 100644 platypush/backend/http/webapp/src/components/elements/RestartButton.vue
 create mode 100644 platypush/backend/http/webapp/src/components/elements/StopButton.vue
 create mode 100644 platypush/backend/http/webapp/src/components/panels/Settings/Application.vue

diff --git a/platypush/backend/http/webapp/src/components/elements/RestartButton.vue b/platypush/backend/http/webapp/src/components/elements/RestartButton.vue
new file mode 100644
index 00000000..33ca35a4
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/elements/RestartButton.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="restart-btn-container">
+    <ConfirmDialog ref="modal" @input="restart">
+      Are you sure that you want to restart the application?
+    </ConfirmDialog>
+
+    <button class="btn btn-default restart-btn" @click="showDialog" @touch="showDialog">
+      <i class="fas fa-redo-alt" /> &nbsp; Restart Application
+    </button>
+  </div>
+</template>
+
+<script>
+import ConfirmDialog from "@/components/elements/ConfirmDialog"
+import Utils from '@/Utils'
+
+export default {
+  name: "RestartButton",
+  components: {ConfirmDialog},
+  mixins: [Utils],
+  methods: {
+    showDialog() {
+      this.$refs.modal.show()
+    },
+
+    async restart() {
+      await this.request('application.restart')
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/style/common.scss";
+</style>
diff --git a/platypush/backend/http/webapp/src/components/elements/StopButton.vue b/platypush/backend/http/webapp/src/components/elements/StopButton.vue
new file mode 100644
index 00000000..4517f373
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/elements/StopButton.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="stop-btn-container">
+    <ConfirmDialog ref="modal" @input="stop">
+      Are you sure that you want to stop the application?
+      <br /><br />
+      <span class="text-danger">
+        This will stop the application and you will not be able to restart it
+        through the Web interface!
+      </span>
+    </ConfirmDialog>
+
+    <button class="btn btn-default stop-btn" @click="showDialog" @touch="showDialog">
+      <i class="fas fa-stop" /> &nbsp; Stop Application
+    </button>
+  </div>
+</template>
+
+<script>
+import ConfirmDialog from "@/components/elements/ConfirmDialog"
+import Utils from '@/Utils'
+
+export default {
+  name: "StopButton",
+  components: {ConfirmDialog},
+  mixins: [Utils],
+  methods: {
+    showDialog() {
+      this.$refs.modal.show()
+    },
+
+    async stop() {
+      await this.request('application.stop')
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/style/common.scss";
+
+.text-danger {
+  color: $error-fg;
+}
+</style>
diff --git a/platypush/backend/http/webapp/src/components/panels/Settings/Application.vue b/platypush/backend/http/webapp/src/components/panels/Settings/Application.vue
new file mode 100644
index 00000000..763184f2
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/panels/Settings/Application.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="app-container">
+    <div class="btn-container">
+      <RestartButton />
+    </div>
+
+    <div class="btn-container">
+      <StopButton />
+    </div>
+  </div>
+</template>
+
+<script>
+import RestartButton from "@/components/elements/RestartButton"
+import StopButton from "@/components/elements/StopButton"
+
+export default {
+  name: "Application",
+  components: {RestartButton, StopButton},
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  margin: 0;
+  background: $background-color;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  :deep(.btn-container) {
+    margin-bottom: 1em;
+
+    button {
+      width: 15em;
+
+      &:hover {
+        border: 1px solid $default-hover-fg;
+      }
+    }
+  }
+}
+</style>
diff --git a/platypush/backend/http/webapp/src/components/panels/Settings/Index.vue b/platypush/backend/http/webapp/src/components/panels/Settings/Index.vue
index baabc173..2f157c84 100644
--- a/platypush/backend/http/webapp/src/components/panels/Settings/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Settings/Index.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="settings-container">
     <main>
+      <Application v-if="selectedPanel === 'application'" />
       <Users :session-token="sessionToken" :current-user="currentUser"
              v-if="selectedPanel === 'users' && currentUser" />
       <Token :session-token="sessionToken" :current-user="currentUser"
@@ -10,13 +11,14 @@
 </template>
 
 <script>
+import Application from "@/components/panels/Settings/Application";
 import Token from "@/components/panels/Settings/Token";
 import Users from "@/components/panels/Settings/Users";
 import Utils from "@/Utils";
 
 export default {
   name: "Settings",
-  components: {Users, Token},
+  components: {Application, Users, Token},
   mixins: [Utils],
 
   props: {
diff --git a/platypush/backend/http/webapp/src/components/panels/Settings/sections.json b/platypush/backend/http/webapp/src/components/panels/Settings/sections.json
index fc6adc45..d478db40 100644
--- a/platypush/backend/http/webapp/src/components/panels/Settings/sections.json
+++ b/platypush/backend/http/webapp/src/components/panels/Settings/sections.json
@@ -11,5 +11,12 @@
     "icon": {
       "class": "fas fa-key"
     }
+  },
+
+  "application": {
+    "name": "Application",
+    "icon": {
+      "class": "fas fa-gears"
+    }
   }
 }