Portfolio/frontend/src/routes/dashboard/+page.svelte
2022-12-04 21:29:10 +01:00

84 lines
2.3 KiB
Svelte

<script lang="ts">
import FullLayout from '$lib/components/layout/FullLayout.svelte';
import { Swiper, SwiperSlide } from 'swiper/svelte';
import 'swiper/css';
import DashboardUploadCard from '$lib/components/dashboard/DashboardUploadCard.svelte';
import DashboardInfoCard from '$lib/components/dashboard/DashboardInfoCard.svelte';
import { candidateData, fetchDetails } from '../../stores/candidate';
let fullName = "";
let email = "";
$: if ($candidateData) {
fullName = ($candidateData.name ?? "") + " " + ($candidateData.surname ?? "");
email = $candidateData.email ?? "";
}
$: if ($candidateData.name === undefined) {
fetch();
}
const fetch = async () => {
try {
await fetchDetails();
} catch {
console.error("error");
}
}
</script>
<FullLayout>
<div class="dashboard dashboardDesktop">
<div class="name col-span-3">
<DashboardInfoCard title={fullName}>
<span class="mt-3 text-sspsBlue truncate">{email}</span>
<span class="mt-3 text-sspsGray text-xs">Uchazeč na SSPŠ</span>
</DashboardInfoCard>
</div>
<div class="coverletter col-span-5">
<DashboardUploadCard title="Motivační dopis" filetype="PDF" filesize="10 MB" />
</div>
<div class="portfolio col-span-4">
<DashboardUploadCard title="Portfolio" filetype="PDF" filesize="10 MB" />
</div>
<div class="moreData col-span-4">
<DashboardUploadCard title="Další data" filetype="ZIP" filesize="100 MB" />
</div>
</div>
<div class="dashboard dashboardMobile">
<div class="my-10 name w-[90%] mx-auto">
<DashboardInfoCard title={fullName}>
<span class="mt-3 text-sspsBlue truncate">{fullName}</span>
<span class="mt-3 text-sspsGray text-xs">Uchazeč na SSPŠ</span>
</DashboardInfoCard>
</div>
<Swiper slidesPerView={1} spaceBetween={20}>
{#each [0, 0, 0] as _}
<SwiperSlide>
<div class="w-[90%] mx-auto">
<DashboardUploadCard title="Motivační dopis" filetype="PDF" filesize="10 MB" />
</div>
</SwiperSlide>
{/each}
</Swiper>
</div>
</FullLayout>
<style>
.dashboardDesktop {
@apply w-[70vw] h-[70vh];
@apply hidden md:grid grid-cols-8 grid-rows-2 gap-10;
}
.dashboardMobile {
@apply w-[100vw] h-[90vh];
@apply md:hidden;
}
.dashboardMobile :global(.uploadCard) {
@apply min-h-72;
}
</style>