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

This commit is contained in:
NekoVari 2023-12-07 20:48:08 +07:00
commit eeccb24a92
2 changed files with 51 additions and 8 deletions

View file

@ -5,6 +5,7 @@ Description=Little Lines frontend container
ContainerName=little-lines-frontend
Image=localhost/little-lines-frontend
PublishPort=8081:5173
Volume=/media/sasha/Data1/Apps/ll-frontend/.env:/opt/little-lines-frontend/.env
[Service]
Restart=always

View file

@ -1,12 +1,33 @@
<template>
<div>
<h1>Favorites</h1>
<ul class="favorite-list">
<!-- <h1>Favorites</h1> -->
<!-- แสดงขอม favorites ตามความเหมาะสม -->
<!-- <ul class="favorite-list">
<li v-for="(favorite, index) in favorite" :key="index" class="favorite-item">
{{ favorite.place_name }} <!-- แสดงขอม favorites ตามความเหมาะสม -->
{{ favorite.place_name }}
</li>
</ul>
</div>
</ul> -->
<v-card
class="mx-auto fav-card">
<v-list lines="two">
<v-list-item
v-for="(favorite, index) in favorite"
:key="index"
@click="handleClick(favorite)"
>
<template v-slot:prepend>
<v-icon class="icon-pin"></v-icon>
</template>
<v-list-item-content>
<v-list-item-title>{{ favorite.place_name }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-card>
</template>
<script>
@ -16,6 +37,10 @@ export default {
setup() {
const favorite = ref([]);
const handleClick = (favoriteItem) => {
console.log('Clicked:', favoriteItem);
};
onMounted(async () => {
try {
const currentUser = JSON.parse(sessionStorage.getItem('current_user'));
@ -36,7 +61,8 @@ export default {
});
return {
favorite
favorite,
handleClick
};
}
};
@ -44,7 +70,7 @@ export default {
<style>
/* CSS เพื่อแสดงแต่ละข้อมูลเป็น block */
.favorite-list {
/* .favorite-list {
list-style-type: none;
padding: 0;
}
@ -54,5 +80,21 @@ export default {
padding: 10px;
border: 1px solid #ccc;
margin-bottom: 5px;
} */
.icon-pin{
background-color: black;
-webkit-mask: url(icons/Adwaita/pin.svg) no-repeat center;
mask: url(icons/Adwaita/pin.svg) no-repeat center;
}
.fav-card
{
margin-top: 2vh;
max-width: 90vw;
border-radius: 12px;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13);
}
</style>