Liste des membres

Les membres du Club Info seront désormais appelés les nerds ^^ L'ajout et la supression des membres est surtout un test, je pense pas qu'on la gardera, vu que ça sera super souvent ^^ on pourra faire ça à la main. D'après https://scotch.io/tutorials/creating-a-single-page-todo-app-with-node-and-angular

Liste des membres
Les membres du Club Info seront désormais appelés les nerds ^^ L'ajout et la supression des membres est surtout un test, je pense pas qu'on la gardera, vu que ça sera super souvent ^^ on pourra faire ça à la main. D'après https://scotch.io/tutorials/creating-a-single-page-todo-app-with-node-and-angular
Geoffrey PREUD'HOMME
1 parent 894b21fa
Showing 9 changed files with 175 additions and 60 deletions Show diff stats
app/models/nerd.js
app/routes.js
package.json
public/css/style.css
public/js/controllers/NerdCtrl.js
public/js/services/NerdService.js
public/views/index.html
public/views/nerd.html
server.js
@@ -5,8 +5,20 @@ var mongoose = require(&#39;mongoose&#39;);
 // define our nerd model
 // module.exports allows us to pass this to other files when it is called
 module.exports = mongoose.model('Nerd', {
-    name: {
+    login: {
         type: String,
-        default: ''
+        default: 'login'
+    },
+    section: {
+        type: String,
+        default: 'IMA'
+    },
+    promo: {
+        type: Number,
+        default: 2017
+    },
+    role: {
+        type: String,
+        default: 'Membre'
     }
 });
 \ No newline at end of file
- // app/routes.js
-
- // grab the nerd model we just created
- var Nerd = require('./models/nerd');
-
- module.exports = function (app) {
-
-     // server routes ===========================================================
-     // handle things like api calls
-     // authentication routes
-
-     // sample api route
-     app.get('/api/nerds', function (req, res) {
-         // use mongoose to get all nerds in the database
-         Nerd.find(function (err, nerds) {
-
-             // if there is an error retrieving, send the error. 
-             // nothing after res.send(err) will execute
-             if (err)
-                 res.send(err);
-
-             res.json(nerds); // return all nerds in JSON format
-         });
-     });
-
-     // route to handle creating goes here (app.post)
-     // route to handle delete goes here (app.delete)
-
-     // frontend routes =========================================================
-     // route to handle all angular requests
-     app.get('*', function (req, res) {
-         res.sendfile('./public/views/index.html'); // load our public/index.html file
-     });
-
- };
 \ No newline at end of file
+// app/routes.js
+
+// grab the nerd model we just created
+var Nerd = require('./models/nerd');
+
+module.exports = function (app) {
+
+    // server routes ===========================================================
+    // handle things like api calls
+    // authentication routes
+
+    // sample api route
+    app.get('/api/nerds', function (req, res) {
+        // use mongoose to get all nerds in the database
+        Nerd.find(function (err, nerds) {
+            if (err)
+                res.send(err);
+            res.json(nerds);
+        });
+    });
+    app.post('/api/nerds', function (req, res) {
+        Nerd.create({
+            login: req.body.login,
+            role: req.body.role,
+            section: req.body.section,
+        }, function (err, nerd) {
+            if (err)
+                res.send(err);
+            Nerd.find(function (err, nerds) {
+                if (err)
+                    res.send(err);
+                res.json(nerds);
+            });
+        });
+    });
+    app.delete('/api/nerds/:nerd_id', function (req, res) {
+        Nerd.remove({
+            _id: req.params.nerd_id
+        }, function (err, nerd) {
+            if (err)
+                res.send(err);
+            Nerd.find(function (err, nerds) {
+                if (err)
+                    res.send(err);
+                res.json(nerds);
+            });
+        })
+    })
+
+    // route to handle creating goes here (app.post)
+    // route to handle delete goes here (app.delete)
+
+    // frontend routes =========================================================
+    // route to handle all angular requests
+    app.get('*', function (req, res) {
+        res.sendfile('./public/views/index.html'); // load our public/index.html file
+    });
+
+};
 \ No newline at end of file
@@ -5,6 +5,7 @@
     "body-parser": "^1.12.0",
     "express": "^4.12.2",
     "method-override": "^2.3.1",
-    "mongoose": "^3.8.25"
+    "mongoose": "^3.8.25",
+    "morgan": "^1.5.1"
   }
 }
@@ -0,0 +1,9 @@
+html {
+    overflow-y: scroll;
+}
+body {
+    padding-top: 50px;
+}
+#nerd-list {
+	width: 90 %;
+}
 \ No newline at end of file
 // public/js/controllers/NerdCtrl.js
