frontend/devices: Add firmware version

Author: ffreddow

frontend/src/components/device/DeviceCard.tsx

@@ -81,6 +81,11 @@ export function DeviceCard({
                     <Col className="text-end">{formatLastStateChange(t, device.last_state_change)}</Col>
                 </Row>
                 <hr style="margin-top: 5px;margin-bottom: 5px;"/>
+                <Row>
+                    <Col xs="auto"><b>{t("firmware_version")}</b></Col>
+                    <Col className="text-end">{device.firmware_version}</Col>
+                </Row>
+                <hr style="margin-top: 5px;margin-bottom: 5px;"/>
                 <Row>
                     <Col xs="auto">
                         <Row>

frontend/src/components/device/DeviceMobileView.tsx

@@ -44,6 +44,8 @@ export function DeviceMobileView({
                 return i18n.t("chargers.note");
             case "last_state_change":
                 return i18n.t("chargers.last_state_change");
+            case "firmware_version":
+                return i18n.t("chargers.firmware_version");
             default:
                 return i18n.t("chargers.select_sorting");
         }
@@ -59,6 +61,7 @@ export function DeviceMobileView({
                         <Dropdown.Item onClick={() => onMobileSort("status")}>{t("status")}</Dropdown.Item>
                         <Dropdown.Item onClick={() => onMobileSort("last_state_change")}>{t("last_state_change")}</Dropdown.Item>
                         <Dropdown.Item onClick={() => onMobileSort("note")}>{t("note")}</Dropdown.Item>
+                        <Dropdown.Item onClick={() => onMobileSort("firmware_version")}>{t("firmware_version")}</Dropdown.Item>
                     </DropdownButton>
                     <DropdownButton className="dropdown-btn" title={sortSequence === "asc" ? t("sorting_sequence_asc") : t("sorting_sequence_desc")}>
                         <Dropdown.Item onClick={() => onSortSequenceChange("asc")}>{t("sorting_sequence_asc")}</Dropdown.Item>

frontend/src/components/device/DeviceTable.tsx

@@ -93,6 +93,16 @@ export function DeviceTable({
                                 </Col>
                             </Row>
                         </th>
+                        <th onClick={() => onSort("firmware_version")} style={{width: "1px", whiteSpace: "nowrap", padding: "0.5rem 0.25rem"}}>
+                            <Row className="flex-nowrap g-0">
+                                <Col>
+                                    {t("firmware_version")}
+                                </Col>
+                                <Col xs="auto">
+                                    {getIcon("firmware_version")}
+                                </Col>
+                            </Row>
+                        </th>
                     </tr>
                 </thead>
                 <tbody>

frontend/src/components/device/DeviceTableRow.tsx

@@ -125,6 +125,9 @@ export function DeviceTableRow({
                     </Row>
                 </Container>
             </td>
+            <td class="align-middle" style={{width: "1px", whiteSpace: "nowrap", padding: "0.5rem 0.25rem"}}>
+                {device.firmware_version}
+            </td>
         </tr>
     );
 }

frontend/src/components/device/types.ts

@@ -7,6 +7,7 @@ export interface Device {
     port: number,
     valid: boolean,
     last_state_change?: number | null,
+    firmware_version: string,
 }
 
 export interface StateDevice {
@@ -18,9 +19,10 @@ export interface StateDevice {
     port: number,
     valid: boolean,
     last_state_change?: number | null,
+    firmware_version: string,
 }
 
-export type SortColumn = "name" | "uid" | "status" | "none" | "note" | "last_state_change";
+export type SortColumn = "name" | "uid" | "status" | "none" | "note" | "last_state_change" | "firmware_version";
 
 export interface DeviceListState {
     devices: StateDevice[],

frontend/src/locales/de.ts

@@ -64,6 +64,7 @@ export const de ={
         "sorting_sequence_asc": "Aufsteigend",
         "sorting_sequence_desc": "Absteigend",
         "note": "Notiz",
+        "firmware_version": "Firmwareversion",
         "last_state_change": "Statusänderung",
         "time_just_now": "Gerade eben",
         "time_minutes_ago": "vor {{count}}m",

frontend/src/locales/en.ts

@@ -68,6 +68,7 @@ export const en = {
         "sorting_sequence_asc": "Ascending",
         "sorting_sequence_desc": "Descending",
         "note": "Note",
+        "firmware_version": "Firmware Version",
         "last_state_change": "State Change",
         "time_just_now": "Just now",
         "time_minutes_ago": "{{count}}m ago",

frontend/src/pages/devices.tsx

@@ -30,6 +30,7 @@ export class DeviceList extends Component<{}, DeviceListState> {
             valid: true,
             note: "",
             last_state_change: null,
+            firmware_version: "",
         };
         this.state = {
             devices: [],
@@ -112,6 +113,7 @@ export class DeviceList extends Component<{}, DeviceListState> {
                     port: device.port,
                     valid: device.valid,
                     last_state_change: device.last_state_change,
+                    firmware_version: device.firmware_version,
                 }
                 stateDevices.push(state_charger);
             }

frontend/src/schema.d.ts

@@ -547,6 +547,7 @@ export interface components {
             tokens: components["schemas"]["ResponseAuthorizationToken"][];
         };
         GetChargerSchema: {
+            firmware_version: string;
             id: string;
             /** Format: int64 */
             last_state_change?: number | null;

frontend/src/styles/main.scss

@@ -76,7 +76,7 @@ th:hover:has(div) {
   white-space: nowrap;
 }
 
-.charger-head th:last-of-type {
+.charger-head th:nth-last-child(2) {
   @media (max-width: 1600px) {
     width: 50% !important;
   }