Added support for rows on dashboard and music widget
This commit is contained in:
Fabio Manganiello
parent
ecf6a844dd
commit
243e56b194
6 changed files with 531 additions and 33 deletions
|
|
@ -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)
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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)))
|
||||
}
|
||||
|
|
|
|||
398
platypush/backend/http/webapp/src/widgets/Music/Index.vue
Normal file
398
platypush/backend/http/webapp/src/widgets/Music/Index.vue
Normal 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> <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>
|
||||
38
platypush/backend/http/webapp/src/widgets/Row.vue
Normal file
38
platypush/backend/http/webapp/src/widgets/Row.vue
Normal 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>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue