Implementing client-side filtering for my projects.

Gabri432 · Jun 9, 2024 · 5b9df2e · 5b9df2e
1 parent 1f26c67
commit 5b9df2e
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 55 deletions.
diff --git a/src/app/routes/my-projects/content/project-languages.ts b/src/app/routes/my-projects/content/project-languages.ts
@@ -0,0 +1,3 @@
+export const languages: Array<string> = [
+    "Angular", "Java", "Go"
+]
diff --git a/src/app/routes/my-projects/content/projects.ts b/src/app/routes/my-projects/content/projects.ts
@@ -0,0 +1,55 @@
+import { Project } from "../models/project";
+
+export const mainProjects: Array<Project> = [
+    {
+        name: "TypoChecker.java", 
+        description: "A Java program that, given a typo, will suggest the closest matching words.", 
+        link: "https://github.com/Gabri432/java-unimi/blob/master/random_programs/TypoChecker.java", 
+        languages: ["Java"]
+      },
+      {
+        name: "RelationSet.java", 
+        description: "A Java program that classifies the property of a given mathematical set.",
+        link: "https://github.com/Gabri432/java-unimi/blob/master/random_programs/RelationSet.java", 
+        languages: ["Java"]
+      },
+      {
+        name: "CommandLine.java", 
+        description: "A Java program that simulates the behavior of a command line to perform simple math operations.", 
+        link: "https://github.com/Gabri432/java-unimi/blob/master/random_programs/CommandLine.java",
+        languages: ["Java"]
+      },
+      {
+        name: "equation-solver", 
+        description: "A program written in Go that can solve any linear, quadratic or cubic equation.", 
+        link: "https://github.com/Gabri432/equation-solver", 
+        languages: ["Go"]
+      },
+      {
+        name: "gophysics", 
+        description: "A library written in Go that contains a list of several famous Physics formula to make calculations.", 
+        link: "https://github.com/Gabri432/gophysics", 
+        languages: ["Go"]
+      },
+      {
+        name: "LaplaceExpansion", 
+        description: "A program written in Go to calculate the determinant of 3x3 and 4x4 matrices using the Laplace Theorem.", 
+        link: "https://github.com/Gabri432/LaplaceExpansion", 
+        languages: ["Go"]
+      },
+      {
+        name: "angular-personal-website",
+        description: "A personal website (this one you are using) made with the Angular framework (16+).", 
+        link: "https://github.com/Gabri432/angular-personal-website", 
+        languages: ["Angular", "Typescript"]
+      }
+]
+
+export const extraProjects: Array<Project> = [
+    {
+        name: "angular-cv-builder",
+        description: "A website that helps create your resume.", 
+        link: "https://angular-cv-builder.pages.dev/", 
+        languages: ["Angular", "Typescript"]
+    }
+]
diff --git a/src/app/routes/my-projects/my-projects.component.html b/src/app/routes/my-projects/my-projects.component.html
@@ -1,5 +1,8 @@
 <div id="project-section">
     <h2>My projects</h2>
+    <div id="project-options" *ngIf="this.pathName">
+        <a class="option" (click)="filterProjects(option)" *ngFor="let option of optionBar" class="project-{{optionBar[optionBar.indexOf(option)]}}">{{option}} </a>
+    </div>
     <div id="project-grid">
         <div *ngFor="let project of displayProjects">
             <app-project-displayer [proj]="project"></app-project-displayer>

diff --git a/src/app/routes/my-projects/my-projects.component.scss b/src/app/routes/my-projects/my-projects.component.scss
@@ -15,6 +15,36 @@
         color: grey;
         font-size: 34px;
     }
