From 5303d3bf6f59667e25d60ce21c9af133363f1503 Mon Sep 17 00:00:00 2001
From: Brutal Strike <soulkey4@gmail.com>
Date: Tue, 25 Jun 2024 10:50:29 +0300
Subject: [PATCH] Refactor code to split logic into multiple components

---
 README.md                     | 14 ++++++-
 components/AttractionList.vue | 40 ++++++++++++++++++++
 components/Filters.vue        | 18 +++++++++
 components/MapView.vue        | 53 ++++++++++++++++++++++++++
 pages/index.vue               | 71 +++--------------------------------
 5 files changed, 129 insertions(+), 67 deletions(-)
 create mode 100644 components/AttractionList.vue
 create mode 100644 components/Filters.vue
 create mode 100644 components/MapView.vue

diff --git a/README.md b/README.md
index 8c5c534..54caf89 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,3 @@
-
-
 https://github.com/friuns2/travelmaps/assets/16543239/3fc07810-ec7a-4c82-93c5-e9d5e8550002
 
 
@@ -62,6 +60,18 @@ Created with [GPTCall App Creator](https://app.gptcall.net/)
 5. Toggle between list and map views on mobile devices.
 6. Use the "Show Itinerary" button to view your planned route.
 
+## Component Structure and Usage
+
+The application's logic has been refactored to split into multiple Vue components for better maintainability and scalability. Here's an overview of the new components and how they are used:
+
+- `AttractionList.vue`: This component is responsible for rendering the list of attractions. It receives the list of attractions as a prop and handles user interactions such as focusing on an attraction or toggling it in the itinerary.
+
+- `MapView.vue`: This component handles the display of the interactive map. It receives the home location and the list of attractions as props, and it is responsible for initializing the map, creating markers, and displaying directions.
+
+- `Filters.vue`: This component provides the UI for filtering attractions based on the minimum rating count. It receives the minimum rating count as a prop and emits an event when the value changes.
+
+These components are imported and used in the `pages/index.vue` file, which acts as the main entry point for the application's UI.
+
 ## Future Plans
 
 - Implement AI support to generate travel recommendations and itineraries based on user preferences and travel style.
diff --git a/components/AttractionList.vue b/components/AttractionList.vue
new file mode 100644
index 0000000..e81ad3e
--- /dev/null
+++ b/components/AttractionList.vue
@@ -0,0 +1,40 @@
+<template>
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6" id="attraction-grid">
+        <TransitionGroup name="attraction-list">
+            <div v-for="attraction in attractions" :key="attraction.name"
+                class="bg-white bg-opacity-10 rounded-lg overflow-hidden shadow-lg transform hover:scale-105 transition-transform duration-300 cursor-pointer"
+                @click="focusAttraction(attraction)">
+                <img :src="attraction.photoUrl" class="w-full h-48 object-cover" alt="Attraction photo">
+                <div class="p-4">
+                    <h3 class="text-xl font-bold mb-2">{{ attraction.name }}</h3>
+                    <p class="text-sm mb-1">
+                        <i class="material-icons text-yellow-400 align-middle mr-1">star</i> {{ attraction.rating }} / 5
+                    </p>
+                    <p class="text-sm mb-1">
+                        <i class="material-icons align-middle mr-1">people</i> {{ attraction.user_ratings_total }}
+                    </p>
+                    <p class="text-sm mb-1">
+                        <i class="material-icons align-middle mr-1">location_on</i> {{ attraction.address }}
+                    </p>
+                    <p class="text-sm mb-1">
+                        <i class="material-icons align-middle mr-1">directions_car</i> {{ attraction.distance.toFixed(2) }} km
+                    </p>
+                    <button @click.stop="toggleAttractionInItinerary(attraction)"
+                        :class="{ 'bg-green-500': attraction.inItinerary, 'bg-blue-500': !attraction.inItinerary }"
+                        class="mt-2 px-3 py-1 rounded-full text-white text-sm">
+                        <i class="material-icons align-middle mr-1">{{ attraction.inItinerary ? 'remove_circle' : 'add_circle' }}</i> {{ attraction.inItinerary ? 'Remove from Itinerary' : 'Add to Itinerary' }} </button>
+                </div>
+            </div>
+        </TransitionGroup>
+    </div>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+    attractions: Array,
+    focusAttraction: Function,
+    toggleAttractionInItinerary: Function
+});
+</script>
diff --git a/components/Filters.vue b/components/Filters.vue
new file mode 100644
index 0000000..6aee42a
--- /dev/null
+++ b/components/Filters.vue
@@ -0,0 +1,18 @@
+<template>
+    <div class="mb-8 bg-white bg-opacity-20 rounded-lg p-4 backdrop-blur-md">
+        <label for="minRatingsCount" class="block text-lg font-medium mb-2">Minimum Ratings Count:</label>
+        <div class="flex items-center">
+            <input type="range" id="minRatingsCount" v-model="minRatingsCount" min="0" max="1000" step="10"
+                class="w-full mr-4 accent-teal-500">
+            <span class="text-xl font-semibold">{{ minRatingsCount }}</span>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+    minRatingsCount: Number
+});
+</script>
diff --git a/components/MapView.vue b/components/MapView.vue
new file mode 100644
index 0000000..8d5af5b
--- /dev/null
+++ b/components/MapView.vue
@@ -0,0 +1,53 @@
+<template>
+    <div id="map" class="h-[calc(100vh-200px)] rounded-lg shadow-lg"></div>
+</template>
+
+<script setup>
+import { defineProps, onMounted } from 'vue';
+
+const props = defineProps({
+    homeLocation: Object,
+    attractions: Array,
+    focusAttraction: Function,
+    calculateDirections: Function
+});
+
+let map, infowindow;
+
+onMounted(() => {
+    initMap();
+});
+
+function initMap() {
+    map = new google.maps.Map(document.getElementById('map'), {
+        center: props.homeLocation,
+        zoom: 12,
+    });
+
+    infowindow = new google.maps.InfoWindow();
+
+    props.attractions.forEach(attraction => {
+        createMarker(attraction);
+    });
+}
+
+function createMarker(attraction) {
+    const marker = new google.maps.Marker({
+        map: map,
+        position: attraction.location,
+        title: attraction.name,
+        animation: google.maps.Animation.DROP,
+        icon: {
+            path: google.maps.SymbolPath.CIRCLE,
+            scale: 8,
+            fillColor: attraction.inItinerary ? '#4CAF50' : '#FFA500',
+            fillOpacity: 0.9,
+            strokeWeight: 0
+        }
+    });
+
+    marker.addListener('click', function () {
+        props.focusAttraction(attraction);
+    });
+}
+</script>
diff --git a/pages/index.vue b/pages/index.vue
index 1e5fdcd..6ef0fc7 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,5 +1,4 @@
 <template>
