Added Scanner identification and MQTT handling

booker/templates/booker/index.html

@@ -4,21 +4,55 @@
 {% block title %}Scanner Index{% endblock %}
 
 {% block content %}
-    What chat room would you like to enter?<br>
-    <input id="room-name-input" type="text" size="100"><br>
-    <input id="room-name-submit" type="button" value="Enter">
+<div class="container">
+    <div class="row">
+        <h1>Booker</h1>
+        <p>Choose a scanner you want to use to book assets and container into/outof containers.</p>
+    </div>
+    <div class="row">
+        <div class="cols-12">
+        <textarea id="chat-log" cols="100" rows="7"></textarea><br>
 
-    <script>
-        document.querySelector('#room-name-input').focus();
-        document.querySelector('#room-name-input').onkeyup = function(e) {
-            if (e.keyCode === 13) {  // enter, return
-                document.querySelector('#room-name-submit').click();
-            }
-        };
+        What scanner would you like to use? (Refresh page if your new scanner is not shown)<br>
+        {% for scanner in object_list %}
+        <a href="/booker/{{ scanner.named_id }}/">{{ scanner.named_id }}: {{ scanner.description }}</a><br />
+        {% endfor %}
+        <input id="scanner-name-input" type="text" size="100"><br>
+        <input id="scanner-name-submit" type="button" value="Enter">
 
-        document.querySelector('#room-name-submit').onclick = function(e) {
-            var roomName = document.querySelector('#room-name-input').value;
-            window.location.pathname = '/booker/' + roomName + '/';
-        };
-    </script>
+        <script>
+            document.querySelector('#scanner-name-input').focus();
+            document.querySelector('#scanner-name-input').onkeyup = function(e) {
+                if (e.keyCode === 13) {  // enter, return
+                    document.querySelector('#scanner-name-submit').click();
+                }
+            };
+
+            document.querySelector('#scanner-name-submit').onclick = function(e) {
+                var scannerName = document.querySelector('#scanner-name-input').value;
+                window.location.pathname = '/booker/' + scannerName + '/';
+            };
+        </script>
+
+        <script>
+            const chatSocket = new WebSocket(
+                'ws://'
+                + window.location.host
+                + '/ws/scanner-announce/'
+            );
+
+            chatSocket.onmessage = function(e) {
+                const data = JSON.parse(e.data);
+                document.querySelector('#chat-log').value += (data.scanner + ': ' + data.message + '\n');
+            };
+
+            chatSocket.onclose = function(e) {
+                console.error('Chat socket closed unexpectedly');
+                document.querySelector('#chat-log').value += ('ERROR: Chat socket closed unexpectedly!\n');
+            };
+
+        </script>
+        </div>
+    </div>
+</div>
 {% endblock %}

booker/templates/booker/scanner.html

@@ -7,15 +7,15 @@
     <textarea id="chat-log" cols="100" rows="20"></textarea><br>
     <input id="chat-message-input" type="text" size="100"><br>
     <input id="chat-message-submit" type="button" value="Send">
-    {{ scanner_id|json_script:"room-name" }}
+    {{ scanner_id|json_script:"scanner_id" }}
     <script>
-        const roomName = JSON.parse(document.getElementById('room-name').textContent);
+        const scannerId = JSON.parse(document.getElementById('scanner_id').textContent);
 
         const chatSocket = new WebSocket(
             'ws://'
             + window.location.host
-            + '/ws/scannerdata/'
-            + roomName
+            + '/ws/scanner/'
+            + scannerId
             + '/'
         );