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

managed routing home->concernement->entite->concernement->home AND direct url loading

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2023-04-19 16:17:09 +02:00
parent b551daa561
commit 45e8f31bd8
5 changed files with 96 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/ConcernementMapItem.vue
View File

@@ -32,8 +32,9 @@ export default {
inject: ['canvasMap', 'matterEngine'],
data() {
return {
id: null,
entities: null,
// concernement: null,
opened_entite_id: null,
canvas: null,
ctx: null,
pos : {
@@ -45,9 +46,7 @@ export default {
salientPoints: [],
scale: 1,
opacity: 0,
// anim: null,
tween: null,
// matter
body: null,
constraint: null
}
@@ -57,18 +56,30 @@ export default {
...mapState(ConcernementsStore,['concernementsByID'])
},
created () {
// console.log("ConcernementsMapItem concernement", this.canvasMap, this.matterEngine);
// console.log(`ConcernementsMapItem ${this.concernement.id} created`, this.canvasMap, this.matterEngine);
this.id = this.concernement.id
this.entites = this.concernement.entites
this.entites_byid = this.concernement.entites_byid
console.log(`ConcernementsMapItem ${this.concernement.id} $route`, this.id, this.$route);
if (this.$route.name === 'concernement'
&& parseInt(this.$route.params.id) === this.id
&& typeof this.$route.params.eid !== "undefined") {
console.log("we have an entity");
this.opened_entite_id = parseInt(this.$route.params.eid);
}
this.parsePoints()
this.getSalientPoints()
},
mounted() {
console.log('concernementItem mounted', typeof this.canvasMap.canvas);
if (this.canvasMap) {
this.initCanvasMap()
}
},
// mounted() {
// console.log(`ConcernementsMapItem ${this.concernement.id} mounted`, this.canvasMap.canvas);
// },
watch: {
// canvasMap (n, o) {
// console.log("concernementItem watch canvasMap", o, n);
@@ -84,6 +95,7 @@ export default {
},
opened: {
handler (n, o) {
if(n){ // opened
this.openClose(true);
}else{ // closed
@@ -95,7 +107,7 @@ export default {
},
methods: {
initCanvasMap (){
// console.log('initCanvasMap');
// console.log(`ConcernementsMapItem ${this.concernement.id} initCanvasMap`);
// record canvas and ctx for rendering (drawing)
this.canvas = this.canvasMap.canvas
this.ctx = this.canvasMap.ctx
@@ -258,6 +270,7 @@ export default {
// }
// },
openClose(open) {
// console.log(`ConcernementsMapItem ${this.concernement.id} openClose: ${open}`);
if (this.tween) {
this.tween.stop();
}
@@ -427,8 +440,13 @@ export default {
if (this.body.parts[i].item_type === 'entite') {
let part = this.body.parts[i];
this.ctx.beginPath();
this.ctx.arc(this.body.parts[i].position.x, this.body.parts[i].position.y, 0.3*this.scale, 0, 2 * Math.PI, false);
this.ctx.fillStyle = "#000";
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";
} else {
this.ctx.fillStyle = "#000";
}
this.ctx.fill();
}
}

46
src/components/MapConcernements.vue
View File

@@ -107,7 +107,6 @@ export default {
methods: {
...mapActions(ConcernementsStore,['openCloseConcernements']),
...mapActions(ConcernementsStore,['resetConcernementOpened']),
...mapActions(ConcernementsStore,['openEntite']),
animate () {
this.canvasMap.ctx.clearRect(0, 0, this.canvasMap.canvas.width, this.canvasMap.canvas.height)
// this.canvasMap.canvas.dispatchEvent(this.animateEvent)
@@ -179,33 +178,36 @@ export default {
// no concernement is yet opened, we deal concernements
if (!this.opened) {
let clickedIDs = [];
query.forEach(body => {
// console.log('body id:', body.id);
clickedIDs.push(body.id);
});
// open/close all concernements
this.openCloseConcernements(clickedIDs)
// if no concernement opened retrun to home (closing concernement contents opened)
// and reset the opened state in concernement store
if (!clickedIDs.length) {
this.resetConcernementOpened();
this.$router.push({name: 'home'});
if (query.length) {
// open/close all concernements
this.openCloseConcernements(query[0].id)
// push route
this.$router.push({name: 'concernement', params: {id: query[0].id}});
}
}
// concernement is already opened, we deal with entités
if (this.opened) {
let clickedBodies = [];
query.forEach(body => {
// console.log('body id:', body.id);
if (body.item_type === "entite") {
clickedBodies.push(body);
if (query.length) {
let clickedEntityBodies = [];
query.forEach(body => {
// console.log('body id:', body.id);
if (body.item_type === "entite") {
clickedEntityBodies.push(body);
}
});
if (clickedEntityBodies.length) {
// we have clicked on an entite
this.$router.push({name: 'concernement', params: {id: this.opened.id, eid: clickedEntityBodies[0].id}});
} else {
// otherwise we close the entite and come back to the concernement
this.$router.push({name: 'concernement', params: {id: this.opened.id}});
}
});
if (clickedBodies.length) {
this.openEntite(clickedBodies[0].cid, clickedBodies[0].id)
} else {
// if no concernement opened retrun to home (closing concernement contents opened)
// and reset the opened state in concernement store
this.resetConcernementOpened();
this.$router.push({name: 'home'});
}
}
}