loading graphql project contents

src/store/modules/project.js

@@ -3,6 +3,7 @@
 
 // import qs from 'querystring'
 // import { REST } from 'api/rest-axios'
+import { GRAPHQL } from 'api/graphql-axios'
 
 import * as THREE from 'three'
 import { ThreeBSP } from 'three-js-csg-es6'
@@ -19,8 +20,10 @@ export default {
     wallsPos: null,
     top3dObj: null,
     topPos: null,
+    topColor: null,
     floor3dObj: null,
     floorPos: null,
+    florrColor: null,
     wall: {
       wallW: 0.001,
       // dig windows on face and back
@@ -34,6 +37,7 @@ export default {
       nbrWinZ: 0,
       paddingZ: 0
     },
+    contents: {},
     grid: []
   },
 
@@ -71,7 +75,9 @@ export default {
     setTop3dObj: (state, obj) => { state.top3dObj = obj },
     setTopPos: (state, pos) => { state.topPos = pos },
     setFloor3dObj: (state, obj) => { state.floor3dObj = obj },
-    setFloorPos: (state, pos) => { state.floorPos = pos }
+    setFloorPos: (state, pos) => { state.floorPos = pos },
+    setTopColor: (state, col) => { state.topColor = col },
+    setFloorColor: (state, col) => { state.floorColor = col }
   },
 
   // actions
@@ -114,7 +120,8 @@ export default {
       // console.log('x', x)
       commit('setPosition', {
         x: x,
-        y: -1 * state.size.y / 2 + 10 + Math.random() * 30, // -10 + Math.random() * this.size.y / 2
+        // y: -1 * state.size.y / 2 + 10 + Math.random() * 30, // -10 + Math.random() * this.size.y / 2
+        y: -state.size.y / 4,
         z: -10 + Math.random() * 10
       })
 
@@ -235,8 +242,10 @@ export default {
       let sFloor = Math.round(40 + Math.random() * 20)
       let lFloor = Math.round(5 + Math.random() * 15)
       let topColor = `hsla(${hTop}, ${sTop}%, ${lTop}%, 1)`
-      let bottomColor = `hsla(${hFloor}, ${sFloor}%, ${lFloor}%, 1)`
-      let gradientTexture = new THREE.CanvasTexture(getters.createGradientCanvas(topColor, bottomColor))
+      commit('setTopColor', topColor)
+      let floorColor = `hsla(${hFloor}, ${sFloor}%, ${lFloor}%, 1)`
+      commit('setFloorColor', floorColor)
+      let gradientTexture = new THREE.CanvasTexture(getters.createGradientCanvas(topColor, floorColor))
       let materialOpts = {
         color: 0xffffff,
         side: THREE.DoubleSide,
@@ -287,6 +296,65 @@ export default {
       // }
       // let levelMat = new THREE.MeshPhongMaterial(levelOpts)
       // levelMesh.material = levelMat
+    },
+    loadContents ({ dispatch, commit, state }) {
+      console.log('loadContents')
+      GRAPHQL.post('', { query: `query {
+          project(id: "${state.id}") {
+            visibles(where: { Published: "true" }){
+              id
+              Name
+              Media {
+                url
+                size
+              }
+              Text2
+              Vimeo
+              Url
+              categories
+            }
+            contexts(where: { Published: "true" }){
+              id
+              Name
+              Images {
+                url
+                size
+              }
+              Text2
+              Vimeo
+              Url
+            }
+            processes(where: { Published: "true" }){
+              id
+              Name
+              Media {
+                url
+                size
+              }
+              Text2
+              Vimeo
+              Url
+            }
+            concepts(where: { Published: "true" }){
+              id
+              Name
+              Images {
+                url
+                size
+              }
+              Text2
+              Vimeo
+            }
+          }
+        }` })
+        .then(({ data: { data: { project } = null } }) => {
+          console.log('graphql visibles', project)
+          // dispatch('computeProjects', projects)
+        })
+        .catch((error) => {
+          console.warn('Issue with getProjects', error)
+          Promise.reject(error)
+        })
     }
   }
 }