tasks-03

03-components/10-MeetupView/MeetupView.js

@@ -12,31 +12,43 @@ export default defineComponent({
   components: {
     UiAlert,
     UiContainer,
+    MeetupAgenda,
+    MeetupDescription,
+    MeetupCover,
+    MeetupInfo
   },
 
+  props: {
+    meetup: {
+      type: Array,
+      required: true,
+    },
+  },
+
   template: `
     <div>
 
       <!-- Обложка митапа -->
-
+      <MeetupCover :title="meetup.title" :image="meetup.image"/>
       <UiContainer>
         <div class="meetup">
           <div class="meetup__content">
             <h2>Описание</h2>
 
             <!-- Описание митапа -->
+            <MeetupDescription :description="meetup.description"/>
 
             <h2>Программа</h2>
 
             <!-- Программа митапа -->
             <!-- Или при пустой программе - сообщение "Программа пока пуста..." в UiAlert -->
-            <UiAlert></UiAlert>
+            <UiAlert v-if="meetup.agenda.length === 0">Программа пока пуста...</UiAlert>
+            <MeetupAgenda v-else :agenda="meetup.agenda"/>
 
           </div>
           <div class="meetup__aside">
-
             <!-- Краткая информация о митапе -->
-
+             <MeetupInfo :organizer="meetup.organizer" :place="meetup.place" :date="meetup.date"/>
             <div class="meetup__aside-buttons"></div>
           </div>
         </div>

03-components/20-UiClock/UiClock.js

@@ -1,9 +1,31 @@
-import { defineComponent } from 'vue'
+import { defineComponent, ref, onMounted, onUnmounted } from 'vue';
 
 export default defineComponent({
   name: 'UiClock',
 
-  setup() {},
+  setup() {
+    const time = ref('');
 
-  template: `<div class="clock">10:12:02</div>`,
-})
+    const updateTime = () => {
+      const currentTime = new Date();
+      time.value = currentTime.toLocaleTimeString(navigator.language, { timeStyle: 'medium' });
+    };
+
+    let intervalId;
+
+    onMounted(() => {
+      updateTime(); 
+      intervalId = setInterval(updateTime, 1000); 
+    });
+
+    onUnmounted(() => {
+      clearInterval(intervalId);
+    });
+
+    return {
+      time,
+    };
+  },
+
+  template: `<div class="clock">{{ time }}</div>`,
+});

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

@@ -15,13 +15,21 @@ export default defineComponent({
     },
   },
 
+  methods: {
+    removeEmail(index) {
+      this.$emit('remove-email', index);
+    },
+  },
+
   template: `
     <ul class="emails-list unstyled-list" aria-label="Emails">
       <EmailListItem
         v-for="({ email, isMarked }, index) in emails"
         :key="email"
         :email="email"
         :marked="isMarked"
+        :index="index"
+        @remove-email="removeEmail(index)"
       />
     </ul>
   `,

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

@@ -15,10 +15,16 @@ export default defineComponent({
     },
   },
 
+  methods: {
+    handleRemove() {
+      this.$emit('remove-email');  
+    }
+  },
+
   template: `
     <li :class="{ marked }">
       {{ email }}
-      <button type="button" aria-label="Удалить" @click.stop>❌</button>
+      <button type="button" aria-label="Удалить"  @click.stop="handleRemove">❌</button>
     </li>
   `,
 })

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

@@ -42,6 +42,8 @@ export default defineComponent({
     EmailList,
   },
 
+
+
   setup() {
     const emails = ref(getEmails())
     const query = ref('')
@@ -54,7 +56,7 @@ export default defineComponent({
     })
 
     function removeEmailByIndex(index) {
-      emails.value.splice(index, 1)
+      emails.value.splice(index, 1);
     }
 
     return {
@@ -69,7 +71,7 @@ export default defineComponent({
       <UiFormGroup>
         <UiInput v-model.trim="query" type="search" placeholder="Поиск" aria-label="Поиск" small />
       </UiFormGroup>
-      <EmailList :emails="markedEmails" />
+      <EmailList :emails="markedEmails" @remove-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,73 @@ export default defineComponent({
     UiButton,
   },
 
-  setup() {
+  props: {
+    count: {
+      type: Number,
+      required: true,
+    },
+
+    min: {
+      type: Number,
+      default: 0,
+    },
+
+    max: {
+      type: Number,
+      default: Infinity,
+    },
+  },
+
+  setup(props, { emit }) {
     // Рекомендуется для практики реализовать обработку событий внутри setup, а не непосредственно в шаблоне
+    const counter = ref(props.count);
+
+    watch(
+      () => props.count,
+      (newCount) => {
+        counter.value = newCount;
+      }
+    );
+
+    const increment = () => {
+      if (counter.value < props.max) {
+        counter.value++;
+      }
+    };
+
+    const decrement = () => {
+      if (counter.value > props.min) {
+        counter.value--;
+      }
+    };
+
+    watch(counter, (newCount) => {
+      emit('update:count', newCount);
+    });
+
+
+    return {
+      counter,
+      increment,
+      decrement,
+    };
   },
 
   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="decrement">
+        ➖
+      </UiButton>
+      <span class="count" data-testid="count">{{ counter }}</span>
+      <UiButton 
+        aria-label="Increment" 
+        :disabled="counter >= max" 
+        @click="increment">
+        ➕
+      </UiButton>
     </div>
   `,
 })

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

