Added Tools Filter to Projects Check Page (hackforla#5444)

* added code to dynamically render list for tools filter

* updated js with tools filter and html to display proper cards

* moved AWS to technologies section

* moved AWS to technologies section

* added technologies section before transferring AWS to new section

_projects/home-unite-us.md

@@ -123,16 +123,16 @@ looking:
 technologies:
   - React
   - NoSQL
+  - AWS
   - Flask
   - Amazon Cognito
   - OIDC
   - OAuth2
   - MongoDB
 location:
   - Remote
-tools: 
+tools:
   - Figma
-  - AWS
   - Nginx
   - Style Components
   - Zoom

_projects/lucky-parking.md

@@ -63,8 +63,8 @@ leadership:
   - name: Sam Sengupta
     role: UX/UI Designer
     links:
-      slack: 
-      github: 
+      slack:
+      github:
     picture: https://avatars.githubusercontent.com/u/41702879
   - name: Seymour Liao
     role: Data Scientist
@@ -81,8 +81,8 @@ leadership:
   - name: Carlos Olivas
     role: Data Scientist
     links:
-      slack: 
-      github: 
+      slack:
+      github:
     picture: https://avatars.githubusercontent.com/u/41702877
   - name: Pratibha Shivanand
     role: Data Scientist
@@ -128,17 +128,17 @@ looking:
     skill: Data Analyst/Data Scientist (data cleaning)
 technologies:
   - React
+  - AWS
   - PostgreSQL
   - Node.js
   - Mapbox
 location:
   # - Santa Monica
   - Remote
 partner: Department of Neighborhood Empowerment
-tools: 
+tools:
   - Jupyter Notebooks
   - Google Colab
-  - AWS
 program-area:
   - Citizen Engagement
 visible: true

_projects/metro-ontime.md

@@ -25,15 +25,16 @@ links:
     url: 'https://www.metro.net/'
   - name: Observable
     url: 'https://observablehq.com/@ctsexton/railstats-marey-diagram'
+technologies:
+  - AWS
 location:
   # - Downtown LA
   - Remote
 partner: LA Metro
-tools: 
-  - AWS 
+tools:
   - Observable
 visible: true
-program-area: 
+program-area:
   - Environment
 status: Completed
 ---

assets/js/current-projects-check.js

@@ -17,7 +17,7 @@ document.addEventListener("DOMContentLoaded",function(){
 
         // create filter dictionary from sorted project data
         let filters = createFilter(sortedProjectData);
-        
+
         // Insert Checkbox Filter Into The Dom
         for(let [filterName,filterValue] of Object.entries(filters)){
             // Add displayed filter title, resolves issue of "program areas" not being valid html attribute name due to spacing
@@ -161,9 +161,10 @@ function createFilter(sortedProjectData){
     return {
             // 'looking': [ ... new Set( (sortedProjectData.map(item => item.project.looking ? item.project.looking.map(item => item.category) : '')).flat() ) ].filter(v=>v!='').sort(),
             // ^ See issue #1997 for more info on why this is commented out
-            
+
             'technologies': [...new Set(sortedProjectData.map(item => (item.project.technologies?.length > 0) ? [item.project.technologies].flat() : '').flat() ) ].filter(v=>v!='').sort(),
             'languages': [...new Set(sortedProjectData.map(item => (item.project.languages?.length > 0) ? [item.project.languages].flat() : '').flat() ) ].filter(v=>v!='').sort(),
+            'tools': [...new Set(sortedProjectData.map(item => (item.project.tools?.length > 0) ? [item.project.tools].flat() : '').flat() ) ].filter(v=>v!='').sort(),
 
         }
 }
@@ -253,7 +254,7 @@ function updateFilterFrequency(){
     let filterFrequencyObject = allFilters.reduce((acc,curr)=> (acc[curr]=0,acc),{});
 
 
-    // Update values on the filterFrquencyObject if item in onPageFilter array exist as a key in this object.
+    // Update values on the filterFrequencyObject if item in onPageFilter array exist as a key in this object.
     for(const item of onPageFilters){
         if(item in filterFrequencyObject){
             filterFrequencyObject[item] += 1;
@@ -318,7 +319,7 @@ function updateProjectCardDisplayState(filterParams){
 }
 
     /**
-     * Updates the filter tags show on the page based on the url paramenter
+     * Updates the filter tags show on the page based on the url parameter
  */
 function updateFilterTagDisplayState(filterParams){
     // Clear all filter tags
@@ -429,6 +430,7 @@ return `
             data-looking="${project.looking ? [... new Set(project.looking.map(looking => looking.category)) ] : ''}"
             data-technologies="${project.technologies  ? [... new Set(project.technologies.map(tech => tech))] : '' }"
             data-languages="${project.languages ? [... new Set(project.languages.map(lang => lang))] : '' }"
+            data-tools="${project.tools ? [... new Set(project.tools.map(tool => tool))] : '' }"
             data-location="${project.location? project.location.map(city => city) : '' }"
             data-programs="${project.programAreas ? project.programAreas.map(programArea => programArea) : '' }"
         >
@@ -485,7 +487,7 @@ return `
             // ^ See issue #1997 for more info on why this is commented out
             }
 
-            ${project.languages?.length > 0 ? 
+            ${project.languages?.length > 0 ?
             `
             <div class="project-languages">
             <strong>Languages: </strong>
@@ -517,7 +519,7 @@ return `
 }
 
 /**
- * Takes a filter category name and array of filter stirings and returns the html string representing a single filter component
+ * Takes a filter category name and array of filter strings and returns the html string representing a single filter component
 */
 function dropDownFilterComponent(categoryName,filterArray,filterTitle){
     return `