69 lines
1.7 KiB
HTML
69 lines
1.7 KiB
HTML
<div class="container">
|
|
<header>
|
|
<h1>{{ title }}</h1>
|
|
</header>
|
|
|
|
<div class="controls">
|
|
<div class="form-group">
|
|
<label for="region">Region:</label>
|
|
<select id="region" [(ngModel)]="selectedRegion" (change)="onRegionChange()">
|
|
@for (region of regions; track region.value) {
|
|
<option [value]="region.value">
|
|
{{ region.label }}
|
|
</option>
|
|
}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="date">Date:</label>
|
|
<input
|
|
type="date"
|
|
id="date"
|
|
[ngModel]="selectedDate | date:'yyyy-MM-dd'"
|
|
(ngModelChange)="onDateChange($event)"
|
|
[max]="maxDate">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chart-container">
|
|
@if (loading) {
|
|
<div class="loading">
|
|
<p>Loading energy price data...</p>
|
|
</div>
|
|
}
|
|
|
|
@if (error) {
|
|
<div class="error">
|
|
<p>{{ error }}</p>
|
|
</div>
|
|
}
|
|
|
|
@if (!loading && !error) {
|
|
<app-energy-chart [priceData]="priceData"></app-energy-chart>
|
|
}
|
|
</div>
|
|
|
|
@if (!loading && !error && priceData.length > 0) {
|
|
<div class="price-list">
|
|
<h2>Hour-by-hour prices</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Time</th>
|
|
<th>SEK/kWh</th>
|
|
<th>EUR/kWh</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@for (price of priceData; track price.time_start) {
|
|
<tr>
|
|
<td>{{ price.time_start | date:'HH:00' }} - {{ price.time_end | date:'HH:00' }}</td>
|
|
<td>{{ price.SEK_per_kWh | number:'1.2-4' }}</td>
|
|
<td>{{ price.EUR_per_kWh | number:'1.2-4' }}</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
}
|