|
|
@ -13,39 +13,38 @@
|
|
|
|
app
|
|
|
|
app
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<!-- https://cdn.vuetifyjs.com/images/parallax/material.jpg -->
|
|
|
|
<!-- https://cdn.vuetifyjs.com/images/parallax/material.jpg -->
|
|
|
|
<v-img class="device-screen-image" :aspect-ratio="16/9" src="/fs/screen.bmp">
|
|
|
|
<v-img class="device-screen-image" :aspect-ratio="16/9" :src="device_screen_src">
|
|
|
|
<v-row align="end" class="lightbox white--text pa-2 fill-height">
|
|
|
|
<v-row align="end" class="lightbox white--text pa-2 fill-height">
|
|
|
|
|
|
|
|
<!--
|
|
|
|
<v-col>
|
|
|
|
<v-col>
|
|
|
|
<!--<div class="subheading">update in 2min</div>-->
|
|
|
|
<div class="subheading">update in 2min</div>
|
|
|
|
<!--<div class="body-1">heyfromjonathan@gmail.com</div>-->
|
|
|
|
<div class="body-1">heyfromjonathan@gmail.com</div>
|
|
|
|
</v-col>
|
|
|
|
</v-col>
|
|
|
|
|
|
|
|
-->
|
|
|
|
</v-row>
|
|
|
|
</v-row>
|
|
|
|
</v-img>
|
|
|
|
</v-img>
|
|
|
|
|
|
|
|
|
|
|
|
<v-list-item>
|
|
|
|
<v-list-item>
|
|
|
|
|
|
|
|
<v-list-item-icon class="mr-3">
|
|
|
|
|
|
|
|
<v-progress-circular
|
|
|
|
|
|
|
|
:rotate="-90"
|
|
|
|
|
|
|
|
:size="50"
|
|
|
|
|
|
|
|
:width="5"
|
|
|
|
|
|
|
|
:value="playlistProgress"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
{{ playlistRemaining }}
|
|
|
|
|
|
|
|
</v-progress-circular>
|
|
|
|
|
|
|
|
</v-list-item-icon>
|
|
|
|
<v-list-item-content>
|
|
|
|
<v-list-item-content>
|
|
|
|
<v-list-item-title class="title">
|
|
|
|
<v-list-item-title class="title">
|
|
|
|
paperdash.io
|
|
|
|
{{ stats.playlist.current }}
|
|
|
|
</v-list-item-title>
|
|
|
|
</v-list-item-title>
|
|
|
|
<v-list-item-subtitle>
|
|
|
|
<v-list-item-subtitle>
|
|
|
|
Weather
|
|
|
|
8. March 2020
|
|
|
|
</v-list-item-subtitle>
|
|
|
|
</v-list-item-subtitle>
|
|
|
|
</v-list-item-content>
|
|
|
|
</v-list-item-content>
|
|
|
|
</v-list-item>
|
|
|
|
</v-list-item>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="d-flex justify-center py-5">
|
|
|
|
|
|
|
|
<v-progress-circular
|
|
|
|
|
|
|
|
class=""
|
|
|
|
|
|
|
|
:rotate="-90"
|
|
|
|
|
|
|
|
:size="100"
|
|
|
|
|
|
|
|
:width="15"
|
|
|
|
|
|
|
|
value="40"
|
|
|
|
|
|
|
|
color="teal"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
40
|
|
|
|
|
|
|
|
</v-progress-circular>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<v-divider></v-divider>
|
|
|
|
<v-divider></v-divider>
|
|
|
|
|
|
|
|
|
|
|
|
<v-list-item>
|
|
|
|
<v-list-item>
|
|
|
@ -76,29 +75,16 @@
|
|
|
|
|
|
|
|
|
|
|
|
<v-list-item>
|
|
|
|
<v-list-item>
|
|
|
|
<v-list-item-content>
|
|
|
|
<v-list-item-content>
|
|
|
|
<v-progress-linear value="74" height="20">
|
|
|
|
Total: {{ stats.device.fs.total | prettyBytes }}<br/>
|
|
|
|
19%
|
|
|
|
Free: {{ stats.device.fs.free | prettyBytes }}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<v-progress-linear :value="fsUsagePercent" height="25">
|
|
|
|
|
|
|
|
<template v-slot="{ value }">
|
|
|
|
|
|
|
|
<strong class="white--text">{{ Math.ceil(value) }}%</strong>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
</v-progress-linear>
|
|
|
|
</v-progress-linear>
|
|
|
|
</v-list-item-content>
|
|
|
|
</v-list-item-content>
|
|
|
|
</v-list-item>
|
|
|
|
</v-list-item>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
|
|
|
<v-list>
|
|
|
|
|
|
|
|
<v-list-item
|
|
|
|
|
|
|
|
v-for="(link, i) in items"
|
|
|
|
|
|
|
|
:key="i"
|
|
|
|
|
|
|
|
:to="link.to"
|
|
|
|
|
|
|
|
active-class="primary white--text"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<v-list-item-action>
|
|
|
|
|
|
|
|
<v-icon v-text="link.icon" />
|
|
|
|
|
|
|
|
</v-list-item-action>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<v-list-item-title v-text="link.title" />
|
|
|
|
|
|
|
|
</v-list-item>
|
|
|
|
|
|
|
|
</v-list>
|
|
|
|
|
|
|
|
-->
|
|
|
|
|
|
|
|
</v-navigation-drawer>
|
|
|
|
</v-navigation-drawer>
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
<!--
|
|
|
@ -112,7 +98,6 @@
|
|
|
|
-->
|
|
|
|
-->
|
|
|
|
|
|
|
|
|
|
|
|
<v-app-bar app color="orange lighten-1" dark short>
|
|
|
|
<v-app-bar app color="orange lighten-1" dark short>
|
|
|
|
<!-- -->
|
|
|
|
|
|
|
|
<v-app-bar-nav-icon @click="drawer = !drawer">
|
|
|
|
<v-app-bar-nav-icon @click="drawer = !drawer">
|
|
|
|
<v-icon>$device</v-icon>
|
|
|
|
<v-icon>$device</v-icon>
|
|
|
|
</v-app-bar-nav-icon>
|
|
|
|
</v-app-bar-nav-icon>
|
|
|
@ -121,14 +106,11 @@
|
|
|
|
|
|
|
|
|
|
|
|
<v-spacer></v-spacer>
|
|
|
|
<v-spacer></v-spacer>
|
|
|
|
|
|
|
|
|
|
|
|
<v-template
|
|
|
|
<template v-for="(link, i) in items">
|
|
|
|
v-for="(link, i) in items"
|
|
|
|
<v-btn icon :to="link.to" :key="i">
|
|
|
|
:key="i"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<v-btn icon :to="link.to">
|
|
|
|
|
|
|
|
<v-icon v-text="link.icon" />
|
|
|
|
<v-icon v-text="link.icon" />
|
|
|
|
</v-btn>
|
|
|
|
</v-btn>
|
|
|
|
</v-template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
</v-app-bar>
|
|
|
|
</v-app-bar>
|
|
|
|
|
|
|
|
|
|
|
@ -142,7 +124,7 @@
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
|
|
|
|
import apiDevice from './api/device'
|
|
|
|
import "@/assets/app.css"
|
|
|
|
import "@/assets/app.css"
|
|
|
|
// eslint-disable-next-line
|
|
|
|
// eslint-disable-next-line
|
|
|
|
//import imageBmp from "@/assets/black.bmp"
|
|
|
|
//import imageBmp from "@/assets/black.bmp"
|
|
|
@ -152,14 +134,21 @@
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
name: 'App',
|
|
|
|
name: 'App',
|
|
|
|
data: () => ({
|
|
|
|
data: () => ({
|
|
|
|
isLoading: false,
|
|
|
|
isLoading: true,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
stats: null,
|
|
|
|
|
|
|
|
|
|
|
|
drawer: true,
|
|
|
|
drawer: true,
|
|
|
|
items: [
|
|
|
|
items: [
|
|
|
|
{title: 'Dashboard', icon: '$dashboard', to: '/'},
|
|
|
|
{title: 'Dashboard', icon: '$dashboard', to: '/'},
|
|
|
|
{title: 'Sandbox', icon: '$sandbox', to: '/sandbox'},
|
|
|
|
//{title: 'Sandbox', icon: '$sandbox', to: '/sandbox'},
|
|
|
|
{title: 'Wifi', icon: '$wifi', to: '/wifi'},
|
|
|
|
{title: 'Wifi', icon: '$wifi', to: '/wifi'},
|
|
|
|
{title: 'Settings', icon: '$settings', to: '/settings'},
|
|
|
|
{title: 'Settings', icon: '$settings', to: '/settings'},
|
|
|
|
],
|
|
|
|
],
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
playlistRemaining: 0,
|
|
|
|
|
|
|
|
playlistTimerProgress: 30,
|
|
|
|
|
|
|
|
device_screen_src: null
|
|
|
|
}),
|
|
|
|
}),
|
|
|
|
created () {
|
|
|
|
created () {
|
|
|
|
this.$vuetify.icons.values.device = {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/cast/baseline.svg')}
|
|
|
|
this.$vuetify.icons.values.device = {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/cast/baseline.svg')}
|
|
|
@ -167,7 +156,51 @@
|
|
|
|
this.$vuetify.icons.values.settings = {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/settings/baseline.svg')}
|
|
|
|
this.$vuetify.icons.values.settings = {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/settings/baseline.svg')}
|
|
|
|
this.$vuetify.icons.values.wifi = {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/wifi/baseline.svg')}
|
|
|
|
this.$vuetify.icons.values.wifi = {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/wifi/baseline.svg')}
|
|
|
|
this.$vuetify.icons.values.sandbox = {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/gesture/baseline.svg')} // gesture, brush, palette,
|
|
|
|
this.$vuetify.icons.values.sandbox = {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/gesture/baseline.svg')} // gesture, brush, palette,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.reloadStats(() => {
|
|
|
|
|
|
|
|
this.isLoading = false
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
watch: {
|
|
|
|
|
|
|
|
playlistRemaining: {
|
|
|
|
|
|
|
|
handler(value) {
|
|
|
|
|
|
|
|
if (value > 0) {
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
|
|
this.playlistRemaining--
|
|
|
|
|
|
|
|
}, 1000)
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
this.reloadStats()
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
computed: {
|
|
|
|
|
|
|
|
fsUsagePercent () {
|
|
|
|
|
|
|
|
let fs = this.stats.device.fs
|
|
|
|
|
|
|
|
return parseInt(100 / fs.total * fs.used)
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
playlistProgress () {
|
|
|
|
|
|
|
|
return parseInt(100 / 60 * this.stats.playlist.remaining)
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
reloadStats (cb) {
|
|
|
|
|
|
|
|
console.log("reloadStats")
|
|
|
|
|
|
|
|
this.device_screen_src = "/fs/screen.bmp?" + new Date()
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
apiDevice.getStats(stats => {
|
|
|
|
|
|
|
|
this.stats = stats
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.playlistRemaining = stats.playlist.remaining
|
|
|
|
|
|
|
|
this.playlistTimerProgress = parseInt(100 / 60 * stats.playlist.remaining)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (cb) {
|
|
|
|
|
|
|
|
cb()
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|