-    
     <div class="min-h-screen bg-gradient-to-br from-teal-400 to-indigo-600 text-white p-4 md:p-8 overflow-hidden">
         <h1 @click="toggleModal" class="text-4xl md:text-5xl font-bold mb-6 text-center animate-fade-in-down cursor-pointer">Bali Attractions</h1>
         <div :class="{ 'hidden': !showModal }" class="fixed inset-0 flex items-center justify-center z-50">
@@ -15,14 +14,7 @@
                 <button @click="setNewLocation" class="btn btn-primary w-full text-white"> Set Location </button>
             </div>
         </div>
-        <div class="mb-8 bg-white bg-opacity-20 rounded-lg p-4 backdrop-blur-md">
-            <label for="minRatingsCount" class="block text-lg font-medium mb-2">Minimum Ratings Count:</label>
-            <div class="flex items-center">
-                <input type="range" id="minRatingsCount" v-model="minRatingsCount" min="0" max="1000" step="10"
-                    class="w-full mr-4 accent-teal-500">
-                <span class="text-xl font-semibold">{{ minRatingsCount }}</span>
-            </div>
-        </div>
+        <Filters :minRatingsCount="minRatingsCount" />
         <div class="md:hidden">
             <button @click="ActiveView('list')" :class="{ 'bg-teal-500': activeView === 'list' }"
                 class="px-4 py-2 rounded-l-lg">
@@ -35,72 +27,21 @@
         </div>
         <div class="md:flex">
             <div :class="{ 'hidden md:block': activeView === 'map' }" class="md:w-1/2 md:pr-4">
