first commit

Dockerfile

@@ -0,0 +1,32 @@
+# Multi-stage build para optimizar el tamaño de la imagen
+FROM node:22-alpine AS build
+
+# Establecer directorio de trabajo
+WORKDIR /app
+
+# Copiar archivos de configuración de npm
+COPY package*.json ./
+
+# Instalar dependencias
+RUN npm ci --legacy-peer-deps
+
+# Copiar código fuente
+COPY . .
+
+# Build de producción
+RUN npm run build -- --configuration production
+
+# Etapa de producción con nginx
+FROM nginx:alpine
+
+# Copiar configuración personalizada de nginx
+COPY nginx.conf /etc/nginx/nginx.conf
+
+# Copiar archivos compilados desde la etapa de build
+COPY --from=build /app/dist/frontend/browser /usr/share/nginx/html
+
+# Exponer puerto
+EXPOSE 80
+
+# Comando de inicio (nginx se inicia automáticamente)
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -0,0 +1,59 @@
+# Frontend
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.2.11.
+
+## Development server
+
+To start a local development server, run:
+
+```bash
+ng serve
+```
+
+Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the project run:
+
+```bash
+ng build
+```
+
+This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
+
+## Running unit tests
+
+To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

angular.json

@@ -0,0 +1,83 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "cli": {
+    "packageManager": "npm"
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "frontend": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "browser": "src/main.ts",
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              },
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "assets"
+              }
+            ],
+            "styles": [
+              "src/styles.scss"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "frontend:build:production"
+            },
+            "development": {
+              "buildTarget": "frontend:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "test": {
+          "builder": "@angular/build:unit-test"
+        }
+      }
+    }
+  }
+}

nginx.conf

@@ -0,0 +1,57 @@
+events {
+    worker_connections 1024;
+}
+
+http {
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+
+    # Configuración de logging
+    access_log /var/log/nginx/access.log;
+    error_log /var/log/nginx/error.log;
+
+    # Configuración de performance
+    sendfile on;
+    tcp_nopush on;
+    tcp_nodelay on;
+    keepalive_timeout 65;
+    types_hash_max_size 2048;
+
+    # Compresión gzip
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml+rss application/json;
+
+    server {
+        listen 80;
+        server_name localhost;
+        root /usr/share/nginx/html;
+        index index.html;
+
+        # Configuración para Angular Router (SPA)
+        location / {
+            try_files $uri $uri/ /index.html;
+        }
+
+        # Cache para assets estáticos
+        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+            expires 1y;
+            add_header Cache-Control "public, immutable";
+        }
+
+        # Sin cache para index.html
+        location = /index.html {
+            add_header Cache-Control "no-cache, no-store, must-revalidate";
+            add_header Pragma "no-cache";
+            add_header Expires 0;
+        }
+
+        # Health check endpoint
+        location /health {
+            access_log off;
+            return 200 "healthy\n";
+            add_header Content-Type text/plain;
+        }
+    }
+}

package.json

@@ -0,0 +1,37 @@
+{
+  "name": "frontend",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "packageManager": "npm@11.12.1",
+  "dependencies": {
+    "@angular/cdk": "^21.2.11",
+    "@angular/common": "^21.2.0",
+    "@angular/compiler": "^21.2.0",
+    "@angular/core": "^21.2.0",
+    "@angular/forms": "^21.2.0",
+    "@angular/material": "^21.2.11",
+    "@angular/platform-browser": "^21.2.0",
+    "@angular/router": "^21.2.0",
+    "chart.js": "^4.5.1",
+    "moment": "^2.30.1",
+    "ng2-charts": "^10.0.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@angular/build": "^21.2.11",
+    "@angular/cli": "^21.2.11",
+    "@angular/compiler-cli": "^21.2.0",
+    "jsdom": "^28.0.0",
+    "prettier": "^3.8.1",
+    "typescript": "~5.9.2",
+    "vitest": "^4.0.8"
+  }
+}

src/app/app.config.ts

@@ -0,0 +1,13 @@
+import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideRouter(routes),
+    provideHttpClient()
+  ]
+};

src/app/app.html

@@ -0,0 +1 @@
+<router-outlet />

src/app/app.routes.ts

@@ -0,0 +1,7 @@
+import { Routes } from '@angular/router';
+import { Home } from './components/home/home';
+
+export const routes: Routes = [
+  { path: '', component: Home },
+  { path: '**', redirectTo: '' }
+];

