bachir/muntadas-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

getting data from api, displaying projects as cubes

Browse Source
This commit is contained in:
bachir
2020-08-24 12:53:09 +02:00
parent 88a9a31768
commit 68529ed503
10 changed files with 233 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/app.scss
+1 -1
View File
@@ -8,7 +8,7 @@
body{
color: #1a1a1a;
color: #ff00ff;
}
#root{
src/App.vue
+61 -13
View File
@@ -11,16 +11,32 @@
</header> -->
<section role="main-content">
<div class="wrapper">
<renderer :size="size">
<scene>
<orbit-controls :position="{x:0,y:50,z:0}" :rotation="{ x: 2, y: 0, z: 3 }">
<renderer :obj="myRenderer" :size="size">
<scene :obj="myScene" @update:obj="handleScene">
<orbit-controls :position="{x:0,y:150,z:0}" :rotation="{ x: -90, y: 0, z: 0 }">
<camera />
</orbit-controls>
<!-- <camera :position="{x:0, y:300, z:0}" :rotation="{x:deg2rad(-90), y:0, z:0}"/> -->
<!-- <camera :position="{x:0,y:50,z:0}" :lookat="{x:0,y:0,z:0}" /> -->
<!-- <light :hex="0xff0000" :intensity="10" :position="{x:-100}" /> -->
<!-- <mesh :obj="mesh" :position="{ y: -200 }" /> -->
<!-- <animation :fn="animate" :speed="3" /> -->
<cube :size="10" :position="{x:0,y:0,z:0}" :color="0xFFFF00" />
<plan :size="{w:5000,h:5000}" :position="{x:0,y:0,z:0}" :color="0xffffff" :rotation="{x:90,y:0,z:0}" />
<template v-if="debug">
<cube :size="{x:30,y:1,z:1}" :position="{x:15,y:0,z:0}" :color="0x992222" />
<cube :size="{x:1,y:30,z:1}" :position="{x:0,y:15,z:0}" :color="0x00BBFF" />
<cube :size="{x:1,y:1,z:30}" :position="{x:0,y:0,z:15}" :color="0x17d100" />
</template>
<template v-if="projects.length">
<project
v-for="(project, index) in projects"
:key="project.id"
:data="project"
:len="projects.length"
:index="index"
/>
</template>
<line />
</scene>
</renderer>
</div>
@@ -30,8 +46,13 @@
</template>
<script>
// import { mapState } from 'vuex'
import { mapState, mapActions } from 'vuex'
import mixins from 'components/mixins'
import * as THREE from 'three'
import Plan from './components/objects/Plan'
import Cube from './components/objects/Cube'
import Project from './components/objects/Project'
export default {
metaInfo: {
@@ -41,22 +62,49 @@ export default {
titleTemplate: '%s | Muntadas'
},
components: {
Cube
// History,
// Results,
// Search,
// FooterTabs
Cube,
Project,
Plan
},
mixins: [mixins],
data () {
let renderer = new THREE.WebGLRenderer({ alpha: false, antialias: true })
renderer.setClearColor(0x000000, 0)
// scene obj is well overwrited but background color not visible
let scene = new THREE.Scene()
scene.background = new THREE.Color(0x000000)
scene.fog = new THREE.Fog(scene.background, 1, 5000)
console.log('myScene', scene)
return {
debug: true,
myRenderer: renderer,
myScene: scene
}
},
computed: {
...mapState({
projects: state => state.Projects.projects
}),
size () {
return {
w: window.innerWidth,
h: window.innerHeight
}
}
// ...mapState({
// resultsOpened: state => state.Search.opened
// })
},
created () {
if (!this.projects.length) {
this.getProjects()
}
},
methods: {
...mapActions({
getProjects: 'Projects/getProjects'
}),
handleScene (scene) {
console.log('handlescene', scene)
}
}
}
</script>
src/api/rest-axios.js
+27
View File
@@ -0,0 +1,27 @@
import axios from 'axios'
// TODO: make this one as settings (or find an other solution)
// https://dev.to/sanfra1407/how-to-use-env-file-in-javascript-applications-with-webpack-18df
// switch (app_env) {
// case 'dev':
// let path = `http://${window.location.hostname}:8984`
// break;
// case 'prod':
// let path = `http://${window.location.hostname}/api`
// break;
// }
// let path = 'http://dev.api.gdp.fr'
// let path = 'http://localhost:8984'
// const
// let path = 'http://' + window.location.hostname + (window.env === 'prod' ? '/api' : ':8984')
export const REST = axios.create({
baseURL: 'https://api.anarchive-muntadas.figli.io/',
// withCredentials: true,
crossorigin: true,
headers: {
'Accept': 'application/json'
// 'Access-Control-Allow-Origin': '*'
// 'Access-Control-Allow-Credentials':
}
})
src/components/mixins.js
+8
View File
@@ -0,0 +1,8 @@
// https://forum.vuejs.org/t/how-to-use-helper-functions-for-imported-modules-in-vuejs-vue-template/6266/5
export default {
methods: {
deg2rad: function (deg) {
return deg * (Math.PI / 180)
}
}
}
src/components/objects/Cube.vue
+13 -4
View File
@@ -1,15 +1,24 @@
<template>
<mesh name="Cube" :position="position">
<geometry type="Box" :args="[size, size, size]" />
<material type="MeshBasic" :color="color" />
<geometry type="Box" :args="[size.x, size.y, size.z]" />
<material type="MeshBasic" :color="color" :options="opts" />
</mesh>
</template>
<script>
// import { Object3D } from '@'
import * as THREE from 'three'
export default {
name: 'Cube',
// mixins: [Object3D],
props: { size: Number, texture: String, position: Object, color: Number }
props: { size: Object, texture: String, position: Object, color: Number },
data: () => ({
opts: {
side: THREE.DoubleSide,
wireframe: false,
transparent: false,
opacity: 0.6
}
})
}
</script>
src/components/objects/Plan.vue
+38
View File
@@ -0,0 +1,38 @@
<template>
<mesh name="Cube"
:position="position"
:rotation="{
x:deg2rad(rotation.x),
y:deg2rad(rotation.y),
z:deg2rad(rotation.z)
}"
>
<geometry type="PlaneBuffer" :args="[size.w, size.h]" />
<material type="MeshBasic" :color="color" :options="opts" />
</mesh>
</template>
<script>
import mixins from 'components/mixins'
import * as THREE from 'three'
export default {
name: 'Plan',
mixins: [mixins],
props: {
size: Object,
texture: String,
position: Object,
color: Number,
rotation: Object
},
data: () => ({
opts: {
side: THREE.DoubleSide,
wireframe: false,
transparent: true,
opacity: 0.1
}
})
}
</script>
src/components/objects/Project.vue
+34
View File
@@ -0,0 +1,34 @@
<template>
<mesh name="Cube" :position="position">
<geometry type="Box" :args="[size.x, size.y, size.z]" />
<material type="MeshBasic" :color="color" :options="opts" />
</mesh>
</template>
<script>
import * as THREE from 'three'
export default {
name: 'Project',
// mixins: [Object3D],
// props: { size: Object, texture: String, position: Object, color: Number },
props: { data: Object, len: Number, index: Number },
data: () => ({
opts: {
side: THREE.DoubleSide,
wireframe: false,
transparent: true,
opacity: 0.6
},
size: { x: 10, y: 10, z: 10 },
position: { x: 5, y: 5, z: 0 },
color: 0xffffff
}),
created () {
console.log('this.index', this.index)
this.size.y = 20 + Math.random() * 90
this.position.y = -10 + Math.random() * this.size.y / 2
this.position.x = -this.len / 2 * 15 + 15 * this.index
}
}
</script>
src/index.js
+3 -2
View File
@@ -1,6 +1,6 @@
import Vue from 'vue'
// import router from './router'
// import store from './store'
import store from './store'
// import { sync } from 'vuex-router-sync'
import Meta from 'vue-meta'
import * as VueThreejs from 'vue-threejs'
@@ -15,9 +15,10 @@ Vue.use(Meta)
Vue.use(VueThreejs)
// sync(store, router) // done. Returns an unsync callback fn
// sync(store)
new Vue({
// router,
// store,
store,
render: h => h(App)
}).$mount('#app')
src/store/index.js
+11
View File
@@ -0,0 +1,11 @@
import Vue from 'vue'
import Vuex from 'vuex'
import Projects from './modules/projects'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
Projects
}
})
src/store/modules/projects.js
+37
View File
@@ -0,0 +1,37 @@
import { REST } from 'api/rest-axios'
export default {
namespaced: true,
// initial state
state: {
projects: []
},
// getters
getters: {},
// mutations
mutations: {
setProjects (state, projects) {
state.projects = projects
}
},
// actions
actions: {
// async get authors
getProjects ({ dispatch, commit, state }) {
REST.get(`projects`, {})
.then(({ data }) => {
console.log('projects getProjects REST: data', data)
commit('setProjects', data)
})
.catch((error) => {
console.warn('Issue with getProjects', error)
Promise.reject(error)
})
}
}
}