Backend: Created multiple categories for tags, removed specific ones. Frontend: Adapted to new database, deleted processdata.js which is no longer used.

backend/db/2_categories.sql

@@ -0,0 +1,13 @@
+-- public.categories definition
+
+-- Drop table
+
+-- DROP TABLE public.categories;
+
+CREATE TABLE public.categories (
+	id serial4 NOT NULL,
+	"name" text NOT NULL,
+	icon text NOT NULL,
+	type_icon text NOT NULL,
+	CONSTRAINT categories_pk PRIMARY KEY (id)
+);

backend/db/3_skills.sql

@@ -0,0 +1,17 @@
+-- public.skills definition
+
+-- Drop table
+
+-- DROP TABLE public.skills;
+
+CREATE TABLE public.skills (
+	id serial4 NOT NULL,
+	category_id int4 DEFAULT nextval('skills_category_seq'::regclass) NOT NULL,
+	skill text NULL,
+	icon text NULL,
+	type_icon text NULL,
+	color varchar(7) NULL,
+	is_shown bool NULL,
+	CONSTRAINT skills_pk PRIMARY KEY (id),
+	CONSTRAINT skills_categories_fk FOREIGN KEY (category_id) REFERENCES public.categories(id)
+);

backend/db/4_categories_text.sql

@@ -0,0 +1,13 @@
+-- public.categories_text definition
+
+-- Drop table
+
+-- DROP TABLE public.categories_text;
+
+CREATE TABLE public.categories_text (
+	category_id serial4 NOT NULL,
+	lang_id serial4 NOT NULL,
+	"name" text NOT NULL,
+	CONSTRAINT categories_text_categories_fk FOREIGN KEY (category_id) REFERENCES public.categories(id),
+	CONSTRAINT categories_text_languages_fk FOREIGN KEY (lang_id) REFERENCES public.languages(id)
+);

backend/db/4_info_text.sql

@@ -4,11 +4,11 @@
 
 -- DROP TABLE public.skills;
 
-CREATE TABLE public.skills (
+CREATE TABLE public.info_text (
 	softskills text NULL,
 	interests text NULL,
-	lang_id serial4 NOT NULL,
+	lang_id int4 NOT NULL,
 	title text NULL,
 	description text NULL,
 	CONSTRAINT skills_languages_fk FOREIGN KEY (lang_id) REFERENCES public.languages(id)
-);
+);;

backend/db/5_programming_languages.sql

@@ -1,14 +0,0 @@
--- public.programming_languages definition
-
--- Drop table
-
--- DROP TABLE public.programming_languages;
-
-CREATE TABLE public.programming_languages (
-	id serial4 NOT NULL,
-	lang text NOT NULL,
-	icon text NOT NULL,
-	type_icon text NOT NULL,
-	color varchar(7) NULL,
-	CONSTRAINT programming_languages_pkey PRIMARY KEY (id)
-);

backend/db/5_softwares.sql

@@ -1,14 +0,0 @@
--- public.softwares definition
-
--- Drop table
-
--- DROP TABLE public.softwares;
-
-CREATE TABLE public.softwares (
-	id serial4 NOT NULL,
-	software text NOT NULL,
-	icon text NOT NULL,
-	type_icon text NOT NULL,
-	color varchar(7) NULL,
-	CONSTRAINT softwares_pkey PRIMARY KEY (id)
-);

backend/db/6_project_tags.sql

@@ -6,9 +6,7 @@
 
 CREATE TABLE public.project_tags (
 	project_id int4 NOT NULL,
-	programming_languages_id int4 NULL,
-	softwares_id int4 NULL,
-	CONSTRAINT project_tags_programming_languages_fk FOREIGN KEY (programming_languages_id) REFERENCES public.programming_languages(id),
+	skills_id int4 NOT NULL,
 	CONSTRAINT project_tags_project_fk FOREIGN KEY (project_id) REFERENCES public.project(id),
-	CONSTRAINT project_tags_softwares_fk FOREIGN KEY (softwares_id) REFERENCES public.softwares(id)
+	CONSTRAINT project_tags_skills_fk FOREIGN KEY (skills_id) REFERENCES public.skills(id)
 );

