displaying fields labels

src/App.vue

@@ -14,6 +14,7 @@ import ConcernementMapItem from '@components/ConcernementMapItem.vue'
 export default {
   created () {
     this.loadConcernements()
+    this.loadContentTypeDefinition();
   },
   mounted () {
     console.log('APP onMounted')
@@ -26,6 +27,7 @@ export default {
   },
   methods: {
     ...mapActions(ConcernementsStore,['loadConcernements']),
+    ...mapActions(ConcernementsStore,['loadContentTypeDefinition']),
     ...mapActions(UserStore,['checkUser'])
   },
   components: {

src/assets/common.scss

@@ -3,8 +3,8 @@
 $pad_btn: 0.5em;
 @mixin btn() {
   padding: math.div($pad_btn,2) $pad_btn;
-  border-radius: 5px;
-  background-color: $btns_back;
+  // border-radius: 5px;
+  // background-color: $btns_back;
   cursor: pointer;
   line-height: 1.5;
 }

src/assets/main.scss

@@ -10,7 +10,8 @@
 body{
   background-color: $back;
   font-family: 'public_sans';
-  font-weight: 400;
+  font-weight: 300;
+  font-size: 16px;
 }
 
 #app{
@@ -77,7 +78,29 @@ body{
       box-sizing: border-box;
       width:450px;
       height: 100%;
-      padding: 1rem;
+      padding: 5rem 1rem 1rem;
+      overflow-y: auto;
+      overflow-x: hidden;
+      header, section{
+        padding:0 0 2em 0;
+      }
+      label{
+        display: block;
+        font-weight: 100;
+        font-size: 0.882em;
+        padding: 0 0 1em 0;
+      }
+      header{
+        h2{
+          font-weight: 400;
+          font-size: 1.512em;
+        }
+      }
+      section>div{
+        font-size: 1em;
+        font-weight: 300;
+      }
+
     }
   }
 

src/components/ConcernementMapItem.vue

@@ -104,8 +104,7 @@ export default {
       this.ctx = this.canvasMap.ctx
 
       // define init position of the item
-      this.pos.x = this.ray/2 + Math.random()*(this.canvas.width - this.ray)
-      this.pos.y = this.ray/2 + Math.random()*(this.canvas.height - this.ray)
+      this.pos = this.getRandomPos();
       
       // MATTER
       // create the matter body and add it to the engine
@@ -147,6 +146,12 @@ export default {
       Matter.Events.on(this.matterEngine, "beforeUpdate", this.onBeforeEngineUpdate)
       Matter.Events.on(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate);
     },
+    getRandomPos(){
+      return {
+        x: this.ray/2 + Math.random()*(this.canvas.width - this.ray),
+        y: this.ray/2 + Math.random()*(this.canvas.height - this.ray)
+      };
+    },
     parsePoints (){
       // converts data (menace/maintien, actuel/future, prise) into atcual position x,y
       for (let i = 0; i < this.entites.length; i++) {
@@ -187,7 +192,7 @@ export default {
     getSalientPoints () {
       // debugger
       // console.log(this.entites);
-      let arc = 360/12;
+      let arc = 360/10;
       // loop through arcs
       for (let i = 0; i <= 360/arc; i++) {
         // loop through entities to find the farest on the arc
@@ -197,8 +202,8 @@ export default {
           let entite = this.entites[j];
           if(arc*i <= entite.display.alpha && entite.display.alpha <= arc*i+arc) {
             // if entity is in arc
-            if (entite.display.ray > max_r) {
-              // if entity is farest from precedent one
+            if (entite.display.ray > max_r) { //  && entite.display.ray > this.ray/2 // and farest from minimu
+              // if entity is farest from precedent one 
               max_r = entite.display.ray;
               farest = entite;
             }
@@ -277,6 +282,14 @@ export default {
       }
     },
     onAfterEngineUpdate (event) {
+      // respawn element if outside screen
+      if(this.pos.x < 0
+        || this.pos.x > this.canvas.width
+        || this.pos.y < 0
+        || this.pos.y > this.canvas.height){
+          this.pos = this.getRandomPos()
+          Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y});
+        }
       this.draw()
     },
     draw() {

src/components/MapConcernements.vue

@@ -86,10 +86,13 @@ export default {
     let wall_w = 100;
     Matter.Composite.add(this.world, [
         // walls
-        Matter.Bodies.rectangle(canvas_w/2, -wall_w/2, canvas_w, wall_w, { isStatic: true }),                 // top
-        Matter.Bodies.rectangle(canvas_w/2, canvas_h+wall_w/2, canvas_w, wall_w, { isStatic: true }),   // bottom
-        Matter.Bodies.rectangle(-wall_w/2, canvas_h/2, wall_w, canvas_h, { isStatic: true }),                 // left
-        Matter.Bodies.rectangle(canvas_w+wall_w/2, canvas_h/2, wall_w, canvas_h, { isStatic: true })    // right
+        Matter.Bodies.rectangle(canvas_w/2,        -wall_w/2,         canvas_w, wall_w,   { isStatic: true }),   // top
+        Matter.Bodies.rectangle(canvas_w/2,        canvas_h+wall_w/2, canvas_w, wall_w,   { isStatic: true }),   // bottom
+        Matter.Bodies.rectangle(-wall_w/2,         canvas_h/2,        wall_w,   canvas_h, { isStatic: true }),   // left
+        Matter.Bodies.rectangle(canvas_w+wall_w/2, canvas_h/2,        wall_w,   canvas_h, { isStatic: true }),   // right
+        // make the items never goes under menus
+        Matter.Bodies.rectangle(550, canvas_h-15, 900, 30, { isStatic: true }),      // menu bottom
+        Matter.Bodies.rectangle(550,          15, 900, 30, { isStatic: true })       // menu top
     ]);
 
     // add mouse control

src/stores/concernements.js

@@ -1,4 +1,6 @@
 import { defineStore } from 'pinia'
+// import REST from '@api/rest-axios'
+// import JSONAPI from '@api/json-axios'
 import { print } from 'graphql/language/printer'
 import gql from 'graphql-tag'
 
@@ -9,13 +11,15 @@ import GQL from '@api/graphql-axios'
 // import JSONAPI from '@api/json-axios'
 
 import ConcernementFields from '@api/gql/concernement.fragment.gql'
+// import EntityFields from '@api/gql/entitydef.fragment.gql'
 
 export const ConcernementsStore = defineStore({
   id: 'concernements',
   state: () => ({
     concernements: [],
     concernementsByID: {},
-    opened: false
+    opened: false,
+    ct_concernement: {}
   }),
   getters: {
     
@@ -46,6 +50,30 @@ export const ConcernementsStore = defineStore({
           })
       })
     },
+    loadContentTypeDefinition () {
+      const body = {
+        query: `
+          query EntityDef($type: String!, $bundle: String!){
+            entitydef(type: $type, bundle: $bundle) {
+              fields {
+                type
+                field_name
+                label
+                description
+              }
+            }
+          }`,
+        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;
+          });
+        })
+
+    },
     openCloseConcernement (id, state) {
       // console.log('openCloseConcernement', id, state);
       this.concernementsByID[id].opened = state;

src/views/Concernement.vue

@@ -12,7 +12,8 @@ export default {
   //   }
   // },
   computed: {
-    ...mapState(ConcernementsStore,['opened'])
+    ...mapState(ConcernementsStore,['opened']),
+    ...mapState(ConcernementsStore,['ct_concernement'])
   },
   created () {
     // console.log("Concernement view created, id", this.opened.id);
@@ -29,9 +30,18 @@ export default {
 
 <template>
   <section class="concernement">
-    <h2>{{ opened.title }}</h2>
-    <div v-html="opened.description"/>
-    <div v-html="opened.caillou "/>
+    <header>
+      <label>{{ this.ct_concernement.title.description }}</label>
+      <h2>{{ opened.title }}</h2>
+    </header>
+    <section class="description">
+      <label>{{ this.ct_concernement.field_description.description }}</label>
+      <div v-html="opened.description"/>
+    </section>
+    <section class="caillou">
+      <label>{{ this.ct_concernement.field_caillou.description }}</label>
+      <div v-html="opened.caillou "/>
+    </section>
   </section>
 </template>