[Settings UI] Added Stop and Restart application buttons.

This commit is contained in:
Fabio Manganiello 2023-10-18 23:45:46 +02:00
parent 2a76a6baa6
commit b724e80ee2
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774
5 changed files with 136 additions and 1 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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: {

View file

@ -11,5 +11,12 @@
"icon": {
"class": "fas fa-key"
}
},
"application": {
"name": "Application",
"icon": {
"class": "fas fa-gears"
}
}
}