100 lines
3.1 KiB
HTML
100 lines
3.1 KiB
HTML
<div class="container">
|
|
<header class="text-center m-6">
|
|
<h1 class="text-3xl font-bold">{{ 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"
|
|
[value]="formattedDate"
|
|
(change)="onDateChange($event)"
|
|
[max]="maxDate"
|
|
class="date-input">
|
|
</div>
|
|
</div>
|
|
|
|
@if (!loading && !error && priceData.length > 0) {
|
|
<div class="price-summary">
|
|
<div class="price-heading">
|
|
<h2>{{ getRegionName(selectedRegion) }} {{ formattedDisplayDate }}</h2>
|
|
<p class="price-subheading">(utan moms och andra skatter)</p>
|
|
</div>
|
|
|
|
<div class="current-price">
|
|
<div class="price-label">Just nu</div>
|
|
<div class="price-value">{{ currentPrice?.SEK_per_kWh || 0 | number:'1.2-2' }} <span class="price-unit">kr/kWh</span></div>
|
|
<div class="price-change" [ngClass]="{'price-increase': (currentPrice?.SEK_per_kWh || 0) > averagePrice, 'price-decrease': (currentPrice?.SEK_per_kWh || 0) < averagePrice}">
|
|
{{ (currentPrice?.SEK_per_kWh || 0) > averagePrice ? '+' : '' }}{{ ((currentPrice?.SEK_per_kWh || 0) - averagePrice) | number:'1.2-2' }}%
|
|
</div>
|
|
</div>
|
|
|
|
<div class="price-extremes">
|
|
<div class="price-high">
|
|
↑ {{ highestPrice?.SEK_per_kWh || 0 | number:'1.2-2' }} kr kl {{ highestPrice?.time_start | date:'HH:mm' }}
|
|
</div>
|
|
<div class="price-low">
|
|
↓ {{ lowestPrice?.SEK_per_kWh || 0 | number:'1.2-2' }} kr kl {{ lowestPrice?.time_start | date:'HH:mm' }}
|
|
</div>
|
|
<div class="price-average">
|
|
{{ averagePrice | number:'1.2-2' }} kr snitt
|
|
</div>
|
|
</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>
|
|
}
|
|
</div>
|