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 ContainerName=little-lines-frontend
Image=localhost/little-lines-frontend Image=localhost/little-lines-frontend
PublishPort=8081:5173 PublishPort=8081:5173
Volume=/media/sasha/Data1/Apps/ll-frontend/.env:/opt/little-lines-frontend/.env
[Service] [Service]
Restart=always Restart=always

View file

@ -1,12 +1,33 @@
<template> <template>
<div> <!-- <h1>Favorites</h1> -->
<h1>Favorites</h1> <!-- แสดงขอม favorites ตามความเหมาะสม -->
<ul class="favorite-list"> <!-- <ul class="favorite-list">
<li v-for="(favorite, index) in favorite" :key="index" class="favorite-item"> <li v-for="(favorite, index) in favorite" :key="index" class="favorite-item">
{{ favorite.place_name }} <!-- แสดงขอม favorites ตามความเหมาะสม --> {{ favorite.place_name }}
</li> </li>
</ul> </ul> -->
</div>
<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> </template>
<script> <script>
@ -16,6 +37,10 @@ export default {
setup() { setup() {
const favorite = ref([]); const favorite = ref([]);
const handleClick = (favoriteItem) => {
console.log('Clicked:', favoriteItem);
};
onMounted(async () => { onMounted(async () => {
try { try {
const currentUser = JSON.parse(sessionStorage.getItem('current_user')); const currentUser = JSON.parse(sessionStorage.getItem('current_user'));
@ -36,7 +61,8 @@ export default {
}); });
return { return {
favorite favorite,
handleClick
}; };
} }
}; };
@ -44,7 +70,7 @@ export default {
<style> <style>
/* CSS เพื่อแสดงแต่ละข้อมูลเป็น block */ /* CSS เพื่อแสดงแต่ละข้อมูลเป็น block */
.favorite-list { /* .favorite-list {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
} }
@ -54,5 +80,21 @@ export default {
padding: 10px; padding: 10px;
border: 1px solid #ccc; border: 1px solid #ccc;
margin-bottom: 5px; 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> </style>