pingu_98/cosmicpi-rpi_V1.5
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add WEB UI skeleton

Browse source
This commit is contained in:
Darko Lukic 2018-03-21 00:22:10 +01:00
parent a107d29e28
commit 66b352b805
13 changed files with 12203 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/.gitignore vendored Normal file
View file

@ -0,0 +1,2 @@
dist
node_modules

12
ui/index.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cosmic Pi UI</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>

11821
ui/package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

39
ui/package.json Normal file
View file

@ -0,0 +1,39 @@
{
"name": "cosmicpi-ui",
"version": "1.0.0",
"description": "Web interface for Cosmic Pi",
"main": "webpack.config.js",
"scripts": {
"dev": "webpack-dev-server --open --mode development",
"build": "webpack --progress --mode production",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"cosmicpi",
"ui",
"muon",
"detector"
],
"author": "",
"license": "ISC",
"sideEffects": false,
"dependencies": {
"bootstrap": "^4.0.0",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"vue": "^2.5.16",
"vue-router": "^3.0.1"
},
"devDependencies": {
"babel-loader": "^7.1.4",
"css-loader": "^0.28.11",
"file-loader": "^1.1.11",
"style-loader": "^0.20.3",
"url-loader": "^1.0.1",
"vue-loader": "^14.2.1",
"vue-template-compiler": "^2.5.16",
"webpack": "^4.1.1",
"webpack-cli": "^2.0.12",
"webpack-dev-server": "^3.1.1"
}
}

51
ui/src/App.vue Normal file
View file

@ -0,0 +1,51 @@
<template>
<div id="app-holder">
<div id="sidebar">
<a href="#">
<img src="./assets/images/logo.png" id="logo" />
</a>
<hr class="hideable" />
<ul>
<li>
<a href="http://cosmicpi.org/" target="_blank">
<i class="fa fa-wechat"></i>
<span class="hideable">Website <i class="fa fa-external-link"></i></span>
</a>
<hr />
</li>
<li>
<router-link to="/">
<i class="fa fa-dashboard"></i>
<span class="hideable">Dashboard</span>
</router-link>
</li>
<li>
<router-link to="/settings">
<i class="fa fa-gears"></i>
<span class="hideable">Settings</span>
</router-link>
</li>
<li>
<router-link to="/about">
<i class="fa fa-info-circle"></i>
<span class="hideable">About</span>
</router-link>
</li>
</ul>
<hr class="hideable" />
<p class="hideable">
Copyright © Cosmic Pi Inc. 2018. <br />All Rights Reserved. <br />
</p>
</div>
<div id="content" class="content">
<router-view name="main"></router-view>
</div>
</div>
</template>
<script>
export default {
name: '',
}
</script>

117
ui/src/assets/css/main.css Normal file
View file

@ -0,0 +1,117 @@
:root {
--sidebar-width: 250px;
--mobile-sidebar-width: 50px;
}
html {
height: 100%;
}
body, #app, #app-holder {
margin: 0;
padding: 0;
height: 100%;
}
hr {
height: 1px;
margin: 10px 10px;
border: 0;
background-color: rgba(255, 255, 255, 0.2);
}
.huge {
font-size: 32px;
}
#sidebar {
background-color: #222;
background-size: cover;
background-position: right;
background-repeat: no-repeat;
background-image: url('../images/background_mountains.jpg');
float: left;
width: var(--sidebar-width);
height: 100%;
border-right: 1px solid #111;
}
#sidebar ul {
padding: 0;
margin: 0;
}
#sidebar ul li {
text-decoration: none;
width: 100%;
margin: 0;
list-style: none;
}
#sidebar ul li i {
padding-right: 10px;
}
#sidebar ul a {
padding: 10px 16px;
text-decoration: none;
width: 100%;
display: block;
color: #ddd;
font-size: 18px;
transition: padding 0.2s;
}
#sidebar ul li a:hover {
background-color: rgba(0, 0, 0, 0.5);
cursor: pointer;
padding-left: 30px;
}
.router-link-exact-active {
color: #2e6da4 !important;
}
#sidebar #logo {
width: 100%;
padding: 5px 10px;
margin-bottom: 20px;
}
#sidebar p {
color: #bbb;
padding: 8px;
text-align: center;
}
#content {
padding: 16px 32px;
float: left;
width: calc(100% - var(--sidebar-width));
height: 100%;
overflow-y: auto;
background-color: white;
}
.component-content {
padding: 4px 20px;
}
@media(max-width:768px) {
#sidebar {
width: var(--mobile-sidebar-width);
}
#content {
width: calc(100% - var(--mobile-sidebar-width));
}
#sidebar #logo {
display: none;
}
#sidebar .hideable {
display: none;
}
}

BIN
ui/src/assets/images/background_mountains.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 188 KiB

BIN
ui/src/assets/images/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 112 KiB

22
ui/src/components/Dashboard.vue Normal file
View file

@ -0,0 +1,22 @@
<template>
<div class="row">
<LiveValue value="NA" icon="fa-thermometer-quarter"></LiveValue>
</div>
</template>
<script>
import LiveValue from './LiveValue.vue'
export default {
name: 'Dashboard',
components: {
LiveValue
},
data () {
return {
temperatureValue: 'NA',
}
},
}
</script>

22
ui/src/components/LiveValue.vue Normal file
View file

@ -0,0 +1,22 @@
<template>
<div class="card bg-primary col-bg-3 col-md-4 col-sm-6 col-xs-12">
<div class="card-body">
<div class="row">
<div class="col-3">
<i class="fa fa-thermometer-quarter fa-5x"></i>
</div>
<div class="col-9 text-center">
<div class="huge">{{ value }}</div>
<div class="card-title">Temperature</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'LiveValue',
props: ['value', 'icon'],
}
</script>

18
ui/src/main.js Normal file
View file

@ -0,0 +1,18 @@
import Vue from 'vue'
import router from './router.js'
import App from './App.vue'
import $ from 'jquery';
import './assets/css/main.css'
import '../node_modules/bootstrap/dist/css/bootstrap.css'
import '../node_modules/font-awesome/css/font-awesome.css'
window.jQuery = $;
window.$ = $;
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})

16
ui/src/router.js Normal file
View file

@ -0,0 +1,16 @@
import Vue from 'vue'
import Router from 'vue-router'
import Dashboard from './components/Dashboard.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
components: {
main: Dashboard
}
},
]
})

83
ui/webpack.config.js Normal file
View file

@ -0,0 +1,83 @@
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff"
}, {
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff"
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "url-loader?limit=10000&mimetype=application/octet-stream"
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file-loader"
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: "url-loader?limit=10000&mimetype=image/svg+xml"
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}