EmbeddedSystemUiReceiveOnly.fs

EmbeddedSystemUiReceiveOnly.fs

[<ReactComponent>]
static member RadioInputReceiveOnly
    (inputValue: ChargingPermission)
    (chargingPermission: ReceiveValue<ChargingPermission>)
    =
    let inputValueStr = $"%A{inputValue}"

    Html.div [
        prop.classes [ "flex"; "gap-2" ]
        prop.children [
            Html.input [
                prop.type'.radio
                prop.name "charging-permission"
                prop.value inputValueStr

                prop.isChecked (
                    match chargingPermission with
                    | Available permission when permission = inputValue -> true
                    | Available _
                    | Unavailable
                    | ReceiveFailed _ -> false
                )

                prop.disabled (
                    match chargingPermission with
                    | Available _ -> false
                    | Unavailable
                    | ReceiveFailed _ -> true
                )
            ]
            Html.label [ prop.for' inputValueStr; prop.text inputValueStr ]
        ]
    ]

[<ReactComponent>]
static member ChargingPermissionComponent() =
    let receivedChargingPermission, setReceivedChargingPermission =
        React.useState Unavailable

    React.useEffectOnce (fun () -> RestApi.getChargingPermission setReceivedChargingPermission)

    Html.div [
        prop.children [
            Html.div [ prop.classes [ "text-xl"; "my-4" ]; prop.text "Charging Permission" ]
            ChargingPermissionComponent.RadioInputReceiveOnly Allow receivedChargingPermission
            ChargingPermissionComponent.RadioInputReceiveOnly Disallow receivedChargingPermission
        ]
    ]