refactor and add some interaction

RemiDesgrange · Sep 3, 2019 · 85407ac · 85407ac
1 parent 0d049be
commit 85407ac
Show file tree

Hide file tree

Showing 13 changed files with 255 additions and 150 deletions.
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -1,21 +1,91 @@
-.DS_Store
-node_modules
-/dist
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# Editor directories and files
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
 .idea
-.vscode
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+.editorconfig
+
+# Service worker
+sw.*
+
+# Mac OSX
+.DS_Store
+
+# Vim swap files
+*.swp
diff --git a/frontend/.nuxt/utils.js b/frontend/.nuxt/utils.js
@@ -138,7 +138,7 @@ export async function setContext(app, context) {
       payload: context.payload,
       error: context.error,
       base: '/',
-      env: {"baseUrl":"undefined://undefined","baseMapUrl":"https://wxs.ign.fr/an7nvfzojv5wa96dsga5nk8w/geoportail/wmts"}
+      env: {"baseUrl":"http://localhost:9000","baseMapUrl":"https://wxs.ign.fr/an7nvfzojv5wa96dsga5nk8w/geoportail/wmts"}
     }
     // Only set once
     if (context.req) {

diff --git a/frontend/.prettierrc b/frontend/.prettierrc
@@ -1,4 +1,5 @@
 {
   "semi": false,
+  "arrowParens": "always",
   "singleQuote": true
 }
diff --git a/frontend/components/App.vue b/frontend/components/App.vue
diff --git a/frontend/components/BaseMap.vue b/frontend/components/BaseMap.vue
@@ -58,6 +58,10 @@
           :features="nivoseStations.features"
         >
         </vl-source-vector>
+        <vl-style-circle :radius="5">
+          <vl-style-stroke color="rgba(255,255,0,0.4)"></vl-style-stroke>
+          <vl-style-fill color="#ff0"></vl-style-fill>
+        </vl-style-circle>
       </vl-layer-vector>
 
       <vl-overlay
@@ -82,7 +86,7 @@
 
 <script>
 import 'vuelayers/lib/style.css'
-import { pointOnFeature } from '@turf/turf'
+import { pointOnFeature, booleanPointInPolygon } from '@turf/turf'
 import { mapState } from 'vuex'
 
 export default {
@@ -100,22 +104,39 @@ export default {
       selectedFeatures: [],
       selectedMassifFeature: [],
       selectedNivoFeature: [],
-      displayNivose: false
+      displayNivose: true
     }
   },
   computed: mapState(['massifs', 'nivoseStations']),
   watch: {
     selectedFeatures(val) {
       this.selectedFeatures = val
       if (val[0]) {
+        // FIXME this is ugly.
         this.$store.dispatch('fetchLastBraById', val[0].properties.id)
+        console.log(val[0].geometry)
+        this.findNivoStationInExtent(val[0].geometry).forEach((id) => {
+          this.$store.dispatch('fetchLastNivoseById', id)
+        })
       }
     }
   },
   methods: {
     findPointOnSurface(feature) {
       const point = pointOnFeature(feature.geometry)
       return point.geometry.coordinates
+    },
+    zoomToExtent(e) {
+      console.log(e)
+    },
+    findNivoStationInExtent(geometry) {
+      if (this.nivoseStations) {
+        return this.nivoseStations.features
+          .filter((f) => {
+            booleanPointInPolygon(f, geometry)
+          })
+          .map((f) => f.properties.id)
+      }
     }
   }
 }

diff --git a/frontend/components/BraData.vue b/frontend/components/BraData.vue
@@ -1,39 +1,63 @@
 <template>
