answer: task 3

js-tasks-ru · Dec 17, 2024 · ba1a70f · ba1a70f
1 parent 1cfd797
commit ba1a70f
Show file tree

Hide file tree

Showing 9 changed files with 161 additions and 94 deletions.
diff --git a/01-basics/20-weather/WeatherApp.js b/01-basics/20-weather/WeatherApp.js
@@ -1,47 +1,77 @@
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 import { getWeatherData, WeatherConditionIcons } from './weather.service.ts'
 
 export default defineComponent({
   name: 'WeatherApp',
+
+  setup() {
+    const weatherData = ref(getWeatherData())
+
+    const kelvinToCelsius = (temp) => {
+      return (temp - 273.15).toFixed(1) 
+    }
+
+    const isNightTime = (currentDt, sunrise, sunset) => {
+      const currentTime = new Date(`1970-01-01T${currentDt}:00`).getHours()
+      const sunriseHour = parseInt(sunrise.split(':')[0], 10)
+      const sunsetHour = parseInt(sunset.split(':')[0], 10)
+
+      return currentTime < sunriseHour || currentTime >= sunsetHour
+    }
+
+    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">
+        <li class="weather-card" :class="{
+            'weather-card--night': isNightTime(region.current.dt, region.current.sunrise, region.current.sunset)
+          }" v-for="(region, index) in weatherData" 
+        :key="index">
+          <div class="weather-alert" v-if="region.alert">
             <span class="weather-alert__icon">⚠️</span>
-            <span class="weather-alert__description">Королевская метеослужба короля Арагорна II: Предвещается наступление сильного шторма.</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">
-              07:17
+            {{ region.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="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">754</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">90</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">100</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">10.5</div>
+              <div class="weather-details__item-value">{{ region.current.wind_speed }}</div>
             </div>
           </div>
         </li>

diff --git a/04-sfc/10-MeetupView-script-setup/MeetupAgenda.vue b/04-sfc/10-MeetupView-script-setup/MeetupAgenda.vue
@@ -1,4 +1,4 @@
-<script>
+<!-- <script>
 import { defineComponent } from 'vue'
 import MeetupAgendaItem from './MeetupAgendaItem.vue'
 
@@ -16,6 +16,17 @@ export default defineComponent({
     },
   },
 })
+</script> -->
+
+<script setup>
+import MeetupAgendaItem from './MeetupAgendaItem.vue'
+
+defineProps({
+  agenda: {
+    type: Array,
+    required: true,
+  },
+})
 </script>
 
 <template>

diff --git a/04-sfc/10-MeetupView-script-setup/MeetupAgendaItem.vue b/04-sfc/10-MeetupView-script-setup/MeetupAgendaItem.vue
@@ -1,4 +1,4 @@
-<script>
+<!-- <script>
 import { computed, defineComponent } from 'vue'
 import { UiIcon } from '@shgk/vue-course-ui'
 
@@ -47,6 +47,43 @@ export default defineComponent({
     }
   },
 })
+</script> -->
+
+<script setup>
+import { computed } from 'vue'
+import { UiIcon } from '@shgk/vue-course-ui'
+
+const agendaItemDefaultTitles = {
+  registration: 'Регистрация',
+  opening: 'Открытие',
+  break: 'Перерыв',
+  coffee: 'Coffee Break',
+  closing: 'Закрытие',
+  afterparty: 'Afterparty',
+  talk: 'Доклад',
+  other: 'Другое',
+}
+
+const agendaItemIcons = {
+  registration: 'key',
+  opening: 'cal-sm',
+  talk: 'tv',
+  break: 'clock',
+  coffee: 'coffee',
+  closing: 'key',
+  afterparty: 'cal-sm',
+  other: 'cal-sm',
+}
+
+const props = defineProps({
+  agendaItem: {
+    type: Object,
+    required: true,
+  },
+})
+
+const icon = computed(() => agendaItemIcons[props.agendaItem.type])
+const title = computed(() => agendaItemDefaultTitles[props.agendaItem.type])
 </script>
 
 <template>

diff --git a/04-sfc/10-MeetupView-script-setup/MeetupCover.vue b/04-sfc/10-MeetupView-script-setup/MeetupCover.vue
@@ -1,31 +1,22 @@
-<script>
-import { computed, defineComponent } from 'vue'
+<script setup>
+import { computed } from 'vue'
 
