tasks-01

01-basics/10-create-app/script.js

@@ -1 +1,21 @@
 import { defineComponent, createApp } from 'vue'
+
+const Comp = defineComponent({
+    name: 'CurrentDate',
+    setup() {
+        function formatAsLocalDate(date) {
+            return new Date(date).toLocaleDateString(undefined, { dateStyle: 'long' });
+        }
+
+        const currentDate = new Date();
+
+        return {
+            formatAsLocalDate,
+            currentDate
+        };
+    },
+    template: `<div>Сегодня {{ formatAsLocalDate(currentDate) }}</div>`
+});
+
+
+createApp(Comp).mount("#app");

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>

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>

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>

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>
 

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>

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" />