Initial commit

2024-01-04 02:38:10 +01:00 · 2024-01-04 02:38:10 +01:00 · 5e8a9cc55c
commit 5e8a9cc55c
9 changed files with 3881 additions and 0 deletions
--- a/src/index.html
+++ b/src/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="index.scss">
+    <title>Energiepreise</title>
+
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="application-name" content="Energiepreise">
+  </head>
+  <body>
+    <script type="module" src="index.ts"></script>
+  </body>
+</html>
--- a/src/index.scss
+++ b/src/index.scss
@ -0,0 +1,32 @@
+@import 'npm:bulma/bulma.sass';
+
+.table td {
+    border-bottom-width: 0;
+    border-top-width: 1px;
+}
+
+table {
+    table-layout: fixed;
+    text-align: center;
+}
+
+tr:first-child {
+    font-size: 10lvh;
+    background: white !important;
+
+    & > td:first-child {
+        display: none;
+    }
+
+    & > td:nth-child(-n+2) {
+        position: relative;
+        left: 25%;
+
+        &::after {
+            content: "Eur/MWh";
+            vertical-align: sub;
+            font-size: small;
+        }
+    }
+}
+
--- a/src/index.ts
+++ b/src/index.ts
@ -0,0 +1,71 @@
+interface MarketSlice {
+    startTimestamp: Date;
+    endTimestamp: Date;
+    marketPrice: number;
+    unit: string;
+}
+
+interface MarketData {
+    object: string;
+    url: string;
+    data: MarketSlice[];
+}
+
+const TIME_FORMAT = Intl.DateTimeFormat(undefined, {
+    month: "numeric",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+});
+
+async function getMarketData(): Promise<MarketData> {
+    const request = await fetch("https://api.awattar.at/v1/marketdata");
+    const data = await request.json();
+
+    return {
+        object: data.object,
+        url: data.url,
+        data: data.data.map((slice) => {
+            return {
+                startTimestamp: new Date(slice.start_timestamp),
+                endTimestamp: new Date(slice.end_timestamp),
+                marketPrice: slice.marketprice,
+                unit: slice.unit,
+            };
+        }),
+    };
+}
+
+async function writeTable() {
+    const data = await getMarketData();
+    const table = document.createElement("table");
+    table.classList.add("table", "is-striped", "is-hoverable", "is-fullwidth");
+    const body = document.createElement("tbody");
+
+    for (const slice of data.data) {
+        const tr = document.createElement("tr");
+        const timeCell = document.createElement("td");
+        const priceCell = document.createElement("td");
+
+        // How green the price should be; ~100€/MWh seems to be a
+        // pretty expensive price, so that or worse is 100% red, while
+        // 0 or lower is 0% red
+        const redPercent = Math.max(Math.min(slice.marketPrice / 100, 1), 0);
+        console.info(redPercent);
+
+        timeCell.innerText = TIME_FORMAT.format(slice.startTimestamp);
+        priceCell.innerHTML = slice.marketPrice.toString();
+        priceCell.style.color = `color-mix(in lch, green, red ${
+            redPercent * 100
+        }%)`;
+
+        tr.appendChild(timeCell);
+        tr.appendChild(priceCell);
+        body.appendChild(tr);
+    }
+
+    table.appendChild(body);
+    document.body.appendChild(table);
+}
+
+document.addEventListener("DOMContentLoaded", writeTable);