From 42280f6cc1cea9946d3430de70c939ccc7692291 Mon Sep 17 00:00:00 2001 From: charlie roberts Date: Mon, 7 Sep 2020 10:34:42 -0400 Subject: [PATCH 1/6] Update README.md --- README.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 304a16f1..b5f0d390 100755 --- a/README.md +++ b/README.md @@ -1,12 +1,11 @@ Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js === -Due: September 9th, by 11:59 AM. +Due: September 16th, by 11:59 AM. 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. -Another aim of this assignment is to establish creative boundaries in which you and your partner can explore designing, implementing, and evaluating usable, useful, novel, and technically efficient web applications. Baseline Requirements --- @@ -30,7 +29,7 @@ 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 - - Clarification: the results page can be implemented in any way. `
`s, `table`s, and `list`s are common choices +- A results page displaying all data currently available on the server. You will most likely use a `` tag for this, but `
` tag for this, but `
` tag for this, but `" + + "" + + "" + + "" + + "" + + "" + + ""; + }); + document.getElementById("lbBody").innerHTML = html; +}; + +const firstTime = function() { + const json = {start:'start'}, + body = JSON.stringify(json); + fetch("/start", { + method: "POST", + body + }).then(function(response) { + console.log(response); + /*var incomingData = JSON.parse(response); + createTable(incomingData);*/ + }); +} \ No newline at end of file diff --git a/server.improved.js b/server.improved.js index 26673fc0..f2f4bc12 100644 --- a/server.improved.js +++ b/server.improved.js @@ -1,72 +1,130 @@ -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 http = require("http"), + fs = require("fs"), + 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 ) + { pos: 1, name: "Bill", time: 10, diff: 0, done: "Yes" }, + { pos: 2, name: "Bob", time: 14, diff: 4, done: "Yes" }, + { pos: 3, name: "Jeb", time: 36, diff: 26, done: "Yes" } +]; + +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 if (request.url === "css/style.css") { + sendFile(response, "public/css/style.css"); + } else { + sendFile(response, filename); } -} - -const handlePost = function( request, response ) { - let dataString = '' +}; - request.on( 'data', function( data ) { - dataString += data - }) +const handlePost = function(request, response) { + let dataString = ""; - request.on( 'end', function() { - console.log( JSON.parse( dataString ) ) + request.on("data", function(data) { + dataString += data; + console.log(dataString); + }); + request.on("end", function() { + let incoming = JSON.parse(dataString); + let responseStr = ""; // ... 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 ) + if (request.url === "/submit") { + //new entry + addEntry(response, incoming); + } else if (request.url === "/edit") { + //edit existing entry + editEntry(response, incoming); + } else if (request.url === "/delete") { + //removing an entry + deleteEntry(response, incoming); + } else if (request.url === "/start") { + //send the data we have right away + sendAppdata(response); + } + }); +}; + +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); + +const sortData = function() { + //sort the list in terms of which has the lowest time. + appdata.sort((e1, e2) => (e1.time > e2.time ? 1 : -1)); + //assigning positon numbers and calculating time differences + for (let i = 0; i < appdata.length; i++) { + appdata[i].pos = i + 1; + if ((i = 0)) { + appdata[i].diff = 0; + } else { + appdata[i].diff = appdata[i].time - appdata[0].time; + } + } +}; + +const sendAppdata = function(response) { + //sortData(); //commenting out sortdata makes it work. no idea why sortdata is bad. + let data = JSON.stringify(appdata); + response.writeHeader(200, { "Content-Type": "text/plain" }); + response.end(data); +}; + +const addEntry = function(response, input) { + appdata.push(input); + sendAppdata(response); +}; + +const editEntry = function(response, input) { + //first search for the entry to see if it exists, if it does modify it. + let found = false; + for (let i = 0; i < appdata.length; i++) { + if (appdata[i].name === input.name) { + //found it, update + found = true; + appdata[i] = input; + } + } + sendAppdata(response); +}; + +const deleteEntry = function(response, input) { + var index = -1; + for (var i = 0; i < appdata.length; i++) { + if (appdata[i]['name'] === input.name) { + index = i; + } + } + if (index > -1) { + appdata.splice(index, 1); + } + sendAppdata(response); +}; diff --git a/shrinkwrap.yaml b/shrinkwrap.yaml new file mode 100644 index 00000000..f6d7ea4f --- /dev/null +++ b/shrinkwrap.yaml @@ -0,0 +1,15 @@ +dependencies: + mime: 2.4.6 +packages: + /mime/2.4.6: + dev: false + engines: + node: '>=4.0.0' + hasBin: true + resolution: + integrity: sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA== +registry: 'https://registry.npmjs.org/' +shrinkwrapMinorVersion: 9 +shrinkwrapVersion: 3 +specifiers: + mime: ^2.4.4 From 01bae22f7e2f6d6713f1b213ffa68f7a38a2d823 Mon Sep 17 00:00:00 2001 From: csmbrad <58525771+csmbrad@users.noreply.github.com> Date: Wed, 16 Sep 2020 23:57:36 -0400 Subject: [PATCH 6/6] Update README.md --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 9d0bbda7..50ed4cd5 100755 --- a/README.md +++ b/README.md @@ -1,7 +1,9 @@ ## Generic Leaderboard https://csmbrad-a2-shortstack.glitch.me/ -This project is a simple time-based leaderboard. Grids are used to position the elements, and a Table is used to create ther results. +This project is meant to be a simple time-based leaderboard. Grids are used to position the elements, and a Table is used to create ther results. +The derived field is calculated server side. there are 2 derived fields, one with the position of the time and the other the difference from first place. +at least, that's how the derived fields should be. I could not get the results to show up in the table, trying to request them at the start makes the site hang and I can't figure out why. The server does support adding, removing, and editing entries.
" + e.pos + "" + e.name + "" + e.time + "" + e.diff + "" + e.done + "