(frontend/components): Prelimary info card with device type

frontend/src/components/deviceInfoCard.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+
+import { Client } from "backend/src";
+
+import { BoardInfo } from "backend/src/structs/vendor/boardInfo";
+import { BuildInfo } from "backend/src/structs/vendor/buildInfo";
+import { DeviceType, DeviceTypes } from "backend/src/structs/vendor/deviceType";
+import { FeatureSet } from "backend/src/structs/vendor/featureSet";
+import { Version } from "backend/src/structs/vendor/version";
+
+import { Card, CardContent } from "@mui/material";
+import DeviceTypeSection from "./deviceTypeSection";
+
+type DeviceInfoCardProps = {
+    client: Client;
+}
+
+interface DeviceInfoCardState {
+    isReady: boolean;
+    boardInfo?: BoardInfo;
+    buildInfo?: BuildInfo;
+    deviceType?: DeviceType;
+    featureSet?: FeatureSet;
+    version?: Version;
+}
+
+export default class DeviceInfoCard extends React.Component<DeviceInfoCardProps, DeviceInfoCardState> {
+    client: Client;
+
+    constructor(props: DeviceInfoCardProps) {
+        super(props);
+
+        this.client = props.client;
+
+
+        this.state = {
+            isReady: false
+
+        }
+    }
+
+    async componentDidMount(): Promise<void> {
+        // Gather info
+        this.setState({
+            isReady: true,
+            boardInfo: await this.client.boardInfo,
+            buildInfo: await this.client.buildInfo,
+            deviceType: await this.client.deviceType,
+            featureSet: await this.client.featureSet,
+            version: await this.client.version
+        })
+    }
+
+    render(): React.ReactNode {
+        if (!this.state.isReady) {
+            return (<>Loading...</>)
+        } else {
+            return (
+                <>
+                    <Card>
+                        <CardContent>
+                            <DeviceTypeSection deviceType={this.state.deviceType!} boardInfo={this.state.boardInfo!} />
+                        </CardContent>
+                    </Card>
+                </>
+            )
+        }
+    }
+}

frontend/src/components/deviceTypeSection.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+
+import { DeviceType, DeviceTypes } from "backend/src/structs/vendor/deviceType";
+
+import { Grid, Typography } from "@mui/material";
+import { BoardInfo } from "backend/src/structs/vendor/boardInfo";
+
+type DeviceTypeSectionProps = {
+    deviceType: DeviceType;
+    boardInfo: BoardInfo;
+
+}
+
+export default class DeviceTypeSection extends React.Component<DeviceTypeSectionProps> {
+    render(): React.ReactNode {
+        let boardFriendlyName: string;
+        let imgSrc: string;
+        switch (this.props.deviceType.getDeviceType()) {
+            case DeviceTypes.REV_1: {
+                boardFriendlyName = "Genoswitch Measurement Platform Rev. 1";
+                imgSrc = "./RP2040.jpg";
+                break;
+            }
+            default: {
+                boardFriendlyName = "Generic Development Board";
+                imgSrc = "./Raspberry_Pi_Pico_top_and_bottom_composite.jpg";
+                break;
+            }
+        }
+
+        return (
+            <Grid container spacing={2}>
+                <Grid item xs={8}>
+                    <Typography variant="h4">{boardFriendlyName}</Typography>
+                    <Typography>Serial: {this.props.boardInfo.getUniqueId()}</Typography>
+                </Grid>
+                <Grid item xs={4} display={"flex"} justifyContent={"end"}>
+                    <img src={imgSrc} width={"50%"} />
+                </Grid>
+            </Grid>
+        )
+    }
+}

frontend/src/components/rootComponent.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import { Client } from "backend/src/index"
 
 import { Button } from "@mui/material";
+import DeviceInfoCard from "./deviceInfoCard";
 
 export default class RootComponent extends React.Component {
     client: Client;
@@ -52,6 +53,7 @@ export default class RootComponent extends React.Component {
         return (
             <>
                 {!this.state.hasDevice ? <Button variant="outlined" onClick={() => this.handleConnect()}>Connect</Button> : <Button variant="contained" onClick={() => this.handleDisconnect()}>Disconnect</Button>}
+                {this.state.hasDevice ? <DeviceInfoCard client={this.client} /> : undefined}
             </>
         )