key

src/main.js

@@ -57,7 +57,6 @@ window.onpopstate = function(event){
 };
 
 Vue.config.devtools = true
-window.location.hash = "#de";
 Vue.use(Toasted, {
     iconPack : 'fontawesome' // set your iconPack, defaults to material. material|fontawesome|custom-class
 });
@@ -67,12 +66,6 @@ Vue.use(VueOnsen);
 Vue.use(BootstrapVue)
 Vue.use(VFileUpload)
 Vue.use(require('vue-moment'));
-window.addEventListener("hashchange", function(){
-  console.log("Hash changed to", window.location.hash);
-    window.location.hash = "#albiziapp"
-  
-  // .... Do your thing here...
-});
 // Register components globally
 // Object.values(OnsenComponents).forEach(component => Vue.component(component.name, component)); // For ESM
 Vue.component('custom-toolbar', CustomToolbar); // Common toolbar
@@ -102,6 +95,7 @@ new Vue({
   render: h => h(AppNavigator),
   created(){
     this.$store.dispatch('floreData/getFlore')
+    this.$store.dispatch('floreData/getFloreProperties')
 
     this.$ons.ready(() => {
 

src/pages/Key.vue

+<template>
+  <v-ons-page>
+    <v-ons-toolbar>
+      <div class="left">
+        <v-ons-back-button>Retour</v-ons-back-button>
+      </div>
+      <div class="center">Clef d'identification</div>
+    </v-ons-toolbar>
+    <v-ons-list>
+      <v-ons-list-item v-for="prop in floreProps">
+        <div class="left">{{prop.prop.frSubtitle}}</div>
+        <div class="center">
+          <v-select
+            @input="setProperty($event,prop)"
+            :options="prop.values"
+            class="selector"
+            label="normalizedForm"
+            :placeholder="prop.prop.frTitle"
+          ></v-select>
+        </div>
+      </v-ons-list-item>
+    <v-ons-list>
+      <v-ons-list-item @click="viewItem(tree.telaBotanicaTaxon)" v-for="tree in filteredTreeList">
+        <div class="left">{{tree.common}}</div>
+        <div class="center"></div>
+        <div class="right">{{tree.species}}</div>
+      </v-ons-list-item>
+    </v-ons-list>
+
+    </v-ons-list>
+  </v-ons-page>
+</template>
+<style>
+.selector {
+  width: 200px !important;
+  margin-left: auto;
+  margin-right: 30px;
+}
+</style>
+
+<script>
+import FloreItem from "./FloreItem.vue";
+
+import { mapState } from "vuex";
+
+export default {
+  data() {
+    return {
+      selectedProps: new Set(),
+      selectedArray: []
+    };
+  },
+  computed: {
+    ...mapState({
+      floreProps: state => state.floreData.floreProperties
+    }),
+    treeList() {
+      return this.$store.state.floreData.treeList;
+    },
+
+    filteredTreeList() {
+      return this.treeList.filter(v => {
+        for (let floreProp of this.selectedArray) {
+          if (!v.floreProperties.includes(floreProp._id)) {
+            return false;
+          }
+        }
+        return true;
+      });
+    }
+  },
+  methods: {
+    viewItem(telaBotanicaTaxon) {
+      this.$store.commit("navigator/push", {
+        extends: FloreItem,
+        data: function() {
+          return {
+            telaBotanicaTaxon: telaBotanicaTaxon,
+            toolbarInfo: {
+              backLabel: "Home",
+              title: "key"
+            }
+          };
+        }.bind(this)
+      });
+    },
+
+    setProperty(event, source) {
+      for (let v of source.values) {
+        this.selectedProps.forEach(
+          function(el) {
+            if (v._id == el._id) {
+              this.selectedProps.delete(el);
+            }
+          }.bind(this)
+        );
+      }
+      if (event) {
+        this.selectedProps.add(event);
+      }
+      this.selectedArray = [...this.selectedProps];
+    }
+  }
+};
+</script>
+

src/pages/Menu.vue

@@ -15,6 +15,7 @@
       </v-ons-list-item>
       <v-ons-list-item @click="logout">{{ $t('logout') }}</v-ons-list-item>
       <v-ons-list-item @click="flore">Flore</v-ons-list-item>     
+      <v-ons-list-item @click="key">Clef</v-ons-list-item>     
       <v-ons-list-item @click="settings">Settings</v-ons-list-item>
       <v-ons-list-item @click="admin">Admin</v-ons-list-item>
       <v-ons-list-item>{{ $t('language') }} &nbsp;
@@ -32,8 +33,10 @@
 import Admin from "./Admin.vue";
 import Settings from "./Settings.vue";
 import Flore from "./Flore.vue"
+import Key from "./Key.vue"
 export default {
   methods: {
+
     loadView(index) {
       this.$store.commit("tabbar/set", index + 1);
       this.$store.commit("splitter/toggle");
@@ -59,6 +62,21 @@ export default {
             });
 
     },
+    key(){
+      this.$store.commit("navigator/push", {
+              extends: Key,
+              data() {
+                return {
+                  toolbarInfo: {
+                    backLabel: "Home",
+                    title: "key"
+                  }
+                };
+              }
+            });
+
+    },
+
     flore(){
       this.$store.commit("navigator/push", {
               extends: Flore,

src/store/modules/floreData.js

@@ -2,14 +2,23 @@ export default {
         strict: true,
         namespaced: true,
         state :{
-          treeList:[]
+          treeList:[],
+          floreProperties:[]
         },
         mutations:{
           setFlore(state,treeList){
             state.treeList=treeList
-          }
+          },
+          setProperty(state,properties){
+            state.floreProperties=properties
+          },
+
         },
         actions:{
+          getFloreProperties({commit}){
+            axios.get('/api/floreProps')
+            .then((response)=>{commit('setProperty',response.data)})
+          },
           getFlore({commit}){
             axios.get('/api/listTrees')
             .then((response)=>{