page top H1 now loads dynamicaly. by using req.query was able to pass in the pageCategory. each button link includes ?category=<category.id> which can be passed through express req.query and recieved on the incoming page.

Author: sspaeth1

middleware/getPageCategoryId.js

@@ -0,0 +1,7 @@
+let url = new URLSearchParams(window.location.search);
+let pageCategoryId = url.get("categoryId");
+
+let getEl = document.querySelector("#setPageCategoryId");
+getEl.setAttribute("data", pageCategoryId);
+
+console.log(pageCategoryId);

public/css/app.css

@@ -188,7 +188,7 @@ section#scoring h1 span{
 } 
 
 .artEntriesTitle{
-	min-height: 405px;
+	min-height: 390px;
     background-color: #eee;
     padding: 5%;
 }
@@ -618,15 +618,16 @@ h1.formField{
     white-space: nowrap;
     width: 90%;
 }
-@media screen and (min-width: 990){
-		img[alt="Home button"]{
-	  margin-left: 10px;
-	  height:35px;
-	  width: 25px;
-  }
+@media only screen and (max-width: 990px){
+	img[alt="Home button"]{
+		visibility: collapse;
+	}
 }
+
 img[alt="Home button"]{
-	visibility: collapse;
+	margin-left: 10px;
+	height:35px;
+	width: 25px;
 }
 
   .btn-secondary:focus, .btn-secondary.focus {

public/css/app.css.map

@@ -97,34 +97,45 @@ router.get("/appendixB", (req, res) => res.render("appendixB"));
 
 // My Judging Categories
 router.get("/artentries", isLoggedIn, async function (req, res) {
-  let score = await GeneralScore.find({}, function (err, score) {
-    if (err) {
-      console.log(err.message);
-    }
-  });
-
-  ArtEntry.find({}, function (err, artentries) {
-    if (err) {
-      console.log("Art Entries page: ", err.message);
-    }
-    res.render("artentries", {
-      artentries: artentries,
-      score: score,
-      DBX_API_KEY: DBX_API_KEY,
-    });
-    // console.log(ArtEntry.find({ category: "A-1" }));
-  })
-    .populate("judge")
-    .populate("score_general")
-    .exec((err, artEntryFound) => {
+  try {
+    let pageCategoryId = req.query;
+    let score = await GeneralScore.find({}, function (err, score) {
       if (err) {
-        console.log("art etry populate: " + err.message);
+        console.log(err);
       }
+      return score;
     });
+
+    ArtEntry.find({}, function (err, artentries) {
+      if (err) {
+        console.log("Art Entries page: ", err.message);
+      }
+      res.render("artentries", {
+        artentries,
+        score,
+        DBX_API_KEY,
+        pageCategoryId,
+        categorySpecifics,
+        letterIndex,
+      });
+      console.log(pageCategoryId);
+    })
+      .populate("judge")
+      .populate("score_general")
+      .exec((err, artEntryFound) => {
+        if (err) {
+          console.log("art etry populate: " + err.message);
+        }
+      });
+  } catch (err) {
+    console.log("go to artentries page catch err: " + err.message);
+    res.redirect("/index");
+  }
 });
 
 router.get("/artentries/:id", isLoggedIn, async (req, res) => {
   try {
+    let pageCategoryId = req.query;
     let findScore = await GeneralScore.findOne({
       judge: req.user.id,
       entryId: req.params.id,
@@ -191,6 +202,7 @@ router.get("/artentries/:id", isLoggedIn, async (req, res) => {
       notes,
       complete,
       letterIndex,
+      pageCategoryId,
       categorySpecifics,
       gnrl_part1_1_message,
       gnrl_part1_2_audience,

public/css/app.scss

@@ -10,7 +10,25 @@
     });
   </script>
 
-<h1  class="fullSpan">My judging category:  <%= artentries[0].category %> </h1>
+<h1  class="fullSpan">
+  <span class="darkOrange font-weight-bold"><%=  pageCategoryId.categoryId %>: <%= categorySpecifics[letterIndex.indexOf(pageCategoryId.categoryId)].type  %> </span>
+<br>
+  <span  class="myCategorySpecific" ><%= categorySpecifics[letterIndex.indexOf(pageCategoryId.categoryId)].subtype  %></span>        
+   <span class=""><%= categorySpecifics[letterIndex.indexOf(pageCategoryId.categoryId)].specific  %></span>       
+
+   </h1>
+
+<script>
+    let url = new URLSearchParams(window.location.search);
+  let pageCategoryId = url.get("categoryId");
+
+  let getEl = document.querySelector("#setPageCategoryId");
+  getEl.setAttribute("data", pageCategoryId);
+
+  console.log(pageCategoryId);
+</script>
+<div id="setPageCategoryId" data=""></div>
+
 <article class="appendixContainer">
   <p class="alert alert-warning alert-dismissible fade show" role="alert">The goal is to have this page dynamically populate from the submissions on AMI.org via the dropbox folders  
     <button type="button" class="close" data-dismiss="alert" aria-label="Close">
@@ -24,7 +42,7 @@
  <script> console.log($('div.winVar').html())</script> -->
    <div class="row entries">
     <% for( let i = 0 ; i < artentries.length -1 ; i++){  
-       if( artentries[i].category === "B"){   %>
+       if( artentries[i].category ===  pageCategoryId.categoryId ){   %>
 
        
       <div class="col-lg-4 col-md-6 col-sm-6 mt-5" id="item<%= i %>">
@@ -33,10 +51,10 @@
           <a src="/artentries/<%= artentries[i]._id %>">  
             <img src="<%= artentries[i].image%>" class="card-img-top" alt="Image for scoring" > </a> 
         </div>
-        <div class="artEntriesTitle">
+        <div class="artEntriesTitle">  
            
             <h5>
-               <%=  artentries[i].title.substring(0,50) %>...
+               <%=  artentries[i].title.substring(0,150) %>...
             </h5>
             <p> <div class="orange font-weight-bolder threeQuarterRem ">Primary Audience: </div> <%= artentries[i].primaryAudience %></p>
             <p> <div class="orange font-weight-bolder threeQuarterRem ">Intended purpose: </div><%= artentries[i].intended_purpose.substring(0,50) %>... </p> 
@@ -48,7 +66,7 @@
              
          <%   }else{  //} if(score[j].complete !== true ){ %>
         
-            <div class="scoreThisEntry">   <a href="/artentries/<%= artentries[i]._id %>"  name="<%= artentries[i]._id %>"  class="btn btn-primary lg"> Score this entry</a></div> 
+            <div class="scoreThisEntry">   <a href="/artentries/<%= artentries[i]._id %>?<%= pageCategoryId.categoryId%>"  name="<%= artentries[i]._id %>"  class="btn btn-primary lg"> Score this entry</a></div> 
             <% }
            } %>
         </div>

routes/index.js

@@ -20,7 +20,7 @@
 
   <body>
 
-    <nav class="navbar navbar-expand-lg  headerNav" role="navigation">
+    <nav class="navbar navbar-expand-md  headerNav" role="navigation">
      <div class="container-fluid" id="navfluid">
        <div class="col-10">
             <div class="navbar-brand"> <a href="/">  <img src="/images/logo.png" href="/home"></a></div>
@@ -79,7 +79,7 @@
               <% if(currentUser){ %>
                 <div class="dropdown-menu" aria-labelledby="navbarDropdown1">
                 <% currentUser.assignedCategories.forEach(category => { %>
-                  <a class="dropdown-item" href="../categories/artentries<%= category.letter %>"> <%= category.letter %>: <%= category.name %> </a> 
+                  <a class="dropdown-item" href="../artentries?categoryId=<%= category.letter %>"> <%= category.letter %>: <%= category.name %> </a> 
                <% }); %>
               </div>
               <%  } %>   

views/artentries.ejs

@@ -27,7 +27,7 @@
      </h1>
 
 
-<button type="button" class="btn btn-primary m-2  btn-lg  buttonReturn" style="margin-left:5%;" ><a href="/artentries">Back to entries in this category</a></button>
+     <button type="button" class="btn btn-primary m-2  btn-lg  buttonReturn" style="margin-left:5%;" ><a href="/artentries?categoryId=<%= artentries.category%>">Back to entries in this category</a></button>
 
 <main class="centerRatingPage">
 
@@ -88,8 +88,7 @@
    <% } %> 
 
 
-<button type="button" class="btn btn-primary m-2  btn-lg  buttonReturn" style="margin-left:5%;" ><a href="/artentries">Back to entries in this category</a></button>
-
+   <button type="button" class="btn btn-primary m-2  btn-lg  buttonReturn" style="margin-left:5%;" ><a href="/artentries?categoryId=<%= artentries.category%>">Back to entries in this category</a></button>
 
 
 <script src="/js/dropboxFileThumbSort.js"  id="helper" data-name="<%= DBX_API_KEY %>"  type="module"> </script>