From c6d457efbf55f2a3c4bb8629ee1edc822256e975 Mon Sep 17 00:00:00 2001
From: Kristy Fournier <124598538+kristy-fournier@users.noreply.github.com>
Date: Thu, 17 Oct 2024 16:26:17 -0400
Subject: [PATCH] added qrcode generator in settings

---
 Client/index.html |  6 ++++++
 Client/scripts.js | 24 +++++++++++++++++++++---
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/Client/index.html b/Client/index.html
index ffda3ea..f7be55c 100644
--- a/Client/index.html
+++ b/Client/index.html
@@ -81,6 +81,11 @@ changes visibility with JS-->
                 <p class="italic">Volume of the music</p>
                 <input type="range" min="0" max="100" step="1" title="volumerange" id="volumerange">
             </div>
+            <div class="item">
+                <h2>Share the remote:</h2>
+                <p class="italic">Hit settings icon to refresh the code</p>
+                <div id="qrcode"></div>
+            </div>
         </div>
     </div>
     <!--All the buttons are down here but settings is just doing its own thing-->
@@ -92,6 +97,7 @@ changes visibility with JS-->
         <img class="control-button" id="search-button" src="./images/search.png" alt="search"></img>
         
     </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="scripts.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/Client/scripts.js b/Client/scripts.js
index 2058852..94b2d5f 100644
--- a/Client/scripts.js
+++ b/Client/scripts.js
@@ -177,6 +177,16 @@ async function checkSettings(skipServer=false) {
     } else {
         document.getElementById("iptextbox").value = ip;
     }
+    let tempURL = "http://" + document.location.href.split("/")[2] + "/?ip=" + ip;
+    document.getElementById("qrcode").innerHTML = ""
+    new QRCode(document.getElementById("qrcode"), {
+        text: tempURL,
+        width: 256,
+        height: 256,
+        colorDark : "#000000",
+        colorLight : "#eeeeee",
+        correctLevel : QRCode.CorrectLevel.H
+    });
     document.getElementById("alerttimetextbox").value = alertTime
     partyButtonState = document.getElementById("partymode-button").innerHTML;
     x = await getFromServer({setting: "getsettings"}, "settings");
@@ -316,16 +326,24 @@ ip = params.get("ip")
 if (ip == null || ip=="") {
     ip=getCookie("ip")
 }
-console.log(ip)
 if (ip==null || ip==""){
     ip = ""
 }
 document.cookie = "ip="+ip+"; path=/;"
 
-
 alertTime = getCookie("alertTime")
 document.getElementById("alerttimetextbox").value = alertTime
 if (alertTime == "") {
     alertTime = 2;
     document.cookie = "alertTime="+alertTime+"; path=/;"
-}
\ No newline at end of file
+}
+
+let tempURL = "http://" + document.location.href.split("/")[2] + "/?ip=" + ip;
+new QRCode(document.getElementById("qrcode"), {
+text: tempURL,
+width: 256,
+height: 256,
+colorDark : "#000000",
+colorLight : "#eeeeee",
+correctLevel : QRCode.CorrectLevel.H
+});
\ No newline at end of file