src/app/app.spec.ts

@@ -0,0 +1,23 @@
+import { TestBed } from '@angular/core/testing';
+import { App } from './app';
+
+describe('App', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [App],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(App);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it('should render title', async () => {
+    const fixture = TestBed.createComponent(App);
+    await fixture.whenStable();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, frontend');
+  });
+});

src/app/app.ts

@@ -0,0 +1,12 @@
+import { Component, signal } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  imports: [RouterOutlet],
+  templateUrl: './app.html',
+  styleUrl: './app.scss'
+})
+export class App {
+  protected readonly title = signal('frontend');
+}

src/app/components/home/home.html

@@ -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>

src/app/components/home/home.scss

@@ -0,0 +1,142 @@
+.weather-app {
+  min-height: 100vh;
+  background: linear-gradient(180deg, #072d59 0%, #56556a 100%);
+  padding: 20px;
+  color: white;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+}
+
+.loading, .error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  text-align: center;
+}
+
+.spinner {
+  width: 50px;
+  height: 50px;
+  border: 4px solid rgba(255, 255, 255, 0.3);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.error {
+  button {
+    margin-top: 20px;
+    padding: 12px 24px;
+    background: white;
+    color: #4a90e2;
+    border: none;
+    border-radius: 20px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    
+    &:hover {
+      opacity: 0.9;
+    }
+  }
+}
+
+.weather-container {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 40px;
+  padding-top: 20px;
+  
+  .location {
+    h1 {
+      font-size: 32px;
+      font-weight: 300;
+      margin: 0 0 8px 0;
+    }
+    
+    .station-info {
+      font-size: 14px;
+      opacity: 0.9;
+      margin: 0;
+      
+      .distance {
+        opacity: 0.7;
+      }
+    }
+  }
+  
+  .current-temp {
+    margin: 30px 0;
+    
+    .temperature {
+      font-size: 96px;
+      font-weight: 200;
+      line-height: 1;
+    }
+  }
+  
+  .min-max {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    font-size: 18px;
+    opacity: 0.9;
+    
+    span {
+      font-weight: 500;
+    }
+  }
+}
+
+.section {
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(10px);
+  border-radius: 20px;
+  padding: 20px;
+  margin-bottom: 20px;
+  
+  h2 {
+    font-size: 14px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin: 0 0 15px 0;
+    opacity: 0.8;
+  }
+}
+
+.refresh-container {
+  text-align: center;
+  margin-top: 30px;
+  
+  .refresh-button {
+    padding: 12px 24px;
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(10px);
+    color: white;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 20px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    
+    &:hover {
+      background: rgba(255, 255, 255, 0.3);
+      transform: translateY(-2px);
+    }
+    
+    &:active {
+      transform: translateY(0);
+    }
+  }
+}

src/app/components/home/home.ts

@@ -0,0 +1,116 @@
+import { Component, OnInit, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MeteocatService } from '../../services/meteocat.service';
+import { Municipi } from '../../models/municipi.model';
+import { PrediccioDiaria } from '../../models/prediccio-diaria.model';
+import { PrediccioHoraria } from '../../models/prediccio-horaria.model';
+import { EstacioMesCercanaResponse } from '../../models/estacio-mes-cercana.model';
+import { PrediccioDiariaComponent } from '../prediccio-diaria/prediccio-diaria';
+import { PrediccioHorariaComponent } from '../prediccio-horaria/prediccio-horaria';
+
+@Component({
+  selector: 'app-home',
+  imports: [CommonModule, PrediccioDiariaComponent, PrediccioHorariaComponent],
+  templateUrl: './home.html',
+  styleUrl: './home.scss',
+})
+export class Home implements OnInit {
+  // Lliçà d'Amunt por defecto
+  readonly municipiCodi = '081075';
+  
+  municipi = signal<Municipi | null>(null);
+  prediccioDiaria = signal<PrediccioDiaria[]>([]);
+  prediccioHoraria = signal<PrediccioHoraria[]>([]);
+  estacioInfo = signal<EstacioMesCercanaResponse | null>(null);
+  
+  loading = signal(true);
+  error = signal<string | null>(null);
+
+  constructor(private meteocatService: MeteocatService) {}
+
+  ngOnInit(): void {
+    this.loadWeatherData();
+  }
+
+  loadWeatherData(): void {
+    this.loading.set(true);
+    this.error.set(null);
+
+    // Cargar municipio
+    this.meteocatService.getMunicipiByCode(this.municipiCodi).subscribe({
+      next: (municipi) => {
+        this.municipi.set(municipi);
+      },
+      error: (err) => {
+        console.error('Error al cargar municipio:', err);
+        this.error.set('Error al cargar información del municipio');
+      }
+    });
+
+    // Cargar predicción diaria
+    this.meteocatService.getPrediccioDiaria(this.municipiCodi).subscribe({
+      next: (prediccions) => {
+        this.prediccioDiaria.set(prediccions);
+      },
+      error: (err) => {
+        console.error('Error al cargar predicción diaria:', err);
+        this.error.set('Error al cargar predicción diaria');
+      }
+    });
+
+    // Cargar predicción horaria
+    this.meteocatService.getPrediccioHoraria(this.municipiCodi).subscribe({
+      next: (prediccions) => {
+        // Filtrar solo predicciones desde la hora actual y limitamos a 48 horas
+        const now = new Date();
+        const filtered = prediccions
+          .filter(p => {
+            const predDate = new Date(p.dataHora);
+            return predDate >= now;
+          })
+          .slice(0, 48); // Limitar a 48 horas
+        
+        this.prediccioHoraria.set(filtered);
+        this.loading.set(false);
+      },
+      error: (err) => {
+        console.error('Error al cargar predicción horaria:', err);
+        this.error.set('Error al cargar predicción horaria');
+        this.loading.set(false);
+      }
+    });
+
+    // Cargar estación XEMA más cercana
+    this.meteocatService.getEstacioCercana(this.municipiCodi).subscribe({
+      next: (response) => {
+        this.estacioInfo.set(response);
+      },
+      error: (err) => {
+        console.error('Error al cargar estación XEMA:', err);
+      }
+    });
+  }
+
+  getCurrentTemperature(): number | null {
+    const horariaData = this.prediccioHoraria();
+    if (horariaData && horariaData.length > 0) {
+      return horariaData[0].temperatura;
+    }
+    return null;
+  }
+
+  getTodayMinMax(): { min: number; max: number } | null {
+    const diariaData = this.prediccioDiaria();
+    if (diariaData && diariaData.length > 0) {
+      return {
+        min: diariaData[0].temperaturaMinima,
+        max: diariaData[0].temperaturaMaxima
+      };
+    }
+    return null;
+  }
+
+  refresh(): void {
+    this.loadWeatherData();
+  }
+}

src/app/components/prediccio-diaria/prediccio-diaria.html

@@ -0,0 +1,37 @@
+<div class="daily-forecast">
+  @for (prediccio of prediccions; track prediccio.id || $index) {
+    <div class="day-item">
+      <div class="day-info">
+        <div class="day-name">{{ getDayLabel(prediccio) }}</div>
+        <div class="date">{{ getDateLabel(prediccio) }}</div>
+      </div>
+      
+      <div class="weather-icon">
+        <img [src]="getWeatherIcon(prediccio.estatCelSimbol)" 
+             [alt]="'Weather icon ' + prediccio.estatCelSimbol"
+             class="weather-icon-img" />
+      </div>
+      
+      @if (prediccio.probabilitatPrecipitacio !== null && prediccio.probabilitatPrecipitacio !== undefined && prediccio.probabilitatPrecipitacio > 0) {
+        <div class="precipitation">
+          💧 {{ prediccio.probabilitatPrecipitacio }}%
+        </div>
+      } @else {
+        <div class="precipitation-placeholder"></div>
+      }
+      
+      <div class="temps">
+        <div class="temp-bar-container">
+          <span class="temp-min">{{ prediccio.temperaturaMinima.toFixed(0) }}°</span>
+          <div class="temp-bar">
+            <div class="temp-range" 
+                 [style.left]="getTempBarStyle(prediccio).left" 
+                 [style.width]="getTempBarStyle(prediccio).width"
+                 [style.background]="getTempBarStyle(prediccio).background"></div>
+          </div>
+          <span class="temp-max">{{ prediccio.temperaturaMaxima.toFixed(0) }}°</span>
+        </div>
+      </div>
+    </div>
+  }
+</div>

src/app/components/prediccio-diaria/prediccio-diaria.scss

@@ -0,0 +1,93 @@
+.daily-forecast {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 15px;
+  overflow: hidden;
+  
+  .day-item {
+    display: grid;
+    grid-template-columns: 1fr auto auto 1.2fr;
+    align-items: center;
+    gap: 15px;
+    padding: 15px;
+    background: rgba(255, 255, 255, 0.05);
+    backdrop-filter: blur(10px);
+    
+    &:hover {
+      background: rgba(255, 255, 255, 0.1);
+    }
+    
+    .day-info {
+      .day-name {
+        font-size: 16px;
+        font-weight: 500;
+        margin-bottom: 2px;
+      }
+      
+      .date {
+        font-size: 13px;
+        opacity: 0.7;
+      }
+    }
+    
+    .weather-icon {
+      font-size: 32px;
+      line-height: 1;
+      text-align: center;
+      
+      .weather-icon-img {
+        width: 36px;
+        height: 36px;
+        object-fit: contain;
+      }
+    }
+    
+    .precipitation {
+      font-size: 13px;
+      opacity: 0.8;
+      min-width: 50px;
+      text-align: center;
+    }
+    
+    .precipitation-placeholder {
+      min-width: 50px;
+    }
+    
+    .temps {
+      .temp-bar-container {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        
+        .temp-min, .temp-max {
+          font-size: 16px;
+          font-weight: 500;
+          min-width: 35px;
+          text-align: center;
+        }
+        
+        .temp-min {
+          opacity: 0.7;
+        }
+        
+        .temp-bar {
+          flex: 1;
+          height: 6px;
+          background: rgba(255, 255, 255, 0.2);
+          border-radius: 3px;
+          position: relative;
+          
+          .temp-range {
+            position: absolute;
+            height: 100%;
+            border-radius: 3px;
+            transition: left 0.3s ease, width 0.3s ease;
+            // El background se aplica dinámicamente desde el componente
+          }
+        }
+      }
+    }
+  }
+}

src/app/components/prediccio-diaria/prediccio-diaria.ts

@@ -0,0 +1,138 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PrediccioDiaria } from '../../models/prediccio-diaria.model';
+
+@Component({
+  selector: 'app-prediccio-diaria',
+  imports: [CommonModule],
+  templateUrl: './prediccio-diaria.html',
+  styleUrl: './prediccio-diaria.scss',
+})
+export class PrediccioDiariaComponent {
+  @Input() prediccions: PrediccioDiaria[] = [];
+
+  getDayLabel(prediccio: PrediccioDiaria): string {
+    const data = new Date(prediccio.data);
+    const now = new Date();
+    
+    // Comparar solo día, mes y año
+    const isToday = data.getDate() === now.getDate() &&
+                    data.getMonth() === now.getMonth() &&
+                    data.getFullYear() === now.getFullYear();
+    
+    if (isToday) return 'Avui';
+    
+    const tomorrow = new Date(now);
+    tomorrow.setDate(now.getDate() + 1);
+    const isTomorrow = data.getDate() === tomorrow.getDate() &&
+                       data.getMonth() === tomorrow.getMonth() &&
+                       data.getFullYear() === tomorrow.getFullYear();
+    
+    if (isTomorrow) return 'Demà';
+    
+    const days = ['Diumenge', 'Dilluns', 'Dimarts', 'Dimecres', 'Dijous', 'Divendres', 'Dissabte'];
+    return days[data.getDay()];
+  }
+
+  getDateLabel(prediccio: PrediccioDiaria): string {
+    const data = new Date(prediccio.data);
+    const day = data.getDate();
+    const month = data.getMonth() + 1;
+    return `${day}/${month}`;
+  }
+
+  getWeatherIcon(simbolCodi?: number): string {
+    // Mapeo de símbolos meteorológicos de Meteocat a iconos PNG
+    if (!simbolCodi) return '/weather-icons/clear-day.png';
+    
+    const iconMap: { [key: number]: string } = {
+      1: '/weather-icons/clear-day.png',           // Sol
+      2: '/weather-icons/partly-cloudy-day.png',   // Poc ennuvolat
+      3: '/weather-icons/partly-cloudy-day.png',   // Intervals nuvolosos
+      4: '/weather-icons/cloudy.png',              // Molt ennuvolat
+      5: '/weather-icons/cloudy.png',              // Cobert
+      6: '/weather-icons/drizzle.png',             // Plovisqueig
+      7: '/weather-icons/rain.png',                // Pluja
+      8: '/weather-icons/thunderstorm.png',        // Pluja i tronades
+      9: '/weather-icons/snow.png',                // Neu
+      10: '/weather-icons/sleet.png',              // Pluja i neu
+      11: '/weather-icons/fog.png',                // Boira
+      12: '/weather-icons/haze.png',               // Boirina
+      13: '/weather-icons/thunderstorm.png',       // Tempesta
+      14: '/weather-icons/partly-cloudy-day.png',  // Intervals nuvolosos amb possibilitat de pluja
+      15: '/weather-icons/partly-cloudy-day.png',  // Intervals nuvolosos amb possibilitat de tronades
+      16: '/weather-icons/partly-cloudy-day.png',  // Intervals nuvolosos amb possibilitat de neu
+      17: '/weather-icons/rain.png',               // Molt ennuvolat amb possibilitat de pluja
+      18: '/weather-icons/cloudy.png',             // Molt ennuvolat amb possibilitat de tronades
+      19: '/weather-icons/cloudy.png',             // Molt ennuvolat amb possibilitat de neu
+      20: '/weather-icons/haze.png',               // Boira amb cel serè
+      21: '/weather-icons/clear-night.png',        // Nit sense núvols
+      22: '/weather-icons/clear-night.png',        // Nit poc ennuvolat
+      23: '/weather-icons/partly-cloudy-night.png', // Nit intervals nuvolosos
+      24: '/weather-icons/cloudy.png',             // Nit molt ennuvolat
+      25: '/weather-icons/cloudy.png',             // Nit cobert
+    };
+    
+    return iconMap[simbolCodi] || '/weather-icons/clear-day.png';
+  }
+
+  /**
+   * Calcula el estilo de la barra de temperatura basándose en el rango total
+   */
+  getTempBarStyle(prediccio: PrediccioDiaria): { left: string; width: string; background: string } {
+    if (this.prediccions.length === 0) {
+      return { left: '30%', width: '40%', background: 'linear-gradient(90deg, #5eb3ff, #ffa940)' };
+    }
+
+    // Encontrar min y max globales
+    const allTemps = this.prediccions.flatMap(p => [p.temperaturaMinima, p.temperaturaMaxima]);
+    const globalMin = Math.min(...allTemps);
+    const globalMax = Math.max(...allTemps);
+    const range = globalMax - globalMin;
+
+    if (range === 0) {
+      return { left: '0%', width: '100%', background: this.getTempGradient(prediccio.temperaturaMinima, prediccio.temperaturaMaxima) };
+    }
+
+    // Calcular posición y ancho en porcentaje
+    const leftPercent = ((prediccio.temperaturaMinima - globalMin) / range) * 100;
+    const widthPercent = ((prediccio.temperaturaMaxima - prediccio.temperaturaMinima) / range) * 100;
+
+    return {
+      left: `${leftPercent}%`,
+      width: `${widthPercent}%`,
+      background: this.getTempGradient(prediccio.temperaturaMinima, prediccio.temperaturaMaxima)
+    };
+  }
+
+  /**
+   * Genera un gradiente de color basado en la temperatura
+   * Temperaturas frías: azul/cyan
+   * Temperaturas templadas: verde/amarillo
+   * Temperaturas cálidas: amarillo/naranja
+   * Temperaturas muy cálidas: naranja/rojo
+   */
+  private getTempGradient(tempMin: number, tempMax: number): string {
+    const colorMin = this.getTempColor(tempMin);
+    const colorMax = this.getTempColor(tempMax);
+    return `linear-gradient(90deg, ${colorMin}, ${colorMax})`;
+  }
+
+  /**
+   * Obtiene el color para una temperatura específica
+   */
+  private getTempColor(temp: number): string {
+    // Escala de colores según temperatura
+    if (temp < 5) return '#4A90E2';      // Azul frío
+    if (temp < 10) return '#5EB3FF';     // Azul claro
+    if (temp < 15) return '#6FD4A8';     // Verde azulado
+    if (temp < 18) return '#8FD16A';     // Verde
+    if (temp < 20) return '#B8DC5A';     // Verde amarillento
+    if (temp < 22) return '#FFD93D';     // Amarillo
+    if (temp < 25) return '#FFC940';     // Amarillo naranja
+    if (temp < 28) return '#FFB347';     // Naranja claro
+    if (temp < 30) return '#FF9A40';     // Naranja
+    if (temp < 33) return '#FF7F50';     // Naranja rojizo
+    return '#FF6347';                     // Rojo tomate
+  }
+}

