answer: task 3

js-tasks-ru · Dec 17, 2024 · 8fa5e24 · 8fa5e24
1 parent 1cfd797
commit 8fa5e24
Showing 1 changed file with 42 additions and 12 deletions.
diff --git a/01-basics/20-weather/WeatherApp.js b/01-basics/20-weather/WeatherApp.js
@@ -1,47 +1,77 @@
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 import { getWeatherData, WeatherConditionIcons } from './weather.service.ts'
 
 export default defineComponent({
   name: 'WeatherApp',
+
+  setup() {
+    const weatherData = ref(getWeatherData())
+
+    const kelvinToCelsius = (temp) => {
+      return (temp - 273.15).toFixed(1) 
+    }
+
+    const isNightTime = (currentDt, sunrise, sunset) => {
+      const currentTime = new Date(`1970-01-01T${currentDt}:00`).getHours()
+      const sunriseHour = parseInt(sunrise.split(':')[0], 10)
+      const sunsetHour = parseInt(sunset.split(':')[0], 10)
+
+      return currentTime < sunriseHour || currentTime >= sunsetHour
+    }
+
+    return {
+      weatherData,
+      kelvinToCelsius,
+      WeatherConditionIcons, 
+      isNightTime,
+    }
+  },
 
   template: `
     <div>
       <h1 class="title">Погода в Средиземье</h1>
 
       <ul class="weather-list unstyled-list">
-        <li class="weather-card weather-card--night">
-          <div class="weather-alert">
+        <li class="weather-card" :class="{
+            'weather-card--night': isNightTime(region.current.dt, region.current.sunrise, region.current.sunset)
+          }" v-for="(region, index) in weatherData" 
+        :key="index">
+          <div class="weather-alert" v-if="region.alert">
             <span class="weather-alert__icon">⚠️</span>
-            <span class="weather-alert__description">Королевская метеослужба короля Арагорна II: Предвещается наступление сильного шторма.</span>
+            <span class="weather-alert__description">
+              {{ region.alert.sender_name }}: {{ region.alert.description }}
+            </span>
           </div>
           <div>
             <h2 class="weather-card__name">
-              Гондор
+            {{ region.geographic_name }}
             </h2>
             <div class="weather-card__time">
-              07:17
+            {{ region.current.dt }}
             </div>
           </div>
           <div class="weather-conditions">
-            <div class="weather-conditions__icon" title="thunderstorm with heavy rain">⛈️</div>
-            <div class="weather-conditions__temp">15.0 °C</div>
+          <div class="weather-conditions__icon" :title="region.current.weather.description">
+              {{ WeatherConditionIcons[region.current.weather.id] }}
+            </div>
+            <div class="weather-conditions__temp">{{ kelvinToCelsius(region.current.temp) }} °C</div>
           </div>
           <div class="weather-details">
             <div class="weather-details__item">
               <div class="weather-details__item-label">Давление, мм рт. ст.</div>
-              <div class="weather-details__item-value">754</div>
+              <div class="weather-details__item-value">{{ (region.current.pressure / 1.333).toFixed(0) }}</div>
             </div>
             <div class="weather-details__item">
               <div class="weather-details__item-label">Влажность, %</div>
-              <div class="weather-details__item-value">90</div>
+              <div class="weather-details__item-value">{{ region.current.humidity }}</div>
             </div>
             <div class="weather-details__item">
               <div class="weather-details__item-label">Облачность, %</div>
-              <div class="weather-details__item-value">100</div>
+              <div class="weather-details__item-value">{{ region.current.clouds }}</div>
             </div>
             <div class="weather-details__item">
               <div class="weather-details__item-label">Ветер, м/с</div>
-              <div class="weather-details__item-value">10.5</div>
+              <div class="weather-details__item-value">{{ region.current.wind_speed }}</div>
             </div>
           </div>
         </li>