front_get

src/views/Favorite.vue

@@ -1,79 +1,63 @@
 <template>
-    <!-- <h1>Favorite</h1> -->
+    <div>
-
+      <h1>My Favorites</h1>
-    <!-- <v-card
+      <ul>
-    class="mx-auto"
+        <li v-for="(favorite, index) in favorites" :key="index">
-    max-width="420"
+          <p>Favorite {{ index + 1 }}:</p>
-    height="600"
+          <p>Favorite ID: {{ favorite.place_name }}</p>
-    >
+          <p>Favorite Name: {{ favorite.place_name }}</p>
-
+          <!-- แสดงข้อมูลเพิ่มเติมหรือ field อื่นๆ ตามต้องการ -->
-    <v-list lines="two">
+        </li>
-        <v-list-item
+      </ul>
-            v-for="item in items"
+    </div>
-            :key="item.title"
+  </template>
-            :title="item.title"
+  
-            :subtitle="item.desc"
+  <script>
-            :prepend-avatar="pin_svg"
+  import { ref, onMounted } from 'vue';
-        ></v-list-item>
+  
-    </v-list>
+  export default {
-
+    setup() {
-    </v-card> -->
+      const favorites = ref([]);
-
+  
-    <v-card fluid 
+      onMounted(async () => {
-    class="mx-auto"
+        try {
-    max-width="500px"
+          const currentUser = JSON.parse(sessionStorage.getItem('current_user'));
-    width="90vw"
+  
-
+          if (currentUser && currentUser.id) {
-    max-height="600px"
+            const response = await fetch(`https://little-lines-backend.techtransthai.org/api/favorites/${currentUser.id}`);
-    height="90vh"
+  
-    >
+            if (!response.ok) {
-        <v-list
+              throw new Error('Failed to fetch favorites');
-        item-props
+            }
-        lines="three"
+  
-        >
+            const data = await response.json();
-        <v-list-item
+            favorites.value = data.favorites;
-            v-for="(item, i) in items"
+            console.log(data);
-            :to="{name: 'destination-info'}"
+          }
-            :key="i"
+        } catch (error) {
-            :value="item"
+          console.error(error);
-            
+        }
-            >
+      });
-            <template v-slot:prepend>
+  
-                <v-avatar>
+      return {
-                    <v-img
+        favorites
-                    :height="30"
+      };
-                    src= "./icons/Adwaita/pin.svg"
+    }
-                    ></v-img>
+  };
-                </v-avatar>
+  </script>
-                
+  
-            </template>
+  <style scoped>
-
+  /* สามารถใส่ style ได้ตามต้องการ */
-            <v-list-item-title v-text="item.title"></v-list-item-title>
+  /* ตัวอย่าง */
-            <v-list-item-subtitle v-text="item.desc"></v-list-item-subtitle>
+  ul {
-            <v-divider></v-divider>
+    list-style-type: none;
-        </v-list-item>
+    padding: 0;
-        </v-list>
+  }
-    </v-card>
+  
-
+  li {
-    
+    margin-bottom: 20px;
-</template>
+    border: 1px solid #ccc;
-
+    padding: 10px;
-<script setup>
+  }
-    import {RouterLink} from 'vue-router';
+  </style>
-
+  
-    const pin_svg = "./icons/Adwaita/pin.svg"
-    const items = [
-        {
-        title: 'หอพักนักศึกษา',
-        desc: 'ลาดกระบัง, กรุงเทพมหานคร',
-        },
-        {
-        title: 'อนุสาวรีย์ชัยสมรภูมิ',
-        desc: 'ราชเทวี, กรุงเทพมหานคร',
-        },
-  ]
-</script>
-
-<style >
-
-</style>