x/PointCloudWeb
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rename folders from PoinCloudWeb to PointCloudWeb

Browse Source
This commit is contained in:
Tim Wundenberg
2021-07-31 22:34:01 +02:00
parent 3b754d22f0
commit 768bc6f5cb
26 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
PointCloudWeb.Web/.gitignore vendored Normal file
View File

@@ -0,0 +1,23 @@
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

24
PointCloudWeb.Web/README.md Normal file
View File

@@ -0,0 +1,24 @@
# pointcloudweb.web
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

5
PointCloudWeb.Web/babel.config.js Normal file
View File

@@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

12300
PointCloudWeb.Web/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

49
PointCloudWeb.Web/package.json Normal file
View File

@@ -0,0 +1,49 @@
{
"name": "pointcloudweb.web",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@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",
"vuex": "^4.0.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "^4.5.13",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

BIN
PointCloudWeb.Web/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

23
PointCloudWeb.Web/public/index.html Normal file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
</head>
<body style="margin: 0px">
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

24
PointCloudWeb.Web/src/App.vue Normal file
View File

@@ -0,0 +1,24 @@
<template>
<div id="nav">
<Navbar />
<router-view />
</div>
</template>
<script>
import Navbar from "@/components/Navbar.vue";
export default {
components: { Navbar },
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>

BIN
PointCloudWeb.Web/src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

114
PointCloudWeb.Web/src/components/HelloWorld.vue Normal file
View File

@@ -0,0 +1,114 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br />
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
>vue-cli documentation</a
>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
target="_blank"
rel="noopener"
>babel</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
target="_blank"
rel="noopener"
>eslint</a
>
</li>
</ul>
<h3>Essential Links</h3>
<ul>
<li>
<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
</li>
<li>
<a href="https://forum.vuejs.org" target="_blank" rel="noopener"
>Forum</a
>
</li>
<li>
<a href="https://chat.vuejs.org" target="_blank" rel="noopener"
>Community Chat</a
>
</li>
<li>
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
>Twitter</a
>
</li>
<li>
<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
</li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li>
<a href="https://router.vuejs.org" target="_blank" rel="noopener"
>vue-router</a
>
</li>
<li>
<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
</li>
<li>
<a
href="https://github.com/vuejs/vue-devtools#vue-devtools"
target="_blank"
rel="noopener"
>vue-devtools</a
>
</li>
<li>
<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
>vue-loader</a
>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
rel="noopener"
>awesome-vue</a
>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

57
PointCloudWeb.Web/src/components/Navbar.vue Normal file
View File

@@ -0,0 +1,57 @@
<template>
<div class="navbar">
<router-link class="navbar-caption" :to="'/'">PointCloudWeb</router-link>
<div class="small-container">
<router-link class="navbar-button" :to="'/About'">About</router-link>
<router-link class="navbar-button" :to="'/scanner'">Scanner</router-link>
<router-link class="navbar-button" :to="'/map'">Map</router-link>
</div>
</div>
</template>
<script>
export default {
name: "NavBar",
};
</script>
<style scoped>
.navbar {
padding: 10px;
height: 2em;
border-bottom: 1px solid rgb(161, 161, 161);
color: rgb(145, 145, 145);
display: flex;
flex-direction: row-reverse;
vertical-align: middle;
}
.navbar-caption {
order: 99;
margin-right: auto;
font-size: 2em;
display: table;
vertical-align: middle;
}
.small-container {
display: table;
height: 2em;
}
.navbar-button {
display: table-cell;
width: 100px;
font-size: 1em;
vertical-align: middle;
}
a {
font-weight: bold;
color: #2c3e50;
text-decoration: none;
}
a.router-link-exact-active {
color: #42b983;
}
</style>

128
PointCloudWeb.Web/src/components/ScanItem.vue Normal file
View File

@@ -0,0 +1,128 @@
<template>
<div>
<font-awesome-icon class="icon" :icon="iconName" @click="onClickVisible" />
<p @click="onClickEdit()">{{ item.name }}</p>
<div id="settings" ref="settings" class="collapsed">
<div id="settings-container" ref="settings-container">
<div>
<input
ref="focusElement"
type="text"
v-model="editPcName"
@keyup.enter="onEnter()"
/>
<button @click="onClickSave()">
<font-awesome-icon class="icon" icon="edit"></font-awesome-icon>
<p>Save</p>
</button>
<button @click="onClickEdit()">
<font-awesome-icon class="icon" icon="times"></font-awesome-icon>
<p>Cancel</p>
</button>
<button @click="onClickDelete()">
<font-awesome-icon class="icon" icon="trash"></font-awesome-icon>
<p>Delete</p>
</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "ScanItem",
props: ["item"],
data() {
return {
isVisible: true,
isCollapsed: true,
editPcName: "",
};
},
methods: {
onClickVisible() {
this.isVisible = !this.isVisible;
},
onEnter() {
this.onClickSave();
},
onClickEdit() {
this.isCollapsed = !this.isCollapsed;
if (this.isCollapsed) {
this.$refs.settings.style.height = 0;
} else {
this.editPcName = this.item.name;
this.$refs.settings.style.height =
this.outerHeight(this.$refs["settings-container"]) + "px";
setTimeout(() => this.$refs.focusElement.focus(), 100);
}
},
onClickSave() {
this.$store.dispatch("pci/updatePointCloud", {
id: this.item.id,
name: this.editPcName,
});
this.onClickEdit();
},
onClickDelete() {
this.$store.dispatch("pci/deletePointCloud", {
id: this.item.id,
name: this.editPcName,
});
},
outerHeight(el) {
var width = el.offsetHeight;
const style = getComputedStyle(el);
width += parseInt(style.marginTop) + parseInt(style.marginTop);
return width;
},
},
computed: {
iconName() {
return this.isVisible ? "eye" : "eye-slash";
},
},
};
</script>
<style scoped>
.icon {
margin-right: 5px;
width: 25px;
cursor: pointer;
}
p {
display: inline-block;
margin: 0px;
margin-left: 5px;
font-size: 0.8em;
cursor: pointer;
user-select: none;
}
#settings {
-moz-transition: height 0.1s;
-ms-transition: height 0.1s;
-o-transition: height 0.1s;
-webkit-transition: height 0.1s;
transition: height 0.1s;
height: 0;
overflow: hidden;
}
#settings-container {
padding: 10px;
margin-left: 25px;
margin-top: 10px;
margin-bottom: 30px;
border-style: solid;
border-width: 1px;
border-color: grey;
}
</style>e

