rendu td4 (modification et suppression d'un workshop)

.eslintrc.js

@@ -0,0 +1,29 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "commonjs": true,
+        "es2021": true
+    },
+    "extends": "eslint:recommended",
+    "parserOptions": {
+        "ecmaVersion": 12
+    },
+    "rules": {
+        "indent": [
+            "error",
+            4
+        ],
+        "linebreak-style": [
+            "error",
+            "windows"
+        ],
+        "quotes": [
+            "error",
+            "double"
+        ],
+        "semi": [
+            "error",
+            "always"
+        ]
+    }
+};

backend/controllers/workshop.js

@@ -0,0 +1,65 @@
+const ejs = require("ejs");
+
+const InMemoryWorkshop = require("../models/inMemoryWorkshop");
+
+exports.createNewWorkshop = function (req, res) {
+    const name = req.body.name;
+    const description = req.body.description;
+    InMemoryWorkshop.addWorkshop(name, description).then(() => {
+        InMemoryWorkshop.getWorkshopList()
+            .then(() => {
+                res.redirect("/workshops");
+            });
+    })
+        .catch(e =>res.send(e.message));
+};
+
+exports.printWorkshops = function (req, res) {
+    InMemoryWorkshop.getWorkshopList()
+        .then(workshops => {
+            res.render("index", {
+                workshops: workshops
+            });
+        });
+};
+
+exports.getCreateWorkshopView = function (req, res) {
+    res.render("workshop");
+};
+
+exports.removeWorkshop = function (req, res) {
+    const name = req.params.name;
+    InMemoryWorkshop.removeWorkshopByName(name)
+        .then(() => {
+            res.redirect("/workshops");
+        })
+        .catch(error => res.status(400).send(error.message));
+};
+
+exports.updateWorkshop = function(req, res) {
+    InMemoryWorkshop.updateWorkshop(req.params.name, req.body.name, req.body.description)
+        .then(() => {
+            res.redirect("/workshops");
+        })
+        .catch(error => res.status(400).send(error.message));
+};
+
+exports.getUpdateWorkshopView = function (req, res) {
+    const name = req.params.name;
+    InMemoryWorkshop.getWorkshopByName(name)
+        .then(workshop => {
+            res.render("updateWhorkshop", { 
+                workshop: workshop
+            });
+        })
+        .catch(error => res.status(400).send(error.message + "ici"));
+};
+
+exports.getWorkshopViewByName = function (req, res) {
+    const workshopName = req.params.name;
+    InMemoryWorkshop.getWorkshopByName(workshopName)
+        .then(workshop => {
+            res.render("ejs/workshop", workshop);
+        })
+        .catch(e =>ejs.send(e.message));
+};

backend/models/inMemoryWorkshop.js

@@ -0,0 +1,77 @@
+let inMemoryWorkshop = [];
+inMemoryWorkshop.push({name: "w1", description: "d1"});
+inMemoryWorkshop.push({name: "w2", description: "d2"});
+inMemoryWorkshop.push({name: "w3", description: "d3"});
+
+
+function getWorkshopList() {
+    return new Promise((resolve, ) => {
+        resolve(inMemoryWorkshop);
+    });
+}
+
+function getWorkshopByName(name) {
+    return new Promise((resolve, reject) => {
+        if (!name) {
+            reject(new Error("name parameter is required"));
+        }
+        resolve(inMemoryWorkshop.find(workshop => workshop.name === name));
+    });
+}
+
+function addWorkshop(name, description) {
+    return new Promise((resolve, reject) => {
+        if (!name) {
+            reject(new Error("Workshop name required"));
+        }
+        if (!description) {
+            reject(new Error("Workshop description required"));
+        }
+        inMemoryWorkshop.push({
+            name,
+            description
+        });
+        resolve();
+    });
+}
+
+function removeWorkshopByName(name) {
+    return new Promise((resolve, reject) => {
+        if (!name) {
+            reject(new Error("workshop name required"));
+        }
+        let i=0;
+        for (i=0; i<inMemoryWorkshop.length; i++) {
+            if (name === inMemoryWorkshop[i].name) {
+                inMemoryWorkshop.splice(i, 1);
+                break;
+            }
+        }
+        resolve(inMemoryWorkshop);
+    });
+}
+
+function updateWorkshop(name, newName, newDescription) {
+    console.log("element à modifié:" + name);
+    return new Promise((resolve, reject) => {
+        if (!name)
+            reject(new Error("name is required for updating workshop"));
+        for (let i=0; i<inMemoryWorkshop.length; i++) {
+            if (name === inMemoryWorkshop[i].name) {
+                inMemoryWorkshop[i].name = newName;
+                inMemoryWorkshop[i].description = newDescription;
+                console.log("element modifié");
+                break;
+            }
+        }
+        resolve();
+    });
+}
+
+module.exports = {
+    getWorkshopList,
+    getWorkshopByName,
+    addWorkshop,
+    removeWorkshopByName,
+    updateWorkshop
+};

backend/routes/workshop.js

