first commit
This commit is contained in:
Javier Rodríguez Domínguez
@@ -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()
|
||||
]
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
<router-outlet />
|
||||
@@ -0,0 +1,7 @@
|
||||
import { Routes } from '@angular/router';
|
||||
import { Home } from './components/home/home';
|
||||
|
||||
export const routes: Routes = [
|
||||
{ path: '', component: Home },
|
||||
{ path: '**', redirectTo: '' }
|
||||
];
|
||||
@@ -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');
|
||||
});
|
||||
});
|
||||
@@ -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');
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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';
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<p>weather-icon works!</p>
|
||||
@@ -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 {}
|
||||
@@ -0,0 +1,7 @@
|
||||
import { EstacioXema } from './estacio-xema.model';
|
||||
|
||||
export interface EstacioMesCercanaResponse {
|
||||
municipiCodi: string;
|
||||
estacio: EstacioXema;
|
||||
distancia: number;
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
export interface Municipi {
|
||||
codi: string;
|
||||
nom: string;
|
||||
latitud: number;
|
||||
longitud: number;
|
||||
altitud: number;
|
||||
codiComarca?: string;
|
||||
nomComarca?: string;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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}`, {});
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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));
|
||||
@@ -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%;
|
||||
}
|
||||
Reference in New Issue
Block a user