Задачи по 4му занятию

03-components/10-MeetupView/MeetupView.js

@@ -1,46 +1,57 @@
-import { defineComponent } from 'vue'
-import { UiAlert, UiContainer } from '@shgk/vue-course-ui'
+import {defineComponent} from 'vue'
+import {UiAlert, UiContainer} from '@shgk/vue-course-ui'
 import MeetupAgenda from './MeetupAgenda.js'
 import MeetupDescription from './MeetupDescription.js'
 import MeetupCover from './MeetupCover.js'
 import MeetupInfo from './MeetupInfo.js'
 import './MeetupView.css'
 
 export default defineComponent({
-  name: 'MeetupView',
-
-  components: {
-    UiAlert,
-    UiContainer,
-  },
-
-  template: `
-    <div>
-
-      <!-- Обложка митапа -->
-
-      <UiContainer>
-        <div class="meetup">
-          <div class="meetup__content">
-            <h2>Описание</h2>
-
-            <!-- Описание митапа -->
-
-            <h2>Программа</h2>
-
-            <!-- Программа митапа -->
-            <!-- Или при пустой программе - сообщение "Программа пока пуста..." в UiAlert -->
-            <UiAlert></UiAlert>
-
-          </div>
-          <div class="meetup__aside">
-
-            <!-- Краткая информация о митапе -->
-
-            <div class="meetup__aside-buttons"></div>
-          </div>
+    name: 'MeetupView',
+
+    components: {
+        UiAlert,
+        UiContainer,
+        MeetupCover,
+        MeetupDescription,
+        MeetupInfo,
+        MeetupAgenda
+    },
+
+    props: {
+        meetup: {
+            type: Object,
+            require: 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 -->
+                        <MeetupAgenda v-if="meetup?.agenda?.length" :agenda="meetup.agenda" />
+                        <UiAlert v-else>Программа пока пуста...</UiAlert>
+
+                    </div>
+                    <div class="meetup__aside">
+
+                        <MeetupInfo :date="meetup.date" :organizer="meetup.organizer" :place="meetup.place" />
+
+                        <div class="meetup__aside-buttons"></div>
+                    </div>
+                </div>
+            </UiContainer>
         </div>
-      </UiContainer>
-    </div>
-  `,
+    `,
 })

03-components/20-UiClock/UiClock.js

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

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

@@ -2,27 +2,30 @@ import { defineComponent } from 'vue'
 import EmailListItem from './EmailListItem.js'
 
 export default defineComponent({
-  name: 'EmailList',
+    name: 'EmailList',
 
-  components: {
-    EmailListItem,
-  },
+    components: {
+        EmailListItem,
+    },
 
-  props: {
-    emails: {
-      type: Array,
-      required: true,
+    props: {
+        emails: {
+            type: Array,
+            required: true,
+        },
     },
-  },
 
-  template: `
-    <ul class="emails-list unstyled-list" aria-label="Emails">
-      <EmailListItem
-        v-for="({ email, isMarked }, index) in emails"
-        :key="email"
-        :email="email"
-        :marked="isMarked"
-      />
-    </ul>
-  `,
+    emits: ['remove'],
+
+    template: `
+        <ul class="emails-list unstyled-list" aria-label="Emails">
+            <EmailListItem
+                v-for="({ email, isMarked }, index) in emails"
+                :key="email"
+                :email="email"
+                :marked="isMarked"
+                @click-del="$emit('remove', index)"
+            />
+        </ul>
+    `,
 })

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

@@ -1,24 +1,26 @@
-import { defineComponent } from 'vue'
+import {defineComponent} from 'vue'
 
 export default defineComponent({
-  name: 'EmailListItem',
+    name: 'EmailListItem',
 
-  props: {
-    email: {
-      type: String,
-      required: true,
-    },
+    props: {
+        email: {
+            type: String,
+            required: true,
+        },
 
-    marked: {
-      type: Boolean,
-      default: false,
+        marked: {
+            type: Boolean,
+            default: false,
+        },
     },
-  },
 
-  template: `
-    <li :class="{ marked }">
-      {{ email }}
-      <button type="button" aria-label="Удалить" @click.stop>❌</button>
-    </li>
-  `,
+    emits: ['click-del'],
+
+    template: `
+        <li :class="{ marked }">
+            {{ email }}
+            <button type="button" aria-label="Удалить" @click.stop="$emit('click-del')">❌</button>
+        </li>
+    `,
 })

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

@@ -1,75 +1,75 @@
-import { computed, defineComponent, ref } from 'vue'
-import { UiFormGroup, UiInput } from '@shgk/vue-course-ui'
+import {computed, defineComponent, ref} from 'vue'
+import {UiFormGroup, UiInput} from '@shgk/vue-course-ui'
 import EmailList from './EmailList.js'
 
 // Значения взяты из https://jsonplaceholder.typicode.com/comments
 export function getEmails() {
-  return [
-    '[email protected]',
-    '[email protected]',
-    '[email protected]',
-    '[email protected]',
-    '[email protected]',
-    '[email protected]',
-    '[email protected]',
-    '[email protected]',
-    '[email protected]',
-    '[email protected]',
-    '[email protected]',
-    '[email protected]',
-    '[email protected]',
-    '[email protected]',
-    '[email protected]',
-    '[email protected]',
-    '[email protected]',
-    '[email protected]',
-    '[email protected]',
-    '[email protected]',
-    '[email protected]',
-    '[email protected]',
-    '[email protected]',
-    '[email protected]',
-    '[email protected]',
-  ]
+    return [
+        '[email protected]',
+        '[email protected]',
+        '[email protected]',
+        '[email protected]',
+        '[email protected]',
+        '[email protected]',
+        '[email protected]',
+        '[email protected]',
+        '[email protected]',
+        '[email protected]',
+        '[email protected]',
+        '[email protected]',
+        '[email protected]',
+        '[email protected]',
+        '[email protected]',
+        '[email protected]',
+        '[email protected]',
+        '[email protected]',
+        '[email protected]',
+        '[email protected]',
+        '[email protected]',
+        '[email protected]',
+        '[email protected]',
+        '[email protected]',
+        '[email protected]',
+    ]
 }
 
 export default defineComponent({
-  name: 'MarkedEmailsApp',
+    name: 'MarkedEmailsApp',
 
-  components: {
-    UiFormGroup,
-    UiInput,
-    EmailList,
-  },
+    components: {
+        UiFormGroup,
+        UiInput,
+        EmailList,
+    },
 
-  setup() {
-    const emails = ref(getEmails())
-    const query = ref('')
+    setup() {
+        const emails = ref(getEmails())
+        const query = ref('')
 
-    const markedEmails = computed(() => {
-      return emails.value.map(email => ({
-        email,
-        isMarked: !!(query.value && email.toLowerCase().includes(query.value.toLowerCase())),
-      }))
-    })
+        const markedEmails = computed(() => {
+            return emails.value.map(email => ({
+                email,
+                isMarked: !!(query.value && email.toLowerCase().includes(query.value.toLowerCase())),
+            }))
+        })
 
-    function removeEmailByIndex(index) {
-      emails.value.splice(index, 1)
-    }
+        function removeEmailByIndex(index) {
+            emails.value.splice(index, 1)
+        }
 
-    return {
-      query,
-      markedEmails,
-      removeEmailByIndex,
-    }
-  },
+        return {
+            query,
+            markedEmails,
+            removeEmailByIndex,
+        }
+    },
 
-  template: `
-    <div>
-      <UiFormGroup>
-        <UiInput v-model.trim="query" type="search" placeholder="Поиск" aria-label="Поиск" small />
-      </UiFormGroup>
-      <EmailList :emails="markedEmails" />
-    </div>
-  `,
+    template: `
+        <div>
+            <UiFormGroup>
+                <UiInput v-model.trim="query" type="search" placeholder="Поиск" aria-label="Поиск" small/>
+            </UiFormGroup>
+            <EmailList :emails="markedEmails" @remove="removeEmailByIndex"/>
+        </div>
+    `,
 })