@@ -1,52 +1,46 @@
-import { defineComponent } from 'vue'
+import { defineComponent, ref} from 'vue'
 import { getWeatherData, WeatherConditionIcons } from './weather.service.ts'
 import './WeatherApp.css'
+import WeatherList from './WeatherList.vue'
 
 export default defineComponent({
   name: 'WeatherApp',
 
+  components: { WeatherList },
+
+  setup() {
+    const weatherData = ref(getWeatherData())
+
+    const kelvinToCelsius = temp => {
+      return (temp - 273.15).toFixed(1)
+    }
+
+    const isNightTime = (currentDt, sunrise, sunset) => {
+      return currentDt < sunrise || currentDt >= sunset
+    }
+
+    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">
-            <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>
-      </ul>
+    <h1 class="title">Погода в Средиземье</h1>
+
+    <ul class="weather-list unstyled-list">
+      <WeatherList 
+        v-for="(region, index) in weatherData" 
+        :key="index" 
+        :region="region" 
+        :kelvinToCelsius="kelvinToCelsius" 
+        :isNightTime="isNightTime" 
+        :WeatherConditionIcons="WeatherConditionIcons"
+      />
+    </ul>
     </div>
   `,
 })

03-components/50-weather-components/WeatherList.vue

@@ -0,0 +1,67 @@
+<template>
+  <li class="weather-card" :class="{'weather-card--night': isNightTime(region.current.dt, region.current.sunrise, region.current.sunset)}">
+    <div class="weather-alert" v-if="region.alert">
+      <span class="weather-alert__icon">⚠️</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">{{ region.current.dt}}</div>
+    </div>
+    <div class="weather-conditions">
+      <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">{{ (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">{{ region.current.humidity }}</div>
+      </div>
+      <div class="weather-details__item">
+        <div class="weather-details__item-label">Облачность, %</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">{{ region.current.wind_speed}}</div>
+      </div>
+    </div>
+  </li>
+</template>
+
+<script>
+export default {
+  name: "WeatherList",
+  props: {
+    region: {
+      required: true,
+      type: Object,
+    },
+    
+    kelvinToCelsius: {
+      type: Function,
+      required: true,
+    },
+
+    isNightTime: {
+      type: Function,
+      required: true,
+    },
+
+    WeatherConditionIcons: {
+      type: Object,
+      required: true,
+    },
+
+  },
+};
+</script>
+
+<style scoped>
+</style>