👹🍵 Updated with Glitch

.gitignore

@@ -0,0 +1,3 @@
+*.DS_Store
+node_modules/
+package-lock.json

.glitch-assets

@@ -0,0 +1,11 @@
+{"name":"image.png","date":"2019-09-09T03:21:27.676Z","url":"https://cdn.glitch.com/e0bc9286-a871-443e-a57f-2e27d07bd89e%2Fimage.png","type":"image/png","size":54851,"imageWidth":558,"imageHeight":601,"thumbnail":"https://cdn.glitch.com/e0bc9286-a871-443e-a57f-2e27d07bd89e%2Fthumbnails%2Fimage.png","thumbnailWidth":307,"thumbnailHeight":330,"uuid":"gyBKnc2D2mLyQ8up"}
+{"name":"favicon (2).ico","date":"2019-09-14T16:22:13.186Z","url":"https://cdn.glitch.com/5cd46ecf-8f21-44d2-941d-1799ff06883e%2Ffavicon%20(2).ico","type":"image/x-icon","size":318,"imageWidth":16,"imageHeight":16,"thumbnail":"https://cdn.glitch.com/5cd46ecf-8f21-44d2-941d-1799ff06883e%2Ffavicon%20(2).ico","thumbnailWidth":16,"thumbnailHeight":16,"uuid":"s1BVKqfyil2B9f2m"}
+{"uuid":"s1BVKqfyil2B9f2m","deleted":true}
+{"name":"favicon-a3.ico","date":"2019-09-14T16:26:08.998Z","url":"https://cdn.glitch.com/5cd46ecf-8f21-44d2-941d-1799ff06883e%2Ffavicon-a3.ico","type":"image/x-icon","size":318,"imageWidth":16,"imageHeight":16,"thumbnail":"https://cdn.glitch.com/5cd46ecf-8f21-44d2-941d-1799ff06883e%2Ffavicon-a3.ico","thumbnailWidth":16,"thumbnailHeight":16,"uuid":"2XFISO0ezBjOTcjZ"}
+{"uuid":"gyBKnc2D2mLyQ8up","deleted":true}
+{"name":"GradeTable.PNG","date":"2019-09-15T22:37:10.243Z","url":"https://cdn.glitch.com/5cd46ecf-8f21-44d2-941d-1799ff06883e%2FGradeTable.PNG","type":"image/png","size":9468,"imageWidth":1670,"imageHeight":221,"thumbnail":"https://cdn.glitch.com/5cd46ecf-8f21-44d2-941d-1799ff06883e%2Fthumbnails%2FGradeTable.PNG","thumbnailWidth":330,"thumbnailHeight":44,"uuid":"ilUkSUhHfqYIw109"}
+{"name":"favicon (2).ico","date":"2019-10-04T15:59:56.794Z","url":"https://cdn.glitch.com/3a7a7745-805f-4bc9-9091-f891637e22a2%2Ffavicon%20(2).ico","type":"image/x-icon","size":318,"imageWidth":16,"imageHeight":16,"thumbnail":"https://cdn.glitch.com/3a7a7745-805f-4bc9-9091-f891637e22a2%2Ffavicon%20(2).ico","thumbnailWidth":16,"thumbnailHeight":16,"uuid":"4riQPjUDuKjm5fQ4"}
+{"uuid":"ilUkSUhHfqYIw109","deleted":true}
+{"uuid":"2XFISO0ezBjOTcjZ","deleted":true}
+{"uuid":"4riQPjUDuKjm5fQ4","deleted":true}
+{"name":"faviconCheck.ico","date":"2019-10-04T16:01:32.951Z","url":"https://cdn.glitch.com/3a7a7745-805f-4bc9-9091-f891637e22a2%2FfaviconCheck.ico","type":"image/x-icon","size":318,"imageWidth":16,"imageHeight":16,"thumbnail":"https://cdn.glitch.com/3a7a7745-805f-4bc9-9091-f891637e22a2%2FfaviconCheck.ico","thumbnailWidth":16,"thumbnailHeight":16,"uuid":"wE3HPcJdaSgbPE5C"}

README.md

@@ -1,51 +1,14 @@
-# cs4241-FinalProject
+## Scheduler
 