3
PointCloudWeb.Web/src/globals.js Normal file
View File

@@ -0,0 +1,3 @@
export default {
API_URL: 'http://localhost:35588/'
}

19
PointCloudWeb.Web/src/main.js Normal file
View File

@@ -0,0 +1,19 @@
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faEdit, faEye, faEyeSlash, faTrash, faTimes } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import store from "./store/store.js"
library.add(faEdit, faEye, faEyeSlash, faTrash, faTimes)
//Vue.config.productionTip = false
const app = createApp(App)
.use(router)
.use(store)
.component('font-awesome-icon', FontAwesomeIcon);
app.mount('#app')

37
PointCloudWeb.Web/src/router/index.js Normal file
View File

@@ -0,0 +1,37 @@
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue')
},
{
path: '/scanner',
name: 'Scanner',
component: () => import('../views/Scanner.vue')
},
{
path: '/map',
name: 'Map',
component: () => import('../views/Map.vue')
},
{
path: '/:pathMatch(.*)*',
name: 'Error',
component: () => import('../views/Error.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router

73
PointCloudWeb.Web/src/store/pointCloudInfo/store.js Normal file
View File

@@ -0,0 +1,73 @@
import axios from 'axios'
import globals from '@/globals.js'
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
},
UPDATE_PC(state, pointCloud) {
const index = state.pointClouds.findIndex(x => x.id === pointCloud.data.id);
if (index === -1)
return;
if (pointCloud.action === "update") {
state.pointClouds[index] = pointCloud.data;
}
else if (pointCloud.action === "remove") {
state.pointClouds.splice(index, 1);
}
},
},
actions: {
loadPointClouds({ commit }) {
commit('SET_LOADING', true)
axios
.get(globals.API_URL + 'pointcloudinfo')
.then(response => {
commit('SET_POINT_CLOUDS', response.data);
commit('SET_LOADING', false);
}).catch(() => {
commit('SET_LOADING', false);
})
},
updatePointCloud({ commit }, pointCloudInfo) {
commit('SET_LOADING', true);
axios
.put(globals.API_URL + 'pointcloudinfo', pointCloudInfo)
.then(response => {
setTimeout(() => {
commit('UPDATE_PC', { action: "update", data: response.data });
commit('SET_LOADING', false);
}, 80)();
}).catch(() => {
commit('SET_LOADING', false)
})
},
deletePointCloud({ commit }, pointCloudInfo) {
commit('SET_LOADING', true);
axios
.delete(globals.API_URL + 'pointcloudinfo/' + pointCloudInfo.id)
.then(() => {
commit('UPDATE_PC', { action: "remove", data: pointCloudInfo });
commit('SET_LOADING', false);
}).catch(e => {
alert(e);
commit('SET_LOADING', false);
})
}
}
}

