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

webapp: show pin mapping categories as cards

Browse Source 
on a desktop browser, this approach allows to display all categories at
once. we also increase readability as the values are much closer to
their label. previously, the values were far to the right of the screen
and it was unpleasent to read which value belonged to which setting. the
grouping of values per category was also not very well conceived.

by using cards, we also avoid some styling issues, namely the use of
rowspan, which caused a spurious table cell border at the end of the old
table layout.
This commit is contained in:
Bernhard Kirchen 2024-10-27 20:15:03 +01:00 committed by Bernhard Kirchen
parent c87ba97a2b
commit 3c3d97fe05
4 changed files with 31 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
webapp/src/components/PinInfo.vue
View File

@ -1,40 +1,36 @@
<template>
<CardElement :text="$t('pininfo.PinOverview')" textVariant="text-bg-primary" table>
<div class="table-responsive">
<table class="table table-hover table-condensed">
<thead>
<tr>
<th>{{ $t('pininfo.Category') }}</th>
<th>{{ $t('pininfo.Name') }}</th>
<th>{{ $t('pininfo.ValueSelected') }}</th>
<th>{{ $t('pininfo.ValueActive') }}</th>
</tr>
</thead>
<tbody>
<template v-for="category in categories" :key="category">
<tr v-for="(prop, prop_idx) in properties(category)" :key="prop">
<td v-if="prop_idx == 0" :rowspan="properties(category).length">
{{ capitalizeFirstLetter(category) }}
</td>
<td :class="{ 'table-danger': !isEqual(category, prop) }">
{{ prop }}
</td>
<td>
<template v-if="selectedPinAssignment && category in selectedPinAssignment">
{{ (selectedPinAssignment as any)[category][prop] }}</template
>
</td>
<td>
<template v-if="currentPinAssignment && category in currentPinAssignment">
{{ (currentPinAssignment as any)[category][prop] }}</template
>
</td>
</tr>
</template>
</tbody>
</table>
<div class="row flex-row flex-wrap g-3">
<div class="col" v-for="category in categories" :key="category">
<CardElement :text="capitalizeFirstLetter(category)" textVariant="text-bg-primary" table>
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>
<tr>
<th>{{ $t('pininfo.Name') }}</th>
<th class="text-center">{{ $t('pininfo.ValueSelected') }}</th>
<th class="text-center">{{ $t('pininfo.ValueActive') }}</th>
</tr>
<tr v-for="(prop, prop_idx) in properties(category)" :key="prop_idx">
<td :class="{ 'table-danger': !isEqual(category, prop) }">
{{ prop }}
</td>
<td class="text-center">
<template v-if="selectedPinAssignment && category in selectedPinAssignment">
{{ (selectedPinAssignment as any)[category][prop] }}</template
>
</td>
<td class="text-center">
<template v-if="currentPinAssignment && category in currentPinAssignment">
{{ (currentPinAssignment as any)[category][prop] }}</template
>
</td>
</tr>
</tbody>
</table>
</div>
</CardElement>
</div>
</CardElement>
</div>
</template>
<script lang="ts">

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

@ -881,7 +881,6 @@
"LedBrightness": "LED {led} Helligkeit ({brightness})"
},
"pininfo": {
"PinOverview": "Anschlussübersicht",
"Category": "Kategorie",
"Name": "Name",
"ValueSelected": "Ausgewählt",

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

@ -884,7 +884,6 @@
"LedBrightness": "LED {led} brightness ({brightness})"
},
"pininfo": {
"PinOverview": "Connection overview",
"Category": "Category",
"Name": "Name",
"Number": "Number",

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

@ -831,7 +831,6 @@
"LedBrightness": "LED {led} luminosité ({brightness})"
},
"pininfo": {
"PinOverview": "Vue d'ensemble des connexions",
"Category": "Catégorie",
"Name": "Nom",
"ValueSelected": "Sélectionné",