Aroy/Angular-DotIO
1
0
Fork 0
Code Activity Actions

Reafactor: for routing, Add: navbar & footer

Browse source
This commit is contained in:
Aroy-Art 2025-05-16 14:18:16 +02:00
parent 32851bead5
commit ebdfd2f5e3
Signed by: Aroy
GPG key ID: 583642324A1D2070
16 changed files with 586 additions and 243 deletions
Download patch file Download diff file Expand all files Collapse all files

105
src/app/app.component.html
View file

@ -1,100 +1,7 @@
<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 class="flex flex-col min-h-screen">
<app-header></app-header>
<main class="container mx-auto px-4 py-8 flex-grow">
<router-outlet />
</main>
<app-footer></app-footer>
</div>