Etheryo/curriculum-vitae
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 1 Packages Wiki Activity Actions

Backend: Added support for other type of links in each project. Frontend: Linking database and hiding a category if no data found.

Browse source
This commit is contained in:
Yohan Boujon 2024-01-30 21:01:11 +01:00
parent 5b0db880a0
commit f8eb04a6cb
6 changed files with 101 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
backend/src/db.rs
View file

@ -44,7 +44,10 @@ pub struct Project {
pub description: Option<String>, pub description: Option<String>,
pub github_link: Option<String>, pub github_link: Option<String>,
pub picture_name: Option<String>, pub picture_name: Option<String>,
pub type_project: Option<String> pub type_project: Option<String>,
pub report_link: Option<String>,
pub archive_link: Option<String>,
pub app_link: Option<String>
} }
#[derive(Deserialize, Serialize)] #[derive(Deserialize, Serialize)]

2
backend/src/main.rs
View file

@ -94,7 +94,7 @@ async fn skills(
)> { )> {
let project = sqlx::query_as!( let project = sqlx::query_as!(
Project, Project,
"SELECT id, date_done, title, description, github_link, picture_name, type_project FROM public.project WHERE project.info_id = $1 ORDER BY date_done DESC", "SELECT id, date_done, title, description, github_link, picture_name, type_project, report_link, archive_link, app_link FROM public.project WHERE project.info_id = $1 ORDER BY date_done DESC",
id id
) )
.fetch_all(&pool) .fetch_all(&pool)

112
frontend/src/lib/components/projects-popup.svelte
View file

@ -4,7 +4,7 @@
import "$lib/css/project-popup.css"; import "$lib/css/project-popup.css";
import "$lib/css/slide.css"; import "$lib/css/slide.css";
import Pill from "$lib/components/pill.svelte"; import Pill from "$lib/components/pill.svelte";
import { showPopup, actualData } from "$lib/js/popup.js"; import { showPopup, actualData, filterTag } from "$lib/js/popup.js";
import SvgIcon from "@jamescoyle/svelte-icon"; import SvgIcon from "@jamescoyle/svelte-icon";
import { import {
mdiClose, mdiClose,
@ -19,6 +19,7 @@
mdiBookMultiple, mdiBookMultiple,
mdiDownload, mdiDownload,
} from "@mdi/js"; } from "@mdi/js";
import { formatMonth } from "$lib/js/date.js";
// Variables // Variables
const unsubscribe = actualData.subscribe(popupShowed); const unsubscribe = actualData.subscribe(popupShowed);
@ -27,11 +28,18 @@
// Informations // Informations
export let tags; export let tags;
// Not exported but still Informations
let filteredTags = [];
let title = "Title"; let title = "Title";
let date = "Date"; let date = "Date";
let type_project = "Type of project"; let type_project = "Type of project";
let picture; let picture;
let description = "Description"; let description = "Description";
let report_link;
let github_link;
let archive_link;
let application_link;
let id = 0; let id = 0;
async function popupShowed(data) { async function popupShowed(data) {
@ -42,13 +50,19 @@
* is not yet loaded. * is not yet loaded.
*/ */
if (data != 0) { if (data != 0) {
const superData = data; title = data.title;
title = superData.title; date =
date = data.date; formatMonth(data.date_done).charAt(0).toUpperCase() +
formatMonth(data.date_done).slice(1);
type_project = data.type_project; type_project = data.type_project;
picture = (await import(`/src/lib/img/${data.picture_name}`)).default; picture = (await import(`/src/lib/img/${data.picture_name}`)).default;
description = data.description; description = data.description;
id = data.id; id = data.id;
report_link = data.report_link;
github_link = data.github_link;
archive_link = data.archive_link;
application_link = data.application_link;
filteredTags = filterTag(tags, id);
// Active set to true after the await to avoid conflict when clicking outside while the popup hasn't showed yet. // Active set to true after the await to avoid conflict when clicking outside while the popup hasn't showed yet.
active = true; active = true;
} }
@ -117,36 +131,62 @@
</div> </div>
</div> </div>
<!-- Links --> <!-- Links -->
<div class="slide-subtitle-container"> {#if report_link != null || github_link != null || archive_link != null || application_link != null}
<SvgIcon size="35" path={mdiLink} type="mdi" /> <div class="slide-subtitle-container">
<p class="slide-subtitle slide-aftericon">Links</p> <SvgIcon size="35" path={mdiLink} type="mdi" />
</div> <p class="slide-subtitle slide-aftericon">Links</p>
<div class="project-popup-link-container"> </div>
<button class="project-popup-download project-popup-report"> <div class="project-popup-link-container">
<SvgIcon size="20" path={mdiFileDocumentOutline} type="mdi" /> {#if report_link != null}
<p>See Report</p> <a
</button> class="project-popup-download project-popup-report"
<button class="project-popup-download project-popup-github"> href={report_link}
<SvgIcon size="20" path={mdiGithub} type="mdi" /> target="_blank"
<p>Github Repository</p> >
</button> <SvgIcon size="20" path={mdiFileDocumentOutline} type="mdi" />
<button class="project-popup-download project-popup-archive"> <p>See Report</p>
<SvgIcon size="20" path={mdiBookMultiple} type="mdi" /> </a>
<p>Download Archive</p> {/if}
</button> {#if github_link != null}
<button class="project-popup-download project-popup-application"> <a
<SvgIcon size="20" path={mdiDownload} type="mdi" /> class="project-popup-download project-popup-github"
<p>Download Application</p> href={github_link}
</button> target="_blank"
</div> >
<SvgIcon size="20" path={mdiGithub} type="mdi" />
<p>Github Repository</p>
</a>
{/if}
{#if archive_link != null}
<a
class="project-popup-download project-popup-archive"
href={archive_link}
target="_blank"
>
<SvgIcon size="20" path={mdiBookMultiple} type="mdi" />
<p>Download Archive</p>
</a>
{/if}
{#if application_link != null}
<a
class="project-popup-download project-popup-application"
href={application_link}
target="_blank"
>
<SvgIcon size="20" path={mdiDownload} type="mdi" />
<p>Download Application</p>
</a>
{/if}
</div>
{/if}
<!-- Tags --> <!-- Tags -->
<div class="slide-subtitle-container"> {#if filteredTags.length != 0}
<SvgIcon size="35" path={mdiTag} type="mdi" /> <div class="slide-subtitle-container">
<p class="slide-subtitle slide-aftericon">Tags</p> <SvgIcon size="35" path={mdiTag} type="mdi" />
</div> <p class="slide-subtitle slide-aftericon">Tags</p>
<div class="project-popup-link-container"> </div>
{#each tags as tag} <div class="project-popup-link-container">
{#if tag.project_id === id} {#each filteredTags as tag}
<Pill <Pill
name={tag.lang} name={tag.lang}
type_icon={tag.type_icon} type_icon={tag.type_icon}
@ -154,9 +194,9 @@
color="#F8F1F1" color="#F8F1F1"
shadow_color="#261C2C" shadow_color="#261C2C"
/> />
{/if} {/each}
{/each} </div>
</div> {/if}
</div> </div>
<!-- Text --> <!-- Text -->
<div> <div>

11
frontend/src/lib/components/projects.svelte
View file

@ -21,16 +21,7 @@
picture = (await import(`/src/lib/img/${data.picture_name}`)).default; picture = (await import(`/src/lib/img/${data.picture_name}`)).default;
popupDatas.update((value) => { popupDatas.update((value) => {
const newData = { value.push(data);
id: data.id,
title: data.title,
date: issued_date,
type_project: data.type_project,
description: data.description,
picture_name: data.picture_name,
};
value.push(newData);
return value; return value;
}); });
}); });

9
frontend/src/lib/css/project-popup.css
View file

@ -136,6 +136,9 @@
transition: none; transition: none;
color: var(--color-background); color: var(--color-background);
cursor: grab; cursor: grab;
text-decoration: none;
text-align: center;
font-size: 0.85rem;
} }
.project-popup-download:hover { .project-popup-download:hover {
@ -148,9 +151,9 @@
} }
.project-popup-download>p { .project-popup-download>p {
margin: 0; margin: 0 !important;
margin-left: 0.5rem; margin-left: 0.5rem !important;
margin-right: 0.5rem; margin-right: 0.5rem !important;
} }
.project-popup-download>svg { .project-popup-download>svg {

13
frontend/src/lib/js/popup.js
View file

@ -31,5 +31,18 @@ export function showPopup(show, projectId) {
} }
} }
export function filterTag(tags, id)
{
let returnTags = [];
for(const tag of tags)
{
if(tag.project_id == id)
{
returnTags.push(tag);
}
}
return returnTags;
}
export let popupDatas = writable([]); export let popupDatas = writable([]);
export let actualData = writable(0); export let actualData = writable(0);