- Added rss-news dashboard widget

- Added summary field to the RSS entry
- Added support for custom dashboard backgrounds
- UX fixes + font change
This commit is contained in:
Fabio Manganiello 2018-05-05 23:59:43 +02:00
parent ac958f98da
commit 88c5bc16f5
10 changed files with 133 additions and 5 deletions

View file

@ -129,6 +129,7 @@ class RssUpdates(HttpRequest):
'entry_id': entry.id, 'entry_id': entry.id,
'title': entry.title, 'title': entry.title,
'link': entry.link, 'link': entry.link,
'summary': entry.summary,
'content': entry.content, 'content': entry.content,
'source_id': source_record.id, 'source_id': source_record.id,
'published': entry_timestamp, 'published': entry_timestamp,
@ -198,6 +199,7 @@ class FeedEntry(Base):
source_id = Column(Integer, ForeignKey('FeedSource.id'), nullable=False) source_id = Column(Integer, ForeignKey('FeedSource.id'), nullable=False)
title = Column(String) title = Column(String)
link = Column(String) link = Column(String)
summary = Column(String)
content = Column(String) content = Column(String)
published = Column(DateTime) published = Column(DateTime)

View file

@ -1,6 +1,12 @@
html {
min-height: 100%;
}
body { body {
background: rgba(240,240,245,1.0); background: rgba(240,240,245,1.0);
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; background-size: 100% 100%;
background-repeat: no-repeat;
font-family: Lato;
} }
.widget { .widget {
@ -9,6 +15,6 @@ body {
border-radius: 5px; border-radius: 5px;
height: 22.5em; height: 22.5em;
overflow: hidden; overflow: hidden;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08); box-shadow: 0 3px 3px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
} }

View file

@ -8,7 +8,8 @@
h1.temperature { h1.temperature {
font-size: 45px; font-size: 45px;
margin: 8rem; margin: 4rem 2rem;
font-weight: bold;
} }
.widget.date-time-weather * > .time { .widget.date-time-weather * > .time {

View file

@ -48,6 +48,6 @@
} }
.no-track-info { .no-track-info {
font-size: 20px; font-size: 25px;
} }

View file

@ -0,0 +1,28 @@
.news-container {
position: relative;
height: 100%;
}
.news-container > .article {
width: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.news-container > .article > .source {
font-weight: bold;
margin-bottom: 1rem;
font-size: 1.7em;
}
.news-container > .article > .title {
font-size: 1.5em;
}
.news-container > .article > .publish-time {
margin-top: 1rem;
float: right;
}

View file

@ -10,11 +10,18 @@ $(document).ready(function() {
} }
}; };
var initDashboard = function() {
if ('background_image' in window.config) {
$('body').css('background-image', 'url(' + window.config.background_image + ')');
}
};
var initEvents = function() { var initEvents = function() {
window.registerEventListener(onEvent); window.registerEventListener(onEvent);
}; };
var init = function() { var init = function() {
initDashboard();
initEvents(); initEvents();
}; };

View file

@ -24,7 +24,7 @@ $(document).ready(function() {
type: 'request', type: 'request',
action: 'google.calendar.get_upcoming_events', action: 'google.calendar.get_upcoming_events',
args: { args: {
max_results: 10, max_results: 9,
} }
}, },

View file

@ -0,0 +1,77 @@
$(document).ready(function() {
var $newsElement = $('.rss-news').find('.news-container'),
config = window.widgets['rss-news'],
db = config.db,
news = [],
cur_article_index = -1;
var getNews = function() {
execute(
{
type: 'request',
action: 'db.select',
args: {
engine: 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 10"
}
},
onSuccess = function(response) {
if (!response.response.output) {
return;
}
var firstRun = news.length === 0;
news = response.response.output;
cur_article_index = -1;
if (firstRun) {
refreshNews();
}
}
);
};
var refreshNews = function() {
if (news.length === 0) {
return;
}
var nextArticle = news[++cur_article_index % news.length];
var dt = new Date(nextArticle.published);
var $article = $('<div></div>').addClass('article');
var $source = $('<div></div>').addClass('source').text(nextArticle.source);
var $title = $('<div></div>').addClass('title').text(nextArticle.title);
var $publishTime = $('<div></div>').addClass('publish-time')
.text(dt.toDateString() + ', ' + dt.toTimeString().substring(0, 5));
$source.appendTo($article);
$title.appendTo($article);
$publishTime.appendTo($article);
if ($newsElement.find('.article').length) {
$newsElement.find('.article').fadeOut('slow', function() {
$(this).remove();
$article.hide().appendTo($newsElement).fadeIn();
});
} else {
$article.hide().appendTo($newsElement).fadeIn();
}
};
var initWidget = function() {
getNews();
setInterval(getNews, 600000);
setInterval(refreshNews, 15000);
};
var init = function() {
initWidget();
};
init();
});

View file

@ -2,6 +2,7 @@
<head> <head>
<title>Platypush Dashboard</title> <title>Platypush Dashboard</title>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/skeleton.css') }}"></script> <link rel="stylesheet" href="{{ url_for('static', filename='css/skeleton.css') }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/skeleton-tabs.css') }}"></script> <link rel="stylesheet" href="{{ url_for('static', filename='css/skeleton-tabs.css') }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/normalize.css') }}"></script> <link rel="stylesheet" href="{{ url_for('static', filename='css/normalize.css') }}"></script>
@ -25,6 +26,7 @@
window.token = undefined; window.token = undefined;
{% endif %} {% endif %}
window.config = {{ config | safe }};
window.widgets = {{ config['widgets'] | safe }}; window.widgets = {{ config['widgets'] | safe }};
</script> </script>
</head> </head>

View file

@ -0,0 +1,5 @@
<script type="text/javascript" src="{{ url_for('static', filename='js/widgets/rss-news.js') }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/widgets/rss-news.css') }}"></script>
<div class="news-container"></div>