Added routing and templates folder

This commit is contained in:
Sagi Frimer
2019-03-10 01:12:53 +02:00
parent 4e0dad8955
commit e84c9c5053
10 changed files with 2715 additions and 47 deletions

View File

@@ -14,8 +14,9 @@ class ChameleonApplication(tornado.web.Application):
handlers = [(r"/", MainHandler),
(r"/(.*)", tornado.web.StaticFileHandler, {'path': os.path.join(os.path.dirname(__file__), "../../Site")}),
(r"/websocket", ChameleonWebSocket),
(r"/CSS/(.*)", tornado.web.StaticFileHandler, {'path': os.path.join(os.path.dirname(__file__), "../../Site/CSS")}),
(r"/JS/(.*)", tornado.web.StaticFileHandler, {'path': os.path.join(os.path.dirname(__file__), "../../Site/JS")}),
(r"/css/(.*)", tornado.web.StaticFileHandler, {'path': os.path.join(os.path.dirname(__file__), "../../Site/css")}),
(r"/js/(.*)", tornado.web.StaticFileHandler, {'path': os.path.join(os.path.dirname(__file__), "../../Site/js")}),
(r"/templates/(.*)", tornado.web.StaticFileHandler, {'path': os.path.join(os.path.dirname(__file__), "../../Site/templates")}),
(r"/assets/(.*)", tornado.web.StaticFileHandler, {'path': os.path.join(os.path.dirname(__file__), "../../Site/assets")})]
settings = dict(

View File

@@ -8,18 +8,18 @@ body {
padding: 5px;
}
.nav > a {
font-size: 1.8em;
margin-left: 15px
.nav a {
font-size: 1.5em;
margin-left: 5px;
}
.nav > a, .sidenav > a {
.nav a, .sidenav a {
color: whitesmoke;
font-family:Verdana;
font-weight: 500;
}
.nav > a:hover, .sidenav > a:hover {
.nav a:hover, .sidenav a:hover {
color: #17a2b8;
}
@@ -43,16 +43,6 @@ body {
margin-top: 20px;
}
.main {
#main {
margin-left: 60px;
}
.main > div {
margin: 50px;
width: 30%;
}
#logo {
width: 100%;
height: 80px;
}

View File

@@ -4,28 +4,24 @@
<meta charset="utf-8">
<title>Chameleon Vision</title>
<link rel="stylesheet" type="text/css" href="assets/icons/css/all.css">
<link rel="stylesheet" type="text/css" href="CSS/iview.css" >
<link rel="stylesheet" type="text/css" href="CSS/main.css" >
<link rel="stylesheet" type="text/css" href="css/iview.css" >
<link rel="stylesheet" type="text/css" href="css/main.css" >
</head>
<body>
<div class="sidenav">
<i class="fas fa-video fa-2x"></i>
<i class="fas fa-cog fa-2x"></i>
</div>
<div class="main">
<nav class="nav">
<a class="nav-link active" href="#">Input</a>
<a class="nav-link" href="#">Filter</a>
<a class="nav-link" href="#">Thresholds</a>
<a class="nav-link" href="#">3D</a>
</nav>
<div id="input-tab">
<Slider v-for="slider in sliders" v-model="slider.value"></Slider>
<div id="app">
<div class="sidenav">
<router-link to="/vision"><a><i class="fas fa-video fa-2x"></i></a></router-link>
<router-link to="/settings"><a><i class="fas fa-cog fa-2x"></i></a></router-link>
</div>
<div id="main">
<router-view></router-view>
</div>
</div>
<script src="JS/vue.js"></script>
<script src="JS/iview.min.js"></script>
<script src="JS/main.js"></script>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script src="js/iview.min.js"></script>
<script src="js/main.js"></script>
<script src="js/routes.js"></script>
</body>
</html>

View File

@@ -14,14 +14,4 @@
// }
// document.getElementById(index).style.display = "block";
// }
let inputTab = new Vue({
el: "#input-tab",
data: {
sliders: [
{ value: 25 },
{ value: 30 }
]
}
})
// }

22
Site/JS/routes.js Normal file
View File

@@ -0,0 +1,22 @@
// need to import templates from files
const Vision = { template: '<div id="vision"><nav class="nav"><router-link to="/input"><a>Input</a></router-link></nav><router-view></router-view></div>' }
const Input = { template: '<p>Input page</p>' }
const Setting = { template: '<p>Settings page</p>' }
const routes = [
{ path: '/', component: Vision , children: [
{ path: 'input', component: Input }
]},
{ path: '/vision', component: Vision , children: [
{ path: 'input', component: Input }
]},
{ path: '/settings', component: Setting }
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')

2626
Site/JS/vue-router.js Normal file

File diff suppressed because it is too large Load Diff

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

View File

@@ -0,0 +1,21 @@
<template>
<div id="input-tab">
<Slider v-for="slider in sliders" v-bind:key="slider.id" v-model="slider.value"></Slider>
</div>
</template>
<script>
new Vue({
el: "#input-tab",
data: {
sliders: [
{ id: 'lightning', value: 25 },
{ id: 'saturation', value: 30 }
]
}
})
export default {
}
</script>

View File

@@ -0,0 +1,8 @@
<template>
</template>
<script>
export default {
}
</script>

14
Site/templates/vision.vue Normal file
View File

@@ -0,0 +1,14 @@
<template>
<div id="vision">
<nav class="nav">
<router-link to="/input"><a>Input</a></router-link>
</nav>
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>