From 59fcf770ccf53a5e2f9edfea90695c66cff9537d Mon Sep 17 00:00:00 2001
From: Anh Nguyet Vu <anngvu@gmail.com>
Date: Thu, 5 Dec 2024 10:19:10 -0800
Subject: [PATCH] Real implementation of confirmation/save via UI

---
 resources/public/index.html | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/resources/public/index.html b/resources/public/index.html
index 8a94cd2..874fdff 100644
--- a/resources/public/index.html
+++ b/resources/public/index.html
@@ -176,6 +176,12 @@
             }
         });
 
+        function sendApproval() {
+            const message = "Approval granted";
+            ws.send(JSON.stringify({type: 'chat', content: message}));
+            contentDiv.innerHTML += `<div class="user-message">${message}</div>`;
+        }
+
         function createAlpineCard(containerId, data) {
             
             const container = document.getElementById(containerId);
@@ -186,7 +192,8 @@
             const cardWrapper = document.createElement('div');
             cardWrapper.setAttribute('x-data', JSON.stringify({
                 attributes: data,
-                isSaved: false
+                isSaved: false,
+                approvalSent: false
             }));
             cardWrapper.className = "max-w-sm w-full bg-white rounded-lg shadow-md p-6 text-center";
 
@@ -200,9 +207,10 @@
                         </div>
                     </template>
                 </div>
-                <button @click="isSaved = true; saveCharacterData(attributes)"
+                <button @click="if(!approvalSent) { isSaved = true; sendApproval(); approvalSent = true; }"
                         :class="isSaved ? 'bg-green-500' : 'bg-blue-500'" 
-                        class="text-white px-4 py-2 rounded-md flex items-center justify-center">
+                        class="text-white px-4 py-2 rounded-md flex items-center justify-center"
+                        :disabled="approvalSent">
                     <span x-show="!isSaved" class="mr-2">Save</span>
                     <svg x-show="isSaved" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                         <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z" clip-rule="evenodd" />
@@ -217,7 +225,6 @@
             container.appendChild(cardWrapper);
         }
 
-
     </script>
 </body>
-</html>
\ No newline at end of file
+</html>