src/app/components/prediccio-horaria/prediccio-horaria.html

@@ -0,0 +1,21 @@
+<div class="hourly-forecast">
+  <div class="hourly-scroll">
+    @for (prediccio of prediccions; track prediccio.id || $index) {
+      <div class="hour-item">
+        @if (getDayLabel(prediccio)) {
+          <div class="day-label">{{ getDayLabel(prediccio) }}</div>
+        }
+        <div class="hour">{{ getHourLabel(prediccio) }}</div>
+        <div class="icon">
+          <img [src]="getWeatherIcon(prediccio.estatCelSimbol)" 
+               [alt]="'Weather icon ' + prediccio.estatCelSimbol"
+               class="weather-icon" />
+        </div>
+        <div class="temp">{{ prediccio.temperatura.toFixed(0) }}°</div>
+        @if (prediccio.precipitacio !== null && prediccio.precipitacio !== undefined && prediccio.precipitacio > 0) {
+          <div class="rain">💧 {{ prediccio.precipitacio.toFixed(0) }}%</div>
+        }
+      </div>
+    }
+  </div>
+</div>

src/app/components/prediccio-horaria/prediccio-horaria.scss

@@ -0,0 +1,76 @@
+.hourly-forecast {
+  .hourly-scroll {
+    display: flex;
+    gap: 15px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding: 10px 0;
+    scroll-behavior: smooth;
+    -webkit-overflow-scrolling: touch;
+    
+    // Ocultar scrollbar pero mantener funcionalidad
+    &::-webkit-scrollbar {
+      height: 6px;
+    }
+    
+    &::-webkit-scrollbar-track {
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 3px;
+    }
+    
+    &::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.3);
+      border-radius: 3px;
+      
+      &:hover {
+        background: rgba(255, 255, 255, 0.4);
+      }
+    }
+  }
+  
+  .hour-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 65px;
+    padding: 10px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 15px;
+    gap: 8px;
+    flex-shrink: 0;
+    
+    .day-label {
+      font-size: 11px;
+      font-weight: 600;
+      opacity: 0.8;
+      text-transform: uppercase;
+    }
+    
+    .hour {
+      font-size: 13px;
+      font-weight: 500;
+      opacity: 0.9;
+    }
+    
+    .icon {
+      font-size: 28px;
+      line-height: 1;
+      
+      .weather-icon {
+        width: 32px;
+        height: 32px;
+        object-fit: contain;
+      }
+    }
+    
+    .temp {
+      font-size: 18px;
+      font-weight: 600;
+    }
+    
+    .rain {
+      font-size: 11px;
+      opacity: 0.8;
+    }
+  }
+}

