chore: add facet config to drives-fsoe

.gitignore

@@ -45,3 +45,5 @@ dist
 .vitest
 /vendors/automationware/apps/stewart-aw-piattaforma/public/teeth.zip
 /dist.tar.gz
+.vite
+.cache

examples/applications/drives-fsoe/src/config.ts

@@ -111,6 +111,13 @@ export const config: GlowbuzzerConfig = {
             ]
         }
     ],
+    din: [
+        {
+            name: "My din",
+            description: "EL2008 slave 1 input 0",
+            inverted: true
+        }
+    ],
     safetyDin: [
         {
             name: "Overall safety state (0)",

examples/applications/drives-fsoe/src/main.tsx

@@ -7,13 +7,15 @@ import React, { StrictMode } from "react"
 import { GlowbuzzerApp } from "@glowbuzzer/controls"
 import { App } from "./app"
 import { config } from "./config"
-import { GbdbConfiguration, JointsGbdbFacetSlice } from "@glowbuzzer/store"
+import { DinGbdbFacetSlice, GbdbConfiguration, JointsGbdbFacetSlice } from "@glowbuzzer/store"
 
 const persistence: GbdbConfiguration = {
-    // remoteDb: "http://localhost:5984",
+    remoteDb: "http://localhost:5984",
     facets: {
         project: {
-            slices: [JointsGbdbFacetSlice]
+            singleton: true,
+            autoSave: true,
+            slices: [JointsGbdbFacetSlice, DinGbdbFacetSlice]
         }
     }
 }

libs/controls/src/config/ioConfig/IoConfigTab.tsx

@@ -3,12 +3,12 @@
  */
 
 import * as React from "react"
-import { Button, Flex, Space, Row, Col, Card, Checkbox, Form, InputNumber, Switch } from "antd"
-import TextArea from "antd/es/input/TextArea"
+import { useState } from "react"
+import { Button, Card, Checkbox, Flex, Form, Input, InputNumber, Space, Switch } from "antd"
 import styled from "styled-components"
-import { useConnection } from "@glowbuzzer/store"
-import { useEffect, useState } from "react"
-import { ModbusDinConfig } from "@glowbuzzer/store"
+import { configSlice, ModbusDinConfig, useDigitalInputList } from "@glowbuzzer/store"
+import { useDispatch } from "react-redux"
+import { CheckboxChangeEvent } from "antd/es/checkbox"
 
 const tabList = [
     {
@@ -46,11 +46,72 @@ const tabList = [
 ]
 
 const StandardDigitalInputs: React.FC = () => {
+    const current = useDigitalInputList()
+    const [inputs, setInputs] = useState(current)
+    const dispatch = useDispatch()
+
+    function reset() {
+        setInputs(current)
+    }
+
+    function save() {
+        dispatch(
+            configSlice.actions.addConfig({
+                din: inputs
+            })
+        )
+    }
+
+    function update_name(index: number, e: React.ChangeEvent<HTMLInputElement>) {
+        setInputs(current =>
+            current.map((input, i) => (i === index ? { ...input, name: e.target.value } : input))
+        )
+    }
+
+    function update_inverted(index: number, e: CheckboxChangeEvent) {
+        setInputs(current =>
+            current.map((input, i) =>
+                i === index ? { ...input, inverted: e.target.checked } : input
+            )
+        )
+    }
+
+    const modified = JSON.stringify(inputs) !== JSON.stringify(current)
+
     return (
         <StyledFlex>
-            <Space direction="vertical" size="small">
-                Just view the list - look at descriptions and set the name
-            </Space>
+            <div className="digital-input-grid">
+                {inputs.map((input, index) => (
+                    <React.Fragment key={index}>
+                        <div>{input.description}</div>
+                        <div>
+                            <Input
+                                type="text"
+                                value={input.name}
+                                onChange={e => update_name(index, e)}
+                            />
+                        </div>
+                        <div>
+                            <Checkbox
+                                checked={input.inverted}
+                                onChange={e => update_inverted(index, e)}
+                            >
+                                Inverted
+                            </Checkbox>
+                        </div>
+                    </React.Fragment>
+                ))}
+            </div>
+            <div className="actions">
+                <Space>
+                    <Button type="primary" onClick={save} disabled={!modified}>
+                        Save
+                    </Button>
+                    <Button onClick={reset} disabled={!modified}>
+                        Reset
+                    </Button>
+                </Space>
+            </div>
         </StyledFlex>
     )
 }
@@ -152,6 +213,13 @@ const StyledFlex = styled(Flex)`
         flex-grow: 1;
         font-family: monospace;
     }
+
+    .digital-input-grid {
+        display: grid;
+        align-items: center;
+        grid-template-columns: 2fr 3fr 1fr;
+        gap: 10px;
+    }
 `
 
 const IoCards: React.FC = () => {

libs/store/src/gbdb/facets.ts

@@ -60,3 +60,4 @@ export const FramesGbdbFacetSlice = configFacetFactory("frames")
 export const PointsGbdbFacetSlice = configFacetFactory("points")
 export const ToolsGbdbFacetSlice = configFacetFactory("tool")
 export const JointsGbdbFacetSlice = configFacetFactory("joint")
+export const DinGbdbFacetSlice = configFacetFactory("din")