Посмотрел запись дополнительной лекции от 07.01.25 и немного передела…

…л задание 50-weather-components
js-tasks-ru · Jan 9, 2025 · 1fb0040 · 1fb0040
1 parent ede3b02
commit 1fb0040
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 25 deletions.
diff --git a/03-components/50-weather-components/WeatherApp.js b/03-components/50-weather-components/WeatherApp.js
@@ -1,18 +1,22 @@
-import { defineComponent } from 'vue'
+import { defineComponent, computed } from 'vue'
 import { getWeatherData, WeatherConditionIcons } from './weather.service.ts'
-import WeatherAppList from './WeatherAppList.js'
+import WeatherAppCard from './WeatherAppCard.js'
+import WeatherMainData from "./WeatherMainData.js";
 
 export default defineComponent({
   name: 'WeatherApp',
 
   components: {
-    WeatherAppList,
+    WeatherMainData,
+    WeatherAppCard,
   },
 
   setup () {
+    const icons = computed(() => WeatherConditionIcons);
+    const weatherData = computed(() => getWeatherData())
     return {
-      weatherData: getWeatherData(),
-      icons: WeatherConditionIcons,
+      weatherData,
+      icons,
     }
   },
 
@@ -21,9 +25,7 @@ export default defineComponent({
       <h1 class="title">Погода в Средиземье</h1>
 
       <ul class="weather-list unstyled-list">
-        <WeatherAppList
-          :weatherData="weatherData"
-          :icons="icons"/>
+        <WeatherAppCard v-for="card in weatherData" :card :icons/>
       </ul>
     </div>
   `,

diff --git a/...s/50-weather-components/WeatherAppList.js → ...s/50-weather-components/WeatherAppCard.js b/...s/50-weather-components/WeatherAppList.js → ...s/50-weather-components/WeatherAppCard.js
@@ -6,7 +6,7 @@ import WeatherSecondaryData from "./WeatherSecondaryData.js";
 import GeographicInfo from "./GeographicInfo.js";
 
 export default defineComponent({
-  name: 'WeatherAppList',
+  name: 'WeatherAppCard',
 
   components: {
     WeatherCardIfAlert,
@@ -16,8 +16,8 @@ export default defineComponent({
   },
 
   props: {
-    weatherData: {
-      type: Array,
+    card: {
+      type: Object,
       required: true,
     },
 
@@ -39,14 +39,15 @@ export default defineComponent({
 
   template: `
     <li
-      v-for="card in weatherData"
       class="weather-card"
       :class="{ 'weather-card--night' : checkIfNight(card) }">
 
-      <WeatherCardIfAlert :card="card"/>
-      <GeographicInfo :card="card"/>
-      <WeatherMainData :card="card" :icons="icons"/>
-      <WeatherSecondaryData :card="card"/>
+      <WeatherCardIfAlert v-if="card.alert">
+        {{ card.alert.sender_name + ". " + card.alert.description }}
+      </WeatherCardIfAlert>
+      <GeographicInfo :card/>
+      <WeatherMainData :card :icons/>
+      <WeatherSecondaryData :card/>
 
     </li>`
 })
diff --git a/03-components/50-weather-components/WeatherCardIfAlert.js b/03-components/50-weather-components/WeatherCardIfAlert.js
@@ -4,16 +4,17 @@ export default defineComponent( {
   name: 'WeatherCardIfAlert',
 
   props: {
-    card: {
-      type: Object,
-      required: true,
+    text: {
+      type: String,
     }
   },
 
   template: `
-    <div v-if="card.alert" class="weather-alert">
+    <div class="weather-alert">
       <span class="weather-alert__icon">⚠️</span>
-      <span class="weather-alert__description">{{ card.alert.sender_name + ". " + card.alert.description }}</span>
+      <span class="weather-alert__description">
+        <slot>{{ text }}</slot>
+      </span>
     </div>
 `
 })
diff --git a/03-components/50-weather-components/WeatherMainData.js b/03-components/50-weather-components/WeatherMainData.js
@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, computed } from 'vue'
 
 
 export default defineComponent({
@@ -15,10 +15,17 @@ export default defineComponent({
     }
   },
 
+  setup(props) {
+    const temperature = computed(() => Number(props.card.current.temp - 273.15).toFixed(1))
+    return {
+      temperature,
+    }
+  },
+
   template: `
     <div class="weather-conditions">
       <div  class="weather-conditions__icon" :title="card.current.weather.description">{{ icons[card.current.weather.id] }}</div>
-      <div class="weather-conditions__temp">{{ Number(card.current.temp - 273.15).toFixed(1) }} °C</div>
+      <div class="weather-conditions__temp">{{ temperature }} °C</div>
     </div>
   `
 })
diff --git a/03-components/50-weather-components/WeatherSecondaryData.js b/03-components/50-weather-components/WeatherSecondaryData.js
@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, computed } from 'vue'
 
 export default defineComponent({
   name: 'WeatherSecondaryData',
@@ -10,11 +10,18 @@ export default defineComponent({
     }
   },
 
+  setup (props) {
+    const pressure = computed(() => Number(props.card.current.pressure * 0.75).toFixed(0))
+    return {
+      pressure,
+    }
+  },
+
   template: `
     <div class="weather-details">
       <div class="weather-details__item">
         <div class="weather-details__item-label">Давление, мм рт. ст.</div>
-        <div class="weather-details__item-value">{{ Number(card.current.pressure * 0.75).toFixed(0) }}</div>
+        <div class="weather-details__item-value">{{ pressure }}</div>
       </div>
       <div class="weather-details__item">
         <div class="weather-details__item-label">Влажность, %</div>