import { Component, OnInit, inject } from '@angular/core'; import { CommonModule, DatePipe } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { EnergyPriceService, EnergyPrice } from '../../services/energy-price.service'; import { EnergyChartComponent } from '../../components/energy-chart/energy-chart.component'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'], standalone: true, imports: [ CommonModule, FormsModule, EnergyChartComponent, ], providers: [DatePipe] }) export class HomeComponent implements OnInit { title = 'Energy Price Dashboard'; priceData: EnergyPrice[] = []; loading = true; error = ''; 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' } ]; // Default values selectedDate = new Date(); // Default will be overridden by localStorage if available selectedRegion = this.regions[Math.floor(Math.random() * this.regions.length)].value; private energyPriceService = inject(EnergyPriceService); private datePipe = inject(DatePipe); ngOnInit() { // Load saved region from localStorage if available const savedRegion = localStorage.getItem('selectedRegion'); if (savedRegion) { this.selectedRegion = savedRegion; } 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() { // Save selected region to localStorage localStorage.setItem('selectedRegion', this.selectedRegion); 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]; } get formattedDisplayDate(): string { return this.datePipe.transform(this.selectedDate, 'd MMMM yyyy') || ''; } get currentPrice(): EnergyPrice | null { if (!this.priceData || this.priceData.length === 0) { return null; } const now = new Date(); const currentHour = now.getHours(); // Find the price for the current hour return this.priceData.find(price => { const priceHour = new Date(price.time_start).getHours(); return priceHour === currentHour; }) || this.priceData[0]; // Default to first price if not found } get averagePrice(): number { if (!this.priceData || this.priceData.length === 0) { return 0; } const sum = this.priceData.reduce((total, price) => total + price.SEK_per_kWh, 0); return sum / this.priceData.length; } get highestPrice(): EnergyPrice | null { if (!this.priceData || this.priceData.length === 0) { return null; } return this.priceData.reduce((max, price) => price.SEK_per_kWh > max.SEK_per_kWh ? price : max, this.priceData[0]); } get lowestPrice(): EnergyPrice | null { if (!this.priceData || this.priceData.length === 0) { return null; } return this.priceData.reduce((min, price) => price.SEK_per_kWh < min.SEK_per_kWh ? price : min, this.priceData[0]); } getRegionName(regionCode: string): string { const region = this.regions.find(r => r.value === regionCode); return region ? region.label : regionCode; } }