Backend: Deleted skills db, added languages, planguages and softwares depending on info_id. Routing for skills now require an id. Frontend: Added subsections and reworked processdata.js

backend/db/_languages.sql

@@ -0,0 +1,15 @@
+-- public.languages definition
+
+-- Drop table
+
+-- DROP TABLE public.languages;
+
+CREATE TABLE public.languages (
+	id serial4 NOT NULL,
+	info_id int4 NOT NULL DEFAULT nextval('languages_skills_id_seq'::regclass),
+	lang text NOT NULL,
+	icon_alpha varchar(3) NOT NULL,
+	"level" text NOT NULL,
+	CONSTRAINT languages_pkey PRIMARY KEY (id),
+	CONSTRAINT languages_fk FOREIGN KEY (info_id) REFERENCES public.info(id)
+);

backend/db/_programming_languages.sql

@@ -0,0 +1,16 @@
+-- public.programming_languages definition
+
+-- Drop table
+
+-- DROP TABLE public.programming_languages;
+
+CREATE TABLE public.programming_languages (
+	id serial4 NOT NULL,
+	info_id int4 NOT NULL DEFAULT nextval('programming_languages_skills_id_seq'::regclass),
+	lang text NOT NULL,
+	icon text NOT NULL,
+	type_icon text NOT NULL,
+	color varchar(7) NULL,
+	CONSTRAINT programming_languages_pkey PRIMARY KEY (id),
+	CONSTRAINT programming_languages_fk FOREIGN KEY (info_id) REFERENCES public.info(id)
+);

backend/db/_project.sql

@@ -10,9 +10,9 @@ CREATE TABLE public.project (
 	title text NULL,
 	description text NULL,
 	github_link text NULL,
-	id_skills serial4 NOT NULL,
+	info_id int4 NOT NULL DEFAULT nextval('project_id_skills_seq'::regclass),
 	picture_name text NULL,
 	type_project text NULL,
 	CONSTRAINT project_pkey PRIMARY KEY (id),
-	CONSTRAINT project_fk FOREIGN KEY (id_skills) REFERENCES public.skills(id)
+	CONSTRAINT project_fk FOREIGN KEY (info_id) REFERENCES public.info(id)
 );

backend/db/_softwares.sql

