fix: removal of member on map resolved + addition of styling of Membe…

…rCounter
Informatievlaanderen · Oct 2, 2023 · d416494 · d416494
1 parent 389e368
commit d416494
Show file tree

Hide file tree

Showing 10 changed files with 102 additions and 80 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -7,8 +7,11 @@ import MemberCounter from './components/membercounter/MemberCounter.vue'
 <template>
   <GlobalHeader/>
   <main class="container">
-    <h1 class="header1">VSDS Demonstrator</h1>
-    <div class="body-large-regular">
+    <div class="content-header">
+      <h1 class="header header1">VSDS Demonstrator</h1>
+      <MemberCounter/>
+    </div>
+    <div class="body body-large-regular">
       <p>
         De Vlaamse Smart Data Space helpt bij het <b>duurzame</b> delen van snel en traag veranderende data en hun
         contextinformatie. Hiervoor wordt data gepubliceerd als <b>Linked Data Event Streams</b>.
@@ -19,11 +22,6 @@ import MemberCounter from './components/membercounter/MemberCounter.vue'
         <b>up-to-date</b> met de bron.
       </p>
     </div>
-
-    <hr class="divider content-separator">
-    <div>
-      <MemberCounter></MemberCounter>
-    </div>
     <hr class="divider content-separator">
     <div>
       <LeafletMap></LeafletMap>
@@ -34,18 +32,19 @@ import MemberCounter from './components/membercounter/MemberCounter.vue'
 
 
 <style scoped>
-#app {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
-}
-
 .content-separator {
   margin: 24px 0;
 }
 
