Add logo and enable buttons on feedback cards

rish-16 · rish-16 · commit 86a0da8ac938 · 2022-01-20T00:09:31.000+08:00
diff --git a/assets/logo_white.png b/assets/logo_white.png
diff --git a/css/db.css b/css/db.css
@@ -18,7 +18,7 @@ html, body {
     left: 0;
     right: 0;
     height: 75px;
-    background-color: #8395a7;
+    background-color: #566879;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -27,17 +27,21 @@ html, body {
 }
 
 #header #logo {
+    width: 150px;
     margin: auto 20px;
 }
 
+#header #logo img {
+    height: 45px;
+}
+
 #header #logo #logo-text {
     width: 75px;
     font-weight: bold;
     text-align: center;
-    color: #feca57;
+    color: whitesmoke;
     font-size: 22px;
-    padding: 5px 0;
-    border-bottom: 5px solid white;
+    margin: auto 0;
 }
 
 #header #cur-user {
@@ -59,7 +63,7 @@ html, body {
     margin: auto 0;
     font-weight: bold;
     cursor: pointer;
-    color: lightgreen;
+    color: white;
 }
 
 #header #cur-user #cur-username {
@@ -79,8 +83,8 @@ html, body {
     background-color: white;
     display: flex;
     flex-direction: row;
-    justify-content: flex-start;
-    overflow-y: scroll;
+    justify-content: left;
+    flex-wrap: wrap;
 }
 
 .fb-card {
@@ -96,9 +100,9 @@ html, body {
 }
 
 .fb-card:hover {
-    transform: scale(1.01);
+    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
     cursor: pointer;
-    transition: 0.5s;
+    transition: 0.75s;
 }
 
 .fb-card .fb-details {
@@ -141,13 +145,13 @@ html, body {
     color: #1dd1a1;
 }
 
-.fb-card .fb-options .fb-delete {
+.fb-card .fb-options .fb-archive {
     border: 2px solid #ee5253;
     color: #ee5253;
 }
 
 .fb-card .fb-options button:hover {
-    opacity: 0.5;
+    opacity: 0.4;
     transition: 0.3s;
 }
 
@@ -232,7 +236,7 @@ html, body {
     margin-bottom: 5px;
 }
 
-/* ---------------------------------------------------------------------------------------- */
+/* ----------------------------------------------------------------------------------------
 
 #sidebar {
     position: absolute;
@@ -242,4 +246,4 @@ html, body {
     width: 300px;
     background-color: antiquewhite;
     z-index: 1000;
-}
+} */
diff --git a/dashboard.html b/dashboard.html
@@ -16,7 +16,8 @@
     <body>
         <div id="header">
             <div id="logo">
-                <p id="logo-text">mcf.db</p>
+                <img src="assets/logo_white.png">
+                <!-- <p id="logo-text">mcf.db</p> -->
             </div>
 
             <div id="cur-user">
@@ -147,15 +148,44 @@
             var cardOptions = document.createElement('div')
             cardOptions.classList += 'fb-options'
 
-            var doneBtn = document.createElement('button')
-            doneBtn.classList += 'fb-done'
-            doneBtn.innerHTML = "Mark as done"
+            var assignBtn = document.createElement('button')
+            assignBtn.classList += 'fb-done'
+            assignBtn.innerHTML = "Assign"
+
+            assignBtn.addEventListener('click', () => {
+                console.log("Assign to ...")
+                var body = "Hey!\n\nWe recently received this message via our feedback channel:\n\n" 
+                        + `\"${this.logs['msg']}\"` + "\n\nWe believe you're the best person to handle this.\n\nBest regards!"
+
+                var title = "Re: Assignment of ComClub Feedback"
+
+                let email = window.prompt('Enter a destination email within NUS Computing Club: ')
+                
+                if (email.length > 0 && email.includes("@")) {
+                    window.open(`mailto:${email}?subject=${title}&body=${encodeURIComponent(body)}`)
+                } else {
+                    window.alert("You have provided an invalid email. Please try again!")
+                }
+            })
 
             var archiveBtn = document.createElement('button')
-            archiveBtn.classList += 'fb-delete'
+            archiveBtn.classList += 'fb-archive'
             archiveBtn.innerHTML = "Archive"
 
-            cardOptions.appendChild(doneBtn)
+            archiveBtn.addEventListener('click', () => {
+                console.log("Archiving " + this.logs['msg'])
+
+                const feedbackRef = ref(database, `/24MC/feedback/${this.logs['fid']}/`)
+                var updatedLogs = this.logs
+                updatedLogs['status'] = 'archived'
+
+                console.log(updatedLogs)
+                set(feedbackRef, updatedLogs).then(() => {
+                    window.alert(`Feedback ${updatedLogs['fid']} has been archived!!`)
+                })
+            })
+
+            cardOptions.appendChild(assignBtn)
             cardOptions.appendChild(archiveBtn)
 
             /**
@@ -167,8 +197,8 @@
              *          div.fb-topic
              *              span.fb-topic-cat
              *      div.fb-options
-             *          btn.fb-done
-             *          btn.fb-archive            
+             *          btn.fb-archive
+             *          btn.fb-assign
              */
 
 
@@ -191,8 +221,10 @@
                 const logs = Object.values(data)
                 
                 logs.forEach(child => {
-                    var card = new Card(child)
-                    card.addCard()
+                    if (child['status'] === 'active') {
+                        var card = new Card(child)
+                        card.addCard()
+                    }
                 })
             })
         }
