diff --git a/src/assets/cercle_politique-hover.png b/src/assets/cercle_politique-hover.png
new file mode 100644
index 0000000..a539870
Binary files /dev/null and b/src/assets/cercle_politique-hover.png differ
diff --git a/src/assets/cercle_politique-hover.svg b/src/assets/cercle_politique-hover.svg
new file mode 100644
index 0000000..28dc1f6
--- /dev/null
+++ b/src/assets/cercle_politique-hover.svg
@@ -0,0 +1,358 @@
+
+
+
+
diff --git a/src/assets/cercle_politique.png b/src/assets/cercle_politique.png
new file mode 100644
index 0000000..81d84a9
Binary files /dev/null and b/src/assets/cercle_politique.png differ
diff --git a/src/assets/cercle_politique.svg b/src/assets/cercle_politique.svg
new file mode 100644
index 0000000..88480d5
--- /dev/null
+++ b/src/assets/cercle_politique.svg
@@ -0,0 +1,355 @@
+
+
+
+
diff --git a/src/assets/main.scss b/src/assets/main.scss
index 4a8c50f..bdfc94b 100644
--- a/src/assets/main.scss
+++ b/src/assets/main.scss
@@ -653,15 +653,23 @@ body{
nav.doleance-switch{
div{
+ $height:60vh;
position: fixed;
- top: calc(100vh * 0.49);
+ top: calc((100vh - $height) * 0.51);
cursor: pointer;
-
+ width:150px;
+ height: $height;
+ background-image: url(../assets/cercle_politique.png);
+ background-size: cover;
+ &:hover{
+ background-image: url(../assets/cercle_politique-hover.png);
+ }
&.prev{
- left: 1rem;
+ left: 0rem;
+ background-position: right;
}
&.next{
- right:calc($cartouch_width + 2rem);
+ right:calc($cartouch_width + 0.5rem);
}
}
}
diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue
index c3fa5c5..fd296dd 100644
--- a/src/components/ConcernementMapItem.vue
+++ b/src/components/ConcernementMapItem.vue
@@ -52,7 +52,9 @@ export default {
constraint: null,
//
paper_main_object: {},
- paper_groups: {}
+ paper_groups: {},
+ //
+ doleance_transition: false
}
},
props: ['mapitem'],
@@ -209,6 +211,11 @@ export default {
console.log(`concernementMapItem watch concernement o.active_revision:${o.active_revision}, n.active_revision:${n.active_revision}`);
this.resetPaperActiveRevision();
}
+ // // check for doleance change
+ // if (this.is_open && o && o.opened_doleance && n.opened_doleance && this.map_mode === "doleancer") {
+ // // be aware that here o & n opened_doleance are already the same :( !?
+ // console.log(`concernementMapItem watch concernement o.opened_doleance:${o.opened_doleance.id}, n.opened_doleance:${n.opened_doleance.id}`);
+ // }
},
deep: true
}
@@ -1117,7 +1124,8 @@ export default {
let g = new paper.Group({
pivot: new paper.Point({x:0,y:0}),
name: `doleance_${doleance.id}`,
- doleance_id: doleance.id
+ doleance_id: doleance.id,
+ visible: false
});
// let doleance = this.concernement.doleances[0];
let all_fields = [
@@ -1194,6 +1202,12 @@ export default {
let o_d = Math.cos(22.5*(Math.PI/180)) * r/2; // x @ 22.5° for demi rayon
let p_d = Math.sin(22.5*(Math.PI/180)) * r/2; // y @ 22.5° for demi rayon
+ let step_Style = {
+ strokeColor: '#fff',
+ strokeWidth: 2,
+ fillColor: "rgba(255, 255, 255, 0.3)"
+ }
+
// let fontsize = 4;
//
@@ -1203,15 +1217,13 @@ export default {
//
// camenbert
if (doleance.lenquete) {
- let cam = new paper.Path({
- strokeColor: '#fff',
- strokeWidth: 2,
- fillColor: "rgba(255, 255, 255, 0.4)",
- item_type: 'doleance_step',
- item_id: `lenquete`,
- did: doleance.id,
- field: 'lenquete',
- field_index: null
+ let cam = new paper.Path({...step_Style, ...{
+ item_type: 'doleance_step',
+ item_id: `lenquete`,
+ did: doleance.id,
+ field: 'lenquete',
+ field_index: null
+ }
});
cam.add({x: this.pos.x , y: this.pos.y + dr});
cam.lineTo({x: this.pos.x, y: this.pos.y + r});
@@ -1239,16 +1251,14 @@ export default {
//
// camenbert
if(doleance.probleme_initial_resolu === 0 || doleance.probleme_initial_resolu === 1){
- let rescam = new paper.Path({
- strokeColor: '#fff',
- strokeWidth: 2,
- fillColor: "rgba(255, 255, 255, 0.4)",
- closed: true,
- item_type: 'doleance_step',
- item_id: `probleme_initial_resolu`,
- did: doleance.id,
- field: 'probleme_initial_resolu',
- field_index: null
+ let rescam = new paper.Path({...step_Style, ...{
+ closed: true,
+ item_type: 'doleance_step',
+ item_id: `probleme_initial_resolu`,
+ did: doleance.id,
+ field: 'probleme_initial_resolu',
+ field_index: null
+ }
});
rescam.add({x: this.pos.x + n, y: this.pos.y + n});
rescam.lineTo({x: this.pos.x + m , y: this.pos.y + m});
@@ -1303,15 +1313,13 @@ export default {
y4t= this.pos.y + Math.cos((mf.decalage- a*(i+0.5))*(Math.PI/180)) * dr;
let x5= this.pos.x + Math.sin((mf.decalage- a*(i+0.5))*(Math.PI/180)) * r*0.75,
y5= this.pos.y + Math.cos((mf.decalage- a*(i+0.5))*(Math.PI/180)) * r*0.75;
- let p = new paper.Path({
- strokeColor: '#fff',
- strokeWidth: 2,
- fillColor: "rgba(255, 255, 255, 0.4)",
- item_type: 'doleance_step',
- item_id: `${mf.field_name}-${i}`,
- did: doleance.id,
- field: mf.field_name,
- field_index: i
+ let p = new paper.Path({...step_Style, ...{
+ item_type: 'doleance_step',
+ item_id: `${mf.field_name}-${i}`,
+ did: doleance.id,
+ field: mf.field_name,
+ field_index: i
+ }
});
p.add([x1,y1]);
p.lineTo([x2,y2]);
@@ -1335,17 +1343,17 @@ export default {
// POINTS CARDINAUX
-
+ let cardinal_Style = {
+ strokeColor: '#fff',
+ strokeWidth: 2,
+ fillColor: "rgba(255, 255, 255, 0.9)"
+ }
// leprobleme
if (doleance.leprobleme) {
g.addChild(new paper.Path.Circle({
center: [this.pos.x, this.pos.y + r],
radius: 3 * this.scale,
- style: {
- strokeColor: '#fff',
- strokeWidth: 2,
- fillColor: "rgba(255, 255, 255, 0.9)",
- },
+ style: cardinal_Style,
item_type: 'doleance_step',
item_id: `leprobleme`,
did: doleance.id,
@@ -1359,11 +1367,7 @@ export default {
g.addChild(new paper.Path.Circle({
center: [this.pos.x - r, this.pos.y],
radius: 3 * this.scale,
- style: {
- strokeColor: '#fff',
- strokeWidth: 2,
- fillColor: "rgba(255, 255, 255, 0.9)",
- },
+ style: cardinal_Style,
item_type: 'doleance_step',
item_id: `adresse_de_la_doleance`,
did: doleance.id,
@@ -1377,11 +1381,7 @@ export default {
g.addChild(new paper.Path.Circle({
center: [this.pos.x, this.pos.y - r],
radius: 3 * this.scale,
- style: {
- strokeColor: '#fff',
- strokeWidth: 2,
- fillColor: "rgba(255, 255, 255, 0.9)",
- },
+ style: cardinal_Style,
item_type: 'doleance_step',
item_id: `decision`,
did: doleance.id,
@@ -1394,11 +1394,7 @@ export default {
g.addChild(new paper.Path.Circle({
center: [this.pos.x + r, this.pos.y],
radius: 3 * this.scale,
- style: {
- strokeColor: '#fff',
- strokeWidth: 2,
- fillColor: "rgba(255, 255, 255, 0.9)",
- },
+ style: cardinal_Style,
item_type: 'doleance_step',
item_id: `adresse_de_la_decision`,
did: doleance.id,
@@ -1576,12 +1572,27 @@ export default {
} else {
// this.paper_main_object.children.doleance_icon.visible = false;
// display the right (opened) doleance
+ let from = null
+ let to = this.concernement.opened_doleance.id;
+
this.concernement.doleances.forEach((d) => {
+ // this.paper_main_object.children.doleances.children[`doleance_${d.id}`].visible = d.id === this.concernement.opened_doleance.id;
+ if (this.paper_main_object.children.doleances.children[`doleance_${d.id}`].visible) {
+ from = d.id
+ }
+ })
+ // console.log(`opened_doleance from:${from}, to:${to}`);
+ if (from && from !== to) {
+ this.initDoleanceTransition(from, to);
+ } else if(!this.doleance_transition) {
+ this.concernement.doleances.forEach((d) => {
this.paper_main_object.children.doleances.children[`doleance_${d.id}`].visible = d.id === this.concernement.opened_doleance.id;
})
+ }
}
} else {
// this.paper_main_object.children.doleance_icon.visible = false;
+
}
}
@@ -1602,6 +1613,39 @@ export default {
}
+ },
+ initDoleanceTransition(from, to){
+ if (!this.doleance_transition) {
+ this.doleance_transition = true
+ let u = 0;
+ // console.log(`initDoleanceTransition from:${from}, to:${to}`);
+ let from_pg = this.paper_main_object.children.doleances.children[`doleance_${from}`]
+ from_pg.visible = true;
+ from_pg.opacity = 1;
+ let to_pg = this.paper_main_object.children.doleances.children[`doleance_${to}`]
+ to_pg.visible = true;
+ to_pg.opacity = 0;
+
+ let doDoleanceTransition = function(){
+ // console.log(`doDoleanceTransition u:${u} from:${from_pg}, to:${to_pg}`);
+ u++
+ if (u <= 20) {
+ if (u<=10) {
+ from_pg.opacity = 1-u/10
+ }else{
+ to_pg.opacity = (u-10)/10
+ }
+ window.requestAnimationFrame(doDoleanceTransition);
+ }else{
+ from_pg.visible = false;
+ from_pg.opacity = 1;
+ to_pg.opacity = 1;
+ this.doleance_transition = false
+ }
+ }.bind(this)
+
+ doDoleanceTransition()
+ }
},
onIsHover(){
// handle layer z-index
@@ -2147,6 +2191,10 @@ export default {
: this.pos.x > pseudo_center_x // else
? 1 // to the right
: -1; // to the left
+
+ if (this.map_mode === 'doleancer') {
+ dir = 1;
+ }
// max and min item position
let minp = 0;
let maxp = dir < 0
diff --git a/src/components/MapConcernements.vue b/src/components/MapConcernements.vue
index ad22595..bfb15f5 100644
--- a/src/components/MapConcernements.vue
+++ b/src/components/MapConcernements.vue
@@ -556,7 +556,7 @@ export default {
let style = {strokeColor: '#fff', strokeWidth: 0.25}
let felchesstyle = {strokeColor: '#fff', strokeWidth: 0.5}
let legende_style = {strokeColor: '#000', strokeWidth: 0.25}
- let fontsize = 4;
+ let fontsize = 3;
let fontFamily = "public_sans";
let children = [
diff --git a/src/components/contents/Doleancer.vue b/src/components/contents/Doleancer.vue
index c8eac7b..44cdb95 100644
--- a/src/components/contents/Doleancer.vue
+++ b/src/components/contents/Doleancer.vue
@@ -80,9 +80,10 @@ export default {
-
-
+ class="content-doleances">
+
+
+ {{ doleance.title }}
{{ doleance.date_leprobleme.start }}
@@ -272,7 +273,7 @@ export default {
name="non_adresse_doleance"
v-html="doleance.non_adresse_doleance" />
-
+
@@ -295,25 +296,25 @@ export default {
v-if="doleance_index > 0"
@click="prevDoleance"
class="prev">
-