little-lines/frontend
Archived
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases 2 Activity

front_get

Browse source
This commit is contained in:
p11037 2023-11-29 21:43:05 +07:00
parent 82e1e4e86a
commit b570367142
1 changed files with 62 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

120
src/views/Favorite.vue
View file

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