chore(index.html): add selected seats section to improve user experience

feat(index.html): add functionality to unselect seats to improve user interaction with selected seats

examples/index.html

@@ -97,13 +97,21 @@
             </div>
         </div>
         <div id="seats_container" class="w-full flex-1 h-full"></div>
+
+        <div class="flex flex-col w-40 flex-0 border-l">
+            <div class="text-center w-full text-sm p-2 bg-gray-100 border-b">Selected Seats</div>
+            <div id="selected-seats" class="flex flex-col text-sm">
+
+            </div>
+        </div>
     </div>
 </div>
 <script src="https://code.jquery.com/jquery-3.7.1.min.js"
         integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
 
 <script type="text/javascript">
 
+    let unselectSeat;
     $(document).ready(function () {
         let seatmap = new SeatMapCanvas("#seats_container", {
             legend: true,
@@ -125,6 +133,8 @@
                 }
             }
         });
+
+
         seatmap.eventManager.addEventListener("SEAT.CLICK", (seat) => {
             console.log("seat", seat)
             if (!seat.isSelected() && seat.item.salable === true) {
@@ -133,8 +143,12 @@
                 seat.unSelect()
             }
 
+            updateSelectedSeats()
         });
 
+
+        // FOR DEMO
+
         const generateRandomBlocks = function () {
             let block_colors = ["#01a5ff", "#fccf4e", "#01a5ff", "#01a5ff"];
             let blocks = []
@@ -149,9 +163,9 @@
                 let block_final_x = 0;
                 let randomSeatCount = Math.round((Math.random() * (Math.abs(400 - 200))) + 200)
                 let randomCell = Math.round((Math.random() * (Math.abs(28 - 12))) + 12)
+                let blockTitle = `Block ${j + 1}`;
 
                 for (let k = 0; k < randomSeatCount; k++) { // row
-
                     if (k % randomCell === 0) {
                         cell_count = 1;
                         row_count++;
@@ -160,11 +174,7 @@
                     let x = (cell_count * 33) + last_x;
                     let y = row_count * 30;
 
-                    console.log(x)
-
                     if (block_final_x < x) block_final_x = x;
-
-
                     let salable = Math.ceil(Math.random() * 10) > 3;
 
                     let seat = {
@@ -173,10 +183,10 @@
                         y: y,
                         color: color, // can use item.color from json data
                         salable: salable,
-                        custom_data: {any: "things"},
+                        custom_data: {any: "things", basket_name: `${blockTitle} - ${cell_count} ${row_count}`},
                         note: "note test",
                         tags: {},
-                        title: `Title ${cell_count} ${row_count}`
+                        title: `${blockTitle}\n${cell_count} ${row_count}`
                     }
                     cell_count++;
                     seats.push(seat)
@@ -186,7 +196,7 @@
 
                 let block = {
                     "id": `block-${j}`,
-                    "title": `Block - ${j + 1}`,
+                    "title": blockTitle,
                     "labels": [],
                     "color": color,
                     "seats": seats
@@ -198,7 +208,53 @@
             seatmap.data.replaceData(blocks);
         }
 
+        const updateSelectedSeats = function () {
+            let selectedSeats = seatmap.data.getSelectedSeats();
+
+            let seatsTemplateHtml = ``
+
+            if(selectedSeats.length===0){
+                seatsTemplateHtml=`
+                    <div class="text-center py-2 px-2 flex flex-col">
+                        <div class="text-lg text-gray-400"><i class="fa-regular fa-face-rolling-eyes"></i></div>
+                        <div class="text-gray-400">No selected seat</div>
+                    </div>
+                `
+            }
+
+            for (let i = 0; i < selectedSeats.length; i++) {
+                let selectedSeat = selectedSeats[i];
+                // console.log('selectedSeat',selectedSeat)
+
+                let html = `<div class="flex flex-row w-full hover:bg-blue-100 py-1 px-2 items-center">
+                    <div class="w-3 h-3 absolute bg-[#8fe100] rounded-lg"></div>
+                    <div class="ml-6">${selectedSeat.custom_data.basket_name}</div>
+                    <div class="unselect-seat absolute right-3 cursor-pointer text-red-200 hover:text-red-500" seat-id="${selectedSeat.id}" block-id="${selectedSeat.block.id}">
+                        <i class="fa-solid fa-xmark text-md "></i>
+                    </div>
+                </div>`
+
+                seatsTemplateHtml += html;
+            }
+
+            $('#selected-seats').html(seatsTemplateHtml)
+
+            $(".unselect-seat").on('click',unselectSeat)
+
+            // console.log('selectedSeats',selectedSeats)
+        }
+
         generateRandomBlocks()
+        updateSelectedSeats()
+
+
+        const unselectSeat = function (){
+            let seatId = $(this).attr('seat-id');
+            let blockId = $(this).attr('block-id');
+            let seat = seatmap.data.getSeat(seatId, blockId);
+            seat.svg.unSelect()
+            updateSelectedSeats()
+        }
 
         $("#zoomout-button").on("click", function () {
             seatmap.zoomManager.zoomToVenue();
@@ -215,12 +271,9 @@
             console.log(selectedSeats)
         });
 
-        $("#unselect-seat").on("click", function (a) {
-            let seatId = $(this).attr('seat-id');
-            let blockId = $(this).attr('block-id');
-            let seat = seatmap.data.getSeat(seatId, blockId);
-            seat.svg.unSelect()
-        });
+        // $(".unselect-seat").on("click", function (a) {
+        //
+        // });
 
         $("#randomize-btn").on("click", function (a) {
             generateRandomBlocks()