Dedicated power menu

This commit is contained in:
jaknapper 2025-05-22 16:41:50 +01:00
parent 27ed10e27f
commit 14672c260f
3 changed files with 91 additions and 46 deletions

View file

@ -0,0 +1,84 @@
<template>
<!-- Grid managing tab content -->
<div class="center">
<h1 style="text-align: center;"> Power</h1>
<p style="text-align: center;"> It's essential to turn off your OpenFlexure Microscope here before unplugging it.
<br>
<br>
Unplugging the microscope unexpectedly can damage the SD card or onboard computer.
</p>
<div class="buttons">
<button
v-show="'shutdown' in things.system_control.actions"
class="uk-button uk-button-primary uk-width-1-3"
@click="systemRequest('shutdown')"
>
Shutdown
</button>
<button
v-show="'reboot' in things.system_control.actions"
class="uk-button uk-button-primary uk-width-1-3"
@click="systemRequest('reboot')"
>
Restart
</button>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "PowerContent",
components: {},
computed: {
things: function() {
return this.$store.getters["wot/thingDescriptions"];
}
},
methods: {
systemRequest: function(action) {
let message = "";
if (action == "reboot") {
message = "Restart microscope?"
}
else {
message = "Shutdown microscope?"
}
this.modalConfirm(message).then(
() => {
this.$store.commit("resetState");
this.$store.commit("wot/deleteAllThingDescriptions");
// Post and silence errors
axios
.post(this.thingActionUrl("system_control", action))
.catch(() => {});
},
() => {}
);
}
}
};
</script>
<style lang="less" scoped>
// Custom UIkit CSS modifications
@import "../../assets/less/theme.less";
.center {
right: 50%;
bottom: 50%;
transform: translate(50%,50%);
position: absolute;
}
.uk-button {
display: inline;
text-align:center;
margin: 30px 30px 30px 30px;
}
</style>

View file

@ -63,25 +63,6 @@
action="save_all_thing_settings"
submit-label="Save All Settings"
/>
<div>
<button
v-show="'shutdown' in things.system_control.actions"
class="uk-button uk-button-primary uk-margin uk-margin-remove-top uk-width-1-1"
@click="systemRequest('shutdown')"
>
Shutdown
</button>
</div>
<div>
<button
v-show="'reboot' in things.system_control.actions"
class="uk-button uk-button-primary uk-margin uk-margin-remove-top uk-width-1-1"
@click="systemRequest('reboot')"
>
Restart
</button>
</div>
</div>
<div class="view-component uk-width-expand uk-padding-small">
<tabContent
@ -129,7 +110,6 @@
</template>
<script>
import axios from "axios";
import streamSettings from "./settingsComponents/streamSettings.vue";
import cameraSettings from "./settingsComponents/cameraSettings.vue";
import appSettings from "./settingsComponents/appSettings.vue";
@ -155,12 +135,6 @@ export default {
ActionButton
},
computed: {
things: function() {
return this.$store.getters["wot/thingDescriptions"];
}
},
data: function() {
return {
selected: "display",
@ -174,26 +148,6 @@ export default {
this.currentTab = tab;
}
},
systemRequest: function(action) {
let message = "";
if (action == "reboot") {
message = "Restart microscope?"
}
else {
message = "Shutdown microscope?"
}
this.modalConfirm(message).then(
() => {
this.$store.commit("resetState");
this.$store.commit("wot/deleteAllThingDescriptions");
// Post and silence errors
axios
.post(this.thingActionUrl("system_control", action))
.catch(() => {});
},
() => {}
);
}
}
};
</script>