-For your final project, you'll implement a course project that exhibits your mastery of the course materials. 
-Similar to A4, this project gives you an opportunity to be creative and to pursue individual research and learning.
+https://fp-start.glitch.me
 
-## General description
+This is an application that allows for users to schedule meetings, and assign tasks to users for each meeting that they have created.
 
-Your project should consist of a complete Web application, exhibiting facets of the three main sections of the course material:
+Features of the application include:
 
-- Static Web page content and design. You should have a project that is accessible, easily navigable, and features significant content.
-- Dynamic behavior implemented with JavaScript.
-- Server-side programming *using Node.js*. Typically this will take the form of some sort of persistent data, authentication, and possibly server-side computation.
+- Passport authentication for users
+- Seperate pages for allowing users to view meetings, make meetings, assign tasks, and view their own messages and tasks.
+- Messages that are automatically stored for users to notify them when they are assigned or unassigned from a task.
 
-Additionally, you should incorporate features that you independently research, design, and implement for your project.
 
-## Project ideation
 
-Excellent projects serve someone/some group; for this assignment you need to define your users and stakeholders. I encourage you to identify projects that will have impact, either artistically, politically, or in terms of productivity. Consider creating something useful for a cause or hobby you care about.
-
-## Logistics
-
-### Team size
-Students are encouraged to work in teams of 2-5 students for the project. This will allow you to build a good project without expending an excessive amount of effort. While I would expect a team of four or five students to produce a project with more features, I expect a every team's work to exhibit all of the required facets described above.
-
-### Deliverables
-
-__Proposal:__ 
-Provide an outline of your project direction and the names of the team members. 
-The outline should have enough detail so that staff can determine if it meets the minimum expectations, or if it goes too far to be reasonable by the deadline.
-This file must be named proposal.md so we can find it.
-Submit a PR to turn it in by Monday, September 30th, before class
-
-There are no other scheduled checkpoints for your project. 
-You must be done in time to present before the final project demo day (October 10th). 
-
-#### Turning in Your Outline / Project
-
-**NOTE: code is due before the project presentation day due to the end of term / grading schedule constraints**
-Submit a second PR on the final project repo to turn in your app and code.
-
-Deploy your app, in the form of a webpage, to Glitch/Heroku/Digital Ocean or some other service.
-Folks on the same team do not need to post the same webpage, but must instead clearly state who is on the team in their proposal.
-(Staff will use the proposal to build the grading sheet.)
-
-## Final Presentation
-
-Presentations will occur during the final day of class.
-
-## FAQs
-
-- **Can I use XYZ framework?** You can use any web-based frameworks or tools available, but for your server programming you need to use node.js.

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "fp-start",
+  "version": "0.1.0",
+  "description": "A nice description",
+  "author": "Many ",
+  "scripts": {
+    "start": "node server.improved.js"
+  },
+  "dependencies": {
+    "body-parser": "^1.19.0",
+    "express": "^4.17.1",
+    "express-session": "^1.16.2",
+    "passport": "^0.4.0",
+    "passport-local": "^1.0.0",
+    "sqlite3": "^4.1.0",
+    "response-time": "^2.3.2",
+    "serve-favicon": "^2.5.0",
+    "helmet": "^3.21.0",
+    "express-slash": "^2.0.1",
+    "morgan": "1.9.1",
+    "compression": "^1.7.4"
+  }
+}

proposal.md

@@ -0,0 +1,8 @@
+# Proposal
+
+Team members: Peter Jankowski, Tom Graham, Rosana Pochat
+
+Project details:
+
+We want to make a calendar application that allows for people to sign up, and set up meetings with other registered users. Our website will allow for people to set up task lists in advance of a meeting, assign tasks to users from a meeting’s task list, and notify users as the meeting deadline approaches. We will also allow for users to adjust the look of the site when they are logged in.
+

public/css/index.css

@@ -0,0 +1,21 @@
+.form-control {
+  margin-left:25%;
+  width:50%;
+}
+
+label {
+  margin-left:25%;
+}
+
+details {
+  margin-left:25%;
+  margin-right:25%;
+}
+
+#myCanvas{
+  background-color: black;
+}
+
+.btn {
+  margin-left:25%;
+}

public/index.html

