a2-dpcaffrey-daniel-caffrey

README.md

@@ -1,87 +1,27 @@
-Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js  
-===
 
-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.
+## Power Usage Database
 
-Baseline Requirements
----
+The website allows the user to enter voltage and current reading, and power is calculated. 
+The backend architecture is established for a system that can track the power usage of certain appliances
+The UI allows the user to not only submit data, but also modify and delete is, as well as retrieve all of the data currenlty stored in the server
+In the future, graphs could be generated to better display to the user exactly how their power is being used
 
-Note that there is a very large range of application areas and possibilities that meet these baseline requirements.
-Games, internet of things, organizational tools, commerce, media - all are possibilities with a two-tiered form-focused web application.
+Notes:
+  1) I could not get a seperate CSS stylesheet to work, so all of my styling is in a style tag at the top of index.html
+  2) Something must be entered into the "Remove a reading" form before hitting the button, otherwise the site will break. All other forms can be submitted with no data entered and be fine
 
-Do not limit yourselves to any of the examples given below. 
-Examples like the upcoming `efficiency_ratio` idea for the `cars` dataset are meant to be illustrative and easy to understand.
-They are not intended to be sensible or useful ideas.
-
-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 `cars` dataset with `year`, `horsepower`, and `fuel_efficiency` may create a new field `efficiency_ratio` by dividing `fuel_efficiency` by `horsepower`
-
-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. `<div>`s, `table`s, and `list`s are common choices
-
-CSS:
-- CSS styling of the primary visual elements in the application
-- Various CSS Selector functionality must be demonstrated:
-    - Element selectors
-    - ID selectors
-    - Class selectors
-- CSS positioning and sizing of the primary visual elements in the application:
-    - CSS to cause at least one element to be horizontally centered on the page
-    - CSS to cause at least one pair of elements to appear side-by-side
-    - CSS defined in a maintainable, readable form, in external stylesheets 
-
-JavaScript:
-- At minimum, a small amount of front-end JavaScript to get / fetch data from the server; a sample is provided in this repository.
-
-Node.js:
-- An HTTP Server that delivers all necessary files and data for the application. A starting point is provided in this repository.
-
-Deliverables
----
-
-Do the following to complete this assignment:
-
-1. Fork the starting project code. This repo contains some starter code that may be used or discarded as needed.
-2. Implement your project with the above requirements.
-3. Test your project to make sure that when someone goes to your main page, it displays correctly.
-4. Deploy your project to Glitch, and fill in the appropriate fields in your package.json file.
-5. Ensure that your project has the proper naming scheme `a2-yourTeamName` so we can find it.
-6. Modify the Readme to the specifications below.
-7. Create and submit a Pull Request to the original repo. Only one member needs to submit a pull request.
-
-Sample Readme (delete the above when you're ready to submit, and modify the below so with your links and descriptions)
----
-
-## Your Web Application Title
-Include a very brief summary of your project here.
-Images are encouraged, along with concise, high-level text.
-
-Here is a sample formula for summarizing your activities, talk about:
-- the domain area the project pertains to
-- the main challenges or problems the application addresses
-- the key innovations that make it possible to address the problem
-- the main results of the implementation, does it really address the problem?
-- any additional implications of the resulting application, or possibly areas for future work that have been discovered as part of the design and implementation activities
-
-(Note that when I use the above formula, I aim to have only one sentence per thought in order to remain concise.)
-
-http://a2-charlieroberts.glitch.me
+http://a2-danielcaffrey.glitch.me
 
 ## Technical Achievements
-- **Tech Achievement 1**: Using a combination of...
-- **Tech Achievement 2**: ...
+- **Tech Achievement 1**: Using basic HTML forms, created a user interface that allows a user to add, delete, or modify data
+- **Tech Achievement 2**: Using an HTML table and button, created a user interface that allows a user to see the data currently stored on the server
+- **Tech Achievement 3**: Using an HTML paragraph text object, created an area to display to the user the communication that the website has recieved from the server
+- **Tech Achievement 4**: Using an array, maintained a server database of data submitted by the user
+- **Tech Achievement 5**: Calculated the power value based on the given Voltage and Current
+- **Tech Achievement 6**: Implementation of error correction for added Voltage and Current values that prevents a value of 0 from being entered. This also accounts for nothing being sent in these two fields
 
 ### Design/Evaluation Achievements
-- **Design Achievement 1**: Shown in `style.css`, the code...
-- **Design Achievement 2**: We tested the application with n=X users, finding that...
+- **Design Achievement 1**: Shown in the style tag of the HTML doc, Element Selectors are used to center the headings and forms
+- **Design Achievement 2**: ID Selectors are used to implement a grid layout over the "Respone from Server" and "Data form Server" sections of the website. This places these sections side by side
+- **Design Achievement 3**: Class Selectors are used to add a border to the "Respone from Server" and "Data form Server" sections of the website

package.json

@@ -1,8 +1,8 @@
 {
-  "name": "",
-  "version": "",
-  "description": "",
-  "author": "",
+  "name": "Daniel Caffrey",
+  "version": "1.0",
+  "description": "A client-server based power monitoring website",
+  "author": "Daniel Caffrey",
   "scripts": {
     "start": "node server.improved.js"
   },

pnpm-debug.log

@@ -0,0 +1,15 @@
+---
+  0 debug pnpm:scope: 
+    selected: 1
+    workspacePrefix: null
+  1 info pnpm: 
+    message: "A store server is running. All store manipulations are delegated to it."
+    prefix: "/app"
+  2 error pnpm: 
+    message: 
+      code: "ERR_PNPM_BAD_PACKAGE_JSON"
+    err: 
+      name: "Error"
+      message: "/app/package.json: Invalid name: \"Daniel Caffrey\""
+      code: "ERR_PNPM_BAD_PACKAGE_JSON"
+      stack: "Error: /app/package.json: Invalid name: \"Daniel Caffrey\"\n    at Object.<anonymous> (/opt/nvm/versions/node/v10.15.3/lib/node_modules/pnpm/lib/node_modules/@pnpm/read-package-json/lib/index.js:23:31)\n    at Generator.throw (<anonymous>)\n    at rejected (/opt/nvm/versions/node/v10.15.3/lib/node_modules/pnpm/lib/node_modules/@pnpm/read-package-json/lib/index.js:5:65)"

public/css/style.css

@@ -1 +1 @@
-/*Style your own assignment! This is fun! */
+/*Style your own assignment! This is fun! */

public/index.html

@@ -1,40 +1,198 @@
 <!doctype html>
+<link rel="stylesheet" type="text/css" href="public/css/style.css" />
 <html lang="en">
+  <style>
+    table, th, td {
+      border: 1px solid black;
+      border-collapse: collapse;
+    }
+
+    p {border: 1px solid black;}
+
+    h1, h2, form {text-align: center}
+
+    #sideBySide{
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+    }
+
+    .server{
+      text-align: center;
+      border: 1px solid black;
+    }
+  </style>
+
   <head>
     <title>CS4241 Assignment 2</title>
     <meta charset="utf-8">
   </head>
   <body>
-    <form action="">
-      <input type='text' id='yourname' value="your name here">
-      <button>submit</button>
-    </form>
+
+    <h1>Power Usage Database</h1>
+      <h2>Add a reading</h2>
+      <form action="" class = "userInput">
+        <input type="text" id="addD" placeholder="Date? (MM/DD/YY)"><br>
+        <input type="text" id="addT" placeholder="Time? (HH:MM)"><br>
+        <input type="text" id="addV" placeholder="Voltage reading?"><br>
+        <input type="text" id="addI" placeholder="Current reading?"><br>
+        <button id="addButton"> Add</button>
+      </form>
+
+      <h2>Remove a reading</h2>
+      <form action="" class = "userInput">
+        <input type="text" id="delId" placeholder="Specify the reading's ID"><br>
+        <button id="delButton">Delete</button>
+      </form>
+
+        <h2 id = "modHead">Modfy a reading</h2>
+        <form action="" class = "userInput">
+          <input type="text" id="modId" placeholder="Specify the reading's ID"><br>
+          <input type="text" id="newD" placeholder="New date?"><br>
+          <input type="text" id="newT" placeholder="New time?"><br>
+          <input type="text" id="newV" placeholder="New voltage?"><br>
+          <input type="text" id="newI" placeholder="New current?"><br>
+          <button id="modButton">Modify</button><br><br>
+        </form>
+
+    <div id = "sideBySide">
+      <div class = "server">
+        <h2>Response from the server:</h2>
+        <p id="serverResponse"><br></p>
+      </div>
+
+      <div class = "server">
+        <h2>Retrieve Data from Server</h2>
+        <form action="">
+          <button id="getButton">Retrieve Data</button>
+        </form><br>
+      </div>
+    </div>
+     <table id="dataTable"></table>
+
   </body>
   <script>
 
-  const submit = function( e ) {
-    // prevent default form action from being carried out
+  const addData = function( e ) {
     e.preventDefault()
-
-    const input = document.querySelector( '#yourname' ),
-          json = { yourname: input.value },
+    const addD = document.querySelector( '#addD'),
+          addT = document.querySelector( '#addT' ),
+          addV = document.querySelector( '#addV' ),
+          addI = document.querySelector( '#addI' ),
+          json = { date: addD.value, time: addT.value, voltage: addV.value, current: addI.value },
           body = JSON.stringify( json )
 
-    fetch( '/submit', {
+    fetch( '/addData', {
       method:'POST',
       body 
     })
     .then( function( response ) {
-      // do something with the reponse 
-      console.log( response )
+      response.text()
+        .then(function (message){
+        console.log('Server said back: ', message)
+        document.getElementById("serverResponse").innerHTML = message;
+      })
     })
-
     return false
   }
+
+  const getData = function( e ){
+    e.preventDefault()
+
+    fetch( '/getData', {
+      method:'POST'
+    })
+    .then( function( response ) {
+      response.text()
+        .then(function (message){
+        console.log('Server said back: ', message)
+        data = JSON.parse(message)
+
+        // Delete the table that currenlty exists and make a new one with same ID
+        const oldTable = document.getElementById("dataTable")
+        oldTable.parentElement.removeChild(oldTable)
+        const newTable = document.createElement("TABLE")
+        newTable.setAttribute("id", "dataTable");
+        newTable.setAttribute("style", "width:75%")
+
+        // Make the headings
+        const headerRow = newTable.insertRow();
+        for (let valueName in data[0]){
+          const headingName = valueName.charAt(0).toUpperCase() + valueName.slice(1);
+          headingCell = document.createElement("TH")
+          headingCell.innerHTML = headingName
+          headerRow.appendChild(headingCell)
+        }
+
+        // Insert the data
+        for (json of data){
+          console.log(json)
+          row = newTable.insertRow()
+          let index = 0
+          for ( key of Object.keys(json)){
+            row.insertCell(index).innerHTML = json[key]
+            index++
+          }
+        }
+        document.body.appendChild(newTable)
+      })
+    })
+  }
 
-  window.onload = function() {
-    const button = document.querySelector( 'button' )
-    button.onclick = submit
+  const delData = function( e ){
+    e.preventDefault()
+
+    const body = document.querySelector("#delId").value
+    console.log(body)
+    fetch( '/delData', {
+      method:'POST',
+      body
+    })
+    .then( function( response ) {
+      response.text()
+        .then(function (message){
+        console.log('Server said back: ', message)
+        document.getElementById("serverResponse").innerHTML = message
+        })
+    })
+  }
+
+  const modData = function( e ){
+    e.preventDefault()
+    const modId = document.querySelector( '#modId').value,
+          newD = document.querySelector( '#newD').value,
+          newT = document.querySelector( '#newT' ).value,
+          newV = document.querySelector( '#newV' ).value,
+          newI = document.querySelector( '#newI' ).value,
+          json = { date: newD, time: newT, voltage: newV, current: newI , id: modId},
+          body = JSON.stringify( json )
+
+    fetch( '/modData', {
+      method:'POST',
+      body 
+    }).then( function( response ) {
+      response.text()
+        .then(function (message){
+        console.log('Server said back: ', message)
+        document.getElementById("serverResponse").innerHTML = message;
+      })
+    })
+    return false
+  }
+
+  window.onload = function() { //This will execute once after all of the html has beenrendered
+    const addButton = document.querySelector( '#addButton' ) //JQUERY
+    const delButton = document.querySelector( '#delButton' )
+    const dataButton = document.querySelector( "#getButton")
+    const modButton = document.querySelector( "#modButton")
+    // const button = document.getElementByID
+    //JQUERY was invented to perform tasks that make HTML manipluation easier
+    //Pass this a CSS selector, and it will find the HTML onbject selected by the CSS Selector
+    //Returns a JavaScript representation of the HTML elememt
+    console.log({response: "I am loaded"})
+    addButton.onclick = addData
+    delButton.onclick = delData
+    dataButton.onclick = getData
+    modButton.onclick = modData
   }
 
   </script>