aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/comments.html100
-rw-r--r--src/static/comments.js76
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 = {
10firebase.initializeApp(firebaseConfig); 10firebase.initializeApp(firebaseConfig);
11 11
12var database = firebase.database(); 12var database = firebase.database();
13var docPath = 'comments' + window.location.pathname.replace('.html', ''); 13var docPath = window.location.hostname.replace('.', '-') + '/comments' + window.location.pathname.replace('.html', '');
14var submit = document.querySelector('#submit'); 14var submit = document.querySelector('#submit');
15var comments = document.querySelector('.comments ul'); 15var comments = document.querySelector('.comments ul');
16var textName = document.querySelector('#name'); 16var textName = document.querySelector('#name');
@@ -21,43 +21,45 @@ function encodeHTML(s) {
21 return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;'); 21 return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
22} 22}
23 23
24ref.on("value", function (snapshot) { 24if (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
46submit.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}