From 3b03fe190934f82f444aec9109609686c8d11347 Mon Sep 17 00:00:00 2001
From: jonasbul <jonas.bulcke@cegeka.com>
Date: Mon, 2 Oct 2023 11:43:57 +0200
Subject: [PATCH] feat: init of modals and checkboxtiles

---
 frontend/src/App.vue                          |  9 --
 frontend/src/assets/main.css                  | 51 ++++++++++-
 frontend/src/assets/svgs/Close_Button.svg     |  3 +
 .../svgs/checkboxtile/check-checked.svg       |  4 +
 .../assets/svgs/checkboxtile/check-naked.svg  |  5 ++
 .../src/assets/svgs/content-layers-show.svg   |  3 +
 frontend/src/assets/svgs/location-map.svg     |  3 +
 .../src/components/checkbox/CheckboxTile.vue  | 80 +++++++++++++++++
 .../src/components/graph/KnowledgeGraph.vue   |  2 +-
 .../src/components/headers/GlobalHeader.vue   |  4 -
 frontend/src/components/map/LeafletMap.vue    | 64 ++++++++++++--
 frontend/src/components/modal/Layers.vue      | 39 +++++++++
 frontend/src/components/modal/MapButtons.vue  | 85 +++++++++++++++++++
 frontend/src/components/modal/Modal.vue       | 11 +++
 frontend/src/components/slider/Slider.vue     | 16 ++--
 15 files changed, 349 insertions(+), 30 deletions(-)
 create mode 100644 frontend/src/assets/svgs/Close_Button.svg
 create mode 100644 frontend/src/assets/svgs/checkboxtile/check-checked.svg
 create mode 100644 frontend/src/assets/svgs/checkboxtile/check-naked.svg
 create mode 100644 frontend/src/assets/svgs/content-layers-show.svg
 create mode 100644 frontend/src/assets/svgs/location-map.svg
 create mode 100644 frontend/src/components/checkbox/CheckboxTile.vue
 create mode 100644 frontend/src/components/modal/Layers.vue
 create mode 100644 frontend/src/components/modal/MapButtons.vue
 create mode 100644 frontend/src/components/modal/Modal.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 85cbe19..8545bd3 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -44,13 +44,4 @@ import GlobalHeader from "@/components/headers/GlobalHeader.vue";
   margin-bottom: 24px;
 }
 
-.body-large-regular b {
-  color: #333332;
-  font-family: Flanders Art Sans Regular, sans-serif;
-  font-size: 20px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 30px
-
-}
 </style>
\ No newline at end of file
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 71d5e13..ee819f6 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -24,6 +24,26 @@ body {
     flex-grow: 1;
 }
 