+
+    #project-options {
+        text-align: center;
+        min-height: 10vh;
+        width: 80%;
+        margin-left: 10%;
+        word-break: break-word;
+        line-height: 2.5;
+
+        .option {
+            border: 1px solid grey;
+            padding: 5px;
+            text-align: center;
+            margin: 5px;
+            border-radius: 5px;
+            min-width: 8ch;
+            text-decoration: none;
+            color: black;
+        }
+
+        .option:hover {
+            background-color: black;
+            color: white;
+        }
+
+        .project-Angular { border-color: red;}
+        .project-Java { border-color: orange;}
+        .project-Javascript { border-color: yellow;}
+        .project-Go { border-color: lightblue;}
+    }
 }
 
 @media only screen and (max-width: 899px) {

diff --git a/src/app/routes/my-projects/my-projects.component.ts b/src/app/routes/my-projects/my-projects.component.ts
@@ -1,5 +1,7 @@
 import { Component, Input } from '@angular/core';
 import { Project } from './models/project';
+import { languages } from './content/project-languages';
+import { mainProjects, extraProjects } from '../my-projects/content/projects';
 
 @Component({
   selector: 'app-my-projects',
@@ -10,67 +12,29 @@ export class MyProjectsComponent {
 
   @Input() displayProjects: Array<Project> = []
 
-  projects: Array<Project> = [
-    {
-      name: "TypoChecker.java", 
-      description: "A Java program that, given a typo, will suggest the closest matching words.", 
-      link: "https://github.com/Gabri432/java-unimi/blob/master/random_programs/TypoChecker.java", 
-      languages: ["Java"]
-    },
-    {
-      name: "RelationSet.java", 
-      description: "A Java program that classifies the property of a given mathematical set.",
-      link: "https://github.com/Gabri432/java-unimi/blob/master/random_programs/RelationSet.java", 
-      languages: ["Java"]
-    },
-    {
-      name: "CommandLine.java", 
-      description: "A Java program that simulates the behavior of a command line to perform simple math operations.", 
-      link: "https://github.com/Gabri432/java-unimi/blob/master/random_programs/CommandLine.java",
-      languages: ["Java"]
-    },
-    {
-      name: "equation-solver", 
-      description: "A program written in Go that can solve any linear, quadratic or cubic equation.", 
-      link: "https://github.com/Gabri432/equation-solver", 
-      languages: ["Go"]
-    },
-    {
-      name: "gophysics", 
-      description: "A library written in Go that contains a list of several famous Physics formula to make calculations.", 
-      link: "https://github.com/Gabri432/gophysics", 
-      languages: ["Go"]
-    },
-    {
-      name: "LaplaceExpansion", 
-      description: "A program written in Go to calculate the determinant of 3x3 and 4x4 matrices using the Laplace Theorem.", 
-      link: "https://github.com/Gabri432/LaplaceExpansion", 
-      languages: ["Go"]
-    },
-    {
-      name: "angular-personal-website",
-      description: "A personal website (this one you are using) made with the Angular framework (16+).", 
-      link: "https://github.com/Gabri432/angular-personal-website", 
-      languages: ["Angular", "Typescript"]
-    }
-  ];
 
-  otherProjects: Array<Project> = [
-    {
-      name: "angular-cv-builder",
-      description: "A website that helps create your resume.", 
-      link: "https://angular-cv-builder.pages.dev/", 
-      languages: ["Angular", "Typescript"]
-    }
-  ]
+  optionBar: string[] = [...languages];
+  pathName = "";
 
   ngOnInit() {
-    this.displayProjects = this.projects;
+    this.displayProjects = [...mainProjects];
     if (window.location.pathname.includes("/projects")) {
-      this.projects.push(...this.otherProjects);
-      this.displayProjects = this.projects;
+      this.pathName = "projects";
+      this.displayProjects.push(...extraProjects);
       this.changeJSONLDSchema();
     }
+    if (this.displayProjects.length == mainProjects.length) {
+      console.log("Error")
+    }
+  }
+
+  filterProjects(language: string) {
+    this.displayProjects = [];
+    for (const project of [...mainProjects, ...extraProjects]) {
+      if (project.languages.includes(language)) {
+        this.displayProjects.push(project);
+      }
+    }
   }
 
   changeJSONLDSchema(): void {