diff --git a/package-lock.json b/package-lock.json index c527647..acce23d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,10 +9,12 @@ "version": "0.0.0", "dependencies": { "@angular/animations": "^14.0.0", + "@angular/cdk": "^14.2.2", "@angular/common": "^14.0.0", "@angular/compiler": "^14.0.0", "@angular/core": "^14.0.0", "@angular/forms": "^14.0.0", + "@angular/material": "^14.2.2", "@angular/platform-browser": "^14.0.0", "@angular/platform-browser-dynamic": "^14.0.0", "@angular/router": "^14.0.0", @@ -25,6 +27,7 @@ "@angular/cli": "~14.2.1", "@angular/compiler-cli": "^14.0.0", "@types/jasmine": "~4.0.0", + "@types/webpack-env": "^1.18.0", "jasmine-core": "~4.3.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.1.0", @@ -343,6 +346,28 @@ "@angular/core": "14.2.2" } }, + "node_modules/@angular/cdk": { + "version": "14.2.2", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-14.2.2.tgz", + "integrity": "sha512-PXEnhX+QDOsmHVVnqTuoGaK7Wn9hFd5kWAmHTTU7lZr3XVu/AtDcEU+LB19wOFU0fY+kSYHMgN+BYo1TiR8vbw==", + "dependencies": { + "tslib": "^2.3.0" + }, + "optionalDependencies": { + "parse5": "^5.0.0" + }, + "peerDependencies": { + "@angular/common": "^14.0.0 || ^15.0.0", + "@angular/core": "^14.0.0 || ^15.0.0", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, + "node_modules/@angular/cdk/node_modules/parse5": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz", + "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==", + "optional": true + }, "node_modules/@angular/cli": { "version": "14.2.3", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-14.2.3.tgz", @@ -475,6 +500,23 @@ "rxjs": "^6.5.3 || ^7.4.0" } }, + "node_modules/@angular/material": { + "version": "14.2.2", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-14.2.2.tgz", + "integrity": "sha512-jVCaESSTTkLjRvMzSQj294s0Lz1YMVFkl0svrMtWgkUMXHEfx2Vjw6FXdrVrBXlxEIrpfhkTEXVN2DC1kkAkQw==", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/animations": "^14.0.0 || ^15.0.0", + "@angular/cdk": "14.2.2", + "@angular/common": "^14.0.0 || ^15.0.0", + "@angular/core": "^14.0.0 || ^15.0.0", + "@angular/forms": "^14.0.0 || ^15.0.0", + "@angular/platform-browser": "^14.0.0 || ^15.0.0", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, "node_modules/@angular/platform-browser": { "version": "14.2.2", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-14.2.2.tgz", @@ -3033,6 +3075,12 @@ "@types/node": "*" } }, + "node_modules/@types/webpack-env": { + "version": "1.18.0", + "resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.18.0.tgz", + "integrity": "sha512-56/MAlX5WMsPVbOg7tAxnYvNYMMWr/QJiIp6BxVSW3JJXUVzzOn64qW8TzQyMSqSUFM2+PVI4aUHcHOzIz/1tg==", + "dev": true + }, "node_modules/@types/ws": { "version": "8.5.3", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", @@ -12101,6 +12149,23 @@ "tslib": "^2.3.0" } }, + "@angular/cdk": { + "version": "14.2.2", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-14.2.2.tgz", + "integrity": "sha512-PXEnhX+QDOsmHVVnqTuoGaK7Wn9hFd5kWAmHTTU7lZr3XVu/AtDcEU+LB19wOFU0fY+kSYHMgN+BYo1TiR8vbw==", + "requires": { + "parse5": "^5.0.0", + "tslib": "^2.3.0" + }, + "dependencies": { + "parse5": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz", + "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==", + "optional": true + } + } + }, "@angular/cli": { "version": "14.2.3", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-14.2.3.tgz", @@ -12179,6 +12244,14 @@ "tslib": "^2.3.0" } }, + "@angular/material": { + "version": "14.2.2", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-14.2.2.tgz", + "integrity": "sha512-jVCaESSTTkLjRvMzSQj294s0Lz1YMVFkl0svrMtWgkUMXHEfx2Vjw6FXdrVrBXlxEIrpfhkTEXVN2DC1kkAkQw==", + "requires": { + "tslib": "^2.3.0" + } + }, "@angular/platform-browser": { "version": "14.2.2", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-14.2.2.tgz", @@ -13972,6 +14045,12 @@ "@types/node": "*" } }, + "@types/webpack-env": { + "version": "1.18.0", + "resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.18.0.tgz", + "integrity": "sha512-56/MAlX5WMsPVbOg7tAxnYvNYMMWr/QJiIp6BxVSW3JJXUVzzOn64qW8TzQyMSqSUFM2+PVI4aUHcHOzIz/1tg==", + "dev": true + }, "@types/ws": { "version": "8.5.3", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", diff --git a/package.json b/package.json index c7ca77c..bc4a473 100644 --- a/package.json +++ b/package.json @@ -11,10 +11,12 @@ "private": true, "dependencies": { "@angular/animations": "^14.0.0", + "@angular/cdk": "^14.2.2", "@angular/common": "^14.0.0", "@angular/compiler": "^14.0.0", "@angular/core": "^14.0.0", "@angular/forms": "^14.0.0", + "@angular/material": "^14.2.2", "@angular/platform-browser": "^14.0.0", "@angular/platform-browser-dynamic": "^14.0.0", "@angular/router": "^14.0.0", @@ -27,6 +29,7 @@ "@angular/cli": "~14.2.1", "@angular/compiler-cli": "^14.0.0", "@types/jasmine": "~4.0.0", + "@types/webpack-env": "^1.18.0", "jasmine-core": "~4.3.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.1.0", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6df06e1..0144a85 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -9,7 +9,7 @@ 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 { HttpClientModule } from '@angular/common/http'; @NgModule({ @@ -24,7 +24,8 @@ import { MatGridListModule } from '@angular/material/grid-list'; AppRoutingModule, BrowserAnimationsModule, MatIconModule, - MatGridListModule + MatGridListModule, + HttpClientModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/current-weather-state/current-weather-state.component.html b/src/app/current-weather-state/current-weather-state.component.html new file mode 100644 index 0000000..8da53a0 --- /dev/null +++ b/src/app/current-weather-state/current-weather-state.component.html @@ -0,0 +1 @@ +

current-weather-state works!

diff --git a/src/app/current-weather-state/current-weather-state.component.scss b/src/app/current-weather-state/current-weather-state.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/current-weather-state/current-weather-state.component.spec.ts b/src/app/current-weather-state/current-weather-state.component.spec.ts new file mode 100644 index 0000000..b7b49c9 --- /dev/null +++ b/src/app/current-weather-state/current-weather-state.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CurrentWeatherStateComponent } from './current-weather-state.component'; + +describe('CurrentWeatherStateComponent', () => { + let component: CurrentWeatherStateComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ CurrentWeatherStateComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(CurrentWeatherStateComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/current-weather-state/current-weather-state.component.ts b/src/app/current-weather-state/current-weather-state.component.ts new file mode 100644 index 0000000..9858218 --- /dev/null +++ b/src/app/current-weather-state/current-weather-state.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-current-weather-state', + templateUrl: './current-weather-state.component.html', + styleUrls: ['./current-weather-state.component.scss'] +}) +export class CurrentWeatherStateComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/current-weather/current-weather.component.html b/src/app/current-weather/current-weather.component.html new file mode 100644 index 0000000..636ddf8 --- /dev/null +++ b/src/app/current-weather/current-weather.component.html @@ -0,0 +1,6 @@ +
+

Aktuell

+

+ + +
\ No newline at end of file diff --git a/src/app/current-weather/current-weather.component.scss b/src/app/current-weather/current-weather.component.scss new file mode 100644 index 0000000..daf349b --- /dev/null +++ b/src/app/current-weather/current-weather.component.scss @@ -0,0 +1,24 @@ +.main_container{ + 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: 30px; + justify-content: center; + align-items: center; +} + +.font{ + font-size: 40px; + color: white; +} + +.icon{ + transform:scale(2); + margin-top: 10px; + margin-bottom: 50px; + color: white; +} \ No newline at end of file diff --git a/src/app/current-weather/current-weather.component.spec.ts b/src/app/current-weather/current-weather.component.spec.ts new file mode 100644 index 0000000..5953a27 --- /dev/null +++ b/src/app/current-weather/current-weather.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CurrentWeatherComponent } from './current-weather.component'; + +describe('CurrentWeatherComponent', () => { + let component: CurrentWeatherComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ CurrentWeatherComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(CurrentWeatherComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/current-weather/current-weather.component.ts b/src/app/current-weather/current-weather.component.ts new file mode 100644 index 0000000..3f5320b --- /dev/null +++ b/src/app/current-weather/current-weather.component.ts @@ -0,0 +1,23 @@ +import { Component, OnInit } from '@angular/core'; +import { WeatherData } from '../models/weather.model'; +import { WeatherApiService } from '../weather-api.service'; + +@Component({ + selector: 'app-current-weather', + templateUrl: './current-weather.component.html', + styleUrls: ['./current-weather.component.scss'] +}) +export class CurrentWeatherComponent implements OnInit { + + constructor(public service: WeatherApiService) { + } + weatherData?: WeatherData + + ngOnInit(): void { + this.service.getData() + .subscribe({next: (response) => { + this.weatherData = response; + }}); + } + +} diff --git a/src/app/forcast-weather/forcast-weather.component.html b/src/app/forcast-weather/forcast-weather.component.html new file mode 100644 index 0000000..89b91d6 --- /dev/null +++ b/src/app/forcast-weather/forcast-weather.component.html @@ -0,0 +1 @@ +

forcast-weather works!

diff --git a/src/app/forcast-weather/forcast-weather.component.scss b/src/app/forcast-weather/forcast-weather.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/forcast-weather/forcast-weather.component.spec.ts b/src/app/forcast-weather/forcast-weather.component.spec.ts new file mode 100644 index 0000000..c6069af --- /dev/null +++ b/src/app/forcast-weather/forcast-weather.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ForcastWeatherComponent } from './forcast-weather.component'; + +describe('ForcastWeatherComponent', () => { + let component: ForcastWeatherComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ForcastWeatherComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ForcastWeatherComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/forcast-weather/forcast-weather.component.ts b/src/app/forcast-weather/forcast-weather.component.ts new file mode 100644 index 0000000..05e146e --- /dev/null +++ b/src/app/forcast-weather/forcast-weather.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-forcast-weather', + templateUrl: './forcast-weather.component.html', + styleUrls: ['./forcast-weather.component.scss'] +}) +export class ForcastWeatherComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/models/weather.model.ts b/src/app/models/weather.model.ts new file mode 100644 index 0000000..7fbf5b0 --- /dev/null +++ b/src/app/models/weather.model.ts @@ -0,0 +1,56 @@ +export interface WeatherData { + calendarDayTemperatureMax: number[] + calendarDayTemperatureMin: number[] + dayOfWeek: string[] + expirationTimeUtc: number[] + moonPhase: string[] + moonPhaseCode: string[] + moonPhaseDay: number[] + moonriseTimeLocal: string[] + moonriseTimeUtc: number[] + moonsetTimeLocal: string[] + moonsetTimeUtc: number[] + narrative: string[] + qpf: number[] + qpfSnow: number[] + sunriseTimeLocal: string[] + sunriseTimeUtc: number[] + sunsetTimeLocal: string[] + sunsetTimeUtc: number[] + temperatureMax: number | undefined[] + temperatureMin: number[] + validTimeLocal: string[] + validTimeUtc: number[] + daypart: Daypart[] + } + + export interface Daypart { + cloudCover: number | undefined[] + dayOrNight: string | undefined[] + daypartName: string | undefined[] + iconCode: number | undefined[] + iconCodeExtend: number | undefined[] + narrative: string | undefined[] + precipChance: number | undefined[] + precipType: string | undefined[] + qpf: number | undefined[] + qpfSnow: number | undefined[] + qualifierCode: any[] + qualifierPhrase: any[] + relativeHumidity: number | undefined[] + snowRange: string | undefined[] + temperature: number | undefined[] + temperatureHeatIndex: number | undefined[] + temperatureWindChill: number | undefined[] + thunderCategory: any[] + thunderIndex: number | undefined[] + uvDescription: string | undefined[] + uvIndex: number | undefined[] + windDirection: number | undefined[] + windDirectionCardinal: string | undefined[] + windPhrase: string | undefined[] + windSpeed: number | undefined[] + wxPhraseLong: string | undefined[] + wxPhraseShort: string | undefined[] + } + \ No newline at end of file diff --git a/src/app/weather-api.service.spec.ts b/src/app/weather-api.service.spec.ts new file mode 100644 index 0000000..de7c47a --- /dev/null +++ b/src/app/weather-api.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { WeatherApiService } from './weather-api.service'; + +describe('WeatherApiService', () => { + let service: WeatherApiService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(WeatherApiService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/weather-api.service.ts b/src/app/weather-api.service.ts new file mode 100644 index 0000000..5fd351a --- /dev/null +++ b/src/app/weather-api.service.ts @@ -0,0 +1,22 @@ +import { HttpClient } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; +import { WeatherData } from './models/weather.model'; + +@Injectable({ + providedIn: 'root' +}) +export class WeatherApiService { +url:string = "https://api.weather.com/v3/wx/forecast/daily/5day?geocode=49.9667,7.9046&format=json&units=m&language=de-DE&apiKey=bd2007c3853d41bba007c3853d21bbb1"; +temp:any + + +constructor(private http:HttpClient) {} + + +getData():Observable{ + return this.http.get(this.url) +} + + +} \ No newline at end of file diff --git a/src/index.html b/src/index.html index 21a639f..61582b0 100644 --- a/src/index.html +++ b/src/index.html @@ -6,8 +6,11 @@ + + + - + diff --git a/src/styles.scss b/src/styles.scss index 90d4ee0..a02be5d 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1 +1,3 @@ -/* You can add global styles to this file, and also import other style files */ +body{ +background-color: rgb(23 23 23); + } \ No newline at end of file diff --git a/tsconfig.app.json b/tsconfig.app.json index 82d91dc..b120c1d 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -3,7 +3,7 @@ "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/app", - "types": [] + "types": ["node"] }, "files": [ "src/main.ts",