112 lines
2.5 KiB
Vue
112 lines
2.5 KiB
Vue
<template>
|
|
<div class="rss-news">
|
|
<div class="article" v-if="currentArticle">
|
|
<div class="source" v-text="currentArticle.source"></div>
|
|
<div class="title" v-text="currentArticle.title"></div>
|
|
<div class="published" v-text="new Date(currentArticle.published).toDateString() + ', ' + new Date(currentArticle.published).toTimeString().substring(0,5)"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Utils from "@/Utils";
|
|
|
|
/**
|
|
* In order to use this widget you need to configure the `backend.http.poll` backend to
|
|
* poll a list of RSS sources.
|
|
*/
|
|
export default {
|
|
name: "RssNews",
|
|
mixins: [Utils],
|
|
props: {
|
|
// Database engine string pointing to the source of the RSS feeds.
|
|
// If not otherwise configured, you should set this to
|
|
// `sqlite:///<HOME>/.local/share/platypush/feeds/rss.db`.
|
|
db: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
|
|
// Maximum number of items to be shown in a cycle.
|
|
limit: {
|
|
type: Number,
|
|
required: false,
|
|
default: 25,
|
|
},
|
|
|
|
// How long an entry should be displayed before moving to the next one.
|
|
refreshSeconds: {
|
|
type: Number,
|
|
required: false,
|
|
default: 15,
|
|
},
|
|
},
|
|
|
|
data: function() {
|
|
return {
|
|
articles: [],
|
|
queue: [],
|
|
currentArticle: undefined,
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
refresh: async function() {
|
|
if (!this.queue.length) {
|
|
this.articles = await this.request('db.select', {
|
|
engine: this.db,
|
|
query: `
|
|
select s.title as source, e.title, e.summary,
|
|
strftime('%Y-%m-%dT%H:%M:%fZ', e.published) as published
|
|
from FeedEntry e join FeedSource s
|
|
on e.source_id = s.id order by e.published desc limit ${this.limit}`,
|
|
})
|
|
|
|
this.queue = [...this.articles]
|
|
}
|
|
|
|
if (!this.queue.length)
|
|
return
|
|
|
|
this.currentArticle = this.queue.pop()
|
|
},
|
|
},
|
|
|
|
mounted: function() {
|
|
this.refresh()
|
|
setInterval(this.refresh, parseInt((this.refreshSeconds*1000).toFixed(0)))
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.rss-news {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.article {
|
|
width: 90%;
|
|
padding: 0 2em;
|
|
|
|
.source {
|
|
font-size: 1.7em;
|
|
font-weight: bold;
|
|
margin-bottom: .5em;
|
|
}
|
|
|
|
.title {
|
|
font-size: 1.8em;
|
|
font-weight: normal;
|
|
margin-bottom: .5em;
|
|
}
|
|
|
|
.published {
|
|
text-align: right;
|
|
font-size: 1.1em;
|
|
}
|
|
}
|
|
}
|
|
</style>
|