bachir/ouatterrir-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

displaying double cartouche on superposition opening

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2023-09-15 11:27:59 +02:00
parent 36b76a9ba6
commit c1c1eab95d
8 changed files with 116 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/main.scss
View File

@ -125,6 +125,8 @@ body{
} }
#content{ #content{
display: flex;
gap: 0.5rem;
@mixin main-cartouche{ @mixin main-cartouche{
background-color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.9);
box-sizing: border-box; box-sizing: border-box;

8
src/components/ConcernementMapItem.vue
View File

@ -1395,8 +1395,12 @@ export default {
// push route (keep the hash for map_mode) // push route (keep the hash for map_mode)
this.$router.push({ this.$router.push({
name: 'concernement', name: 'concernement',
hash: `#${this.map_mode}`, params: {cid: this.cid},
params: {id: this.cid, mapitemid: this.id} query: {
mapitemid: this.id,
superposition_id: this.superposition_id
},
hash: `#${this.map_mode}`
}); });
// reset the mousehover // reset the mousehover
this.resetHoverElmt(); this.resetHoverElmt();

8
src/components/ConcernementMapPopup.vue
View File

@ -36,10 +36,10 @@ export default {
window.removeEventListener('mousemove', this.onMousemove); window.removeEventListener('mousemove', this.onMousemove);
}, },
computed: { computed: {
...mapState(ConcernementsStore,['concernements']), ...mapState(ConcernementsStore,['concernements',
...mapState(ConcernementsStore,['concernementsByID']), 'concernementsByID',
...mapState(ConcernementsStore,['allEntitesById']), 'allEntitesById',
...mapState(ConcernementsStore,['allBesoinsById']) 'allBesoinsById'])
}, },
watch: { watch: {
infos: { infos: {

2
src/components/MapConcernements.vue
View File

@ -1265,7 +1265,7 @@ export default {
<li> <li>
<a <a
title="superposition" href="#superposition" @click="setMapMode('superposition')" title="superposition" href="#superposition" @click="setMapMode('superposition')"
:class="{ disabled: opened_concernement && !opened_concernement.has_superposition }" :class="{ disabled: opened_concernement && !opened_concernement.has_superpositions }"
> >
<span class="icon superposition"></span> <span class="label"> superposition</span> <span class="icon superposition"></span> <span class="label"> superposition</span>
</a> </a>

38
src/components/contents/TerrainDeVie.vue
View File

@ -16,9 +16,10 @@ import { mdiChevronRight } from '@mdi/js';
import { mdiChevronDown } from '@mdi/js'; import { mdiChevronDown } from '@mdi/js';
export default { export default {
props: ['id', 'eid', 'entite'], props: ['cid', 'eid', 'entite'],
data(){ data(){
return { return {
concernement: null,
history_value: 0, history_value: 0,
history_slider_ops: null, history_slider_ops: null,
infos_opened: false, infos_opened: false,
@ -29,16 +30,17 @@ export default {
computed: { computed: {
...mapState(ConcernementsStore,['map_mode', ...mapState(ConcernementsStore,['map_mode',
'opened_concernement', 'opened_concernement',
'concernementsByID',
'ct_concernement', 'ct_concernement',
'ct_entite']), 'ct_entite']),
...mapState(UserStore,['name']), ...mapState(UserStore,['name']),
created(){ created(){
let d = new Date(this.opened_concernement.created); let d = new Date(this.concernement.created);
console.log('d', d); console.log('d', d);
return d.toLocaleDateString("fr-FR");//.toISOString().split('T')[0]; return d.toLocaleDateString("fr-FR");//.toISOString().split('T')[0];
}, },
changed(){ changed(){
let d = new Date(this.opened_concernement.changed); let d = new Date(this.concernement.changed);
console.log('d', d); console.log('d', d);
return d.toLocaleDateString("fr-FR");//.toISOString().split('T')[0]; return d.toLocaleDateString("fr-FR");//.toISOString().split('T')[0];
}, },
@ -47,12 +49,14 @@ export default {
} }
}, },
created () { created () {
console.log(`terrain de vie content created, id: ${this.id}, eid: ${this.eid}, opened_concernement:`, this.opened_concernement); this.concernement = this.concernementsByID[this.cid];
console.log(`terraindevie created, cid: ${this.cid}, eid: ${this.eid}, this.concernement:`, this.concernement);
// revisions // revisions
let data=[]; let data=[];
this.opened_concernement.revisions.forEach(rev => { this.concernement.revisions.forEach(rev => {
if (rev.entites.length > 3) { if (rev.entites.length > 3) {
let d = new Date(rev.changed); let d = new Date(rev.changed);
data.push({ data.push({
@ -80,7 +84,7 @@ export default {
history_value: { history_value: {
handler (n, o) { handler (n, o) {
console.log(`TerrainDeVie watch history_value o:${o}, n:${n}`); console.log(`TerrainDeVie watch history_value o:${o}, n:${n}`);
this.setActiveRevision(this.opened_concernement.id, n); this.setActiveRevision(this.concernement.id, n);
}, },
deep: true deep: true
} }
@ -102,12 +106,12 @@ export default {
</script> </script>
<template> <template>
<CartoucheLayout> <CartoucheLayout :cid="cid">
<template v-slot:header> <template v-slot:header>
<div class="entite"> <div class="entite">
<!-- TODO update entite with revisions --> <!-- TODO update entite with revisions -->
<span v-if="entite && opened_concernement.entites_byid[eid].menacemaintien < 0" class="menacemaintient">est menacé par</span> <span v-if="entite && concernement.entites_byid[eid].menacemaintien < 0" class="menacemaintient">est menacé par</span>
<span v-if="entite && opened_concernement.entites_byid[eid].menacemaintien > 0" class="menacemaintient">est maintenu par</span> <span v-if="entite && concernement.entites_byid[eid].menacemaintien > 0" class="menacemaintient">est maintenu par</span>
<h3 v-if="entite"><span class="entite-point">&bull;</span>&ThinSpace;{{ entite.title }}</h3> <h3 v-if="entite"><span class="entite-point">&bull;</span>&ThinSpace;{{ entite.title }}</h3>
</div> </div>
</template> </template>
@ -115,13 +119,13 @@ export default {
<template v-slot:main> <template v-slot:main>
<!-- concernement --> <!-- concernement -->
<template v-if="!entite"> <template v-if="!entite">
<section v-if="opened_concernement.description" class="description"> <section v-if="concernement.description" class="description">
<label v-if="ct_concernement">{{ ct_concernement.field_description.description }}</label> <label v-if="ct_concernement">{{ ct_concernement.field_description.description }}</label>
<div v-html="opened_concernement.description"/> <div v-html="concernement.description"/>
</section> </section>
<section v-if="opened_concernement.caillou" class="caillou"> <section v-if="concernement.caillou" class="caillou">
<label v-if="ct_concernement">{{ ct_concernement.field_caillou.description }}</label> <label v-if="ct_concernement">{{ ct_concernement.field_caillou.description }}</label>
<div v-html="opened_concernement.caillou"/> <div v-html="concernement.caillou"/>
</section> </section>
</template> </template>
@ -140,14 +144,14 @@ export default {
<div <div
class="author info" class="author info"
@click="onClickInfos"> @click="onClickInfos">
<span>une enquête de</span> {{ opened_concernement.author.username }}<br/> <span>une enquête de</span> {{ concernement.author.username }}<br/>
</div> </div>
<div class="wrapper" :class="{ 'opened': infos_opened }"> <div class="wrapper" :class="{ 'opened': infos_opened }">
<div class="info structure" v-if="opened_concernement.author.structure.length"><span>avec</span> {{ opened_concernement.author.structure[0].name }}<br/></div> <div class="info structure" v-if="concernement.author.structure.length"><span>avec</span> {{ concernement.author.structure[0].name }}<br/></div>
<div class="info lieu" v-if="opened_concernement.lieu.length"><span>à</span> {{ opened_concernement.lieu[0].name }}<br/></div> <div class="info lieu" v-if="concernement.lieu.length"><span>à</span> {{ concernement.lieu[0].name }}<br/></div>
<div class="info created"><span>démarrée le</span> {{ created }}<br/></div> <div class="info created"><span>démarrée le</span> {{ created }}<br/></div>
<div class="info changed"><span>mise à jour le</span> {{ changed }}</div> <div class="info changed"><span>mise à jour le</span> {{ changed }}</div>
<div class="info recit-colophon" v-if="opened_concernement.recit_colophon" v-html="opened_concernement.recit_colophon"/> <div class="info recit-colophon" v-if="concernement.recit_colophon" v-html="concernement.recit_colophon"/>
</div> </div>
</section> </section>

22
src/components/layout/CartoucheLayout.vue
View File

@ -7,14 +7,18 @@ import SvgIcon from '@jamescoyle/vue-icon';
import { mdiHeadphones } from '@mdi/js'; import { mdiHeadphones } from '@mdi/js';
export default { export default {
props: ['id', 'eid', 'entite'], props: ['cid'],
data(){ data(){
return { return {
headphones_path: mdiHeadphones headphones_path: mdiHeadphones
} }
}, },
created () {
console.log('Cartouch layout created', this.cid);
this.concernement = this.concernementsByID[this.cid];
},
computed: { computed: {
...mapState(ConcernementsStore,['opened_concernement', 'ct_concernement']), ...mapState(ConcernementsStore,['concernementsByID', 'opened_concernement', 'ct_concernement']),
}, },
methods: { methods: {
...mapActions(ConcernementsStore,['setMapMode']) ...mapActions(ConcernementsStore,['setMapMode'])
@ -29,28 +33,28 @@ export default {
<header> <header>
<div class="concernement-cartouche-icons"> <div class="concernement-cartouche-icons">
<label>{{ ct_concernement.title.description }}</label> <label>{{ ct_concernement.title.description }}</label>
<h2>{{ opened_concernement.title }}</h2> <h2>{{ concernement.title }}</h2>
<nav class="icons"> <nav class="icons">
<ul> <ul>
<li v-if="opened_concernement.has_recit" > <li v-if="concernement.has_recit" >
<svg-icon type="mdi" :path="headphones_path"></svg-icon> <svg-icon type="mdi" :path="headphones_path"></svg-icon>
</li> </li>
<li> <li>
<a href="#terraindevie" @click="setMapMode('terraindevie')"><span class="icon terraindevie"></span></a> <a href="#terraindevie" @click="setMapMode('terraindevie')"><span class="icon terraindevie"></span></a>
</li> </li>
<li v-if="opened_concernement.has_puissancedagir" > <li v-if="concernement.has_puissancedagir" >
<a href="#puissanceagir" @click="setMapMode('puissancedagir')"><span class="icon puissancedagir"></span></a> <a href="#puissanceagir" @click="setMapMode('puissancedagir')"><span class="icon puissancedagir"></span></a>
</li> </li>
<li v-if="opened_concernement.has_proximite" > <li v-if="concernement.has_proximite" >
<a href="#proximite" @click="setMapMode('proximite')"><span class="icon proximite"></span></a> <a href="#proximite" @click="setMapMode('proximite')"><span class="icon proximite"></span></a>
</li> </li>
<li v-if="opened_concernement.has_superposition" > <li v-if="concernement.has_superposition" >
<a href="#superposition" @click="setMapMode('superposition')"><span class="icon superposition"></span></a> <a href="#superposition" @click="setMapMode('superposition')"><span class="icon superposition"></span></a>
</li> </li>
<li v-if="opened_concernement.has_agissantes" > <li v-if="concernement.has_agissantes" >
<a href="#action" @click="setMapMode('action')"><span class="icon action"></span></a> <a href="#action" @click="setMapMode('action')"><span class="icon action"></span></a>
</li> </li>
<li v-if="opened_concernement.has_doleance" > <li v-if="concernement.has_doleance" >
<a href="#doleancer" @click="setMapMode('doleancer')"><span class="icon doleancer"></span></a> <a href="#doleancer" @click="setMapMode('doleancer')"><span class="icon doleancer"></span></a>
</li> </li>
</ul> </ul>

2
src/router/index.js
View File

@ -25,7 +25,7 @@ const router = createRouter({
props: true props: true
}, },
{ {
path: '/concernement/:id/:mapitemid/:eid?', path: '/concernement/:cid/:eid?',
name: 'concernement', name: 'concernement',
// component: ConcernementView, // component: ConcernementView,
// route level code-splitting // route level code-splitting

71
src/views/Concernement.vue
View File

@ -17,7 +17,7 @@ import PuissanceAgir from '@components/contents/PuissanceAgir.vue';
import Doleancer from '@components/contents/Doleancer.vue'; import Doleancer from '@components/contents/Doleancer.vue';
export default { export default {
props: ['id', 'eid'], props: ['cid', 'eid'],
data(){ data(){
return { return {
entite: null, entite: null,
@ -28,12 +28,58 @@ export default {
computed: { computed: {
...mapState(ConcernementsStore,['map_mode', ...mapState(ConcernementsStore,['map_mode',
'opened_concernement', 'opened_concernement',
'concernements_loaded']), 'concernements_loaded',
// ...mapState(CommonStore,['hover_elmt']) 'allSuperpositions_byid']),
// ...mapState(CommonStore,['hover_elmt']),
superposition_id () {
console.log('superposition_id computed');
if(this.$route.query.superposition_id){
return this.$route.query.superposition_id
} else {
return null;
}
},
superposition () {
console.log('superposition computed', this.superposition_id);
if(this.superposition_id){
let sid = this.$route.query.superposition_id;
let ids = sid.match(/(\d+)_(\d+)__(\d+)_(\d+)/i)
let couple_key = `${ids[1]}-${ids[3]}`
console.log('superposition_id', sid, couple_key, ids);
if (this.allSuperpositions_byid[couple_key][sid]) {
let s = this.allSuperpositions_byid[couple_key][sid]
console.log(s);
return s;
}else{
return null;
}
} else {
return null;
}
},
superposed_cid_eid () {
if (this.superposition) {
let r = null;
this.superposition.forEach(s => {
if(s.cid !== this.opened_concernement.id){
r = {
cid: s.cid,
eid: s.eid
}
}
});
console.log('superposed_cid_eid', r);
return r;
} else {
return null
}
}
}, },
created () { created () {
console.log(`Concernement view created, id: ${this.id}, eid: ${this.eid}, opened_concernement:${this.opened_concernement}`); console.log(`Concernement view created, id: ${this.cid}, eid: ${this.eid}, opened_concernement:${this.opened_concernement}`);
console.log('Concernement view created, allSuperpositions_byid', this.allSuperpositions_byid);
console.log("superposition", this.superposition);
// when we arrived directly to the url, load the entite // when we arrived directly to the url, load the entite
// this.eid provided by route params // this.eid provided by route params
if (!this.entity && this.eid) { if (!this.entity && this.eid) {
@ -46,7 +92,7 @@ export default {
// console.log(`watch concernements_loaded n: ${n}, opened_concernement:${this.opened_concernement}, id:${this.id}`); // console.log(`watch concernements_loaded n: ${n}, opened_concernement:${this.opened_concernement}, id:${this.id}`);
// when we arrived directly to the url then all concernement are loaded: do open the concernement // when we arrived directly to the url then all concernement are loaded: do open the concernement
if (!this.opened_concernement) { if (!this.opened_concernement) {
this.openCloseConcernements(parseInt(this.id)) this.openCloseConcernements(parseInt(this.cid))
} }
}, },
deep: true deep: true
@ -61,7 +107,7 @@ export default {
} }
}, },
deep: true deep: true
}, }
}, },
methods: { methods: {
...mapActions(ConcernementsStore,['openCloseConcernements', ...mapActions(ConcernementsStore,['openCloseConcernements',
@ -106,9 +152,13 @@ export default {
<template> <template>
<section v-if="opened_concernement" class="concernement"> <section v-if="opened_concernement" class="concernement">
<TerrainDeVie v-if="map_mode === 'terraindevie' || map_mode === 'action'|| map_mode === 'superposition'" :id="id" :eid="eid" :entite="entite"/> <TerrainDeVie v-if="map_mode === 'terraindevie' || map_mode === 'action'|| map_mode === 'superposition'" :cid="cid" :eid="eid" :entite="entite"/>
<PuissanceAgir v-if="map_mode === 'puissancedagir'" :id="id"/> <PuissanceAgir v-if="map_mode === 'puissancedagir'" :id="cid"/>
<Doleancer v-if="map_mode === 'doleancer'" :id="id"/> <Doleancer v-if="map_mode === 'doleancer'" :id="cid"/>
</section>
<section v-if="map_mode === 'superposition' && superposition" class="concernement clone">
<TerrainDeVie :cid="superposed_cid_eid.cid" :eid="superposed_cid_eid.eid" />
</section>
<nav class="close-concernement" @click="closeConcernement"> <nav class="close-concernement" @click="closeConcernement">
<svg class="close-btn" viewbox="0 0 24 24" width="24" height="24" style="--sx: 1; --sy: 1; --r: 0deg;"> <svg class="close-btn" viewbox="0 0 24 24" width="24" height="24" style="--sx: 1; --sy: 1; --r: 0deg;">
<mask id="arrowMask"> <mask id="arrowMask">
@ -118,7 +168,6 @@ export default {
<circle cx="12" cy="12" r="12" mask="url(#arrowMask)" fill="white" /> <circle cx="12" cy="12" r="12" mask="url(#arrowMask)" fill="white" />
</svg> </svg>
</nav> </nav>
</section>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>