@@ -0,0 +1,60 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>CS4241 Final Project</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="author" content="Tom Graham, Peter Jankowski, and Rosana Pochat">
+
+    <!-- Bootstrap CSS -->
+    <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">
+    <script src="js/loginScripts.js" defer></script>
+    <link rel="stylesheet" href="css/index.css">
+  </head>
+
+  <body class="p-3 mb-2 bg-dark text-white">
+    <header>
+      <div class="text-center">
+        <h1>Scheduler App</h1>
+        <h2>Login Page</h2>
+      </div>
+    </header>
+
+    <main>
+      <!-- Login and Signup form-->
+      <form action="/login" id="loginForm" method="post" class="container">
+        <!-- Sign In -->
+        <label>Username:</label>
+        <input type="text" name="username" id="loginName" class="form-control"/>
+        <label>Password:</label>
+        <input type="password" name="password" id="pass" class="form-control"/>
+        <input type="submit" value="Log In" id="loginButton" class="btn btn-primary" aria-describedby="loginHelpBlock"/>
+        <details id="loginHelpBlock" class="form-text text-light">
+        Sign in above if you already have registered as a user, or register as a new user below.
+        </details>
+        <hr style="border-color: white">
+        <!-- Register -->
+        <label>New Username:</label>
+        <input type="text" name="username" id="newname" class="form-control" aria-describedby="usernameHelpBlock"/>
+
+        <details id="usernameHelpBlock" class="form-text text-light">
+          Your username must be unique from any other user.
+        </details>
+
+        <label>New Password:</label>
+        <input type="password" name="password" id="newpass" class="form-control"/>
+
+        <input type="submit" value="Sign Up" id="signupButton" class="btn btn-primary"/>
+      </form>
+    </main>
+
+   <footer>
+      <div>
+        <hr style="border-color: white">
+        <p class="text-center">
+          Created by Tom Graham, Peter Jankowski, and Rosana Pochat
+        </p>
+      </div>
+    </footer>
+  </body>
+</html>

public/js/calendarScripts.js

@@ -0,0 +1,123 @@
+// Here is where the js will go for allowing users to add, remove, and display meetings by date
+
+let isHidden = true;
+
+const hide = function( e ) {
+  e.preventDefault();
+  document.getElementById("tablePrint").innerHTML = '<table></table>';
+  isHidden = true;
+}
+
+// Get all meetings from the database for this date
+const view = function( e ) {
+  e.preventDefault();
+
+  const dateInput = document.querySelector( '#enteredDate' );
+  if (dateInput.value !== "") {
+    let meetingsArray;
+        const json = { date: dateInput.value, },
+        body = JSON.stringify( json );
+
+  fetch( '/viewMyMeetings', {
+    method:'POST',
+    credentials: 'include',
+    headers: { 'Content-Type': 'application/json' },
+    body: body
+  })
+  .then( function( response ) {
+
+    // Fetch all tasks for this meeting in the database to add to a table
+    response.json().then((data) => {
+      meetingsArray = data.meetingsArray;
+      let numTasks = meetingsArray.length;
+    let myTable = '<table class ="pageText"><td>Meeting Name:</td>';
+    myTable += "<td>Meeting Date:</td>";
+    myTable += "<td>Meeting Creator:</td>";
+    myTable += "<td>Meeting Details:</td></tr>";
+    for (let i = 0; i < numTasks; i++) { // Make the table with one row per task
+      myTable += "<tr><td>" + meetingsArray[i].name + "</td>";
+      myTable += "<td>" + meetingsArray[i].date + "</td>";
+      myTable += "<td>" + meetingsArray[i].username + "</td>";
+      myTable += "<td>" + meetingsArray[i].details + "</td></tr>";
+    }
+    myTable += "</table>";
+    document.getElementById("tablePrint").innerHTML = myTable;
+    isHidden = false;
+    });
+  });
+  return false;
+  } else {
+    alert("Enter a full date to see meetings on that date");
+  }
+}
+
+const submit = function( e ) { // Submit request for a new meeting
+  e.preventDefault()
+
+  const nameInput = document.querySelector( '#meetingName' ),
+        detailsInput = document.querySelector( '#meetingDetails' ),
+        dateInput = document.querySelector('#enteredDate'),
+        json = { name: nameInput.value,  date: dateInput.value, details: detailsInput.value },
+        body = JSON.stringify( json );
+
+  fetch( '/submitMeeting', { //This meeting will be made originally with no tasks in it, just details
+    method:'POST',
+    body: JSON.stringify( json ),
+    headers: { 'Content-Type': 'application/json' },
+    credentials: 'include' 
+  })
+  .then( function( response ) {
+    // Update the task list for the user
+    response.json().then((data) => {
+      //act now that the new meeting has been created
+      if (data.meetingAdded) {
+        alert("Meeting created");
+      } else {
+        alert("You already have a meeting of that name");
+      }
+      if (!isHidden) {
+        view(e);
+      }
+    });
+  });
+  return false;
+}
+
+const remove = function( e ) { // Delete a task with a specified id number
+  // prevent default form action from being carried out
+  e.preventDefault();
+
+  const nameInput = document.querySelector( '#meetingName' ),
+        dateInput = document.querySelector('#enteredDate'),
+        json = { name: nameInput.value,  date: dateInput.value },
+        body = JSON.stringify( json );
+
+  fetch( '/removeMeeting', {
+    method:'DELETE',
+    body: JSON.stringify( json ),
+    headers: { 'Content-Type': 'application/json' },
+    credentials: 'include'
+  })
+  .then( function( response ) {
+    // Simply redisplay the table on the response after the deletion occurs
+    // if it is not currently hidden
+    response.json().then((data) => {
+      document.getElementById("tablePrint").innerHTML = '<table></table>';
+      if (!isHidden) {
+        view(e);
+      }
+    });
+  });
+  return false;
+}
+
+window.onload = function() { // Link each button to its respective function
+  const viButton = document.querySelector( '#viewButton' ),
+  siButton = document.querySelector( '#submitButton' ),
+  hiButton = document.querySelector( '#hideButton' ),
+  reButton = document.querySelector( '#removeButton' );
+  viButton.onclick = view;
+  siButton.onclick = submit;
+  hiButton.onclick = hide;
+  reButton.onclick = remove;
+}

