From b45cc5a409ffc881cba61c798fcf5990f99bdaf6 Mon Sep 17 00:00:00 2001
From: alexmenshikov <menshchikov.aleksandr@yandex.ru>
Date: Mon, 15 Jul 2024 21:50:21 +0700
Subject: [PATCH] =?UTF-8?q?createApp=20=D0=B8=20=D1=88=D0=B0=D0=B1=D0=BB?=
 =?UTF-8?q?=D0=BE=D0=BD=20=D0=BF=D0=BE=D0=B3=D0=BE=D0=B4=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 01-basics/10-create-app/script.js  | 17 +++++++++++
 01-basics/20-weather/WeatherApp.js | 48 ++++++++++++++++++++++--------
 2 files changed, 53 insertions(+), 12 deletions(-)

diff --git a/01-basics/10-create-app/script.js b/01-basics/10-create-app/script.js
index 5c9e337..bff75e3 100644
--- a/01-basics/10-create-app/script.js
+++ b/01-basics/10-create-app/script.js
@@ -1 +1,18 @@
 import { defineComponent, createApp } from 'vue/dist/vue.esm-bundler.js'
+
+const App = defineComponent({
+  name: 'App',
+
+  setup() {
+    return {
+    }
+  },
+
+  template: `
+    <div>Сегодня ${ new Date().toLocaleDateString(navigator.language, { dateStyle: 'long' }) }</div>
+  `,
+})
+
+const app = createApp(App)
+
+app.mount('#app')
diff --git a/01-basics/20-weather/WeatherApp.js b/01-basics/20-weather/WeatherApp.js
index 851e1e2..00c3c8e 100644
--- a/01-basics/20-weather/WeatherApp.js
+++ b/01-basics/20-weather/WeatherApp.js
@@ -4,44 +4,68 @@ import { getWeatherData, WeatherConditionIcons } from './weather.service.ts'
 export default defineComponent({
   name: 'WeatherApp',
 
+  setup() {
+    function convertNumber(value) {
+      return value.toFixed(1);
+    }
+
+    function convertMmHg(value) {
+      return (value * 0.75).toFixed(0);
+    }
+
+    function timeComparison(currentTime, sunriseTime, sunsetTime) {
+      return currentTime < sunriseTime || currentTime > sunsetTime;
+    }
+
+    return {
+      convertNumber,
+      convertMmHg,
+      timeComparison,
+      getWeatherData,
+      WeatherConditionIcons,
+    }
+  },
+
   template: `
     <div>
       <h1 class="title">Погода в Средиземье</h1>
 
-      <ul class="weather-list unstyled-list">
-        <li class="weather-card weather-card--night">
-          <div class="weather-alert">
+      <ul v-for="item in getWeatherData()" class="weather-list unstyled-list">
+        <li class="weather-card"
+          :class="{ 'weather-card--night' : timeComparison(item.current.dt, item.current.sunrise, item.current.sunset) }"
+        >
+          <div v-if="item.alert" class="weather-alert">
             <span class="weather-alert__icon">⚠️</span>
-            <span class="weather-alert__description">Королевская метеослужба короля Арагорна II: Предвещается наступление сильного шторма.</span>
+            <span class="weather-alert__description">{{ item.alert.sender_name }}: {{ item.alert.description }}</span>
           </div>
           <div>
             <h2 class="weather-card__name">
-              Гондор
+              {{ item.geographic_name }}
             </h2>
             <div class="weather-card__time">
-              07:17
+              {{ item.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="item.current.weather.description">{{ WeatherConditionIcons[item.current.weather.id] }}</div>
+            <div class="weather-conditions__temp">{{ convertNumber(item.current.temp - 273.15) }} °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">{{ convertMmHg(item.current.pressure) }}</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">{{ item.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">{{ item.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">{{ item.current.wind_speed }}</div>
             </div>
           </div>
         </li>