Finish graphical configurator

Author: Dan Greco

README.md

@@ -15,8 +15,10 @@
   - [~~Method 1: HACS~~](#method-1-hacs)
   - [Method 2: Manual](#method-2-manual)
 - [Config](#-config)
-  - [Required](#required)
-  - [Optional](#optional)
+  - [Graphical](#-Graphical)
+  - [Manual](#manual)
+    - [Required](#required)
+    - [Optional](#optional)
 - [Example Config](#-example-config)
 - [Custom Theming](#-custom-theming)
 - [Screenshots](#-screenshots)
@@ -65,15 +67,22 @@
 ## Config
 ---
 
-### Required
+### Graphical (Recommended)
+
+![graphical](https://github.com/dangreco/threedy/raw/master/screenshots/graphical.png)
+
+
+### Manual
+
+#### Required
 
 - ```type``` — Always ```'custom:threedy-card'```
 - ```base_entity``` — Take the beginning of one of the OctoPrint sensors of your printer. Example: for ```sensor.ender_3_v2_current_state``` it would be ```sensor_ender_3_v2```.
 - ```name``` — Can be whatever you want!
 - ```printer_type``` — Use a  printer style: ```'I3' | 'Cantilever' ```
 - ```monitored``` — A list of values to monitor throughout the print; gets displayed to the right of the printer.
 
-### Optional
+#### Optional
 
 - ```theme``` — Theme of the card: ```'Default' | 'Neumorphic' ```. Screenshots listed below.
 - ```font``` — Specify the font used in the card. By default it is ```sans-serif```.

dist/index.html

@@ -36,6 +36,9 @@
                         },
                         'switch.ender': {
 
+                        },
+                        'switch.light': {
+                            state: 'off'
                         }
                     },
                     callService: (domain, service, data) => {
@@ -53,6 +56,7 @@
                     theme: "Default",
                     scale: 1,
                     printer_type: 'I3',
+                    light_entity: 'switch.light',
                     font: 'Assistant',
                     monitored: [
                         "Status",

package.json

@@ -7,11 +7,10 @@
   "author": "Dan Greco",
   "license": "MIT",
   "dependencies": {
-    "@material-ui/core": "^4.11.3",
     "framer-motion": "^3.2.2-rc.1",
-    "jss": "^10.5.1",
     "moment": "^2.29.1",
     "react": "^17.0.1",
+    "react-beautiful-dnd": "^13.0.0",
     "react-cool-dimensions": "^1.2.0",
     "react-dom": "^17.0.1",
     "react-icons": "^4.1.0"

src/Configurator/index.js

@@ -1,47 +1,123 @@
-import React, { useState } from 'react';
-import Select from '@material-ui/core/Select';
-import MenuItem from '@material-ui/core/MenuItem';
-import TextField from '@material-ui/core/TextField';
+import React, { useEffect, useState } from 'react';
+import DragDrop from './Components/DragDrop';
+import Input from './Components/Input';
+import MultiSelector from './Components/MultiSelector';
+import Select from './Components/Select';
 
 import styles from './styles';
 
-const Configurator = ({ hass, config, configChanged }) => {
 
-    const [selected, setSelected] = useState(undefined);
+const defaultConditions = [
+    'Status',
+    'ETA',
+    'Elapsed',
+    'Hotend',
+    'Bed'
+]
 
-    const printers = Object.keys(hass.states).filter(entityId => (/sensor\..*_current_state/g).test(entityId)).map(
+
+const Configurator = ({ hass, config, threedy }) => {
+
+    const printers = [];
+    const [modifiedConfig, setModifiedConfig] = useState(config);
+
+    Object.keys(hass.states).filter(entityId => (/sensor\..*_current_state/g).test(entityId)).map(
         entityId => {
 
-            const printerSlug = entityId.replace('sensor.', '').replace('_current_state', '');
+            const base_entity = entityId.replace('_current_state', '');
+            const printerSlug = base_entity.replace('sensor.', '');
             const printerName = printerSlug.split("_").map(s => s.charAt(0).toUpperCase() + s.substring(1)).join(" ");
 
-            return {
-                name: printerName,
-                baseEntity: entityId.replace('_current_state', '')
-            }
+
+            printers[base_entity] = printerName;
         }
     )
 
+    useEffect(() => {
+        setModifiedConfig(config);
+    }, [config])
+
+    const updateConfig = (updates) => {
+
+        const event = new Event("config-changed", {
+            bubbles: true,
+            composed: true
+        });
+        event.detail = {
+            config: {
+                ...modifiedConfig,
+                ...updates
+            }
+        };
+        threedy.dispatchEvent(event);
+        setModifiedConfig(event.detail.config);
+    }
+
+    const changePrinter = ({ key: base_entity, value: name }) => {
+        updateConfig({
+            base_entity,
+            name
+        });
+    }
+
+    const changePrinterType = ({ key: printer_type, value: _ }) => {
+        updateConfig({
+            printer_type
+        })
+    }
+
+    const changePrinterName = (printerName) => {
+        updateConfig({
+            name: printerName
+        })
+    }
+
+    const changeMonitored = (monitored) => {
+        updateConfig({
+            monitored
+        })
+    }
+
+    if (!config) return <div></div>
+
     return (
         <div style={{ ...styles.Configurator }}>
             <p style={{ ...styles.Label }}>Printer</p>
-            <Select style={{ ...styles.PrinterSelect }} value={selected} onChange={(v) => setSelected(v)}>
-                <MenuItem value={"test"}>Test</MenuItem>
-                {
-                    printers.map(printer => (
-                        <MenuItem value={printer.baseEntity}>{printer.name}</MenuItem>
-                    ))
-                }
-            </Select>
+            <Select
+                placeholder="Select..."
+                options={printers}
+                onSelect={changePrinter}
+                initial={config.base_entity}
+            />
+
             {
-                selected ? (
+                modifiedConfig ? modifiedConfig.name ? (
                     <>
-                        <TextField label="Name" />
-                        <p style={{ ...styles.Label }}>Type</p>
+                        <p style={{ ...styles.Label }}>Printer Type</p>
+                        <Select
+                            placeholder="Select..."
+                            options={{
+                                "I3": "I3",
+                                "Cantilever": "Cantilever"
+                            }}
+                            onSelect={changePrinterType}
+                            initial={config.printer_type}
+                        />
+
+                        <p style={{ ...styles.Label }}>Name</p>
+                        <Input
+                            onUpdate={changePrinterName}
+                            initial={config.name || modifiedConfig.name}
+                        />
+
                         <p style={{ ...styles.Label }}>Monitored</p>
+                        <MultiSelector items={defaultConditions} initial={config.monitored} onChange={changeMonitored} />
                     </>
-                ) : (null)
+                ) : (null) : (null)
             }
+
+
+
         </div>
     )
 

src/Configurator/styles.js

@@ -6,6 +6,9 @@ const styles = {
         width: '100%'
     },
     Label:  {
+        marginBottom: 4,
+        fontWeight: 'bold',
+        fontSize: 14
     }
 };
 

src/Printers/I3/index.js

@@ -18,14 +18,12 @@ const I3 = ({ printerConfig }) => {
 
     const { ref, width, height, entry, unobserve, observe } = useDimensions({
         onResize: ({ width, height, entry, unobserve, observe }) => {
-            console.log("Foo")
             setDimensions(
                 getDimensions(printerConfig, {width, height}, config.scale || 1.0)
             )
         },
     });
 
-    console.log(width, height)
 
     const printing = (hass.states[`${config.base_entity}_current_state`] || { state: "unknown" }).state === 'Printing';
     const progress = (hass.states[`${config.base_entity}_job_percentage`] || { state: 0 }).state / 100;

src/index.js

@@ -3,17 +3,18 @@ import ReactDOM from 'react-dom';
 import NotConfigured from './Components/NotConfigured';
 import ThreedyWrapper from './Components/ThreedyWrapper';
 import Configurator from './Configurator';
-import { StylesProvider, jssPreset } from '@material-ui/styles';
-import { create } from 'jss';
 
 class ThreedyEditor extends HTMLElement {
 
-    _jss;
     _hass;
     _config;
 
-    set hass(hass)
+    constructor()
     {
+        super();
+    }
+
+    set hass(hass) {
         this._hass = hass;
         this._render();
     }
@@ -23,32 +24,16 @@ class ThreedyEditor extends HTMLElement {
         this._render();
     }
 
-    configChanged(newConfig) {
-        const event = new Event("config-changed", {
-            bubbles: true,
-            composed: true
-        });
-        event.detail = { config: newConfig };
-        this.dispatchEvent(event);
-    }
-
     connectedCallback() {
-        this._jss = create({
-            ...jssPreset(),
-            insertionPoint: this
-        });      
         this._render();
     }
 
-    _render() 
-    {   
-        if (!this._hass || !this._jss)
+    _render() {
+        if (!this._hass)
             return
 
         ReactDOM.render(
-            (<StylesProvider jss={this._jss}>
-                <Configurator hass={this._hass} config={this._config} configChanged={this.configChanged} />
-            </StylesProvider>),
+            <Configurator hass={this._hass} config={this._config} threedy={this} />,
             this
         );
     }
@@ -98,8 +83,7 @@ class ThreedyCard extends HTMLElement {
     }
 
 
-    static getConfigElement()
-    {
+    static getConfigElement() {
         return document.createElement('threedy-editor');
     }