[#118543823] Styles dashboard, modifies models and controllers

public/css/style.css

@@ -52,5 +52,13 @@ nav .brand-logo {
 
 .row {
   margin-left: 40px;
-  /*border: 20px solid red;*/
+}
+
+.delete {
+  cursor: pointer;
+}
+
+#get-button {
+  margin-bottom: 30px;
+  left: 45%;
 }

public/index.html

@@ -8,6 +8,7 @@
     <script src="./js/script.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
     <link rel="stylesheet" href="css/style.css">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <title>Tech In Pink</title>
 </head>
 

public/js/script.js

@@ -1,41 +1,71 @@
 $(function () {
   // GET function
-  $('#get-button').on('click', function() {
+  $(document).on('click', '#get-button', function() {
     $.ajax({
       url: '/api/view',
       contentType: 'application/json',
       success: function(response) {
-        console.log('Tulifika', response);
+        var data = response.members;
+        // Clear the tbody
+        $('tbody').html('');
+        // Loop and append
+        data.forEach(function print(member) {
+          $('tbody').append(
+            '<tr>' +
+              "<td class='name'>' + member.name +'</td>" +
+              '<td>Andela</td>' +
+              '<td>Saturday</td>' +
+              "<td><i class='material-icons delete'>delete</i></td>" +
+            '</tr>'
+          );
+        });
       }
     });
   });
 
   // POST function
-  $('#post-button').on('click', function() {
-    $.ajax({
-      url: '/api/save',
-      method: 'POST',
-      contentType: 'application/json',
-      data: JSON.stringify({name: 'Gertrude Nyenyeshi'}),
-      success: function(response) {
-        console.log('Watuuuu', response);
-      }
-    });
+  $(document).on('click', '#post-button', function() {
+    // Get the value from form
+    var attendee = $('#attendee').val();
+    // If user has not filled form
+    if (!attendee) {
+      Materialize.toast('Please fill with a name :)', 4000);
+    } else {
+      // Post value if user has filled name
+      $.ajax({
+        url: '/api/save',
+        method: 'POST',
+        contentType: 'application/json',
+        data: JSON.stringify({name: attendee}),
+        success: function(response) {
+          $('#get-button').trigger('click');
+          Materialize.toast('Successfully added new user', 4000);
+        }
+      });
+    }
+  });
+
+  // DELETE Button
+  $(document).on('click', '.delete', function() {
+    var del = $(this).closest('tr');
+    var id = del.find('.name').text();
+    console.log(del);
+    console.log(id);
   });
 
   // GET STARTED button function
   $('#get-started').on('click', function() {
     document.getElementById('o').innerHTML = "<h4 id='register'>Enter Attendee: </h4> " +
     "<form class='col s12'> <div class='row'> <div class='input-field col s6'>  " +
     " <input type='text' id='attendee'>  <label for='attendee'> Attendee" +
-    "</label> </div> </div> </form> <hr>";
-    var b;
+    "</label> <a id='post-button' class='waves-effect waves-light btn #880e4f pink darken-4'>Add</a>" +
+    "</div> </div> </form> <a id='get-button' class='waves-effect waves-light btn #880e4f pink darken-4 col s2 offset-s8'>View all</a><hr>" +
+    "<div class='row'><table class='striped col s10 offset-s1' id='list'> " +
+    "<thead><tr><th>Name</th><th>Venue</th><th>Day</th>" +
+    "</tr></thead><tbody><tr><td class='name'>Gertrude</td><td>Andela</td><td>Saturday</td><td>" +
+    "<i class='material-icons delete'>delete</i></td></tr></tbody></table></div>";
+
     $('#get-started').text('');
     // this.id = "go-back";
   });
-
-  // $(document).on('click', '#go-back', function() {
-  //   document.getElementById("o").innerHTML = "<h2>OoFJHFDF</h2>";
-  //   console.log('Ola');
-  // });
 });

server/controllers/member.js

@@ -26,9 +26,21 @@
       // Assignment. Learn how to do this
     },
 
-    delete: function() {},
+    delete: function() {
+      Member.find();
+    },
     find: function(req, res) {
-      res.send({name: 'Gerty', age: 21});
+      Member.find(function(err, members) {
+        if (err) {
+          return res.status(500).json({
+            err: err || err.errmessage
+          });
+        } else {
+          return res.status(200).json({
+            members: members
+          });
+        }
+      });
     }
   };
 })();

server/models/member.js

@@ -8,6 +8,10 @@
     name: {
       type: String,
       required: true
+    },
+    email: {
+      type: String,
+      required: true
     }
   });