78 lines
2.2 KiB
TypeScript
78 lines
2.2 KiB
TypeScript
import { Component, OnInit, inject } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
import { FormsModule } from '@angular/forms';
|
|
import { EnergyPriceService, EnergyPrice } from './energy-price.service';
|
|
import { EnergyChartComponent } from './energy-chart/energy-chart.component';
|
|
|
|
@Component({
|
|
selector: 'app-root',
|
|
templateUrl: './app.component.html',
|
|
styleUrls: ['./app.component.css'],
|
|
standalone: true,
|
|
imports: [CommonModule, FormsModule, EnergyChartComponent]
|
|
})
|
|
export class AppComponent implements OnInit {
|
|
title = 'Energy Price Dashboard';
|
|
priceData: EnergyPrice[] = [];
|
|
loading = true;
|
|
error = '';
|
|
|
|
// Default values
|
|
selectedDate = new Date();
|
|
selectedRegion = 'SE3'; // Stockholm / Södra Mellansverige as default
|
|
|
|
regions = [
|
|
{ value: 'SE1', label: 'Luleå / Norra Sverige' },
|
|
{ value: 'SE2', label: 'Sundsvall / Norra Mellansverige' },
|
|
{ value: 'SE3', label: 'Stockholm / Södra Mellansverige' },
|
|
{ value: 'SE4', label: 'Malmö / Södra Sverige' }
|
|
];
|
|
|
|
private energyPriceService = inject(EnergyPriceService);
|
|
|
|
ngOnInit() {
|
|
this.loadPriceData();
|
|
}
|
|
|
|
loadPriceData() {
|
|
this.loading = true;
|
|
this.error = '';
|
|
|
|
const { year, month, day } = this.energyPriceService.formatDate(this.selectedDate);
|
|
|
|
this.energyPriceService.getPrices(year, month, day, this.selectedRegion)
|
|
.subscribe({
|
|
next: (data) => {
|
|
this.priceData = data;
|
|
this.loading = false;
|
|
},
|
|
error: (err) => {
|
|
this.error = 'Failed to load energy price data. Please try again later.';
|
|
this.loading = false;
|
|
console.error('Error fetching price data:', err);
|
|
}
|
|
});
|
|
}
|
|
|
|
onRegionChange() {
|
|
this.loadPriceData();
|
|
}
|
|
|
|
onDateChange(event: Event) {
|
|
// Fix: properly handle date input event
|
|
const inputElement = event.target as HTMLInputElement;
|
|
if (inputElement.value) {
|
|
this.selectedDate = new Date(inputElement.value);
|
|
this.loadPriceData();
|
|
}
|
|
}
|
|
|
|
get maxDate(): string {
|
|
const today = new Date();
|
|
return today.toISOString().split('T')[0];
|
|
}
|
|
|
|
get formattedDate(): string {
|
|
return this.selectedDate.toISOString().split('T')[0];
|
|
}
|
|
}
|