Added number modification

src/App.js

@@ -1,16 +1,39 @@
 import React from "react";
 import logo from "./logo.svg";
 //import "./App.css";
-import { Grommet, Box } from "grommet";
+import { Grommet, Box, grommet } from "grommet";
+import { deepMerge } from "grommet/utils";
 
 import client from "./apolloclient";
 import { ApolloProvider } from "@apollo/react-hooks";
 import Devices from "./devices";
 
+const theme = deepMerge(grommet, {
+  global: {
+    colors: {
+      brand: "#ff4e4e",
+      text: "#336",
+    },
+    focus: {
+      border: {
+        color: "#ff4e4e80",
+      },
+      outline: {
+        size: "0px",
+      },
+    },
+  },
+  button: {
+    border: {
+      radius: "4px",
+    },
+  },
+});
+
 function App() {
   return (
     <ApolloProvider client={client}>
-      <Grommet full>
+      <Grommet theme={theme} full>
         <Box fill>
           <Devices />
         </Box>

src/components/indi/number.js

@@ -1,20 +1,55 @@
-import React from "react";
+import React, { useState } from "react";
 import { Box, TextInput, Button } from "grommet";
+import gql from "graphql-tag";
+import { useMutation } from "@apollo/react-hooks";
+
+const SEND = gql`
+  mutation sendOneNumber($input: OneNumberInput!) {
+    sendOneNumber(input: $input)
+  }
+`;
+
+const NumberValue = ({ vector, value }) => {
+  const [newval, setNewval] = useState(value.number);
+  const [sendOneNumber] = useMutation(SEND);
+
+  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>
+      {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: parseFloat(newval),
+              };
+              console.log(input);
+              sendOneNumber({ variables: { input } }).then((data) => {
+                console.log(data);
+              });
+            }}
+          ></Button>
+        </Box>
+      )}
+    </Box>
+  );
+};
 
 const NumberVector = ({ vector }) => {
   return (
     <Box gap="xsmall">
       {vector.values.map((v) => (
-        <Box key={v.name} direction="row" align="center">
+        <NumberValue key={v.name} vector={vector} value={v} />
-          <Box width="small">{v.label || v.name} ({v.min},{v.max},{v.step})</Box>
-          <Box width="small">{v.formated || v.number}</Box>
-          {vector.permission !== 0 && (
-            <Box direction="row" align="center" gap="xsmall">
-              <TextInput></TextInput>
-              <Button primary label="Set"></Button>
-            </Box>
-          )}
-        </Box>
       ))}
     </Box>
   );

src/components/indi/property.js

@@ -1,7 +1,8 @@
 import React from "react";
 import { Box } from "grommet";
+import { StatusGoodSmall } from "grommet-icons";
 
-import { stateToEmoji } from "../../utils/indi";
+import { stateToColor } from "../../utils/indi";
 import LightVector from "./light";
 import NumberVector from "./number";
 import SwitchVector from "./switch";
@@ -9,12 +10,13 @@ import TextVector from "./text";
 
 const Property = ({ property }) => {
   return (
-    <Box direction="row" margin={{bottom: "medium"}} align="center">
+    <Box direction="row" margin={{ bottom: "medium" }} align="center">
-      <Box width="medium">
+      <Box width="medium" direction="row" align="center" gap="small">
-        <div>
+        <StatusGoodSmall
-          {stateToEmoji(property.vector.state)}{" "}
+          size="medium"
-          <strong>{property.vector.label || property.name}</strong>
+          color={stateToColor(property.vector.state)}
-        </div>
+        />
+        <strong>{property.vector.label || property.name}</strong>
       </Box>
       {property.vector.__typename === "NumberVector" && (
         <NumberVector vector={property.vector} />

src/components/indi/switch.js

@@ -4,7 +4,7 @@ import gql from "graphql-tag";
 import { useMutation } from "@apollo/react-hooks";
 
 const SEND = gql`
-  mutation sendSwitch($input: SwitchInput) {
+  mutation sendSwitch($input: SwitchInput!) {
     sendSwitch(input: $input)
   }
 `;

src/devices.js

@@ -58,12 +58,24 @@ const Devices = () => {
   }
 
   return (
-    <Box fill>
+    <Box fill background="light-3">
       <Header background="brand" pad="small">
         <Box>
-          <Heading margin="xsmall">ASTRAW</Heading>
+          <Heading margin="xsmall" level={2}>
+            AST(RAW)NOMY
+          </Heading>
         </Box>
-        <Box direction="row" gap="medium">
+        <Box direction="row" gap="xsmall">
+          <Button
+            label="Capture"
+            onClick={() => {
+            }}
+          />
+          <Button
+            label="INDI panel"
+            onClick={() => {
+            }}
+          />
           {!connected ? (
             <Button
               label="Connect"
@@ -84,7 +96,7 @@ const Devices = () => {
 
       <Box overflow="auto">
         {data ? (
-          <Tabs justify="start" key="d.id">
+          <Tabs justify="start">
             {data && data.devices ? (
               data.devices.map((d) => (
                 <Tab title={d.name} key={d.id}>

src/utils/indi.js

@@ -42,3 +42,16 @@ export function stateToEmoji(state) {
       return "🔴";
   }
 }
+
+export function stateToColor(state) {
+  switch (state) {
+    case 0:
+      return "status-unknown";
+    case 1:
+      return "status-ok";
+    case 2:
+      return "status-warning";
+    case 3:
+      return "status-error";
+  }
+}