Reafactor: for routing, Add: navbar & footer

src/app/pages/home/home.component.ts

@@ -0,0 +1,144 @@
+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;
+  }
+}