-export default defineComponent({
-  name: 'MeetupCover',
-
-  props: {
-    title: {
-      type: String,
-    },
-
-    image: {
-      type: String,
-    },
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
   },
-
-  setup(props) {
-    const bgStyle = computed(() => (props.image ? { '--bg-url': `url('${props.image}')` } : undefined))
-    return {
-      bgStyle,
-    }
+  image: {
+    type: String,
   },
 })
+
+const bgStyle = computed(() => (props.image ? { '--bg-url': `url('${props.image}')` } : undefined))
 </script>
 
 <template>
   <div class="meetup-cover" :style="bgStyle">
-    <h1 class="meetup-cover__title">{{ title }}</h1>
+    <h1 class="meetup-cover__title">{{ props.title }}</h1>
   </div>
 </template>
 

diff --git a/04-sfc/10-MeetupView-script-setup/MeetupDescription.vue b/04-sfc/10-MeetupView-script-setup/MeetupDescription.vue
@@ -1,4 +1,4 @@
-<script>
+<!-- <script>
 import { defineComponent } from 'vue'
 
 export default defineComponent({
@@ -10,6 +10,14 @@ export default defineComponent({
     },
   },
 })
+</script> -->
+
+<script setup>
+defineProps({
+  description: {
+    type: String,
+  },
+})
 </script>
 
 <template>

diff --git a/04-sfc/10-MeetupView-script-setup/MeetupInfo.vue b/04-sfc/10-MeetupView-script-setup/MeetupInfo.vue
@@ -1,54 +1,38 @@
-<script>
-import { computed, defineComponent } from 'vue'
+<script setup>
+import { computed } from 'vue'
 import { UiIcon } from '@shgk/vue-course-ui'
 
-export default defineComponent({
-  name: 'MeetupInfo',
-
-  components: {
-    UiIcon,
+const props = defineProps({
+  organizer: {
+    type: String,
   },
-
-  props: {
-    organizer: {
-      type: String,
-    },
-
-    place: {
-      type: String,
-    },
-
-    date: {
-      type: Number,
-    },
+  place: {
+    type: String,
   },
-
-  setup(props) {
-    const isoDate = computed(() => new Date(props.date).toISOString().slice(0, 10))
-    const localDate = computed(() =>
-      new Date(props.date).toLocaleString(navigator.language, {
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-      }),
-    )
-    return {
-      isoDate,
-      localDate,
-    }
+  date: {
+    type: Number,
   },
 })
+
+const isoDate = computed(() => new Date(props.date).toISOString().slice(0, 10))
+const localDate = computed(() =>
+  new Date(props.date).toLocaleString(navigator.language, {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  }),
+)
 </script>
 
 <template>
   <ul class="meetup-info">
     <li>
       <UiIcon icon="user" class="meetup-info__icon" />
-      {{ organizer }}
+      {{ props.organizer }}
     </li>
     <li>
       <UiIcon icon="map" class="meetup-info__icon" />
-      {{ place }}
+      {{ props.place }}
     </li>
     <li>
       <UiIcon icon="cal-lg" class="meetup-info__icon" />

diff --git a/04-sfc/10-MeetupView-script-setup/MeetupView.vue b/04-sfc/10-MeetupView-script-setup/MeetupView.vue
@@ -1,41 +1,47 @@
-<script>
-import { defineComponent } from 'vue'
+<script setup>
+import { ref, watchEffect } from 'vue'
 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'
 
-export default defineComponent({
-  name: 'MeetupView',
+const programData = ref([]); 
 
-  components: {
-    UiAlert,
-    UiContainer,
-  },
+const agendaData = ref([
+
+]);
+
+watchEffect(() => {
+  if (agendaData.value.length === 0) {
+    programData.value = []
+  } else {
+    programData.value = agendaData.value
+  }
 })
 </script>
 
 <template>
   <div>
-    <!-- Обложка митапа -->
-
     <UiContainer>
+      <MeetupCover title="Демо-Митап" image="cover-image.jpg" />
+
       <div class="meetup">
         <div class="meetup__content">
           <h2>Описание</h2>
-
-          <!-- Описание митапа -->
+          <MeetupDescription description="Описание демонстрационного митапа" />
 
           <h2>Программа</h2>
 
-          <!-- Программа митапа -->
-          <!-- Или при пустой программе - сообщение "Программа пока пуста..." в UiAlert -->
-          <UiAlert></UiAlert>
+          <UiAlert v-if="agendaData.length === 0" type="info">
+            Программа пока пуста...
+          </UiAlert>
+
+          <MeetupAgenda :agenda="agendaData" v-else />
         </div>
-        <div class="meetup__aside">
-          <!-- Краткая информация о митапе -->
 
+        <div class="meetup__aside">
+          <MeetupInfo organizer="Demo Organizer" place="Conference Hall A" :date="1627545600000" />
           <div class="meetup__aside-buttons"></div>
         </div>
       </div>
@@ -50,8 +56,7 @@ export default defineComponent({
   margin: 48px 0 0;
 }
 
-.meetup__content {
-}
+.meetup__content {}
 
 .meetup__aside {
   margin: 40px 0;

diff --git a/04-sfc/20-MeetupCover-style-v-bind/MeetupCover.vue b/04-sfc/20-MeetupCover-style-v-bind/MeetupCover.vue
@@ -25,6 +25,7 @@ const bgStyle = computed(() => (props.image ? { '--bg-url': `url('${props.image}
   background-size: cover;
   background-position: center;
   /* Если изображение присутствует - берём его из CSS переменной, установленной на элемент в шаблоне */
+  background-image: v-bind(bgStyle);
   /* Иначе выводим изображение по умолчанию - var(--default-cover) */
   background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var(--bg-url, var(--default-cover));
   display: flex;
@@ -52,4 +53,4 @@ const bgStyle = computed(() => (props.image ? { '--bg-url': `url('${props.image}
     line-height: 84px;
   }
 }
-</style>
+</style>