chore: add background weather

.cspell.json

@@ -14,5 +14,5 @@
         "**/tsconfig*.json"
     ],
 
-    "ignoreWords": ["lumbermill", "Segoe", "Roboto", "Consolas", "Menlo", "Neue", "apos", "stafffrter"]
+    "ignoreWords": ["lumbermill", "Segoe", "Roboto", "Consolas", "Menlo", "Neue", "apos", "stafffrter", "heatindex"]
 }

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

@@ -2,6 +2,12 @@
     tuiAppearance="whiteblock"
     tuiCardLarge="normal"
     class="card"
+    [ngClass]="{
+        white:
+            weatherService.getTypeOfWeather(info?.current?.condition?.code) == 'rain' ||
+            weatherService.getTypeOfWeather(info?.current?.condition?.code) == 'snow',
+    }"
+    [style.background-image]="weatherService.getImage(info?.current?.condition?.code)"
 >
     <header tuiHeader>
         <h2
@@ -20,33 +26,27 @@
             >
                 {{ info.location.name }}
             </h3>
-            <h1 class="tui-space_top-3 tui-space_bottom-3">{{ info.current.temp_c }}°</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'">{{ info.current.dewpoint_c }}</span>
+                    <span [style.font-weight]="'600'">{{ info?.current?.dewpoint_c }}</span>
                     °/
-                    <span [style.font-weight]="'600'">{{ info.current.heatindex_c }}</span>
+                    <span [style.font-weight]="'600'">{{ info?.current?.heatindex_c }}</span>
                     °
                 </p>
                 <div class="together">
                     <tui-icon icon="@tui.wind" />
-                    {{ info.current.wind_kph }}km/h
+                    {{ info?.current?.wind_kph }}km/h
                 </div>
                 <div class="together">
                     <tui-icon icon="@tui.droplets" />
-                    {{ info.current.humidity }}%
+                    {{ info?.current?.humidity }}%
                 </div>
             </div>
-            <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
-                icon="@tui.sun"
-                class="icon"
-            />
+            <p class="tui-space_top-0 tui-space_bottom-0 tui-text_body-s">{{ info?.current?.condition?.text }}</p>
         </div>
     </div>
     <div class="list-days">

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

@@ -4,6 +4,14 @@
     gap: 0.1rem;
 }
 
+.card {
+    background-position: center;
+}
+
+.white {
+    color: var(--tui-background-base);
+}
+
 .info {
     display: flex;
     justify-content: space-between;

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

@@ -18,7 +18,7 @@ import {WeatherService} from './weather.service';
 })
 export class WeatherComponent implements OnInit {
     protected weatherService = inject(WeatherService);
-    protected info: any;
+    protected info: any = null;
 
     public ngOnInit(): void {
         this.weatherService.getTest().subscribe((result: ResponseData) => {

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

@@ -16,7 +16,7 @@ export const INITIAL_DATA: WeatherData[] = [
 export class WeatherService {
     protected http = inject(HttpClient);
     protected readonly API_KEY = '1df6860ee44f43d693d113704242207';
-    protected readonly city = 'London';
+    protected readonly city = 'Moscow';
     public readonly weatherData = INITIAL_DATA;
 
     public getTest(): Observable<ResponseData> {
@@ -28,4 +28,48 @@ export class WeatherService {
             },
         });
     }
+
+    public getTypeOfWeather(value: number): string {
+        const clouds = [1003, 1006, 1030, 1087, 1135];
+        const rain = [
+            1009, 1063, 1180, 1183, 1186, 1189, 1192, 1195, 1198, 1201, 1204, 1240, 1243,
+            1246, 1249, 1252, 1276,
+        ];
+        const snow = [
+            1066, 1069, 1072, 1114, 1117, 1147, 1168, 1171, 1204, 1210, 1213, 1216, 1219,
+            1222, 1225, 1237, 1255, 1258, 1261, 1264, 1273, 1279, 1282,
+        ];
+
+        if (clouds.includes(value)) {
+            return 'clouds';
+        }
+
+        if (rain.includes(value)) {
+            return 'rain';
+        }
+
+        if (snow.includes(value)) {
+            return 'snow';
+        }
+
+        return 'sun';
+    }
+
+    public getImage(value: number): string {
+        const type = this.getTypeOfWeather(value);
+
+        if (type === 'clouds') {
+            return 'url(/weather/clouds.jpg)';
+        }
+
+        if (type === 'rain') {
+            return 'url(/weather/rain.jpg)';
+        }
+
+        if (type === 'snow') {
+            return 'url(/weather/snow.jpg)';
+        }
+
+        return 'url(/weather/sun.jpg)';
+    }
 }