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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -13,8 +13,8 @@ import ConcernementMapItem from '@components/ConcernementMapItem.vue'
export default { export default {
created () { created () {
this.loadConcernements()
this.loadContentTypeDefinition(); this.loadContentTypeDefinition();
this.loadConcernements()
}, },
mounted () { mounted () {
console.log('APP onMounted') console.log('APP onMounted')

36
src/components/ConcernementMapItem.vue
View File

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

36
src/components/MapConcernements.vue
View File

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

18
src/stores/concernements.js
View File

@ -20,7 +20,8 @@ export const ConcernementsStore = defineStore({
concernementsByID: {}, concernementsByID: {},
allEntitesById: {}, allEntitesById: {},
opened: false, opened: false,
ct_concernement: {} ct_concernement: {},
concernements_loaded: false
}), }),
getters: { getters: {
@ -52,6 +53,7 @@ export const ConcernementsStore = defineStore({
this.concernements.push(concernement); this.concernements.push(concernement);
this.concernementsByID[concernement.id] = concernement; this.concernementsByID[concernement.id] = concernement;
}); });
this.concernements_loaded = true;
}) })
.catch(error => { .catch(error => {
console.warn('Issue with loadConcernements', error) console.warn('Issue with loadConcernements', error)
@ -76,29 +78,29 @@ export const ConcernementsStore = defineStore({
} }
GQL.post('', body) GQL.post('', body)
.then(({ data: { data: { entitydef }}}) => { .then(({ data: { data: { entitydef }}}) => {
console.log('loadContentTypeDefinition entitydef', entitydef); // console.log('loadContentTypeDefinition entitydef', entitydef);
entitydef.fields.forEach(field => { entitydef.fields.forEach(field => {
this.ct_concernement[field.field_name] = 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; var state;
this.concernements.forEach((c, i) => { 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; this.concernements[i].opened = this.concernementsByID[c.id].opened = state;
if (state) { if (state) {
this.opened = c; this.opened = c;
this.router.push({name: 'concernement', params: {id: c.id}});
} }
}); });
}, },
resetConcernementOpened () { resetConcernementOpened () {
this.opened = null; this.opened = null;
}, this.openCloseConcernements();
openEntite (cid, id) {
this.router.push({name: 'concernement', params: {id: cid, eid: id}});
} }
} }
}) })

44
src/views/Concernement.vue
View File

@ -12,27 +12,47 @@ export default {
props: ['id', 'eid'], props: ['id', 'eid'],
data(){ data(){
return { return {
entite: null entite: null,
} }
}, },
computed: { computed: {
...mapState(ConcernementsStore,['opened']), ...mapState(ConcernementsStore,['opened']),
...mapState(ConcernementsStore,['concernements_loaded']),
...mapState(ConcernementsStore,['ct_concernement']) ...mapState(ConcernementsStore,['ct_concernement'])
}, },
created () { created () {
// console.log("Concernement view created, id", this.opened.id); console.log(`Concernement view created, id: ${this.id}, eid: ${this.eid}, opened:${this.opened}`);
// this.loadStatics()
// when we arrived directly to the entite, load the entite
if (!this.entity && this.eid) {
this.loadEntite();
}
}, },
watch: { 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: { eid: {
handler (n, o){ handler (n, o){
if(n){
this.loadEntite() this.loadEntite()
}else{
this.entite = false;
}
}, },
deep: true deep: true
}, },
}, },
methods: { methods: {
// ...mapActions(StaticsStore,['loadStatics']) ...mapActions(ConcernementsStore,['openCloseConcernements']),
loadEntite(){ loadEntite(){
const ast = gql`{ const ast = gql`{
entite (id: ${this.eid}) { entite (id: ${this.eid}) {
@ -59,18 +79,18 @@ export default {
</script> </script>
<template> <template>
<section class="concernement"> <section v-if="opened" class="concernement">
<div v-if="this.entite">{{ entite.title }}</div> <div v-if="entite">{{ entite.title }}</div>
<header> <header v-if="concernements_loaded">
<label>{{ this.ct_concernement.title.description }}</label> <label v-if="ct_concernement">{{ ct_concernement.title.description }}</label>
<h2>{{ opened.title }}</h2> <h2>{{ opened.title }}</h2>
</header> </header>
<section class="description"> <section v-if="concernements_loaded" class="description">
<label>{{ this.ct_concernement.field_description.description }}</label> <label v-if="ct_concernement">{{ ct_concernement.field_description.description }}</label>
<div v-html="opened.description"/> <div v-html="opened.description"/>
</section> </section>
<section class="caillou"> <section v-if="concernements_loaded" class="caillou">
<label>{{ this.ct_concernement.field_caillou.description }}</label> <label v-if="ct_concernement">{{ ct_concernement.field_caillou.description }}</label>
<div v-html="opened.caillou "/> <div v-html="opened.caillou "/>
</section> </section>
</section> </section>