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{
display: flex;
gap: 0.5rem;
@mixin main-cartouche{
background-color: rgba(255, 255, 255, 0.9);
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)
this.$router.push({
name: 'concernement',
hash: `#${this.map_mode}`,
params: {id: this.cid, mapitemid: this.id}
params: {cid: this.cid},
query: {
mapitemid: this.id,
superposition_id: this.superposition_id
},
hash: `#${this.map_mode}`
});
// reset the mousehover
this.resetHoverElmt();

8
src/components/ConcernementMapPopup.vue
View File

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

2
src/components/MapConcernements.vue
View File

@ -1265,7 +1265,7 @@ export default {
<li>
<a
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>
</a>

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

@ -16,9 +16,10 @@ import { mdiChevronRight } from '@mdi/js';
import { mdiChevronDown } from '@mdi/js';
export default {
props: ['id', 'eid', 'entite'],
props: ['cid', 'eid', 'entite'],
data(){
return {
concernement: null,
history_value: 0,
history_slider_ops: null,
infos_opened: false,
@ -29,16 +30,17 @@ export default {
computed: {
...mapState(ConcernementsStore,['map_mode',
'opened_concernement',
'concernementsByID',
'ct_concernement',
'ct_entite']),
...mapState(UserStore,['name']),
created(){
let d = new Date(this.opened_concernement.created);
let d = new Date(this.concernement.created);
console.log('d', d);
return d.toLocaleDateString("fr-FR");//.toISOString().split('T')[0];
},
changed(){
let d = new Date(this.opened_concernement.changed);
let d = new Date(this.concernement.changed);
console.log('d', d);
return d.toLocaleDateString("fr-FR");//.toISOString().split('T')[0];
},
@ -47,12 +49,14 @@ export default {
}
},
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
let data=[];
this.opened_concernement.revisions.forEach(rev => {
this.concernement.revisions.forEach(rev => {
if (rev.entites.length > 3) {
let d = new Date(rev.changed);
data.push({
@ -80,7 +84,7 @@ export default {
history_value: {
handler (n, o) {
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
}
@ -102,12 +106,12 @@ export default {
</script>
<template>
<CartoucheLayout>
<CartoucheLayout :cid="cid">
<template v-slot:header>
<div class="entite">
<!-- 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 && 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 menacé 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>
</div>
</template>
@ -115,13 +119,13 @@ export default {
<template v-slot:main>
<!-- concernement -->
<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>
<div v-html="opened_concernement.description"/>
<div v-html="concernement.description"/>
</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>
<div v-html="opened_concernement.caillou"/>
<div v-html="concernement.caillou"/>
</section>
</template>
@ -140,14 +144,14 @@ export default {
<div
class="author info"
@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 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 lieu" v-if="opened_concernement.lieu.length"><span>à</span> {{ opened_concernement.lieu[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="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 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>
</section>

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

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

2
src/router/index.js
View File

@ -25,7 +25,7 @@ const router = createRouter({
props: true
},
{
path: '/concernement/:id/:mapitemid/:eid?',
path: '/concernement/:cid/:eid?',
name: 'concernement',
// component: ConcernementView,
// 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';
export default {
props: ['id', 'eid'],
props: ['cid', 'eid'],
data(){
return {
entite: null,
@ -28,12 +28,58 @@ export default {
computed: {
...mapState(ConcernementsStore,['map_mode',
'opened_concernement',
'concernements_loaded']),
// ...mapState(CommonStore,['hover_elmt'])
'concernements_loaded',
'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 () {
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
// this.eid provided by route params
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}`);
// when we arrived directly to the url then all concernement are loaded: do open the concernement
if (!this.opened_concernement) {
this.openCloseConcernements(parseInt(this.id))
this.openCloseConcernements(parseInt(this.cid))
}
},
deep: true
@ -61,7 +107,7 @@ export default {
}
},
deep: true
},
}
},
methods: {
...mapActions(ConcernementsStore,['openCloseConcernements',
@ -106,9 +152,13 @@ export default {
<template>
<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"/>
<PuissanceAgir v-if="map_mode === 'puissancedagir'" :id="id"/>
<Doleancer v-if="map_mode === 'doleancer'" :id="id"/>
<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="cid"/>
<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">
<svg class="close-btn" viewbox="0 0 24 24" width="24" height="24" style="--sx: 1; --sy: 1; --r: 0deg;">
<mask id="arrowMask">
@ -118,7 +168,6 @@ export default {
<circle cx="12" cy="12" r="12" mask="url(#arrowMask)" fill="white" />
</svg>
</nav>
</section>
</template>
<style lang="scss" scoped>