add 3-5th tasks of 3rd module

03-components/30-removable-emails/EmailList.js

@@ -15,13 +15,16 @@ export default defineComponent({
     },
   },
 
+  emits: ['deleteEmail'],
+
   template: `
     <ul class="emails-list unstyled-list" aria-label="Emails">
       <EmailListItem
         v-for="({ email, isMarked }, index) in emails"
         :key="email"
         :email="email"
         :marked="isMarked"
+        @delete-email="$emit('deleteEmail', index)"
       />
     </ul>
   `,

03-components/30-removable-emails/EmailListItem.js

@@ -15,10 +15,12 @@ export default defineComponent({
     },
   },
 
+  emits: ['deleteEmail'],
+
   template: `
     <li :class="{ marked }">
       {{ email }}
-      <button type="button" aria-label="Удалить" @click.stop>❌</button>
+      <button type="button" aria-label="Удалить" @click.stop="$emit('deleteEmail')">❌</button>
     </li>
   `,
 })

03-components/30-removable-emails/MarkedEmailsApp.js

@@ -69,7 +69,7 @@ export default defineComponent({
       <UiFormGroup>
         <UiInput v-model.trim="query" type="search" placeholder="Поиск" aria-label="Поиск" small />
       </UiFormGroup>
-      <EmailList :emails="markedEmails" />
+      <EmailList :emails="markedEmails" @delete-email='removeEmailByIndex'/>
     </div>
   `,
 })

03-components/40-UiCounter/UiCounter.js

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, ref, watch } from 'vue'
 import { UiButton } from '@shgk/vue-course-ui'
 import './UiCounter.css'
 
@@ -9,15 +9,57 @@ export default defineComponent({
     UiButton,
   },
 
-  setup() {
-    // Рекомендуется для практики реализовать обработку событий внутри setup, а не непосредственно в шаблоне
+  props: {
+    count: {
+      type: Number,
+      default: 0,
+    },
+
+    min: {
+      type: Number,
+      default: 0,
+    },
+
+    max: {
+      type: Number,
+      default: Infinity,
+    },
+  },
+
+  setup(props, { emit }) {
+    const counter = ref(props.count)
+
+    const increaseCounter = () => {
+      counter.value++
+    }
+
+    const decreaseCounter = () => {
+      counter.value--
+    }
+
+    watch(counter, newCount => {
+      emit('update:count', newCount)
+    })
+
+    watch(
+      () => props.count,
+      newCount => {
+        counter.value = newCount
+      },
+    )
+
+    return {
+      counter,
+      increaseCounter,
+      decreaseCounter,
+    }
   },
 
   template: `
     <div class="counter">
-      <UiButton aria-label="Decrement" disabled>➖</UiButton>
-      <span class="count" data-testid="count">3</span>
-      <UiButton aria-label="Increment">➕</UiButton>
+      <UiButton aria-label="Decrement" :disabled='counter <= min' @click='decreaseCounter'>➖</UiButton>
+      <span class="count" data-testid="count">{{ counter }}</span>
+      <UiButton aria-label="Increment" :disabled='counter >= max' @click='increaseCounter'>➕</UiButton>
     </div>
   `,
 })

03-components/50-weather-components/WeatherAlert.js

@@ -0,0 +1,19 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'WeatherAlert',
+
+  props: {
+    alertData: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  template: `
+     <div class="weather-alert">
+        <span class="weather-alert__icon">⚠️</span>
+        <span class="weather-alert__description">{{alertData.sender_name }}: {{ alertData.description }}</span>
+      </div>
+  `,
+})

03-components/50-weather-components/WeatherApp.js

@@ -1,51 +1,26 @@
-import { defineComponent } from 'vue'
-import { getWeatherData, WeatherConditionIcons } from './weather.service.ts'
+import { defineComponent, ref } from 'vue'
+import { getWeatherData } from './weather.service.ts'
+import WeatherCard from './WeatherCard.js'
 import './WeatherApp.css'
 
 export default defineComponent({
   name: 'WeatherApp',
+  components: { WeatherCard },
+
+  setup() {
+    const cardList = ref(getWeatherData())
+
+    return {
+      cardList,
+    }
+  },
 
   template: `
     <div>
       <h1 class="title">Погода в Средиземье</h1>
 
       <ul class="weather-list unstyled-list">
-        <li class="weather-card weather-card--night">
-          <div class="weather-alert">
-            <span class="weather-alert__icon">⚠️</span>
-            <span class="weather-alert__description">Королевская метеослужба короля Арагорна II: Предвещается наступление сильного шторма.</span>
-          </div>
-          <div>
-            <h2 class="weather-card__name">
-              Гондор
-            </h2>
-            <div class="weather-card__time">
-              07:17
-            </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>
-          <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>
-            <div class="weather-details__item">
-              <div class="weather-details__item-label">Влажность, %</div>
-              <div class="weather-details__item-value">90</div>
-            </div>
-            <div class="weather-details__item">
-              <div class="weather-details__item-label">Облачность, %</div>
-              <div class="weather-details__item-value">100</div>
-            </div>
-            <div class="weather-details__item">
-              <div class="weather-details__item-label">Ветер, м/с</div>
-              <div class="weather-details__item-value">10.5</div>
-            </div>
-          </div>
-        </li>
+        <WeatherCard v-for='card in cardList' :weatherData='card'/>
       </ul>
     </div>
   `,

03-components/50-weather-components/WeatherCard.js

@@ -0,0 +1,86 @@
+import { computed, defineComponent } from 'vue'
+import { WeatherConditionIcons } from './weather.service'
+import WeatherAlert from './WeatherAlert'
+
+export default defineComponent({
+  name: 'WeatherCard',
+
+  components: { WeatherAlert },
+
+  props: {
+    weatherData: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  setup(props) {
+    const formatTemp = temp => {
+      return temp - 273.15
+    }
+
+    const formatPressure = pressure => {
+      return pressure * 0.75
+    }
+
+    const getWeatherIcon = weatherconditionId => {
+      return WeatherConditionIcons[weatherconditionId]
+    }
+
+    const isNigth = (currentTime, sunriseTime, sunsetTime) => {
+      return currentTime < sunriseTime || currentTime > sunsetTime
+    }
+
+    const temperature = computed(() => formatTemp(props.weatherData.current.temp).toFixed(1))
+    const pressure = computed(() => formatPressure(props.weatherData.current.pressure).toFixed(0))
+    const nightTime = computed(() =>
+      isNigth(props.weatherData.current.dt, props.weatherData.current.sunrise, props.weatherData.current.sunset),
+    )
+
+    return {
+      formatTemp,
+      formatPressure,
+      getWeatherIcon,
+      isNigth,
+      temperature,
+      pressure,
+      nightTime,
+    }
+  },
+
+  template: `
+     <li class="weather-card" :class="{ 'weather-card--night': nightTime }">
+        <WeatherAlert v-if='weatherData.alert' :alertData='weatherData.alert'/>
+          <div>
+            <h2 class="weather-card__name">
+              {{ weatherData.geographic_name }}
+            </h2>
+            <div class="weather-card__time">
+            {{ weatherData.current.dt }}
+            </div>
+          </div>
+          <div class="weather-conditions">
+            <div class="weather-conditions__icon" :title="weatherData.current.weather.description">{{ getWeatherIcon(weatherData.current.weather.id) }}</div>
+            <div class="weather-conditions__temp">{{ temperature }} °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">{{ pressure }}</div>
+            </div>
+            <div class="weather-details__item">
+              <div class="weather-details__item-label">Влажность, %</div>
+              <div class="weather-details__item-value">{{ weatherData.current.humidity }}</div>
+            </div>
+            <div class="weather-details__item">
+              <div class="weather-details__item-label">Облачность, %</div>
+              <div class="weather-details__item-value">{{ weatherData.current.clouds }}</div>
+            </div>
+            <div class="weather-details__item">
+              <div class="weather-details__item-label">Ветер, м/с</div>
+              <div class="weather-details__item-value">{{ weatherData.current.wind_speed }}</div>
+            </div>
+          </div>
+        </li>
+  `,
+})