2 files changed, 256 insertions(+), 0 deletions(-)

A caint.css
A caint.js

@@ 1,119 @@
+html{
+    font-family:sans-serif;
+    line-height:1.15;
+    margin: 0 auto;
+    max-width: 50em;
+}
+
+input[type='submit'], button, [aria-label] {
+    cursor: pointer;
+}
+
+#editForm {
+    display: none;
+}
+
+table {
+    font-family: Arial, sans-serif;
+    border: 1px solid;
+    border-collapse: collapse;
+}
+
+th {
+    background-color: #f8f8f8;
+    padding: 5px;
+}
+
+td {
+    border: 1px solid;
+    padding: 5px;
+}
+
+textarea{
+    overflow: auto;
+    resize: none;
+    word-wrap: normal;
+    text-align: initial;
+    text-indent: initial;
+    text-shadow: initial;
+    text-transform: initial;
+    word-spacing: initial;
+    letter-spacing: initial;
+}
+
+button, input[type="submit"]{
+    display: inline-block;
+    height: 38px;
+    padding: 0 30px;
+    color: #555;
+    text-align: center;
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 38px;
+    letter-spacing: .1rem;
+    text-transform: uppercase;
+    text-decoration: none;
+    white-space: nowrap;
+    background-color: transparent;
+    border-radius: 4px;
+    border: 1px solid #bbb;
+    cursor: pointer;
+    box-sizing: border-box;
+}
+
+input[type="text"]{
+    line-height: 34px;
+}
+
+input[id="commentBody"]{
+    width: 40%;
+    min-height: 65px;
+    padding-top: 6px;
+    padding-bottom: 6px;
+}
+
+button:hover, input[type="submit"]:hover{
+    background-color: #efefef;
+}
+
+.commentSection{
+    background-color: #fefefe;
+    color: #222;
+    border-top: solid;
+    border-color: #dddddd;
+    border-top-width: 2px;
+    margin-top: 25px;
+    padding-bottom: 5px;
+    display: block;
+
+    line-height: 1.5;
+    font-weight: 400;
+}
+
+.commentThread{
+    background-color: #fefefe;
+    color: #222;
+    width: 100%;
+    padding-bottom: 5px;
+    display: block;
+
+    line-height: 1.5;
+    font-weight: 400;
+}
+
+.comment{
+    border-top: solid;
+    border-color: #dddddd;
+    border-top-width: 1px;
+    padding-left: 2em;
+}
+
+.commenterName{
+    margin-bottom: 0%;
+    margin-block-end: 0%;
+}
+
+.commentBody{
+    padding-top: 0%;
+    margin-block-start: 0%;
+}

@@ 1,137 @@
+const uri = 'api/Comments';
+const threadUri = 'api/Threads';
+
+const threadHost = "TENANTNAMEHERE";
+const threadPath = document.location.pathname;
+
+const thisThread = getThreadId();
+
+function getThreadId()
+{
+  const threadLocation = {
+    hostname: threadHost,
+    path: threadPath,
+  };
+
+  fetch(threadUri, {
+    method: 'POST',
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(threadLocation)
+  })
+    .then(response => response.json())
+    .then(_data => {
+      data = _data;
+      document.getElementById("threadID").value = data;
+      getThread(data);
+      return data;
+  })
+    .catch(error => console.error('Unable to get thread id.', error));
+}
+
+function getThread(thread) {
+  fetch(uri + "/thread/" + thread)
+    .then(response => response.json())
+    .then(data => _displayThread(data))
+    .catch(error => console.error('Unable to get comments.', error));
+}
+
+async function addItem() {
+  const commenterNameTextbox = document.getElementById('commenterName');
+  const commentBodyTextbox = document.getElementById('commentBody');
+  var commentThreadId = document.getElementById('threadID').value;
+  console.log(commentThreadId);
+
+  if (commentBodyTextbox.value.length == 0)
+  {
+    console.log(commentBodyTextbox.value.length);
+    return;
+  }
+  else
+  {
+    const item = {
+      name: commenterNameTextbox.value.trim(),
+      body: commentBodyTextbox.value.trim(),
+      threadId: commentThreadId,
+    };
+  
+    fetch(uri, {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(item)
+    })
+      .then(response => response.json())
+      .then(() => {
+        getThread(commentThreadId);
+        commenterNameTextbox.value = '';
+        commentBodyTextbox.value = '';
+      })
+      .catch(error => console.error('Unable to add comment.', error));
+  }
+
+  
+}
+
+function deleteItem(id) {
+  fetch(`${uri}/${id}`, {
+    method: 'DELETE'
+  })
+  .then(() => getItems())
+  .catch(error => console.error('Unable to delete item.', error));
+}
+
+function approveItem(id) {
+    fetch(`${uri}/admin/approve/${id}`, {
+        method: 'POST'
+      })
+      .then(() => getItems())
+      .catch(error => console.error('Unable to approve comments.', error));
+}
+
+function closeInput() {
+  document.getElementById('editForm').style.display = 'none';
+}
+
+function _displayCount(itemCount) {
+  const name = (itemCount === 1) ? 'comment' : 'comments';
+
+  document.getElementById('counter').innerText = `${itemCount} ${name}`;
+}
+
+function _displayThread(data) {
+  const threadBody = document.getElementById('commentThread');
+  threadBody.setAttribute('class', 'commentThread');
+  threadBody.innerHTML = '';
+
+  _displayCount(data.length);
+
+  const button = document.createElement('button');
+
+  var x = 0;
+
+  data.forEach(item => {
+    var commentDiv = document.createElement('div');
+    var commentName = document.createElement('h3');
+    var commentBody = document.createElement('p');
+
+    commentDiv.setAttribute('class', 'comment');
+
+    commentName.setAttribute('class', 'commenterName');
+    commentBody.setAttribute('class', 'commentBody');
+
+    commentName.innerHTML = item.name;
+    commentBody.innerHTML = item.body;
+
+    commentDiv.appendChild(commentName);
+    commentDiv.appendChild(commentBody);
+
+    threadBody.appendChild(commentDiv);
+  });
+
+  comments = data;
+}<
\ No newline at end of file