fetch PointCloudInfo from Server

This commit is contained in:
Tim Wundenberg
2021-07-30 22:31:29 +02:00
parent 8bef0824ce
commit 828c039911
9 changed files with 98 additions and 14 deletions

View File

@@ -2510,6 +2510,14 @@
"integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=",
"dev": true
},
"axios": {
"version": "0.21.1",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
"integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
"requires": {
"follow-redirects": "^1.10.0"
}
},
"babel-eslint": {
"version": "10.1.0",
"resolved": "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz",
@@ -5568,8 +5576,7 @@
"follow-redirects": {
"version": "1.14.1",
"resolved": "https://registry.nlark.com/follow-redirects/download/follow-redirects-1.14.1.tgz",
"integrity": "sha1-2RFN7Qoc/dM04WTmZirQK/2R/0M=",
"dev": true
"integrity": "sha1-2RFN7Qoc/dM04WTmZirQK/2R/0M="
},
"for-in": {
"version": "1.0.2",
@@ -11393,6 +11400,14 @@
"integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
"dev": true
},
"vuex": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
"integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
"requires": {
"@vue/devtools-api": "^6.0.0-beta.11"
}
},
"watchpack": {
"version": "1.7.5",
"resolved": "https://registry.nlark.com/watchpack/download/watchpack-1.7.5.tgz?cache=0&sync_timestamp=1621437900992&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fwatchpack%2Fdownload%2Fwatchpack-1.7.5.tgz",

View File

@@ -11,9 +11,11 @@
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/vue-fontawesome": "^3.0.0-4",
"axios": "^0.21.1",
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0"
"vue-router": "^4.0.0-0",
"vuex": "^4.0.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",

View File

@@ -7,8 +7,8 @@
<script>
import Navbar from "@/components/Navbar.vue";
export default {
setup() {},
components: { Navbar },
};
</script>

View File

@@ -1,12 +1,20 @@
<template>
<div>
<font-awesome-icon class="icon" :icon="iconName" @click="onClickVisible" />
<font-awesome-icon class="icon" icon="edit" @click="onClickEdit" />
<p @click="onClickEdit()">Scan Name</p>
<div id="settings" class="collapsed">
<div id="settings-container">
<p @click="onClickEdit()">{{ item.name }}</p>
<div id="settings" ref="settings" class="collapsed">
<div id="settings-container" ref="settings-container">
<div>
<input type="text" value="Scan Name" />
<button>
<font-awesome-icon class="icon" icon="edit"></font-awesome-icon>
<p>Save</p>
</button>
<button @click="onClickEdit()">
<font-awesome-icon class="icon" icon="edit"></font-awesome-icon>
<p>Cancel</p>
</button>
</div>
</div>
</div>
@@ -16,6 +24,7 @@
<script>
export default {
name: "ScanItem",
props: ["item"],
data() {
return {
isVisible: true,
@@ -29,12 +38,11 @@ export default {
onClickEdit() {
this.isCollapsed = !this.isCollapsed;
const settings = document.getElementById("settings");
if (this.isCollapsed) {
settings.style.height = 0;
this.$refs.settings.style.height = 0;
} else {
const container = document.getElementById("settings-container");
settings.style.height = this.outerHeight(container) + "px";
this.$refs.settings.style.height =
this.outerHeight(this.$refs["settings-container"]) + "px";
}
},
outerHeight(el) {

View File

@@ -4,6 +4,7 @@ import router from './router'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faEdit, faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import store from "./store/store.js"
library.add(faEdit, faEye, faEyeSlash)
@@ -12,6 +13,7 @@ library.add(faEdit, faEye, faEyeSlash)
const app = createApp(App)
.use(router)
.use(store)
.component('font-awesome-icon', FontAwesomeIcon);
app.mount('#app')

View File

@@ -0,0 +1,33 @@
import axios from 'axios'
export default {
namespaced: true,
strict: true,
state: {
pointClouds: [],
loading: false
},
// getters: {
// pointClouds: state => state.pointClouds,
// loading: state => state.loading
// },
mutations: {
SET_POINT_CLOUDS(state, pointClouds) {
state.pointClouds = pointClouds
},
SET_LOADING(state, loading) {
state.loading = loading
}
},
actions: {
loadPointClouds({ commit }) {
commit('SET_LOADING', true)
axios
.get('http://localhost:5000/pointcloudinfo')
.then(response => {
commit('SET_POINT_CLOUDS', response.data)
commit('SET_LOADING', false)
})
}
}
}

View File

@@ -0,0 +1,13 @@
import { createStore } from 'vuex'
import modulePCI from './pointCloudInfo/store.js'
export default createStore({
namespaced: true,
strict: true,
state: {
dummy: "dummy"
},
modules: {
pci: modulePCI
}
})

View File

@@ -8,8 +8,8 @@
li
+scan(scan) -->
</ul>
<ul v-for="item in items" :key="item">
<li><ScanItem /></li>
<ul v-for="item in cloudItems" :key="item">
<li><ScanItem :item="item" /></li>
</ul>
</div>
</div>
@@ -25,6 +25,9 @@
import ScanItem from "@/components/ScanItem";
export default {
created() {
this.$store.dispatch("pci/loadPointClouds");
},
data() {
return {
items: [
@@ -35,6 +38,11 @@ export default {
],
};
},
computed: {
cloudItems() {
return this.$store.state.pci.pointClouds;
},
},
components: { ScanItem },
};
</script>

View File

@@ -32,6 +32,9 @@ namespace PointCloudWeb.Server
}
app.UseRouting();
app.UseCors(options => {
options.AllowAnyOrigin();
});
//app.UseAuthorization();