From 5455c084672d4803214e7fc0726d0c16f273e1aa Mon Sep 17 00:00:00 2001
From: Pierrick <mulotmail@gmail.com>
Date: Mon, 29 Aug 2022 09:19:00 +0200
Subject: [PATCH] WIP

---
 website/package.json                     |  4 +-
 website/src/components/Result.vue        | 51 +++++++------
 website/src/components/Visualization.vue | 95 ++++++++++++++++++++++++
 website/src/main.js                      |  1 +
 yarn.lock                                | 10 +++
 5 files changed, 139 insertions(+), 22 deletions(-)
 create mode 100644 website/src/components/Visualization.vue

diff --git a/website/package.json b/website/package.json
index fad8df1..ff8df5c 100644
--- a/website/package.json
+++ b/website/package.json
@@ -13,10 +13,12 @@
   "dependencies": {
     "bootstrap": "^5.0.1",
     "bootstrap-vue": "^2.21.2",
+    "leaflet": "^1.8.0",
     "sass": "^1.34.1",
     "sass-loader": "^12.0.0",
     "vue": "^2.5.21",
-    "vue-gtag": "1.16.1"
+    "vue-gtag": "1.16.1",
+    "vue2-leaflet": "^2.7.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.3.0",
diff --git a/website/src/components/Result.vue b/website/src/components/Result.vue
index 0e8139b..c34e5c0 100644
--- a/website/src/components/Result.vue
+++ b/website/src/components/Result.vue
@@ -3,28 +3,35 @@
     <div v-if="isValidating" class="validating">Validating...</div>
     <div v-else>
       <div v-if="result.summary">
-        <h3 class="mt-4 mb-4">Result</h3>
+        <b-tabs class="mt-3">
+          <b-tab title="Validation" active>
+            <h3 class="mt-4 mb-4">Result</h3>
 
-        <b-alert v-if="result.summary.versionUnimplemented" variant="danger" show>
-          Sorry, this version is not yet implemented or not detectable !
-        </b-alert>
-        <div v-else>
-          <b-alert variant="info" show>
-            Detected version <b>{{ result.summary.version.detected }} </b> and validate with <a :href="`https://github.com/NABSA/gbfs/blob/v${result.summary.version.validated}/gbfs.md`"><b>{{ result.summary.version.validated}}</b></a>
-          </b-alert>
-
-          <div>
-            <b-alert v-if="result.summary.hasErrors" variant="danger" show>
-              Invalid GBFS feed <br>
-              <b>{{ result.summary.errorsCount | formatNumber }} errors</b>
+            <b-alert v-if="result.summary.versionUnimplemented" variant="danger" show>
+              Sorry, this version is not yet implemented or not detectable !
             </b-alert>
-            <b-alert v-else variant="success" show>Valid !</b-alert>
-          </div>
-          <h4 class="mt-3 mb-3">Detail per files</h4>
-          <div v-for="file in result.files" :key="file.filename">
-            <SubResult :file="file" />
-          </div>
-        </div>
+            <div v-else>
+              <b-alert variant="info" show>
+                Detected version <b>{{ result.summary.version.detected }} </b> and validate with <a :href="`https://github.com/NABSA/gbfs/blob/v${result.summary.version.validated}/gbfs.md`"><b>{{ result.summary.version.validated}}</b></a>
+              </b-alert>
+
+              <div>
+                <b-alert v-if="result.summary.hasErrors" variant="danger" show>
+                  Invalid GBFS feed <br>
+                  <b>{{ result.summary.errorsCount | formatNumber }} errors</b>
+                </b-alert>
+                <b-alert v-else variant="success" show>Valid !</b-alert>
+              </div>
+              <h4 class="mt-3 mb-3">Detail per files</h4>
+              <div v-for="file in result.files" :key="file.filename">
+                <SubResult :file="file" />
+              </div>
+            </div>
+          </b-tab>
+          <b-tab title="Visualization" lazy>
+            <visualization :files="result.files" />
+          </b-tab>
+        </b-tabs>
       </div>
       <b-alert v-else-if="result" variant="danger" show>{{ result }}</b-alert>
     </div>
@@ -33,6 +40,7 @@
 
 <script>
 import SubResult from './SubResult'
+import Visualization from './Visualization'
 
 export default {
   name: 'Result',
@@ -47,7 +55,8 @@ export default {
     }
   },
   components: {
-    SubResult
+    SubResult,
+    Visualization
   }
 }
 </script>
