Chapter 7

api/database.json

@@ -1,15 +1,21 @@
-    {
+{
-        "serviceRequests" : [
+  "serviceRequests": [
     {
       "id": 1,
       "description": "Aut sint voluptatem fugit eius quas molestiae modi.",
       "address": "34445 Bianka Ports",
       "budget": 400,
       "neededBy": "2021-08-27"
+    },
+    {
+      "description": "Install holding tank and pump system for a rural groundwater spring water system",
+      "address": "49320 NW Ruby Lane, Forest Grove, OR, 97116",
+      "budget": "5000",
+      "neededBy": "2021-12-05",
+      "id": 2
     }
   ],
-        
+  "employeeTable": [
-        "employeeTable" : [
     {
       "id": 1,
       "empName": "Merle Baumgardner"
@@ -18,18 +24,14 @@
       "id": 2,
       "empName": "Maude Baumgardner"
     }
-
   ],
-        "jobTable" : [
+  "jobTable": [
     {
       "id": null,
       "serviceRequestId": 1,
       "employeeId": 1,
       "jobStatusComplete": false
     },
-            {
+    {}
-   
-           }
-           
   ]
 }

scripts/Requests.js

@@ -1,12 +1,15 @@
 import { getRequests } from "./dataAccess.js"
 
+// requests exports the requests stored in application state as requests passed in as an ordered list wrapped inside an unordered list
 export const Requests = () => {
     const requests = getRequests()
-
+    const convertRequestToListElement = (requests) => {
+            return `<li>${requests.description}</li>`
+    }
     let html = `
         <ul>
             ${
-                requests.map().join("")
+                requests.map(convertRequestToListElement).join("")
             } 
         </ul>
     `

scripts/ServiceForm.js

@@ -0,0 +1,49 @@
+import { sendRequest } from "./dataAccess.js";
+
+export const ServiceForm = () => {
+    let html = `
+        <div class="field">
+            <label class="label" for="serviceDescription">Description</label>
+            <input type="text" name="serviceDescription" class="input" />
+        </div>
+        <div class="field">
+            <label class="label" for="serviceAddress">Address</label>
+            <input type="text" name="serviceAddress" class="input" />
+        </div>
+        <div class="field">
+            <label class="label" for="serviceBudget">Budget</label>
+            <input type="number" name="serviceBudget" class="input" />
+        </div>
+        <div class="field">
+            <label class="label" for="serviceDate">Date needed</label>
+            <input type="date" name="serviceDate" class="input" />
+        </div>
+
+        <button class="button" id="submitRequest">Submit Request</button>
+    `
+
+    return html
+}
+
+const mainContainer = document.querySelector("#container")
+
+mainContainer.addEventListener("click", clickEvent => {
+    if (clickEvent.target.id === "submitRequest") {
+        // Get what the user typed into the form fields
+        const userDescription = document.querySelector("input[name='serviceDescription']").value
+        const userAddress = document.querySelector("input[name='serviceAddress']").value
+        const userBudget = document.querySelector("input[name='serviceBudget']").value
+        const userDate = document.querySelector("input[name='serviceDate']").value
+
+        // Make an object out of the user input
+        const dataToSendToAPI = {
+            description: userDescription,
+            address: userAddress,
+            budget: userBudget,
+            neededBy: userDate
+        }
+
+        // Send the data to the API for permanent storage
+        sendRequest(dataToSendToAPI)
+    }
+})

scripts/SinkRepair.js

@@ -1,10 +1,11 @@
+import { ServiceForm } from "./ServiceForm.js"
 import { Requests } from "./Requests.js"
 
-
 export const SinkRepair = () => {
     return `
         <h1>Maude and Merle's Sink Repair</h1>
         <section class="serviceForm">
+            ${ServiceForm()}
         </section>
 
         <section class="serviceRequests">

scripts/dataAccess.js

@@ -38,6 +38,38 @@ export const fetchEmpTable = () => {
             }
         )
 }
+export const sendRequest = (userServiceRequest) => {
+    const fetchOptions = {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify(userServiceRequest)
+    }
+
+
+    return fetch(`${API}/serviceRequests`, fetchOptions)
+        .then(response => response.json())
+        .then(() => {
+
+        })
+}
+
+return fetch(`${API}/requests`, fetchOptions)
+.then(response => response.json())
+.then(() => {
+    mainContainer.dispatchEvent(new CustomEvent("stateChanged"))
+})
+
+mainContainer.addEventListener(
+    "stateChanged",
+    customEvent => {
+        render()
+    }
+)
+
+
+
 export const getRequests = () => {
     return applicationState.serviceRequests.map(serviceRequest => ({...serviceRequest}))
 }

styles/button.css

@@ -0,0 +1,4 @@
+.button {
+    background-color:#6CD9FA;
+    color: #000000;
+}

styles/flex.css

@@ -0,0 +1,4 @@
+.field {
+    display: flex;
+    flex-direction: column;
+}

styles/main.css

@@ -0,0 +1,3 @@
+@import "flex.css";
+
+@import "button.css";