@@ -0,0 +1,15 @@
+const express = require("express");
+
+const workshopController = require("../controllers/workshop");
+
+const router = express.Router();
+
+router.get("/", workshopController.printWorkshops);
+router.get("/workshop", workshopController.getCreateWorkshopView);
+router.post("/workshop", workshopController.createNewWorkshop);
+router.get("/workshop/:name", workshopController.getWorkshopViewByName);
+router.post("/remove-workshop/:name", workshopController.removeWorkshop);
+router.post("/update-workshop/:name", workshopController.updateWorkshop);
+router.get("/update-workshop/:name", workshopController.getUpdateWorkshopView);
+
+module.exports = router;

documentationDev.md

@@ -0,0 +1,9 @@
+Pour ameliorer l'architecture de l'application, nous l'avons divisé en backend et en frontend:
+    -index.js: est le point de depart de l'application (nottement le lancement du serveur node)
+    -forntend: le côté frontend de l'application contient le code css et le code html
+    -backend:
+        -models: contiendra les moodèles de l'application (nottamment les ojbets qui devront être enregistrés dans une base de données).
+        -controllers: contient la logique utilisé au niveau des routes de l'application
+        -routes: contiendra toutes les routes de l'application
+
+PS: Cette architecture n'a vraiment de l'importance que dans le mesure où l'application devrait évolué. Actuellement les certains repertoires ne contiennent qu'un fichier comme le repertoire models mais cela pourrait evolué en ajoutant par exemple des models pour les enseignants, des laboratoires ...

frontend/ejs/head.ejs

@@ -0,0 +1,6 @@
+<meta charset="UTF-8">
+<title>Workshops</title>
+
+<!-- CSS (load bootstrap from a CDN) -->
+<!-- <link rel="stylesheet" href="bootstrap.min.css"> -->
+<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

frontend/ejs/index.ejs

@@ -0,0 +1,36 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <% include ./head %>
+</head>
+<body class="container">
+
+<div class="jumbotron">
+    <h1>Workshops</h1>
+    <p>here is the list of workshop</p>
+</div>
+
+<a type="button" href="/workshops/workshop" class="btn btn-success btn-lg">Create new workshop</a>
+
+<ul class="list-unstyled">
+<% workshops.forEach(function(workshop) { %>
+    <li class="media my-4">
+        <div class="media-body">
+            <h5 class="mt-0 mb-1"><%= workshop.name %></h5>
+            <%= workshop.description %>        
+        </div>        
+        <a type="button" class="btn btn-primary" href="/workshops/update-workshop/<%= workshop.name %>">Update</a>
+        <form action="/workshops/remove-workshop/<%= workshop.name %>" method="post">
+            <button type="submit" class="btn btn-danger">Delete</button>
+        </form>
+    </li>
+<% }); %>
+</ul>
+
+<footer>
+    <% include ./footer %>
+</footer>
+
+</body>
+</html>

frontend/ejs/updateWhorkshop.ejs

@@ -0,0 +1,27 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <% include ./head %>
+</head>
+<body class="container">
+
+<form action="/workshops/update-workshop/<%= workshop.name %>" method="post">
+    <div class="form-group">
+        <label for="name">Name</label>
+        <input type="text" name="name" class="form-control" id="name" value="<%= workshop.name %>" required>
+    </div>
+    <div class="form-group">
+        <label for="description">Description</label>
+        <input type="text" name="description" class="form-control" id="description" value="<%= workshop.description %>" required>
+    </div>
+    <button type="submit" class="btn btn-primary">Update</button>
+    <a type="button" class="btn btn-secondary" href="/workshops">Cancel</a>
+</form>
+
+<footer>
+    <% include ./footer %>
+</footer>
+
+</body>
+</html>

ejs/workshop.ejs → frontend/ejs/workshop.ejs

@@ -6,7 +6,7 @@
 </head>
 <body class="container">
 
-<form action="/workshop" method="post">
+<form action="/workshops/workshop" method="post">
     <div class="form-group">
         <label for="name">Name</label>
         <input type="text" name="name" class="form-control" id="name"  placeholder="Workshop Name" required>
@@ -16,7 +16,7 @@
         <input type="text" name="description" class="form-control" id="description" placeholder="Give a description for your workshop" required>
     </div>
     <button type="submit" class="btn btn-primary">Save</button>
-    <a type="button" class="btn btn-secondary" href="/">Cancel</a>
+    <a type="button" class="btn btn-secondary" href="/workshops">Cancel</a>
 </form>
 
 <footer>

index.js

@@ -0,0 +1,23 @@
+const express = require("express");
+const path = require("path");
+
+const workshopRoutes = require("./backend/routes/workshop");
+
+var bodyParser = require("body-parser");
+const app = express();
+
+app.use(bodyParser.urlencoded({ extended: false }));
+
+// set the view engine to ejs
+app.set("view engine", "ejs");
+// eslint-disable-next-line no-undef
+app.set("views", path.join(__dirname, "./frontend", "/ejs"));
+// eslint-disable-next-line no-undef
+app.use(express.static(path.join(__dirname , "./frontend", "css")));
+
+app.use("/", workshopRoutes);
+app.use("/workshops", workshopRoutes);
+
+app.listen(3000, function () {
+    console.log("Workshop app listening on port 3000!");
+});