managed routing home->concernement->entite->concernement->home AND direct url loading
This commit is contained in:
parent
b551daa561
commit
45e8f31bd8
@ -13,8 +13,8 @@ import ConcernementMapItem from '@components/ConcernementMapItem.vue'
|
||||
|
||||
export default {
|
||||
created () {
|
||||
this.loadConcernements()
|
||||
this.loadContentTypeDefinition();
|
||||
this.loadConcernements()
|
||||
},
|
||||
mounted () {
|
||||
console.log('APP onMounted')
|
||||
|
||||
@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
@ -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'});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -20,7 +20,8 @@ export const ConcernementsStore = defineStore({
|
||||
concernementsByID: {},
|
||||
allEntitesById: {},
|
||||
opened: false,
|
||||
ct_concernement: {}
|
||||
ct_concernement: {},
|
||||
concernements_loaded: false
|
||||
}),
|
||||
getters: {
|
||||
|
||||
@ -52,6 +53,7 @@ export const ConcernementsStore = defineStore({
|
||||
this.concernements.push(concernement);
|
||||
this.concernementsByID[concernement.id] = concernement;
|
||||
});
|
||||
this.concernements_loaded = true;
|
||||
})
|
||||
.catch(error => {
|
||||
console.warn('Issue with loadConcernements', error)
|
||||
@ -76,29 +78,29 @@ export const ConcernementsStore = defineStore({
|
||||
}
|
||||
GQL.post('', body)
|
||||
.then(({ data: { data: { entitydef }}}) => {
|
||||
console.log('loadContentTypeDefinition entitydef', entitydef);
|
||||
// console.log('loadContentTypeDefinition entitydef', entitydef);
|
||||
entitydef.fields.forEach(field => {
|
||||
this.ct_concernement[field.field_name] = field;
|
||||
});
|
||||
console.log('loadContentTypeDefinition entitydef', this.ct_concernement);
|
||||
|
||||
})
|
||||
|
||||
},
|
||||
openCloseConcernements (ids) {
|
||||
openCloseConcernements (id) {
|
||||
console.log(`openCloseConcernements id: ${id}`);
|
||||
var state;
|
||||
this.concernements.forEach((c, i) => {
|
||||
state = ids.indexOf(c.id) !== -1;
|
||||
state = id == c.id;
|
||||
this.concernements[i].opened = this.concernementsByID[c.id].opened = state;
|
||||
if (state) {
|
||||
this.opened = c;
|
||||
this.router.push({name: 'concernement', params: {id: c.id}});
|
||||
}
|
||||
});
|
||||
},
|
||||
resetConcernementOpened () {
|
||||
this.opened = null;
|
||||
},
|
||||
openEntite (cid, id) {
|
||||
this.router.push({name: 'concernement', params: {id: cid, eid: id}});
|
||||
this.openCloseConcernements();
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -12,27 +12,47 @@ export default {
|
||||
props: ['id', 'eid'],
|
||||
data(){
|
||||
return {
|
||||
entite: null
|
||||
entite: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(ConcernementsStore,['opened']),
|
||||
...mapState(ConcernementsStore,['concernements_loaded']),
|
||||
...mapState(ConcernementsStore,['ct_concernement'])
|
||||
},
|
||||
created () {
|
||||
// console.log("Concernement view created, id", this.opened.id);
|
||||
// this.loadStatics()
|
||||
console.log(`Concernement view created, id: ${this.id}, eid: ${this.eid}, opened:${this.opened}`);
|
||||
|
||||
// when we arrived directly to the entite, load the entite
|
||||
if (!this.entity && this.eid) {
|
||||
this.loadEntite();
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
concernements_loaded: {
|
||||
handler (n, o){
|
||||
console.log(`watch concernements_loaded n: ${n}, opened:${this.opened}, id:${this.id}`);
|
||||
// when we arrived directly to the url then all concernement are loaded: do open the concernement
|
||||
if (!this.opened) {
|
||||
this.openCloseConcernements(this.id)
|
||||
}
|
||||
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
eid: {
|
||||
handler (n, o){
|
||||
this.loadEntite()
|
||||
if(n){
|
||||
this.loadEntite()
|
||||
}else{
|
||||
this.entite = false;
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// ...mapActions(StaticsStore,['loadStatics'])
|
||||
...mapActions(ConcernementsStore,['openCloseConcernements']),
|
||||
loadEntite(){
|
||||
const ast = gql`{
|
||||
entite (id: ${this.eid}) {
|
||||
@ -59,18 +79,18 @@ export default {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="concernement">
|
||||
<div v-if="this.entite">{{ entite.title }}</div>
|
||||
<header>
|
||||
<label>{{ this.ct_concernement.title.description }}</label>
|
||||
<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>
|
||||
<h2>{{ opened.title }}</h2>
|
||||
</header>
|
||||
<section class="description">
|
||||
<label>{{ this.ct_concernement.field_description.description }}</label>
|
||||
<section v-if="concernements_loaded" class="description">
|
||||
<label v-if="ct_concernement">{{ ct_concernement.field_description.description }}</label>
|
||||
<div v-html="opened.description"/>
|
||||
</section>
|
||||
<section class="caillou">
|
||||
<label>{{ this.ct_concernement.field_caillou.description }}</label>
|
||||
<section v-if="concernements_loaded" class="caillou">
|
||||
<label v-if="ct_concernement">{{ ct_concernement.field_caillou.description }}</label>
|
||||
<div v-html="opened.caillou "/>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user