backend/src/db.rs

@@ -57,19 +57,26 @@ pub struct Project {
 }
 
 #[derive(Deserialize, Serialize)]
-pub struct ProgrammingLanguages {
-    pub lang: Option<String>,
+pub struct Categories {
+    pub id: Option<i32>,
+    pub name: Option<String>
+}
+
+#[derive(Deserialize,Serialize,Clone)]
+pub struct CategoriesText {
     pub icon: Option<String>,
     pub type_icon: Option<String>,
-    pub color: Option<String>
+    pub name: Option<String>
 }
 
 #[derive(Deserialize, Serialize)]
-pub struct Softwares {
-    pub software: Option<String>,
+pub struct Skills {
+    pub id: Option<i32>,
+    pub skill: Option<String>,
     pub icon: Option<String>,
     pub type_icon: Option<String>,
-    pub color: Option<String>
+    pub color: Option<String>,
+    pub is_shown: Option<bool>
 }
 
 #[derive(Deserialize, Serialize)]
@@ -81,20 +88,13 @@ pub struct Languages {
 }
 
 #[derive(Deserialize, Serialize)]
-pub struct Tags {
-    pub lang: Option<String>,
-    pub icon: Option<String>,
-    pub type_icon: Option<String>,
-    pub color: Option<String>
-}
-
-#[derive(Deserialize, Serialize)]
-pub struct AllTags {
+pub struct AllSkills {
     pub project_id: Option<i32>,
-    pub lang: Option<String>,
+    pub skill: Option<String>,
     pub icon: Option<String>,
     pub type_icon: Option<String>,
-    pub color: Option<String>
+    pub color: Option<String>,
+    pub is_shown: Option<bool>
 }
 
 #[derive(Deserialize, Serialize)]
@@ -102,3 +102,8 @@ pub struct SimpleProject {
     pub project_id: Option<i32>,
     pub title: Option<String>
 }
+
+#[derive(Deserialize,Serialize)]
+pub struct Id {
+    pub id: Option<i32>
+}

backend/src/main.rs

@@ -11,8 +11,8 @@ use tower_http::cors::CorsLayer;
 
 mod db;
 use db::{
-    AllTags, Education, Experience, Info, LangId, Languages, ProgrammingLanguages, Project,
-    SimpleProject, Softwares, Tags,
+    AllSkills, Categories, CategoriesText, Education, Experience, Id, Info, LangId, Languages,
+    Project, SimpleProject, Skills,
 };
 
 #[tokio::main]
@@ -32,17 +32,11 @@ async fn main() -> Result<()> {
         .route("/education/:lang_id", get(education))
         .route("/experience/:lang_id", get(experience))
         .route("/project/:lang_id", get(projects))
+        .route("/categories/:lang_id", get(categories_text))
         .route("/hard_skills", get(hard_skills))
         .route("/tags/:project_id", get(tags))
         .route("/tags", get(alltags))
-        .route(
-            "/getproject_programming/:programming_id/:lang_id",
-            get(getproject_programming),
-        )
-        .route(
-            "/getproject_software/:software_id/:lang_id",
-            get(getproject_software),
-        )
+        .route("/getproject_programming/:lang_id", get(getproject_skills))
         .with_state(pool)
         .layer(CorsLayer::very_permissive());
 
@@ -80,10 +74,10 @@ async fn info(Path(lang_id): Path<i32>, State(pool): State<PgPool>) -> Json<Vec<
         (SELECT email FROM public.info LIMIT 1) AS email,
         (SELECT birth_year FROM public.info LIMIT 1) AS birth_year,
         (SELECT profile_pic FROM public.info LIMIT 1) AS profile_pic,
-        (SELECT title FROM public.skills WHERE lang_id = $1 LIMIT 1) AS title,
-        (SELECT softskills FROM public.skills WHERE lang_id = $1 LIMIT 1) AS softskills,
-        (SELECT interests FROM public.skills WHERE lang_id = $1 LIMIT 1) AS interests,
-        (SELECT description FROM public.skills WHERE lang_id = $1 LIMIT 1) AS description;",
+        (SELECT title FROM public.info_text WHERE lang_id = $1 LIMIT 1) AS title,
+        (SELECT softskills FROM public.info_text WHERE lang_id = $1 LIMIT 1) AS softskills,
+        (SELECT interests FROM public.info_text WHERE lang_id = $1 LIMIT 1) AS interests,
+        (SELECT description FROM public.info_text WHERE lang_id = $1 LIMIT 1) AS description;",
         lang_id
     )
     .fetch_all(&pool)
@@ -166,37 +160,44 @@ ORDER BY p.date_done DESC;",
     Json(datas)
 }
 
-async fn hard_skills(
+async fn categories_text(
+    Path(lang_id): Path<i32>,
     State(pool): State<PgPool>,
-) -> Json<(Vec<ProgrammingLanguages>, Vec<Softwares>, Vec<Languages>)> {
-    let programming_languages = sqlx::query_as!(
-        ProgrammingLanguages,
-        "SELECT
-        pl.lang,
-        pl.icon,
-        pl.type_icon,
-        pl.color
-    FROM public.programming_languages pl
-    ORDER BY pl.id;"
+) -> Json<Vec<CategoriesText>> {
+    let categories = sqlx::query_as!(
+        Categories,
+        "select
+        c.id,
+        c.name
+    from
+        public.categories c
+    order by
+        c.id;"
     )
     .fetch_all(&pool)
     .await
-    .unwrap_or(vec![]);
+    .unwrap();
 
-    let softwares = sqlx::query_as!(
-        Softwares,
-        "SELECT
-        s.software,
-        s.icon,
-        s.type_icon,
-        s.color
-    FROM public.softwares s
-    ORDER BY s.id;"
-    )
-    .fetch_all(&pool)
-    .await
-    .unwrap_or(vec![]);
+    let mut categories_text: Vec<CategoriesText> = Vec::new();
 
+    for c in categories {
+        let temp_category = sqlx::query_as!(
+            CategoriesText,
+            "SELECT
+            (SELECT icon FROM public.categories where id = $1 LIMIT 1) AS icon,
+            (SELECT type_icon FROM public.categories where id = $1 LIMIT 1) AS type_icon,
+            (SELECT name FROM public.categories_text WHERE category_id = $1 and lang_id = $2 LIMIT 1) AS name;"
+            ,c.id.unwrap(),lang_id
+        ).fetch_all(&pool)
+        .await
+        .unwrap();
+        categories_text.push(temp_category[0].clone());
+    }
+
+    Json(categories_text)
+}
+
+async fn hard_skills(State(pool): State<PgPool>) -> Json<(Vec<Languages>, Vec<Vec<Skills>>)> {
     let languages = sqlx::query_as!(
         Languages,
         "SELECT
@@ -210,23 +211,66 @@ async fn hard_skills(
     .fetch_all(&pool)
     .await
     .unwrap();
-    Json((programming_languages, softwares, languages))
+
+    let categories = sqlx::query_as!(
+        Categories,
+        "select
+        c.id,
+        c.name
+    from
+        public.categories c
+    order by
+        c.id;"
+    )
+    .fetch_all(&pool)
+    .await
+    .unwrap();
+
+    let mut skills: Vec<Vec<Skills>> = Vec::new();
+
+    for c in categories {
+        let skill_list = sqlx::query_as!(
+            Skills,
+            "select
+            s.id,
+            s.skill,
+            s.icon,
+            s.type_icon,
+            s.color,
+            s.is_shown
+        from
+            public.skills s
+        where
+            s.category_id = $1
+        order by
+            s.id;",
+            c.id.unwrap()
+        )
+        .fetch_all(&pool)
+        .await
+        .unwrap();
+        skills.push(skill_list);
+    }
+
+    Json((languages, skills))
 }
 
-async fn tags(Path(project_id): Path<i32>, State(pool): State<PgPool>) -> Json<Vec<Tags>> {
+async fn tags(Path(project_id): Path<i32>, State(pool): State<PgPool>) -> Json<Vec<Skills>> {
     let datas = sqlx::query_as!(
-        Tags,
-        "SELECT lang, icon, type_icon, color
-        FROM public.programming_languages pl
-        JOIN public.project_tags pt ON pl.id = pt.programming_languages_id
-        WHERE pt.project_id = $1
-        
-        UNION ALL
-        
-        SELECT software, icon, type_icon, color
-        FROM public.softwares s
-        JOIN public.project_tags pt ON s.id = pt.softwares_id
-        WHERE pt.project_id = $1;",
+        Skills,
+        "select
+        s.id,
+        s.skill,
+        s.icon,
+        s.type_icon,
+        s.color,
+        s.is_shown
+    from
+        public.skills s
+    join public.project_tags pt on
+        s.id = pt.skills_id
+    where
+        pt.project_id = $1",
         project_id
     )
     .fetch_all(&pool)
@@ -235,42 +279,22 @@ async fn tags(Path(project_id): Path<i32>, State(pool): State<PgPool>) -> Json<V
     Json(datas)
 }
 
-async fn alltags(State(pool): State<PgPool>) -> Json<Vec<AllTags>> {
+async fn alltags(State(pool): State<PgPool>) -> Json<Vec<AllSkills>> {
     let datas = sqlx::query_as!(
-        AllTags,
-        "SELECT project_id, lang, icon, type_icon, color
-        FROM public.programming_languages pl
-        JOIN public.project_tags pt ON pl.id = pt.programming_languages_id
-        
-        UNION ALL
-        
-        SELECT project_id, software, icon, type_icon, color
-        FROM public.softwares s
-        JOIN public.project_tags pt ON s.id = pt.softwares_id
-        ORDER BY project_id;"
-    )
-    .fetch_all(&pool)
-    .await
-    .unwrap();
-    Json(datas)
-}
-
-async fn getproject_programming(
-    Path(ids): Path<(i32,i32)>,
-    State(pool): State<PgPool>,
-) -> Json<Vec<SimpleProject>> {
-    let (programming_id, lang_id) = ids;
-    let datas = sqlx::query_as!(
-        SimpleProject,
-        " SELECT
+        AllSkills,
+        "select
         pt.project_id,
-        pt.title
-    FROM public.project_text pt
-    JOIN public.project_tags pta ON (pt.project_id = pta.project_id) AND (pt.lang_id = $1) 
-    WHERE pta.programming_languages_id = $2
-    ORDER BY pt.project_id;",
-        lang_id,
-        programming_id
+        s.skill,
+        s.icon,
+        s.type_icon,
+        s.color,
+        s.is_shown
+    from
+        public.skills s
+    join public.project_tags pt on
+        s.id = pt.skills_id
+    order by
+        pt.project_id;"
     )
     .fetch_all(&pool)
     .await
@@ -278,25 +302,49 @@ async fn getproject_programming(
     Json(datas)
 }
 
-async fn getproject_software(
-    Path(ids): Path<(i32,i32)>,
+async fn getproject_skills(
+    Path(lang_id): Path<i32>,
     State(pool): State<PgPool>,
-) -> Json<Vec<SimpleProject>> {
-    let (software_id, lang_id) = ids;
-    let datas = sqlx::query_as!(
-        SimpleProject,
-        " SELECT
-        pt.project_id,
-        pt.title
-    FROM public.project_text pt
-    JOIN public.project_tags pta ON (pt.project_id = pta.project_id) AND (pt.lang_id = $1) 
-    WHERE pta.softwares_id = $2
-    ORDER BY pt.project_id;",
-        lang_id,
-        software_id
+) -> Json<Vec<Vec<SimpleProject>>> {
+    let project_ids = sqlx::query_as!(
+        Id,
+        "select
+        s.id
+    from
+        public.skills s
+    order by
+        s.id;"
     )
     .fetch_all(&pool)
     .await
     .unwrap();
-    Json(datas)
+
+    let mut project_skills: Vec<Vec<SimpleProject>> = Vec::new();
+
+    for p in project_ids {
+        project_skills.push(
+            sqlx::query_as!(
+                SimpleProject,
+                "select
+            pt.project_id,
+            pt.title
+        from
+            public.project_text pt
+        join public.project_tags pta on
+            (pt.project_id = pta.project_id)
+            and (pt.lang_id = $1)
+        where
+            pta.skills_id = $2
+        order by
+            pt.project_id;",
+                lang_id,
+                p.id.unwrap(),
+            )
+            .fetch_all(&pool)
+            .await
+            .unwrap(),
+        );
+    }
+
+    Json(project_skills)
 }

frontend/src/lib/components/pill.svelte

@@ -118,6 +118,7 @@
 
   function calculateNotification() {
     // 19 is arbitrary, based on the pill-notification width (which is around 25.6 px) minus a constant
+    if (!show_tooltip || tooltip_data.length <= 0) return;
     pill_notification.style.left = `${
       main_pill.offsetLeft + main_pill.clientWidth - 19
     }px`;

frontend/src/lib/components/projects-popup.svelte

@@ -214,7 +214,7 @@
         <div class="project-popup-link-container project-popup-tag-container">
           {#each filteredTags as tag}
             <Pill
-              name={tag.lang}
+              name={tag.skill}
               type_icon={tag.type_icon}
               icon={tag.icon}
               color="#F8F1F1"

frontend/src/lib/js/processdata.js

@@ -1,23 +0,0 @@
-function arrangeById(array) {
-  let newArray = new Array(array.length);
-  for (const value of array) {
-    newArray[value.id-1] = value;
-  }
-  return newArray;
-}
-
-export function processData(data) {
-  if (data.status === 0) {
-    const info = data.info[0];
-    const experiences = data.experience;
-    const education = data.education;
-    const skills = data.skills;
-    const tags = data.tags;
-    const project_programming = data.project_programming;
-    const project_software = data.project_software;
-
-    return {info, experiences, education, skills, tags, project_programming, project_software};
-  } else {
-    return null;  // Indicates an error
-  }
-}

frontend/src/routes/lang=[lang]/+page.js

@@ -57,13 +57,11 @@ export async function load(context) {
     }
   }
 
-  // Gathering data from databse
+  // Gathering data from database
   const infos = [];
-  const project_software = [];
-  const project_programming = [];
   const dataToGather = [
     `info/${lang_id}`, `education/${lang_id}`, `experience/${lang_id}`,
-    `project/${lang_id}`, 'hard_skills', 'tags'
+    `project/${lang_id}`, 'hard_skills', 'tags', `getproject_programming/${lang_id}`, `categories/${lang_id}`
   ];
   for (const url of dataToGather) {
     const res = await fetchData(url);
@@ -77,45 +75,18 @@ export async function load(context) {
     }
   }
 
-  // infos[4] = hardskills
-  // infos[4][1] = Softwares
-  for (let i = 0; i < infos[4][1].length; i++) {
-    const res = await fetchData(`getproject_software/${i + 1}/${lang_id}`);
-    if (res.status == 0) {
-      project_software.push(res.data);
-    } else {
-      return {
-        status: res.status
-      }
-    }
-  }
-  // infos[4][0] = Programming Languages
-  for (let i = 0; i < infos[4][0].length; i++) {
-    const res = await fetchData(`getproject_programming/${i + 1}/${lang_id}`);
-    if (res.status == 0) {
-      project_programming.push(res.data);
-    } else {
-      return {
-        status: res.status
-      }
-    }
-  }
-
   return {
     status: 0,
     lang: lang,
-    info: infos[0],
+    info: infos[0][0],
     education: infos[1],
     experience: infos[2],
-    skills: {
-      project: infos[3],
-      programming_languages: infos[4][0],
-      softwares: infos[4][1],
-      languages: infos[4][2],
-    },
+    project: infos[3],
+    languages: infos[4][0],
+    skills: infos[4][1],
     tags: infos[5],
-    project_programming: project_programming,
-    project_software: project_software,
+    project_skills: infos[6],
+    categories: infos[7],
     text: text,
   };
 }

frontend/src/routes/lang=[lang]/+page.svelte

@@ -1,6 +1,5 @@
 <script>
   import SvgIcon from "@jamescoyle/svelte-icon";
-  import { processData } from "$lib/js/processdata.js";
   import { showSidebar } from "$lib/js/topbar.js";
   import "$lib/css/base.css";
   import "$lib/css/cv.css";
@@ -22,8 +21,6 @@
     mdiWrench,
     mdiPencil,
     mdiAccount,
-    mdiXml,
-    mdiApplication,
     mdiEarth,
     mdiHeart,
   } from "@mdi/js";
@@ -31,14 +28,14 @@
 
   export let data;
   // Database
-  const cv = data.status == 0 ? processData(data) : undefined;
+  const cv = data.status == 0 ? data : undefined;
 
   // Language specifications
   const text = data.text;
   let flag;
   let otherlang;
   if (data.status == 0) {
-    for (const lang of cv.skills.languages) {
+    for (const lang of cv.languages) {
       if (lang.url_name == data.lang) flag = lang.icon_alpha;
       else otherlang = lang.url_name;
     }
@@ -156,54 +153,40 @@
       />
       <Section icon={mdiBriefcase} title={text.experience} />
       <SlideShow
-        data={cv.experiences}
+        data={cv.experience}
         type={Experience}
         timeline="true"
         reverse="true"
       />
       <Section icon={mdiWrench} title={text.projects} />
       <SlideShow
-        data={cv.skills.project}
+        data={cv.project}
         type={Projects}
         show_max_index={true}
         {text}
       />
       <Section icon={mdiPencil} title={text.skills} />
-      <SubSection icon={mdiXml} title={text.programming_languages} />
-      <div class="subsection">
-        {#if sidebarLoaded}
-          {#each cv.skills.programming_languages as pilldata, index (index)}
+      {#each cv.skills as skill, index (index)}
+        <SubSection icon={cv.categories[index].icon} title={cv.categories[index].name} />
+        <div class="subsection">
+          {#if sidebarLoaded}
+          {#each skill as pilldata, index (index)}
             <Pill
-              name={pilldata.lang}
+              name={pilldata.skill}
               type_icon={pilldata.type_icon}
               icon={pilldata.icon}
               color={pilldata.color}
               show_tooltip={true}
-              tooltip_data={cv.project_programming[index]}
+              tooltip_data={cv.project_skills[pilldata.id-1]}
               {text}
             />
           {/each}
-        {/if}
-      </div>
-      <SubSection icon={mdiApplication} title={text.software} />
-      <div class="subsection">
-        {#if sidebarLoaded}
-          {#each cv.skills.softwares as pilldata, index (index)}
-            <Pill
-              name={pilldata.software}
-              type_icon={pilldata.type_icon}
-              icon={pilldata.icon}
-              color={pilldata.color}
-              show_tooltip={true}
-              tooltip_data={cv.project_software[index]}
-              {text}
-            />
-          {/each}
-        {/if}
-      </div>
+          {/if}
+        </div>
+      {/each}
       <SubSection icon={mdiEarth} title={text.languages} />
       <div class="subsection flag-container end">
-        {#each cv.skills.languages as langdata}
+        {#each cv.languages as langdata}
           <FlagComponent
             lang={langdata.lang}
             level={langdata.level}