From e45c2bf76142eeb0b34e65cc0e7193aa227b2291 Mon Sep 17 00:00:00 2001
From: Anastasia th9 <anastasiath9@Noutbuk-Anastasia.local>
Date: Wed, 1 Jan 2025 12:47:41 +0200
Subject: [PATCH] tasks-03

---
 03-components/10-MeetupView/MeetupView.js     | 20 ++++-
 03-components/20-UiClock/UiClock.js           | 30 +++++++-
 .../30-removable-emails/EmailList.js          | 16 +++-
 .../30-removable-emails/EmailListItem.js      |  8 +-
 .../30-removable-emails/MarkedEmailsApp.js    |  6 +-
 03-components/40-UiCounter/UiCounter.js       | 68 +++++++++++++++--
 .../50-weather-components/WeatherApp.js       | 60 +++++----------
 .../50-weather-components/WeatherList.vue     | 73 +++++++++++++++++++
 05-ts/10-MeetupView-TS/MeetupAgenda.vue       | 14 ++--
 05-ts/10-MeetupView-TS/MeetupAgendaItem.vue   | 14 ++--
 05-ts/10-MeetupView-TS/MeetupCover.vue        | 16 ++--
 05-ts/10-MeetupView-TS/MeetupDescription.vue  | 11 ++-
 05-ts/10-MeetupView-TS/MeetupInfo.vue         | 22 ++----
 05-ts/10-MeetupView-TS/MeetupView.vue         | 14 ++--
 14 files changed, 257 insertions(+), 115 deletions(-)
 create mode 100644 03-components/50-weather-components/WeatherList.vue

diff --git a/03-components/10-MeetupView/MeetupView.js b/03-components/10-MeetupView/MeetupView.js
index c2715d1..7f4025d 100644
--- a/03-components/10-MeetupView/MeetupView.js
+++ b/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>
diff --git a/03-components/20-UiClock/UiClock.js b/03-components/20-UiClock/UiClock.js
index 8215f32..2c3dd5a 100644
--- a/03-components/20-UiClock/UiClock.js
+++ b/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>`,
+});
diff --git a/03-components/30-removable-emails/EmailList.js b/03-components/30-removable-emails/EmailList.js
index 7c8096e..627b3d0 100644
--- a/03-components/30-removable-emails/EmailList.js
+++ b/03-components/30-removable-emails/EmailList.js
@@ -15,13 +15,27 @@ export default defineComponent({
     },
   },
 
+  emits: ['remove-email'],
+
+  setup(props, { emit }) {
+
+    const removeEmailHandler = (index) => {
+      emit('removeEmail', index)
+    }
+
+    return {
+      removeEmailHandler
+    }
+  },
+
   template: `
     <ul class="emails-list unstyled-list" aria-label="Emails">
-      <EmailListItem
+      <email-list-item
         v-for="({ email, isMarked }, index) in emails"
         :key="email"
         :email="email"
         :marked="isMarked"
+        @remove-email="removeEmailHandler(index)"
       />
     </ul>
   `,
diff --git a/03-components/30-removable-emails/EmailListItem.js b/03-components/30-removable-emails/EmailListItem.js
index c88ef26..a3629ef 100644
--- a/03-components/30-removable-emails/EmailListItem.js
+++ b/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>
   `,
 })
diff --git a/03-components/30-removable-emails/MarkedEmailsApp.js b/03-components/30-removable-emails/MarkedEmailsApp.js
index 5e77151..f314c5c 100644
--- a/03-components/30-removable-emails/MarkedEmailsApp.js
+++ b/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>
   `,
 })
diff --git a/03-components/40-UiCounter/UiCounter.js b/03-components/40-UiCounter/UiCounter.js
index 48ae865..f3b7972 100644
--- a/03-components/40-UiCounter/UiCounter.js
+++ b/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>
   `,
 })
diff --git a/03-components/50-weather-components/WeatherApp.js b/03-components/50-weather-components/WeatherApp.js
index 5fb34c3..a95ad86 100644
--- a/03-components/50-weather-components/WeatherApp.js
+++ b/03-components/50-weather-components/WeatherApp.js
@@ -1,52 +1,32 @@
-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())
+   
+    return {
+      weatherData,
+    }
+  },
+
   template: `
     <div>
-      <h1 class="title">Погода в Средиземье</h1>
+    <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>
+    <ul class="weather-list unstyled-list">
+      <WeatherList 
+        v-for="(region, index) in weatherData" 
+        :key="index" 
+        :region="region" 
+      />
+    </ul>
     </div>
   `,
 })
diff --git a/03-components/50-weather-components/WeatherList.vue b/03-components/50-weather-components/WeatherList.vue
new file mode 100644
index 0000000..229c026
--- /dev/null
+++ b/03-components/50-weather-components/WeatherList.vue
@@ -0,0 +1,73 @@
+<script>
+import { WeatherConditionIcons } from './weather.service.ts'
+
+export default {
+  name: "WeatherList",
+  props: {
+    region: {
+      required: true,
+      type: Object,
+    },
+  },
+
+  setup(props) {
+    const weatherConditionIcons = WeatherConditionIcons || {};
+
+    const kelvinToCelsius = (temp) => {
+      return (temp - 273.15).toFixed(1);
+    };
+
+    const isNightTime = (currentTime, sunrise, sunset) => {
+      return currentTime < sunrise || currentTime > sunset;
+    };
+
+    return {
+      weatherConditionIcons,
+      kelvinToCelsius,
+      isNightTime,
+      region: props.region,  
+    };
+  },
+
+};
+</script>
+
+<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>
+
+<style scoped></style>
diff --git a/05-ts/10-MeetupView-TS/MeetupAgenda.vue b/05-ts/10-MeetupView-TS/MeetupAgenda.vue
index f3e1ce3..becb14f 100644
--- a/05-ts/10-MeetupView-TS/MeetupAgenda.vue
+++ b/05-ts/10-MeetupView-TS/MeetupAgenda.vue
@@ -1,14 +1,10 @@
-<script setup>
-// import type { MeetupAgendaItemDTO } from '@shgk/vue-course-ui'
+<script setup lang="ts">
+import type { MeetupAgendaItemDTO } from '@shgk/vue-course-ui'
 import MeetupAgendaItem from './MeetupAgendaItem.vue'
 
