Detailpagina

.gitignore

@@ -0,0 +1,7 @@
+.DS_Store
+logs
+*.logs
+npm-debug.log*
+node_modules
+.npm
+.env

.prettierignore

@@ -0,0 +1 @@
+views/

README.md

@@ -1,6 +1,6 @@
 > _Fork_ deze leertaak en ga aan de slag. Onderstaande outline ga je gedurende deze taak in jouw eigen GitHub omgeving uitwerken. De instructie vind je in: [docs/INSTRUCTIONS.md](docs/INSTRUCTIONS.md)
 
-# Titel
+# Visual Thinking in het HBO
 <!-- Geef je project een titel en schrijf in één zin wat het is -->
 
 ## Inhoudsopgave
@@ -23,9 +23,31 @@
 ## Kenmerken
 <!-- Bij Kenmerken staat welke technieken zijn gebruikt en hoe. Wat is de HTML structuur? Wat zijn de belangrijkste dingen in CSS? Wat is er met JS gedaan en hoe? Misschien heb je iets met NodeJS gedaan, of heb je een framwork of library gebruikt? -->
 
+### tools 🍔
+- figma
+- goodnotes
+- visuel studio code
+- polyplane
+
+### gebruikte technieken 🍟
+- ejs
+- javascript
+- node.js
+- express
+- css
+
+
 ## Installatie
 <!-- Bij Instalatie staat hoe een andere developer aan jouw repo kan werken -->
 
+1. Om in de repository te werken en aanpassingen te maken moet je node.js downloaden versie: .
+2. Clone of download deze respository.
+3. Open hem in je `code-editor`.
+4. open de `terminal` en type `npm install`.
+5. Daarna door gerbruik van `npm start` krijg je een localhost link waar je de code live 
+6. gebruik `gitignore` voor de modules zodat het niet allemaal op github komt te staan.
+7. Live zetten van je project kan met behulp van cyclic.
+
 ## Bronnen
 
 ## Licentie

index.js

@@ -0,0 +1,144 @@
+// Import necesssary express and ejs modules
+import { render } from "ejs";
+import express, { response } from "express";
+
+// Create a new express instance
+const app = express();
+
+// Assign URL of API to variable
+const url = "https://api.visualthinking.fdnd.nl/api/v1";
+
+// Make EJS the selected view engine for our express app, and assign the views directory
+app.set("view engine", "ejs");
+app.set("views", "./views");
+
+// Let express know we want to use JSON and URL-encoded request bodies
+app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
+
+// Use map "public" to serve static files
+app.use(express.static("public"));
+
+// --- Rendering the index page: ---
+app.get("/", (request, response) => {
+  response.render("index");
+});
+
+// --- Rendering the overview page: ---
+// Define an HTTP GET route for the path '/overviewpage'
+app.get("/overviewpage", (request, response) => {
+  // Log the value of the 'methods' parameter from the request's query string
+  console.log(request.query.methods);
+
+  // Define the URL to fetch the data from
+  const methodsUrl = url + "/methods?first=100";
+
+  // Use the fetchJson function to retrieve data from the specified URL
+  // Once the data is retrieved, render the 'overviewpage' view with the data
+  fetchJson(methodsUrl).then((data) => {
+    response.render("overviewpage", data);
+  });
+});
+
+// --- Rendering the detail page: ---
+// Define an HTTP GET route for the path '/detailpage/:slug', where ':slug' is a URL parameter
+app.get("/detailpage/:slug", (request, response) => {
+  // Construct the URL to fetch the detail page data from based on the URL parameter ':slug'
+  let detailPageUrl = url + "/method/" + request.params.slug;
+  // Construct the URL to fetch the comments page data from based on the query parameter 'id'
+  let commentsPageUrl = url + "/comments/?id=" + request.query.id;
+
+  // Log the constructed URL for the comments page
+  // console.log(commentsPageUrl);
+
+  const id = request.query.id;
+
+  // Use the fetchJson function to retrieve the data for the detail page
+  fetchJson(detailPageUrl).then((data) => {
+    // Use the fetchJson function to retrieve the data for the comments page
+    fetchJson(commentsPageUrl).then((data2) => {
+      // Combine the data from both responses into a single object
+      const combinedData = {
+        method: data.method, // Data from the detail page
+        comments: data2.comments, // Data from the comments page
+      };
+
+      // Log the combined data
+      // console.log(combinedData);
+
+      // Render the 'detailpage' view with the combined data
+      response.render("detailpage", combinedData);
+    });
+  });
+});
+
+// --- Handling post requests for the comments: ---
+// Define an HTTP POST route for the path '/detailpagina/:slug', where ':slug' is a URL parameter
+app.post("/detailpage/:slug", (request, response) => {
+  // Define the URLS we will use to post the comment data to
+  const baseurl = "https://api.visualthinking.fdnd.nl/api/v1/";
+  const url = `${baseurl}comments`;
+  // Construct the URL to fetch the comments page data from based on the query parameter 'id'
+  const commentUrl = `${baseurl}comments` + "?id=" + request.query.id;
+
+  // Log the request body (the data submitted by the user)
+  console.log("verstuurd:");
+  console.log(request.body);
+
+  // Use the postJson function to post the comment data to the specified URL
+  postJson(url, request.body).then((data) => {
+    // Create a copy of the request body
+    let newComment = { ...request.body };
+
+    // Log the response data from the API
+    console.log("ontvangen:");
+    console.log(data);
+
+    // Check if the comment was successfully posted
+    if (data.success) {
+      // If the comment was successfully posted, redirect to the detail page with a success message
+      response.redirect(
+        "/detailpage/" + request.params.slug + "?methodPosted=true"
+      );
+    } else {
+      // If the comment was not successfully posted, redirect to the detail page with an error message
+      response.redirect(
+        "/detailpage/" + request.params.slug + "?methodPosted=false"
+      );
+    }
+  });
+});
+
+// Stel het poortnummer in waar express op gaat luisteren
+app.set("port", process.env.PORT || 8000);
+
+// Start express op, haal het ingestelde poortnummer op
+app.listen(app.get("port"), function () {
+  // Toon een bericht in de console en geef het poortnummer door
+  console.log(`Application started on http://localhost:${app.get("port")}`);
+});
+
+/**
+ * Wraps the fetch api and returns the response body parsed through json
+ * @param {*} url the api endpoint to address
+ * @returns the json response from the api endpoint
+ */
+
+async function fetchJson(url) {
+  return await fetch(url)
+    .then((response) => response.json())
+    .catch((error) => error);
+}
+
+// post json
+
+export async function postJson(url, body) {
+  return await fetch(url, {
+    method: "post",
+    body: JSON.stringify(body),
+    headers: { "Content-Type": "application/json" },
+  })
+    .then((response) => response.json())
+    .catch((error) => error);
+}
+