webapp: Optimize pinview. Build output based on given json data instead of hard coded values
This commit is contained in:
Thomas Basler
parent
75364f89cb
commit
33b4794c3c
@ -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>
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user