diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/comments.html | 100 | ||||
| -rw-r--r-- | src/static/comments.js | 76 |
2 files changed, 139 insertions, 37 deletions
diff --git a/src/comments.html b/src/comments.html new file mode 100644 index 0000000..3d990da --- /dev/null +++ b/src/comments.html | |||
| @@ -0,0 +1,100 @@ | |||
| 1 | <!DOCTYPE html> | ||
| 2 | <html lang="en"> | ||
| 3 | |||
| 4 | <head> | ||
| 5 | <meta charset="utf-8"> | ||
| 6 | <meta name="theme-color" content="#ffffff"> | ||
| 7 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| 8 | <meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
| 9 | <title>Commenta dashboard</title> | ||
| 10 | |||
| 11 | <style> | ||
| 12 | th { | ||
| 13 | text-align: left; | ||
| 14 | } | ||
| 15 | |||
| 16 | .comment-item { | ||
| 17 | padding: 10px 0 30px 0; | ||
| 18 | border-bottom: 2px inset gray; | ||
| 19 | } | ||
| 20 | </style> | ||
| 21 | |||
| 22 | </head> | ||
| 23 | |||
| 24 | <body> | ||
| 25 | |||
| 26 | <h1>Comments</h1> | ||
| 27 | <div id="results"></div> | ||
| 28 | |||
| 29 | <script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-app.js"></script> | ||
| 30 | <script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-database.js"></script> | ||
| 31 | <script src="static/comments.js"></script> | ||
| 32 | |||
| 33 | <script> | ||
| 34 | |||
| 35 | // var tableResults = document.querySelector('#results tbody'); | ||
| 36 | var resultsPlaceholder = document.querySelector('#results'); | ||
| 37 | |||
| 38 | function snapshotToArray(snapshot) { | ||
| 39 | var returnArr = []; | ||
| 40 | snapshot.forEach(function (childSnapshot) { | ||
| 41 | var arrItem = childSnapshot.val(); | ||
| 42 | arrItem.key = childSnapshot.key; | ||
| 43 | returnArr.push(arrItem); | ||
| 44 | }); | ||
| 45 | |||
| 46 | var comments = []; | ||
| 47 | returnArr.forEach(function (item) { | ||
| 48 | var keys = Object.keys(item); | ||
| 49 | for (var key of keys) { | ||
| 50 | let group = item.key; | ||
| 51 | if (key !== 'key') { | ||
| 52 | for (var itemKey of Object.keys(item[key])) { | ||
| 53 | item[key][itemKey].slug = key; | ||
| 54 | item[key][itemKey].group = group; | ||
| 55 | item[key][itemKey].itemKey = itemKey | ||
| 56 | comments.push(item[key][itemKey]); | ||
| 57 | } | ||
| 58 | } | ||
| 59 | } | ||
| 60 | }); | ||
| 61 | |||
| 62 | return comments; | ||
| 63 | }; | ||
| 64 | |||
| 65 | var path = window.location.hostname.replace('.', '-') + '/comments'; | ||
| 66 | var ref = firebase.database().ref(path); | ||
| 67 | ref.on("value", function (snap) { | ||
| 68 | resultsPlaceholder.innerHTML = ''; | ||
| 69 | var comments = snapshotToArray(snap); | ||
| 70 | comments.forEach(function (item) { | ||
| 71 | var commentContent = document.createElement('div'); | ||
| 72 | |||
| 73 | commentContent.classList.add('comment-item'); | ||
| 74 | commentContent.innerHTML = ` | ||
| 75 | <p><b>${item.name} (${item.published})</b><br> | ||
| 76 | <i>${item.group}/${item.slug}</i></p> | ||
| 77 | <p>${item.comment}</p> | ||
| 78 | `; | ||
| 79 | |||
| 80 | var buttonDelete = document.createElement('button'); | ||
| 81 | buttonDelete.innerText = 'Delete comment'; | ||
| 82 | buttonDelete.dataset.id = `${window.location.hostname.replace('.', '-')}/comments/${item.group}/${item.slug}/${item.itemKey}`; | ||
| 83 | buttonDelete.addEventListener('click', function (evt) { | ||
| 84 | if (confirm('Are you sure you want to delete this comment?')) { | ||
| 85 | firebase.database().ref(evt.target.dataset.id).remove(); | ||
| 86 | } | ||
| 87 | }); | ||
| 88 | |||
| 89 | commentContent.appendChild(buttonDelete); | ||
| 90 | resultsPlaceholder.appendChild(commentContent); | ||
| 91 | }); | ||
| 92 | }, function (errorObject) { | ||
| 93 | console.log(`The read failed: ${errorObject.code}`); | ||
| 94 | }); | ||
| 95 | |||
| 96 | </script> | ||
| 97 | |||
| 98 | </body> | ||
| 99 | |||
| 100 | </html> | ||
diff --git a/src/static/comments.js b/src/static/comments.js index c8234d2..3f373e5 100644 --- a/src/static/comments.js +++ b/src/static/comments.js | |||
| @@ -10,7 +10,7 @@ var firebaseConfig = { | |||
| 10 | firebase.initializeApp(firebaseConfig); | 10 | firebase.initializeApp(firebaseConfig); |
| 11 | 11 | ||
| 12 | var database = firebase.database(); | 12 | var database = firebase.database(); |
| 13 | var docPath = 'comments' + window.location.pathname.replace('.html', ''); | 13 | var docPath = window.location.hostname.replace('.', '-') + '/comments' + window.location.pathname.replace('.html', ''); |
| 14 | var submit = document.querySelector('#submit'); | 14 | var submit = document.querySelector('#submit'); |
| 15 | var comments = document.querySelector('.comments ul'); | 15 | var comments = document.querySelector('.comments ul'); |
| 16 | var textName = document.querySelector('#name'); | 16 | var textName = document.querySelector('#name'); |
| @@ -21,43 +21,45 @@ function encodeHTML(s) { | |||
| 21 | return s.replace(/&/g, '&').replace(/</g, '<').replace(/"/g, '"'); | 21 | return s.replace(/&/g, '&').replace(/</g, '<').replace(/"/g, '"'); |
| 22 | } | 22 | } |
| 23 | 23 | ||
| 24 | ref.on("value", function (snapshot) { | 24 | if (submit) { |
| 25 | comments.innerHTML = ''; | 25 | ref.on("value", function (snapshot) { |
| 26 | var commentList = Array(); | 26 | comments.innerHTML = ''; |
| 27 | var commentList = Array(); | ||
| 27 | 28 | ||
| 28 | // generating normal array | 29 | // generating normal array |
| 29 | snapshot.forEach(function (item) { | 30 | snapshot.forEach(function (item) { |
| 30 | commentList.push(item.val()) | 31 | commentList.push(item.val()) |
| 31 | }); | 32 | }); |
| 32 | 33 | ||
| 33 | // rendering html | 34 | // rendering html |
| 34 | commentList.reverse().forEach(function (item) { | 35 | commentList.reverse().forEach(function (item) { |
| 35 | var liItem = `<li> | 36 | var liItem = `<li> |
| 36 | <div><b>${encodeHTML(item.name)}</b> - ${encodeHTML(item.published)}</div> | 37 | <div><b>${encodeHTML(item.name)}</b> - ${encodeHTML(item.published)}</div> |
| 37 | <div>${encodeHTML(item.comment)}</div> | 38 | <div>${encodeHTML(item.comment)}</div> |
| 38 | </li>`; | 39 | </li>`; |
| 39 | comments.innerHTML += liItem; | 40 | comments.innerHTML += liItem; |
| 40 | }); | 41 | }); |
| 41 | 42 | ||
| 42 | }, function (errorObject) { | 43 | }, function (errorObject) { |
| 43 | console.log("The read failed: " + errorObject.code); | 44 | console.log("The read failed: " + errorObject.code); |
| 44 | }); | 45 | }); |
| 45 | 46 | ||
| 46 | submit.addEventListener('click', function (evt) { | 47 | submit.addEventListener('click', function (evt) { |
| 47 | if (textName.value && textComment.value) { | 48 | if (textName.value && textComment.value) { |
| 48 | submit.disabled = true; | 49 | submit.disabled = true; |
| 49 | firebase.database().ref(docPath + '/' + Date.now()).set({ | 50 | firebase.database().ref(docPath + '/' + Date.now()).set({ |
| 50 | name: textName.value, | 51 | name: textName.value, |
| 51 | comment: textComment.value, | 52 | comment: textComment.value, |
| 52 | published: new Date().toISOString().slice(0, 16).replace('T', ' '), | 53 | published: new Date().toISOString().slice(0, 16).replace('T', ' '), |
| 53 | }, function (error) { | 54 | }, function (error) { |
| 54 | if (error) { | 55 | if (error) { |
| 55 | alert('Data could not be saved.' + error); | 56 | alert('Data could not be saved.' + error); |
| 56 | } else { | 57 | } else { |
| 57 | textName.value = ''; | 58 | textName.value = ''; |
| 58 | textComment.value = ''; | 59 | textComment.value = ''; |
| 59 | submit.disabled = false; | 60 | submit.disabled = false; |
| 60 | } | 61 | } |
| 61 | }); | 62 | }); |
| 62 | } | 63 | } |
| 63 | }); | 64 | }); |
| 65 | } | ||
