embeded pandora mobile view

app/static/js/comments.js

@@ -0,0 +1,66 @@
+function renderComments(data) {
+        var cdiv = div.querySelector('.comments')
+        cdiv.innerHTML = `
+            <h3>
+                <span class="icon">${icon.down}</span>
+                Comments
+            </h3>
+        `
+        comments.forEach(comment => {
+            var c = document.createElement('div')
+            c.className = 'comment'
+            c.innerHTML = `
+                <div class="comment">
+                    <div class="name">${comment.name}</div>
+                    <div class="date">${comment.date}</div>
+                    <div class="text">${comment.text}</div>
+                </div>
+            `
+            cdiv.append(c)
+        })
+        var add = document.querySelector('.add-comment')
+        add.style.display = 'block'
+        cdiv.append(add)
+}
+
+document.querySelector('button#add-comment').addEventListener('click', event => {
+    var data = {}, csrf;
+    document.querySelector('.add-comment').querySelectorAll('input,textarea').forEach(input => {
+        if (input.name == 'csrfmiddlewaretoken') {
+            csrf = input.value.trim()
+        } else {
+            data[input.name] = input.value.trim()
+            if (!data[input.name]) {
+                delete data[input.name]
+            }
+        }
+    })
+    data.item = pandora.comment
+    fetch("/comment/", {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRFToken': csrf
+        },
+        body: JSON.stringify(data)
+    }).then(response => {
+        return response.json()
+    }).then(response => {
+        var comment= document.createElement('div')
+        comment.classList.add('comment')
+        var name = document.createElement('div')
+        name.classList.add('name')
+        name.innerText = response.name
+        comment.append(name)
+        var date = document.createElement('div')
+        date.classList.add('date')
+        date.innerText = response.date
+        comment.append(date)
+        var text = document.createElement('div')
+        text.classList.add('name')
+        text.innerText = response.text
+        comment.append(text)
+        document.querySelector('.comments').append(comment)
+        document.querySelector('.add-comment textarea').value = ''
+    })
+})