webapp: show pin mapping categories as cards

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.

webapp/src/components/PinInfo.vue

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

webapp/src/locales/de.json

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

webapp/src/locales/en.json

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

webapp/src/locales/fr.json

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