-  <div v-if="braUrl">
-    <div class="row my-3 justify-content-md-center">
-      <div class="col">
-        <b-button-toolbar key-nav aria-label="Toolbar with button groups">
-          <b-button-group class="mr-1">
-            <b-button :disabled="noFollowed">&laquo;</b-button>
-            <b-button :disabled="noFollowed">&lsaquo;</b-button>
-          </b-button-group>
-          <b-button-group class="mr-1">
-            <b-button :disabled="noFollowed">Jour suivant</b-button>
-            <b-button :disabled="noPrevious">Jour précédent</b-button>
-          </b-button-group>
-          <b-button-group class="mr-1">
-            <b-button :disabled="noPrevious">&rsaquo;</b-button>
-            <b-button :disabled="noPrevious">&raquo;</b-button>
-          </b-button-group>
-          <b-input-group class="mr1">
-            <b-form-input value="01/01/2019" type="date"></b-form-input>
-          </b-input-group>
-        </b-button-toolbar>
+  <div>
+    <div v-if="braUrl">
+      <div class="row my-3 justify-content-md-center">
+        <div class="col">
+          <b-button-toolbar key-nav aria-label="Toolbar with button groups">
+            <b-button-group class="mr-1">
+              <b-button :disabled="noFollowed">&laquo;</b-button>
+              <b-button :disabled="noFollowed">&lsaquo;</b-button>
+            </b-button-group>
+            <b-button-group class="mr-1">
+              <b-button :disabled="noFollowed">Jour suivant</b-button>
+              <b-button :disabled="noPrevious">Jour précédent</b-button>
+            </b-button-group>
+            <b-button-group class="mr-1">
+              <b-button :disabled="noPrevious">&rsaquo;</b-button>
+              <b-button :disabled="noPrevious">&raquo;</b-button>
+            </b-button-group>
+            <b-input-group class="mr1">
+              <b-form-input value="01/01/2019" type="date"></b-form-input>
+            </b-input-group>
+          </b-button-toolbar>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <div class="text-center">
+            <b-spinner
+              v-if="braLoading"
+              type="grow"
+              label="Spinning"
+            ></b-spinner>
+          </div>
+          <b-embed
+            id="bra-iframe"
+            type="iframe"
+            :src="braUrl"
+            aspect="1by1"
+          ></b-embed>
+        </div>
       </div>
     </div>
-    <div class="row">
-      <div class="col">
-        <b-spinner
-          v-if="massifLoading"
-          type="grow"
-          label="Spinning"
-        ></b-spinner>
-        <b-embed
-          id="bra-iframe"
-          type="iframe"
-          :src="braUrl"
-          aspect="1by1"
-        ></b-embed>
+    <div v-else>
+      <div class="container">
+        <b-jumbotron>
+          <template slot="header">
+            Bienvenue sur Nivo !
+          </template>
+          <template slot="lead">
+            Pour consulter les données d'un massifs, cliquez sur celui-ci dans
+            la carte a droite.
+          </template>
+
+          <p>
+            Frustré de l'ergonomie du site de météo france pour la consultation
+            des données lié à la neige, nous avons eu l'idée de rassembler ici
+            les données qui nous semblaient pertinentes lors de la préparation
+            de nos sorties.
+          </p>
+        </b-jumbotron>
       </div>
     </div>
   </div>
@@ -49,7 +73,7 @@ export default {
     }
   },
   computed: {
-    ...mapState(['massifLoading']),
+    ...mapState(['braLoading']),
     ...mapGetters(['braUrl'])
   },
   methods: {

diff --git a/frontend/components/NivoData.vue b/frontend/components/NivoData.vue
@@ -1,6 +1,13 @@
 <template>
   <div>
-    <highcharts :options="chartOptions"></highcharts>
+    <div v-if="nivoseDataLoading">
+      <div class="text-center">
+        <b-spinner type="grow" label="Spinning"></b-spinner>
+      </div>
+    </div>
+    <div v-if="nivoseData">
+      <highcharts :options="chartOptions"></highcharts>
+    </div>
   </div>
 </template>
 
@@ -20,6 +27,6 @@ export default {
       records: []
     }
   },
-  computed: mapState(['nivoseData'])
+  computed: mapState(['nivoseData', 'nivoseDataLoading'])
 }
 </script>
diff --git a/frontend/middleware/README.md b/frontend/middleware/README.md
diff --git a/frontend/nuxt.config.js b/frontend/nuxt.config.js
@@ -44,7 +44,7 @@ export default {
   modules: [
     // Doc: https://bootstrap-vue.js.org/docs/
     'bootstrap-vue/nuxt',
-    '@/shared/vuelayers',
+    '@/modules/vuelayers',
     '@nuxtjs/axios'
   ],
   /*
@@ -57,7 +57,8 @@ export default {
     extend(config, ctx) {}
   },
   env: {
-    baseUrl: `${process.env.API_PREFIX || 'http'}://${process.env.API_HOST || 'localhost'}:${process.env.API_PORT || 8000}`,
+    baseUrl: `${process.env.API_PREFIX || 'http'}://${process.env.API_HOST ||
+      'localhost'}:${process.env.API_PORT || 9000}`,
     baseMapUrl:
       process.env.BASE_MAP_URL ||
       'https://wxs.ign.fr/an7nvfzojv5wa96dsga5nk8w/geoportail/wmts'