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

add skeleton

Browse Source
This commit is contained in:
Tim Wundenberg
2021-07-28 20:19:05 +02:00
parent 21d61f60bf
commit e12bbaaf9f
11 changed files with 288 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
PoinCloudWeb.Web/public/index.html
View File

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

24
PoinCloudWeb.Web/src/App.vue
View File

@@ -1,11 +1,18 @@
<template> <template>
<div id="nav"> <div id="nav">
<router-link to="/">Home</router-link> | <Navbar />
<router-link to="/about">About</router-link>
<router-view /> <router-view />
</div> </div>
</template> </template>
<script>
import Navbar from "@/components/Navbar.vue";
export default {
setup() {},
components: { Navbar },
};
</script>
<style> <style>
#app { #app {
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -14,17 +21,4 @@
text-align: center; text-align: center;
color: #2c3e50; color: #2c3e50;
} }
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style> </style>

68
PoinCloudWeb.Web/src/components/Navbar.vue Normal file
View File

@@ -0,0 +1,68 @@
<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",
// methods: {
// onClickMain: function () {
// this.$router.push("/");
// },
// onClickScanner: function () {
// this.$router.push("/scanner");
// },
// onClickMap: function () {
// this.$router.push("/map");
// },
// },
};
</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>

26
PoinCloudWeb.Web/src/components/ScanItem.vue Normal file
View File

@@ -0,0 +1,26 @@
<template>
<div>
<button>Test</button>
<md-icon>thumb_up</md-icon>
<!-- button(id="Visible" + scan.id, onclick="buttonVisibleClicked("+scan.id+")"
type="button", class="fa fa-eye") button(id="Edit" + scan.id, type="button",
class="fa fa-edit") p(id="Label" + scan.id)= scan.name -->
</div>
</template>
<script>
export default {
name: "ScanItem",
// methods: {
// onClickMain: function () {
// this.$router.push("/");
// },
// onClickScanner: function () {
// this.$router.push("/scanner");
// },
// onClickMap: function () {
// this.$router.push("/map");
// },
// },
};
</script>

4
PoinCloudWeb.Web/src/main.js
View File

@@ -2,4 +2,6 @@ import { createApp } from 'vue'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
createApp(App).use(router).mount('#app') createApp(App)
.use(router)
.mount('#app')

20
PoinCloudWeb.Web/src/router/index.js
View File

@@ -10,10 +10,22 @@ const routes = [
{ {
path: '/about', path: '/about',
name: 'About', name: 'About',
// route level code-splitting component: () => import('../views/About.vue')
// this generates a separate chunk (about.[hash].js) for this route },
// which is lazy-loaded when the route is visited. {
component: () => import(/* webpackChunkName: "about" */ '../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')
} }
] ]

15
PoinCloudWeb.Web/src/views/About.vue
View File

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

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

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

13
PoinCloudWeb.Web/src/views/Home.vue
View File

@@ -1,18 +1,15 @@
<template> <template>
<div class="home"> <div class="home">
<img alt="Vue logo" src="../assets/logo.png"> <h1>Welcome to PointCloudWeb</h1>
<HelloWorld msg="Welcome to Your Vue.js App"/> <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> </div>
</template> </template>
<script> <script>
// @ is an alias to /src // @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default { export default {
name: 'Home', name: "Home",
components: { };
HelloWorld
}
}
</script> </script>

114
PoinCloudWeb.Web/src/views/Map.vue Normal file
View File

@@ -0,0 +1,114 @@
<template>
<div class="map-grid-container">
<div id="map-settings">
<div class="map-settings-internal">
<h3>Scans</h3>
<ul>
<!-- each scan in [{id:123, name: "Test"}, {id:558, name: "Test 55"}]
li
+scan(scan) -->
</ul>
<ul v-for="item in items" :key="item">
<li>
<p>{{ item }}</p>
<ScanItem />
</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 {
data: function () {
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,
],
};
},
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
PoinCloudWeb.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>