Skip to content

Commit 742e31a

Browse files
FordiFordi
committed
Added actual ETA
1 parent cb70157 commit 742e31a

File tree

2 files changed

+94
-74
lines changed

2 files changed

+94
-74
lines changed

‎docs/MeaterDevice.js

+94-49
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
1-
import html from 'html';
2-
import css from 'css';
1+
import html from "html";
2+
import css from "css";
33

4-
const HalfMeter = (props) => html`<path id="halfMeter" d="
4+
const HalfMeter = (props) => html`<path
5+
id="halfMeter"
6+
d="
57
M50 0
68
A 50.4 50.4 0 0 0 7.2 76.5
79
l 8.7 -5.3 a 40.2 40.2 0 0 134.1 -61
810
z
9-
" ...${props} />`;
11+
"
12+
...${props}
13+
/>`;
1014

1115
const Meter = () => html`
1216
<defs>
@@ -20,37 +24,44 @@ const Meter = () => html`
2024
</linearGradient>
2125
</defs>
2226
<${HalfMeter} fill="url('#cool')" />
23-
<${HalfMeter} transform="translate(99, 0) scale(-1, 1)" fill="url('#warm')"/>
27+
<${HalfMeter} transform="translate(99, 0) scale(-1, 1)" fill="url('#warm')" />
2428
`;
2529

2630
const Marker = ({ temp, color }) => {
2731
if (Number.isNaN(parseFloat(temp))) return null;
2832
return html`
29-
<g transform-origin="50 50" transform=${`rotate(${temp * 230 / 205})`} >
30-
<path d="
33+
<g transform-origin="50 50" transform=${`rotate(${(temp * 230) / 205})`}>
34+
<path
35+
d="
3136
M 11, 69
3237
l -7.3, 7.5
3338
l -3.2, -6.8
34-
z" fill="#111F"/>
35-
<path d="
39+
z"
40+
fill="#111F"
41+
/>
42+
<path
43+
d="
3644
M 9.6, 69.7
3745
l -5.7, 5.5
3846
l -2.2, -4.8
39-
z" fill=${color}/>
47+
z"
48+
fill=${color}
49+
/>
4050
</g>
4151
`;
4252
};
4353

4454
const Spread = () => null;
4555