-angular.module('NerdCtrl', []).controller('NerdController', function ($scope) {
+angular.module('NerdCtrl', []).controller('NerdController', function ($scope, $http) {
+    $scope.formData = {};
-    $scope.tagline = 'Nothing beats a pocket protector!';
+    // when landing on the page, get all Nerds and show them
+    $http.get('/api/nerds')
+        .success(function (data) {
+            $scope.nerds = data;
+            console.log(data);
+        })
+        .error(function (data) {
+            console.log('Error: ' + data);
+        });
+
+    // when submitting the add form, send the text to the node API
+    $scope.createNerd = function () {
+        console.log('Adding', $scope.formData);
+        $http.post('/api/nerds', $scope.formData)
+            .success(function (data) {
+                $scope.formData = {}; // clear the form so our user is ready to enter another
+                $scope.nerds = data;
+            })
+            .error(function (data) {
+                console.log('Error: ' + data);
+            });
+    };
+
+    // delete a Nerd after checking it
+    $scope.deleteNerd = function (id) {
+        $http.delete('/api/nerds/' + id)
+            .success(function (data) {
+                $scope.nerds = data;
+                console.log(data);
+            })
+            .error(function (data) {
+                console.log('Error: ' + data);
+            });
+    };
 });
 \ No newline at end of file
@@ -7,9 +7,6 @@ angular.module(&#39;NerdService&#39;, []).factory(&#39;Nerd&#39;, [&#39;$http&#39;,
             get: function () {
                 return $http.get('/api/nerds');
             },
-
-
-            // these will work when more API routes are defined on the Node side of things
             // call to POST and create a new nerd
             create: function (nerdData) {
                 return $http.post('/api/nerds', nerdData);
-<!-- public/index.html -->
 <!doctype html>
-<html lang="en">
+<html lang="fr">
     <head>
-        <meta charset="UTF-8">
+        <!-- META -->
+        <meta charset="utf-8">
         <base href="/">
-        <title>Starter Node and Angular</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Club Informatique de Polytech Lille</title>
         <!-- CSS -->
         <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
         <link rel="stylesheet" href="css/style.css"> <!-- custom styles -->
         <!-- JS -->
+        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
         <script src="libs/angular/angular.min.js"></script>
         <script src="libs/angular-route/angular-route.min.js"></script>
-        <!-- ANGULAR CUSTOM -->
         <script src="js/controllers/MainCtrl.js"></script>
         <script src="js/controllers/NerdCtrl.js"></script>
         <script src="js/services/NerdService.js"></script>
@@ -20,17 +21,14 @@
     </head>
     <body ng-app="sampleApp" ng-controller="NerdController">
         <div class="container">
-            <!-- HEADER -->
             <nav class="navbar navbar-inverse">
                 <div class="navbar-header">
-                    <a class="navbar-brand" href="/">Stencil: Node and Angular</a>
+                    <a class="navbar-brand" href="/">Club Info</a>
                 </div>
-                <!-- LINK TO OUR PAGES. ANGULAR HANDLES THE ROUTING HERE -->
                 <ul class="nav navbar-nav">
                     <li><a href="/nerds">Nerds</a></li>
                 </ul>
             </nav>
-            <!-- ANGULAR DYNAMIC CONTENT -->
             <div ng-view></div>
         </div>
     </body>
-<!-- public/views/nerd.html -->
-
-<div class="jumbotron text-center">
-    <h1>Nerds and Proud</h1>
-
-    <p>{{ tagline }}</p>
-</div>
+<div class="container">
+    <!-- HEADER AND TODO COUNT -->
+    <div class="jumbotron text-center">
+        <h1>Il y a <span class="label label-info">{{ nerds.length }}</span> personnes au Club Info !</h1>
+    </div>
+    <table id="nerd-list">
+        <thead>
+            <tr>
+                <th>Nom</th>
+                <th>Section</th>
+                <th>Rôle</th>
+                <th>Action</th>
+            </tr>
+        </thead>
+        <tbody ng-repeat="nerd in nerds">
+            <tr>
+                <td>{{ nerd.login }}</td>
+                <td>{{ nerd.section }}</td>
+                <td>{{ nerd.role }}</td>
+                <td><button type="button" class="btn btn-danger" aria-label="Expulser" ng-click="deleteNerd(nerd._id)">
+                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
+                    </button>
+                </td>
+            </tr>
+        </tbody>
+        <tfoot id="nerd-form">
+        <tr class="form-group">
+            <td>
+                <input type="text" class="form-control input-lg" placeholder="Login" ng-model="formData.login">
+            </td>
+            <td class="form-inline">
+                <input type="text" class="form-control input-lg" placeholder="Section" ng-model="formData.section"><input type="number" class="form-control input-lg" placeholder="2015" ng-model="formData.promo">
+            </td>
+            <td>
+                <input type="text" class="form-control input-lg" placeholder="Rôle" ng-model="formData.role">
+            </td>
+            <td>
+                <button type="submit" class="btn btn-primary" aria-label="Ajouter" ng-click="createNerd()">
+                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
+                </button>
+            </td>
+        </tr>
+        </tfoot>
+    </table>
+</div>
 \ No newline at end of file
@@ -3,6 +3,8 @@
 // modules =================================================
 var express = require('express');
 var app = express();
+var mongoose = require('mongoose');
+var morgan = require('morgan');
 var bodyParser = require('body-parser');
 var methodOverride = require('method-override');
@@ -16,7 +18,7 @@ var port = process.env.PORT || 8080;
 // connect to our mongoDB database 
 // (uncomment after you enter in your own credentials in config/db.js)
-// mongoose.connect(db.url); 
+mongoose.connect(db.url);
 // get all data/stuff of the body (POST) parameters
 // parse application/json