first commit
This commit is contained in:
Javier Rodríguez Domínguez
+32
@@ -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;"]
|
||||
@@ -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.
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+57
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Generated
+8780
File diff suppressed because it is too large
Load Diff
@@ -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"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 723 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 962 B |
Binary file not shown.
|
After Width: | Height: | Size: 775 B |
Binary file not shown.
|
After Width: | Height: | Size: 882 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 975 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 955 B |
Binary file not shown.
|
After Width: | Height: | Size: 940 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
@@ -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%;
|
||||
}
|
||||
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -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"
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user