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

webapp: Optimize pinview. Build output based on given json data instead of hard coded values

Browse Source
This commit is contained in:
Thomas Basler 2023-03-16 19:54:27 +01:00
parent 75364f89cb
commit 33b4794c3c
1 changed files with 63 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,102 +11,21 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <template v-for="(category) in categories">
<td rowspan="6">NRF24</td> <tr v-for="(prop, prop_idx) in properties(category)">
<td>MISO</td> <td v-if="prop_idx == 0" :rowspan="properties(category).length">
<td>{{ selectedPinAssignment?.nrf24?.miso }}</td> {{ capitalizeFirstLetter(category) }}</td>
<td>{{ currentPinAssignment?.nrf24?.miso }}</td> <td :class="{ 'table-danger': !isEqual(category, prop) }">{{ prop }}</td>
</tr> <td>
<tr> <template v-if="((selectedPinAssignment as Device)[category as keyof Device])">
<td>MOSI</td> {{ (selectedPinAssignment as any)[category][prop] }}</template>
<td>{{ selectedPinAssignment?.nrf24?.mosi }}</td> </td>
<td>{{ currentPinAssignment?.nrf24?.mosi }}</td> <td>
</tr> <template v-if="((currentPinAssignment as Device)[category as keyof Device])">
<tr> {{ (currentPinAssignment as any)[category][prop] }}</template>
<td>CLK</td> </td>
<td>{{ selectedPinAssignment?.nrf24?.clk }}</td> </tr>
<td>{{ currentPinAssignment?.nrf24?.clk }}</td> </template>
</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>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -126,5 +45,53 @@ export default defineComponent({
selectedPinAssignment: { type: Object as PropType<Device | undefined>, required: true }, selectedPinAssignment: { type: Object as PropType<Device | undefined>, required: true },
currentPinAssignment: { 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> </script>