displaying fields labels
This commit is contained in:
parent
592f358cab
commit
a940012b6e
@ -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: {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user