Finish advanced config

src/Configurator/Components/Button/index.js

@@ -0,0 +1,38 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+
+import styles from './styles';
+
+const Button = ({ onClick, children, style }) => {
+
+    const [active, setActive] = useState(false);
+
+    const ref = useRef();
+
+    const handleClick = e => {
+
+        if (!ref.current.contains(e.target)) {
+            setActive(false);
+        }
+
+    }
+
+    return (
+        <motion.button
+            ref={ref}
+            style={{ ...styles.Button, ...style }}
+            animate={{
+                scale: active ? 0.9 : 1.0
+            }}
+            onClick={onClick}
+            onMouseDown={() => setActive(true)}
+            onMouseUp={() => setActive(false)}
+            onMouseLeave={() => setActive(false)}
+        >
+            { children }
+        </motion.button>
+    )
+
+};
+
+export default Button;

src/Configurator/Components/Button/styles.js

@@ -0,0 +1,18 @@
+const styles = {
+    Button: {
+        border: 'none',
+        outline: 'none',
+        padding: '0 32px',
+        boxSizing: 'border-box',
+        fontSize: 16,
+        fontWeight: 'bold',
+        lineHeight: '48px',
+        borderRadius: 8,
+        textAlign: 'center',
+        cursor: 'pointer',
+        backgroundColor: 'rgba(0,0,0,0.05)',
+        color: 'var(--primary-text-color)'
+    }
+};
+
+export default styles;

src/Configurator/utils.js

@@ -0,0 +1,115 @@
+const conditions = [
+    'Status',
+    'ETA',
+    'Elapsed',
+    'Hotend',
+    'Bed'
+];
+
+const printerTypes = {
+    "I3": "I3",
+    "Cantilever": "Cantilever"
+}
+
+const themes = {
+    'Default': 'Default',
+    'Neumorphic': 'Neumorphic'
+}
+
+
+/* Printer Entity ID -> Name; E.G. sensor.printer_name_current_state -> Printer Name */
+const printerName = ( entityId ) => {
+
+    if ( !entityId ) {
+        return undefined;
+    }
+
+    return entityId
+        .replace('_current_state', '')
+        .replace('sensor.', '')
+        .split("_")
+        .map(s => s.charAt(0).toUpperCase() + s.substring(1))
+        .join(" ");
+
+}
+
+/* Printer Entity ID -> Base Entity; E.G. sensor.printer_name_current_state -> sensor.printer_name */
+const printerBase = ( entityId ) => {
+
+    if ( !entityId ) {
+        return undefined;
+    }
+
+    return entityId
+        .replace('_current_state', '');
+
+}
+
+const getPrinters = ( hass ) => {
+
+    const printers = {};
+
+    Object.keys( hass.states ).filter(
+        entityId => (/sensor\..*_current_state/g).test(entityId)
+    ).map(
+        entityId => {
+
+            const name = printerName(entityId);
+            const base = printerBase(entityId);
+
+            printers[name] = base;
+
+        }
+    )
+
+
+    return printers;
+}
+
+const getToggleables = ( hass ) => {
+
+    const toggleables = {};
+
+    Object.keys(hass.states).filter(
+        entityId => (/^(switch|light)/g).test(entityId)
+    ).map( toggleable => toggleables[toggleable] = toggleable );
+
+    return toggleables;
+
+}
+
+/* Updates the Threedy Card config given updates */
+const updateConfig = ( threedy, modifiedConfig, updates ) => {
+
+    const event = new Event("config-changed", {
+        bubbles: true,
+        composed: true
+    });
+    event.detail = {
+        config: {
+            ...modifiedConfig,
+            ...updates
+        }
+    };
+    threedy.dispatchEvent(event);
+
+    return event.detail.config;
+}
+
+const updateValue = ( _updateConfig, key, value ) => {
+    _updateConfig({
+        [key]: value
+    })
+}
+
+
+export {
+    conditions,
+    printerTypes,
+    themes,
+    printerName,
+    getPrinters,
+    getToggleables,
+    updateConfig,
+    updateValue
+}