show each data for favorites page

This commit is contained in:
p11037 2023-11-30 00:07:02 +07:00
parent ff5333c715
commit 19ba190ced
2 changed files with 57 additions and 62 deletions

View file

@ -37,7 +37,7 @@
<v-list-item-title class="text-decoration-underline">{{nearestStructureData.lon}} , {{nearestStructureData.lat}}</v-list-item-title>
</v-list-item>
<v-list-item>
<!-- <v-list-item>
<template v-slot:prepend>
<v-avatar>
<img :src="detial[2].icon"
@ -46,7 +46,7 @@
</v-avatar>
</template>
<v-list-item-title>{{detial[2].title}}</v-list-item-title>
</v-list-item>
</v-list-item> -->
</v-list>
@ -254,7 +254,7 @@ export default {
if (this.isLocationRequested && !this.userLocation) {
return 'Requesting location...';
} else if (this.userLocation) {
return `${this.userLocation.lat.toFixed(6)}, ${this.userLocation.lon.toFixed(6)}`;
return `${this.userLocation.lon.toFixed(6)}, ${this.userLocation.lat.toFixed(6)}`;
}
return 'Location not available';
},

View file

@ -1,63 +1,58 @@
<template>
<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>
<div>
<h1>Favorites</h1>
<ul class="favorite-list">
<li v-for="(favorite, index) in favorite" :key="index" class="favorite-item">
{{ favorite.place_name }} <!-- แสดงขอม favorites ตามความเหมาะสม -->
</li>
</ul>
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const favorites = ref([]);
export default {
setup() {
const favorite = ref([]);
onMounted(async () => {
try {
const currentUser = JSON.parse(sessionStorage.getItem('current_user'));
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 (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);
if (!response.ok) {
throw new Error('Failed to fetch favorites');
}
} catch (error) {
console.error(error);
const data = await response.json();
favorite.value = data;
}
});
} catch (error) {
console.error(error);
}
});
return {
favorites
};
}
};
</script>
<style scoped>
/* สามารถใส่ style ได้ตามต้องการ */
/* ตัวอย่าง */
ul {
list-style-type: none;
padding: 0;
return {
favorite
};
}
};
</script>
li {
margin-bottom: 20px;
border: 1px solid #ccc;
padding: 10px;
}
</style>
<style>
/* CSS เพื่อแสดงแต่ละข้อมูลเป็น block */
.favorite-list {
list-style-type: none;
padding: 0;
}
.favorite-item {
display: block;
padding: 10px;
border: 1px solid #ccc;
margin-bottom: 5px;
}
</style>