weifer/WeatherDashBoard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

vorhersage

Browse Source
This commit is contained in:
marcusferl@weifer.de 2022-09-22 08:52:37 +02:00
parent 9e6d505b69
commit 4e30489b6f
9 changed files with 161 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/app.component.html
View File

@ -1,3 +1,4 @@
<div class="base">
<app-current-weather></app-current-weather>
<app-current-weather></app-current-weather>
<app-forcast-weather></app-forcast-weather>
</div>

6
src/app/app.module.ts
View File

@ -9,6 +9,9 @@ import { ForcastWeatherComponent } from './forcast-weather/forcast-weather.compo
import { MatIconModule } from '@angular/material/icon';
import { CurrentWeatherStateComponent } from './current-weather-state/current-weather-state.component';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatCardModule } from '@angular/material/card';
import { HttpClientModule } from '@angular/common/http';
@ -25,7 +28,8 @@ import { HttpClientModule } from '@angular/common/http';
BrowserAnimationsModule,
MatIconModule,
MatGridListModule,
HttpClientModule
HttpClientModule,
MatCardModule
],
providers: [],
bootstrap: [AppComponent]

1
src/app/current-weather-state/current-weather-state.component.html
View File

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

16
src/app/current-weather/current-weather.component.html
View File

@ -1,6 +1,14 @@
<div class="main_container">
<h3 class="font">Aktuell</h3>
<p></p>
<mat-icon class="icon" aria-hidden="false" font-size="30px" aria-label="Example home icon" fontIcon="sunny"></mat-icon>
<label class="font">{{weatherData?.calendarDayTemperatureMax?.at(0)}} C°</label>
<mat-card class="card">
<mat-card-title-group>
<mat-card-title>Min - Max</mat-card-title>
<mat-icon class="icon" aria-hidden="false" aria-label="Example home icon" fontIcon="sunny">
</mat-icon>
</mat-card-title-group>
<mat-card-content>
Max {{weatherData?.calendarDayTemperatureMax?.at(0)}} C°
<p>Min {{weatherData?.calendarDayTemperatureMin?.at(0)}} C°</p>
</mat-card-content>
</mat-card>
</div>

30
src/app/current-weather/current-weather.component.scss
View File

@ -1,24 +1,38 @@
.main_container{
background-color: rgb(0, 0, 0);
border: 1px solid rgb(0, 0, 0);
.main_container {
background-color: rgb(0, 0, 0);
border: 1px solid rgb(0, 0, 0);
border-radius: 10px;
width:max-content;
width: max-content;
height: max-content;
display: flex;
flex-direction: column;
padding: 30px;
padding: 10px;
justify-content: center;
align-items: center;
}
.font{
.font {
font-size: 40px;
color: white;
}
.icon{
transform:scale(2);
.icon {
transform: scale(2);
margin-top: 10px;
margin-bottom: 50px;
color: white;
}
.card {
color: white;
font-size: 32px;
mat-card-title {}
}
mat-card-title-group {
display: flex;
flex-direction: column;
align-items: center;
}

9
src/app/current-weather/current-weather.component.ts
View File

@ -7,6 +7,7 @@ import { WeatherApiService } from '../weather-api.service';
templateUrl: './current-weather.component.html',
styleUrls: ['./current-weather.component.scss']
})
export class CurrentWeatherComponent implements OnInit {
constructor(public service: WeatherApiService) {
@ -15,9 +16,11 @@ export class CurrentWeatherComponent implements OnInit {
ngOnInit(): void {
this.service.getData()
.subscribe({next: (response) => {
this.weatherData = response;
}});
.subscribe({
next: (response) => {
this.weatherData = response;
}
});
}
}

49
src/app/forcast-weather/forcast-weather.component.html
View File

@ -1 +1,48 @@
<p>forcast-weather works!</p>
<div class="main_container">
<mat-card class="card">
<mat-card-title-group>
<mat-card-title>Vorhersage</mat-card-title>
</mat-card-title-group>
<mat-card-content>
<div class="flex">
<div class="container">
{{weatherData?.dayOfWeek?.at(0)?.slice(0,2)}}
<p>{{weatherData?.calendarDayTemperatureMax?.at(0)}}</p>
<mat-icon class="icon" aria-hidden="false" aria-label="Example home icon" fontIcon="sunny">
</mat-icon>
</div>
<div class="container">
{{weatherData?.dayOfWeek?.at(1)?.slice(0,2)}}
<p>{{weatherData?.calendarDayTemperatureMax?.at(1)}}</p>
<mat-icon class="icon" aria-hidden="false" aria-label="Example home icon" fontIcon="ac_unit">
</mat-icon>
</div>
<div class="container">
{{weatherData?.dayOfWeek?.at(2)?.slice(0,2)}}
<p>{{weatherData?.calendarDayTemperatureMax?.at(2)}}</p>
<mat-icon class="icon" aria-hidden="false" aria-label="Example home icon" fontIcon="thunderstorm">
</mat-icon>
</div>
<div class="container">
{{weatherData?.dayOfWeek?.at(3)?.slice(0,2)}}
<p>{{weatherData?.calendarDayTemperatureMax?.at(3)}}</p>
<mat-icon class="icon" aria-hidden="false" aria-label="Example home icon" fontIcon="cloudy_snowing">
</mat-icon>
</div>
<div class="container">
{{weatherData?.dayOfWeek?.at(4)?.slice(0,2)}}
<p>{{weatherData?.calendarDayTemperatureMax?.at(4)}}</p>
<mat-icon class="icon" aria-hidden="false" aria-label="Example home icon" fontIcon="air">
</mat-icon>
</div>
<div class="container">
{{weatherData?.dayOfWeek?.at(5)?.slice(0,2)}}
<p>{{weatherData?.calendarDayTemperatureMax?.at(5)}}</p>
<mat-icon class="icon" aria-hidden="false" aria-label="Example home icon" fontIcon="cloudy">
</mat-icon>
</div>
</div>
</mat-card-content>
</mat-card>
</div>

54
src/app/forcast-weather/forcast-weather.component.scss
View File

@ -0,0 +1,54 @@
.main_container {
margin-top: 20px;
background-color: rgb(0, 0, 0);
border: 1px solid rgb(0, 0, 0);
border-radius: 10px;
width: max-content;
height: max-content;
display: flex;
flex-direction: column;
padding: 10px;
justify-content: center;
align-items: center;
}
.card {
font-size: 40px;
color: white;
.content_container_up {
color: white;
font-size: 30px;
display: flex;
flex-direction: row;
margin-top: 20px;
}
.content_container_mid {
color: white;
font-size: 30px;
display: flex;
flex-direction: row;
text-align: center;
}
}
.icon {
margin-left: 10px;
}
.flex {
display: flex;
flex-direction: row;
}
.container {
display: flex;
flex-direction: column;
margin-right: 10px;
border-right: 2px solid white;
border-collapse: separate;
border-spacing: 15px 50px 50px 50px;
}

12
src/app/forcast-weather/forcast-weather.component.ts
View File

@ -1,4 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { WeatherData } from '../models/weather.model';
import { WeatherApiService } from '../weather-api.service';
@Component({
selector: 'app-forcast-weather',
@ -7,9 +9,17 @@ import { Component, OnInit } from '@angular/core';
})
export class ForcastWeatherComponent implements OnInit {
constructor() { }
constructor(public service: WeatherApiService) { }
weatherData?: WeatherData
ngOnInit(): void {
this.service.getData()
.subscribe({
next: (response) => {
this.weatherData = response;
}
})
}
}