Add vertical option

Author: Dan Greco

dist/index.html

@@ -63,11 +63,12 @@
                     type: 'custom:threedy-card',
                     base_entity: 'sensor.ender_3_v2',
                     name: "Ender 3 v2",
-                    theme: "Default",
+                    theme: "Neumorphic",
                     scale: 1,
                     temperature_unit: 'C',
                     printer_type: 'I3',
                     round_temperature: false,
+                    vertical: true,
                     use_24hr: true,
                     light_entity: 'switch.light',
                     camera_entity: "camera.test",

src/Components/Card/index.tsx

@@ -11,6 +11,7 @@ import Stats from '../Stats';
 
 import styles from './styles';
 import Camera from "../Camera";
+import {percentComplete} from "../Stats/utils";
 
 
 const Card = ({ }) => {
@@ -39,6 +40,9 @@ const Card = ({ }) => {
 
 
     const theme = config.theme || 'Default';
+    const vertical = config.vertical;
+    const round = config.round;
+    const percent = percentComplete(hass, config);
 
 
     const borderRadius = styles[theme] ? styles[theme].borderRadius : styles['Default'].borderRadius;
@@ -131,24 +135,31 @@ const Card = ({ }) => {
                 </div>
 
                 <motion.div
-                    style={{ ...styles.Content }}
+                    style={{ ...styles.Content, flexDirection: vertical ? 'column' : 'row' }}
                     animate={{ height: hidden ? 0.0 : 'auto', opacity: hidden ? 0.0 : 1.0, scale: hidden ? 0.0 : 1.0 }}
                     transition={{ ease: "easeInOut", duration: 0.25 }}
                 >
-                    <div style={{ ...styles.Section }}>
+                    <div style={{ ...styles.Section, width: vertical ? '100%' : '50%', height: vertical ? 'auto' : '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingLeft: vertical ? 80 : 16, paddingRight: vertical ? 80 : 16 }}>
                         <PrinterView
                             toggleVideo={toggleVideo}
                             hasCamera={config.camera_entity !== undefined}
                         />
+                        {
+                            vertical ? (
+                                <p style={{ width: '50%', fontSize: 36 }}>{round ? Math.round(percent) : percent}%</p>
+                            ) : null
+                        }
                     </div>
                     <div
                         style={{
                             ...styles.Section,
-                            paddingLeft: 16,
-                            paddingRight: 32
+                            paddingLeft: vertical ? 64 : 16,
+                            paddingRight: vertical ? 64 : 32,
+                            width: vertical ? '100%' : '50%',
+                            height: vertical ? 'auto' : '100%'
                         }}
                     >
-                        <Stats />
+                        <Stats showPercent={!vertical} />
                     </div>
                 </motion.div>
 

src/Components/Card/styles.ts

@@ -13,8 +13,6 @@ const styles = {
     },
     Section: {
         boxSizing: 'border-box',
-        width: '50%',
-        height: '100%',
         padding: '0 16px 32px 16px'
     },
     Default: {
@@ -60,7 +58,6 @@ const styles = {
     Content: {
         width: '100%',
         display: 'flex',
-        flexDirection: 'row',
         justifyContent: 'center',
         alignItems: 'center',
         boxSizing: 'border-box'

src/Components/Stats/TimeStat.tsx

@@ -56,16 +56,23 @@ type TimeStatProps = {
 const TimeStat: React.FC<TimeStatProps> = ({timeEntity, condition, config, direction}) => {
 
     const [ time, setTime ] = useState<number>( timeEntity.state || 0);
+    const [ lastIntervalId, setLastIntervalId ] = useState<number>(-1);
+
+    const incTime = () => setTime( time => time + direction );
 
     useEffect(() => {
-        setInterval(
-            () => setTime(time => time + direction),
+
+        if (lastIntervalId !== -1) clearInterval(lastIntervalId);
+
+        setTime(timeEntity.state || 0);
+
+        const id = setInterval(
+            incTime,
             1000
         );
-    }, [])
 
-    useEffect(() => {
-        setTime(timeEntity.state || 0);
+        setLastIntervalId(id);
+
     }, [timeEntity])
 
     return (

src/Components/Stats/index.tsx

@@ -2,24 +2,31 @@ import React, { useContext } from 'react';
 import ThreedyContext from '../../Contexts/ThreedyContext';
 
 import styles from './styles';
-import {renderStats} from "./utils";
+import {percentComplete, renderStats} from "./utils";
 
+type StatsProps = {
+    showPercent?: boolean
+};
 
-const Stats = () => {
+const Stats: React.FC<StatsProps> = ({ showPercent = true }) => {
 
     const {
         hass,
         config,
     } = useContext(ThreedyContext);
 
     const round = config.round === undefined ? true : config.round;
-    const percentComplete = (hass.states[config.use_mqtt ? `${config.base_entity}_print_progress` : `${config.base_entity}_job_percentage`] || { state: -1.0 }).state;
+    const percent = percentComplete(hass, config);
 
     return (
         <div style={{ ...styles.Stats }}>
-            <div style={{ ...styles.Percent }}>
-                <p style={{ ...styles.PercentText }}>{round ? Math.round(percentComplete) : percentComplete}%</p>
-            </div>
+            {
+                showPercent ? (
+                    <div style={{ ...styles.Percent }}>
+                        <p style={{ ...styles.PercentText }}>{round ? Math.round(percent) : percent}%</p>
+                    </div>
+                ) : (null)
+            }
             <div style={{ ...styles.Monitored }}>
                 {
                     config.monitored ? renderStats(hass, config) : null

src/Components/Stats/utils.tsx

@@ -129,6 +129,14 @@ const renderStats = (
 
 }
 
+const percentComplete = (
+    hass: HomeAssistant,
+    config: ThreedyConfig
+) => {
+    return (hass.states[config.use_mqtt ? `${config.base_entity}_print_progress` : `${config.base_entity}_job_percentage`] || { state: -1.0 }).state;
+}
+
 export {
-    renderStats
+    renderStats,
+    percentComplete
 }

tsconfig.json

@@ -8,7 +8,8 @@
     "removeComments": true,
     "sourceMap": true,
     "allowJs": true,
-    "jsx": "react"
+    "jsx": "react",
+    "allowSyntheticDefaultImports": true
   },
   "exclude": ["build"]
 }