-.header1 {
+.content-header {
+  display: flex;
+  justify-content: space-between;
   margin-bottom: 24px;
+  align-items: center;
+}
+
+.content-header > h1 {
+  margin: 0;
 }
 
 </style>
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
@@ -78,49 +78,47 @@ body {
     box-shadow: 0 2px 12px 0 rgba(106, 118, 134, 0.35);
 }
 
-.header1 {
+.header {
     color: #333332;
     font-family: Flanders Art Sans, sans-serif;
-    font-size: 44px;
     font-style: normal;
     font-weight: 500;
+}
+
+.header1 {
+    font-size: 44px;
     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;
     font-size: 20px;
-    font-style: normal;
-    font-weight: 500;
     line-height: 28px;
 }
 
-.body-large-regular {
+.body {
     color: #333332;
     font-family: Flanders Art Sans Regular, sans-serif;
-    font-size: 20px;
     font-style: normal;
     font-weight: 400;
+}
+
+.body-xxlarge-regular {
+    font-size: 28px;
+    line-height: 36px;
+}
+
+.body-large-regular {
+    font-size: 20px;
     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% */
 }
 

diff --git a/frontend/src/components/checkbox/CheckboxTile.vue b/frontend/src/components/checkbox/CheckboxTile.vue
@@ -4,7 +4,7 @@
       <img v-if="checked" class="checkmark-checked" src="../../assets/svgs/checkboxtile/check-checked.svg" alt="checkbox checked"/>
       <span v-else class="checkmark"/>
     </div>
-    <h5 class="header5">{{ label }}</h5>
+    <h5 class="header header5">{{ label }}</h5>
   </div>
 </template>
 

diff --git a/frontend/src/components/graph/KnowledgeGraph.vue b/frontend/src/components/graph/KnowledgeGraph.vue
@@ -2,9 +2,9 @@
   <div>
     <svg id="knowledge-graph" class="linked-data-container" v-if="memberId"></svg>
     <div class="linked-data-container" v-else>
-        <img src="../../assets/svgs/Linked_data.svg" alt="Linked data" class="linked-data-icon"/>
-        <h5 class="header5">Linked data</h5>
-        <small class="small-regular">Klik op een punt op de kaart om de kennisgrafiek te laden</small>
+      <img src="../../assets/svgs/Linked_data.svg" alt="Linked data" class="linked-data-icon"/>
+      <h5 class="header header5 margin-vert-8">Linked data</h5>
+      <small class="small-regular">Klik op een punt op de kaart om de kennisgrafiek te laden</small>
     </div>
   </div>
 </template>
@@ -24,41 +24,46 @@ export default {
   },
 };
 </script>
-<style type="text/css" scoped>
-.node {
-  stroke: #fff;
-  fill: #ddd;
-  stroke-width: 1.5px;
-}
 
-.link {
-  stroke: #999;
-  stroke-opacity: 0.6;
+<!--Styling that goes deeper then the component only, in this case is this styling used for the elements in the knowledge graph-->
+<style>
+.node {
+  stroke: #FFE615;
+  fill: #FFA405;
   stroke-width: 1px;
 }
 
-marker {
-  stroke: #999;
-  fill: rgba(124, 240, 10, 0);
+.link {
+  stroke: #993F00;
+  stroke-width: 0.66px;
 }
 
 .node-text {
-  font: 11px sans-serif;
-  fill: black;
+  color: #333332;
+  font-family: Flanders Art Sans Regular, sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 11px;
 }
 
 .link-text {
-  font: 9px sans-serif;
-  fill: grey;
+  color: #808080;
+  font-family: Flanders Art Sans Regular, sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 9px;
 }
+</style>
 
+<!--Styling that is related to the component only-->
+<style scoped>
 .linked-data-container {
   border-top: 0.5px solid #CFD5DD;
   border-right: 0.5px solid #CFD5DD;
   border-bottom: 0.5px solid #CFD5DD;
   border-left: 0;
 
-  height: 350px;
+  height: 450px;
   min-width: 600px;
   width: 100%;
 }
@@ -76,7 +81,7 @@ div.linked-data-container {
   align-items: center;
 }
 
-.header5 {
+.margin-vert-8 {
   margin: 8px 0;
 }
 

diff --git a/frontend/src/components/graph/composables/useTriplesFetching.js b/frontend/src/components/graph/composables/useTriplesFetching.js
@@ -3,12 +3,12 @@ import * as d3 from "d3";
 import {triplesToGraph} from "@/components/graph/functions/triplesToGraph";
 
 function visualizeTriples(triples) {
-    let children = d3.select("svg").selectAll("*")
+    let svg = d3.select("#knowledge-graph");
+    let children = svg.selectAll("*")
     children.remove();
 
-    const width = 600;
-    const height = 500;
-    let svg = d3.select("#knowledge-graph");
+    const width = +svg.style("width").replace("px", "")
+    const height = +svg.style("height").replace("px", "");
     let graph = triplesToGraph(triples);
     let force = d3.forceSimulation(graph.nodes);
 

diff --git a/frontend/src/components/map/LeafletMap.vue b/frontend/src/components/map/LeafletMap.vue
@@ -2,6 +2,8 @@
   <div class="z-stack">
     <MapButtons></MapButtons>
     <div class="linked-data-container">
+      <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+            integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
       <div style="width: 50%" id="map"></div>
       <div style="width: 50%">
         <KnowledgeGraph :member-id="memberId"></KnowledgeGraph>
@@ -34,7 +36,7 @@ export default {
   watch: {
     time: function () {
       this.fetchMembers();
-    }
+    },
   },
   setup() {
     const time = ref(new Date().getTime())
@@ -58,7 +60,6 @@ export default {
   },
 
   mounted() {
-    console.log("mounted")
     this.connect()
 
     this.map = L.map("map", {zoomAnimation: false, zoomControl: false}).setView([50.7747, 4.4852], 8)
@@ -67,7 +68,6 @@ export default {
       maxZoom: 19,
       attribution: '© OpenStreetMap'
     }).addTo(this.map);
-    // this.map.on("popupclose", () => this.memberId = null)
     this.map.on("moveend", () => {
       this.fetchMembers();
     });
@@ -99,13 +99,13 @@ export default {
     },
     //websocket
     connect() {
-      this.stompClient = new Stomp.client('ws://localhost:8084/update');
+      this.stompClient = new Stomp.client('ws://localhost:8084/update', {debug: false});
       this.stompClient.connect(
           {},
           frame => {
             this.stompClient.subscribe("/broker/member", (member) => {
               let body = JSON.parse(member.body)
-              let marker = useMarkers([body]).at(0)
+              let marker = useMarkers([body], (memberId) => this.memberId = memberId).at(0)
               marker.setStyle({color: 'red'})
               setTimeout(function () {
                 this.updateMarker(marker)
@@ -146,7 +146,7 @@ export default {
   position: relative;
   z-index: 1;
   width: 100%;
-  height: 350px;
+  height: 450px;
 }
 
 .leaflet-control-zoom-in,

diff --git a/frontend/src/components/membercounter/MemberCounter.vue b/frontend/src/components/membercounter/MemberCounter.vue
@@ -1,5 +1,8 @@
 <template>
-  <h1 class="header5 centered">Aantal members: {{ memberCounter }}</h1>
+  <div class="member-counter-container">
+    <h2 class="header header2 member-counter">{{ memberCounter }}</h2>
+    <span class="body body-xxlarge-regular">members</span>
+  </div>
 </template>
 
 <script>
@@ -45,9 +48,18 @@ export default {
 };
 </script>
 
-<style>
-
-.centered {
-  text-align: center
+<style scoped>
+.member-counter-container {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.member-counter {
+  color: #fff;
+  background-color: #d2373c;
+  border-radius: 6px;
+  padding: 4px 16px;
+  width: fit-content;
+  display: inline;
 }
 </style>
diff --git a/frontend/src/components/modal/MapButtons.vue b/frontend/src/components/modal/MapButtons.vue
@@ -13,11 +13,11 @@ function onMapButtonClicked(button : "layers" | "legend") {
 
 <template>
   <div class="map-buttons">
-    <button class="map-button shadow-medium" @click="onMapButtonClicked('legend')">
+    <button class="map-button shadow-medium" :class="{active : showLegend}" @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')">
+    <button class="map-button shadow-medium" :class="{active: showLayers}" @click="onMapButtonClicked('layers')">
       <img src="../../assets/svgs/content-layers-show.svg" alt="Lagen icoon">
       <span>Lagen</span>
     </button>
@@ -28,8 +28,8 @@ function onMapButtonClicked(button : "layers" | "legend") {
       <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">
+      <h2 class="header header2 margin-zero">Lagen</h2>
+      <p class="body body-medium-regular margin-vert-24">
         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>
@@ -43,7 +43,7 @@ function onMapButtonClicked(button : "layers" | "legend") {
       <button class="close-button" @click="showLegend = false">
         <img src="../../assets/svgs/Close_Button.svg" alt="x">
       </button>
-      <h2 class="header2">Legende</h2>
+      <h2 class="header header2">Legende</h2>
       <button class="primary-btn" @click="showLegend = false">Sluiten</button>
     </div>
   </Teleport>
@@ -78,6 +78,10 @@ function onMapButtonClicked(button : "layers" | "legend") {
   justify-content: center;
 }
 
+.map-button.active {
+  border: 1px solid #0055CC;
+}
+
 .map-button:hover {
   cursor: pointer;
 }
@@ -109,11 +113,11 @@ function onMapButtonClicked(button : "layers" | "legend") {
   border-left: 1px solid #cfd5dd;
 }
 
-.header2 {
+.margin-zero {
   margin: 0;
 }
 
-p.body-medium-regular {
+.margin-vert-24 {
   margin: 24px 0;
 }