webapp: Show current active pin config

This commit is contained in:
Thomas Basler 2023-01-16 23:41:58 +01:00
parent 3d3feb3517
commit 19b42223f5
7 changed files with 87 additions and 42 deletions

View File

@ -4,6 +4,7 @@
*/
#include "WebApi_device.h"
#include "Configuration.h"
#include "PinMapping.h"
#include "WebApi.h"
#include "WebApi_errors.h"
#include "helper.h"
@ -32,8 +33,27 @@ void WebApiDeviceClass::onDeviceAdminGet(AsyncWebServerRequest* request)
AsyncJsonResponse* response = new AsyncJsonResponse(false, MQTT_JSON_DOC_SIZE);
JsonObject root = response->getRoot();
const CONFIG_T& config = Configuration.get();
const PinMapping_t& pin = PinMapping.get();
root[F("dev_pinmapping")] = config.Dev_PinMapping;
JsonObject curPin = root.createNestedObject("curPin");
curPin[F("name")] = config.Dev_PinMapping;
JsonObject nrfObj = curPin.createNestedObject("nrf24");
nrfObj[F("clk")] = pin.nrf24_clk;
nrfObj[F("cs")] = pin.nrf24_cs;
nrfObj[F("en")] = pin.nrf24_en;
nrfObj[F("irq")] = pin.nrf24_irq;
nrfObj[F("miso")] = pin.nrf24_miso;
nrfObj[F("mosi")] = pin.nrf24_mosi;
JsonObject ethObj = curPin.createNestedObject("eth");
ethObj[F("enabled")] = pin.eth_enabled;
ethObj[F("phy_addr")] = pin.eth_phy_addr;
ethObj[F("power")] = pin.eth_power;
ethObj[F("mdc")] = pin.eth_mdc;
ethObj[F("mdio")] = pin.eth_mdio;
ethObj[F("type")] = pin.eth_type;
ethObj[F("clk_mode")] = pin.eth_clk_mode;
response->setLength();
request->send(response);

View File

@ -6,64 +6,78 @@
<tr>
<th>{{ $t('pininfo.Category') }}</th>
<th>{{ $t('pininfo.Name') }}</th>
<th>{{ $t('pininfo.Number') }}</th>
<th>{{ $t('pininfo.ValueSelected') }}</th>
<th>{{ $t('pininfo.ValueActive') }}</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="6">NRF24</td>
<td>MISO</td>
<td>{{ pinAssignment?.nrf24?.miso }}</td>
<td>{{ selectedPinAssignment?.nrf24?.miso }}</td>
<td>{{ currentPinAssignment?.nrf24?.miso }}</td>
</tr>
<tr>
<td>MOSI</td>
<td>{{ pinAssignment?.nrf24?.mosi }}</td>
<td>{{ selectedPinAssignment?.nrf24?.mosi }}</td>
<td>{{ currentPinAssignment?.nrf24?.mosi }}</td>
</tr>
<tr>
<td>CLK</td>
<td>{{ pinAssignment?.nrf24?.clk }}</td>
<td>{{ selectedPinAssignment?.nrf24?.clk }}</td>
<td>{{ currentPinAssignment?.nrf24?.clk }}</td>
</tr>
<tr>
<td>IRQ</td>
<td>{{ pinAssignment?.nrf24?.irq }}</td>
<td>{{ selectedPinAssignment?.nrf24?.irq }}</td>
<td>{{ currentPinAssignment?.nrf24?.irq }}</td>
</tr>
<tr>
<td>EN</td>
<td>{{ pinAssignment?.nrf24?.en }}</td>
<td>{{ selectedPinAssignment?.nrf24?.en }}</td>
<td>{{ currentPinAssignment?.nrf24?.en }}</td>
</tr>
<tr>
<td>CS</td>
<td>{{ pinAssignment?.nrf24?.cs }}</td>
<td>{{ selectedPinAssignment?.nrf24?.cs }}</td>
<td>{{ currentPinAssignment?.nrf24?.cs }}</td>
</tr>
<tr>
<td rowspan="7">Ethernet</td>
<td>enabled</td>
<td>{{ pinAssignment?.eth?.enabled }}</td>
<td>{{ selectedPinAssignment?.eth?.enabled }}</td>
<td>{{ currentPinAssignment?.eth?.enabled }}</td>
</tr>
<tr>
<td>phy_addr</td>
<td>{{ pinAssignment?.eth?.phy_addr }}</td>
<td>{{ selectedPinAssignment?.eth?.phy_addr }}</td>
<td>{{ currentPinAssignment?.eth?.phy_addr }}</td>
</tr>
<tr>
<td>power</td>
<td>{{ pinAssignment?.eth?.power }}</td>
<td>{{ selectedPinAssignment?.eth?.power }}</td>
<td>{{ currentPinAssignment?.eth?.power }}</td>
</tr>
<tr>
<td>mdc</td>
<td>{{ pinAssignment?.eth?.mdc }}</td>
<td>{{ selectedPinAssignment?.eth?.mdc }}</td>
<td>{{ currentPinAssignment?.eth?.mdc }}</td>
</tr>
<tr>
<td>mdio</td>
<td>{{ pinAssignment?.eth?.mdio }}</td>
<td>{{ selectedPinAssignment?.eth?.mdio }}</td>
<td>{{ currentPinAssignment?.eth?.mdio }}</td>
</tr>
<tr>
<td>type</td>
<td>{{ pinAssignment?.eth?.type }}</td>
<td>{{ selectedPinAssignment?.eth?.type }}</td>
<td>{{ currentPinAssignment?.eth?.type }}</td>
</tr>
<tr>
<td>clk_mode</td>
<td>{{ pinAssignment?.eth?.clk_mode }}</td>
<td>{{ selectedPinAssignment?.eth?.clk_mode }}</td>
<td>{{ currentPinAssignment?.eth?.clk_mode }}</td>
</tr>
</tbody>
@ -82,7 +96,8 @@ export default defineComponent({
CardElement,
},
props: {
pinAssignment: { 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 },
},
});
</script>

