Vestigingen component

src/lib/index.js

@@ -28,6 +28,13 @@ export { default as SmallCarrousel } from './organisms/smallCarrousel.svelte';
 export { default as LogoBlue } from './assets/oba-logo.webp';
 export { default as LogoRed } from './assets/oba-logo-2.webp';
 export { default as LogoBlack } from './assets/oba-logo-3.webp';
+export { default as ImgBijlmer } from './assets/bijlmerplein.jpeg';
+export { default as ImgOosterdok } from './assets/oosterdok.jpeg';
+export { default as ImgOsdorp } from './assets/osdorp.jpeg';
+export { default as ImgPostjesweg } from './assets/postjesweg.jpeg';
+export { default as ImgRoelof } from './assets/roelof.jpeg';
+export { default as ImgWaterlandplein } from './assets/waterlandplein.jpeg';
+export { default as ImgPlattegrond } from './assets/plattegrond.png';
 
 // Hier export je alle svg's ---------------------------------------------------------------------------------------------------------------
 // Hier export je alle svg's ---------------------------------------------------------------------------------------------------------------
@@ -52,3 +59,4 @@ export { default as SearchTwo  } from './svg/searchTwo.svelte';
 export { default as SearchOne  } from './svg/searchOne.svelte';
 export { default as ArrowTwoLeft  } from './svg/arrowTwoLeft.svelte';
 export { default as ArrowTwoRight  } from './svg/arrowTwoRight.svelte';
+export { default as Vestiging  } from './svg/vestiging.svelte';

src/lib/molecules/header.svelte

@@ -12,7 +12,8 @@
 		Cross,
 		SearchTwo,
 		SearchOne,
-		Leeslijst
+		Leeslijst,
+		Vestiging,
 	} from '$lib/index.js';
 	import { onMount } from 'svelte';
 	import { Card } from '$lib/index.js';
@@ -138,6 +139,12 @@
 						<span>Familie</span>
 					</a>
 				</li>
+				<li>
+					<a href="/vestigingen">
+						<Vestiging />
+						<span>Werkplek</span>
+					</a>
+				</li>
 			</ul>
 		</div>
 

src/lib/svg/vestiging.svelte

@@ -0,0 +1,36 @@
+<svg
+	height="30"
+	width="30"
+	version="1.1"
+	id="_x32_"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	viewBox="0 0 512 512"
+	xml:space="preserve"
+	fill="#ffffff"
+	stroke="#ffffff"
+	><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
+		id="SVGRepo_tracerCarrier"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	></g><g id="SVGRepo_iconCarrier">
+		<style type="text/css">
+			.st0 {
+				fill: #ffffff;
+			}
+		</style>
+		<g>
+			<path
+				class="st0"
+				d="M463.29,305.295v-84.777h-9.38c-39.71,0-75.128,6.873-104.271,15.713c-3.467-7.023-7.264-14.182-10.956-20.92 c1.59-1.441,3.166-2.919,4.682-4.435c22.331-22.316,36.183-53.253,36.168-87.343c0.016-34.089-13.837-65.026-36.168-87.336 C321.035,13.837,290.089,0,256.007,0c-34.082,0-65.027,13.837-87.343,36.198c-22.331,22.309-36.182,53.246-36.182,87.336 c0,34.09,13.851,65.027,36.182,87.343c1.516,1.516,3.076,3.017,4.682,4.435c-3.706,6.738-7.503,13.897-10.97,20.92 c-29.159-8.84-64.547-15.713-104.257-15.713h-9.38v84.777c-28.318,0.526-39.154,23.877-39.154,52.631 c0,28.754,10.836,52.106,39.154,52.631v67.481l9.035,0.315h0.255c2.836,0.098,28.634,1.208,63.586,5.89 c34.938,4.667,79.044,12.958,118.244,27.193l1.545,0.563h29.22l1.545-0.563c40.445-14.692,86.158-23.044,121.59-27.629 c17.739-2.288,32.896-3.661,43.611-4.456c5.358-0.398,9.604-0.646,12.501-0.811c1.441-0.068,2.536-0.128,3.286-0.15 c0.36-0.023,0.646-0.038,0.811-0.038h0.27l9.049-0.315v-67.481c28.319-0.548,39.124-23.877,39.124-52.631 C502.414,329.172,491.609,305.836,463.29,305.295z M49.746,391.821c-0.315,0-0.646,0-1.006-0.015 c-6.438-0.068-20.395-1.756-20.395-33.879c0-32.131,13.957-33.819,20.395-33.88c0.36-0.022,0.691-0.022,1.006-0.022 c6.498,0,12.576,1.861,17.739,5.043c9.694,5.958,16.147,16.673,16.147,28.859c0,12.186-6.453,22.894-16.147,28.852 C62.322,389.967,56.244,391.821,49.746,391.821z M230.63,286.259v202.262c-38.089-12.126-78.069-19.15-109.974-23.314 c-23.502-3.046-42.576-4.48-53.171-5.125V407.51c20.365-7.293,34.906-26.728,34.906-49.584c0-22.856-14.542-42.299-34.906-49.584 v-68.921c48.863,1.395,90.494,13.536,120.389,25.73c15.893,6.453,28.469,12.914,36.978,17.731c2.192,1.246,4.127,2.371,5.778,3.37 V286.259z M268.884,492.708c-0.495,0.165-1.006,0.353-1.501,0.541h-22.736c-0.495-0.188-0.99-0.376-1.516-0.541V292.396h25.753 V492.708z M256.007,228.682c-28.574,0-54.402-11.353-73.341-29.812c-0.33-0.33-0.66-0.646-1.006-0.975 c-10.28-10.296-18.414-22.669-23.742-36.46c18.459-3.482,35.418-10.445,50.545-19.03c25.498-14.452,45.923-33.459,60.09-48.849 c6.123-6.649,11.061-12.629,14.723-17.296c5.898,7.602,14.797,18.752,24.942,30.315c9.11,10.378,19.21,21.086,29.235,29.978 c4.997,4.458,9.995,8.464,14.947,11.773c1.681,1.103,3.347,2.108,5.013,3.061c-4.878,17.836-14.317,33.774-27.043,46.508 c-0.346,0.33-0.675,0.668-1.021,0.998C310.379,217.352,284.552,228.682,256.007,228.682z M444.545,460.082 c-10.595,0.645-29.67,2.079-53.201,5.125c-31.875,4.142-71.856,11.188-109.944,23.314c0,0,0,0-0.014,0V286.236 c0.014,0,0.014,0,0.014,0c8.164-4.899,23.157-13.168,43.492-21.4c29.834-12.066,71.18-24.042,119.654-25.415v68.921 c-20.365,7.286-34.922,26.728-34.922,49.584c0,22.856,14.557,42.291,34.922,49.584V460.082z M463.29,391.806 c-0.375,0.015-0.705,0.015-1.02,0.015c-6.498,0-12.562-1.831-17.724-5.02c-9.695-5.98-16.178-16.688-16.178-28.874 c0-12.186,6.483-22.901,16.178-28.882c5.162-3.181,11.226-5.02,17.724-5.02c0.315,0,0.646,0,1.02,0.022 c6.453,0.083,20.38,1.794,20.38,33.88C483.669,390.012,469.743,391.723,463.29,391.806z"
+			></path> <circle class="st0" cx="215.383" cy="161.037" r="12.502"></circle>
+			<circle class="st0" cx="296.632" cy="161.037" r="12.502"></circle>
+		</g>
+	</g></svg
+>
+
+<style>
+	svg {
+		margin-right: 10px;
+	}
+</style>

