better concernment and entite content display
This commit is contained in:
parent
453e07ec31
commit
b360987c76
@ -84,7 +84,7 @@ body{
|
||||
box-sizing: border-box;
|
||||
width:450px;
|
||||
height: 100%;
|
||||
padding: 5rem 1rem 1rem;
|
||||
padding: 1rem 1rem 1rem;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
header, section{
|
||||
@ -97,10 +97,25 @@ body{
|
||||
padding: 0 0 1em 0;
|
||||
}
|
||||
header{
|
||||
display: flex;
|
||||
height: 8rem;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
label, h3{
|
||||
// height: 70px;
|
||||
box-sizing: border-box;
|
||||
// padding: 0 0 1em 0;
|
||||
// flex-grow: auto;
|
||||
}
|
||||
h3{
|
||||
font-weight: 400;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
h2{
|
||||
font-weight: 400;
|
||||
font-size: 1.512em;
|
||||
}
|
||||
|
||||
}
|
||||
section>div{
|
||||
font-size: 1em;
|
||||
@ -123,6 +138,19 @@ body{
|
||||
border-radius: 3px;
|
||||
// min-width: 10em;
|
||||
// max-width: 30em;
|
||||
.concernement-map-popup{
|
||||
ul.icons{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
li{
|
||||
list-style:none;
|
||||
padding:0;
|
||||
margin:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
h1{
|
||||
font-size: 1em;
|
||||
font-weight: 400;
|
||||
|
||||
@ -121,7 +121,7 @@ export default {
|
||||
},
|
||||
hover_elmt: {
|
||||
handler (n, o) {
|
||||
console.log('watch hover_elmt', o, n);
|
||||
// console.log('watch hover_elmt', o, n);
|
||||
if (n && n.type === 'concernement' && n.id === this.id) {
|
||||
this.isHover = true;
|
||||
} else {
|
||||
@ -704,7 +704,7 @@ export default {
|
||||
this.ctx.arc(part.position.x, part.position.y, 0.3*this.scale, 0, 2 * Math.PI, false);
|
||||
// console.log(part.id, this.opened_entite_id);
|
||||
if (part.id === this.opened_entite_id) {
|
||||
this.ctx.fillStyle = "#F00";
|
||||
this.ctx.fillStyle = "#01ffe2";
|
||||
} else {
|
||||
this.ctx.fillStyle = "#000";
|
||||
}
|
||||
@ -724,7 +724,7 @@ export default {
|
||||
this.ctx.arc(part.position.x, part.position.y, 1*this.scale, 0, 2 * Math.PI, false);
|
||||
// console.log(part.id, this.opened_entite_id);
|
||||
if (part.id === this.opened_entite_id) {
|
||||
this.ctx.fillStyle = "#F00";
|
||||
this.ctx.fillStyle = "#01ffe2";
|
||||
} else {
|
||||
this.ctx.fillStyle = "#000";
|
||||
}
|
||||
|
||||
@ -72,18 +72,18 @@ export default {
|
||||
this.dom.setAttribute("pos", `${v}-${h}`);
|
||||
switch (h) {
|
||||
case "right":
|
||||
this.dom.style.left = `${e.clientX}px`;
|
||||
this.dom.style.left = `${e.clientX+2}px`;
|
||||
break;
|
||||
case "left":
|
||||
this.dom.style.left = `${e.clientX - this.dom.clientWidth}px`;
|
||||
this.dom.style.left = `${e.clientX - this.dom.clientWidth-2}px`;
|
||||
break;
|
||||
}
|
||||
switch (v) {
|
||||
case "top":
|
||||
this.dom.style.top = `${e.clientY - this.dom.clientHeight}px`;
|
||||
this.dom.style.top = `${e.clientY - this.dom.clientHeight-2}px`;
|
||||
break;
|
||||
case "bottom":
|
||||
this.dom.style.top = `${e.clientY}px`;
|
||||
this.dom.style.top = `${e.clientY+2}px`;
|
||||
break;
|
||||
}
|
||||
}
|
||||
@ -100,6 +100,10 @@ export default {
|
||||
<div class="popup-content-wrapper">
|
||||
<section v-if="infos.type === 'concernement'" class="concernement-map-popup">
|
||||
<h1>{{ concernement.title }}</h1>
|
||||
<ul class="icons">
|
||||
<li v-if="concernement.has_agissantes" ><span class="icon action">Action</span></li>
|
||||
<li v-if="concernement.has_puissancedagir" ><span class="icon puissanceagir">Puissance d'agir</span></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section v-if="infos.type === 'entite'" class="entite-map-popup">
|
||||
<h1>{{ entite.entite.title }}</h1>
|
||||
|
||||
@ -23,6 +23,7 @@ export const ConcernementsStore = defineStore({
|
||||
opened: false,
|
||||
opened_entite_id: null,
|
||||
ct_concernement: {},
|
||||
ct_entite: {},
|
||||
concernements_loaded: false,
|
||||
}),
|
||||
getters: {
|
||||
@ -97,15 +98,30 @@ export const ConcernementsStore = defineStore({
|
||||
}
|
||||
}
|
||||
}`,
|
||||
variables: { type: 'node', bundle: 'concernement' }
|
||||
variables: {}
|
||||
}
|
||||
|
||||
// concernement
|
||||
body.variables = { type: 'node', bundle: 'concernement' }
|
||||
GQL.post('', body)
|
||||
.then(({ data: { data: { entitydef }}}) => {
|
||||
// console.log('loadContentTypeDefinition entitydef', entitydef);
|
||||
entitydef.fields.forEach(field => {
|
||||
this.ct_concernement[field.field_name] = field;
|
||||
});
|
||||
console.log('loadContentTypeDefinition entitydef', this.ct_concernement);
|
||||
console.log('loadContentTypeDefinition entitydef concernement', this.ct_concernement);
|
||||
|
||||
})
|
||||
|
||||
// concernement
|
||||
body.variables = { type: 'node', bundle: 'entite' }
|
||||
GQL.post('', body)
|
||||
.then(({ data: { data: { entitydef }}}) => {
|
||||
// console.log('loadContentTypeDefinition entitydef', entitydef);
|
||||
entitydef.fields.forEach(field => {
|
||||
this.ct_entite[field.field_name] = field;
|
||||
});
|
||||
console.log('loadContentTypeDefinition entitydef entite', this.ct_entite);
|
||||
|
||||
})
|
||||
|
||||
|
||||
@ -22,7 +22,8 @@ export default {
|
||||
...mapState(ConcernementsStore,['opened']),
|
||||
// ...mapState(ConcernementsStore,['opened_entity_id']),
|
||||
...mapState(ConcernementsStore,['concernements_loaded']),
|
||||
...mapState(ConcernementsStore,['ct_concernement'])
|
||||
...mapState(ConcernementsStore,['ct_concernement']),
|
||||
...mapState(ConcernementsStore,['ct_entite'])
|
||||
},
|
||||
created () {
|
||||
console.log(`Concernement view created, id: ${this.id}, eid: ${this.eid}, opened:${this.opened}`);
|
||||
@ -91,26 +92,43 @@ export default {
|
||||
|
||||
<template>
|
||||
<section v-if="opened" class="concernement">
|
||||
<div v-if="entite">{{ entite.title }}</div>
|
||||
<header v-if="concernements_loaded">
|
||||
<label v-if="ct_concernement">{{ ct_concernement.title.description }}</label>
|
||||
<label v-if="ct_concernement && !entite">{{ ct_concernement.title.description }}</label>
|
||||
<h3 v-if="entite">{{ entite.title }}</h3>
|
||||
<span v-if="entite && opened.entites_byid[eid].menacemaintien > 0">menace</span>
|
||||
<span v-if="entite && opened.entites_byid[eid].menacemaintien < 0">maintient</span>
|
||||
<h2>{{ opened.title }}</h2>
|
||||
</header>
|
||||
<section
|
||||
v-if="concernements_loaded && map_mode === 'terraindevie'"
|
||||
class="description">
|
||||
<label v-if="ct_concernement">{{ ct_concernement.field_description.description }}</label>
|
||||
<div v-html="opened.description"/>
|
||||
<!-- concernement -->
|
||||
<section
|
||||
v-if="map_mode === 'terraindevie' && !entite"
|
||||
class="content-concernement">
|
||||
<section class="description">
|
||||
<label v-if="ct_concernement">{{ ct_concernement.field_description.description }}</label>
|
||||
<div v-html="opened.description"/>
|
||||
</section>
|
||||
<section class="caillou">
|
||||
<label v-if="ct_concernement">{{ ct_concernement.field_caillou.description }}</label>
|
||||
<div v-html="opened.caillou "/>
|
||||
</section>
|
||||
</section>
|
||||
<section
|
||||
v-if="concernements_loaded && map_mode === 'terraindevie'"
|
||||
class="caillou">
|
||||
<label v-if="ct_concernement">{{ ct_concernement.field_caillou.description }}</label>
|
||||
<div v-html="opened.caillou "/>
|
||||
<!-- entite -->
|
||||
<section
|
||||
v-if="map_mode === 'terraindevie' && entite"
|
||||
class="content-entite">
|
||||
<section class="action">
|
||||
<label v-if="ct_entite">{{ ct_entite.field_action.description }}</label>
|
||||
<div v-html="entite.action"/>
|
||||
</section>
|
||||
<section class="menace-maintien">
|
||||
<label v-if="ct_entite">{{ ct_entite.field_menace_maintien.description }}</label>
|
||||
<div v-html="entite.menacemaintien"/>
|
||||
</section>
|
||||
</section>
|
||||
<!-- puissance d'agir -->
|
||||
<section
|
||||
v-if="map_mode === 'puissancedagir'"
|
||||
class="besoins">
|
||||
class="content-besoins">
|
||||
<ul>
|
||||
<li
|
||||
v-for="(besoin,index) in opened.besoins"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user