diff --git a/website/src/components/Visualization.vue b/website/src/components/Visualization.vue
new file mode 100644
index 0000000..9dfcbe9
--- /dev/null
+++ b/website/src/components/Visualization.vue
@@ -0,0 +1,95 @@
+<template>
+  <div style="height: 600px" class="mt-1">
+    <l-map style="height: 600px" :zoom="zoom" :center="center" ref="myMap">
+      <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
+      <l-feature-group ref="ffFeatureGroup">
+        <l-marker v-for="vehicle in freefloating" :lat-lng="[vehicle.lat, vehicle.lon]" :key="vehicle.vehicle_id">
+          <l-popup>{{vehicle}}</l-popup>
+        </l-marker>
+      </l-feature-group>
+      <l-geo-json v-for="zone in geofencing_zones" :geojson="zone" :options="zone.options">
+        <l-popup>{{zone.properties}}</l-popup>
+      </l-geo-json>
+    </l-map>
+  </div>
+</template>
+
+<script>
+import { Icon } from 'leaflet'
+import {
+  LFeatureGroup,
+  LGeoJson,
+  LMap,
+  LMarker,
+  LPopup,
+  LTileLayer
+} from 'vue2-leaflet'
+
+delete Icon.Default.prototype._getIconUrl
+Icon.Default.mergeOptions({
+  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
+  iconUrl: require('leaflet/dist/images/marker-icon.png'),
+  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
+})
+
+export default {
+  name: 'Visualization',
+  components: {
+    LFeatureGroup,
+    LGeoJson,
+    LMap,
+    LMarker,
+    LPopup,
+    LTileLayer
+  },
+  props: ['files'],
+  data() {
+    return {
+      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+      attribution:
+        '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
+      zoom: 15,
+      center: [48.864716, 2.349014]
+    }
+  },
+  computed: {
+    freefloating() {
+      const file = this.files.find(
+        f =>
+          f.file === 'vehicle_status.json' || f.file === 'free_bike_status.json'
+      )
+
+      if (!file) {
+        return []
+      }
+
+      return file.languages[0].body.data.bikes
+    },
+    geofencing_zones() {
+      const file = this.files.find(f => f.file === 'geofencing_zones.json')
+
+      if (!file) {
+        return []
+      }
+
+      return file.languages[0].body.data.geofencing_zones.features.map(f => ({
+        ...f,
+        options: {
+          onEachFeature: function onEachFeature(feature, layer) {
+            layer.bindPopup(JSON.stringify(feature.properties, ' ', 2))
+          }
+        }
+      }))
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$refs.myMap.mapObject.invalidateSize()
+
+      this.$refs.myMap.mapObject.fitBounds(
+        this.$refs.ffFeatureGroup.mapObject.getBounds()
+      )
+    })
+  }
+}
+</script>
diff --git a/website/src/main.js b/website/src/main.js
index 9388196..d01ce45 100644
--- a/website/src/main.js
+++ b/website/src/main.js
@@ -20,6 +20,7 @@ import {
 
 import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap-vue/dist/bootstrap-vue.css'
+import 'leaflet/dist/leaflet.css'
 
 if (process.env.VUE_APP_GOOGLE_ANALYTICS_ID) {
   Vue.use(VueGtag, {
diff --git a/yarn.lock b/yarn.lock
index c792a4d..74563d4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8368,6 +8368,11 @@ lcid@^2.0.0:
   dependencies:
     invert-kv "^2.0.0"
 
+leaflet@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.8.0.tgz#4615db4a22a304e8e692cae9270b983b38a2055e"
+  integrity sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA==
+
 leven@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
@@ -12582,6 +12587,11 @@ vue-template-es2015-compiler@^1.6.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
   integrity sha512-x3LV3wdmmERhVCYy3quqA57NJW7F3i6faas++pJQWtknWT+n7k30F4TVdHvCLn48peTJFRvCpxs3UuFPqgeELg==
 
+vue2-leaflet@^2.7.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/vue2-leaflet/-/vue2-leaflet-2.7.1.tgz#2f95c287621bf778f10804c88223877f5c049257"
+  integrity sha512-K7HOlzRhjt3Z7+IvTqEavIBRbmCwSZSCVUlz9u4Rc+3xGCLsHKz4TAL4diAmfHElCQdPPVdZdJk8wPUt2fu6WQ==
+
 vue@^2.5.21:
   version "2.5.22"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.22.tgz#3bf88041af08b8539c37b268b70ca79245e9cc30"