src/routes/vestigingen/+page.server.js

@@ -0,0 +1,40 @@
+import { gql } from 'graphql-request';
+import { hygraph } from '$lib/utils/hygraph.js';
+import { PUBLIC_API_KEY } from '$env/static/public';
+
+export async function load() {
+	const publicKey = PUBLIC_API_KEY;
+
+    const space = "%20";
+    const bookItems = "boeken";
+    const EbookItems = "e-books";
+    const audioItems = "luisterboeken";
+    const urlSearch = "search/";
+    const urlBase = "https://zoeken.oba.nl/api/v1/";
+    const urlQuery = "?q=";
+    const urlDefault = "special:all";
+    const urlKey = `&facet=pubyear(2022)&authorization=${publicKey}`;
+    const urlOutput = "&refine=true&output=json";
+    const defaultUrlBooks = urlBase + urlSearch + urlQuery + urlDefault + space + bookItems + urlKey + urlOutput;
+    const defaultUrleBooks = urlBase + urlSearch + urlQuery + urlDefault + space + EbookItems + urlKey + urlOutput;
+    const defaultUrlAudioBooks = urlBase + urlSearch + urlQuery + urlDefault + space + audioItems + urlKey + urlOutput;
+
+	const responseBooks = await fetch(defaultUrlBooks);
+
+	const responseEBooks = await fetch(defaultUrleBooks);
+
+	const responseAudioBooks = await fetch(defaultUrlAudioBooks);
+
+	const apiBooks = await responseBooks.json();
+	const apiAudioBooks = await responseAudioBooks.json();
+	const apiEBooks = await responseEBooks.json();
+
+	return {
+		apiBooks,
+		apiAudioBooks,
+		apiEBooks
+	};
+
+
+
+}

src/routes/vestigingen/+page.svelte

