+ {{title}}
+
@@ -8,11 +11,11 @@
-
Capaccio
- Pisciotta
+ Capaccio
+ Pisciotta
-
diff --git a/Web/weather/src/app/dashboard/dashboard.component.scss b/Web/weather/src/app/dashboard/dashboard.component.scss
index e69de29..a235971 100644
--- a/Web/weather/src/app/dashboard/dashboard.component.scss
+++ b/Web/weather/src/app/dashboard/dashboard.component.scss
@@ -0,0 +1,44 @@
+@import "../../assets/scss/variables";
+
+.dashboard-container {
+ display: flex;
+ flex-wrap: wrap;
+
+ .date-container {
+ display: block;
+ width: 100%;
+ text-align: center;
+ }
+
+ .info-container {
+ display: flex;
+ flex-wrap: wrap;
+ width: 100%;
+
+ .item {
+ display: inline-block;
+ padding: 5px 10px;
+ border: 1px solid $gray;
+ border-radius: 3px;
+ margin: 3px;
+ font-size: $font-14;
+ font-weight: bold;
+ .value {
+ font-weight: normal;
+ font-size: $font-18;
+ }
+ }
+ }
+
+
+ .graph-container {
+ display: block;
+ width: 100%;
+ padding: 0;
+ }
+
+ .no-data {
+ padding: 20px;
+ margin: auto;
+ }
+}
diff --git a/Web/weather/src/app/dashboard/dashboard.component.ts b/Web/weather/src/app/dashboard/dashboard.component.ts
index 9e27068..32149bc 100644
--- a/Web/weather/src/app/dashboard/dashboard.component.ts
+++ b/Web/weather/src/app/dashboard/dashboard.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core'
+import { Component, OnInit, Input, SimpleChanges, ViewEncapsulation } from '@angular/core'
import { StationService } from '../station.service'
import { environment } from '../../environments/environment'
@@ -11,9 +11,16 @@ import { environment } from '../../environments/environment'
export class DashboardComponent implements OnInit {
- @Input() day: string = ''
+ public today: string = new Date().toISOString().substring(0,10)
+
+ @Input() day: string = this.today
+ @Input() spot: string = this.today
+
public data: any = []
+ public dirLabels: any = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW']
+ public dirArrows: any = ['\u2B07', '\u2B0B', '\u2B05', '\u2B09', '\u2B06', '\u2B08', '\u27A1', '\u2B0A']
+
constructor(
private stationService: StationService
) { }
@@ -22,9 +29,15 @@ export class DashboardComponent implements OnInit {
if(this.day) this.getData()
}
+ ngOnChanges(changes: SimpleChanges): void {
+ if(changes['spot'] && changes['spot'].currentValue) {
+ this.spot = changes['spot'].currentValue
+ this.getData()
+ }
+ }
+
getData(): void {
- this.stationService.getData(this.day).toPromise().then( (data) => {
- console.log(data)
+ this.stationService.getData(this.day, this.spot).toPromise().then( (data) => {
this.data = data.items
},(error) => {
console.error(error)
diff --git a/Web/weather/src/app/graph/graph.component.html b/Web/weather/src/app/graph/graph.component.html
index ca0fe38..1dfa64e 100644
--- a/Web/weather/src/app/graph/graph.component.html
+++ b/Web/weather/src/app/graph/graph.component.html
@@ -1,6 +1,6 @@
+
+
+
+
+ Date/Time: {{data[data.length-1].date | date:'medium'}}
+ Speed: {{data[data.length-1].speed}} Km/h
+ Direction: {{dirLabels[data[data.length-1].direction]}} {{dirArrows[data[data.length-1].direction]}}
+ Temperature: {{data[data.length-1].temperature}} °C
+ Pressure: {{data[data.length-1].pressure}} hpa
+ Humidity: {{data[data.length-1].humidity}}%
+
+
+
+
No data for selected date
+
-
+
${data.date.substring(11)}
- Vento: ${data.speed} Km/h ${this.dirArrows[data.direction]} ${this.directions[data.direction]}
- Temperatura: ${data.temperature} °C
- Pressione: ${data.pressure} hpa
- Umidità: ${data.humidity} %`/* : null*/
+ Wind: ${data.speed} Km/h ${this.dirArrows[data.direction]} ${this.directions[data.direction]}
+ Temperature: ${data.temperature} °C
+ Pressure: ${data.pressure} hpa
+ Humidity: ${data.humidity} %`
}
},
- grid: {left: 0, right: 0, containLabel: true },
- legend: { data: ['Speed', 'Dir', 'Temp', 'Press', 'Umid'] },
+ grid: {left: 0, right: '20px', containLabel: true },
xAxis: { type: 'category', boundaryGap: true, axisTick: true, data: xAxis },
yAxis: [{ type: 'value', show: false }],
+ dataZoom: [{ startValue: this.data.length >= 10 ? this.data[this.data.length-10].date.substring(11,16) : 0}, {type: 'inside'}],
series: [
{ name: 'temp', type: 'line', data: yAxis2, yAxisIndex: 0, smooth: true, stack: 'Total',
areaStyle: {}, lineStyle: { width: 0 },
- label: { show: false, position: 'top', formatter: (d: any) => {
+ label: { show: true, position: 'top', formatter: (d: any) => {
const temp = this.data[d.dataIndex].temperature
return `${temp} °C`
}}
-
},
{ name: 'speed', type: 'line', data: yAxis, yAxisIndex: 0, smooth: true, stack: 'Total',
areaStyle: {},
diff --git a/Web/weather/src/app/station.service.ts b/Web/weather/src/app/station.service.ts
index e51f0ba..cbb1038 100644
--- a/Web/weather/src/app/station.service.ts
+++ b/Web/weather/src/app/station.service.ts
@@ -30,8 +30,8 @@ export class StationService {
}
- getData(day: string): Observable {
- const apiUrl = `${this.restApi}/get_data?day=${day}`;
+ getData(day: string, spot: string): Observable {
+ const apiUrl = `${this.restApi}/get_data?day=${day}&spot=${spot}`;
return this.http.get(apiUrl, {headers: this.commonHeaders()}).pipe(
catchError(this.handleError)
)
diff --git a/Web/weather/src/assets/fonts/icomoon.eot b/Web/weather/src/assets/fonts/icomoon.eot
index bcb5289..4e656d2 100644
Binary files a/Web/weather/src/assets/fonts/icomoon.eot and b/Web/weather/src/assets/fonts/icomoon.eot differ
diff --git a/Web/weather/src/assets/fonts/icomoon.svg b/Web/weather/src/assets/fonts/icomoon.svg
index 7600669..3118ec4 100644
--- a/Web/weather/src/assets/fonts/icomoon.svg
+++ b/Web/weather/src/assets/fonts/icomoon.svg
@@ -38,4 +38,11 @@