fetch PointCloudInfo from Server

PoinCloudWeb.Web/package-lock.json

@@ -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",

PoinCloudWeb.Web/package.json

@@ -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",

PoinCloudWeb.Web/src/App.vue

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

PoinCloudWeb.Web/src/components/ScanItem.vue

@@ -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) {

PoinCloudWeb.Web/src/main.js

@@ -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')

PoinCloudWeb.Web/src/store/pointCloudInfo/store.js

@@ -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)
+                })
+        }
+    }
+}

PoinCloudWeb.Web/src/store/store.js

@@ -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
+    }
+})

PoinCloudWeb.Web/src/views/Map.vue

@@ -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>

PointCloudWeb.Server/PointCloudWeb.Server/Startup.cs

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