Add: first working version

src/app/app.component.ts

@@ -1,12 +1,70 @@
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+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',
-  imports: [RouterOutlet],
   templateUrl: './app.component.html',
-  styleUrl: './app.component.css'
+  styleUrls: ['./app.component.css'],
+  standalone: true,
+  imports: [CommonModule, FormsModule, EnergyChartComponent]
 })
-export class AppComponent {
-  title = 'Angular-DotIO';
+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: any) {
+    this.selectedDate = new Date(event.target.value);
+    this.loadPriceData();
+  }
+
+  get maxDate(): string {
+    const today = new Date();
+    return today.toISOString().split('T')[0];
+  }
 }