13
PointCloudWeb.Web/src/store/store.js Normal file
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
}
})

18
PointCloudWeb.Web/src/views/About.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<div class="about">
<img alt="Vue logo" src="../assets/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js App" />
</div>
</template>
<script>
import HelloWorld from "@/components/HelloWorld.vue";
// @ is an alias to /src
export default {
name: "Home",
components: {
HelloWorld,
},
};
</script>

5
PointCloudWeb.Web/src/views/Error.vue Normal file
View File

@@ -0,0 +1,5 @@
<template>
<div>
<h1>404 Not found</h1>
</div>
</template>

15
PointCloudWeb.Web/src/views/Home.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<div class="home">
<h1>Welcome to PointCloudWeb</h1>
<p>With this tool the scanning and managing of Point Clouds is possible</p>
<p>Please select a feature in the Nav-Bar.</p>
</div>
</template>
<script>
// @ is an alias to /src
export default {
name: "Home",
};
</script>

115
PointCloudWeb.Web/src/views/Map.vue Normal file
View File

@@ -0,0 +1,115 @@
<template>
<div class="map-grid-container">
<div id="map-settings">
<div class="map-settings-internal">
<h3>Point Clouds</h3>
<ul v-for="item in cloudItems" :key="item">
<li><ScanItem :item="item" /></li>
</ul>
</div>
</div>
<div id="map" class="content-padding">
<h1>Place the Point Cloud visualization here</h1>
<ul v-for="item in items" :key="item">
<li>{{ item }}</li>
</ul>
</div>
</div>
</template>
<script>
import ScanItem from "@/components/ScanItem";
export default {
created() {
this.$store.dispatch("pci/loadPointClouds");
},
data() {
return {
items: [
1, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6,
7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6,
7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6,
7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6,
],
};
},
computed: {
cloudItems() {
return this.$store.state.pci.pointClouds;
},
},
components: { ScanItem },
};
</script>
<style scoped>
.map-grid-container {
text-align: left;
}
.content-padding {
padding: 10px;
}
ul {
padding-left: 0px;
}
li {
font-size: 1.4em;
list-style: none;
}
p {
display: inline-block;
margin: 0px;
margin-left: 10px;
}
h3 {
margin: 0px;
}
a {
text-decoration: none;
}
button {
display: inline-block;
border-top: 0px;
border-bottom: 0px;
border-left: 0px;
border-right: 0px;
background: none;
cursor: pointer;
color: grey;
font-size: inherit;
}
#map-settings {
grid-area: right;
border-left: 1px solid black;
height: 100%;
overflow-y: auto;
}
.map-settings-internal {
padding: 20px;
}
#map {
grid-area: main;
overflow-y: auto;
}
.map-grid-container {
display: grid;
grid-template-areas: "main right";
grid-template-columns: calc(100vw - 300px) 300px;
height: calc(
100vh - 2em - 20px - 1px
); /*viewport height - height of navbar-button - padding - borderline*/
grid-gap: 0px;
padding: 0px;
}
</style>

6
PointCloudWeb.Web/src/views/Scanner.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<div>
<h1>Welcome to PointCloudWeb</h1>
<h1>Scanner</h1>
</div>
</template>