src/app/components/prediccio-horaria/prediccio-horaria.ts

@@ -0,0 +1,77 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PrediccioHoraria } from '../../models/prediccio-horaria.model';
+
+@Component({
+  selector: 'app-prediccio-horaria',
+  imports: [CommonModule],
+  templateUrl: './prediccio-horaria.html',
+  styleUrl: './prediccio-horaria.scss',
+})
+export class PrediccioHorariaComponent {
+  @Input() prediccions: PrediccioHoraria[] = [];
+
+  getHourLabel(prediccio: PrediccioHoraria): string {
+    const now = new Date();
+    const dataHora = new Date(prediccio.data);
+    dataHora.setHours(prediccio.hora);
+    
+    // Si es la hora actual o la siguiente, mostrar "Ara" o "Següent"
+    const diffHours = Math.round((dataHora.getTime() - now.getTime()) / (1000 * 60 * 60));
+    
+    if (diffHours === 0) return 'Ara';
+    if (diffHours === 1) return '+1h';
+    
+    return `${prediccio.hora}:00`;
+  }
+
+  getDayLabel(prediccio: PrediccioHoraria): string {
+    const dataHora = new Date(prediccio.data);
+    const now = new Date();
+    
+    // Comparar solo día, mes y año
+    const isToday = dataHora.getDate() === now.getDate() &&
+                    dataHora.getMonth() === now.getMonth() &&
+                    dataHora.getFullYear() === now.getFullYear();
+    
+    if (isToday) return '';
+    
+    const days = ['Dg', 'Dl', 'Dt', 'Dc', 'Dj', 'Dv', 'Ds'];
+    return days[dataHora.getDay()];
+  }
+
+  getWeatherIcon(simbolCodi?: number): string {
+    // Mapeo de símbolos meteorológicos de Meteocat a iconos PNG
+    if (!simbolCodi) return '/weather-icons/clear-day.png';
+    
+    const iconMap: { [key: number]: string } = {
+      1: '/weather-icons/clear-day.png',           // Sol
+      2: '/weather-icons/partly-cloudy-day.png',   // Poc ennuvolat
+      3: '/weather-icons/partly-cloudy-day.png',   // Intervals nuvolosos
+      4: '/weather-icons/cloudy.png',              // Molt ennuvolat
+      5: '/weather-icons/cloudy.png',              // Cobert
+      6: '/weather-icons/drizzle.png',             // Plovisqueig
+      7: '/weather-icons/rain.png',                // Pluja
+      8: '/weather-icons/thunderstorm.png',        // Pluja i tronades
+      9: '/weather-icons/snow.png',                // Neu
+      10: '/weather-icons/sleet.png',              // Pluja i neu
+      11: '/weather-icons/fog.png',                // Boira
+      12: '/weather-icons/haze.png',               // Boirina
+      13: '/weather-icons/thunderstorm.png',       // Tempesta
+      14: '/weather-icons/partly-cloudy-day.png',  // Intervals nuvolosos amb possibilitat de pluja
+      15: '/weather-icons/partly-cloudy-day.png',  // Intervals nuvolosos amb possibilitat de tronades
+      16: '/weather-icons/partly-cloudy-day.png',  // Intervals nuvolosos amb possibilitat de neu
+      17: '/weather-icons/rain.png',               // Molt ennuvolat amb possibilitat de pluja
+      18: '/weather-icons/cloudy.png',             // Molt ennuvolat amb possibilitat de tronades
+      19: '/weather-icons/cloudy.png',             // Molt ennuvolat amb possibilitat de neu
+      20: '/weather-icons/haze.png',               // Boira amb cel serè
+      21: '/weather-icons/clear-night.png',        // Nit sense núvols
+      22: '/weather-icons/clear-night.png',        // Nit poc ennuvolat
+      23: '/weather-icons/partly-cloudy-night.png', // Nit intervals nuvolosos
+      24: '/weather-icons/cloudy.png',             // Nit molt ennuvolat
+      25: '/weather-icons/cloudy.png',             // Nit cobert
+    };
+    
+    return iconMap[simbolCodi] || '/weather-icons/clear-day.png';
+  }
+}

