chore: add api

apps/taiga-lumbermill/src/components/app/app.config.ts

@@ -1,3 +1,4 @@
+import {provideHttpClient} from '@angular/common/http';
 import type {ApplicationConfig} from '@angular/core';
 import {provideZoneChangeDetection} from '@angular/core';
 import {provideAnimations} from '@angular/platform-browser/animations';
@@ -11,6 +12,7 @@ export const appConfig: ApplicationConfig = {
         provideAnimations(),
         provideZoneChangeDetection({eventCoalescing: true}),
         provideRouter(appRoutes),
+        provideHttpClient(),
         NG_EVENT_PLUGINS,
     ],
 };

apps/taiga-lumbermill/src/dashboards/iot/components/weather/weather.component.html

@@ -16,30 +16,31 @@
             <h3
                 tuiTitle
                 class="tui-text_body-m"
+                (click)="weatherService.getTest()"
             >
-                New York
+                {{ info.location.name }}
             </h3>
-            <h1 class="tui-space_top-3 tui-space_bottom-3">31°</h1>
+            <h1 class="tui-space_top-3 tui-space_bottom-3">{{ info.current.temp_c }}°</h1>
             <div class="description">
                 <p
                     class="tui-space_top-0 tui-space_bottom-0"
                     [style.display]="'flex'"
                 >
-                    <span [style.font-weight]="'600'">23</span>
+                    <span [style.font-weight]="'600'">{{ info.current.dewpoint_c }}</span>
                     °/
-                    <span [style.font-weight]="'600'">30</span>
+                    <span [style.font-weight]="'600'">{{ info.current.heatindex_c }}</span>
                     °
                 </p>
                 <div class="together">
                     <tui-icon icon="@tui.wind" />
-                    3km/h
+                    {{ info.current.wind_kph }}km/h
                 </div>
                 <div class="together">
                     <tui-icon icon="@tui.droplets" />
-                    13%
+                    {{ info.current.humidity }}%
                 </div>
             </div>
-            <p class="tui-space_top-0 tui-space_bottom-0 tui-text_body-s">Sunny</p>
+            <p class="tui-space_top-0 tui-space_bottom-0 tui-text_body-s">{{ info.current.condition.text }}</p>
         </div>
         <div class="main-logo">
             <tui-icon
@@ -50,7 +51,7 @@ <h1 class="tui-space_top-3 tui-space_bottom-3">31°</h1>
     </div>
     <div class="list-days">
         <div
-            *ngFor="let card of weatherService"
+            *ngFor="let card of weatherService.weatherData"
             class="small-card"
         >
             <tui-icon

apps/taiga-lumbermill/src/dashboards/iot/components/weather/weather.component.ts

@@ -1,9 +1,11 @@
 import {CommonModule} from '@angular/common';
+import type {OnInit} from '@angular/core';
 import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
 import {TuiAppearance, TuiIcon, TuiTitle} from '@taiga-ui/core';
 import {TuiHeader} from '@taiga-ui/experimental';
 import {TuiCardLarge} from '@taiga-ui/layout';
 
+import type {ResponseData} from './weather.interface';
 import {WeatherService} from './weather.service';
 
 @Component({
@@ -14,6 +16,13 @@ import {WeatherService} from './weather.service';
     styleUrl: './weather.component.less',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class WeatherComponent {
-    protected weatherService = inject(WeatherService).weatherData;
+export class WeatherComponent implements OnInit {
+    protected weatherService = inject(WeatherService);
+    protected info: any;
+
+    public ngOnInit(): void {
+        this.weatherService.getTest().subscribe((result: ResponseData) => {
+            this.info = result;
+        });
+    }
 }

apps/taiga-lumbermill/src/dashboards/iot/components/weather/weather.interface.ts

@@ -0,0 +1,29 @@
+export interface WeatherData {
+    readonly day: string;
+    readonly temp: string;
+    readonly icon: string;
+}
+
+export interface ResponseLocation {
+    name: string;
+}
+
+export interface ResponseCondition {
+    code: number;
+    text: string;
+    icon: string;
+}
+
+export interface ResponseCurrent {
+    condition: ResponseCondition;
+    dewpoint_c: string;
+    temp_c: string;
+    heatindex_c: string;
+    humidity: string;
+    wind_kph: string;
+}
+
+export interface ResponseData {
+    location: ResponseLocation;
+    current: ResponseCurrent;
+}

apps/taiga-lumbermill/src/dashboards/iot/components/weather/weather.service.ts

@@ -1,10 +1,8 @@
-import {Injectable} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {inject, Injectable} from '@angular/core';
+import type {Observable} from 'rxjs';
 
-interface WeatherData {
-    readonly day: string;
-    readonly temp: string;
-    readonly icon: string;
-}
+import type {ResponseData, WeatherData} from './weather.interface';
 
 export const INITIAL_DATA: WeatherData[] = [
     {day: 'Fri', temp: '21°/25°', icon: '@tui.snowflake'},
@@ -16,5 +14,18 @@ export const INITIAL_DATA: WeatherData[] = [
     providedIn: 'root',
 })
 export class WeatherService {
+    protected http = inject(HttpClient);
+    protected readonly API_KEY = '1df6860ee44f43d693d113704242207';
+    protected readonly city = 'London';
     public readonly weatherData = INITIAL_DATA;
+
+    public getTest(): Observable<ResponseData> {
+        return this.http.get<ResponseData>('http://api.weatherapi.com/v1/current.json', {
+            params: {
+                key: this.API_KEY,
+                q: this.city,
+                api: 'yes',
+            },
+        });
+    }
 }