Commit 5902b0bd authored by gick's avatar gick
Browse files

New model

parent d0bb018e
......@@ -96,5 +96,9 @@ new Vue({
document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
}
},
mounted:function(){
console.log('dded')
this.$store.dispatch('floreData/getFlore')
}
});
......@@ -14,8 +14,14 @@ export default {
notVeryConfident:"Not very confident",
confident: "Confident",
//Flore
commonGenus:'Common Genus',
// APPTABBAR
map: "Map",
mission: "Mission",
score: "Score",
......@@ -216,7 +222,10 @@ export default {
unspecified:"Non renseignée",
notVeryConfident:"Peu confiant",
confident: "Confiant",
//FLORE
commonGenus:'Genre vernac.',
// APPTABBAR
map: "Carte",
......
......@@ -97,6 +97,8 @@ new Vue({
i18n,
render: h => h(AppNavigator),
created(){
this.$store.dispatch('floreData/getFlore')
this.$ons.ready(() => {
this.$ons.disableDeviceBackButtonHandler();
......
<template>
<v-ons-page>
<v-ons-toolbar>
<div class="left">
<v-ons-back-button>Retour</v-ons-back-button>
</div>
<div class="center">Flore Tela Botanica</div>
</v-ons-toolbar>
<v-ons-list>
<v-ons-list-item>
<div class="center">
<v-ons-input placeholder="Rechercher" float v-model="search"></v-ons-input>
</div>
</v-ons-list-item>
</v-ons-list>
<div>
<v-ons-list v-for="(treeSet,i) in filteredTreeByGenus" v-bind:key="i">
<v-ons-list-item
class="list-header list-header--material"
style="display:flex;background-color:lightGrey"
>
<div class="right">{{treeSet.genus}}</div>
<div class="left">{{treeSet.common_genus}}</div>
</v-ons-list-item>
<v-ons-list-item @click='viewItem(tree.telaBotanicaTaxon)' v-for="tree in treeSet.species">
<div class="left">{{tree.common}}</div>
<div class="center"></div>
<div class="right">{{tree.species}}</div>
</v-ons-list-item>
</v-ons-list>
</div>
</v-ons-page>
</template>
<script>
import FloreItem from './FloreItem.vue'
export default {
data() {
return { search: "", treeSet: this.treeByGenus };
},
computed: {
treeList() {
return this.$store.state.floreData.treeList;
},
getUniqueGenus() {
return [...new Set(this.treeList.map(v => v.common_genus).sort())];
},
treeByGenus() {
return this.getUniqueGenus.map(v => {
let res = {};
res.common_genus = v;
res.species = this.treeList.filter(val => val.common_genus == v);
res.genus = res.species[0].genus;
return res;
});
},
filteredTreeByGenus() {
return this.treeByGenus.map(v => {
let tree=_.cloneDeep(v)
let search = this.normalize(this.search);
tree.species=this.filterSpecies(search,tree)
return tree;
}).filter(v=>v.species.length);
}
},
methods: {
viewItem(telaBotanicaTaxon){
this.$store.commit("navigator/push", {
extends: FloreItem,
data: function() {
return {
telaBotanicaTaxon: telaBotanicaTaxon,
toolbarInfo: {
backLabel: "Home",
title: "key"
}
};
}.bind(this)
});
},
filterSpecies(search,tree) {
console.log(tree)
let res = [];
for(let i=0;i<tree.species.length;i++){
let cond1=this.normalize(tree.species[i].species).includes(search);
let cond2=this.normalize(tree.species[i].common).includes(search);
if(cond1 || cond2){
res.push({telaBotanicaTaxon:tree.species[i].telaBotanicaTaxon,species:tree.species[i].species,common:tree.species[i].common})
}
}
return res;
},
normalize(string) {
return string
.toLowerCase()
.normalize("NFD")
.replace(/[\u0300-\u036f]/g, "");
}
}
};
</script>
<template>
<v-ons-page>
<v-ons-toolbar>
<div class="left">
<v-ons-back-button>Retour</v-ons-back-button>
</div>
<div class="center">{{tree.species}}</div>
</v-ons-toolbar>
<v-ons-card>
<div class="content">
<b-carousel
id="carousel-1"
v-model="slide"
:interval="0"
img-width="0"
img-height="0"
controls
fade
indicators
background="#ababab"
style="text-shadow: 1px 1px 2px #333;"
>
<!-- Text slides with image -->
<!-- Slides with custom text -->
<!-- Slides with image only -->
<b-carousel-slide v-for='image in images' img-height="300px" :img-src='image'>
</b-carousel-slide>
</b-carousel>
<h1 v-show="descriptionHTML" class="title" v-b-toggle.description>Description</h1>
<b-collapse id="description"><div v-html="descriptionHTML"></div></b-collapse>
<h1 class="title" v-show="usageHTML" v-b-toggle.usage>Usage</h1>
<b-collapse v-if="usageHTML" id="usage"><div v-html="usageHTML"></div></b-collapse>
<h1 class="title" v-if="habitatHTML" v-b-toggle.habitat>Habitat</h1>
<b-collapse id="habitat" v-if="habitatHTML"><div v-html="habitatHTML"></div></b-collapse>
</div>
</v-ons-card>
</v-ons-page>
</template>
<style>
.carousel-item img {
width:400px!important;
margin:auto;
}
h1.title{
background-color:lightgrey!important;
padding: 3px!important;
border-radius: 5px;
margin-bottom: -5px!important;
}
</style>
<script>
export default {
data() {
return {
slide: 0,
telaBotanicaTaxon: "",
habitatHTML: "",
descriptionHTML: "",
usageHTML: "",
images: []
};
},
computed: {
tree() {
return this.$store.state.floreData.treeList.filter(
v => v.telaBotanicaTaxon == this.telaBotanicaTaxon
)[0];
}
},
mounted() {
axios.get("/api/info/" + this.telaBotanicaTaxon).then(
function(res) {
console.log(res);
let response = res.data[0];
this.habitatHTML = response.habitat;
this.descriptionHTML = response.description;
this.usageHTML = response.usage;
this.images = response.images;
}.bind(this)
);
}
};
</script>
......@@ -14,6 +14,7 @@
<div class="center">{{ item.title }}</div>
</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="settings">Settings</v-ons-list-item>
<v-ons-list-item @click="admin">Admin</v-ons-list-item>
<v-ons-list-item>{{ $t('language') }} &nbsp;
......@@ -30,7 +31,7 @@
<script>
import Admin from "./Admin.vue";
import Settings from "./Settings.vue";
import Flore from "./Flore.vue"
export default {
methods: {
loadView(index) {
......@@ -58,6 +59,21 @@ export default {
});
},
flore(){
this.$store.commit("navigator/push", {
extends: Flore,
data() {
return {
toolbarInfo: {
backLabel: "Home",
title: "key"
}
};
}
});
},
admin() {
if(this.isAdmin){
this.$store.commit("navigator/push", {
......
......@@ -8,13 +8,24 @@
<ons-list>
<ons-list-header>{{ $t('information') }}</ons-list-header>
<ons-list-item v-show="releve.authorName">{{ $t('recordAuthor') }} : {{releve.authorName}}</ons-list-item>
<ons-list-item v-show="releve.specie">{{ $t('specie') }} : {{releve.specie}}</ons-list-item>
<ons-list-item v-show="releve.species">{{ $t('specie') }} : {{releve.species}}</ons-list-item>
<ons-list-item v-show="releve.genus">{{ $t('genus') }} : {{releve.genus}}</ons-list-item>
<ons-list-item v-show="releve.commonGenus">Genre vernac. : {{releve.commonGenus}}</ons-list-item>
<ons-list-item v-show="releve.common">{{ $t('common') }} : {{releve.common}}</ons-list-item>
<ons-list-item v-show="releve.height">{{ $t('heigth') }} : {{releve.height}}</ons-list-item>
<ons-list-item v-show="releve.crown">{{ $t('crownDiameter') }} : {{releve.crown}}</ons-list-item>
<ons-list-item v-show="releve.confidence">{{ $t('confidenceDegree') }} : {{releve.confidence}}</ons-list-item>
<ons-list-item v-show="releve.noTree.length>0">{{ $t('usersReporting') }} : {{releve.noTree.length}}</ons-list-item>
<v-ons-list-item>
<div class="center">
<v-ons-button
modifier="large"
@click="viewItem"
v-if="releve.telaBotanicaTaxon.length>0"
style="margin: 6px 0"
>Fiche espèce</v-ons-button>
</div>
</v-ons-list-item>
<ons-list-item
v-show="releve.validation.length-1"
......@@ -101,6 +112,7 @@
import SimplePage from "./SimplePage.vue";
import uploadObservationToOSM from "../js/osmPost"
import osmUpdate from "../js/osmUpdate"
import FloreItem from "./FloreItem.vue";
// TODO cacher supprimer relevé si l'utilisateur ne peut pas le supprimer
export default {
......@@ -119,6 +131,7 @@ export default {
releve() {
return this.$store.state.releve.releves.find(rel => rel._id == this.id);
},
isGod(){
return this.$store.state.user.isGod
},
......@@ -166,6 +179,21 @@ export default {
}
},
methods: {
viewItem() {
this.$store.commit("navigator/push", {
extends: FloreItem,
data: function() {
return {
telaBotanicaTaxon: this.releve.telaBotanicaTaxon,
toolbarInfo: {
backLabel: "Home",
title: "key"
}
};
}.bind(this)
});
},
uploadToOSM(){
uploadObservationToOSM(this.releve)
this.$store.commit("navigator/pop");
......
......@@ -5,6 +5,7 @@
<v-ons-back-button>Retour</v-ons-back-button>
</div>
</v-ons-toolbar>
<v-ons-list>
<v-ons-list-header class="head" v-if="!modify">{{ $t('newRecord') }}</v-ons-list-header>
<v-ons-list-header class="head" v-if="modify">{{ $t('modifyRecord') }}</v-ons-list-header>
......@@ -13,7 +14,16 @@
font-size: 15px;
font-weight: bolder;"
>{{ $t('identification') }}</v-ons-list-title>
<v-ons-list-item>
<div class="center">
<v-ons-button
modifier="large"
@click="viewItem"
v-if="releve.species.length>0"
style="margin: 6px 0"
>Fiche espèce</v-ons-button>
</div>
</v-ons-list-item>
<v-ons-list-item>
<div class="left">
<v-ons-icon icon="ion-leaf" class="list-item__icon"></v-ons-icon>
......@@ -21,17 +31,36 @@
<div class="center">
<label class="tag">{{ $t('specie') }}</label>
<v-select
class="selector"
v-model="releve.specie"
class="selector"
v-model="releve"
ref="species"
:reduce="option=>option.espece"
:options="specieVerSource"
label="espece"
:placeholder=placeholder.specieName
:options="speciesList"
label="species"
v-on:input="setTaxon"
:placeholder="placeholder.specieName"
style="width: -webkit-fill-available;"
></v-select>
</div>
</v-ons-list-item>
<v-ons-list-item>
<div class="left">
<v-ons-icon icon="ion-leaf" class="list-item__icon"></v-ons-icon>
</div>
<div class="center">
<label class="tag">{{ $t('commonGenus') }}</label>
<v-select
class="selector"
v-model="releve.commonGenus"
ref="genus"
v-on:input="setGenus"
:disabled="releve.species.length>0"
:options="commonGenus"
:placeholder="placeholder.genusName"
style="width: -webkit-fill-available;"
></v-select>
</div>
</v-ons-list-item>
<v-ons-list-item>
<div class="left">
<v-ons-icon icon="ion-leaf" class="list-item__icon"></v-ons-icon>
......@@ -41,11 +70,11 @@
<v-select
class="selector"
v-model="releve.genus"
:disabled="releve.species.length>0"
ref="genus"
v-on:input="setGenus"
:options="genusList"
:reduce="option=>option.name"
label="name"
:placeholder=placeholder.genusName
:placeholder="placeholder.genusName"
style="width: -webkit-fill-available;"
></v-select>
</div>
......@@ -57,12 +86,12 @@
<label class="tag">{{ $t('common') }}</label>
<v-select
class="selector"
v-model="releve.common"
label="vernaculaire"
v-model="releve"
v-on:input="setTaxon"
label="common"
ref="common"
:reduce="option=>option.vernaculaire"
style="width: -webkit-fill-available;"
:placeholder=placeholder.commonName
:placeholder="placeholder.commonName"
:options="commonList"
></v-select>
</v-ons-list-item>
......@@ -84,7 +113,8 @@
<v-ons-list-item v-if="validate">
<div class="left">
<v-ons-icon icon="ion-leaf" class="list-item__icon"></v-ons-icon>{{ $t('noTree') }}
<v-ons-icon icon="ion-leaf" class="list-item__icon"></v-ons-icon>
{{ $t('noTree') }}
</div>
<div class="center" style="margin-left:15px;">
<v-ons-switch @change="releve.noTree=noTree" v-model="noTree"></v-ons-switch>
......@@ -105,12 +135,16 @@
capture="camera"
size="10"
buttonClass="btn"
:customStrings=customStrings
:customStrings="customStrings"
></picture-input>
</v-ons-list-item>
</v-ons-list>
<section style="margin: 16px">
<v-ons-button v-if="!modify && osmUpdates" @click="uploadToOSM" style="margin: 6px">{{ $t('sendOSM') }}</v-ons-button>
<v-ons-button
v-if="!modify && osmUpdates"
@click="uploadToOSM"
style="margin: 6px"
>{{ $t('sendOSM') }}</v-ons-button>
<v-ons-button @click="complete" style="margin: 6px">{{ $t('save') }}</v-ons-button>
<v-ons-button modifier="outline" @click="cancel" style="margin: 6px">{{ $t('cancel') }}</v-ons-button>
</section>
......@@ -121,18 +155,18 @@
position: relative !important;
}
.vs__dropdown-menu {
z-index: 10005!important;
z-index: 10005 !important;
}
.selector{
width: 70%!important;
margin-left:auto;
.selector {
width: 70% !important;
margin-left: auto;
}
.tag{
.tag {
padding-top: 9px;
font-weight: bold;
}
.head{
font-size:36px;
.head {
font-size: 36px;
}
</style>
<script>
......@@ -141,38 +175,47 @@
import PictureInput from "vue-picture-input";
import Identification from "./Identification.vue";
import imageCompression from "browser-image-compression";
import uploadObservationToOSM from "../js/osmPost"
import osmUpdate from "../js/osmUpdate"
import genusList from "../js/genus.js";
import speciesList from "../js/species_ver_old.js"
import commonList from "../js/species_ver.js";
import uploadObservationToOSM from "../js/osmPost";
import osmUpdate from "../js/osmUpdate";
import FloreItem from "./FloreItem.vue";
export default {
watch:{
_id(newId,old){
console.log(old)
if(old){
this.releve._id=old
}
}
},
data() {
return {
releve: {
species: "",
genus: "",
commonGenus: "",
_id:"",
common: "",
telaBotanicaTaxon: "",
confidence: "Non renseignée" //this.$t('unspecified')
},
specie: "",
species: null,
noTree: false,
selectedHeight: 0,
selectedConfidence: "Non renseignée", //this.$t('unspecified')
selectedCrown: 0,
commonList:commonList,
specieVerSource: speciesList,
genusList: genusList,
modify: false,
validate: false,
placeholder: {
specieName: this.$t('specieName'),
genusName: this.$t('genusName'),
commonName: this.$t('commonName')
specieName: this.$t("specieName"),
genusName: this.$t("genusName"),
commonName: this.$t("commonName")
},
customStrings:{
drag: 'Prendre photo',
change: this.$t('change'),
remove: this.$t('remove'),
tap: this.$t('tap')
customStrings: {
drag: "Prendre photo",
change: this.$t("change"),
remove: this.$t("remove"),
tap: this.$t("tap")
}
};
},
......@@ -180,8 +223,55 @@ export default {
PictureInput
},
computed: {
osmUpdates(){
return this.$store.state.commonData.osmUpdate
_id(){
return this.releve._id
},
osmUpdates() {
return this.$store.state.commonData.osmUpdate;
},
treeList() {
return this.$store.state.floreData.treeList;
},
speciesList() {
return [
...new Set(
this.treeList
.map(v => {
return {
commonGenus: v.commonGenus,
common: v.common,
genus: v.genus,
species: v.species,
telaBotanicaTaxon: v.telaBotanicaTaxon
};
})
.sort()
)
];
},
commonList() {
return [
...new Set(
this.treeList
.map(v => {
return {
commonGenus: v.commonGenus,
common: v.common,
genus: v.genus,
species: v.species,
telaBotanicaTaxon: v.telaBotanicaTaxon
};
})
.sort()
)
];
},
genusList() {
return [...new Set(this.treeList.map(v => v.genus).sort())];
},
commonGenus() {
return [...new Set(this.treeList.map(v => v.common_genus))];
},
confidenceValues() {
......@@ -203,9 +293,65 @@ export default {
}
},