public/js/loginScripts.js

@@ -0,0 +1,67 @@
+// Some Javascript code here, to run on the front end on the login page
+
+window.onload = function() { // Link each button to its respective function
+  const newButton = document.querySelector( '#signupButton' );
+  newButton.onclick = signUpFunc;
+  const logButton = document.querySelector( '#loginButton' );
+  logButton.onclick = loginFunc;
+}
+
+const signUpFunc = function( e ) {
+  e.preventDefault();
+  // Handles a new user signing up
+
+  const nameInput = document.querySelector( '#newname' ),
+        passInput = document.querySelector( '#newpass' ),
+        json = { username: nameInput.value,  password: passInput.value},
+        body = JSON.stringify( json );
+        console.log(body);
+
+  fetch( '/signUp', {
+    method:'POST',
+    body 
+  })
+  .then( function( response ) {
+    // Inform the user of what the letter grade of the student is, and
+    // refresh the table view with the new student in it
+    response.json().then((data) => {
+      console.log(data);
+      if (data.userAdded === true) {
+        alert("New user added: " + nameInput.value);
+      } else {
+        alert("That username has already been taken!");
+      }
+    })
+  return false;
+  })
+}
+
+const loginFunc = function( e ) { // Handles logins
+  e.preventDefault();
+  const nameInput = document.querySelector( '#loginName' ),
+        passInput = document.querySelector( '#pass' ),
+        json = { username: nameInput.value,  password: passInput.value},
+        body = JSON.stringify( json );
+        console.log(body);
+
+  fetch( '/login', {
+    method:'POST',
+    body: body,
+    headers: { 'Content-Type': 'application/json' }
+  })
+  .then( function( response ) {
+    // Inform the user of what the letter grade of the student is, and
+    // refresh the table view with the new student in it
+    console.log( response.status );
+    if (response.status === 200 || response.status === 304) {
+      loginRedir();
+    } else {
+      alert("Login failed!");
+    }
+  return false;
+  })
+}
+
+const loginRedir = function( e ) {
+  window.location.replace('https://fp-start.glitch.me/mainview.html');
+}