first commit

2026-05-15 18:22:55 +02:00
commit 68a4de6836
55 changed files with 10113 additions and 0 deletions
@@ -0,0 +1,68 @@
+<div class="weather-app">
+  @if (loading()) {
+    <div class="loading">
+      <div class="spinner"></div>
+      <p>Carregant informació meteorològica...</p>
+    </div>
+  }
+  
+  @if (error()) {
+    <div class="error">
+      <p>{{ error() }}</p>
+      <button (click)="refresh()">Tornar a intentar</button>
+    </div>
+  }
+  
+  @if (!loading() && !error()) {
+    <div class="weather-container">
+      <!-- Header con ubicación y temperatura actual -->
+      <div class="header">
+        <div class="location">
+          <h1>{{ municipi()?.nom }}</h1>
+          @if (estacioInfo() && estacioInfo()!.estacio) {
+            <p class="station-info">
+              Estació: {{ estacioInfo()!.estacio.nom }} 
+              <span class="distance">({{ estacioInfo()!.distancia }} km)</span>
+            </p>
+          }
+        </div>
+        
+        @if (getCurrentTemperature() !== null) {
+          <div class="current-temp">
+            <span class="temperature">{{ getCurrentTemperature()?.toFixed(1) }}°</span>
+          </div>
+        }
+        
+        @if (getTodayMinMax()) {
+          <div class="min-max">
+            <span>Màx: {{ getTodayMinMax()?.max?.toFixed(1) }}°</span>
+            <span>Mín: {{ getTodayMinMax()?.min?.toFixed(1) }}°</span>
+          </div>
+        }
+      </div>
+
+      <!-- Predicción horaria (scroll horizontal) -->
+      @if (prediccioHoraria().length > 0) {
+        <div class="section">
+          <h2>Previsió horària (48 hores)</h2>
+          <app-prediccio-horaria [prediccions]="prediccioHoraria()" />
+        </div>
+      }
+
+      <!-- Predicción diaria (8 días) -->
+      @if (prediccioDiaria().length > 0) {
+        <div class="section">
+          <h2>Previsió 8 dies</h2>
+          <app-prediccio-diaria [prediccions]="prediccioDiaria()" />
+        </div>
+      }
+
+      <!-- Botón de refresh -->
+      <div class="refresh-container">
+        <button class="refresh-button" (click)="refresh()">
+          🔄 Actualitzar dades
+        </button>
+      </div>
+    </div>
+  }
+</div>