FEATURE: Add AJAX API to web UI

mopidy_pummeluff/webui/index.html

@@ -15,26 +15,27 @@
             <div id="register">
                 <h2>Register New Card</h2>
                 <div>
-                    <form>
+                    <form id="register-form">
                         <label for="uid">UID</label>
-                        <input id="uid" type="text" placeholder="The unique card ID">
+                        <input id="uid" name="uid" type="text" placeholder="The unique card ID">
                         <a id="read-rfid-card" href="#">Read UID from RFID card…</a>
                         <label for="alias">Alias</label>
-                        <input id="alias" type="text" placeholder="Your personal alias / identifier">
+                        <input id="alias" name="alias" type="text" placeholder="Your personal alias / identifier">
                         <label for="type">Type</label>
-                        <select>
+                        <select id="type" name="type">
                         </select>
                         <label for="parameter">Parameter</label>
-                        <input id="parameter" type="text" placeholder="A type-specific parameter">
-                        <button role="submit">✓ Register Card</button>
+                        <input id="parameter" name="parameter" type="text" placeholder="A type-specific parameter">
+                        <button id="register-button" role="submit">✓ Register Card</button>
                     </form>
                 </div>
             </div>
-            <div id="registered">
+            <div id="registry">
                 <h2>Registered Cards</h2>
                 <div id="cards"></div>
             </div>
         </main>
+        <script src="script.js"></script>
     </body>
 
 </html>

mopidy_pummeluff/webui/script.js

@@ -0,0 +1,120 @@
+/*
+ * API class which communicates with the Pummeluff REST API.
+ */
+
+class API {
+
+    /*
+     * Send AJAX request to REST API endpoint.
+     */
+
+    request(endpoint, data, callback)
+    {
+        let init = {}
+        if(data)
+            init = { method: 'POST', body: data }
+
+        fetch(endpoint, init).then(function(response) {
+            return response.json();
+        }).then(callback)
+
+    }
+
+    /*
+     * Refresh the registry.
+     */
+
+    refreshRegistry()
+    {
+        let callback = function(response)
+        {
+            let cardsContainer = document.getElementById('cards')
+            while(cardsContainer.firstChild)
+                cardsContainer.removeChild(cardsContainer.firstChild)
+
+            for(let card of response.cards)
+            {
+                let cardElement = document.createElement('div')
+                cardElement.setAttribute('class', 'card')
+
+                let args = new Array('alias', 'uid', 'type', 'parameter')
+                for(let arg of args)
+                {
+                    let spanElement = document.createElement('span')
+                    let value = card[arg] ? card[arg] : '-'
+                    spanElement.setAttribute('class', arg)
+                    spanElement.innerHTML = value
+                    cardElement.appendChild(spanElement)
+                }
+
+                cardsContainer.appendChild(cardElement)
+            }
+        }
+
+        this.request('/pummeluff/registry/', false, callback)
+    }
+
+    /*
+     * Refresh the card types.
+     */
+
+    refreshTypes()
+    {
+        let callback = function(response)
+        {
+            let select = document.getElementById('type');
+            while(select.firstChild)
+                select.removeChild(select.firstChild)
+
+            for(let type in response.types)
+            {
+                let option = document.createElement('option')
+                option.setAttribute('value', type)
+                option.innerHTML = type + ': ' + response.types[type]
+                select.appendChild(option)
+            }
+        }
+
+        this.request('/pummeluff/types/', false, callback)
+    }
+
+    /*
+     * Register a new card.
+     */
+
+    register()
+    {
+        let form = document.getElementById('register-form')
+        let data = new FormData(form)
+
+        let callback = function(response)
+        {
+            api.refreshRegistry()
+        }
+
+        this.request('/pummeluff/register/', data, callback)
+    }
+
+    /*
+     * Get latest scanned card.
+     */
+
+    get_latest_card(callback)
+    {
+        this.request('/pummeluff/latest/', false, callback)
+    }
+
+}
+
+api = new API();
+
+api.refreshRegistry();
+api.refreshTypes();
+
+document.getElementById('register-form').onsubmit = function()
+{
+    api.register()
+    return false;
+}
+
+

mopidy_pummeluff/webui/style.css

@@ -136,6 +136,7 @@ div.card
     width           : 400px;
     line-height     : 20px;
 }
+
 div.card span.uid,
 div.card span.type,
 div.card span.parameter
@@ -150,7 +151,8 @@ div.card span.type
     color           : #eee;
     font-size       : 11px;
     line-height     : 11px;
-    padding         : 2px 4px;
+    padding         : 3px 5px;
+    margin-left     : 5px;
     border-radius   : 10px;
 }