diff --git a/README.md b/README.md index 4471f667..9c1b2b36 100644 --- a/README.md +++ b/README.md @@ -1,100 +1,41 @@ -Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js -=== - -Due: September 9th, by 11:59 AM. - -This assignment will 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. - -Baseline Requirements ---- - -There are a 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 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 `
+ + + + + + + + + + + +
NameDescriptionSubtotalTaxTotalEditDelete
+ + + diff --git a/public/js/main.js b/public/js/main.js index a569258f..d29aeb20 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -1,5 +1,5 @@ // FRONT-END (CLIENT) JAVASCRIPT HERE - +let isEdit = -1; const submit = async function( event ) { // stop form submission from trying to load // a new .html page for displaying results... @@ -7,21 +7,151 @@ const submit = async function( event ) { // remains to this day event.preventDefault() - const input = document.querySelector( '#yourname' ), - json = { yourname: input.value }, + const input = document.querySelector( '#item'), + input2 = document.querySelector( '#description'), + input3 = document.querySelector( '#cost'), input4 = document.querySelector('#tax'), + json = { item: input.value, description: input2.value, cost: input3.value, tax: input4.value, total: 0, tag: isEdit }, body = JSON.stringify( json ) - - const response = await fetch( '/submit', { + //console.log(input) + const response = await fetch( '/data', { method:'POST', - body + body }) + let data = await response.json(); + updateTable(data); + input.value = ''; + input2.value = ''; + input3.value = ''; + input4.value = ''; + isEdit = -1; + +} + +/*async function deleteItem(tag) { + console.log('Text: ',tag); + const response = await fetch('/data', { + method: 'DELETE', + body: JSON.stringify({tag}), + }); + const data = await response.json(); + //console.log('Text:', data.tag.value); + const table = document.getElementById("list"); + table.innerHTML = ""; + table.innerHTML = `ItemDescriptionCostTaxTotalDeleteEdit`; + + data.forEach(item => { + table.innerHTML += `${item.item}${item.description}${item.cost}${item.tax}${item.total}`; + }); + +}*/ + +async function deleteItem(evt) { + let tag = evt.target.id; + const response = await fetch('/data', { + method: 'DELETE', + body: JSON.stringify({tag}), + }); + let data = await response.json(); + updateTable(data); +} + +function updateTable(data) { + + const table = document.getElementById("list"); + + table.innerHTML = `ItemDescriptionCostTaxTotalEditDelete`; + let tbody = document.createElement('tbody'); + + data.forEach(item => { + + let tr = document.createElement('tr'); + + tr.setAttribute('id', item.tag); + let td1 = document.createElement('td'); + td1.appendChild(document.createTextNode(item.item)); + let td2 = document.createElement('td'); + td2.appendChild(document.createTextNode(item.description)); + let td3 = document.createElement('td'); + td3.appendChild(document.createTextNode(item.cost)); + let td4 = document.createElement('td'); + td4.appendChild(document.createTextNode(item.tax)); + let td5 = document.createElement('td'); + td5.appendChild(document.createTextNode(item.total)); - const text = await response.text() + let btnEdit = document.createElement('button') + btnEdit.setAttribute('id', item.tag); + btnEdit.textContent = 'Edit'; + btnEdit.addEventListener('click', (evt) => { + console.log(evt); + document.getElementById("item").value = item.item; + document.getElementById("description").value = item.description; + document.getElementById("cost").value = item.cost; + document.getElementById("tax").value = item.tax; + isEdit = item.tag; + console.log(isEdit); + }); + let td6 = document.createElement('td') + td6.appendChild(btnEdit); - console.log( 'text:', text ) + + let btnDelete = document.createElement('button'); + btnDelete.textContent = 'Delete'; + btnDelete.setAttribute('id', item.tag); + btnDelete.addEventListener('click', deleteItem); + + let td7 = document.createElement('td'); + td7.appendChild(btnDelete); + + //table.innerHTML += `${item.item}${item.description}${item.cost}${item.tax}${item.total}` + document.getElementById(`delete${item.tag}`).addEventListener('click', deleteItem) + ``; + //document.getElementById(`delete${item.tag}`).addEventListener('click', deleteItem); + tr.appendChild(td1); + tr.appendChild(td2); + tr.appendChild(td3); + tr.appendChild(td4); + tr.appendChild(td5); + tr.appendChild(td6); + tr.appendChild(td7); + tbody.appendChild(tr); + + }); + console.log(tbody) + table.appendChild(tbody); + console.log(table); + //console.log('Text:', data.tag); +} + +function editItem(evt){ + + console.log(evt); + document.getElementById("item").value = item.item; + document.getElementById("description").value = item.description; + document.getElementById("cost").value = item.cost; + document.getElementById("tax").value = item.tax; + addEventListener('click', saveItem); } +async function saveItem(evt) { + const input = document.querySelector( '#item'), + input2 = document.querySelector( '#description'), + input3 = document.querySelector( '#cost'), input4 = document.querySelector('#tax'), + json = { item: input.value, description: input2.value, cost: input3.value, tax: input4.value, total: 0, tag: 0 }, + body = JSON.stringify( json ) + //console.log(input) + const response = await fetch( '/data', { + method:'PUT', + body + }) + let data = await response.json(); + updateTable(data); + input.value = ''; + input2.value = ''; + input3.value = ''; + input4.value = ''; +} + + + window.onload = function() { - const button = document.querySelector("button"); + const button = document.querySelector("button"); button.onclick = submit; } \ No newline at end of file diff --git a/server.js b/server.js index 9ac27fb8..d271ff69 100644 --- a/server.js +++ b/server.js @@ -1,3 +1,6 @@ +const { parse } = require('path'); + +let newId = -1; const http = require( 'http' ), fs = require( 'fs' ), // IMPORTANT: you must run `npm install` in the directory for this assignment @@ -8,18 +11,20 @@ const http = require( 'http' ), dir = 'public/', port = 3000 -const appdata = [ - { 'model': 'toyota', 'year': 1999, 'mpg': 23 }, - { 'model': 'honda', 'year': 2004, 'mpg': 30 }, - { 'model': 'ford', 'year': 1987, 'mpg': 14} -] +let appdata = [] + const server = http.createServer( function( request,response ) { if( request.method === 'GET' ) { handleGet( request, response ) }else if( request.method === 'POST' ){ handlePost( request, response ) + }else if (request.method === 'DELETE'){ + handleDelete(request, response) + }else if (request.method === 'PUT'){ + handlePut(request, response) } + }) const handleGet = function( request, response ) { @@ -40,12 +45,77 @@ const handlePost = function( request, response ) { }) request.on( 'end', function() { - console.log( JSON.parse( dataString ) ) - + const data = JSON.parse( dataString ) + let newTotal = (data.cost * (1 + parseFloat(data.tax))); + newTotal = newTotal.toFixed(2); + console.log(data); + if (data.tag === -1){ + console.log(data.cost); + data.total = newTotal; + data.tag = appdata.length; + newTotal = 0; + appdata.push(data); + } else { + appdata = appdata.map(item => { + if (item.tag === data.tag){ + item.item = data.item; + item.description = data.description; + item.cost = data.cost; + item.tax = data.tax; + item.total = newTotal; + console.log('Text:', item.total); + } + newTotal = 0; + return item; + }); + } + + //data.total = data.cost * (1 + data.tax); + //appdata.push(data); + //console.log(appdata); // ... do something with the data here!!! + + + + + + // ... and then add it to appdata response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }) - response.end('test') + response.end( JSON.stringify( appdata ) ) + //} + }) +} +const handleDelete = function(request, response) { + let dataString = ''; + request.on('data', function(data) { + dataString += data; + }); + request.on('end', function() { + const data = JSON.parse(dataString); + const tagToDelete = Number(data.tag); + appdata = appdata.filter(item => item.tag !== tagToDelete); + console.log(appdata); + response.writeHead(200, "OK", {'Content-Type': 'text/plain'}); + response.end(JSON.stringify(appdata)); + }); +}; + +const handlePut = function(request, response){ + let dataString = '' + request.on('data', function(data){ + dataString += data + }) + request.on('end', function(){ + const data = JSON.parse(dataString) + appdata = appdata.map(item => { + if(item.tag === data.tag){ + return data + } + return item + }) + response.writeHead(200, "OK", {'Content-Type': 'text/plain'}) + response.end(JSON.stringify(appdata)) }) } @@ -71,4 +141,4 @@ const sendFile = function( response, filename ) { }) } -server.listen( process.env.PORT || port ) +server.listen( process.env.PORT || port ) \ No newline at end of file