Initial commit
This commit is contained in:
commit
5e8a9cc55c
GPG key ID:
49670FD774E43268
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
/node_modules/
|
||||
/dist/
|
||||
/.parcel-cache/
|
||||
17
biome.json
Normal file
17
biome.json
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"$schema": "https://biomejs.dev/schemas/1.4.0/schema.json",
|
||||
"organizeImports": {
|
||||
"enabled": true
|
||||
},
|
||||
"formatter": {
|
||||
"enabled": true,
|
||||
"indentStyle": "space",
|
||||
"indentWidth": 4
|
||||
},
|
||||
"linter": {
|
||||
"enabled": true,
|
||||
"rules": {
|
||||
"all": true
|
||||
}
|
||||
}
|
||||
}
|
||||
27
flake.lock
Normal file
27
flake.lock
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"nodes": {
|
||||
"nixpkgs": {
|
||||
"locked": {
|
||||
"lastModified": 1703992652,
|
||||
"narHash": "sha256-C0o8AUyu8xYgJ36kOxJfXIroy9if/G6aJbNOpA5W0+M=",
|
||||
"owner": "nixos",
|
||||
"repo": "nixpkgs",
|
||||
"rev": "32f63574c85fbc80e4ba1fbb932cde9619bad25e",
|
||||
"type": "github"
|
||||
},
|
||||
"original": {
|
||||
"owner": "nixos",
|
||||
"ref": "nixos-23.11",
|
||||
"repo": "nixpkgs",
|
||||
"type": "github"
|
||||
}
|
||||
},
|
||||
"root": {
|
||||
"inputs": {
|
||||
"nixpkgs": "nixpkgs"
|
||||
}
|
||||
}
|
||||
},
|
||||
"root": "root",
|
||||
"version": 7
|
||||
}
|
||||
17
flake.nix
Normal file
17
flake.nix
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
inputs = {
|
||||
nixpkgs.url = "github:nixos/nixpkgs/nixos-23.11";
|
||||
};
|
||||
|
||||
outputs = {nixpkgs, ...}: let
|
||||
system = "x86_64-linux";
|
||||
pkgs = nixpkgs.legacyPackages.${system};
|
||||
in {
|
||||
devShells.${system}.default = pkgs.mkShell {
|
||||
packages = with pkgs; [
|
||||
biome
|
||||
nodejs
|
||||
];
|
||||
};
|
||||
};
|
||||
}
|
||||
3690
package-lock.json
generated
Normal file
3690
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
9
package.json
Normal file
9
package.json
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"devDependencies": {
|
||||
"@parcel/transformer-sass": "^2.10.3",
|
||||
"parcel": "^2.10.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"bulma": "^0.9.4"
|
||||
}
|
||||
}
|
||||
15
src/index.html
Normal file
15
src/index.html
Normal file
|
|
@ -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>
|
||||
32
src/index.scss
Normal file
32
src/index.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
71
src/index.ts
Normal file
71
src/index.ts
Normal file
|
|
@ -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);
|
||||
Loading…
Reference in a new issue