got ensureAuth and sessions working. Notes and timer CSS implemented.

controllers/fitnessApp.js

@@ -59,5 +59,15 @@ module.exports = {
         } catch (err) {
             console.log(err)
         }
+    },
+
+    addNote: async (req, res) => {
+        try {
+            await Exercises.findOneAndUpdate({_id:req.params.id}, {$set: {notes: req.body.notes}})
+            console.log('Note Added')
+            res.redirect('/fitnessApp')
+        }  catch (err) {
+            console.log(err)
+        }
     }
 }

middleware/auth.js

@@ -1,4 +1,4 @@
-module.export = {
+module.exports = {
     ensureAuth: function (req, res, next) {
         if (req.isAuthenticated()) {
             return next()

models/exercises.js

@@ -15,12 +15,21 @@ const ExerciseSchema = new mongoose.Schema({
     },
     decription: {
         type: String,
-        require: true,
+        require: false,
     },
     userId: {
         type: String,
         require: true,
+    },
+    notes: {
+        type: String,
+        require: false,
+    },
+    date: {
+        type: Date,
+        require: true,
     }
+
 })
 
 module.exports = mongoose.model('Exercise', ExerciseSchema)

public/assets/css/fitnessApp.css

@@ -27,10 +27,14 @@ main {
     border-radius: 1%;
 }
 
-.exerciseList, .exerciseControls, .setsAndReps, .extraActions, .appActions, .setsAndReps, .setsAndReps form {
+.exerciseList, .exerciseControls, .setsAndReps, .extraActions, .appActions, .setsAndReps, .setsAndReps form, .extraActionPanel {
     display: flex;
 }
 
+button, i, #date {
+    cursor: pointer;
+}
+
 /* Header / Photo / Footer*/
 header, footer, footer a {
     color: white;
@@ -59,10 +63,9 @@ footer a {
 .exerciseList {
     flex-direction: column;
     padding: 1em 0 1em 0;
-    gap: 1em;
 }
 
-.exerciseControls, .extraActions {
+.exerciseControls, .extraActions, .extraActionPanel {
     background-color: rgb(247, 247, 247);
 }
 
@@ -71,10 +74,6 @@ footer a {
     align-content: center;
 }
 
-.exerciseControls {
-    width: 100%;
-}
-
 .exerciseTitle, .exerciseButtons {
     align-self: center;
     height: 100%;
@@ -93,8 +92,34 @@ footer a {
     flex-direction: column;
 }
 
-.exerciseButtons {
-    cursor: pointer;
+
+/* Timer / Notes */
+
+.extraActionPanel {
+    justify-content: space-between;
+    padding: 1em;
+    align-items: center;
+}
+
+.notes {
+    flex: 3;
+}
+
+.notes textarea {
+    width: 100%;
+}
+
+.timer {
+    flex: 1;
+}
+
+.fa-play {
+    margin-right: 0.5em;
+    margin-left: 0.5em;
+}
+
+.fa-play:hover, .fa-pause:hover {
+    color: rgb(200, 113, 136);
 }
 
 /* Ending App Actions */
@@ -121,5 +146,9 @@ footer a {
 }
 
 .appActions li a:active, .appActions li a:hover {
-    background-color: rgba(255, 255, 255, 0.2);
+    -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+    -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+    -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+    background-color: rgb(200, 113, 136);
 }

public/assets/js/fitnessApp.js

@@ -1,15 +1,4 @@
-// Unhiding Sections
 
-// document.querySelectorAll('.fa-note-sticky').addEventListener('click', showNotes)
-// document.querySelectorAll('.fa-stopwatch').addEventListener('click', showTimer)
-
-function showNotes () {
-    //TODO
-}
-
-function showTimer() {
-    // TODO
-}
 
 // Date setting
 // function setDate () {
@@ -31,7 +20,7 @@ async function quoteApiRequest() {
         let res = await fetch('https://api.kanye.rest')
         let data = await res.json()
 
-        // runs API fetch again if risky quotes are given.
+        // runs API fetch again if the more risqué quotes are given.
         if (data.quote === 'I feel like me and Taylor might still have sex' || data.quote === 'Shut the fuck up I will fucking laser you with alien fucking eyes and explode your fucking head' ) {
             res = await fetch('https://api.kanye.rest')
             data = await res.json()

routes/fitnessApp.js

@@ -3,7 +3,7 @@ const router = express.Router()
 const fitnessAppController = require('../controllers/fitnessApp')
 const {ensureAuth} = require('../middleware/auth')
 
-router.get('/', fitnessAppController.getFitApp)
+router.get('/', ensureAuth, fitnessAppController.getFitApp)
 
 router.post('/createExercise', fitnessAppController.createExercise)
 

server.js

@@ -3,7 +3,7 @@ const app = express()
 const mongoose = require('mongoose')
 const passport = require('passport')
 const session = require('express-session')
-// const MongoStore = require("connect-mongo")
+const MongoStore = require("connect-mongo")
 const methodOverride = require('method-override')
 const flash = require('express-flash')
 const logger = require('morgan')
@@ -42,7 +42,8 @@ app.use(
         secret: 'keyboard cat',
         resave: false,
         saveUninitialized: false,
-        // store: new MongoStore({ mongooseConnection: mongoose.connection })
+        store: new MongoStore({ mongoUrl: process.env.DB_STRING }),
+        // cookie: {secure: true}
     })
 )
 

views/fitnessApp.ejs

@@ -49,19 +49,19 @@
 											<section class="exerciseButtons">
 												<form action="/fitnessApp/deleteExercise<%= el._id %>?_method=DELETE" method="post">
 													<button type='submit' class="fa-solid fa-trash"></button>
-													<button class="fa-solid fa-stopwatch"></button>
-													<button class="fa-solid fa-note-sticky"></button>
 												</form>
 											</section>
 										</section>
 										<section class="extraActionPanel">
-											<section class="timer hidden">
+											<section class="timer">
 												<span>00:00</span>
 												<i class="fa-solid fa-play"></i><i class="fa-solid fa-pause"></i>
 											</section>
-											<section class="notes hidden">
-												<textarea name="notes" id=""></textarea>
-												<button class='noteSubmit' href="#">Submit</button>
+											<section class=notes>
+												<form action="/fitnessApp/addNote<%= el._id %>?_method=PUT" method="post">
+													<textarea name="notes" placeholder="Notes..."><%= el.notes %></textarea>
+													<button class='noteSubmit' href="">Submit</button>
+												</form>
 											</section>
 										</section>
 									<% }) %>