Week 7 Assignment 4

models/Drone.model.js

@@ -1 +1,10 @@
-// Iteration #1
+// Iteration #1
+const {Schema, model} = require('mongoose');
+const droneSchema = new Schema( {
+    name: String,
+    propellers: Number,
+    maxSpeed: Number,
+});
+
+const drone = model("drones", droneSchema);
+module.exports = drone;

package.json

@@ -11,7 +11,7 @@
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
     "hbs": "^4.1.1",
-    "mongoose": "^6.1.2",
+    "mongoose": "^6.12.5",
     "morgan": "^1.10.0",
     "serve-favicon": "^2.5.0"
   },

routes/drones.js

@@ -5,32 +5,62 @@ const router = express.Router();
 
 router.get('/drones', (req, res, next) => {
   // Iteration #2: List the drones
-  // ... your code here
+  droneModel.find()
+  .then((drones) => {
+    res.render("drones/list.hbs", {drones})
+  }).catch((err) => {
+    console.log('Failed!')
+  });
 });
 
 router.get('/drones/create', (req, res, next) => {
   // Iteration #3: Add a new drone
-  // ... your code here
+  res.render("drones/create-form.hbs")
 });
 
 router.post('/drones/create', (req, res, next) => {
   // Iteration #3: Add a new drone
-  // ... your code here
+  const {name,propellers,maxSpeed} = req.body
+  droneModel.create({name,propellers,maxSpeed})
+  .then((result) => {
+    res.redirect("/drones")
+  }).catch((err) => {
+    console.log('Failed!')
+  });
 });
 
 router.get('/drones/:id/edit', (req, res, next) => {
   // Iteration #4: Update the drone
-  // ... your code here
+  const {id} = req.params;
+  droneModel.findById(id)
+  .then((drones) => {
+    res.render('drones/update-form.hbs',{drones})
+  }).catch((err) => {
+    console.log('Failed!')
+  });
 });
 
 router.post('/drones/:id/edit', (req, res, next) => {
   // Iteration #4: Update the drone
-  // ... your code here
+  const {id} = req.params
+  const {name,propellers,maxSpeed} = req.body
+  droneModel.findByIdAndUpdate(id, {name,propellers,maxSpeed})
+  .then((result) => {
+    res.redirect('/drones')
+  }).catch((err) => {
+    console.log('Failed!')
+  });
 });
 
 router.post('/drones/:id/delete', (req, res, next) => {
   // Iteration #5: Delete the drone
-  // ... your code here
+  const {id} = req.params
+  droneModel.findByIdAndDelete(id)
+  .then((result) => {
+    res.redirect('/drones')
+  }).catch((err) => {
+    console.log('Failed!')
+  });
 });
 
 module.exports = router;

seeds/drones.seed.js

@@ -1 +1,21 @@
 // Iteration #1
+require ('../db')
+
+const mongoose = require('mongoose');
+const droneModel = require ('../models/Drone.model')
+
+const dronesData = [
+    { name: "Creeper XL 500", propellers: 3, maxSpeed: 12 },
+    { name: "Racer 57", propellers: 4, maxSpeed: 20 },
+    { name: "Courier 3000i", propellers: 6, maxSpeed: 18 }
+    ];
+
+droneModel.create(dronesData)
+.then((result) => {
+    console.log('Success!')
+}).catch((err) => {
+    console.log('Failed!',err)   
+})
+.finally(() => {
+    mongoose.connection.close();
+});

views/drones/create-form.hbs

@@ -1 +1,17 @@
-<h2>Create a new drone</h2>
+<h2>Create a new drone</h2>
+<form action="/drones/create" method="post">
+  <div class="mb-3">
+    <label for="name" class="form-label">Name</label>
+    <input name="name" type="text" class="form-control" id="name">
+  </div>
+  <div class="mb-3">
+    <label for="propellers" class="form-label">Propellers</label>
+    <input name="propellers" type="text" class="form-control" id="propellers">
+  </div>
+  <div class="mb-3">
+    <label for="maxSpeed" class="form-label">Max speed</label>
+    <input name="maxSpeed" type="text" class="form-control" id="maxSpeed">
+  </div>
+  <button type="submit" class="btn btn-primary">Submit</button>
+  <button type="reset" class="btn btn-default pull-right" onclick="history.back()">Cancel</button>
+</form>

views/drones/list.hbs

@@ -1 +1,17 @@
-<h2>Available drones</h2>
+<h2>Available drones</h2>
+<br>
+{{#each drones}}
+<div class="card" style="width: 18rem;">
+  <div class="card-body">
+    <h5 class="card-title">{{name}}</h5>
+  </div>
+  <ul class="list-group list-group-flush">
+    <li class="list-group-item">No. of propellers {{propellers}}</li>
+    <li class="list-group-item">Max speed {{maxSpeed}}</li>
+  </ul>
+  <div class="card-body">
+    <a  href="/drones/{{_id}}/edit"  class="card-link">Update</a>
+    <a  href="/drones/{{_id}}/delete"  class="card-link">Delete</a>
+  </div>
+</div>
+{{/each}}

views/drones/update-form.hbs

@@ -1 +1,18 @@
-<h2>Update the drone</h2>
+<h2>Update the drone</h2>
+<br>
+<form action="/drones/{{drones._id}}/edit" method="post">
+  <div class="mb-3">
+    <label for="name" class="form-label">Name</label>
+    <input name="name" class="form-control" id="name" value="{{drones.name}}" />
+  </div>
+  <div class="mb-3">
+    <label for="propellers" class="form-label">Propellers</label>
+    <input name="propellers" type="text" class="form-control" id="propellers" value="{{drones.propellers}}"/>
+  </div>
+  <div class="mb-3">
+    <label for="maxSpeed" class="form-label">Max Speed</label>
+    <input name="maxSpeed" type="text" class="form-control" id="maxSpeed" value="{{drones.maxSpeed}}"/>
+  </div>
+  <button type="submit" class="btn btn-primary">Submit</button>
+  <button type="reset" class="btn btn-default pull-right" onclick="history.back()">Cancel</button>
+</form>

views/layout.hbs

@@ -7,12 +7,28 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>{{title}}</title>
     <link rel="stylesheet" href="/stylesheets/style.css" />
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+    <!-- JavaScript Bundle with Popper -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
+
+    <nav class="navbar navbar-expand-lg bg-light">
+      <div class="container-fluid">
+        <a class="navbar-brand" href="/drones">Drones</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+          <div class="navbar-nav">
+            <a class="nav-link active" aria-current="page" href="/drones">Available Drones</a>
+            <a class="nav-link" href="/drones/create" >Add a Drone</a>
+          </div>
+        </div>
+      </div>
+    </nav>
   </head>
 
   <body>
-
     {{{body}}}
-
     <script src="/js/script.js"></script>
   </body>