first commit
This commit is contained in:
parent
df01be1d85
commit
f411f90765
@ -1,4 +1,4 @@
|
||||
FROM node:14
|
||||
FROM node:14-alpine
|
||||
|
||||
WORKDIR /code
|
||||
|
||||
|
||||
@ -3,8 +3,11 @@ version: "3.8"
|
||||
services:
|
||||
iot_dashboard:
|
||||
image: sthopeless/iot-finances:latest
|
||||
restart: always
|
||||
container_name: iot_dashboard
|
||||
restart: unless-stopped
|
||||
network_mode: bridge
|
||||
volumes:
|
||||
- ./:/code
|
||||
ports:
|
||||
- 8080:8080
|
||||
labels:
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<footer class="main-footer">
|
||||
<strong>Copyright © {{ year }}
|
||||
<a href="https://discord.gg/Mh9mTEA">CPHA.pt</a>.</strong> All rights reserved.
|
||||
<a href="https://www.sthope.dev">Sthope</a>.</strong> All rights reserved.
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
|
||||
@ -38,8 +38,9 @@
|
||||
</span>
|
||||
</a>
|
||||
<ul class="treeview-menu">
|
||||
<router-link tag="li" class="pageLink" to="/settings_personal"><a href="#"><i class="fa fa-user"></i> User Configs</a><</router-link>
|
||||
<router-link tag="li" class="pageLink" to="/configurations"><a href="#"><i class="fa fa-cog"></i> Configurations</a><</router-link>
|
||||
<router-link tag="li" class="pageLink" to="/settings_google"><a href="#"><i class="fa fa-google"></i> Google</a><</router-link>
|
||||
<router-link tag="li" class="pageLink" to="/settings_google"><a href="#"><i class="fa fa-google"></i> Google Settings</a><</router-link>
|
||||
<router-link tag="li" class="pageLink" to="/iot"><a href="#"><i class="fa fa-connectdevelop"></i> MQTT / Home Assistant</a><</router-link>
|
||||
<router-link tag="li" class="pageLink" to="/backup"><a href="#"><i class="fa fa-server"></i> Backup/Restore</a><</router-link>
|
||||
</ul>
|
||||
|
||||
@ -1,93 +0,0 @@
|
||||
<template>
|
||||
<section class="content">
|
||||
<h1 class="text-center">Access</h1>
|
||||
<h4 class="text-center">Where our users are coming from.</h4>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<!-- MAP & BOX PANE -->
|
||||
<div class="box box-success">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">Visitors Report</h3>
|
||||
|
||||
<div class="box-tools pull-right">
|
||||
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.box-header -->
|
||||
<div class="box-body no-padding">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-md-8">
|
||||
<!-- Map will be created here -->
|
||||
<div id="world-map-markers"></div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-4">
|
||||
<div class="pad box-pane-right bg-green" style="min-height: 400px">
|
||||
<div v-for="stat in stats" class="description-block margin-bottom">
|
||||
<div class="row" data-color="#fff"><i class="fa fa-bar-chart-o fa-3x"></i></div>
|
||||
<h5 class="description-header">{{stat.header}}</h5>
|
||||
<span class="description-text">{{stat.text}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /.box-body -->
|
||||
</div>
|
||||
<link rel="stylesheet" href="/static/js/plugins/jvectormap/jquery-jvectormap-2.0.3.css" >
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
import {stats} from '../../demo'
|
||||
|
||||
const pluginURL = '/static/js/plugins/jvectormap/jquery-jvectormap-2.0.3.min.js'
|
||||
const mapURL = '/static/js/plugins/jvectormap/jquery-jvectormap-world-mill.js'
|
||||
|
||||
export default {
|
||||
name: 'Access',
|
||||
data () {
|
||||
return {
|
||||
stats
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
window.jQuery.getScript(pluginURL, () => {
|
||||
window.jQuery.getScript(mapURL, () => {
|
||||
window.jQuery('#world-map-markers').vectorMap({
|
||||
map: 'world_mill'
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fake {
|
||||
color: 'red';
|
||||
}
|
||||
|
||||
#world-map-markers svg {
|
||||
height: 355px;
|
||||
}
|
||||
|
||||
.row.no-gutters {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.row.no-gutters > [class^="col-"],
|
||||
.row.no-gutters > [class*=" col-"] {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
</style>
|
||||
@ -1,354 +0,0 @@
|
||||
<template>
|
||||
<!-- Main content -->
|
||||
<section class="content">
|
||||
|
||||
<!-- Info boxes -->
|
||||
<div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<info-box color-class="bg-aqua"
|
||||
:icon-classes="['ion', 'ion-ios-gear-outline']"
|
||||
text="CPU Traffic"
|
||||
number="90%"></info-box>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<info-box color-class="bg-red"
|
||||
:icon-classes="['fa', 'fa-google-plus']"
|
||||
text="Likes"
|
||||
number="41,410"></info-box>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
|
||||
<!-- fix for small devices only -->
|
||||
<div class="clearfix visible-sm-block"></div>
|
||||
|
||||
<div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<info-box color-class="bg-green"
|
||||
:icon-classes="['ion', 'ion-ios-cart-outline']"
|
||||
text="Sales"
|
||||
number="760"></info-box>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<info-box color-class="bg-yellow"
|
||||
:icon-classes="['ion', 'ion-ios-people-outline']"
|
||||
text="New Members"
|
||||
number="2,000"></info-box>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="row center-block">
|
||||
<h2>Data tables</h2>
|
||||
<div class="col-md-12">
|
||||
<div class="box">
|
||||
<div class="box-header">
|
||||
<h3 class="box-title">Data Table With Full Features</h3>
|
||||
</div>
|
||||
<!-- /.box-header -->
|
||||
<div class="box-body">
|
||||
<div class="dataTables_wrapper form-inline dt-bootstrap" id="example1_wrapper">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div id="example1_length" class="dataTables_length">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12 table-responsive">
|
||||
<table aria-describedby="example1_info" role="grid" id="example1" class="table table-bordered table-striped dataTable">
|
||||
<thead>
|
||||
<tr role="row">
|
||||
<th aria-label="Rendering engine: activate to sort column descending" aria-sort="ascending" style="width: 167px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting_asc">Rendering engine</th>
|
||||
<th aria-label="Browser: activate to sort column ascending" style="width: 207px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Browser</th>
|
||||
<th aria-label="Platform(s): activate to sort column ascending" style="width: 182px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Platform(s)</th>
|
||||
<th aria-label="Engine version: activate to sort column ascending" style="width: 142px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Engine version</th>
|
||||
<th aria-label="CSS grade: activate to sort column ascending" style="width: 101px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">CSS grade</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="even" role="row">
|
||||
<td class="sorting_1">Blink</td>
|
||||
<td>Iridium 54.0</td>
|
||||
<td>GNU/Linux</td>
|
||||
<td>54</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="odd" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Firefox 1.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td>1.7</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="even" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Firefox 1.5</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td>1.8</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="odd" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Firefox 2.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td>1.8</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="even" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Firefox 3.0</td>
|
||||
<td>Win 2k+ / OSX.3+</td>
|
||||
<td>1.9</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="odd" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Camino 1.0</td>
|
||||
<td>OSX.2+</td>
|
||||
<td>1.8</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="even" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Camino 1.5</td>
|
||||
<td>OSX.3+</td>
|
||||
<td>1.8</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="odd" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Netscape 7.2</td>
|
||||
<td>Win 95+ / Mac OS 8.6-9.2</td>
|
||||
<td>1.7</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="even" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Netscape Browser 8</td>
|
||||
<td>Win 98SE+</td>
|
||||
<td>1.7</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="odd" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Netscape Navigator 9</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td>1.8</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="even" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Mozilla 1.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td>1</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th colspan="1" rowspan="1">Rendering engine</th>
|
||||
<th colspan="1" rowspan="1">Browser</th>
|
||||
<th colspan="1" rowspan="1">Platform(s)</th>
|
||||
<th colspan="1" rowspan="1">Engine version</th>
|
||||
<th colspan="1" rowspan="1">CSS grade</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.box-body -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
|
||||
<div class="col-xs-12">
|
||||
<div class="box">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title"></h3>
|
||||
<div class="box-body">
|
||||
<div class="col-sm-6 col-xs-12">
|
||||
<p class="text-center">
|
||||
<strong>Web Traffic Overview</strong>
|
||||
</p>
|
||||
<canvas id="trafficBar" ></canvas>
|
||||
</div>
|
||||
<hr class="visible-xs-block">
|
||||
<div class="col-sm-6 col-xs-12">
|
||||
<p class="text-center">
|
||||
<strong>Language Overview</strong>
|
||||
</p>
|
||||
<canvas id="languagePie"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="text-center">
|
||||
<small><b>Pro Tip</b> Don't forget to star us on github!</small>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
|
||||
<!-- Main row -->
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<process-info-box color-class="bg-yellow"
|
||||
:icon-classes="['ion', 'ion-ios-pricetag-outline']"
|
||||
text="Inventory"
|
||||
number="5,200"
|
||||
:progress="50"
|
||||
description="50% increase since May"></process-info-box>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<process-info-box color-class="bg-green"
|
||||
:icon-classes="['ion', 'ion-ios-heart-outline']"
|
||||
text="Mentions"
|
||||
number="92,050"
|
||||
:progress="20"
|
||||
description="20% increase in 30 days"></process-info-box>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<process-info-box color-class="bg-red"
|
||||
:icon-classes="['ion', 'ion-ios-cloud-download-outline']"
|
||||
text="Downloads"
|
||||
number="114,381"
|
||||
:progress="70"
|
||||
description="70% increase since yesterday"></process-info-box>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<process-info-box color-class="bg-aqua"
|
||||
:icon-classes="['ion', 'ion-ios-chatbubble-outline']"
|
||||
text="Direct Messages"
|
||||
number="163,921"
|
||||
:progress="40"
|
||||
description="40% increase compared to last year"></process-info-box>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</section>
|
||||
<!-- /.content -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Chart from 'chart.js'
|
||||
import Alert from '../widgets/Alert'
|
||||
import InfoBox from '../widgets/InfoBox'
|
||||
import ProcessInfoBox from '../widgets/ProcessInfoBox'
|
||||
|
||||
export default {
|
||||
name: 'Dashboard',
|
||||
components: {
|
||||
Alert,
|
||||
InfoBox,
|
||||
ProcessInfoBox
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
generateRandomNumbers (numbers, max, min) {
|
||||
var a = []
|
||||
for (var i = 0; i < numbers; i++) {
|
||||
a.push(Math.floor(Math.random() * (max - min + 1)) + max)
|
||||
}
|
||||
return a
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
coPilotNumbers () {
|
||||
return this.generateRandomNumbers(12, 1000000, 10000)
|
||||
},
|
||||
personalNumbers () {
|
||||
return this.generateRandomNumbers(12, 1000000, 10000)
|
||||
},
|
||||
isMobile () {
|
||||
return (window.innerWidth <= 800 && window.innerHeight <= 600)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
var ctx = document.getElementById('trafficBar').getContext('2d')
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
||||
datasets: [{
|
||||
label: 'CoPilot',
|
||||
fill: false,
|
||||
borderColor: '#284184',
|
||||
pointBackgroundColor: '#284184',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0)',
|
||||
data: this.coPilotNumbers
|
||||
}, {
|
||||
label: 'Personal Site',
|
||||
borderColor: '#4BC0C0',
|
||||
pointBackgroundColor: '#4BC0C0',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0)',
|
||||
data: this.personalNumbers
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: !this.isMobile,
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
display: true
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'label',
|
||||
xPadding: 10,
|
||||
yPadding: 10,
|
||||
bodySpacing: 10
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
new Chart(ctx, config) // eslint-disable-line no-new
|
||||
|
||||
var pieChartCanvas = document.getElementById('languagePie').getContext('2d')
|
||||
var pieConfig = {
|
||||
type: 'pie',
|
||||
data: {
|
||||
labels: ['HTML', 'JavaScript', 'CSS'],
|
||||
datasets: [{
|
||||
data: [56.6, 37.7, 4.1],
|
||||
backgroundColor: ['#00a65a', '#f39c12', '#00c0ef'],
|
||||
hoverBackgroundColor: ['#00a65a', '#f39c12', '#00c0ef']
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: !this.isMobile,
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
display: true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
new Chart(pieChartCanvas, pieConfig) // eslint-disable-line no-new
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.info-box {
|
||||
cursor: pointer;
|
||||
}
|
||||
.info-box-content {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
display: inherit;
|
||||
}
|
||||
.fullCanvas {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -1,89 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1 class="text-center">Repos</h1>
|
||||
<h4 class="text-center">Github Repos</h4>
|
||||
|
||||
<section class="content">
|
||||
<div class="row">
|
||||
<div v-if="error">
|
||||
Found an error
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="col-md-4" v-if="response" v-for="repo in response" >
|
||||
<div class="box box-widget widget-user">
|
||||
<div class="widget-user-header bg-aqua-active text-center">
|
||||
<h3 class="widget-user-username center-text">{{repo.name }}</h3>
|
||||
</div>
|
||||
<div class="widget-user-image">
|
||||
<img class="img-circle" v-bind:src="repo.owner.avatar_url" alt="repo.owner.login + ' Avatar'">
|
||||
</div>
|
||||
<div class="box-footer">
|
||||
<div class="row">
|
||||
<div class="col-sm-4 border-right">
|
||||
<div class="description-block">
|
||||
<h5 class="description-header">{{repo.stargazers_count}}</h5>
|
||||
<span class="description-text">Star</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 border-right">
|
||||
<div class="description-block">
|
||||
<a v-bind:href="repo.owner.html_url" target="_blank">
|
||||
<button type="button" class="btn btn-default btn-lg">Visit</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="description-block">
|
||||
<h5 class="description-header">{{repo.forks_count}}</h5>
|
||||
<span class="description-text">Forks</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'Repository',
|
||||
data () {
|
||||
return {
|
||||
githubUrl: 'https://api.github.com/search/repositories?q=language%3Ajavascript&sort=stars',
|
||||
response: null,
|
||||
error: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
callGitHub () {
|
||||
axios.get(this.githubUrl)
|
||||
.then(response => {
|
||||
console.log('GitHub Response:', response)
|
||||
|
||||
if (response.status !== 200) {
|
||||
this.error = response.statusText
|
||||
return
|
||||
}
|
||||
|
||||
this.response = response.data.items
|
||||
})
|
||||
.catch(error => {
|
||||
// Request failed.
|
||||
console.log('error', error.response)
|
||||
this.error = error.response.statusText
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.callGitHub()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -1,36 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1 class="text-center">Our Environment</h1>
|
||||
<section class="content">
|
||||
<div class="row" v-if="servers">
|
||||
<div class="col-md-4" v-for="server in servers">
|
||||
<div v-bind:class="'box box-' + server.status">
|
||||
<div class="box-header with-border">
|
||||
<i v-bind:class="'fa fa-' + server.icon + ' fa-2x'"></i>
|
||||
<h3 class="box-title">{{server.name}}</h3>
|
||||
</div>
|
||||
<div class="box-body">
|
||||
|
||||
<span>{{server.description}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {servers} from '../../demo'
|
||||
|
||||
export default {
|
||||
name: 'Servers',
|
||||
data () {
|
||||
return {
|
||||
servers
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -1,125 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1 class="text-center">Settings</h1>
|
||||
<section class="content">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="box box-info">
|
||||
<!-- Input Addons -->
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">Inputs</h3>
|
||||
</div>
|
||||
|
||||
<div class="box-body">
|
||||
<!-- calendar group -->
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">
|
||||
<i class="fa fa-fw fa-calendar"></i>
|
||||
</span>
|
||||
<datepicker :readonly="true" format="MMM/D/YYYY" id="dateInput" width="100%"></datepicker>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<!-- with characthers -->
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">
|
||||
<i class="fa fa-fw fa-at" aria-hidden="true"></i>
|
||||
</span>
|
||||
<input class="form-control" placeholder="Username" type="text">
|
||||
</div>
|
||||
<br />
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">
|
||||
<i class="fa fa-fw fa-usd" aria-hidden="true"></i>
|
||||
</span>
|
||||
<input class="form-control" type="text">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<!-- with icons from font awesome -->
|
||||
<h4>With icons</h4>
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon"><i class="fa fa-fw fa-envelope"></i></span>
|
||||
<input class="form-control" placeholder="Email" type="email">
|
||||
</div>
|
||||
<br />
|
||||
<div class="input-group">
|
||||
<input class="form-control" type="text">
|
||||
<span class="input-group-addon"><i class="fa fa-fw fa-check"></i></span>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!-- Success/Error heads up input -->
|
||||
<h4>With border indicator</h4>
|
||||
<div class="form-group has-success">
|
||||
<label class="control-label" for="inputSuccess"><i class="fa fa-fw fa-check"></i> Input with success</label>
|
||||
<input class="form-control" id="inputSuccess" placeholder="Enter ..." type="text">
|
||||
<span class="help-block">Help block with success</span>
|
||||
</div>
|
||||
<br />
|
||||
<div class="form-group has-error">
|
||||
<label class="control-label" for="inputError"><i class="fa fa-fw fa-times-circle-o"></i> Input with error</label>
|
||||
<input class="form-control" id="inputError" placeholder="Enter ..." type="text">
|
||||
<span class="help-block">Help block with error</span>
|
||||
</div>
|
||||
|
||||
<!-- select examples -->
|
||||
<h4>Select Options</h4>
|
||||
<div class="form-group">
|
||||
<label>Select</label>
|
||||
<select class="form-control">
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
<option>option 3</option>
|
||||
<option>option 4</option>
|
||||
<option>option 5</option>
|
||||
</select>
|
||||
</div>
|
||||
<br />
|
||||
<div class="form-group">
|
||||
<label>Select Multiple</label>
|
||||
<select multiple="" class="form-control">
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
<option>option 3</option>
|
||||
<option>option 4</option>
|
||||
<option>option 5</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- /input-group -->
|
||||
</div>
|
||||
<!-- /.box-body -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
require('moment')
|
||||
import datepicker from 'vue-date-picker'
|
||||
|
||||
export default {
|
||||
name: 'Settings',
|
||||
components: { datepicker },
|
||||
computed: {
|
||||
datetime () {
|
||||
return new Date()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clearInput (vueModel) {
|
||||
vueModel = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.datetime-picker input {
|
||||
height: 4em !important;
|
||||
}
|
||||
</style>
|
||||
@ -1,239 +0,0 @@
|
||||
<template>
|
||||
<section class="content">
|
||||
<div class="row center-block">
|
||||
<h2>Simple</h2>
|
||||
<div class="col-md-12">
|
||||
<div class="box">
|
||||
<div class="box-header">
|
||||
<h3 class="box-title">Striped Full Width Table</h3>
|
||||
</div>
|
||||
<!-- /.box-header -->
|
||||
<div class="box-body no-padding table-responsive">
|
||||
<table class="table table-striped">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th style="width: 10px">#</th>
|
||||
<th>Task</th>
|
||||
<th>Progress</th>
|
||||
<th style="width: 40px">Label</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1.</td>
|
||||
<td>Update software</td>
|
||||
<td><div class="progress progress-xs"><div class="progress-bar progress-bar-danger" style="width: 55%"></div></div></td>
|
||||
<td><span class="badge bg-red">55%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2.</td>
|
||||
<td>Clean database</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar progress-bar-yellow" style="width: 70%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-yellow">70%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3.</td>
|
||||
<td>Cron job running</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar progress-bar-primary" style="width: 30%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-light-blue">30%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4.</td>
|
||||
<td>Fix and squish bugs</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar progress-bar-success" style="width: 90%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-green">90%</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- /.box-body -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row center-block">
|
||||
<h2>Data tables</h2>
|
||||
<div class="col-md-12">
|
||||
<div class="box">
|
||||
<div class="box-header">
|
||||
<h3 class="box-title">Data Table With Full Features</h3>
|
||||
</div>
|
||||
<!-- /.box-header -->
|
||||
<div class="box-body">
|
||||
<div class="dataTables_wrapper form-inline dt-bootstrap" id="example1_wrapper">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div id="example1_length" class="dataTables_length">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12 table-responsive">
|
||||
<table aria-describedby="example1_info" role="grid" id="example1" class="table table-bordered table-striped dataTable">
|
||||
<thead>
|
||||
<tr role="row">
|
||||
<th aria-label="Rendering engine: activate to sort column descending" aria-sort="ascending" style="width: 167px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting_asc">Rendering engine</th>
|
||||
<th aria-label="Browser: activate to sort column ascending" style="width: 207px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Browser</th>
|
||||
<th aria-label="Platform(s): activate to sort column ascending" style="width: 182px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Platform(s)</th>
|
||||
<th aria-label="Engine version: activate to sort column ascending" style="width: 142px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Engine version</th>
|
||||
<th aria-label="CSS grade: activate to sort column ascending" style="width: 101px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">CSS grade</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="even" role="row">
|
||||
<td class="sorting_1">Blink</td>
|
||||
<td>Iridium 54.0</td>
|
||||
<td>GNU/Linux</td>
|
||||
<td>54</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="odd" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Firefox 1.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td>1.7</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="even" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Firefox 1.5</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td>1.8</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="odd" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Firefox 2.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td>1.8</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="even" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Firefox 3.0</td>
|
||||
<td>Win 2k+ / OSX.3+</td>
|
||||
<td>1.9</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="odd" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Camino 1.0</td>
|
||||
<td>OSX.2+</td>
|
||||
<td>1.8</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="even" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Camino 1.5</td>
|
||||
<td>OSX.3+</td>
|
||||
<td>1.8</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="odd" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Netscape 7.2</td>
|
||||
<td>Win 95+ / Mac OS 8.6-9.2</td>
|
||||
<td>1.7</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="even" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Netscape Browser 8</td>
|
||||
<td>Win 98SE+</td>
|
||||
<td>1.7</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="odd" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Netscape Navigator 9</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td>1.8</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="even" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Mozilla 1.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td>1</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th colspan="1" rowspan="1">Rendering engine</th>
|
||||
<th colspan="1" rowspan="1">Browser</th>
|
||||
<th colspan="1" rowspan="1">Platform(s)</th>
|
||||
<th colspan="1" rowspan="1">Engine version</th>
|
||||
<th colspan="1" rowspan="1">CSS grade</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.box-body -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $ from 'jquery'
|
||||
// Require needed datatables modules
|
||||
require('datatables.net')
|
||||
require('datatables.net-bs')
|
||||
|
||||
export default {
|
||||
name: 'Tables',
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
$('#example1').DataTable()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Using the bootstrap style, but overriding the font to not draw in
|
||||
the Glyphicons Halflings font as an additional requirement for sorting icons.
|
||||
|
||||
An alternative to the solution active below is to use the jquery style
|
||||
which uses images, but the color on the images does not match adminlte.
|
||||
|
||||
@import url('/static/js/plugins/datatables/jquery.dataTables.min.css');
|
||||
*/
|
||||
|
||||
@import url('/static/js/plugins/datatables/dataTables.bootstrap.css');
|
||||
|
||||
table.dataTable thead .sorting:after,
|
||||
table.dataTable thead .sorting_asc:after,
|
||||
table.dataTable thead .sorting_desc:after {
|
||||
font-family: 'FontAwesome';
|
||||
}
|
||||
|
||||
table.dataTable thead .sorting:after {
|
||||
content: '\f0dc';
|
||||
}
|
||||
|
||||
table.dataTable thead .sorting_asc:after {
|
||||
content: '\f0dd';
|
||||
}
|
||||
|
||||
table.dataTable thead .sorting_desc:after {
|
||||
content: '\f0de';
|
||||
}
|
||||
</style>
|
||||
@ -1,50 +0,0 @@
|
||||
<template>
|
||||
<section class="content">
|
||||
<div class="row center-block">
|
||||
<h1 class="text-center">Tasks</h1>
|
||||
<ul class="timeline">
|
||||
<!-- timeline time label -->
|
||||
<li class="time-label">
|
||||
<span class="bg-green">{{today}}</span>
|
||||
</li>
|
||||
<!-- timeline item -->
|
||||
<li v-for="line in timeline">
|
||||
<!-- timeline icon -->
|
||||
<i v-bind:class="'fa ' + line.icon + ' bg-' + line.color"></i>
|
||||
<div class="timeline-item">
|
||||
<span class="time"><i class="fa fa-clock-o"></i> {{line.time}}</span>
|
||||
<h3 class="timeline-header">{{line.title}}</h3>
|
||||
<div class="timeline-body" v-if="line.body" v-html="line.body">
|
||||
</div>
|
||||
<div class="timeline-footer" v-if="line.buttons">
|
||||
<a v-for="btn in line.buttons" v-bind:class="'btn btn-' + btn.type + ' btn-xs'" v-bind:href="btn.href" v-bind:target="btn.target">{{btn.message}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- END timeline item -->
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import {timeline} from '../../demo'
|
||||
|
||||
export default {
|
||||
name: 'Tasks',
|
||||
computed: {
|
||||
today () {
|
||||
return moment().format('MMM Do YY')
|
||||
},
|
||||
timeline () {
|
||||
return timeline
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.timeline-footer a.btn {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -1,24 +1,19 @@
|
||||
import DashView from './components/Dash.vue'
|
||||
import LoginView from './components/Login.vue'
|
||||
// import LoginView from './components/Login.vue'
|
||||
import NotFoundView from './components/404.vue'
|
||||
|
||||
// Import Views - Dash
|
||||
import DashboardView from './components/views/Dashboard.vue'
|
||||
import TablesView from './components/views/Tables.vue'
|
||||
import TasksView from './components/views/Tasks.vue'
|
||||
import SettingView from './components/views/Setting.vue'
|
||||
import AccessView from './components/views/Access.vue'
|
||||
import ServerView from './components/views/Server.vue'
|
||||
// Sthope Views
|
||||
import CryptosView from './components/views/Cryptos.vue'
|
||||
import PersonalFinancesView from './components/views/PersonalFinances.vue'
|
||||
import ConfigurationsView from './components/views/Configurations.vue'
|
||||
|
||||
// Routes
|
||||
const routes = [
|
||||
{
|
||||
path: '/login',
|
||||
component: LoginView
|
||||
},
|
||||
// {
|
||||
// path: '/login',
|
||||
// component: LoginView
|
||||
// },
|
||||
{
|
||||
path: '/',
|
||||
component: DashView,
|
||||
@ -28,49 +23,18 @@ const routes = [
|
||||
alias: '',
|
||||
component: PersonalFinancesView,
|
||||
name: 'Personal Finances',
|
||||
meta: {description: 'Overview of environment'}
|
||||
meta: {description: ''}
|
||||
},
|
||||
{
|
||||
path: 'dashboard',
|
||||
alias: '',
|
||||
component: DashboardView,
|
||||
name: 'Dashboard',
|
||||
meta: {description: 'Overview of environment', requiresAuth: false}
|
||||
}, {
|
||||
path: 'tables',
|
||||
component: TablesView,
|
||||
name: 'Tables',
|
||||
meta: {description: 'Simple and advance table in CoPilot', requiresAuth: false}
|
||||
}, {
|
||||
path: 'tasks',
|
||||
component: TasksView,
|
||||
name: 'Tasks',
|
||||
meta: {description: 'Tasks page in the form of a timeline', requiresAuth: false}
|
||||
}, {
|
||||
path: 'setting',
|
||||
component: SettingView,
|
||||
name: 'Settings',
|
||||
meta: {description: 'User settings page', requiresAuth: false}
|
||||
}, {
|
||||
path: 'access',
|
||||
component: AccessView,
|
||||
name: 'Access',
|
||||
meta: {description: 'Example of using maps', requiresAuth: false}
|
||||
}, {
|
||||
path: 'server',
|
||||
component: ServerView,
|
||||
name: 'Servers',
|
||||
meta: {description: 'List of our servers', requiresAuth: false}
|
||||
}, {
|
||||
path: 'cryptos',
|
||||
component: CryptosView,
|
||||
name: 'Cryptos',
|
||||
meta: {description: 'List of popular javascript repos', requiresAuth: false}
|
||||
meta: {description: '', requiresAuth: false}
|
||||
}, {
|
||||
path: 'configurations',
|
||||
component: ConfigurationsView,
|
||||
name: 'Configurations',
|
||||
meta: {description: 'List of popular javascript repos', requiresAuth: false}
|
||||
meta: {description: '', requiresAuth: false}
|
||||
}
|
||||
]
|
||||
}, {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user