Merge pull request #3 from KristinaKhlebnikova/master

Solve 02-basics/selected-meetup

02-basics-2/50-selected-meetup/SelectedMeetupApp.js

@@ -1,78 +1,82 @@
-import { defineComponent } from 'vue'
-// import { getMeetup } from './meetupsService.ts'
+import { defineComponent, onMounted, ref, watch } from 'vue'
+import { getMeetup } from './meetupsService.ts'
 
 export default defineComponent({
   name: 'SelectedMeetupApp',
 
-  setup() {},
+  setup() {
+    const selectedMeetupId = ref(1)
+    const selectedMeetupTitle = ref('')
+    const minMeetupId = 1
+    const maxMeetupId = 5
+
+    const loadMeetup = async (id) => {
+      const meetup = await getMeetup(id)
+      selectedMeetupTitle.value = meetup.title
+    }
+
+    onMounted(() => {
+      loadMeetup(selectedMeetupId.value)
+    })
+
+    watch(selectedMeetupId, async () => {
+      await loadMeetup(selectedMeetupId.value)
+    })
+
+    const goToPrev = function () {
+      if (selectedMeetupId.value > minMeetupId) {
+        selectedMeetupId.value--
+      }
+    }
+
+    const goToNext = function () {
+      if (selectedMeetupId.value < maxMeetupId) {
+        selectedMeetupId.value++
+      }
+    }
+
+    return {
+      selectedMeetupId,
+      selectedMeetupTitle,
+      goToPrev,
+      goToNext,
+      minMeetupId,
+      maxMeetupId
+    }
+  },
 
   template: `
     <div class="meetup-selector">
       <div class="meetup-selector__control">
-        <button class="button button--secondary" type="button" disabled>Предыдущий</button>
+        <button class="button button--secondary" type="button" :disabled="selectedMeetupId === minMeetupId" @click="goToPrev">Предыдущий</button>
 
         <div class="radio-group" role="radiogroup">
-          <div class="radio-group__button">
-            <input
-              id="meetup-id-1"
-              class="radio-group__input"
-              type="radio"
-              name="meetupId"
-              value="1"
-            />
-            <label for="meetup-id-1" class="radio-group__label">1</label>
-          </div>
-          <div class="radio-group__button">
-            <input
-              id="meetup-id-2"
-              class="radio-group__input"
-              type="radio"
-              name="meetupId"
-              value="2"
-            />
-            <label for="meetup-id-2" class="radio-group__label">2</label>
-          </div>
-          <div class="radio-group__button">
-            <input
-              id="meetup-id-3"
-              class="radio-group__input"
-              type="radio"
-              name="meetupId"
-              value="3"
-            />
-            <label for="meetup-id-3" class="radio-group__label">3</label>
-          </div>
-          <div class="radio-group__button">
-            <input
-              id="meetup-id-4"
-              class="radio-group__input"
-              type="radio"
-              name="meetupId"
-              value="4"
-            />
-            <label for="meetup-id-4" class="radio-group__label">4</label>
-          </div>
-          <div class="radio-group__button">
+          <div 
+            v-for="id in maxMeetupId" 
+            :key="id" 
+            class="radio-group__button"
+          >
             <input
-              id="meetup-id-5"
+              :id="'meetup-id-' + id"
               class="radio-group__input"
               type="radio"
               name="meetupId"
-              value="5"
+              :value="id"
+              v-model="selectedMeetupId"
             />
-            <label for="meetup-id-5" class="radio-group__label">5</label>
+            <label :for="'meetup-id-' + id" class="radio-group__label">{{ id }}</label>
           </div>
         </div>
 
-        <button class="button button--secondary" type="button">Следующий</button>
+        <button class="button button--secondary" type="button" :disabled="selectedMeetupId === maxMeetupId" @click="goToNext">Следующий</button>
       </div>
 
       <div class="meetup-selector__cover">
         <div class="meetup-cover">
-          <h1 class="meetup-cover__title">Some Meetup Title</h1>
+          <h1 class="meetup-cover__title">{{ selectedMeetupTitle }}</h1>
         </div>
       </div>
 
     </div>
   `,
-})
+})