View File

@ -481,6 +481,7 @@
"PinOverview": "Anschlussübersicht",
"Category": "Kategorie",
"Name": "Name",
"Number": "Nummer"
"ValueSelected": "Ausgewählt",
"ValueActive": "Aktiv"
}
}

View File

@ -481,6 +481,8 @@
"PinOverview": "Connection overview",
"Category": "Category",
"Name": "Name",
"Number": "Number"
"Number": "Number",
"ValueSelected": "Selected",
"ValueActive": "Active"
}
}

View File

@ -481,6 +481,7 @@
"PinOverview": "Connection overview",
"Category": "Category",
"Name": "Name",
"Number": "Number"
"ValueSelected": "Selected",
"ValueActive": "Active"
}
}

View File

@ -1,3 +1,5 @@
import type { Device } from "./PinMapping";
export interface DeviceConfig {
dev_pinmapping: string;
curPin: Device;
}

View File

@ -4,8 +4,6 @@
{{ alertMessage }}
</BootstrapAlert>
<form @submit="saveDtuConfig">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-pin-tab" data-bs-toggle="tab" data-bs-target="#nav-pin"
@ -20,12 +18,14 @@
<div class="card">
<div class="card-body">
<form @submit="savePinConfig">
<div class="row mb-3">
<label for="inputPinProfile" class="col-sm-2 col-form-label">{{
$t('deviceadmin.SelectedProfile')
}}</label>
<div class="col-sm-10">
<select class="form-select" id="inputPinProfile" v-model="deviceConfigList.dev_pinmapping">
<select class="form-select" id="inputPinProfile"
v-model="deviceConfigList.curPin.name">
<option v-for="device in pinMappingList" :value="device.name">
{{ device.name }}
</option>
@ -33,17 +33,21 @@
</div>
</div>
<div class="alert alert-danger mt-3" role="alert" v-html="$t('deviceadmin.ProfileHint')"></div>
<div class="alert alert-danger mt-3" role="alert" v-html="$t('deviceadmin.ProfileHint')">
</div>
<PinInfo :pinAssignment="pinMappingList.find(i => i.name === deviceConfigList.dev_pinmapping)" />
</div>
</div>
</div>
</div>
<PinInfo
:selectedPinAssignment="pinMappingList.find(i => i.name === deviceConfigList.curPin.name)"
:currentPinAssignment="deviceConfigList.curPin" />
<button type="submit" class="btn btn-primary mb-3">{{ $t('deviceadmin.Save') }}</button>
</form>
</div>
</div>
</div>
</div>
</BasePage>
</template>
@ -109,7 +113,7 @@ export default defineComponent({
}
);
},
saveDtuConfig(e: Event) {
savePinConfig(e: Event) {
e.preventDefault();
const formData = new FormData();