From 33b4794c3c2d30c156400c0c5e21739690430350 Mon Sep 17 00:00:00 2001
From: Thomas Basler <thomas@familie-basler.net>
Date: Thu, 16 Mar 2023 19:54:27 +0100
Subject: [PATCH] webapp: Optimize pinview. Build output based on given json
 data instead of hard coded values

---
 webapp/src/components/PinInfo.vue | 159 ++++++++++++------------------
 1 file changed, 63 insertions(+), 96 deletions(-)

diff --git a/webapp/src/components/PinInfo.vue b/webapp/src/components/PinInfo.vue
index de7524b7..0770e3d5 100644
--- a/webapp/src/components/PinInfo.vue
+++ b/webapp/src/components/PinInfo.vue
@@ -11,102 +11,21 @@
                     </tr>
                 </thead>
                 <tbody>
-                    <tr>
-                        <td rowspan="6">NRF24</td>
-                        <td>MISO</td>
-                        <td>{{ selectedPinAssignment?.nrf24?.miso }}</td>
-                        <td>{{ currentPinAssignment?.nrf24?.miso }}</td>
-                    </tr>
-                    <tr>
-                        <td>MOSI</td>
-                        <td>{{ selectedPinAssignment?.nrf24?.mosi }}</td>
-                        <td>{{ currentPinAssignment?.nrf24?.mosi }}</td>
-                    </tr>
-                    <tr>
-                        <td>CLK</td>
-                        <td>{{ selectedPinAssignment?.nrf24?.clk }}</td>
-                        <td>{{ currentPinAssignment?.nrf24?.clk }}</td>
-                    </tr>
-                    <tr>
-                        <td>IRQ</td>
-                        <td>{{ selectedPinAssignment?.nrf24?.irq }}</td>
-                        <td>{{ currentPinAssignment?.nrf24?.irq }}</td>
-                    </tr>
-                    <tr>
-                        <td>EN</td>
-                        <td>{{ selectedPinAssignment?.nrf24?.en }}</td>
-                        <td>{{ currentPinAssignment?.nrf24?.en }}</td>
-                    </tr>
-                    <tr>
-                        <td>CS</td>
-                        <td>{{ selectedPinAssignment?.nrf24?.cs }}</td>
-                        <td>{{ currentPinAssignment?.nrf24?.cs }}</td>
-                    </tr>
-
-                    <tr>
-                        <td rowspan="7">Ethernet</td>
-                        <td>enabled</td>
-                        <td>{{ selectedPinAssignment?.eth?.enabled }}</td>
-                        <td>{{ currentPinAssignment?.eth?.enabled }}</td>
-                    </tr>
-                    <tr>
-                        <td>phy_addr</td>
-                        <td>{{ selectedPinAssignment?.eth?.phy_addr }}</td>
-                        <td>{{ currentPinAssignment?.eth?.phy_addr }}</td>
-                    </tr>
-                    <tr>
-                        <td>power</td>
-                        <td>{{ selectedPinAssignment?.eth?.power }}</td>
-                        <td>{{ currentPinAssignment?.eth?.power }}</td>
-                    </tr>
-                    <tr>
-                        <td>mdc</td>
-                        <td>{{ selectedPinAssignment?.eth?.mdc }}</td>
-                        <td>{{ currentPinAssignment?.eth?.mdc }}</td>
-                    </tr>
-                    <tr>
-                        <td>mdio</td>
-                        <td>{{ selectedPinAssignment?.eth?.mdio }}</td>
-                        <td>{{ currentPinAssignment?.eth?.mdio }}</td>
-                    </tr>
-                    <tr>
-                        <td>type</td>
-                        <td>{{ selectedPinAssignment?.eth?.type }}</td>
-                        <td>{{ currentPinAssignment?.eth?.type }}</td>
-                    </tr>
-                    <tr>
-                        <td>clk_mode</td>
-                        <td>{{ selectedPinAssignment?.eth?.clk_mode }}</td>
-                        <td>{{ currentPinAssignment?.eth?.clk_mode }}</td>
-                    </tr>
-
-                    <tr>
-                        <td rowspan="6">Display</td>
-                        <td>type</td>
-                        <td>{{ selectedPinAssignment?.display?.type }}</td>
-                        <td>{{ currentPinAssignment?.display?.type }}</td>
-                    </tr>
-                    <tr>
-                        <td>data</td>
-                        <td>{{ selectedPinAssignment?.display?.data }}</td>
-                        <td>{{ currentPinAssignment?.display?.data }}</td>
-                    </tr>
-                    <tr>
-                        <td>clk</td>
-                        <td>{{ selectedPinAssignment?.display?.clk }}</td>
-                        <td>{{ currentPinAssignment?.display?.clk }}</td>
-                    </tr>
-                    <tr>
-                        <td>cs</td>
-                        <td>{{ selectedPinAssignment?.display?.cs }}</td>
-                        <td>{{ currentPinAssignment?.display?.cs }}</td>
-                    </tr>
-                    <tr>
-                        <td>reset</td>
-                        <td>{{ selectedPinAssignment?.display?.reset }}</td>
-                        <td>{{ currentPinAssignment?.display?.reset }}</td>
-                    </tr>
-
+                    <template v-for="(category) in categories">
+                        <tr v-for="(prop, prop_idx) in properties(category)">
+                            <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 as Device)[category as keyof Device])">
+                                    {{ (selectedPinAssignment as any)[category][prop] }}</template>
+                            </td>
+                            <td>
+                                <template v-if="((currentPinAssignment as Device)[category as keyof Device])">
+                                    {{ (currentPinAssignment as any)[category][prop] }}</template>
+                            </td>
+                        </tr>
+                    </template>
                 </tbody>
             </table>
         </div>
