Merge branch 'main' of gitlab.com:openKMITL/little-lines/frontend

This commit is contained in:
NekoVari 2023-11-30 22:14:44 +07:00
commit 09028f31ac
3 changed files with 62 additions and 76 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-title class="text-decoration-underline">{{nearestStructureData.lon}} , {{nearestStructureData.lat}}</v-list-item-title>
</v-list-item> </v-list-item>
<v-list-item> <!-- <v-list-item>
<template v-slot:prepend> <template v-slot:prepend>
<v-avatar> <v-avatar>
<img :src="detial[2].icon" <img :src="detial[2].icon"
@ -46,7 +46,7 @@
</v-avatar> </v-avatar>
</template> </template>
<v-list-item-title>{{detial[2].title}}</v-list-item-title> <v-list-item-title>{{detial[2].title}}</v-list-item-title>
</v-list-item> </v-list-item> -->
</v-list> </v-list>
@ -254,7 +254,7 @@ export default {
if (this.isLocationRequested && !this.userLocation) { if (this.isLocationRequested && !this.userLocation) {
return 'Requesting location...'; return 'Requesting location...';
} else if (this.userLocation) { } 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'; return 'Location not available';
}, },
@ -282,6 +282,7 @@ export default {
lon: position.coords.longitude lon: position.coords.longitude
}; };
console.log('User Location:', this.userLocation); console.log('User Location:', this.userLocation);
this.$emit('updateLocation', this.userLocation);
}, },
handleLocationError(error) { handleLocationError(error) {
console.error('Error getting location:', error); console.error('Error getting location:', error);

View file

@ -1,79 +1,58 @@
<template> <template>
<!-- <h1>Favorite</h1> --> <div>
<h1>Favorites</h1>
<!-- <v-card <ul class="favorite-list">
class="mx-auto" <li v-for="(favorite, index) in favorite" :key="index" class="favorite-item">
max-width="420" {{ favorite.place_name }} <!-- แสดงขอม favorites ตามความเหมาะสม -->
height="600" </li>
> </ul>
</div>
<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> </template>
<script setup> <script>
import {RouterLink} from 'vue-router'; import { ref, onMounted } from 'vue';
const pin_svg = "./icons/Adwaita/pin.svg" export default {
const items = [ setup() {
{ const favorite = ref([]);
title: 'หอพักนักศึกษา',
desc: 'ลาดกระบัง, กรุงเทพมหานคร', onMounted(async () => {
}, try {
{ const currentUser = JSON.parse(sessionStorage.getItem('current_user'));
title: 'อนุสาวรีย์ชัยสมรภูมิ',
desc: 'ราชเทวี, กรุงเทพมหานคร', 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();
favorite.value = data;
}
} catch (error) {
console.error(error);
}
});
return {
favorite
};
}
};
</script> </script>
<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> </style>

View file

@ -10,7 +10,7 @@
v-if="popupData" v-if="popupData"
:nearestStructureData="popupData" :nearestStructureData="popupData"
:onClose="closePopup" :onClose="closePopup"
@updateLocation="handleUserLocation"
/> />
</div> </div>
@ -94,6 +94,7 @@ import { ref } from "vue";
import axios from "axios"; import axios from "axios";
import DestinationInfoCard from '@/components/DestinationInfoCard.vue'; import DestinationInfoCard from '@/components/DestinationInfoCard.vue';
const center = ref([100.538611, 13.764722]); const center = ref([100.538611, 13.764722]);
const projection = ref("EPSG:4326"); const projection = ref("EPSG:4326");
const zoom = ref(19); const zoom = ref(19);
@ -151,6 +152,11 @@ const closePopup = () => {
popupData.value = null; // Hide popup popupData.value = null; // Hide popup
}; };
const handleUserLocation = (location) => {
console.log("Received user location:", location);
};
</script> </script>
<style> <style>