Backend: Added support for other type of links in each project. Frontend: Linking database and hiding a category if no data found.
This commit is contained in:
parent
5b0db880a0
commit
f8eb04a6cb
6 changed files with 101 additions and 51 deletions
|
|
@ -44,7 +44,10 @@ pub struct Project {
|
|||
pub description: Option<String>,
|
||||
pub github_link: 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)]
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@ async fn skills(
|
|||
)> {
|
||||
let project = sqlx::query_as!(
|
||||
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
|
||||
)
|
||||
.fetch_all(&pool)
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
import "$lib/css/project-popup.css";
|
||||
import "$lib/css/slide.css";
|
||||
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 {
|
||||
mdiClose,
|
||||
|
|
@ -19,6 +19,7 @@
|
|||
mdiBookMultiple,
|
||||
mdiDownload,
|
||||
} from "@mdi/js";
|
||||
import { formatMonth } from "$lib/js/date.js";
|
||||
|
||||
// Variables
|
||||
const unsubscribe = actualData.subscribe(popupShowed);
|
||||
|
|
@ -27,11 +28,18 @@
|
|||
|
||||
// Informations
|
||||
export let tags;
|
||||
|
||||
// Not exported but still Informations
|
||||
let filteredTags = [];
|
||||
let title = "Title";
|
||||
let date = "Date";
|
||||
let type_project = "Type of project";
|
||||
let picture;
|
||||
let description = "Description";
|
||||
let report_link;
|
||||
let github_link;
|
||||
let archive_link;
|
||||
let application_link;
|
||||
let id = 0;
|
||||
|
||||
async function popupShowed(data) {
|
||||
|
|
@ -42,13 +50,19 @@
|
|||
* is not yet loaded.
|
||||
*/
|
||||
if (data != 0) {
|
||||
const superData = data;
|
||||
title = superData.title;
|
||||
date = data.date;
|
||||
title = data.title;
|
||||
date =
|
||||
formatMonth(data.date_done).charAt(0).toUpperCase() +
|
||||
formatMonth(data.date_done).slice(1);
|
||||
type_project = data.type_project;
|
||||
picture = (await import(`/src/lib/img/${data.picture_name}`)).default;
|
||||
description = data.description;
|
||||
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 = true;
|
||||
}
|
||||
|
|
@ -117,36 +131,62 @@
|
|||
</div>
|
||||
</div>
|
||||
<!-- Links -->
|
||||
<div class="slide-subtitle-container">
|
||||
<SvgIcon size="35" path={mdiLink} type="mdi" />
|
||||
<p class="slide-subtitle slide-aftericon">Links</p>
|
||||
</div>
|
||||
<div class="project-popup-link-container">
|
||||
<button class="project-popup-download project-popup-report">
|
||||
<SvgIcon size="20" path={mdiFileDocumentOutline} type="mdi" />
|
||||
<p>See Report</p>
|
||||
</button>
|
||||
<button class="project-popup-download project-popup-github">
|
||||
<SvgIcon size="20" path={mdiGithub} type="mdi" />
|
||||
<p>Github Repository</p>
|
||||
</button>
|
||||
<button class="project-popup-download project-popup-archive">
|
||||
<SvgIcon size="20" path={mdiBookMultiple} type="mdi" />
|
||||
<p>Download Archive</p>
|
||||
</button>
|
||||
<button class="project-popup-download project-popup-application">
|
||||
<SvgIcon size="20" path={mdiDownload} type="mdi" />
|
||||
<p>Download Application</p>
|
||||
</button>
|
||||
</div>
|
||||
{#if report_link != null || github_link != null || archive_link != null || application_link != null}
|
||||
<div class="slide-subtitle-container">
|
||||
<SvgIcon size="35" path={mdiLink} type="mdi" />
|
||||
<p class="slide-subtitle slide-aftericon">Links</p>
|
||||
</div>
|
||||
<div class="project-popup-link-container">
|
||||
{#if report_link != null}
|
||||
<a
|
||||
class="project-popup-download project-popup-report"
|
||||
href={report_link}
|
||||
target="_blank"
|
||||
>
|
||||
<SvgIcon size="20" path={mdiFileDocumentOutline} type="mdi" />
|
||||
<p>See Report</p>
|
||||
</a>
|
||||
{/if}
|
||||
{#if github_link != null}
|
||||
<a
|
||||
class="project-popup-download project-popup-github"
|
||||
href={github_link}
|
||||
target="_blank"
|
||||
>
|
||||
<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 -->
|
||||
<div class="slide-subtitle-container">
|
||||
<SvgIcon size="35" path={mdiTag} type="mdi" />
|
||||
<p class="slide-subtitle slide-aftericon">Tags</p>
|
||||
</div>
|
||||
<div class="project-popup-link-container">
|
||||
{#each tags as tag}
|
||||
{#if tag.project_id === id}
|
||||
{#if filteredTags.length != 0}
|
||||
<div class="slide-subtitle-container">
|
||||
<SvgIcon size="35" path={mdiTag} type="mdi" />
|
||||
<p class="slide-subtitle slide-aftericon">Tags</p>
|
||||
</div>
|
||||
<div class="project-popup-link-container">
|
||||
{#each filteredTags as tag}
|
||||
<Pill
|
||||
name={tag.lang}
|
||||
type_icon={tag.type_icon}
|
||||
|
|
@ -154,9 +194,9 @@
|
|||
color="#F8F1F1"
|
||||
shadow_color="#261C2C"
|
||||
/>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<!-- Text -->
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -21,16 +21,7 @@
|
|||
picture = (await import(`/src/lib/img/${data.picture_name}`)).default;
|
||||
|
||||
popupDatas.update((value) => {
|
||||
const newData = {
|
||||
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);
|
||||
value.push(data);
|
||||
return value;
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -136,6 +136,9 @@
|
|||
transition: none;
|
||||
color: var(--color-background);
|
||||
cursor: grab;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.project-popup-download:hover {
|
||||
|
|
@ -148,9 +151,9 @@
|
|||
}
|
||||
|
||||
.project-popup-download>p {
|
||||
margin: 0;
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
margin: 0 !important;
|
||||
margin-left: 0.5rem !important;
|
||||
margin-right: 0.5rem !important;
|
||||
}
|
||||
|
||||
.project-popup-download>svg {
|
||||
|
|
|
|||
|
|
@ -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 actualData = writable(0);
|
||||
Loading…
Add table
Reference in a new issue