more search styling

Author: ernest-phillips

app/auth/auth.router.js

@@ -51,6 +51,9 @@ authRouter.post('/refresh', jwtPassportMiddleware, (request, response) => {
     });
 });
 
-module.exports = {
-    authRouter
-};
+authRouter.post('/logout', localPassportMiddleware, (req, res) => {
+            res.header('Cache-Control', 'no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0');
+        }
+        module.exports = {
+            authRouter
+        };

public/css/main.css

@@ -13,6 +13,22 @@ body {
     background-color: #fff;
 }
 
+h1 {
+    font-size: 3rem;
+}
+
+h2 {
+    font-size: 2.5rem;
+}
+
+h3 {
+    font-size: 2rem;
+}
+
+h4 {
+    font-size: 1.5rem
+}
+
 .nav-bar {
     height: 40px;
     background-color: #131313;
@@ -182,10 +198,6 @@ max-width:370px;
     /* margin-bottom: auto; */
 }
 
-h1 {
-    font-size: 2.5rem;
-}
-
 .item {
     border: 2px solid black;
     padding: 10px;
@@ -310,13 +322,6 @@ h1 {
 
 .add-ex a: {}
 
-.search-ex {
-    height: 40px;
-    border-radius: 10px;
-    width: 422px;
-    padding: 5px;
-}
-
 .ex-item {
     display: flex;
     font-size: 1.25em;
@@ -328,15 +333,16 @@ h1 {
 .typeahead,
 .tt-query,
 .tt-hint {
-    height: 30px;
+    height: 50px;
     padding: 8px 12px;
-    font-size: 15px;
-    line-height: 30px;
+    font-size: 1.75em;
+    line-height: 50px;
     border: 2px solid #ccc;
     -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
     border-radius: 8px;
     outline: none;
+    min-width: 75%;
 }
 
 .typeahead {
@@ -390,9 +396,10 @@ h1 {
     text-align: left;
 }
 
-.twitter-typeahead {
+
+/* .twitter-typeahead {
     width: 100%;
-}
+} */
 
 
 /* Date Navigation */
@@ -433,4 +440,115 @@ h1 {
 }
 
 
-/*End Date Navigation CSS*/
+/*End Date Navigation CSS*/
+
+
+/* Search/Add workout Styles */
+
+.ex-container {
+    display: flex;
+    margin-left: auto;
+    margin-right: auto;
+    width: 960px;
+    flex-direction: column;
+}
+
+.set-wkout {
+    display: flex;
+    width: 300px;
+    min-height: 200px;
+    background-color: #ecc309;
+    /* border: #131313 2px solid; */
+    padding: 15px;
+    margin: 0 auto;
+    margin-top: 20px;
+    border-radius: 5px;
+    box-shadow: 1px 1px 5px #131313;
+}
+
+#the-basics {
+    display: flex;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 30px;
+    margin-bottom: 50px;
+    width: 100%;
+}
+
+.set-input {
+    margin-top: 15px;
+    font-size: 1.25em;
+}
+
+.search-btn {
+    /* justify-content: flex-end; */
+    height: 50px;
+    border: 0px;
+    background-color: #465C8b;
+    color: #FFF;
+    font-size: 1.75em;
+    padding: 5px 10px 5px 10px;
+    border-radius: 7px;
+    margin-left: 10px;
+    min-width: 25%;
+}
+
+.search-ex {
+    height: 50px;
+    border-radius: 10px;
+    padding: 5px;
+    font-size: 1.75em;
+}
+
+.form-save {
+    width: 100%;
+}
+
+.save-set {
+    display: flex;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 70px;
+    font-size: 2em;
+    border: none;
+    padding: 5px 10px;
+    background-color: #465C8b;
+    border-radius: 5px;
+    color: #fff;
+    border: #FFF 2px solid;
+}
+
+.save-set:hover {
+    color: #ecc309;
+}
+
+#POST-weight {
+    border-radius: 3px;
+    height: 25px;
+    width: 50%;
+    padding: 5px;
+    text-align: center;
+}
+
+#weight-lbl {
+    font-size: 1.25em;
+    vertical-align: text-top;
+}
+
+#POST-reps {
+    border-radius: 3px;
+    height: 25px;
+    width: 50%;
+    padding: 5px;
+    text-align: center;
+}
+
+#reps-lbl {
+    margin-right: 13px;
+    font-size: 1.25em;
+    vertical-align: text-top;
+}
+
+.alphalist {
+    margin-top: 30px;
+}

public/search.html

@@ -17,18 +17,39 @@
     <header class="header">
         <div class="logo">Fit-Journal</div>
         <nav class="nav-login">
-            <a id="logout-btn" href="">Log Out</a>
+            <a id="logout-btn" href="/logout">Log Out</a>
         </nav>
     </header>
 
     <main>
 
-        <section class="wo-container ">
-            <div id="the-basics">
+        <section class="ex-container ">
+            <div id="the-basics" class="">
                 <input class="search-ex typeahead" type="text" placeholder="Search Exercises" />
+                <button type="button" class="search-btn">Add Exercise</button>
             </div>
-            <div class="js-container"></div>
-
+            <div class="set-wkout">
+                <form action="/api/workout" class="js-setworkOut" method="POST">
+                    <h3 class="exerciseName "></h3>
+                    <div class="set-input">
+                        <label id="reps-lbl" for="POST-reps">Number of reps:</label>
+                        <input id="POST-reps" type="text" name="reps">
+                    </div>
+                    <div class="set-input">
+                        <label id="weight-lbl" for="POST-weight">Amount of weight:</label>
+                        <input id="POST-weight" type="text" name="weight">
+                    </div>
+                    <div class="form-save">
+                        <button class="save-set">Save Set</button>
+                    </div>
+                </form>
+            </div>
+            <div class="js-container alphalist"></div>
+            <ul>
+                <li>
+                    <h3>A</h3>
+                </li>
+            </ul>
 
         </section>
 

public/search.js

@@ -25,7 +25,7 @@ function typeAhead(exercises) {
     }, {
         name: 'exercises',
         source: substringMatcher(exercises)
-    })
+    });
 }
 // GET EXERCISES
 function getUserExercises() {
@@ -40,27 +40,42 @@ function getUserExercises() {
         });
 }
 
-function showExercises(item) {
-    let exercises = [];
-    console.log(item)
-        // exercises.push(item.exercise);    
-        // for (let i=0; i < item.length)
-        // $('.js-container').append(`<p class="ex-item">${item.exercise}</p>`)
-        // typeAhead(exercises);
-}
-
 function exerciseLoop(res) {
     let exercises = []
-        // res.map((item, index) => showExercises(item));
     res.map(item => exercises.push(item.exercise))
     console.log(exercises)
     typeAhead(exercises)
 }
 
+function clearInput() {
+    $('input').val("")
+}
+
+
+
+// Save exercise set to workout
+// capture name of exercise
+function selectExercise() {
+    $('.search-btn').on('click', function() {
+        let searchVal = $('.search-ex').val();
+        $('.exerciseName').html(`${searchVal}`);
+    });
+
+}
+// unhide set adder
+function showSetAdd() {
+
+}
+
+function
+// save to workout
+
+
 function onPageLoad() {
-    typeAhead();
+    // typeAhead();
+    clearInput();
     getUserExercises();
-
+    selectExercise();
 }