filters added

shliamin · Jul 27, 2024 · 0ae826e · 0ae826e
1 parent 503ee9e
commit 0ae826e
Showing 1 changed file with 48 additions and 35 deletions.
diff --git a/filter.js b/filter.js
@@ -1,41 +1,54 @@
+let allProjects = [];
+
 document.addEventListener('DOMContentLoaded', () => {
     document.getElementById('tech-fields').addEventListener('change', updateTechStack);
     document.getElementById('tech-stack').addEventListener('change', filterProjects);
 
-
     axios.get('projects.json')
         .then(response => {
-            const projects = response.data;
+            allProjects = response.data; 
             const projectsGrid = document.getElementById('projects-grid');
-            projectsGrid.innerHTML = ''; 
-
-            projects.forEach(project => {
-                const projectCard = document.createElement('div');
-                projectCard.classList.add('col-md-4', 'col-sm-6', 'col-12', 'mb-4', 'project');
-                projectCard.setAttribute('data-tech-field', project.techField);
-                projectCard.setAttribute('data-tech-stack', project.techStack);
-                projectCard.innerHTML = `
-                    <div class="card project" onclick="loadProjectDetails('${project.name}', '${project.description}', '${project.github}', '${project.demo}', '${project.status}', '${project.images.description}', '${project.technologies}');" uk-toggle="target: #project-modal">
-                        <div class="card-img-top" style="background-image: url('${project.images.card}');">
-                            <div class="badge-ribbon">${project.name}</div>
-                            <div class="card-body-overlay">
-                                <div class="icons-row">
-                                    ${project.icons.map(icon => `<img src="${icon}" class="technology-icon" alt="${icon.split('/').pop().split('.')[0]} Icon">`).join('')}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                `;
-                projectsGrid.appendChild(projectCard);
-            });
+            projectsGrid.innerHTML = '';
+
+
+            allProjects.sort((a, b) => a.priority - b.priority);
 
-            filterProjects(); 
+
+            displayProjects(allProjects);
         })
         .catch(error => {
             console.error('Error loading projects:', error);
         });
 });
 
+function displayProjects(projects) {
+    const projectsGrid = document.getElementById('projects-grid');
+    projectsGrid.innerHTML = '';
+
+    projects.forEach(project => {
+        const projectCard = document.createElement('div');
+        projectCard.classList.add('col-md-4', 'col-sm-6', 'col-12', 'mb-4', 'project');
+        projectCard.setAttribute('data-tech-field', project.techField);
+        projectCard.setAttribute('data-tech-stack', project.techStack);
+        projectCard.innerHTML = `
+            <div class="card project" onclick="loadProjectDetails('${project.name}', '${project.description}', '${project.github}', '${project.demo}', '${project.status}', '${project.images.description}', '${project.technologies}');" uk-toggle="target: #project-modal">
+                <div class="card-img-top" style="background-image: url('${project.images.card}');">
+                    <div class="badge-ribbon">${project.name}</div>
+                    <div class="card-body-overlay">
+                        <div class="icons-row">
+                            ${project.icons.map(icon => `<img src="${icon}" class="technology-icon" alt="${icon.split('/').pop().split('.')[0]} Icon">`).join('')}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+        projectsGrid.appendChild(projectCard);
+    });
+
+    const noResultsMessage = document.getElementById('no-results-message');
+    noResultsMessage.style.display = projects.length > 0 ? 'none' : 'block';
+}
+
 function loadProjectDetails(title, description, githubLink, websiteLink, status, imageUrl, techStack) {
     document.getElementById('project-title').innerText = title;
     document.getElementById('project-description').innerText = description;
@@ -95,27 +108,27 @@ function updateTechStack() {
 function filterProjects() {
     const techFields = document.getElementById('tech-fields').value;
     const techStack = document.getElementById('tech-stack').value;
-    const projectsGrid = document.querySelector('.projects-grid');
-    const projects = Array.from(projectsGrid.querySelectorAll('.project'));
-    let hasVisibleProjects = false;
 
-    projects.forEach(project => {
-        const projectTechField = project.getAttribute('data-tech-field');
-        const projectTechStack = project.getAttribute('data-tech-stack');
+    let filteredProjects = allProjects.filter(project => {
+        const projectTechField = project.techField || '';
+        const projectTechStack = project.techStack || '';
         let show = true;
 
-        if (techFields && projectTechField !== techFields) {
+        if (techFields && !projectTechField.includes(techFields)) {
             show = false;
         }
 
-        if (techStack && projectTechStack !== techStack) {
+        if (techStack && !projectTechStack.includes(techStack)) {
             show = false;
         }
 
-        project.classList.toggle('hidden', !show);
-        hasVisibleProjects = hasVisibleProjects || show;
+        return show;
     });
 
+    filteredProjects.sort((a, b) => a.priority - b.priority);
+
+    displayProjects(filteredProjects);
+
     const noResultsMessage = document.getElementById('no-results-message');
-    noResultsMessage.style.display = hasVisibleProjects ? 'none' : 'block';
+    noResultsMessage.style.display = filteredProjects.length > 0 ? 'none' : 'block';
 }