diff --git a/README.md b/README.md index 9434c98..b389adc 100644 --- a/README.md +++ b/README.md @@ -1,98 +1,12 @@ Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js === - -Due: September 8th, by 11:59 AM. - -This assignment aims to introduce you to creating a prototype two-tiered web application. -Your application will include the use of HTML, CSS, JavaScript, and Node.js functionality, with active communication between the client and the server over the life of a user session. - -Baseline Requirements ---- - -There is a large range of application areas and possibilities that meet these baseline requirements. -Try to 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 `
+ + + + + + + + + + +
TaskDays to CompleteDue DatePriorityDone?
+ - const input = document.querySelector( '#yourname' ), - json = { yourname: input.value }, - body = JSON.stringify( json ) - fetch( '/submit', { - method:'POST', - body - }) - .then( function( response ) { - // do something with the reponse - console.log( response ) - }) - - return false - } - - window.onload = function() { - const button = document.querySelector( 'button' ) - button.onclick = submit - } - - + diff --git a/public/js/scripts.js b/public/js/scripts.js index de052ea..9d1ebc3 100644 --- a/public/js/scripts.js +++ b/public/js/scripts.js @@ -1,3 +1,79 @@ // Add some Javascript code here, to run on the front end. +const handleSubmit = function( e ) { + // prevent default form action from being carried out + e.preventDefault() -console.log("Welcome to assignment 2!") \ No newline at end of file + const form = e.target + var data = {}; + for (var i = 0, ii = form.length; i < ii; ++i) { + var input = form[i]; + if (input.name) { + data[input.name] = input.value; + } + } + + var date = new Date(); + date.setDate(date.getDate() + data.days) + data.duedate = date.toLocaleString() + + const body = JSON.stringify(data) + console.log(body) + + fetch( '/submit/', { + method:'POST', + body + }) + .then(async function( response ) { + var data = await response.json() + console.log( data ) + console.log("response ^") + form.reset() + updateTable(data) + }) + + return false +} +const deleteData = (id) => { + + // var form = document.createElement('form'); + // form.setAttribute('method', 'post'); + // form.setAttribute('action', `/delete&id=${id}`); + // form.style.display = 'hidden'; + // document.body.appendChild(form) + // form.submit() + fetch(`/delete?id=${id}`, {method: "POST"}) + .then(async function( response ) { + var data = await response.json() + console.log( data ) + console.log("response ^") + updateTable(data) + }); +} + +const priorities = {"Highest": 1, "High": 0.75, "Medium": 0.5,"Low": 0.25,"Lowest":0} + +const updateTable = (dataJ) => { + const table = document.querySelector('tbody') + table.innerHTML = "" + + dataJ.sort(function (a, b) { + return (priorities[b.priority]-(b.days*.01))-(priorities[a.priority]-(a.days*.01)) + }) + dataJ.map((value, index) => { + const row = document.createElement("tr"); + row.innerHTML = ` ${value.task} + ${value.days} + ${value.duedate} + ${value.priority} + `; + row.dataset.ind = index; + table.appendChild(row); + }); +} + +window.onload = function() { + const form = document.querySelector('form'); + form.addEventListener('submit', handleSubmit); + + +} \ No newline at end of file diff --git a/server.improved.js b/server.improved.js index 26673fc..e1953d6 100644 --- a/server.improved.js +++ b/server.improved.js @@ -1,72 +1,97 @@ 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} -] + 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 + +let appdata = [] const server = http.createServer( function( request,response ) { if( request.method === 'GET' ) { - handleGet( request, response ) + handleGet( request, response ) }else if( request.method === 'POST' ){ - handlePost( request, response ) + handlePost( request, response ) } }) const handleGet = function( request, response ) { - const filename = dir + request.url.slice( 1 ) + const filename = dir + request.url.slice( 1 ) if( request.url === '/' ) { sendFile( response, 'public/index.html' ) - }else{ + } else if (request.url === '/getdata'){ + response.writeHead(200, "OK", { "Content-Type": "text/plain" }); + response.write(JSON.stringify(appdata)); + response.end(); + } + 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 ) ) - - // ... do something with the data here!!! + console.log(request.url) + if (request.url === '/submit/'){ + let dataString = '' + + request.on( 'data', function( data ) { + dataString += data + }) + + request.on( 'end', function() { + var data = JSON.parse( dataString ); + console.log(data); + appdata.push(data) + + response.writeHead(200, "OK", {'Content-Type': 'text/plain' }) + response.write(JSON.stringify(appdata)) + response.end() + }) + } + else if (request.url.includes('delete')){ + let dataString = new URL(request.headers.origin + request.url).searchParams.get('id') + console.log("Data: " + dataString) + + request.on( 'data', function( data ) { + }) + + request.on( 'end', function() { + console.log(appdata) + var index = parseInt(dataString) + console.log(index) + if (index === 0 && appdata.length == 1) appdata = [] + else appdata.splice(index, index) + + response.writeHead(200, "OK", {'Content-Type': 'text/plain' }) + response.write(JSON.stringify(appdata)) + response.end() + }) + } - response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }) - response.end() - }) } const sendFile = function( response, filename ) { - const type = mime.getType( filename ) + const type = mime.getType( filename ) - fs.readFile( filename, function( err, content ) { + fs.readFile( filename, function( err, content ) { - // if the error = null, then we've loaded the file successfully - if( err === null ) { + // 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 ) + // status code: https://httpstatuses.com + response.writeHeader( 200, { 'Content-Type': type }) + response.end( content ) - }else{ + }else{ - // file not found, error code 404 - response.writeHeader( 404 ) - response.end( '404 Error: File Not Found' ) + // file not found, error code 404 + response.writeHeader( 404 ) + response.end( '404 Error: File Not Found' ) - } - }) + } + }) } server.listen( process.env.PORT || port )