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

little-lines-frontend.container

@@ -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

src/views/Favorite.vue

@@ -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>