[docker-example] added ajax and styled example page

1 files changed, 46 insertions, 0 deletions

diff --git a/examples/docker/web/public/js/main.js b/examples/docker/web/public/js/main.js
new file mode 100644
index 0000000..cce225b
--- /dev/null
+++ b/examples/docker/web/public/js/main.js
@@ -0,0 +1,46 @@
+(function() {
+
+    let mainContainer;
+
+    function loadHomepage() {
+        mainContainer = document.querySelector('#main');
+        const xhr = new XMLHttpRequest();
+        xhr.open('GET', '/api/contents?type=Song');
+        xhr.onreadystatechange = renderHomepage;
+        xhr.send(null);
+    }
+
+    function renderHomepage(event) {
+        const DONE = 4;
+        const OK = 200;
+        let xhr = event.currentTarget;
+        let html = '';
+
+        if (xhr.readyState === DONE) {
+            if (xhr.status === OK) {
+                const songs = window.JSON.parse(xhr.responseText).data;
+                console.log(songs);
+                if(songs.length === 0){
+                    html = '<p><strong>There have not been any Songs added, <a href="/admin">go add some at /admin</a></strong></p>';
+                } else {
+                    html = songs.map(function(song) {
+                        return `
+                            <article>
+                                <h3>${song.title || 'Unknown'} by ${song.artist || 'Unknown'}</h3>
+                                <p>rating: ${song.rating}</p>
+                                <h6>opinion:</h6>
+                                <div>${song.opinion || 'none'}
+                            </article>
+                        `;
+                    }).join();
+                }
+            } else {
+                html = '<p><strong>The /api endpoint did not respond correctly :-(</strong></p>';
+            }
+
+            mainContainer.innerHTML = html;
+        }
+    }
+
+    document.addEventListener("DOMContentLoaded", loadHomepage);
+})();
\ No newline at end of file