src/app/components/weather-icon/weather-icon.html

@@ -0,0 +1 @@
+<p>weather-icon works!</p>

src/app/components/weather-icon/weather-icon.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-weather-icon',
+  imports: [],
+  templateUrl: './weather-icon.html',
+  styleUrl: './weather-icon.scss',
+})
+export class WeatherIcon {}

src/app/models/estacio-mes-cercana.model.ts

@@ -0,0 +1,7 @@
+import { EstacioXema } from './estacio-xema.model';
+
+export interface EstacioMesCercanaResponse {
+  municipiCodi: string;
+  estacio: EstacioXema;
+  distancia: number;
+}

src/app/models/estacio-xema.model.ts

@@ -0,0 +1,16 @@
+export interface EstacioXema {
+  codi: string;
+  nom: string;
+  tipus: string;
+  coordenadesLatitud: number;
+  coordenadesLongitud: number;
+  altitud?: number;
+  municipi?: string;
+  comarca?: string;
+  provincia?: string;
+  xarxa?: string;
+  estat?: string;
+  dataInici?: string;
+  dataFi?: string;
+  distancia?: number; // Calculado dinámicamente para estación más cercana
+}

src/app/models/municipi.model.ts

@@ -0,0 +1,9 @@
+export interface Municipi {
+  codi: string;
+  nom: string;
+  latitud: number;
+  longitud: number;
+  altitud: number;
+  codiComarca?: string;
+  nomComarca?: string;
+}

