From a65045becb591aa25c4adf3bbe9c0172a17cdc1a Mon Sep 17 00:00:00 2001 From: Yohan Boujon Date: Thu, 16 Nov 2023 22:32:53 +0100 Subject: [PATCH] Frontend: Added 'Experience' component. Backend: Modified database. --- backend/db/education.sql | 5 +- backend/db/experience.sql | 1 + backend/src/db.rs | 1 + backend/src/main.rs | 2 +- frontend/src/lib/components/experience.svelte | 54 +++++++++ frontend/src/lib/components/slideshow.svelte | 54 +++++---- frontend/src/lib/css/education.css | 1 + frontend/src/lib/css/experience.css | 103 ++++++++++++++++++ frontend/src/lib/js/processdata.js | 2 +- frontend/src/lib/js/timeline.js | 4 +- frontend/src/routes/+page.svelte | 8 +- 11 files changed, 205 insertions(+), 30 deletions(-) create mode 100644 frontend/src/lib/components/experience.svelte create mode 100644 frontend/src/lib/css/experience.css diff --git a/backend/db/education.sql b/backend/db/education.sql index 186953f..26fc69f 100644 --- a/backend/db/education.sql +++ b/backend/db/education.sql @@ -6,11 +6,12 @@ CREATE TABLE public.education ( id serial4 NOT NULL, - start_year time NULL, - end_year time NULL, + start_year date NULL, + end_year date NULL, school text NULL, speciality text NULL, school_location text NULL, school_options text NULL, + picture_url text NULL, CONSTRAINT education_pkey PRIMARY KEY (id) ); \ No newline at end of file diff --git a/backend/db/experience.sql b/backend/db/experience.sql index b10e9e8..d30ae9c 100644 --- a/backend/db/experience.sql +++ b/backend/db/experience.sql @@ -12,5 +12,6 @@ CREATE TABLE public.experience ( enterprise_location text NULL, start_year date NULL, end_year date NULL, + picture_url text NULL, CONSTRAINT experience_pkey PRIMARY KEY (id) ); \ No newline at end of file diff --git a/backend/src/db.rs b/backend/src/db.rs index a4e5e5c..b5da3e2 100644 --- a/backend/src/db.rs +++ b/backend/src/db.rs @@ -33,6 +33,7 @@ pub struct Experience { pub enterprise_location: Option, pub start_year: Option, pub end_year: Option, + pub picture_url: Option } #[derive(Deserialize, Serialize)] diff --git a/backend/src/main.rs b/backend/src/main.rs index a832777..ba8d6a8 100644 --- a/backend/src/main.rs +++ b/backend/src/main.rs @@ -61,7 +61,7 @@ async fn education(State(pool): State) -> Result>> { async fn experience(State(pool): State) -> Result>> { let datas = sqlx::query_as!( Experience, - "SELECT id, job_position, job_description, enterprise, enterprise_location, start_year, end_year FROM public.experience" + "SELECT * FROM public.experience" ) .fetch_all(&pool) .await?; diff --git a/frontend/src/lib/components/experience.svelte b/frontend/src/lib/components/experience.svelte new file mode 100644 index 0000000..987c574 --- /dev/null +++ b/frontend/src/lib/components/experience.svelte @@ -0,0 +1,54 @@ + + +
+
+
+ Experience +
+
+

{position}

+
+ +

+ {enterprise} +

+
+ {#if location} +
+ +

+ {location} +

+
+ {/if} + {#if description} +
+ +

+ {description} +

+
+ {/if} +
+
+
+
+

{`${end_year}${start_year}`}

+
+
diff --git a/frontend/src/lib/components/slideshow.svelte b/frontend/src/lib/components/slideshow.svelte index b06937c..bed6b41 100644 --- a/frontend/src/lib/components/slideshow.svelte +++ b/frontend/src/lib/components/slideshow.svelte @@ -8,6 +8,8 @@ // Exported values export let data = []; export let type; + export let typename; + export let timeline = false; // Slideshow global variables let slideshow_index = 0; @@ -16,32 +18,37 @@ // Timeline global variables let slideshow; let bubbles = []; - onMount(() => { - for (const element of document.getElementsByClassName( - "education-bubble" - )) { - bubbles.push({ - left: element.offsetLeft, - top: element.offsetTop, - }); - } - for (const div of createTimeLine(bubbles)) { - slideshow.appendChild(div); - } - }); + if (timeline) { + onMount(() => { + for (const element of document.getElementsByClassName( + `${typename}-bubble` + )) { + bubbles.push({ + left: element.offsetLeft, + top: element.offsetTop, + }); + } + for (const div of createTimeLine(bubbles,typename)) { + slideshow.appendChild(div); + } + }); + } - function slideEducation() { + function slideCards() { const slideshowElements = document.querySelectorAll( - ".education-container" + `.${typename}-container` ); const slideshowTimeline = - document.querySelectorAll(".education-string"); + document.querySelectorAll(`.${typename}-string`); + console.log(slideshowTimeline); if (slideshow_index >= data.length - 1) { slideshow_hidden = []; slideshow_index = 0; - for(const timeline of slideshowTimeline) { - timeline.style.backgroundColor = ''; + if (timeline) { + for (const timeline of slideshowTimeline) { + timeline.style.backgroundColor = ""; + } } } else { slideshow_hidden.push(slideshow_index); @@ -58,10 +65,13 @@ newtransformValue *= 1.1; } element.style.transform = `translateX(-${newtransformValue}px)`; - if(slideshowTimeline[id] != undefined) { - slideshowTimeline[id].style.transform = `translateX(-${transformValue}px)`; + if (slideshowTimeline[id] != undefined) { + slideshowTimeline[ + id + ].style.transform = `translateX(-${transformValue}px)`; if (slideshow_hidden.includes(id)) { - slideshowTimeline[id].style.backgroundColor = 'var(--color-background)'; + slideshowTimeline[id].style.backgroundColor = + "var(--color-background)"; } } }); @@ -69,7 +79,7 @@
-
{:else}