84 lines
1.9 KiB
TypeScript
84 lines
1.9 KiB
TypeScript
import dayjs from "dayjs";
|
|
import relativeTime from "dayjs/plugin/relativeTime";
|
|
|
|
dayjs.extend(relativeTime);
|
|
|
|
type SensorReading = {
|
|
val: number;
|
|
unit: string;
|
|
when: dayjs.Dayjs;
|
|
title: string;
|
|
};
|
|
|
|
const mockSensorReadings: SensorReading[] = [
|
|
{
|
|
title: "Temperature",
|
|
val: 22.5,
|
|
unit: "°C",
|
|
when: dayjs().subtract(2, "minute"),
|
|
},
|
|
{
|
|
title: "Humidity",
|
|
val: 45.3,
|
|
unit: "%",
|
|
when: dayjs().subtract(1, "minute"),
|
|
},
|
|
{ title: "Pressure", val: 1013.25, unit: "hPa", when: dayjs() },
|
|
{
|
|
title: "PM 1.0",
|
|
val: 8.2,
|
|
unit: "µg/m³",
|
|
when: dayjs().subtract(30, "second"),
|
|
},
|
|
{
|
|
title: "PM 2.5",
|
|
val: 12.7,
|
|
unit: "µg/m³",
|
|
when: dayjs().subtract(30, "second"),
|
|
},
|
|
{
|
|
title: "PM 10",
|
|
val: 24.1,
|
|
unit: "µg/m³",
|
|
when: dayjs().subtract(45, "second"),
|
|
},
|
|
];
|
|
|
|
function SensorReadingCard({ reading }: { reading: SensorReading }) {
|
|
const fontSize = reading.unit.length > 2 ? "text-4xl" : "text-6xl";
|
|
return (
|
|
<div class="rounded-md bg-green-300 p-4 flex flex-col justify-center items-center">
|
|
<h1 class={`${fontSize} font-sans mb-4`}>
|
|
{reading.val} {reading.unit}
|
|
</h1>
|
|
<hr class="border-t border-black w-full my-2" />
|
|
<h2>{reading.title}</h2>
|
|
<p class="text-sm">updated: {reading.when.fromNow()}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function App() {
|
|
// const [count, setCount] = createSignal(0)
|
|
|
|
return (
|
|
<div class="h-screen flex flex-col">
|
|
<header class="h-8 bg-pink-100"></header>
|
|
<main class="h-full grid grid-cols-3 grid-rows-3 gap-8 p-8">
|
|
{mockSensorReadings.map((reading) => (
|
|
<SensorReadingCard reading={reading} />
|
|
))}
|
|
</main>
|
|
<footer class="px-2 h-8 flex items-center text-sm">
|
|
<a
|
|
class="underline"
|
|
href="https://git.travisshears.com/travisshears/weather-portal"
|
|
>
|
|
Quellcode
|
|
</a>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|