-                <div class="mb-4 flex justify-between items-center">
-                    <div>
-                        <label for="sortOrder" class="mr-2 text-white">Sort by:</label>
-                        <select id="sortOrder" v-model="sortOrder" class="bg-white bg-opacity-20 rounded-lg px-2 py-1 text-white">
-                            <option value="relativity" class="text-black">Relativity</option>
-                            <option value="popularity" class="text-black">Popularity</option>
-                            <option value="distance" class="text-black">Distance</option>
-                        </select>
-                    </div>
-                    <button v-if="hasItineraryItems" @click="toggleItinerary" class="btn btn-primary btn-sm text-white glass">
-                        <i class="material-icons mr-2 text-xl">{{ showItinerary ? 'view_list' : 'directions' }}</i>
-                        <span>{{ showItinerary ? 'Show All' : 'Show Itinerary' }}</span>
-                    </button>
-                </div>
-                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6" id="attraction-grid">
-                    <TransitionGroup name="attraction-list">
-                        <div v-for="attraction in sortedAttractions" :key="attraction.name"
-                            class="bg-white bg-opacity-10 rounded-lg overflow-hidden shadow-lg transform hover:scale-105 transition-transform duration-300 cursor-pointer"
-                            @click="focusAttraction(attraction)">
-                            <img :src="attraction.photoUrl" class="w-full h-48 object-cover" alt="Attraction photo">
-                            <div class="p-4">
-                                <h3 class="text-xl font-bold mb-2">{{ attraction.name }}</h3>
-                                <p class="text-sm mb-1">
-                                    <i class="material-icons text-yellow-400 align-middle mr-1">star</i> {{ attraction.rating }} / 5
-                                </p>
-                                <p class="text-sm mb-1">
-                                    <i class="material-icons align-middle mr-1">people</i> {{ attraction.user_ratings_total }}
-                                </p>
-                                <p class="text-sm mb-1">
-                                    <i class="material-icons align-middle mr-1">location_on</i> {{ attraction.address }}
-                                </p>
-                                <p class="text-sm mb-1">
-                                    <i class="material-icons align-middle mr-1">directions_car</i> {{ attraction.distance.toFixed(2) }} km
-                                </p>
-                                <button @click.stop="toggleAttractionInItinerary(attraction)"
-                                    :class="{ 'bg-green-500': attraction.inItinerary, 'bg-blue-500': !attraction.inItinerary }"
-                                    class="mt-2 px-3 py-1 rounded-full text-white text-sm">
-                                    <i class="material-icons align-middle mr-1">{{ attraction.inItinerary ? 'remove_circle' : 'add_circle' }}</i> {{ attraction.inItinerary ? 'Remove from Itinerary' : 'Add to Itinerary' }} </button>
-                            </div>
-                        </div>
-                    </TransitionGroup>
-                </div>
+                <AttractionList :attractions="sortedAttractions" :focusAttraction="focusAttraction" :toggleAttractionInItinerary="toggleAttractionInItinerary" />
             </div>
             <div :class="{ 'hidden md:block': activeView === 'list' }" class="md:w-1/2 md:pl-4">
-                <div id="map" class="h-[calc(100vh-200px)] rounded-lg shadow-lg"></div>
+                <MapView :homeLocation="homeLocation" :attractions="attractions" :focusAttraction="focusAttraction" :calculateDirections="calculateDirections" />
             </div>
         </div>
     </div>
 </template>
-<style scoped>
-@import './styles.css';
-
-.attraction-list-enter-active,
-.attraction-list-leave-active {
-  transition: all 0.5s ease;
-}
-.attraction-list-enter-from,
-.attraction-list-leave-to {
-  opacity: 0;
-  transform: translateY(30px);
-}
 
-</style>
 <script setup>
 import { ref, onMounted, computed, watch } from 'vue';
 import { getCurrentInstance } from 'vue';
+import AttractionList from '@/components/AttractionList.vue';
+import MapView from '@/components/MapView.vue';
+import Filters from '@/components/Filters.vue';
 
 const attractions = ref([]);
 const minRatingsCount = ref(0);