first commit
This commit is contained in:
@@ -18,7 +18,7 @@
|
||||
<li class="header">CPHA</li>
|
||||
<router-link tag="li" class="pageLink" to="/personalfinances">
|
||||
<a>
|
||||
<i class="mdi mdi-money"></i>
|
||||
<i class="fa fa-money"></i>
|
||||
<span class="page">Personal Finances</span>
|
||||
</a>
|
||||
</router-link>
|
||||
@@ -38,7 +38,9 @@
|
||||
</span>
|
||||
</a>
|
||||
<ul class="treeview-menu">
|
||||
<li><a href="#"><i class="fa fa-cog"></i> Configurations</a></li>
|
||||
<router-link tag="li" class="pageLink" to="/configurations">
|
||||
<li><a href="#"><i class="fa fa-cog"></i> Configurations</a></li>
|
||||
</router-link>
|
||||
<li><a href="#"><i class="fa fa-google"></i> Google</a></li>
|
||||
<li><a href="#"><i class="fa fa-connectdevelop"></i> MQTT / Home Assistant</a></li>
|
||||
<li><a href="#"><i class="fa fa-server"></i> Backup/Restore</a></li>
|
||||
|
||||
125
src/components/views/Configurations.vue
Normal file
125
src/components/views/Configurations.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<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>
|
||||
@@ -4,17 +4,17 @@
|
||||
|
||||
<!-- 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>
|
||||
<info-box color-class="bg-green"
|
||||
:icon-classes="['ion', 'ion-cash']"
|
||||
text="Total Income"
|
||||
number="5868.26€"></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>
|
||||
:icon-classes="['ion', 'ion-ios-cart-outline']"
|
||||
text="Total Expenses"
|
||||
number="1854.54€"></info-box>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
|
||||
@@ -22,17 +22,17 @@
|
||||
<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>
|
||||
<info-box color-class="bg-aqua"
|
||||
:icon-classes="['ion', 'ion-card']"
|
||||
text="Total Saved"
|
||||
number="13580.21€"></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>
|
||||
text="Members"
|
||||
number="2"></info-box>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
|
||||
@@ -46,66 +46,63 @@
|
||||
<div class="box-body">
|
||||
<div class="col-sm-6 col-xs-12">
|
||||
<p class="text-center">
|
||||
<strong>Web Traffic Overview</strong>
|
||||
<strong>Income vs Expenses</strong>
|
||||
</p>
|
||||
<canvas id="trafficBar" ></canvas>
|
||||
<canvas id="iveBar" ></canvas>
|
||||
</div>
|
||||
<hr class="visible-xs-block">
|
||||
<div class="col-sm-6 col-xs-12">
|
||||
<p class="text-center">
|
||||
<strong>Language Overview</strong>
|
||||
<strong>Income</strong>
|
||||
</p>
|
||||
<canvas id="languagePie"></canvas>
|
||||
<canvas id="incomePie"></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">
|
||||
<!-- <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>
|
||||
</div> -->
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<!-- <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>
|
||||
</div> -->
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<!-- <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>
|
||||
</div> -->
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<!-- <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>
|
||||
</div> -->
|
||||
<!-- /.col -->
|
||||
<!-- </div> -->
|
||||
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</section>
|
||||
<!-- /.content -->
|
||||
@@ -148,20 +145,20 @@ export default {
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
var ctx = document.getElementById('trafficBar').getContext('2d')
|
||||
var ctx = document.getElementById('iveBar').getContext('2d')
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
||||
datasets: [{
|
||||
label: 'CoPilot',
|
||||
label: 'Income',
|
||||
fill: false,
|
||||
borderColor: '#284184',
|
||||
pointBackgroundColor: '#284184',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0)',
|
||||
data: this.coPilotNumbers
|
||||
}, {
|
||||
label: 'Personal Site',
|
||||
label: 'Expenses',
|
||||
borderColor: '#4BC0C0',
|
||||
pointBackgroundColor: '#4BC0C0',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0)',
|
||||
@@ -186,11 +183,11 @@ export default {
|
||||
|
||||
new Chart(ctx, config) // eslint-disable-line no-new
|
||||
|
||||
var pieChartCanvas = document.getElementById('languagePie').getContext('2d')
|
||||
var pieChartCanvas = document.getElementById('incomePie').getContext('2d')
|
||||
var pieConfig = {
|
||||
type: 'pie',
|
||||
data: {
|
||||
labels: ['HTML', 'JavaScript', 'CSS'],
|
||||
labels: ['Person1', 'Person2', 'Others'],
|
||||
datasets: [{
|
||||
data: [56.6, 37.7, 4.1],
|
||||
backgroundColor: ['#00a65a', '#f39c12', '#00c0ef'],
|
||||
|
||||
@@ -11,6 +11,7 @@ import AccessView from './components/views/Access.vue'
|
||||
import ServerView from './components/views/Server.vue'
|
||||
import CryptosView from './components/views/Cryptos.vue'
|
||||
import PersonalFinancesView from './components/views/PersonalFinances.vue'
|
||||
import ConfigurationsView from './components/views/Configurations.vue'
|
||||
|
||||
// Routes
|
||||
const routes = [
|
||||
@@ -65,6 +66,11 @@ const routes = [
|
||||
component: CryptosView,
|
||||
name: 'Cryptos',
|
||||
meta: {description: 'List of popular javascript repos', requiresAuth: false}
|
||||
}, {
|
||||
path: 'configurations',
|
||||
component: ConfigurationsView,
|
||||
name: 'Configurations',
|
||||
meta: {description: 'List of popular javascript repos', requiresAuth: false}
|
||||
}
|
||||
]
|
||||
}, {
|
||||
|
||||
Reference in New Issue
Block a user