createApp и шаблон погода

js-tasks-ru · Jul 15, 2024 · b45cc5a · b45cc5a
1 parent 745040e
commit b45cc5a
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 12 deletions.
diff --git 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
@@ -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>