@@ -126,5 +45,53 @@ export default defineComponent({
         selectedPinAssignment: { type: Object as PropType<Device | undefined>, required: true },
         currentPinAssignment: { type: Object as PropType<Device | undefined>, required: true },
     },
+    computed: {
+        categories(): string[] {
+            let curArray: Array<string> = [];
+            if (this.currentPinAssignment) {
+                curArray = Object.keys(this.currentPinAssignment as Device);
+            }
+
+            let selArray: Array<string> = [];
+            if (this.selectedPinAssignment) {
+                selArray = Object.keys(this.selectedPinAssignment as Device);
+            }
+
+            let total: Array<string> = [];
+            total = total.concat(curArray, selArray);
+            return Array.from(new Set(total)).filter(cat => cat != 'name').sort();
+        },
+    },
+    methods: {
+        properties(category: string): string[] {
+            let curArray: Array<string> = [];
+            if ((this.currentPinAssignment as Device)[category as keyof Device]) {
+                curArray = Object.keys((this.currentPinAssignment as Device)[category as keyof Device]);
+            }
+
+            let selArray: Array<string> = [];
+            if ((this.selectedPinAssignment as Device)[category as keyof Device]) {
+                selArray = Object.keys((this.selectedPinAssignment as Device)[category as keyof Device]);
+            }
+
+            let total: Array<string> = [];
+            total = total.concat(curArray, selArray);
+
+            return Array.from(new Set(total)).sort();
+        },
+        isEqual(category: string, prop: string): boolean {
+            if (!((this.selectedPinAssignment as Device)[category as keyof Device])) {
+                return false;
+            }
+            if (!((this.currentPinAssignment as Device)[category as keyof Device])) {
+                return false;
+            }
+
+            return (this.selectedPinAssignment as any)[category][prop] == (this.currentPinAssignment as any)[category][prop];
+        },
+        capitalizeFirstLetter(value: string): string {
+            return value.charAt(0).toUpperCase() + value.slice(1);
+        },
+    }
 });
 </script>