+
+
-
box name
+
{{ settings.device.name }}
{{ stats.wifi.rssi | wifiIcon(0) }}
- {{ new Date(stats.device.time * 1000).toLocaleString() }}
+ {{ new Date(stats.device.time * 1000).toLocaleString(undefined, {month: 'numeric', day: 'numeric', year: 'numeric', hour: '2-digit', minute: '2-digit'}) }}
import { mapState } from 'vuex'
+ import Notifications from '@/components/Notifications'
export default {
+ components: { Notifications },
data: () => ({
drawer: true,
clipped: true,
@@ -173,6 +177,11 @@
icon: '$wb_sunny',
to: '/weather',
},
+ {
+ label: 'Wifi',
+ icon: '$signalWifi3',
+ to: '/wifi',
+ },
{
label: 'System',
icon: '$settings',
@@ -181,7 +190,7 @@
],
}),
computed: {
- ...mapState(['stats']),
+ ...mapState(['stats', 'settings']),
},
}
diff --git a/app/src/plugins/vuetify.js b/app/src/plugins/vuetify.js
index 9daa56d..80e63b9 100644
--- a/app/src/plugins/vuetify.js
+++ b/app/src/plugins/vuetify.js
@@ -10,11 +10,11 @@ const MY_ICONS = {
// cancel: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/cancel/baseline.svg')},
close: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/close/baseline.svg') },
// delete: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/delete/baseline.svg')},
- // clear: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/clear/baseline.svg')},
- // success: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/check_circle/baseline.svg')},
+ clear: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/clear/baseline.svg') },
+ success: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/check_circle/baseline.svg') },
info: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/info/baseline.svg') },
// warning: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/priority_high/baseline.svg')},
- // error: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/warning/baseline.svg')},
+ error: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/warning/baseline.svg') },
prev: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/chevron_left/baseline.svg') },
next: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/chevron_right/baseline.svg') },
// checkboxOn: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/check_box/baseline.svg')},
@@ -54,6 +54,14 @@ const MY_ICONS = {
support: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/support/baseline.svg') },
device: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/video_label/baseline.svg') },
update: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/update/baseline.svg') },
+ launch: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/launch/baseline.svg') },
+ translate: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/translate/baseline.svg') },
+ access_time: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/access_time/baseline.svg') },
+ language: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/language/baseline.svg') },
+ palette: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/palette/baseline.svg') },
+ sentiment_satisfied_alt: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/sentiment_satisfied_alt/baseline.svg') },
+ file: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/insert_drive_file/baseline.svg') },
+ calendar_today: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/calendar_today/baseline.svg') },
// wifi
signalWifiOff: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/signal_wifi_off/baseline.svg') },
diff --git a/app/src/router/index.js b/app/src/router/index.js
index 380693b..854d5ea 100644
--- a/app/src/router/index.js
+++ b/app/src/router/index.js
@@ -5,6 +5,7 @@ const Dashboard = () => import('../views/Dashboard')
const Settings = () => import('../views/Settings')
const Device = () => import('../views/Device')
const Playlist = () => import('../views/Playlist')
+const Wifi = () => import('../views/Wifi')
const Weather = () => import('../views/Weather')
const System = () => import('../views/System')
@@ -24,6 +25,7 @@ export default new VueRouter({
{ path: '/settings', component: Settings, meta: { transitionName: 'slide' } },
{ path: '/device', component: Device, meta: { transitionName: 'slide' } },
{ path: '/playlist', component: Playlist, meta: { transitionName: 'slide' } },
+ { path: '/wifi', component: Wifi, meta: { transitionName: 'slide' } },
{ path: '/weather', component: Weather, meta: { transitionName: 'slide' } },
{ path: '/system', component: System, meta: { transitionName: 'slide' } },
diff --git a/app/src/store/index.js b/app/src/store/index.js
index 78d32e9..10ad159 100644
--- a/app/src/store/index.js
+++ b/app/src/store/index.js
@@ -3,6 +3,9 @@ import Vuex from 'vuex'
import axios from 'axios'
// import device from '@/api/device'
+import { countries, languages } from 'countries-list'
+import timezones from 'countries-and-timezones'
+
Vue.use(Vuex)
const store = new Vuex.Store({
@@ -18,46 +21,13 @@ const store = new Vuex.Store({
setSettings (state, payload) {
state.settings = payload
},
-
- /*
- setSensors (state, payload) {
- state.sensors = payload
- },
- updateSensor (state, payload) {
- // update sensor
- const i = state.sensors.findIndex(item => item.id === payload.id)
- if (i >= 0) {
- state.sensors[i].temperature = payload.temperature
- state.sensors[i].humidity = payload.humidity
- state.sensors[i].last_update = payload.last_update
-
- if (payload.label) {
- state.sensors[i].label = payload.label
- }
-
- // update state
- state.sensors = [
- ...state.sensors,
- ]
- }
- },
- deleteSensor (state, id) {
- // const i = state.sensors.findIndex(item => item.id === id)
- state.sensors = state.sensors.filter(item => item.id !== id)
- },
- setPushUpdate (state, enable) {
- state.pushUpdate = enable
- },
- addSensorHistory (state, payload) {
- state.sensorHistory.push(payload)
- if (state.sensorHistory.length > 20) {
- state.sensorHistory = state.sensorHistory.slice(1)
- }
- },
notification (state, payload) {
state.notifications = payload
},
- */
+ updateSettings (state, payload) {
+ state.settings = { ...state.settings, ...payload }
+ console.log(state.settings)
+ },
},
actions: {
async loadStats ({ commit }) {
@@ -76,6 +46,19 @@ const store = new Vuex.Store({
commit('setSettings', {})
}
},
+ async saveSettings ({ commit, state }) {
+ try {
+ await axios.put('/api/settings', state.settings, {
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ })
+ commit('notification', 'settings saved')
+ } catch (error) {
+ console.warn(error)
+ }
+ },
+
/*
async getSensors ({ commit }) {
try {
@@ -108,11 +91,20 @@ const store = new Vuex.Store({
*/
},
getters: {
- /*
- isAuthenticated(state) {
- return state.user !== null && state.user !== undefined;
- }
- */
+ getAvailableLanguages () {
+ return languages
+ },
+
+ getAvailableCountries () {
+ return countries
+ },
+
+ getAvailableTimezones () {
+ return timezones.getAllTimezones()
+ },
+ getAvailableTimezone: () => (countryCode) => {
+ return timezones.getCountry(countryCode)
+ },
},
})
diff --git a/app/src/views/Device.vue b/app/src/views/Device.vue
index 60979a1..d69fe9b 100644
--- a/app/src/views/Device.vue
+++ b/app/src/views/Device.vue
@@ -1,22 +1,137 @@
+
+
+ Device settings
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Cancel
+
+
+
+ Submit
+
+
+
+
device settings
- orientation
- theme
- auflösung
+ - system language
- system time
diff --git a/app/src/views/Playlist.vue b/app/src/views/Playlist.vue
index 048f560..83506d7 100644
--- a/app/src/views/Playlist.vue
+++ b/app/src/views/Playlist.vue
@@ -1,11 +1,82 @@
+
+
+ Playlist settings
+
+
+
+
+
+ $wb_sunny
+
Forecast
+
+
+
+
+
+ $calendar_today
+
Calendar
+
+
+
+
+ - calendar
+ - weather forecast
+ - unsplash.com
+
+
+
+
+
+
+ Cancel
+
+
+
+ Submit
+
+
+
+
playlist settings
- switch every x seconds
diff --git a/app/src/views/System.vue b/app/src/views/System.vue
index e1ffacf..31766c0 100644
--- a/app/src/views/System.vue
+++ b/app/src/views/System.vue
@@ -5,6 +5,10 @@
width="400"
class="mx-auto"
>
+
+ System info
+
+
$info
@@ -13,12 +17,20 @@
Software
-
- Update
-
+
+
+ Update
+
+
+
@@ -86,6 +98,7 @@
- {{ fsUsage }}
+ {{ memoryUsage }}
+
+
+ Total
+
+ {{ memory.total | prettyBytes }}
+
+
+
+
+ Free
+
+ {{ memory.free | prettyBytes }}
+
+
+
+
+
+ {{ Math.ceil(value) }}%
+
+