@@ -0,0 +1,211 @@
+<script>
+	import { Card, Header, ImgBijlmer, ImgOosterdok, ImgOsdorp, ImgPostjesweg, ImgRoelof, ImgWaterlandplein } from '$lib/index.js';
+	import { onMount } from 'svelte';
+
+	export let data;
+
+	onMount(() => {});
+</script>
+
+<header>
+	<Header
+		cardData={data.apiBooks.results.concat(data.apiEBooks.results, data.apiAudioBooks.results)}
+	/>
+</header>
+
+<main>
+	<h1>Overzicht van alle vestigingen</h1>
+	<section class="overzichtspagina-section overzicht">
+		<article>
+			<div class="text">
+				<small>Vestiging</small>
+				<h2>Bijlmer</h2>
+				<p>Bijlmerplein 393,
+					1102DK Amsterdam</p>
+				<a href="/reservering-werkplek">Reserveer werkplek </a>
+			</div>
+			<div class="image">
+				<div>
+					<img src={ImgBijlmer} alt="boek" />
+				</div>
+			</div>
+		</article>
+		<article>
+			<div class="text">
+				<small>Vestiging</small>
+				<h2>Oosterdok</h2>
+				<p>Oosterdokskade 143,
+					1011DL Amsterdam</p>
+				<a href="/reservering-werkplek">Reserveer werkplek </a>
+			</div>
+			<div class="image">
+				<div>
+					<img src={ImgOosterdok} alt="boek" />
+				</div>
+			</div>
+		</article>
+		<article>
+			<div class="text">
+				<small>Vestiging</small>
+				<h2>Osdorp</h2>
+				<p>Osdorpplein 16,
+					1068EL Amsterdam</p>
+				<a href="/reservering-werkplek">Reserveer werkplek </a>
+			</div>
+			<div class="image">
+				<div>
+					<img src={ImgOsdorp} alt="boek" />
+				</div>
+			</div>
+		</article>
+		<article>
+			<div class="text">
+				<small>Vestiging</small>
+				<h2>Postjesweg</h2>
+				<p>Postjesweg 340,
+					1061AX Amsterdam</p>
+				<a href="/reservering-werkplek">Reserveer werkplek </a>
+			</div>
+			<div class="image">
+				<div>
+					<img src={ImgPostjesweg} alt="boek" />
+				</div>
+			</div>
+		</article>
+		<article>
+			<div class="text">
+				<small>Vestiging</small>
+				<h2>Roelof</h2>
+				<p>Roelof Hartplein 430,
+					1071TT Amsterdam</p>
+				<a href="/reservering-werkplek">Reserveer werkplek </a>
+			</div>
+			<div class="image">
+				<div>
+					<img src={ImgRoelof} alt="boek" />
+				</div>
+			</div>
+		</article>
+		<article>
+			<div class="text">
+				<small>Vestiging</small>
+				<h2>Waterland</h2>
+				<p>Waterlandplein 302,
+					1024NB Amsterdam</p>
+				<a href="/reservering-werkplek">Reserveer werkplek </a>
+			</div>
+			<div class="image">
+				<div>
+					<img src={ImgWaterlandplein} alt="boek" />
+				</div>
+			</div>
+		</article>
+	</section>
+</main>
+
+<style>
+	h1 {
+		padding: 2rem;
+	}
+
+	.overzichtspagina-section {
+		margin: 100px 0 100px 0;
+		padding: 0 50px 0 50px;
+	}
+
+	.overzicht {
+		display: flex;
+		gap: 3em;
+		flex-wrap: wrap;
+		flex-direction: row;
+		justify-content: center;
+		margin: 50px 0 100px 0;
+
+	}
+
+	article {
+		width: 37em;
+		color: white;
+		display: flex;
+		background: var(--primary-accent-color);
+		box-shadow: 0 0 15px rbgd(0, 0, 0, 0.7);
+		border-radius: 8px;
+	}
+
+	article p {
+		font-size: 0.9em;
+		line-height: 23px;
+		color: white;
+	}
+
+	article h2 {
+		margin: 0;
+		color: white;
+	}
+
+	article small {
+		color: white;
+	}
+
+	.text {
+		padding: 1.5em;
+		width: 45%;
+		display: flex;
+		justify-content: space-evenly;
+		align-items: flex-start;
+		flex-direction: column;
+		color: white;
+	}
+
+	article a {
+		color: white;
+		text-decoration: none;
+		padding-bottom: 3px;
+		border-bottom: 2px dashed;
+	}
+
+	article .image {
+		width: 78%;
+		height: 15em;
+		position: relative;
+		overflow: hidden;
+		border-radius: 8px;
+	}
+
+	article img {
+		width: 140%;
+	}
+
+	article .image::before {
+		content: '';
+		position: absolute;
+		left: -6.1em;
+		top: 50%;
+		transform: translateY(-50%) rotate(20deg);
+		background: var(--primary-accent-color);
+		width: 40%;
+		height: 140%;
+		box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
+	}
+
+	@media screen and (max-width: 750px) {
+		article {
+			display: block;
+			width: 20em;
+		}
+		article .image,
+		.text {
+			width: 100%;
+		}
+		article img {
+			width: 160%;
+		}
+		article .image::before {
+			width: 120%;
+			height: 40%;
+			top: -5em;
+			left: 50%;
+			transform: translateX(-50%) rotate(10deg);
+		}
+	}
+</style>