Add derivative displays

src/back/routes/dashboard.sreact.tsx

@@ -34,6 +34,11 @@ async function with_unit(s: HA_RESPONSE | Promise<HA_RESPONSE>) {
 	return `${s.state}${s.attributes.unit_of_measurement as string}`;
 }
 
+async function arrow(entity: string) {
+	const number = parseFloat((await get_state(entity)).state);
+	return number < 0 ? "↓" : number > 0 ? "↑" : "=";
+}
+
 export default new (class DashboardPage extends StatefulPage<State, typeof actions> {
 	actions = actions;
 
@@ -49,18 +54,8 @@ export default new (class DashboardPage extends StatefulPage<State, typeof actio
 		}
 	}
 
-	render(ctx: BaseContext, state: State, inputs: Record<string, string>) {
+	async render(ctx: BaseContext, state: State, inputs: Record<string, string>) {
 		const date = new Date();
-		const stuff = [
-			{ label: "Temperatura na balkonie", entity: "input_number.balkon_average" },
-			{ label: "Temperatura w salonie", entity: "sensor.ewelink_th01_temperature" },
-			{ label: "Wilgotność w salonie", entity: "sensor.ewelink_th01_humidity" },
-			{ label: "Temperatura na strychu", entity: "sensor.strych_temperature_3" },
-			{
-				label: "Docelowa temp. na strychu",
-				entity: "input_number.strych_target_temperature",
-			},
-		];
 
 		return (
 			<div style="font-size: 2rem">
@@ -70,14 +65,56 @@ export default new (class DashboardPage extends StatefulPage<State, typeof actio
 				</div>
 				<table style="margin: 0 auto">
 					<tbody>
-						{stuff.map(({ label, entity }) => (
 						<tr>
-								<td style="text-align: right">{label}:</td>
+							<td style="text-align: right">Temperatura na balkonie:</td>
+							<td>
+								<strong>
+									{with_unit(get_state("input_number.balkon_average"))}
+									{arrow("sensor.balkon_temperature_derivative")}
+								</strong>
+							</td>
+						</tr>
+						<tr>
+							<td style="text-align: right">Temperatura w salonie:</td>
+							<td>
+								<strong>
+									{with_unit(
+										get_state("sensor.ewelink_th01_temperature")
+									)}
+									{arrow("sensor.temperatura_w_salonie_derivative")}
+								</strong>
+							</td>
+						</tr>
+						<tr>
+							<td style="text-align: right">Wilgotność w salonie</td>
 							<td>
-									<strong>{with_unit(get_state(entity))}</strong>
+								<strong>
+									{with_unit(get_state("sensor.ewelink_th01_humidity"))}
+								</strong>
 							</td>
 						</tr>
-						))}
+						<tr>
+							<td style="text-align: right">Temperatura na strychu</td>
+							<td>
+								<strong>
+									{with_unit(get_state("sensor.strych_temperature_3"))}
+									{arrow("sensor.strych_temperature_derivative")}
+								</strong>
+							</td>
+						</tr>
+						{/*
+						<tr>
+							<td style="text-align: right">Docelowa temp. na strychu</td>
+							<td>
+								<strong>
+									{with_unit(
+										get_state(
+											"input_number.strych_target_temperature"
+										)
+									)}
+								</strong>
+							</td>
+							</tr>*/}
 					</tbody>
 				</table>
 				{this.makeActionButton(state, {