src/app/models/prediccio-diaria.model.ts

@@ -0,0 +1,13 @@
+export interface PrediccioDiaria {
+  id?: number;
+  municipiCodi: string;
+  data: string;
+  temperaturaMinima: number;
+  temperaturaMaxima: number;
+  estatCelSimbol?: number;
+  probabilitatPrecipitacio?: number;
+  uviMax?: number;
+  uviClouds?: number;
+  createdAt?: string;
+  updatedAt?: string;
+}

src/app/models/prediccio-horaria.model.ts

@@ -0,0 +1,16 @@
+export interface PrediccioHoraria {
+  id?: number;
+  municipiCodi: string;
+  data: string;
+  hora: number;
+  dataHora: string;
+  temperatura: number;
+  temperaturaXafogor?: number;
+  estatCelSimbol?: number;
+  precipitacio?: number;
+  humitatRelativa?: number;
+  velocitatVent?: number;
+  direccioVent?: number;
+  createdAt?: string;
+  updatedAt?: string;
+}

src/app/services/meteocat.service.ts

@@ -0,0 +1,70 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { Municipi } from '../models/municipi.model';
+import { PrediccioDiaria } from '../models/prediccio-diaria.model';
+import { PrediccioHoraria } from '../models/prediccio-horaria.model';
+import { EstacioXema } from '../models/estacio-xema.model';
+import { EstacioMesCercanaResponse } from '../models/estacio-mes-cercana.model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MeteocatService {
+  private readonly apiUrl = 'http://localhost:8080/api/v1';
+
+  constructor(private http: HttpClient) { }
+
+  // === MUNICIPIS ===
+  
+  getAllMunicipis(): Observable<Municipi[]> {
+    return this.http.get<Municipi[]>(`${this.apiUrl}/municipis`);
+  }
+
+  getMunicipiByCode(codi: string): Observable<Municipi> {
+    return this.http.get<Municipi>(`${this.apiUrl}/municipis/${codi}`);
+  }
+
+  searchMunicipis(nom: string): Observable<Municipi[]> {
+    const params = new HttpParams().set('nom', nom);
+    return this.http.get<Municipi[]>(`${this.apiUrl}/municipis/search`, { params });
+  }
+
+  // === PREDICCIONS ===
+  
+  getPrediccioDiaria(municipiCodi: string): Observable<PrediccioDiaria[]> {
+    return this.http.get<PrediccioDiaria[]>(
+      `${this.apiUrl}/prediccio/municipal/diaria/${municipiCodi}`
+    );
+  }
+
+  getPrediccioHoraria(municipiCodi: string): Observable<PrediccioHoraria[]> {
+    return this.http.get<PrediccioHoraria[]>(
+      `${this.apiUrl}/prediccio/municipal/horaria/${municipiCodi}`
+    );
+  }
+
+  // === XEMA ===
+  
+  getAllEstacions(): Observable<EstacioXema[]> {
+    return this.http.get<EstacioXema[]>(`${this.apiUrl}/xema/estacions`);
+  }
+
+  getEstacioByCode(codi: string): Observable<EstacioXema> {
+    return this.http.get<EstacioXema>(`${this.apiUrl}/xema/estacions/${codi}`);
+  }
+
+  getEstacioCercana(municipiCodi: string): Observable<EstacioMesCercanaResponse> {
+    return this.http.get<EstacioMesCercanaResponse>(
+      `${this.apiUrl}/xema/estacions/mes-cercana/${municipiCodi}`
+    );
+  }
+
+  syncEstacions(): Observable<any> {
+    return this.http.post(`${this.apiUrl}/xema/estacions/sync`, {});
+  }
+
+  syncLectures(codiEstacio: string): Observable<any> {
+    return this.http.post(`${this.apiUrl}/xema/lectures/sync/${codiEstacio}`, {});
+  }
+}

src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Frontend</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

src/main.ts

@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { App } from './app/app';
+
+bootstrapApplication(App, appConfig)
+  .catch((err) => console.error(err));

src/styles.scss

@@ -0,0 +1,18 @@
+/* You can add global styles to this file, and also import other style files */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html, body {
+  height: 100%;
+}

tsconfig.app.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts"
+  ]
+}

tsconfig.json

@@ -0,0 +1,33 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "preserve"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

tsconfig.spec.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "vitest/globals"
+    ]
+  },
+  "include": [
+    "src/**/*.d.ts",
+    "src/**/*.spec.ts"
+  ]
+}