Added messages, fixed light property, more

src/App.js

@@ -14,6 +14,12 @@ const theme = deepMerge(grommet, {
       brand: "#ff4e4e",
       text: "#336",
     },
+    input: {
+      padding: {
+        horizontal: "small",
+        vertical: "xsmall",
+      },
+    },
     focus: {
       border: {
         color: "#ff4e4e80",
@@ -28,6 +34,16 @@ const theme = deepMerge(grommet, {
       radius: "4px",
     },
   },
+  tabs: {
+    header: {
+      background: "#ccc",
+    },
+  },
+  tab: {
+    margin: {
+      vertical: "xsmall",
+    },
+  },
 });
 
 function App() {

src/apolloclient.js

@@ -69,6 +69,13 @@ const client = new ApolloClient({
       },
     },
   }),
+  resolvers: {
+    Device: {
+      messages() {
+        return [];
+      },
+    },
+  },
 });
 
 const CONNECTED = gql`
@@ -119,6 +126,7 @@ const GETDEVICES = gql`
     devices {
       id
       ...DeviceInfo
+      messages @client
       properties {
         id
         name
@@ -136,6 +144,7 @@ const GETDEVICE = gql`
     device(id: $id) {
       id
       ...DeviceInfo
+      messages @client
       properties {
         id
         name
@@ -155,6 +164,7 @@ client
   .subscribe(({ data }) => {
     const res = client.readQuery({ query: GETDEVICES });
     data.newDevice.properties = [];
+    data.newDevice.messages = [];
     client.writeQuery({
       query: GETDEVICES,
       data: { devices: [...res.devices, data.newDevice] },
@@ -239,4 +249,41 @@ client
     }
   });
 
+const NEW_MESSAGE = gql`
+  subscription newMessage {
+    newMessage {
+      id
+      device {
+        id
+      }
+      message
+    }
+  }
+`;
+
+client
+  .subscribe({
+    query: NEW_MESSAGE,
+  })
+  .subscribe(({ data }) => {
+    const res = client.readQuery({
+      query: GETDEVICE,
+      variables: { id: data.newMessage.device.id },
+    });
+    const messages = res.device.messages
+      ? [data.newMessage.message, ...res.device.messages]
+      : [data.newMessage.message];
+
+    client.writeQuery({
+      query: GETDEVICE,
+      variables: { id: res.device.id },
+      data: {
+        device: {
+          ...res.device,
+          messages,
+        },
+      },
+    });
+  });
+
 export default client;

src/components/indi/device.js

@@ -1,9 +1,10 @@
-import React, { useState, useEffect } from "react";
-import { useMutation } from "@apollo/react-hooks";
-import { driversToInterfaces } from "../../utils/indi";
+import React, { useState, useEffect, Fragment } from "react";
+import { useMutation, useApolloClient  } from "@apollo/react-hooks";
+import { msgToColor } from "../../utils/indi";
 import Property from "./property";
 import gql from "graphql-tag";
-import { Box, Button, Tabs, Tab } from "grommet";
+import { Box, Button, Tabs, Tab, Text, Layer } from "grommet";
+import { Close, Trash } from "grommet-icons";
 
 const CONNECT_DEVICE = gql`
   mutation connectDevice($id: String!) {
@@ -13,7 +14,14 @@ const CONNECT_DEVICE = gql`
   }
 `;
 
-const Device = ({ device }) => {
+const MSGS_FRAGMENT = gql`
+  fragment DeviceMsgs on Device {
+    messages
+  }
+`;
+
+const Device = ({ device, messages, onMessagesClosed }) => {
+  const client = useApolloClient();
   const [connect] = useMutation(CONNECT_DEVICE, {
     variables: { id: device.id },
   });
@@ -40,12 +48,16 @@ const Device = ({ device }) => {
           }}
         />
       )}
-      <Tabs justify="start" activeIndex={currentTab} onActive={(nextTab) => {
+      <Tabs
+        justify="start"
+        activeIndex={currentTab}
+        onActive={(nextTab) => {
           setCurrentTab(nextTab);
           const newValue = { ...selectedTabs };
           newValue[device.id] = nextTab;
-        setSelectedTabs(newValue)
-      }}>
+          setSelectedTabs(newValue);
+        }}
+      >
         {groups.map((g) => (
           <Tab title={g} key={g}>
             <Box pad="small">
@@ -57,6 +69,32 @@ const Device = ({ device }) => {
           </Tab>
         ))}
       </Tabs>
+
+      {messages ? (
+        <Layer position="right" full="vertical" modal={false}>
+          <Box direction="row">
+            <Button icon={<Close />} onClick={() => onMessagesClosed()} />
+            <Button
+              icon={<Trash />}
+              onClick={() => {
+                client.writeFragment({
+                  id: client.cache.config.dataIdFromObject(device),
+                  fragment: MSGS_FRAGMENT,
+                  data: {
+                    __typename: "Device",
+                    messages: [],
+                  },
+                });
+              }}
+            />
+          </Box>
+          <Box width="medium" pad="small">
+            {device.messages.map((msg) => (
+              <Text color={msgToColor(msg)}>{msg}</Text>
+            ))}
+          </Box>
+        </Layer>
+      ) : null}
     </Box>
   );
 };

src/components/indi/light.js

@@ -1,14 +1,22 @@
 import React from "react";
+import { Box, Text } from "grommet";
+import { StatusGoodSmall } from "grommet-icons";
 
-import { stateToEmoji } from "../../utils/indi";
+import { stateToColor } from "../../utils/indi";
 
 const LightVector = ({ vector }) => {
   return (
-    <div>
-      {vector.values.map(v => (
-        <div key={v.name}>{stateToEmoji(v.switch)} {v.label || v.name}</div>
+    <Box gap="xsmall">
+      {vector.values.map((v) => (
+        <Box key={v.name} direction="row" align="center" gap="small">
+          <StatusGoodSmall
+            size="medium"
+            color={stateToColor(v.light)}
+          />
+          <Box><Text>{v.label || v.name}</Text></Box>
+        </Box>
       ))}
-    </div>
+    </Box>
   );
 };
 

src/components/indi/number.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Box, TextInput, Button } from "grommet";
+import { Box, TextInput, Button, Text } from "grommet";
 import gql from "graphql-tag";
 import { useMutation } from "@apollo/react-hooks";
 
@@ -15,8 +15,12 @@ const NumberValue = ({ vector, value }) => {
 
   return (
     <Box key={value.name} direction="row" align="center">
-      <Box width="small">{value.label || value.name}</Box>
-      <Box width="small">{value.formated || value.number}</Box>
+      <Box width="small">
+        <Text>{value.label || value.name}</Text>
+      </Box>
+      <Box width="small">
+        <Text>{value.formated || value.number}</Text>
+      </Box>
       {vector.permission !== 0 && (
         <Box direction="row" align="center" gap="xsmall">
           <TextInput
@@ -33,10 +37,8 @@ const NumberValue = ({ vector, value }) => {
                 name: value.name,
                 value: parseFloat(newval),
               };
-              console.log(input);
-              sendOneNumber({ variables: { input } }).then((data) => {
-                console.log(data);
-              });
+
+              sendOneNumber({ variables: { input } });
             }}
           ></Button>
         </Box>

src/components/indi/property.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box } from "grommet";
+import { Box, Text } from "grommet";
 import { StatusGoodSmall } from "grommet-icons";
 
 import { stateToColor } from "../../utils/indi";
@@ -16,7 +16,7 @@ const Property = ({ property }) => {
           size="medium"
           color={stateToColor(property.vector.state)}
         />
-        <strong>{property.vector.label || property.name}</strong>
+        <Text>{property.vector.label || property.name}</Text>
       </Box>
       {property.vector.__typename === "NumberVector" && (
         <NumberVector vector={property.vector} />

src/components/indi/switch.js

@@ -35,14 +35,8 @@ const SwitchVector = ({ vector }) => {
               property: vector.name,
               values: newValues,
             };
-            console.log(vector.rule);
-            console.log(input);
 
-            sendSwitch({
-              variables: { input },
-            }).then((data) => {
-              console.log(data);
-            });
+            sendSwitch({ variables: { input } });
           }}
         ></Button>
       ))}

src/components/indi/text.js

@@ -1,7 +1,59 @@
-import React from "react";
-import { Box, Button, TextInput } from "grommet";
+import React, { useState } from "react";
+import { Box, Button, TextInput, Text } from "grommet";
+import gql from "graphql-tag";
+import { useMutation } from "@apollo/react-hooks";
+
+const SEND = gql`
+  mutation sendOneText($input: OneTextInput!) {
+    sendOneText(input: $input)
+  }
+`;
+
+const TextValue = ({ vector, value }) => {
+  const [newval, setNewval] = useState(value.text);
+  const [sendOneText] = useMutation(SEND);
+
+  return (
+    <Box key={value.name} direction="row" align="center">
+      <Box width="small"><Text>{value.label || value.name}</Text></Box>
+      <Box width="small"><Text>{value.text}</Text></Box>
+      {vector.permission !== 0 && (
+        <Box direction="row" align="center" gap="xsmall">
+          <TextInput
+            value={newval}
+            onChange={(e) => setNewval(e.target.value)}
+          ></TextInput>
+          <Button
+            primary
+            label="Set"
+            onClick={() => {
+              const input = {
+                device: vector.device,
+                property: vector.name,
+                name: value.name,
+                value: newval,
+              };
+              console.log(input);
+              sendOneText({ variables: { input } });
+            }}
+          ></Button>
+        </Box>
+      )}
+    </Box>
+  );
+};
 
 const TextVector = ({ vector }) => {
+  return (
+    <Box gap="xsmall">
+      {vector.values.map((v) => (
+        <TextValue key={v.name} vector={vector} value={v} />
+      ))}
+    </Box>
+  );
+};
+
+/*const TextVector = ({ vector }) => {
   return (
     <Box gap="xsmall">
       {vector.values.map((v) => (
@@ -18,6 +70,6 @@ const TextVector = ({ vector }) => {
       ))}
     </Box>
   );
-};
+};*/
 
 export default TextVector;

src/devices.js

@@ -4,7 +4,8 @@ import { useQuery, useSubscription, useMutation } from "@apollo/react-hooks";
 import gql from "graphql-tag";
 import { deviceInfoFragment, propertyVectorFragment } from "./graphql/fragment";
 import Device from "./components/indi/device";
-import { Box, Tabs, Tab, Button, Header, Heading } from "grommet";
+import { Box, Tabs, Tab, Button, Header, Heading, Layer } from "grommet";
+import { Contact } from "grommet-icons";
 import { isConnectedQuery } from "./graphql/query";
 
 const GETDEVICES = gql`
@@ -12,6 +13,7 @@ const GETDEVICES = gql`
     devices {
       id
       ...DeviceInfo
+      messages @client
       properties {
         id
         name
@@ -52,6 +54,7 @@ const Devices = () => {
   const { data } = useQuery(GETDEVICES);
   const [connect] = useMutation(CONNECT);
   const [disconnect] = useMutation(DISCONNECT);
+  const [openMsg, setOpenMsg] = useState(false);
 
   if (!data || !data.devices) {
     return <div>No data</div>;
@@ -66,16 +69,8 @@ const Devices = () => {
           </Heading>
         </Box>
         <Box direction="row" gap="xsmall">
-          <Button
-            label="Capture"
-            onClick={() => {
-            }}
-          />
-          <Button
-            label="INDI panel"
-            onClick={() => {
-            }}
-          />
+          <Button label="Capture" onClick={() => {}} />
+          <Button label="INDI panel" onClick={() => {}} />
           {!connected ? (
             <Button
               label="Connect"
@@ -91,16 +86,25 @@ const Devices = () => {
               }}
             />
           )}
+          <Button icon={<Contact />} onClick={() => setOpenMsg(true)} />
         </Box>
       </Header>
 
+      {false && (
+        <Layer full="vertical" position="right" modal={false}>
+          <Box width="medium" fill="vertical">
+            bla
+          </Box>
+        </Layer>
+      )}
+
       <Box overflow="auto">
         {data ? (
           <Tabs justify="start">
             {data && data.devices ? (
               data.devices.map((d) => (
                 <Tab title={d.name} key={d.id}>
-                  <Device device={d} />
+                  <Device device={d} messages={openMsg} onMessagesClosed={() => setOpenMsg(false)}/>
                 </Tab>
               ))
             ) : (

src/utils/indi.js

@@ -55,3 +55,15 @@ export function stateToColor(state) {
       return "status-error";
   }
 }
+
+export function msgToColor(msg) {
+  if (msg.match(/\[INFO\]/)) {
+    return "status-ok";
+  } else if (msg.match(/\[WARNING\]/)) {
+    return "status-warning";
+  } else if (msg.match(/\[ERROR\]/)) {
+    return "status-error";
+  } else {
+    return "status-unknown";
+  }
+}