From a6f055498aa39557e0fb6000403e1470f797a5a9 Mon Sep 17 00:00:00 2001
From: Anton Franzluebbers <anton@uga.edu>
Date: Tue, 19 Oct 2021 23:59:57 -0400
Subject: [PATCH] set for other values on website

---
 velconnect/templates/index.jinja | 53 ++++++++++++++++++++++----------
 1 file changed, 37 insertions(+), 16 deletions(-)

diff --git a/velconnect/templates/index.jinja b/velconnect/templates/index.jinja
index 648e7cc..d0461fc 100644
--- a/velconnect/templates/index.jinja
+++ b/velconnect/templates/index.jinja
@@ -80,26 +80,37 @@
                     <div class="tile tile-centered">
                         <div class="tile-content">
                             <div class="tile-title text-bold">TV URL</div>
-                            <div class="tile-subtitle tv_url">---</div>
+                            <input class="btn tv_url" type="text" id="tv_url" placeholder="----">
+                        </div>
+                        <div class="tile-action">
+                            <button class="btn btn-primary btn-lg tooltip tooltip-left" id="set_tv_url"
+                                data-tooltip="">Set</button>
                         </div>
                     </div>
                     <br>
                     <div class="tile tile-centered">
                         <div class="tile-content">
                             <div class="tile-title text-bold">User Color</div>
-                            <div class="tile-subtitle user_color">---</div>
+                            <input class="btn user_color" type="text" id="user_color" placeholder="----">
+                        </div>
+                        <div class="tile-action">
+                            <button class="btn btn-primary btn-lg tooltip tooltip-left" id="set_user_color"
+                                data-tooltip="Set User Color">Set</button>
                         </div>
                     </div>
                     <br>
                     <div class="tile tile-centered">
                         <div class="tile-content">
                             <div class="tile-title text-bold">Carpet Color</div>
-                            <div class="tile-subtitle carpet_color">---</div>
+                            <input class="btn carpet_color" type="text" id="carpet_color" placeholder="----">
+                        </div>
+                        <div class="tile-action">
+                            <button class="btn btn-primary btn-lg tooltip tooltip-left" id="set_carpet_color"
+                                data-tooltip="Set Carpet Color">Set</button>
                         </div>
                     </div>
                     <br>
                     <br>
-                    <br>
                 </div>
             </div>
         </div>
@@ -133,25 +144,35 @@
                 writeClass('last_used', respData['user']['last_used']);
                 writeClass('user_color', respData['user']['user_color']);
                 writeClass('user_name', respData['user']['user_name']);
-                writeClass('tv_url', respData['room']['tv_url']);
-                writeClass('carpet_color', respData['room']['carpet_color']);
+                if (respData['room']) {
+                    writeClass('tv_url', respData['room']['tv_url']);
+                    writeClass('carpet_color', respData['room']['carpet_color']);
+                }
 
                 headset_details.style.display = "block";
             }, (status) => {
                 failure.style.display = "block";
             });
 
+            function setData(endpoint, data) {
+                httpPostAsync('/api/set_headset_details/' + hw_id + '/' + endpoint,
+                    data,
+                    (resp) => {console.log('success');},
+                    (status) => {console.log('fail');}
+                );
+            }
+
             set_room_id.addEventListener('click', () => {
-                httpPostAsync('/api/set_headset_details/' + hw_id,
-                    {
-                        "current_room": current_room.value
-                    },
-                    (resp) => {
-                        console.log('success');
-                    },
-                    (status) => {
-                        console.log('fail');
-                    });
+                setData('current_room', {"current_room": current_room.value});
+            });
+            document.getElementById('set_tv_url').addEventListener('click', () => {
+                setData('tv_url', {"tv_url": document.getElementById('tv_url').value});
+            });
+            document.getElementById('set_user_color').addEventListener('click', () => {
+                setData('user_color', {"user_color": document.getElementById('user_color').value});
+            });
+            document.getElementById('set_carpet_color').addEventListener('click', () => {
+                setData('carpet_color', {"carpet_color": document.getElementById('carpet_color').value});
             });
 
         } else {