patrick/OpenDTU
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

webapi: Added frontend for display settings

Browse Source
This commit is contained in:
Thomas Basler 2023-01-19 23:25:30 +01:00
parent e89fd64439
commit e0712ed7bc
5 changed files with 73 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
webapp/src/locales/de.json
View File

@ -475,6 +475,11 @@
"SelectedProfile": "Ausgewähltes Profil:",
"DefaultProfile": "(Standard Einstellungen)",
"ProfileHint": "Ihr Gerät reagiert möglicherweise nicht mehr, wenn Sie ein inkompatibles Profil wählen. In diesem Fall müssen Sie eine Löschung über das serielle Interface durchführen.",
"Display": "Display",
"PowerSafe": "Power Safe aktivieren:",
"Screensaver": "Screensaver aktivieren:",
"ShowLogo": "Logo Anzeigen:",
"Contrast": "Kontrast ({contrast}):",
"Save": "@:dtuadmin.Save"
},
"pininfo": {

5
webapp/src/locales/en.json
View File

@ -475,6 +475,11 @@
"SelectedProfile": "Selected profile:",
"DefaultProfile": "(Default settings)",
"ProfileHint": "Your device may stop responding if you select an incompatible profile. In this case, you must perform a deletion via the serial interface.",
"Display": "Display",
"PowerSafe": "Enable Power Safe:",
"Screensaver": "Enable Screensaver:",
"ShowLogo": "Show Logo:",
"Contrast": "Contrast ({contrast}):",
"Save": "@:dtuadmin.Save"
},
"pininfo": {

5
webapp/src/locales/fr.json
View File

@ -475,6 +475,11 @@
"SelectedProfile": "Selected profile:",
"DefaultProfile": "(Default settings)",
"ProfileHint": "Your device may stop responding if you select an incompatible profile. In this case, you must perform a deletion via the serial interface.",
"Display": "Display",
"PowerSafe": "Enable Power Safe:",
"Screensaver": "Enable Screensaver:",
"ShowLogo": "Show Logo:",
"Contrast": "Contrast ({contrast}):",
"Save": "@:dtuadmin.Save"
},
"pininfo": {

8
webapp/src/types/DeviceConfig.ts
View File

@ -1,5 +1,13 @@
import type { Device } from "./PinMapping";
export interface Display {
show_logo: boolean;
power_safe: boolean;
screensaver: boolean;
contrast: number;
}
export interface DeviceConfig {
curPin: Device;
display: Display;
}

69
webapp/src/views/DeviceAdminView.vue
View File

@ -4,21 +4,22 @@
{{ alertMessage }}
</BootstrapAlert>
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-pin-tab" data-bs-toggle="tab" data-bs-target="#nav-pin"
type="button" role="tab" aria-controls="nav-pin" aria-selected="true">{{
$t('deviceadmin.PinAssignment')
}}</button>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-pin" role="tabpanel" aria-labelledby="nav-pin-tab"
tabindex="0">
<div class="card">
<div class="card-body">
<form @submit="savePinConfig">
<form @submit="savePinConfig">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-pin-tab" data-bs-toggle="tab" data-bs-target="#nav-pin"
type="button" role="tab" aria-controls="nav-pin" aria-selected="true">{{
$t('deviceadmin.PinAssignment')
}}</button>
<button class="nav-link" id="nav-display-tab" data-bs-toggle="tab" data-bs-target="#nav-display"
type="button" role="tab" aria-controls="nav-display">{{ $t('deviceadmin.Display') }}</button>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-pin" role="tabpanel" aria-labelledby="nav-pin-tab"
tabindex="0">
<div class="card">
<div class="card-body">
<div class="row mb-3">
<label for="inputPinProfile" class="col-sm-2 col-form-label">{{
$t('deviceadmin.SelectedProfile')
@ -26,7 +27,8 @@
<div class="col-sm-10">
<select class="form-select" id="inputPinProfile"
v-model="deviceConfigList.curPin.name">
<option v-for="device in pinMappingList" :value="device.name" :key="device.name">
<option v-for="device in pinMappingList" :value="device.name"
:key="device.name">
{{ device.name }}
</option>
</select>
@ -39,21 +41,49 @@
<PinInfo
:selectedPinAssignment="pinMappingList.find(i => i.name === deviceConfigList.curPin.name)"
:currentPinAssignment="deviceConfigList.curPin" />
</div>
</div>
</div>
<button type="submit" class="btn btn-primary mb-3">{{ $t('deviceadmin.Save') }}</button>
</form>
<div class="tab-pane fade show" id="nav-display" role="tabpanel" aria-labelledby="nav-display-tab"
tabindex="0">
<div class="card">
<div class="card-body">
<InputElement :label="$t('deviceadmin.PowerSafe')"
v-model="deviceConfigList.display.power_safe" type="checkbox" />
<InputElement :label="$t('deviceadmin.Screensaver')"
v-model="deviceConfigList.display.screensaver" type="checkbox" />
<InputElement :label="$t('deviceadmin.ShowLogo')"
v-model="deviceConfigList.display.show_logo" type="checkbox" />
<div class="row mb-3">
<label for="inputDisplayContrast" class="col-sm-2 col-form-label">{{
$t('deviceadmin.Contrast', { contrast: $n(deviceConfigList.display.contrast / 100,
'percent')
}) }}</label>
<div class="col-sm-10">
<input type="range" class="form-range" min="0" max="100" id="inputDisplayContrast"
v-model="deviceConfigList.display.contrast" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary mb-3">{{ $t('deviceadmin.Save') }}</button>
</form>
</BasePage>
</template>
<script lang="ts">
import BasePage from '@/components/BasePage.vue';
import BootstrapAlert from "@/components/BootstrapAlert.vue";
import InputElement from '@/components/InputElement.vue';
import PinInfo from '@/components/PinInfo.vue';
import type { DeviceConfig } from "@/types/DeviceConfig";
import type { PinMapping, Device } from "@/types/PinMapping";
@ -64,6 +94,7 @@ export default defineComponent({
components: {
BasePage,
BootstrapAlert,
InputElement,
PinInfo,
},
data() {