-defineProps({
-  agenda: {
-    // Настоящий тип - массив объектов типа MeetupAgendaItemDTO
-    type: Array,
-    required: true,
-  },
-})
+defineProps<{
+  agenda: MeetupAgendaItemDTO[]
+}>()
 </script>
 
 <template>
diff --git a/05-ts/10-MeetupView-TS/MeetupAgendaItem.vue b/05-ts/10-MeetupView-TS/MeetupAgendaItem.vue
index 7335f32..242e6e0 100644
--- a/05-ts/10-MeetupView-TS/MeetupAgendaItem.vue
+++ b/05-ts/10-MeetupView-TS/MeetupAgendaItem.vue
@@ -1,15 +1,11 @@
-<script setup>
-// import type { MeetupAgendaItemDTO } from '@shgk/vue-course-ui'
+<script setup lang="ts">
+import type { MeetupAgendaItemDTO } from '@shgk/vue-course-ui'
 import { computed } from 'vue'
 import { UiIcon } from '@shgk/vue-course-ui'
 
-const props = defineProps({
-  agendaItem: {
-    // Настоящий тип - MeetupAgendaItemDTO
-    type: Object,
-    required: true,
-  },
-})
+const props = defineProps<{
+  agendaItem: MeetupAgendaItemDTO
+}>()
 
 const agendaItemDefaultTitles = {
   registration: 'Регистрация',
diff --git a/05-ts/10-MeetupView-TS/MeetupCover.vue b/05-ts/10-MeetupView-TS/MeetupCover.vue
index 069b144..2b9203d 100644
--- a/05-ts/10-MeetupView-TS/MeetupCover.vue
+++ b/05-ts/10-MeetupView-TS/MeetupCover.vue
@@ -1,16 +1,12 @@
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue'
 
-const props = defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
+interface MeetupCoverProps {
+  title: string
+  image?: string 
+}
 
-  image: {
-    type: String,
-  },
-})
+const props = defineProps<MeetupCoverProps>()
 
 const bgStyle = computed(() => (props.image ? { '--bg-url': `url('${props.image}')` } : undefined))
 </script>
diff --git a/05-ts/10-MeetupView-TS/MeetupDescription.vue b/05-ts/10-MeetupView-TS/MeetupDescription.vue
index 79485f9..6fec33c 100644
--- a/05-ts/10-MeetupView-TS/MeetupDescription.vue
+++ b/05-ts/10-MeetupView-TS/MeetupDescription.vue
@@ -1,9 +1,8 @@
-<script setup>
-defineProps({
-  description: {
-    type: String,
-  },
-})
+<script setup lang="ts">
+// Make description optional if it’s not required
+const props = defineProps<{
+  description?: string 
+}>()
 </script>
 
 <template>
diff --git a/05-ts/10-MeetupView-TS/MeetupInfo.vue b/05-ts/10-MeetupView-TS/MeetupInfo.vue
index 3c331d4..859e8a0 100644
--- a/05-ts/10-MeetupView-TS/MeetupInfo.vue
+++ b/05-ts/10-MeetupView-TS/MeetupInfo.vue
@@ -1,23 +1,15 @@
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue'
 import { UiIcon } from '@shgk/vue-course-ui'
 
-const props = defineProps({
-  organizer: {
-    type: String,
-    required: true,
-  },
 
-  place: {
-    type: String,
-    required: true,
-  },
+interface MeetupInfoProps {
+  organizer: string
+  place: string
+  date: number
+}
 
-  date: {
-    type: Number,
-    required: true,
-  },
-})
+const props = defineProps<MeetupInfoProps>()
 
 const isoDate = computed(() => new Date(props.date).toISOString().slice(0, 10))
 const localDate = computed(() =>
diff --git a/05-ts/10-MeetupView-TS/MeetupView.vue b/05-ts/10-MeetupView-TS/MeetupView.vue
index a4c5f6f..a2d500d 100644
--- a/05-ts/10-MeetupView-TS/MeetupView.vue
+++ b/05-ts/10-MeetupView-TS/MeetupView.vue
@@ -1,18 +1,14 @@
-<script setup>
-// import type { MeetupDTO } from '@shgk/vue-course-ui'
+<script setup lang="ts">
+import type { MeetupDTO } from '@shgk/vue-course-ui'
 import { UiAlert, UiContainer } from '@shgk/vue-course-ui'
 import MeetupAgenda from './MeetupAgenda.vue'
 import MeetupDescription from './MeetupDescription.vue'
 import MeetupCover from './MeetupCover.vue'
 import MeetupInfo from './MeetupInfo.vue'
 
-defineProps({
-  meetup: {
-    // Настоящий тип - MeetupDTO
-    type: Object,
-    required: true,
-  },
-})
+defineProps<{
+  meetup: MeetupDTO
+}>()
 </script>
 
 <template>