@@ -0,0 +1,15 @@
+-- public.softwares definition
+
+-- Drop table
+
+-- DROP TABLE public.softwares;
+
+CREATE TABLE public.softwares (
+	id serial4 NOT NULL,
+	info_id int4 NOT NULL DEFAULT nextval('softwares_skills_id_seq'::regclass),
+	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/a_skills.sql

@@ -1,13 +0,0 @@
--- public.skills definition
-
--- Drop table
-
--- DROP TABLE public.skills;
-
-CREATE TABLE public.skills (
-	id serial4 NOT NULL,
-	programming_lang text NULL,
-	software text NULL,
-	languages text NULL,
-	CONSTRAINT skills_pkey PRIMARY KEY (id)
-);

backend/src/db.rs

@@ -38,20 +38,33 @@ pub struct Experience {
 
 #[derive(Deserialize, Serialize)]
 pub struct Project {
-    pub id: i64,
     pub date_done: Option<NaiveDate>,
     pub title: Option<String>,
     pub description: Option<String>,
     pub github_link: Option<String>,
-    pub id_skills: i64,
     pub picture_name: Option<String>,
     pub type_project: Option<String>
 }
 
 #[derive(Deserialize, Serialize)]
-pub struct Skills {
+pub struct ProgrammingLanguages {
-    pub id: i64,
+    pub lang: String,
-    pub programming_lang: Option<String>,
+    pub icon: String,
-    pub software: Option<String>,
+    pub type_icon: String,
-    pub languages: Option<String>,
+    pub color: Option<String>
+}
+
+#[derive(Deserialize, Serialize)]
+pub struct Softwares {
+    pub software: String,
+    pub icon: String,
+    pub type_icon: String,
+    pub color: Option<String>
+}
+
+#[derive(Deserialize, Serialize)]
+pub struct Languages {
+    pub lang: String,
+    pub icon_alpha: String,
+    pub level: String
 }

backend/src/main.rs

@@ -10,7 +10,7 @@ use std::net::SocketAddr;
 use tower_http::cors::CorsLayer;
 
 mod db;
-use db::{Education, Experience, Info, Project, Skills};
+use db::{Education, Experience, Info, Languages, Project, ProgrammingLanguages, Softwares};
 
 #[tokio::main]
 async fn main() -> Result<()> {
@@ -27,7 +27,7 @@ async fn main() -> Result<()> {
         .route("/info", get(info))
         .route("/education", get(education))
         .route("/experience", get(experience))
-        .route("/skills", get(skills))
+        .route("/skills/:id", get(skills))
         .with_state(pool)
         .layer(CorsLayer::very_permissive());
 
@@ -38,6 +38,12 @@ async fn main() -> Result<()> {
         .await?)
 }
 
+macro_rules! gather_data {
+    ($data_type:ty, $sql_cmd:expr, $pool:expr) => {
+        sqlx::query_as!($data_type, $sql_cmd).fetch_all($pool).await
+    };
+}
+
 async fn info(State(pool): State<PgPool>) -> Result<Json<Vec<Info>>> {
     let datas = sqlx::query_as!(
         Info,
@@ -49,43 +55,51 @@ async fn info(State(pool): State<PgPool>) -> Result<Json<Vec<Info>>> {
 }
 
 async fn education(State(pool): State<PgPool>) -> Result<Json<Vec<Education>>> {
-    let datas = sqlx::query_as!(
+    let datas = sqlx::query_as!(Education, "SELECT * FROM public.education")
-        Education,
-        "SELECT * FROM public.education"
-    )
         .fetch_all(&pool)
         .await?;
     Ok(Json(datas))
 }
 
 async fn experience(State(pool): State<PgPool>) -> Result<Json<Vec<Experience>>> {
-    let datas = sqlx::query_as!(
+    let datas = sqlx::query_as!(Experience, "SELECT * FROM public.experience")
-        Experience,
-        "SELECT * FROM public.experience"
-    )
         .fetch_all(&pool)
         .await?;
     Ok(Json(datas))
 }
 
-async fn skills(State(pool): State<PgPool>) -> Result<Json<(Vec<Project>, Vec<Skills>)>> {
+async fn skills(State(pool): State<PgPool>, Path(id): Path<i32>) -> Result<Json<(Vec<Project>,Vec<ProgrammingLanguages>,Vec<Softwares>,Vec<Languages>)>> {
-    // Gathering skills
+    let project = sqlx::query_as!(
-    let skills = sqlx::query_as!(
-        Skills,
-        "SELECT * FROM public.skills"
-    )
-    .fetch_all(&pool)
-    .await
-    .unwrap();
-
-    // Gathering Projects
-    let projects = sqlx::query_as!(
         Project,
-        "SELECT * FROM public.project ORDER BY date_done DESC"
+        "SELECT date_done, title, description, github_link, picture_name, type_project FROM public.project WHERE project.info_id = $1 ORDER BY date_done DESC",
+        id
     )
     .fetch_all(&pool)
-    .await
+    .await?;
-    .unwrap();
     
-    Ok(Json((projects,skills)))
+    let programming_languages = sqlx::query_as!(
+        ProgrammingLanguages,
+        "SELECT lang, icon, type_icon, color FROM public.programming_languages WHERE programming_languages.info_id = $1",
+        id
+    )
+    .fetch_all(&pool)
+    .await?;
+
+    let softwares = sqlx::query_as!(
+        Softwares,
+        "SELECT software, icon, type_icon, color FROM public.softwares WHERE softwares.info_id = $1",
+        id
+    )
+    .fetch_all(&pool)
+    .await?;
+
+    let languages = sqlx::query_as!(
+        Languages,
+        "SELECT lang, icon_alpha, level FROM public.languages WHERE languages.info_id = $1",
+        id
+    )
+    .fetch_all(&pool)
+    .await?;
+
+    Ok(Json((project,programming_languages,softwares,languages)))
 }

frontend/src/lib/components/subsection.svelte

@@ -0,0 +1,13 @@
+<script>
+    import "$lib/css/section.css";
+    import SvgIcon from "@jamescoyle/svelte-icon";
+    import { mdiHelpCircle } from "@mdi/js";
+
+    export let title = "Title";
+    export let icon = mdiHelpCircle;
+</script>
+
+<div class="subsection-container">
+    <SvgIcon size="40" path={icon} type="mdi" />
+    <h1 class="section-h2">{title}</h1>
+</div>

frontend/src/lib/css/section.css

@@ -8,7 +8,23 @@
     filter: drop-shadow(0px 6px 4px rgba(0, 0, 0, 0.15));
 }
 
+.subsection-container {
+    margin-left: 3rem;
+    margin-bottom: 0.5rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    color: var(--color-subtitle);
+    filter: drop-shadow(0px 6px 4px rgba(0, 0, 0, 0.15));
+}
+
 .section-h1 {
     margin-left: 2rem;
     font-size: 2.5rem;
 }
+
+.section-h2 {
+    margin-left: 1rem;
+    font-size: 1.5rem;
+    color: var(--color-subtitle);
+}

frontend/src/lib/js/processdata.js

@@ -11,10 +11,9 @@ export function processData(data) {
     const info = data.info[0];
     const experiences = arrangeById(data.experience);
     const education = arrangeById(data.education);
-    const skills = data.skills[1];
+    const skills = data.skills;
-    const projects = data.skills[0];
 
-    return {info, experiences, education, skills, projects};
+    return {info, experiences, education, skills};
   } else {
     return null;  // Indicates an error
   }

frontend/src/routes/+page.js

@@ -2,16 +2,15 @@ export async function load(context) {
   async function fetchData(data) {
     try {
       const resTemp = await context.fetch(`http://0.0.0.0:8000/${data}`);
-            if(resTemp.ok == false) {
+      if (resTemp.ok == false) {
         return {
           status: resTemp.status,
         }
       }
       return {
-                status: 0,
+        status: 0, data: await resTemp.json(),
-                data: await resTemp.json(),
       }
-        } catch(error) {
+    } catch (error) {
       return {
         status: 500,
       }
@@ -19,11 +18,10 @@ export async function load(context) {
   }
 
   const infos = [];
-    const dataToGather = ["info", "education", "experience", "skills"];
+  const dataToGather = ['info', 'education', 'experience', 'skills/1'];
   for (const url of dataToGather) {
     const res = await fetchData(url);
-        if(res.status == 0)
+    if (res.status == 0) {
-        {
       infos.push(res.data);
     } else {
       return {
@@ -37,6 +35,11 @@ export async function load(context) {
     info: infos[0],
     education: infos[1],
     experience: infos[2],
-        skills: infos[3]
+    skills: {
+      project: infos[3][0],
+      programming_languages: infos[3][1],
+      softwares: infos[3][2],
+      languages: infos[3][3],
+    },
   };
 }

frontend/src/routes/+page.svelte

@@ -13,10 +13,14 @@
 		mdiEmailOutline,
 		mdiPhone,
 		mdiStar,
+		mdiXml,
+		mdiApplication,
+		mdiEarth
 	} from "@mdi/js";
 
 	// Main
 	import Section from "$lib/components/section.svelte";
+	import SubSection from "$lib/components/subsection.svelte";
 	import Education from "$lib/components/education.svelte";
 	import Experience from "$lib/components/experience.svelte";
 	import Projects from "$lib/components/projects.svelte"
@@ -105,10 +109,13 @@
 			/>
 			<Section icon={mdiWrench} title="Projects" />
 			<SlideShow
-				data={cv.projects}
+				data={cv.skills.project}
 				type={Projects}
 			/>
 			<Section icon={mdiPencil} title="Skills" />
+			<SubSection icon={mdiXml} title="Programming Languages"/>
+			<SubSection icon={mdiApplication} title="Softwares"/>
+			<SubSection icon={mdiEarth} title="Languages"/>
 		</div>
 	</div>
 {:else}