first commit
This commit is contained in:
parent
f411f90765
commit
fcf0c0a46a
@ -38,11 +38,11 @@
|
||||
</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="/user_configs"><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 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>
|
||||
<router-link tag="li" class="pageLink" to="/google_settings"><a href="#"><i class="fa fa-google"></i> Google Settings</a><</router-link>
|
||||
<router-link tag="li" class="pageLink" to="/mqtt_homeassistant"><a href="#"><i class="fa fa-connectdevelop"></i> MQTT / Home Assistant</a><</router-link>
|
||||
<router-link tag="li" class="pageLink" to="/backups"><a href="#"><i class="fa fa-server"></i> Backup/Restore</a><</router-link>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
125
src/components/views/Settings_Google.vue
Normal file
125
src/components/views/Settings_Google.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>
|
||||
125
src/components/views/Settings_MQTT_HA.vue
Normal file
125
src/components/views/Settings_MQTT_HA.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>
|
||||
125
src/components/views/Settings_User.vue
Normal file
125
src/components/views/Settings_User.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>
|
||||
@ -6,7 +6,12 @@ import NotFoundView from './components/404.vue'
|
||||
// Sthope Views
|
||||
import CryptosView from './components/views/Cryptos.vue'
|
||||
import PersonalFinancesView from './components/views/PersonalFinances.vue'
|
||||
import ConfigurationsView from './components/views/Configurations.vue'
|
||||
// Sthope Settings Views
|
||||
import SettingsBackupView from './components/views/Settings_Backup.vue'
|
||||
import SettingsConfigurationsView from './components/views/Settings_Configurations.vue'
|
||||
import SettingsGoogleView from './components/views/Settings_Google.vue'
|
||||
import SettingsMQTTHAView from './components/views/Settings_MQTT_HA.vue'
|
||||
import SettingsUserView from './components/views/Settings_User.vue'
|
||||
|
||||
// Routes
|
||||
const routes = [
|
||||
@ -32,9 +37,34 @@ const routes = [
|
||||
meta: {description: '', requiresAuth: false}
|
||||
}, {
|
||||
path: 'configurations',
|
||||
component: ConfigurationsView,
|
||||
component: SettingsBackupView,
|
||||
name: 'Configurations',
|
||||
meta: {description: '', requiresAuth: false}
|
||||
}, {
|
||||
path: 'configurations',
|
||||
component: SettingsConfigurationsView,
|
||||
name: 'Configurations',
|
||||
meta: {description: '', requiresAuth: false}
|
||||
}, {
|
||||
path: 'google_settings',
|
||||
component: SettingsGoogleView,
|
||||
name: 'Google Settings',
|
||||
meta: {description: '', requiresAuth: false}
|
||||
}, {
|
||||
path: 'mqtt_homeassistant',
|
||||
component: SettingsMQTTHAView,
|
||||
name: 'MQTT / HomeAssistant',
|
||||
meta: {description: '', requiresAuth: false}
|
||||
}, {
|
||||
path: 'user_configs',
|
||||
component: SettingsUserView,
|
||||
name: 'User Configs',
|
||||
meta: {description: '', requiresAuth: false}
|
||||
}, {
|
||||
path: 'backups',
|
||||
component: SettingsUserView,
|
||||
name: 'Backups',
|
||||
meta: {description: '', requiresAuth: false}
|
||||
}
|
||||
]
|
||||
}, {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user