Fix time

Author: Dan Greco

dist/index.html

@@ -68,7 +68,6 @@
                     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

@@ -139,22 +139,23 @@ const Card = ({ }) => {
                     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, width: vertical ? '100%' : '50%', height: vertical ? 'auto' : '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingLeft: vertical ? 80 : 16, paddingRight: vertical ? 80 : 16 }}>
+                    <div style={{ ...styles.Section, width: vertical ? '100%' : '50%', height: vertical ? 'auto' : '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingLeft: vertical ? 64 : 16, paddingRight: vertical ? 64 : 16 }}>
                         <PrinterView
                             toggleVideo={toggleVideo}
                             hasCamera={config.camera_entity !== undefined}
+                            style={{width: vertical ? 'auto' : '100%', flexGrow: 1}}
                         />
                         {
                             vertical ? (
-                                <p style={{ width: '50%', fontSize: 36 }}>{round ? Math.round(percent) : percent}%</p>
+                                <p style={{ width: '50%', fontSize: 36, textAlign: 'center', fontWeight: 'bold' }}>{round ? Math.round(percent) : percent}%</p>
                             ) : null
                         }
                     </div>
                     <div
                         style={{
                             ...styles.Section,
-                            paddingLeft: vertical ? 64 : 16,
-                            paddingRight: vertical ? 64 : 32,
+                            paddingLeft: vertical ? 32 : 16,
+                            paddingRight: vertical ? 32 : 32,
                             width: vertical ? '100%' : '50%',
                             height: vertical ? 'auto' : '100%'
                         }}

src/Components/PrinterView/index.tsx

@@ -6,7 +6,7 @@ import I3 from '../../Printers/I3';
 
 import styles from './styles';
 
-const PrinterView = ({ toggleVideo, hasCamera }) => {
+const PrinterView = ({ toggleVideo, hasCamera, style }) => {
 
     const {
         hass,
@@ -45,6 +45,7 @@ const PrinterView = ({ toggleVideo, hasCamera }) => {
             ref={ref}
             style={{
                 ...styles.PrinterView,
+                ...style,
                 cursor: hasCamera ? 'pointer' : 'default'
             }}
         >

src/Components/PrinterView/styles.ts

@@ -1,6 +1,5 @@
 const styles = {
     PrinterView: {
-        width: '100%',
         height: '100%',
         boxSizing: 'border-box'
     }

src/Components/Stats/TimeStat.tsx

@@ -55,10 +55,10 @@ type TimeStatProps = {
 
 const TimeStat: React.FC<TimeStatProps> = ({timeEntity, condition, config, direction}) => {
 
-    const [ time, setTime ] = useState<number>( timeEntity.state || 0);
+    const [ time, setTime ] = useState<number>( parseInt(timeEntity.state) || 0);
     const [ lastIntervalId, setLastIntervalId ] = useState<number>(-1);
 
-    const incTime = () => setTime( time => time + direction );
+    const incTime = () => setTime( time => (parseInt(time) + parseInt(direction)) );
 
     useEffect(() => {