+.primary-btn {
+    width: fit-content;
+    padding: 5px 20px 5px 20px;
+    align-items: center;
+    border: none;
+    border-radius: 3px;
+    background: #0055CC;
+
+    color: #ffffff;
+    font-family: Flanders Art Sans, sans-serif;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 24px; /* 150% */
+}
+
+.primary-btn:hover {
+    background-color: #003bb0;
+}
+
 .secondary-btn {
     width: 116px;
     height: 38px;
@@ -32,7 +52,6 @@ body {
     border: none;
     border-radius: 3px;
     background: #fff;
-    box-shadow: 0 2px 12px 0 rgba(106, 118, 134, 0.35);
 
     color: #0055CC;
     font-family: Flanders Art Sans, sans-serif;
@@ -51,6 +70,14 @@ body {
     line-height: 24px; /* 150% */
 }
 
+.secondary-btn.active, .secondary-btn:hover {
+    border: 1px solid #0055CC;
+}
+
+.shadow-medium {
+    box-shadow: 0 2px 12px 0 rgba(106, 118, 134, 0.35);
+}
+
 .header1 {
     color: #333332;
     font-family: Flanders Art Sans, sans-serif;
@@ -60,6 +87,16 @@ body {
     line-height: 52px;
 }
 
+.header2 {
+    color: #333332;
+    font-family: Flanders Art Sans, sans-serif;
+    font-size: 32px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 41px; /* 128.125% */
+
+}
+
 .header5 {
     color: #333332;
     font-family: Flanders Art Sans, sans-serif;
@@ -76,7 +113,19 @@ body {
     font-style: normal;
     font-weight: 400;
     line-height: 30px; /* 150% */
+}
+
+.body-medium-regular {
+    color: #333332;
+    font-family: Flanders Art Sans Regular, sans-serif;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 27px; /* 150% */
+}
 
+b {
+    font-weight: 700;
 }
 
 .small-regular {
diff --git a/frontend/src/assets/svgs/Close_Button.svg b/frontend/src/assets/svgs/Close_Button.svg
new file mode 100644
index 0000000..14034e1
--- /dev/null
+++ b/frontend/src/assets/svgs/Close_Button.svg
@@ -0,0 +1,3 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.5 12.4743L22.525 11.5L17.5003 16.5253L12.475 11.5L11.5 12.4743L16.5253 17.4997L11.5 22.525L12.475 23.4993L17.5003 18.474L22.525 23.4993L23.5 22.525L18.4747 17.4997L23.5 12.4743Z" fill="#0055CC"/>
+</svg>
diff --git a/frontend/src/assets/svgs/checkboxtile/check-checked.svg b/frontend/src/assets/svgs/checkboxtile/check-checked.svg
new file mode 100644
index 0000000..5855f88
--- /dev/null
+++ b/frontend/src/assets/svgs/checkboxtile/check-checked.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="18" height="18" rx="3" fill="#0055CC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.83398 14.5003L4.83398 11.3337L5.83398 10.0003L8.50065 12.167L13.334 6.66699L14.6673 7.66699L8.83398 14.5003Z" fill="white"/>
+</svg>
diff --git a/frontend/src/assets/svgs/checkboxtile/check-naked.svg b/frontend/src/assets/svgs/checkboxtile/check-naked.svg
new file mode 100644
index 0000000..898a0a4
--- /dev/null
+++ b/frontend/src/assets/svgs/checkboxtile/check-naked.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Icon/Functional/check-naked">
+<path id="Shape" fill-rule="evenodd" clip-rule="evenodd" d="M8.83398 14.5003L4.83398 11.3337L5.83398 10.0003L8.50065 12.167L13.334 6.66699L14.6673 7.66699L8.83398 14.5003Z" fill="white"/>
+</g>
+</svg>
diff --git a/frontend/src/assets/svgs/content-layers-show.svg b/frontend/src/assets/svgs/content-layers-show.svg
new file mode 100644
index 0000000..1a40914
--- /dev/null
+++ b/frontend/src/assets/svgs/content-layers-show.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 12.5334C11.861 12.5334 11.723 12.5044 11.594 12.4474L2.594 8.44743C2.232 8.28743 2 7.92943 2 7.53343C2 7.13743 2.232 6.78043 2.594 6.62043L11.594 2.62043C11.853 2.50543 12.148 2.50543 12.407 2.62043L21.407 6.62043C21.768 6.78043 22 7.13843 22 7.53343C22 7.92843 21.768 8.28643 21.406 8.44743L12.406 12.4474C12.277 12.5044 12.139 12.5334 12 12.5334ZM5.463 7.53343L12 10.4394L18.537 7.53343L12 4.62743L5.463 7.53343ZM22 9.89246L11.982 14.4445L2 10.2845V12.4505L11.615 16.4585C11.738 16.5115 11.869 16.5335 12 16.5335C12.141 16.5335 12.282 16.5045 12.413 16.4465L22 12.0895V9.89246ZM11.982 18.4445L22 13.8925V16.0895L12.413 20.4465C12.282 20.5045 12.141 20.5335 12 20.5335C11.869 20.5335 11.738 20.5115 11.615 20.4585L2 16.4505V14.2845L11.982 18.4445Z" fill="#0055CC"/>
+</svg>
diff --git a/frontend/src/assets/svgs/location-map.svg b/frontend/src/assets/svgs/location-map.svg
new file mode 100644
index 0000000..3cc5765
--- /dev/null
+++ b/frontend/src/assets/svgs/location-map.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21 17.0001C21 17.3341 20.833 17.6471 20.555 17.8321L14.549 21.8241C14.395 21.9271 14.266 22.0001 14 22.0001C13.777 22.0001 13.556 21.9261 13.376 21.7811L8.947 18.2381L3.555 21.8321C3.387 21.9441 3.194 22.0001 3 22.0001C2.838 22.0001 2.676 21.9621 2.528 21.8821C2.203 21.7081 2 21.3691 2 21.0001V7.00014C2 6.66714 2.167 6.35414 2.445 6.16814L8.445 2.16814C8.6 2.06614 8.829 2.00014 9.035 2.00814C9.25 2.01614 9.475 2.10214 9.625 2.21914L14.054 5.76314L19.446 2.16814C19.752 1.96314 20.147 1.94414 20.472 2.11914C20.797 2.29214 21 2.63114 21 3.00014V17.0001ZM8 4.86914L4 7.53514V19.1321L8 16.4651V4.86914ZM13 18.9201L10 16.5201V5.08214L13 7.48114V18.9201ZM15 19.1321L19 16.4651V4.86914L15 7.53514V19.1321Z" fill="#0055CC"/>
+</svg>
diff --git a/frontend/src/components/checkbox/CheckboxTile.vue b/frontend/src/components/checkbox/CheckboxTile.vue
new file mode 100644
index 0000000..d0bbb33
--- /dev/null
+++ b/frontend/src/components/checkbox/CheckboxTile.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="checkbox-tile" :class="{ 'checked': checked }" @click="checked = !checked">
+    <div class="checkmark-container">
+      <img v-if="checked" src="../../assets/svgs/checkboxtile/check-checked.svg" alt="checkbox checked"/>
+      <span v-else class="checkmark"/>
+    </div>
+    <h5 class="header5">{{ label }} {{ checked ? "(Active)" : "" }}</h5>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    id: String,
+    label: String,
+    checked: Boolean
+  },
+  emits: ["onChecked"],
+  mounted() {
+    console.log(typeof this.checked)
+  }
+}
+</script>
+
+<style scoped>
+.checkbox-tile {
+  display: flex;
+  align-items: center;
+  border-radius: 3px;
+  border: 2px #8695a8 solid;
+  width: 100%;
+  height: 58px;
+  margin-bottom: 24px;
+  cursor: pointer;
+}
+
+.checkbox-tile:hover, .checkbox-tile.checked {
+  border: #0055CC solid 2px;
+}
+
+.checkbox-tile input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+.checkmark-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #8695a8;
+  height: 100%;
+  width: 28px;
+  margin-right: 12px;
+}
+
+.checkbox-tile:hover .checkmark-container, .checkbox-tile.checked .checkmark-container {
+  background-color: #0055CC;
+}
+
+.checkmark {
+  border: #8695a8 solid 1px;
+  width: 18px;
+  height: 18px;
+  border-radius: 3px;
+  margin-left: -1px;
+  background-color: #fff;
+}
+
+.checkmark.checked {
+  border: #fff solid 1px;
+  width: 18px;
+  height: 18px;
+  border-radius: 3px;
+  margin-left: -1px;
+}
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/graph/KnowledgeGraph.vue b/frontend/src/components/graph/KnowledgeGraph.vue
index 3758f5a..91158c6 100644
--- a/frontend/src/components/graph/KnowledgeGraph.vue
+++ b/frontend/src/components/graph/KnowledgeGraph.vue
@@ -58,7 +58,7 @@ marker {
   border-bottom: 0.5px solid #CFD5DD;
   border-left: 0;
 
-  height: 500px;
+  height: 350px;
   min-width: 600px;
   width: 100%;
 }
diff --git a/frontend/src/components/headers/GlobalHeader.vue b/frontend/src/components/headers/GlobalHeader.vue
index bd71f0a..ed95486 100644
--- a/frontend/src/components/headers/GlobalHeader.vue
+++ b/frontend/src/components/headers/GlobalHeader.vue
@@ -1,7 +1,3 @@
-<script setup>
-
-</script>
-
 <template>
 <div>
   <div class="global-header">
diff --git a/frontend/src/components/map/LeafletMap.vue b/frontend/src/components/map/LeafletMap.vue
index 84ca09d..bb48d84 100644
--- a/frontend/src/components/map/LeafletMap.vue
+++ b/frontend/src/components/map/LeafletMap.vue
@@ -1,8 +1,11 @@
 <template>
-  <div style="display: flex; width: 100%">
-    <div style="width: 50%" id="map"></div>
-    <div style="width: 50%">
-      <KnowledgeGraph :member-id="memberId"></KnowledgeGraph>
+  <div>
+    <MapButtons></MapButtons>
+    <div class="linked-data-container">
+      <div style="width: 50%" id="map"></div>
+      <div style="width: 50%">
+        <KnowledgeGraph :member-id="memberId"></KnowledgeGraph>
+      </div>
     </div>
   </div>
   <div>
@@ -24,9 +27,10 @@ import {ref} from "vue";
 import Slider from "@/components/slider/Slider.vue";
 import Stomp from "webstomp-client";
 import KnowledgeGraph from "@/components/graph/KnowledgeGraph.vue";
+import MapButtons from "@/components/modal/MapButtons.vue";
 
 export default {
-  components: {KnowledgeGraph, Slider},
+  components: {MapButtons, KnowledgeGraph, Slider},
   watch: {
     time: function () {
       this.fetchMembers();
@@ -131,6 +135,56 @@ export default {
 </script>
 
 <style>
+.map-buttons {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+  z-index: 2;
+  width: 50%;
+  top: 350px;
+  right: 12px;
+  margin-top: -160px;
+  margin-bottom: 30px;
+  gap: 10px;
+}
+
+.linked-data-container {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  width: 100%;
+  height: 350px;
+}
+
+.map-button {
+  width: 74px;
+  height: 60px;
+  border: none;
+  background-color: #fff;
+  border-radius: 3px;
+
+  display: inline-flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: center;
+  justify-content: center;
+}
+
+.map-button > img {
+  width: 24px;
+  height: 24px;
+}
+
+.map-button > span {
+  color: #0055CC;
+  font-family: Flanders Art Sans, sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0;
+}
+
 .leaflet-control-zoom-in,
 .leaflet-control-zoom-out {
   color: #05C !important;
diff --git a/frontend/src/components/modal/Layers.vue b/frontend/src/components/modal/Layers.vue
new file mode 100644
index 0000000..2044823
--- /dev/null
+++ b/frontend/src/components/modal/Layers.vue
@@ -0,0 +1,39 @@
+<script>
+import {ref} from "vue";
+
+export default {
+  setup() {
+    const isOpen = ref(false)
+    return {
+      isOpen
+    }
+  }
+}
+</script>
+
+<template>
+  <button @click="isOpen = true">Lagen</button>
+  <Teleport to="body">
+    <div v-if="isOpen" class="modal">
+      <h1>Lagen</h1>
+      <button @click="isOpen = false">Close</button>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+body {
+  position: relative;
+}
+.modal {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  z-index: 999;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 600px;
+  background-color: #fff;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/modal/MapButtons.vue b/frontend/src/components/modal/MapButtons.vue
new file mode 100644
index 0000000..d09edb4
--- /dev/null
+++ b/frontend/src/components/modal/MapButtons.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import {ref} from "vue";
+import CheckboxTile from "@/components/checkbox/CheckboxTile.vue";
+
+const showLayers = ref(false);
+const showLegend = ref(false);
+
+function onMapButtonClicked(button : "layers" | "legend") {
+  showLayers.value = button === "layers"
+  showLegend.value = button === "legend"
+}
+</script>
+
+<template>
+  <div class="map-buttons">
+    <button class="map-button shadow-medium" @click="onMapButtonClicked('legend')">
+      <img src="../../assets/svgs/location-map.svg" alt="Legende icoon">
+      <span>Legende</span>
+    </button>
+    <button class="map-button shadow-medium" @click="onMapButtonClicked('layers')">
+      <img src="../../assets/svgs/content-layers-show.svg" alt="Lagen icoon">
+      <span>Lagen</span>
+    </button>
+  </div>
+
+  <Teleport to="body">
+    <div v-if="showLayers" class="modal">
+      <button class="close-button" @click="showLayers=false">
+        <img src="../../assets/svgs/Close_Button.svg" alt="x">
+      </button>
+      <h2 class="header2">Lagen</h2>
+      <p class="body-medium-regular">
+        Als decentrale oplossing maakt de Vlaamse Smart Data Space gebruik van een gezamenlijk <b>ecosysteem</b> met duidelijke spelregels, waardoor we data slim kunnen delen, publiceren en hergebruiken.
+      </p>
+      <CheckboxTile id="gipod" label="GIPOD" :checked="true"></CheckboxTile>
+      <CheckboxTile id="traffic-counting" label="Verkeersmetingen Verkeerscentrum LDES"></CheckboxTile>
+      <button class="primary-btn" @click="showLayers = false">Sluiten</button>
+    </div>
+  </Teleport>
+
+  <Teleport to="body">
+    <div v-if="showLegend" class="modal">
+      <button class="close-button" @click="showLegend = false">
+        <img src="../../assets/svgs/Close_Button.svg" alt="x">
+      </button>
+      <h2 class="header2">Legende</h2>
+      <button class="primary-btn" @click="showLegend = false">Sluiten</button>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.modal {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  z-index: 999;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 600px;
+  background-color: #fff;
+  padding: 32px;
+  border-left: 1px solid #cfd5dd;
+}
+
+.header2 {
+  margin: 0;
+}
+
+p.body-medium-regular {
+  margin: 24px 0;
+}
+
+.close-button {
+  background: none;
+  border: none;
+  width: 35px;
+  height: 35px;
+  position: fixed;
+  right: 8px;
+  top: 0;
+}
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/modal/Modal.vue b/frontend/src/components/modal/Modal.vue
new file mode 100644
index 0000000..f53818c
--- /dev/null
+++ b/frontend/src/components/modal/Modal.vue
@@ -0,0 +1,11 @@
+<script setup>
+import {ref} from "vue";
+
+const isOpen = ref(false)
+</script>
+
+<template></template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/slider/Slider.vue b/frontend/src/components/slider/Slider.vue
index a19e807..85b9172 100644
--- a/frontend/src/components/slider/Slider.vue
+++ b/frontend/src/components/slider/Slider.vue
@@ -95,12 +95,12 @@ function onPauseClick() {
     </button>
   </div>
   <div class="shortcuts-flex-box">
-    <button class="secondary-btn" :class="{'active-btn': sliderValue === maxSeconds - 7 * 24 * 60 * 60}" @click="onShortcutClick(24 * 7)">-7 dagen</button>
-    <button class="secondary-btn" :class="{'active-btn': sliderValue === maxSeconds - 48 * 60 * 60}" @click="onShortcutClick(48)">-48 uur</button>
-    <button class="secondary-btn" :class="{'active-btn': sliderValue === maxSeconds - 24 * 60 * 60}" @click="onShortcutClick(24)">-24 uur</button>
-    <button class="secondary-btn" :class="{'active-btn': sliderValue === maxSeconds - 12 * 60 * 60}" @click="onShortcutClick(12)">-12 uur</button>
-    <button class="secondary-btn" :class="{'active-btn': sliderValue === maxSeconds - 60 * 60}" @click="onShortcutClick(1)">-1 uur</button>
-    <button class="secondary-btn" :class="{'active-btn': isRealtime}" @click="onRealTime()">Realtime</button>
+    <button class="secondary-btn shadow-medium" :class="{'active': sliderValue === maxSeconds - 7 * 24 * 60 * 60}" @click="onShortcutClick(24 * 7)">-7 dagen</button>
+    <button class="secondary-btn shadow-medium" :class="{'active': sliderValue === maxSeconds - 48 * 60 * 60}" @click="onShortcutClick(48)">-48 uur</button>
+    <button class="secondary-btn shadow-medium" :class="{'active': sliderValue === maxSeconds - 24 * 60 * 60}" @click="onShortcutClick(24)">-24 uur</button>
+    <button class="secondary-btn shadow-medium" :class="{'active': sliderValue === maxSeconds - 12 * 60 * 60}" @click="onShortcutClick(12)">-12 uur</button>
+    <button class="secondary-btn shadow-medium" :class="{'active': sliderValue === maxSeconds - 60 * 60}" @click="onShortcutClick(1)">-1 uur</button>
+    <button class="secondary-btn shadow-medium" :class="{'active': isRealtime}" @click="onRealTime()">Realtime</button>
   </div>
 </template>
 
@@ -150,8 +150,4 @@ function onPauseClick() {
   cursor: pointer;
 }
 
-.active-btn {
-  border: 1px solid #0055CC;
-}
-
 </style>
\ No newline at end of file