front_get

This commit is contained in:
p11037 2023-11-29 21:43:05 +07:00
parent 82e1e4e86a
commit b570367142

View file

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