46-
const formatTemp = temp => Number.isNaN(temp) ? '--' : `${(temp * 9 / 5 + 32).toFixed(0)}ºF`;
47-
const tempColor = temp => {
48-
if (Number.isNaN(temp)) return '#292';
49-
console.log(temp * 230 / 205);
50-
}
51-
const formatTime = (time, retSecs) => {
56+
const formatTemp = (temp) =>
57+
Number.isNaN(temp) ? "--" : `${((temp * 9) / 5 + 32).toFixed(0)}ºF`;
58+
const tempColor = (temp) => {
59+
if (Number.isNaN(temp)) return "#292";
60+
console.log((temp * 230) / 205);
61+
};
62+
const formatDuration = (time, retSecs) => {
5263
const hours = Math.floor(time / 3600);
53-
const minutes = Math[retSecs ? 'floor' : 'round']((time % 3600) / 60);
64+
const minutes = Math[retSecs ? "floor" : "round"]((time % 3600) / 60);
5465
const block = [];
5566
if (hours) {
5667
block.unshift(`${hours.toFixed(0)}h`);
@@ -63,7 +74,23 @@ const formatTime = (time, retSecs) => {
6374
} else {
6475
block.push(`${minutes.toFixed(0)}m`);
6576
}
66-
return block.join(' ');
77+
return block.join(" ");
78+
};
79+
80+
const formatEta = (time, retSecs) => {
81+
const hours = Math.floor(time / 3600);
82+
const minutes = Math[retSecs ? "floor" : "round"]((time % 3600) / 60);
83+
const t = new Date();
84+
t.setHours(t.getHours() + hours);
85+
t.setMinutes(t.getMinutes() + minutes);
86+
if (retSecs) {
87+
t.setSeconds(t.getSeconds() + (time % 60));
88+
}
89+
let fmtTime = t.toLocaleTimeString();
90+
if (!retSecs) {
91+
fmtTime = fmtTime.replace(/:\d{2} /, "");
92+
}
93+
return fmtTime.toLowerCase();
6794
};
6895

6996
const bubble = css`
@@ -85,14 +112,14 @@ const bubble = css`
85112
`;
86113

87114
const Bubble = ({ color, label, content }) => html`
88-
<div
115+
<div
89116
className=${bubble.circle}
90117
style=${{
91118
backgroundColor: color,
92119
}}
93120
>
94121
<label>${label}</label>
95-
<span >${content}</span>
122+
<span>${content}</span>
96123
</div>
97124
`;
98125

@@ -108,58 +135,76 @@ const styles = css`
108135
font-family: Arial;
109136
font-size: 10px;
110137
text-anchor: middle;
111-
fill: #EEE;
138+
fill: #eee;
112139
text-shadow: 0 0 5px black;
113140
}
114141
`;
115142
export default ({
116143
width = 200,
117-
temperature: {
118-
internal,
119-
ambient
120-
},
144+
temperature: { internal, ambient },
121145
updated_at,
122146
cook,
123147
}) => {
124148
const {
125149
name,
126150
state,
127-
temperature: {
128-
peak,
129-
target,
130-
} = {},
131-
time: {
132-
elapsed,
133-
remaining,
134-
} = {},
151+
temperature: { peak, target } = {},
152+
time: { elapsed, remaining } = {},
135153
} = cook || {};
136-
const lastUpdate = Math.round((Date.now() / 1000) - updated_at);
154+
const lastUpdate = Math.round(Date.now() / 1000 - updated_at);
137155
return html`
138156
<div style=${{ width: `${width}px` }}>
139-
<div className=${styles.bubbles} style=${{ fontSize: `${width * 12 / 200}px`}}>
140-
<${Bubble} color="#52E" label="Internal" content=${formatTemp(internal)} />
141-
<${Bubble} color="#3C3" label="Target" content=${target ? formatTemp(target) : '--'} />
142-
<${Bubble} color="#E52" label="Ambient" content=${formatTemp(ambient)} />
157+
<div
158+
className=${styles.bubbles}
159+
style=${{ fontSize: `${(width * 12) / 200}px` }}
160+
>
161+
<${Bubble}
162+
color="#52E"
163+
label="Internal"
164+
content=${formatTemp(internal)}
165+
/>
166+
<${Bubble}
167+
color="#3C3"
168+
label="Target"
169+
content=${target ? formatTemp(target) : "--"}
170+
/>
171+
<${Bubble}
172+
color="#E52"
173+
label="Ambient"
174+
content=${formatTemp(ambient)}
175+
/>
143176
</div>
144-
<svg viewBox="-5 -10 110 86" width=${width} height=${width / 110 * 86} >
177+
<svg viewBox="-5 -10 110 86" width=${width} height=${(width / 110) * 86}>
145178
<${Meter} />
146179
<${Spread} low=${peak} high=${target} />
147-
<${Marker} color="#52E" temp=${internal || '--'} />
148-
<${Marker} color="#3C3" temp=${target || '--'} />
149-
<${Marker} color="#E52" temp=${ambient || '--'} />
180+
<${Marker} color="#52E" temp=${internal || "--"} />
181+
<${Marker} color="#3C3" temp=${target || "--"} />
182+
<${Marker} color="#E52" temp=${ambient || "--"} />
150183
<text className=${styles.cook.toString()} x="50" y="50">${name}</text>
151184
<text className=${styles.cook.toString()} x="50" y="60">
152-
${remaining && remaining >= 0 && `ETA ${formatTime(remaining)}`}
153-
${remaining < 0 && 'Estimating ETA'}
154-
${remaining === undefined && '--'}
185+
${remaining && remaining >= 0 && `...${formatDuration(remaining)}`}
186+
${remaining < 0 && "Estimating ETA"}
187+
${remaining === undefined && "--"}
155188
</text>
156-
<text className=${styles.cook.toString()} x="0" y="0" style="text-anchor: start;">
157-
${formatTime(lastUpdate, true)} ago
189+
${remaining &&
190+
remaining >= 0 &&
191+
html`
192+
<text className=${styles.cook.toString()} x="50" y="70">
193+
ETA ${formatEta(remaining)}
194+
</text>
195+
`}
196+
<text
197+
className=${styles.cook.toString()}
198+
x="0"
199+
y="0"
200+
style="text-anchor: start;"
201+
>
202+
${formatDuration(lastUpdate, true)} ago
158203
</text>
159204
<text className=${styles.cook.toString()} x="50" y="30">
160-
for ${formatTime(elapsed)}
205+
for ${formatDuration(elapsed)}
161206
</text>
162207
</svg>
163208
</div>
164209
`;
165-
};
210+
};

‎server/index.js

-25
This file was deleted.

0 commit comments

Comments
 (0)