cs4241-19a · dowdtd16 · Sep 19, 2019 · Sep 19, 2019
diff --git a/README.md b/README.md
diff --git a/a3-persistence/README.md b/a3-persistence/README.md
@@ -0,0 +1,24 @@
+Assignment 3 - Persistence: Two-tier Web Application with Flat File Database, Express server, and CSS template
+===
+
+##Rowing Workout Tracker
+
+https://dowdtd16-a3-persistence.glitch.me/
+
+-The goal of the application was to expand upon the previous application by adding various middleware software to enhance the user experience.
+
+-The challenges I faced during this assignment was that I found express difficult to work with causing many issues.
+
+-I choose to do local authentication as this was something I found very difficult. I used google firebase as my database because I had used it before and had experience with it.
+
+-I modified the color scheme of the bootstrap framework so that it would fit the boat theme as well as being 508 complient.
+
+- I used passport with the local strategy for the authentication but ran into many issues trying to get it to work. I attempted to use Morgan to return a token of a timestamp whenever they add a row, so they can track when each workout happened.
+I added helmet to add sequrity to the appilication.
+
+
+## Technical Achievements
+None
+
+### Design/Evaluation Achievements
+None
diff --git a/a3-persistence/package.json b/a3-persistence/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "",
+  "version": "",
+  "description": "",
+  "author": "",
+  "scripts": {
+    "start": "node server.improved.js"
+  },
+  "dependencies": {
+    "mime": "^2.4.4",
+    "npminstall": "^4.2.0",
+    "express": "^4.16.4",
+    "passport-local": "^1.0.0",
+    "passport": "^0.4.0",
+    "express-session": "^1.16.1",
+    "modern-normalize": "^0.5.0",
+    "morgan": "^1.9.1",
+    "helmet": "^3.21.0",
+    "firebase": "^6.1.0"
+  }
+}
diff --git a/a3-persistence/public/appData.json b/a3-persistence/public/appData.json
@@ -0,0 +1,14 @@
+[
+{
+    "boat":"WPI-1V", "meters":"2000", "time":"365"
+},
+{
+    "boat":"WPI-1V", "meters":"4000", "time":"750"
+},
+{
+    "boat":"Colby-1V", "meters":"2000", "time":"370"
+},
+{
+    "boat":"WPI-2V", "meters":"2000", "time":"380"
+}
+]
diff --git a/a3-persistence/public/css/style.css b/a3-persistence/public/css/style.css
@@ -0,0 +1,65 @@
+input {
+  border: 1px solid #000
+  width: 20%;
+  padding: 0.3%;
+  font-size: 16px;
+  margin-bottom: 14px;
+}
+
+
+body{
+  background-color: #B3DAF9;
+  color: #292929;
+}
+
+h1{
+  text-align: center;
+}
+
+h2{
+  text-align: center;
+}
+
+a{
+  margin-left:28px;
+}
+table {
+  border: 2px solid black;
+  width:60%;
+  margin-left:20%;
+  margin-right:20%;
+}
+
+th, td {
+  border: 1px solid black;
+}
+
+#mode{
+  text-align:center;
+  margin-bottom: 28px;
+  font-size: 32px;
+}
+
+#boatForm {
+  text-align:center;
+}
+
+#sumbitMode{
+  display:"block";
+}
+
+#results{
+  display:"none";
+}
+
+#error{
+  text-align: center;
+  font-size: 16px;
+  color: #9B080D;
+}
+
+#success{
+  text-align: center;
+  font-size: 16px;
+  color: #0A4200;
+}
diff --git a/a3-persistence/public/index.html b/a3-persistence/public/index.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>CS4241 Assignment 2</title>
+    <meta charset="utf-8">
+
+     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link rel = "stylesheet" type = "text/css" href = "css/style.css" />
+  </head>
+  <body>
+    <form action="/login" method="post">
+    <div>
+        <label>Username:</label>
+        <input id="username" type="text" name="username"/>
+    </div>
+    <div>
+        <input onclick="setToken(username.val)" type="submit" value="Log In"/>
+    </div>
+    </form>
+    <button onclick="location.href='newUser.html'">New User</button>
+  </body>
+  <script>
+  </script>
+<script src="https://www.gstatic.com/firebasejs/6.6.0/firebase-app.js"></script>
+<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>
+<script type="text/javascript" src="js/scripts.js"></script>
+</html>
diff --git a/a3-persistence/public/js/scripts.js b/a3-persistence/public/js/scripts.js
@@ -0,0 +1,164 @@
+submitMode()
+
+const firebaseConfig = {
+  apiKey: "AIzaSyA81fGagH_ga2lk3xZ2si5pLVBTM6TVoZs",
+  authDomain: "a2-dowdtd16-webware19.firebaseapp.com",
+  databaseURL: "https://a2-dowdtd16-webware19.firebaseio.com",
+  projectId: "a2-dowdtd16-webware19",
+  storageBucket: "a2-dowdtd16-webware19.appspot.com",
+  messagingSenderId: "660442145406",
+  appId: "1:660442145406:web:615ffbba0b64dce77eee2f"
+}
+
+firebase.initializeApp(firebaseConfig)
+
+var rowsDB = firebase.database()
+
+var countDB=0
+
+var userToken=localStorage.getItem('token')
+
+
+
+fetch('appData.json')
+  .then(function(response) {
+    return response.json()
+  })
+  .then(function(response) {
+    var rowJson = (JSON.stringify(response))
+    console.log(rowJson)
+    var parseRow = (JSON.parse(rowJson))
+    console.log(parseRow.length)
+    console.log(parseRow.boat)
+    addToTable(parseRow)
+  });
+
+function setToken(id){
+  userToken=document.getElementById("username").value
+  console.log(userToken)
+  localStorage.setItem('token', userToken)
+}
+
+
+function writeToDB(data){
+  console.log(data)
+  var parseRow = (JSON.parse(data))
+  console.log(parseRow)
+  console.log(parseRow.boat)
+  rowsDB.ref().push({
+    user: userToken,
+    boat: parseRow.boat,
+    meters: parseRow.meters,
+    time: parseRow.time,
+    split :getSplit(parseRow.time, parseRow.meters)
+  })
+}
+
+
+function getSplit(time, meters){
+  return time/(meters/500)
+}
+
+function distancePerStroke(meters, spm, time){
+  return meters/((time/60)*spm)
+}
+
+function resultsMode(){
+  document.getElementById("submit").style.display = "none"
+  document.getElementById("results").style.display = "block"
+  getDB()
+}
+
+function getDB(){
+  rowsDB.ref().once('value', function(snapshot) {
+  snapshot.forEach(function(rowData) {
+    console.log(rowData.val())
+    console.log(rowData.key)
+    addDBToTable(rowData.val(), rowData.key)
+  })
+})
+}
+
+function submitMode(){
+  document.getElementById("submit").style.display = "block"
+  document.getElementById("results").style.display = "none"
+  deleteDBRows()
+}
+
+function addToTable(rowingData){
+  var rows= document.getElementById("rows")
+  for(var i=0; i<rowingData.length; i++){
+      var newRow = rows.insertRow()
+      var boatName = newRow.insertCell(0)
+      var distance = newRow.insertCell(1)
+      var time = newRow.insertCell(2)
+      var split = newRow.insertCell(3)
+      boatName.innerHTML = rowingData[i].boat
+      distance.innerHTML = rowingData[i].meters
+      time.innerHTML = rowingData[i].time
+      split.innerHTML= getSplit(rowingData[i].time, rowingData[i].meters)
+  }
+}
+
+function addDBToTable(rowingDB, id){
+  console.log(rowingDB.user)
+  console.log(userToken)
+  if(rowingDB.user==userToken){
+    var rows= document.getElementById("rows")
+    var newRow = rows.insertRow()
+    var boatName = newRow.insertCell(0)
+    var distance = newRow.insertCell(1)
+    var time = newRow.insertCell(2)
+    var split = newRow.insertCell(3)
+    var edit = newRow.insertCell(4)
+    var del = newRow.insertCell(5)
+    console.log(rowingDB)
+    boatName.innerHTML = rowingDB.boat
+    distance.innerHTML = rowingDB.meters
+    time.innerHTML = rowingDB.time
+    split.innerHTML= getSplit(rowingDB.time, rowingDB.meters)
+    del.innerHTML= "Delete"
+    edit.innerHTML="Edit"
+    del.id=id
+    del.className="delt"
+    edit.id=id
+    edit.className="edit"
+    countDB++
+  }
+}
+
+function deleteDBRows(){
+  var tableDB = document.getElementById("rows");
+  while(countDB>0){
+    var rowCount = tableDB.rows.length;
+    console.log(rowCount)
+    console.log(countDB)
+    tableDB.deleteRow(rowCount-countDB)
+    countDB--
+
+  }
+}
+
+function findTheId(event) {
+  var x = event.target;
+  console.log(x.id)
+  console.log(x.className)
+  if(x.className=="delt"){
+    deleteData(x.id)
+  }
+  else if(x.className=="edit"){
+    editData(x.id)
+  }
+}
+
+function deleteData(id){
+  rowsDB.ref(id).remove()
+  submitMode()
+  resultsMode()
+}
+
+
+function editData(id){
+  deleteData(id)
+  submitMode()
+}