mirror of
https://gitlab.com/little-lines/frontend.git
synced 2024-11-10 06:54:26 +00:00
Merge branch 'main' of gitlab.com:openKMITL/little-lines/frontend
This commit is contained in:
commit
09028f31ac
3 changed files with 62 additions and 76 deletions
|
@ -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';
|
||||
},
|
||||
|
@ -282,6 +282,7 @@ export default {
|
|||
lon: position.coords.longitude
|
||||
};
|
||||
console.log('User Location:', this.userLocation);
|
||||
this.$emit('updateLocation', this.userLocation);
|
||||
},
|
||||
handleLocationError(error) {
|
||||
console.error('Error getting location:', error);
|
||||
|
|
|
@ -1,79 +1,58 @@
|
|||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<script>
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const favorite = ref([]);
|
||||
|
||||
</template>
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const currentUser = JSON.parse(sessionStorage.getItem('current_user'));
|
||||
|
||||
<script setup>
|
||||
import {RouterLink} from 'vue-router';
|
||||
if (currentUser && currentUser.id) {
|
||||
const response = await fetch(`https://little-lines-backend.techtransthai.org/api/favorites/${currentUser.id}`);
|
||||
|
||||
const pin_svg = "./icons/Adwaita/pin.svg"
|
||||
const items = [
|
||||
{
|
||||
title: 'หอพักนักศึกษา',
|
||||
desc: 'ลาดกระบัง, กรุงเทพมหานคร',
|
||||
},
|
||||
{
|
||||
title: 'อนุสาวรีย์ชัยสมรภูมิ',
|
||||
desc: 'ราชเทวี, กรุงเทพมหานคร',
|
||||
},
|
||||
]
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch favorites');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
favorite.value = data;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
favorite
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<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>
|
|
@ -10,7 +10,7 @@
|
|||
v-if="popupData"
|
||||
:nearestStructureData="popupData"
|
||||
:onClose="closePopup"
|
||||
|
||||
@updateLocation="handleUserLocation"
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
@ -94,6 +94,7 @@ import { ref } from "vue";
|
|||
import axios from "axios";
|
||||
import DestinationInfoCard from '@/components/DestinationInfoCard.vue';
|
||||
|
||||
|
||||
const center = ref([100.538611, 13.764722]);
|
||||
const projection = ref("EPSG:4326");
|
||||
const zoom = ref(19);
|
||||
|
@ -151,6 +152,11 @@ const closePopup = () => {
|
|||
popupData.value = null; // Hide popup
|
||||
};
|
||||
|
||||
const handleUserLocation = (location) => {
|
||||
console.log("Received user location:", location);
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
Loading…
Reference in a new issue