diff --git a/README.md b/README.md index 3945c152..5ef07b09 100755 --- a/README.md +++ b/README.md @@ -1,93 +1,21 @@ -Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js -=== +Margaret Earnest
+https://a2-margaretearnest.glitch.me/ -Due: September 16th, by 11:59 PM. - -This assignment aims to introduce you to the concepts and practice involved in creating a prototype (i.e. not deployment ready) two-tiered web application. The baseline aims of this assignment involve creating an application that demonstrates the use of several specific pieces of HTML, CSS, JavaScript, and Node.js functionality. - -Baseline Requirements ---- - -Note that there is a very large range of application areas and possibilities that meet these baseline requirements. Make your application do something useful! A todo list, storing / retrieving high scores for a very simple game, have a little fun with it. - -Your application is required to implement the following functionalities: - -- a `Server` which not only serves files, but also maintains a tabular dataset with 3 or more fields related to your application -- a `Results` functionality which shows the entire dataset residing in the server's memory -- a `Form/Entry` functionality which allows a user to add, modify, or delete data items residing in the server's memory -- a `Server Logic` which, upon receiving new or modified "incoming" data, includes and uses a function that adds at least one additional derived field to this incoming data before integrating it with the existing dataset -- the `Derived field` for a new row of data must be computed based on fields already existing in the row. For example, a `todo` dataset with `task`, `priority`, and `creation_date` may generate a new field `deadline` by looking at `creation_date` and `priority` - -Your application is required to demonstrate the use of the following concepts: - -HTML: -- One or more [HTML Forms](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms), with any combination of form tags appropriate for the user input portion of the application -- A results page displaying all data currently available on the server. You will most likely use a `` tag for this, but `
"; + for (const entry of entries) { + var entryjson = JSON.parse(entry+(entry.slice(-1) == "}" ? "" : "}")); + tableText += ""; + // console.log( entryjson );//can access elements with .elementName + } + document.getElementById("database").innerHTML = tableText + "
NameID NumberCovid19 Status
" + entryjson.userName + "" + entryjson.userID + "" + statusMessages[entryjson.userStatus] + "
"; + }) -console.log("Welcome to assignment 2!") \ No newline at end of file + return false + } + + const update = function( e ) { + // prevent default form action from being carried out + e.preventDefault() + const json = { + userName: document.querySelector( '#updateUserName' ).value, + userPassword: document.querySelector( '#updateUserPassword' ).value, + userTemp: document.querySelector( '#updateUserTemp' ).value, + userPositive: document.querySelector( '#updateUserPositive' ).checked, + userContact: document.querySelector( '#updateUserContact' ).checked, + userChills: document.querySelector( '#updateUserChills' ).checked, + userCough: document.querySelector( '#updateUserCough' ).checked, + userBreath: document.querySelector( '#updateUserBreath' ).checked, + userThroat: document.querySelector( '#updateUserThroat' ).checked, + userFatigue: document.querySelector( '#updateUserFatigue' ).checked, + userHeadache: document.querySelector( '#updateUserHeadache' ).checked, + userAche: document.querySelector( '#updateUserAche' ).checked, + userNose: document.querySelector( '#updateUserNose' ).checked, + userLoss: document.querySelector( '#updateUserLoss' ).checked, + userNausea: document.querySelector( '#updateUserNausea' ).checked, + userDiarrhea: document.querySelector( '#updateUserDiarrhea' ).checked + }, + body = JSON.stringify( json ) + + fetch( '/update', { + method:'POST', + body + }) + .then( function( response ) { + // do something with the reponse + return response.text() + }) + .then( function( text ) { + var entries = text.split("},"); + console.log("Data:") + var tableText = ""; + for (const entry of entries) { + // console.log(entry); + var entryjson = JSON.parse(entry+(entry.slice(-1) == "}" ? "" : "}")); + tableText += ""; + } + document.getElementById("database").innerHTML = tableText + "
NameID NumberCovid19 Status
" + entryjson.userName + "" + entryjson.userID + "" + statusMessages[entryjson.userStatus] + "
"; + }) + + return false + } + + const reset = function( e ) { + // prevent default form action from being carried out + e.preventDefault() + + fetch( '/reset', { + method:'POST', + body: "{}" + }) + .then( function( response ) { + // do something with the reponse + console.log("RESET") + document.getElementById("database").innerText = "Database cleared."; + }) + + return false + } + + window.onload = function() { + const newUserButton = document.querySelector( '#newUserButton' ) + newUserButton.onclick = newUser + const resetButton = document.querySelector( '#resetButton' ) + resetButton.onclick = reset + const updateButton = document.querySelector( '#updateButton' ) + updateButton.onclick = update + + /* This collapsable code is based on the code found here: https://www.w3schools.com/howto/howto_js_collapsible.asp */ + var coll = document.getElementsByClassName("collapsible"); + for (var i = 0; i < coll.length; i++) { + coll[i].addEventListener("click", function() { + this.classList.toggle("active"); + var content = this.nextElementSibling; + if (content.style.display === "block") { + content.style.display = "none"; + } else { + content.style.display = "block"; + } + }); + } + } diff --git a/server.improved.js b/server.improved.js index 26673fc0..3a1bc25e 100644 --- a/server.improved.js +++ b/server.improved.js @@ -1,72 +1,108 @@ -const http = require( 'http' ), - fs = require( 'fs' ), - // IMPORTANT: you must run `npm install` in the directory for this assignment - // to install the mime library used in the following line of code - mime = require( 'mime' ), - dir = 'public/', - port = 3000 - -const appdata = [ - { 'model': 'toyota', 'year': 1999, 'mpg': 23 }, - { 'model': 'honda', 'year': 2004, 'mpg': 30 }, - { 'model': 'ford', 'year': 1987, 'mpg': 14} -] - -const server = http.createServer( function( request,response ) { - if( request.method === 'GET' ) { - handleGet( request, response ) - }else if( request.method === 'POST' ){ - handlePost( request, response ) +const http = require("http"), + fs = require("fs"), + // IMPORTANT: you must run `npm install` in the directory for this assignment + // to install the mime library used in the following line of code + mime = require("mime"), + dir = "public/", + port = 3000; + +var appdata = []; + +const server = http.createServer(function(request, response) { + if (request.method === "GET") { + handleGet(request, response); + } else if (request.method === "POST") { + handlePost(request, response); } -}) +}); -const handleGet = function( request, response ) { - const filename = dir + request.url.slice( 1 ) +const handleGet = function(request, response) { + const filename = dir + request.url.slice(1); - if( request.url === '/' ) { - sendFile( response, 'public/index.html' ) - }else{ - sendFile( response, filename ) + if (request.url === "/") { + sendFile(response, "public/index.html"); + } else { + sendFile(response, filename); } -} - -const handlePost = function( request, response ) { - let dataString = '' - - request.on( 'data', function( data ) { - dataString += data - }) - - request.on( 'end', function() { - console.log( JSON.parse( dataString ) ) +}; + +const handlePost = function(request, response) { + let dataString = ""; + + request.on("data", function(data) { + if (request.url == "/reset") { + appdata = []; + } else if (request.url == "/newUser") { + appdata.push(data); + } else if (request.url == "/update") { + var match = false; + var status = 0; + var debug = ""; + var index = 0; + for (const entry of appdata) { + var entryjson = JSON.parse(entry); //can access elements with .elementName + var datajson = JSON.parse(data); + if (entryjson.userName == datajson.userName && entryjson.userPassword == datajson.userPassword) { + match = true; + debug += "Contact - " + datajson.userContact + " - "; + for (const header of Object.keys(entryjson)) { + debug += header + " - " + entryjson[header] + " : " + datajson[header] + " ``` "; + //go through symptoms + if(!["userName", "userID", "userPassword", "userTemp", "userContact", "userPositive"].includes(header)) { + if (datajson[header] == 1 && entryjson[header] == datajson[header]) { + status = 1; + } else if (datajson[header] == 1) { + status = 2; + break; + } + } + } + if(datajson.userContact || datajson.userPositive) { + status = 2; + } + if(Number(entryjson.userTemp) + 2 <= Number(datajson.userTemp)) { + status = 2; + } + entryjson.userStatus = status; + appdata[index] = JSON.stringify(entryjson); + break; + //user has been found + } + index++; + } + // appdata.push('{"matching" : "' + match + '"}'); + // appdata.push('{"status" : "' + status + '"}'); + // appdata.push('{"debug" : "' + debug + '"}'); + } + // appdata.push('{"url" : "' + request.url + '"}'); + }); + + request.on("end", function() { + // console.log( JSON.parse( dataString ) ) // ... do something with the data here!!! - response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }) - response.end() - }) -} - -const sendFile = function( response, filename ) { - const type = mime.getType( filename ) - - fs.readFile( filename, function( err, content ) { - - // if the error = null, then we've loaded the file successfully - if( err === null ) { - - // status code: https://httpstatuses.com - response.writeHeader( 200, { 'Content-Type': type }) - response.end( content ) - - }else{ - - // file not found, error code 404 - response.writeHeader( 404 ) - response.end( '404 Error: File Not Found' ) - - } - }) -} - -server.listen( process.env.PORT || port ) + response.writeHead(200, "OK", { "Content-Type": "text/plain" }); + response.end(String(appdata)); + response.end(); + }); +}; + +const sendFile = function(response, filename) { + const type = mime.getType(filename); + + fs.readFile(filename, function(err, content) { + // if the error = null, then we've loaded the file successfully + if (err === null) { + // status code: https://httpstatuses.com + response.writeHeader(200, { "Content-Type": type }); + response.end(content); + } else { + // file not found, error code 404 + response.writeHeader(404); + response.end("404 Error: File Not Found"); + } + }); +}; + +server.listen(process.env.PORT || port);