From 297952bac88ecac5ef41ed57974eb6f5d0f7ac26 Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Thu, 4 Nov 2021 10:30:22 -0500 Subject: [PATCH 1/6] added barebones code --- api/database.json | 27 ++++++++++++--------------- scripts/Requests.js | 15 +++++++++++++++ scripts/SinkRepair.js | 15 +++++++++++++++ scripts/dataAccess.js | 18 +++++++++++++++++- scripts/database.js | 28 ---------------------------- scripts/main.js | 16 ++++++++++++++-- 6 files changed, 73 insertions(+), 46 deletions(-) create mode 100644 scripts/Requests.js create mode 100644 scripts/SinkRepair.js delete mode 100644 scripts/database.js diff --git a/api/database.json b/api/database.json index adebd92..6be5b7f 100644 --- a/api/database.json +++ b/api/database.json @@ -21,20 +21,17 @@ "serviceRequestId": 1, "employeeId": 1, "jobStatusComplete": false - } - - ], - - "requests": [ - { + }, { - "id": 1, - "description": "Aut sint voluptatem fugit eius quas molestiae modi.", - "address": "34445 Bianka Ports", - "budget": 400, - "neededBy": "2021-08-27" - } - - } - ] + + "id": 1, + "description": "Aut sint voluptatem fugit eius quas molestiae modi.", + "address": "34445 Bianka Ports", + "budget": 400, + "neededBy": "2021-08-27" + + + } + + ] } diff --git a/scripts/Requests.js b/scripts/Requests.js new file mode 100644 index 0000000..d5513b6 --- /dev/null +++ b/scripts/Requests.js @@ -0,0 +1,15 @@ +import { getRequests } from "./dataAccess.js" + +export const Requests = () => { + const requests = getRequests() + + let html = ` + + ` + + return html +} diff --git a/scripts/SinkRepair.js b/scripts/SinkRepair.js new file mode 100644 index 0000000..1fb8e54 --- /dev/null +++ b/scripts/SinkRepair.js @@ -0,0 +1,15 @@ +import { Requests } from "./Requests.js" + + +export const SinkRepair = () => { + return ` +

Maude and Merle's Sink Repair

+
+
+ +
+

Service Requests

+ ${Requests()} +
+ ` +} diff --git a/scripts/dataAccess.js b/scripts/dataAccess.js index a9d1936..178b20a 100644 --- a/scripts/dataAccess.js +++ b/scripts/dataAccess.js @@ -15,4 +15,20 @@ export const getRequests = () => { return database.serviceRequest.map(serviceRequest => ({...serviceRequest})) } -// Need copies of permanent state set as empty arrays, matching the keys in your JSON file \ No newline at end of file +export const getEmployees = () => { + return database.employeeTable.map(employee => ({...employee})) +} + +export const getJobTable = () => { + return database.jobTable.map(job => ({...job})) +} + +// Need copies of permanent state set as empty arrays, matching the keys in your JSON file + + +const serviceRequest = [] +const employeeTable = [] +const jobTable = [] +const requests = [] + +const appState = [] \ No newline at end of file diff --git a/scripts/database.js b/scripts/database.js deleted file mode 100644 index ad48617..0000000 --- a/scripts/database.js +++ /dev/null @@ -1,28 +0,0 @@ -const database = { - // all data is presently seed data - serviceRequest : [ - { - id: null, - description: "some description", - serviceAddress: "some address", - spendingLimit: 9999, - jobDeadline: "01/01/2022" - } -], - - employeeTable : [ - { - id: null, - empName: "John Doe" - } - ], - jobTable : [ - { - id: null, - serviceRequestId: 1, - employeeId: 1, - jobStatusComplete: false - }, - ], - transientState: {} -} \ No newline at end of file diff --git a/scripts/main.js b/scripts/main.js index 4416ac7..d4310c4 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -1,3 +1,15 @@ -import { getRequests } from "./dataAccess.js" +import { fetchRequests } from "./dataAccess.js" +import { SinkRepair } from "./SinkRepair.js" -const whatever = getRequests() \ No newline at end of file + +const mainContainer = document.querySelector("#container") + +const render = () => { + fetchRequests().then( + () => { + mainContainer.innerHTML = SinkRepair() + } + ) +} + +render() From 5d167d884f4a59678ec8e9ed89cc46e98e7d3fc9 Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Thu, 4 Nov 2021 13:39:11 -0500 Subject: [PATCH 2/6] saving current progress --- api/database.json | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/api/database.json b/api/database.json index 6be5b7f..1996035 100644 --- a/api/database.json +++ b/api/database.json @@ -11,9 +11,14 @@ "employeeTable" : [ { - "id": null, - "empName": "John Doe" + "id": 1, + "empName": "Merle Baumgardner" + }, + { + "id": 2, + "empName": "Maude Baumgardner" } + ], "jobTable" : [ { From ed48714a4dab60f1e18c4d76d2e373525a8054fe Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Thu, 4 Nov 2021 13:56:21 -0500 Subject: [PATCH 3/6] created fetch functions --- api/database.json | 2 +- scripts/dataAccess.js | 25 ++++++++++++++++++------- 2 files changed, 19 insertions(+), 8 deletions(-) diff --git a/api/database.json b/api/database.json index 1996035..2e7b394 100644 --- a/api/database.json +++ b/api/database.json @@ -1,5 +1,5 @@ { - "serviceRequest" : [ + "serviceRequests" : [ { "id": null, "description": "some description", diff --git a/scripts/dataAccess.js b/scripts/dataAccess.js index 178b20a..25d700d 100644 --- a/scripts/dataAccess.js +++ b/scripts/dataAccess.js @@ -1,15 +1,25 @@ const API = "http://localhost:8088" export const fetchRequests = () => { - return fetch(`${API}/requests`) + return fetch(`${API}/serviceRequests`) .then(response => response.json()) .then( (serviceRequests) => { - // Store the external state in application state + // Store the external state of in application state applicationState.requests = serviceRequests } ) } +export const fetchJobTable = () => { + return fetch(`${API}/jobTable`) + .then(response => response.json()) + .then( + (jobTable) => { + // Stores the external state of jobTable in application state + applicationState.requests = jobTable + } + ) +} export const getRequests = () => { return database.serviceRequest.map(serviceRequest => ({...serviceRequest})) @@ -26,9 +36,10 @@ export const getJobTable = () => { // Need copies of permanent state set as empty arrays, matching the keys in your JSON file -const serviceRequest = [] -const employeeTable = [] -const jobTable = [] -const requests = [] +export const serviceRequest = [] +export const employeeTable = [] +export const jobTable = [] +export const requests = [] -const appState = [] \ No newline at end of file +// misc application state, if needed? +export const appState = [] \ No newline at end of file From b3b08a1a1d8482a5b42f75c02bfb1f8f2e6b32a8 Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Thu, 4 Nov 2021 14:32:23 -0500 Subject: [PATCH 4/6] adjusting data access for proper application state object --- scripts/dataAccess.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/scripts/dataAccess.js b/scripts/dataAccess.js index 25d700d..5360fa7 100644 --- a/scripts/dataAccess.js +++ b/scripts/dataAccess.js @@ -1,5 +1,7 @@ const API = "http://localhost:8088" +const applicationState = {} + export const fetchRequests = () => { return fetch(`${API}/serviceRequests`) .then(response => response.json()) @@ -10,6 +12,7 @@ export const fetchRequests = () => { } ) } + export const fetchJobTable = () => { return fetch(`${API}/jobTable`) .then(response => response.json()) From bac27f8f0083b5b8a729f6bbd034ac4add020917 Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Thu, 4 Nov 2021 15:14:09 -0500 Subject: [PATCH 5/6] completed up to chapter 4 --- api/database.json | 19 ++++++------------- scripts/dataAccess.js | 37 +++++++++++++++++++++---------------- 2 files changed, 27 insertions(+), 29 deletions(-) diff --git a/api/database.json b/api/database.json index 2e7b394..13e33ac 100644 --- a/api/database.json +++ b/api/database.json @@ -1,11 +1,11 @@ { "serviceRequests" : [ - { - "id": null, - "description": "some description", - "serviceAddress": "some address", - "spendingLimit": 9999, - "jobDeadline": "01/01/2022" + { + "id": 1, + "description": "Aut sint voluptatem fugit eius quas molestiae modi.", + "address": "34445 Bianka Ports", + "budget": 400, + "neededBy": "2021-08-27" } ], @@ -28,14 +28,7 @@ "jobStatusComplete": false }, { - - "id": 1, - "description": "Aut sint voluptatem fugit eius quas molestiae modi.", - "address": "34445 Bianka Ports", - "budget": 400, - "neededBy": "2021-08-27" - } ] diff --git a/scripts/dataAccess.js b/scripts/dataAccess.js index 5360fa7..0a2da15 100644 --- a/scripts/dataAccess.js +++ b/scripts/dataAccess.js @@ -1,6 +1,10 @@ const API = "http://localhost:8088" -const applicationState = {} +const applicationState = { + serviceRequests: [], + employeeTable:[], + jobTable: [] +} export const fetchRequests = () => { return fetch(`${API}/serviceRequests`) @@ -8,7 +12,7 @@ export const fetchRequests = () => { .then( (serviceRequests) => { // Store the external state of in application state - applicationState.requests = serviceRequests + applicationState.serviceRequests = serviceRequests } ) } @@ -19,30 +23,31 @@ export const fetchJobTable = () => { .then( (jobTable) => { // Stores the external state of jobTable in application state - applicationState.requests = jobTable + applicationState.jobTable = jobTable } ) } +export const fetchEmpTable = () => { + return fetch(`${API}/employeeTable`) + .then(response => response.json()) + .then( + (employeeTable) => { + // Stores the external state of jobTable in application state + applicationState.employeeTable = employeeTable + } + ) +} export const getRequests = () => { - return database.serviceRequest.map(serviceRequest => ({...serviceRequest})) + return applicationState.serviceRequests.map(serviceRequest => ({...serviceRequest})) } export const getEmployees = () => { - return database.employeeTable.map(employee => ({...employee})) + return applicationState.employeeTable.map(employee => ({...employee})) } export const getJobTable = () => { - return database.jobTable.map(job => ({...job})) + return applicationState.jobTable.map(job => ({...job})) } -// Need copies of permanent state set as empty arrays, matching the keys in your JSON file - - -export const serviceRequest = [] -export const employeeTable = [] -export const jobTable = [] -export const requests = [] - -// misc application state, if needed? -export const appState = [] \ No newline at end of file +// Need copies of permanent state set as empty arrays, matching the keys in your JSON file \ No newline at end of file From a8e0e5f5707bc02404bab09189256e37e13fb979 Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Fri, 5 Nov 2021 14:48:44 -0500 Subject: [PATCH 6/6] Chapter 7 --- api/database.json | 70 ++++++++++++++++++++++-------------------- scripts/Requests.js | 9 ++++-- scripts/ServiceForm.js | 49 +++++++++++++++++++++++++++++ scripts/SinkRepair.js | 3 +- scripts/dataAccess.js | 34 +++++++++++++++++++- styles/button.css | 4 +++ styles/flex.css | 4 +++ styles/main.css | 3 ++ 8 files changed, 137 insertions(+), 39 deletions(-) create mode 100644 scripts/ServiceForm.js create mode 100644 styles/button.css create mode 100644 styles/flex.css diff --git a/api/database.json b/api/database.json index 13e33ac..e2ad6ae 100644 --- a/api/database.json +++ b/api/database.json @@ -1,35 +1,37 @@ +{ + "serviceRequests": [ { - "serviceRequests" : [ - { - "id": 1, - "description": "Aut sint voluptatem fugit eius quas molestiae modi.", - "address": "34445 Bianka Ports", - "budget": 400, - "neededBy": "2021-08-27" - } - ], - - "employeeTable" : [ - { - "id": 1, - "empName": "Merle Baumgardner" - }, - { - "id": 2, - "empName": "Maude Baumgardner" - } - - ], - "jobTable" : [ - { - "id": null, - "serviceRequestId": 1, - "employeeId": 1, - "jobStatusComplete": false - }, - { - - } - - ] -} + "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": [ + { + "id": 1, + "empName": "Merle Baumgardner" + }, + { + "id": 2, + "empName": "Maude Baumgardner" + } + ], + "jobTable": [ + { + "id": null, + "serviceRequestId": 1, + "employeeId": 1, + "jobStatusComplete": false + }, + {} + ] +} \ No newline at end of file diff --git a/scripts/Requests.js b/scripts/Requests.js index d5513b6..029714f 100644 --- a/scripts/Requests.js +++ b/scripts/Requests.js @@ -1,13 +1,16 @@ 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 `
  • ${requests.description}
    • ` + } let html = `
      ${ - requests.map().join("") - } + requests.map(convertRequestToListElement).join("") + }
    ` diff --git a/scripts/ServiceForm.js b/scripts/ServiceForm.js new file mode 100644 index 0000000..2cd032f --- /dev/null +++ b/scripts/ServiceForm.js @@ -0,0 +1,49 @@ +import { sendRequest } from "./dataAccess.js"; + +export const ServiceForm = () => { + let html = ` +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    + + + ` + + 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) + } +}) diff --git a/scripts/SinkRepair.js b/scripts/SinkRepair.js index 1fb8e54..84cb215 100644 --- a/scripts/SinkRepair.js +++ b/scripts/SinkRepair.js @@ -1,10 +1,11 @@ +import { ServiceForm } from "./ServiceForm.js" import { Requests } from "./Requests.js" - export const SinkRepair = () => { return `

    Maude and Merle's Sink Repair

    + ${ServiceForm()}
    diff --git a/scripts/dataAccess.js b/scripts/dataAccess.js index 0a2da15..a393b13 100644 --- a/scripts/dataAccess.js +++ b/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})) } @@ -50,4 +82,4 @@ export const getJobTable = () => { return applicationState.jobTable.map(job => ({...job})) } -// Need copies of permanent state set as empty arrays, matching the keys in your JSON file \ No newline at end of file +// Need copies of permanent state set as empty arrays, matching the keys in your JSON file diff --git a/styles/button.css b/styles/button.css new file mode 100644 index 0000000..0c5a889 --- /dev/null +++ b/styles/button.css @@ -0,0 +1,4 @@ +.button { + background-color:#6CD9FA; + color: #000000; +} diff --git a/styles/flex.css b/styles/flex.css new file mode 100644 index 0000000..4ce3d92 --- /dev/null +++ b/styles/flex.css @@ -0,0 +1,4 @@ +.field { + display: flex; + flex-direction: column; +} \ No newline at end of file diff --git a/styles/main.css b/styles/main.css index e69de29..6c22527 100644 --- a/styles/main.css +++ b/styles/main.css @@ -0,0 +1,3 @@ +@import "flex.css"; + +@import "button.css";