Added support for rows on dashboard and music widget

This commit is contained in:
Fabio Manganiello 2020-11-23 00:44:31 +01:00
parent ecf6a844dd
commit 243e56b194
6 changed files with 531 additions and 33 deletions

View file

@ -58,7 +58,10 @@ export default {
handlers.push(...this.handlers[event.args.type])
}
for (const [handler] of handlers) {
for (let handler of handlers) {
if (handler instanceof Array)
handler = handler[0]
handler(event.args)
}
},

View file

@ -20,4 +20,16 @@ $notification-error-icon-color: #8b0000 !default;
$loading-bg: #909090;
//// Dashboard
$dashboard-bg: url('/img/dashboard-bg-light.jpg')
$dashboard-bg: url('/img/dashboard-bg-light.jpg');
//// Borders
$default-border: 1px solid #e1e4e8 !default;
$default-border-2: 1px solid #dddddd !default;
$default-border-3: 1px solid #cccccc !default;
//// Hover
$default-hover-fg: #35b870 !default;
$default-hover-fg-2: #38cf80 !default;
//// General-purpose colors
$selected-bg: #c8ffd0 !default;

View file

@ -1,10 +1,12 @@
<template>
<div id="dashboard" class="columns is-mobile" :class="{blurred: loading}" :style="style">
<keep-alive v-for="(widget, i) in widgets" :key="i">
<Widget :style="widget.style">
<component :is="widget.component" v-bind="widget.props" />
</Widget>
</keep-alive>
<div id="dashboard" class="columns is-mobile" :class="classes" :style="style">
<Row v-for="(row, i) in rows" :key="i" :class="row.class" :style="row.style">
<keep-alive v-for="(widget, j) in row.widgets" :key="j">
<Widget :style="widget.style" :class="widget.class">
<component :is="widget.component" v-bind="widget.props" />
</Widget>
</keep-alive>
</Row>
</div>
<Loading v-if="loading" />
@ -14,12 +16,13 @@
import { defineAsyncComponent } from 'vue'
import Utils from '@/Utils'
import Loading from "@/components/Loading";
import Row from "@/widgets/Row";
import Widget from "@/widgets/Widget";
export default {
name: 'Dashboard',
mixins: [Utils],
components: {Widget, Loading},
components: {Widget, Loading, Row},
props: {
// Refresh interval in seconds.
refreshSeconds: {
@ -31,38 +34,56 @@ export default {
data() {
return {
widgets: [],
rows: [],
loading: false,
style: undefined,
class: undefined,
}
},
computed: {
classes() {
return this.class
},
},
methods: {
parseTemplate(name, tmpl) {
const node = new DOMParser().parseFromString(tmpl, 'text/xml').childNodes[0]
const self = this;
this.style = node.attributes.style ? node.attributes.style.nodeValue : undefined;
const self = this
this.style = node.attributes.style ? node.attributes.style.nodeValue : undefined
this.class = node.attributes.class ? node.attributes.class.nodeValue : undefined
[...node.children].forEach((el) => {
const component = defineAsyncComponent(
() => import(`@/widgets/${el.nodeName}/Index`)
)
this.rows = [...node.getElementsByTagName('Row')].map((row) => {
return {
style: row.attributes.style ? row.attributes.style.nodeValue : undefined,
class: row.attributes.class ? row.attributes.class.nodeValue : undefined,
widgets: [...row.children].map((el) => {
const component = defineAsyncComponent(
() => import(`@/widgets/${el.nodeName}/Index`)
)
const style = el.attributes.style ? el.attributes.style.nodeValue : undefined;
const attrs = [...el.attributes].reduce((obj, node) => {
if (node.nodeName !== 'style') {
obj[node.nodeName] = node.nodeValue
}
const style = el.attributes.style ? el.attributes.style.nodeValue : undefined
const classes = el.attributes.class ? el.attributes.class.nodeValue : undefined
const attrs = [...el.attributes].reduce((obj, node) => {
if (node.nodeName !== 'style') {
obj[node.nodeName] = node.nodeValue
}
return obj
}, {})
return obj
}, {})
self.$options.components[el.nodeName] = component
self.widgets.push({
component: component,
style: style,
props: attrs || {},
})
const widget = {
component: component,
style: style,
class: classes,
props: attrs || {},
}
self.$options.components[el.nodeName] = component
return widget
})
}
})
this.loading = false
@ -86,7 +107,7 @@ export default {
this.refreshDashboard()
if (this.refreshSeconds) {
const self = this
setTimeout(() => {
setInterval(() => {
self.refreshDashboard()
}, parseInt((this.refreshSeconds*1000).toFixed(0)))
}

View file

@ -0,0 +1,398 @@
<template>
<Loading v-if="loading" />
<div class="music" v-else>
<div class="track">
<div class="unknown" v-if="!status">[Unknown state]</div>
<div class="no-track" v-if="status && status.state === 'stop'">No media is being played</div>
<div class="artist" v-if="status && status.state !== 'stop' && track && track.artist" v-text="track.artist"></div>
<div class="title" v-if="status && status.state !== 'stop' && track && track.title" v-text="track.title"></div>
</div>
<div class="time" v-if="status && status.state === 'play'">
<div class="row">
<div class="progress-bar">
<div class="elapsed" :style="{width: track.time ? 100*(status.elapsed/track.time) + '%' : '100%'}"></div>
<div class="total"></div>
</div>
</div>
<div class="row">
<div class="col-6 time-elapsed" v-text="convertTime(status.elapsed)"></div>
<div class="col-6 time-total" v-if="track.time" v-text="convertTime(track.time)"></div>
</div>
</div>
<div class="playback-status" v-if="status">
<div class="status-property col-4">
<i class="fa fa-volume-up"></i>&nbsp; <span v-text="status.volume + '%'"></span>
</div>
<div class="status-property col-2">
<i class="fas fa-random" :class="{active: status.random}"></i>
</div>
<div class="status-property col-2">
<i class="fas fa-redo" :class="{active: status.repeat}"></i>
</div>
<div class="status-property col-2">
<i class="fa fa-bullseye" :class="{active: status.single}"></i>
</div>
<div class="status-property col-2">
<i class="fa fa-utensils" :class="{active: status.consume}"></i>
</div>
</div>
</div>
</template>
<script>
import Utils from "@/Utils";
import Loading from "@/components/Loading";
export default {
name: "Music",
components: {Loading},
mixins: [Utils],
props: {
// Refresh interval in seconds.
refreshSeconds: {
type: Number,
required: false,
default: 60,
},
},
data() {
return {
track: undefined,
status: undefined,
timer: undefined,
loading: false,
syncTime: {
timestamp: null,
elapsed: null,
},
}
},
methods: {
async refresh() {
this.loading = true
try {
let status = await this.request('music.mpd.status')
let track = await this.request('music.mpd.currentsong')
this._parseStatus(status)
this._parseTrack(track)
if (status.state === 'play' && !this.timer)
this.startTimer()
else if (status.state !== 'play' && this.timer)
this.stopTimer()
} finally {
this.loading = false
}
},
convertTime(time) {
time = parseFloat(time) // Normalize strings
const t = {}
t.h = parseInt(time/3600)
t.m = parseInt(time/60 - t.h*60)
t.s = parseInt(time - (t.h*3600 + t.m*60))
for (const attr of ['m','s']) {
t[attr] = '' + t[attr]
}
for (const attr of ['m','s']) {
if (parseInt(t[attr]) < 10) {
t[attr] = '0' + t[attr]
}
}
const ret = []
if (parseInt(t.h)) {
ret.push(t.h)
}
ret.push(t.m, t.s)
return ret.join(':')
},
async _parseStatus(status) {
if (!status || status.length === 0)
status = await this.request('music.mpd.status')
if (!this.status)
this.status = {}
for (const [attr, value] of Object.entries(status)) {
if (['consume','random','repeat','single','bitrate'].indexOf(attr) >= 0) {
this.status[attr] = !!parseInt(value)
} else if (['nextsong','nextsongid','playlist','playlistlength',
'volume','xfade','song','songid'].indexOf(attr) >= 0) {
this.status[attr] = parseInt(value)
} else if (['elapsed'].indexOf(attr) >= 0) {
this.status[attr] = parseFloat(value)
} else {
this.status[attr] = value
}
}
},
async _parseTrack(track) {
if (!track || track.length === 0) {
track = await this.request('music.mpd.currentsong')
}
if (!this.track)
this.track = {}
for (const [attr, value] of Object.entries(track)) {
if (['id','pos','time','track','disc'].indexOf(attr) >= 0) {
this.track[attr] = parseInt(value)
} else {
this.track[attr] = value
}
}
},
showNewTrackNotification() {
this.notify({
html: '<b>' + (this.track.artist || '[No Artist]') + '</b><br>' +
(this.track.title || '[No Title]'),
image: {
icon: 'play',
}
})
},
async onNewPlayingTrack(event) {
let previousTrack = undefined
if (this.track) {
previousTrack = {
file: this.track.file,
artist: this.track.artist,
title: this.track.title,
}
}
this.status.state = 'play'
this.status.elapsed = 0
this.track = {}
this._parseTrack(event.track)
let status = event.status ? event.status : await this.request('music.mpd.status')
this._parseStatus(status)
this.startTimer()
if (!previousTrack || (this.track.file !== previousTrack.file
|| this.track.artist !== previousTrack.artist
|| this.track.title !== previousTrack.title)) {
this.showNewTrackNotification()
}
},
onMusicStop(event) {
this.status.state = 'stop'
this.status.elapsed = 0
this._parseStatus(event.status)
this._parseTrack(event.track)
this.stopTimer()
},
onMusicPlay(event) {
this.status.state = 'play'
this._parseStatus(event.status)
this._parseTrack(event.track)
this.startTimer()
},
onMusicPause(event) {
this.status.state = 'pause'
this._parseStatus(event.status)
this._parseTrack(event.track)
this.syncTime.timestamp = new Date()
this.syncTime.elapsed = this.status.elapsed
},
onSeekChange(event) {
if (event.position != null)
this.status.elapsed = parseFloat(event.position)
if (event.status)
this._parseStatus(event.status)
if (event.track)
this._parseTrack(event.track)
this.syncTime.timestamp = new Date()
this.syncTime.elapsed = this.status.elapsed
},
onVolumeChange(event) {
if (event.volume != null)
this.status.volume = parseFloat(event.volume)
if (event.status)
this._parseStatus(event.status)
if (event.track)
this._parseTrack(event.track)
},
onRepeatChange(event) {
this.status.repeat = event.state
},
onRandomChange(event) {
this.status.random = event.state
},
onConsumeChange(event) {
this.status.consume = event.state
},
onSingleChange(event) {
this.status.single = event.state
},
startTimer() {
if (this.timer != null) {
this.stopTimer()
}
this.syncTime.timestamp = new Date()
this.syncTime.elapsed = this.status.elapsed
this.timer = setInterval(this.timerFunc, 1000)
},
stopTimer() {
if (this.timer == null) {
clearInterval(this.timer)
this.timer = null
}
},
timerFunc() {
if (this.status.state !== 'play' || this.status.elapsed == null) {
return
}
this.status.elapsed = this.syncTime.elapsed +
((new Date()).getTime()/1000) - (this.syncTime.timestamp.getTime()/1000)
},
},
mounted() {
this.refresh()
if (this.refreshSeconds) {
setInterval(this.refresh, parseInt((this.refreshSeconds*1000).toFixed(0)))
}
this.subscribe(this.onNewPlayingTrack, 'platypush.message.event.music.NewPlayingTrackEvent')
this.subscribe(this.onMusicStop, 'platypush.message.event.music.MusicStopEvent')
this.subscribe(this.onMusicPlay, 'platypush.message.event.music.MusicPlayEvent')
this.subscribe(this.onMusicPause, 'platypush.message.event.music.MusicPauseEvent')
this.subscribe(this.onSeekChange, 'platypush.message.event.music.SeekChangeEvent')
this.subscribe(this.onVolumeChange, 'platypush.message.event.music.VolumeChangeEvent')
this.subscribe(this.onRepeatChange, 'platypush.message.event.music.PlaybackRepeatModeChangeEvent')
this.subscribe(this.onRandomChange, 'platypush.message.event.music.PlaybackRandomModeChangeEvent')
this.subscribe(this.onConsumeChange, 'platypush.message.event.music.PlaybackConsumeModeChangeEvent')
this.subscribe(this.onSingleChange, 'platypush.message.event.music.PlaybackSingleModeChangeEvent')
},
}
</script>
<style lang="scss" scoped>
$progress-bar-bg: #ddd;
$playback-status-color: #757f70;
.music {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
.track {
text-align: center;
.unknown,
.no-track {
font-size: 2em;
}
.artist {
font-size: 1.9em;
font-weight: bold;
margin-bottom: .25em;
}
.title {
font-size: 1.8em;
font-weight: normal;
}
}
.time {
width: 100%;
margin-top: 1em;
font-size: 1.2em;
.row {
padding: 0 .5em;
}
.time-total {
text-align: right;
}
.progress-bar {
width: 100%;
height: 1em;
position: relative;
margin-bottom: .75em;
.total {
position: absolute;
width: 100%;
height: 100%;
top: 0;
background: $progress-bar-bg;
border-radius: 0.5em;
}
.elapsed {
position: absolute;
width: 100%;
height: 100%;
top: 0;
background: $selected-bg;
border-radius: 0.5em;
z-index: 1;
}
}
}
.playback-status {
position: absolute;
bottom: 0;
border-top: $default-border-2;
color: $playback-status-color;
width: 100%;
height: 2em;
.status-property {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.active {
color: $default-hover-fg;
}
}
}
</style>

View file

@ -0,0 +1,38 @@
<template>
<div class="row" :class="classes" :style="style">
<slot />
</div>
</template>
<script>
export default {
name: "Row",
props: {
// Class override
class: {
type: String,
required: false,
default: '',
},
// Style override
style: {
type: String,
required: false,
default: '',
},
},
computed: {
classes() {
return this.class
},
}
}
</script>
<style scoped>
.row {
width: 100%;
}
</style>

View file

@ -1,5 +1,5 @@
<template>
<div :style="style" class="widget column is-full-mobile is-half-tablet is-one-quarter-desktop">
<div :style="style" :class="classes">
<slot />
</div>
</template>
@ -7,7 +7,33 @@
<script>
export default {
name: "Widget",
props: ['style'],
props: {
// Widget style override
style: {
type: String,
required: false,
default: '',
},
// Widget class override
class: {
type: String,
required: false,
default: '',
},
},
computed: {
classes() {
let classes = ['widget', 'column']
if (this.class && this.class.length)
classes = classes.concat(this.class.split(' '))
else
classes = classes.concat('col-3')
return classes
},
},
}
</script>
@ -15,7 +41,7 @@ export default {
.widget {
background: $background-color;
border-radius: 5px;
margin: 0 1em 1em 0;
margin-bottom: 1em;
display: flex;
justify-content: center;
align-content: center;