From 88c5bc16f542b4e9368e5eaf7e80c1f1025fd957 Mon Sep 17 00:00:00 2001 From: Fabio Manganiello Date: Sat, 5 May 2018 23:59:43 +0200 Subject: [PATCH] - Added rss-news dashboard widget - Added summary field to the RSS entry - Added support for custom dashboard backgrounds - UX fixes + font change --- .../backend/http/request/rss/__init__.py | 2 + .../backend/http/static/css/dashboard.css | 10 ++- .../static/css/widgets/date-time-weather.css | 3 +- .../backend/http/static/css/widgets/music.css | 2 +- .../http/static/css/widgets/rss-news.css | 28 +++++++ platypush/backend/http/static/js/dashboard.js | 7 ++ .../http/static/js/widgets/calendar.js | 2 +- .../http/static/js/widgets/rss-news.js | 77 +++++++++++++++++++ .../backend/http/templates/dashboard.html | 2 + .../http/templates/widgets/rss-news.html | 5 ++ 10 files changed, 133 insertions(+), 5 deletions(-) create mode 100644 platypush/backend/http/static/css/widgets/rss-news.css create mode 100644 platypush/backend/http/static/js/widgets/rss-news.js create mode 100644 platypush/backend/http/templates/widgets/rss-news.html diff --git a/platypush/backend/http/request/rss/__init__.py b/platypush/backend/http/request/rss/__init__.py index 3a4f21492..a6bcdf112 100644 --- a/platypush/backend/http/request/rss/__init__.py +++ b/platypush/backend/http/request/rss/__init__.py @@ -129,6 +129,7 @@ class RssUpdates(HttpRequest): 'entry_id': entry.id, 'title': entry.title, 'link': entry.link, + 'summary': entry.summary, 'content': entry.content, 'source_id': source_record.id, 'published': entry_timestamp, @@ -198,6 +199,7 @@ class FeedEntry(Base): source_id = Column(Integer, ForeignKey('FeedSource.id'), nullable=False) title = Column(String) link = Column(String) + summary = Column(String) content = Column(String) published = Column(DateTime) diff --git a/platypush/backend/http/static/css/dashboard.css b/platypush/backend/http/static/css/dashboard.css index 1b92afdfa..6b5250e21 100644 --- a/platypush/backend/http/static/css/dashboard.css +++ b/platypush/backend/http/static/css/dashboard.css @@ -1,6 +1,12 @@ +html { + min-height: 100%; +} + body { 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 { @@ -9,6 +15,6 @@ body { border-radius: 5px; height: 22.5em; 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); } diff --git a/platypush/backend/http/static/css/widgets/date-time-weather.css b/platypush/backend/http/static/css/widgets/date-time-weather.css index 9853396dc..3b0112007 100644 --- a/platypush/backend/http/static/css/widgets/date-time-weather.css +++ b/platypush/backend/http/static/css/widgets/date-time-weather.css @@ -8,7 +8,8 @@ h1.temperature { font-size: 45px; - margin: 8rem; + margin: 4rem 2rem; + font-weight: bold; } .widget.date-time-weather * > .time { diff --git a/platypush/backend/http/static/css/widgets/music.css b/platypush/backend/http/static/css/widgets/music.css index 04f789a6c..bad328530 100644 --- a/platypush/backend/http/static/css/widgets/music.css +++ b/platypush/backend/http/static/css/widgets/music.css @@ -48,6 +48,6 @@ } .no-track-info { - font-size: 20px; + font-size: 25px; } diff --git a/platypush/backend/http/static/css/widgets/rss-news.css b/platypush/backend/http/static/css/widgets/rss-news.css new file mode 100644 index 000000000..6c5e1afcd --- /dev/null +++ b/platypush/backend/http/static/css/widgets/rss-news.css @@ -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; + } + diff --git a/platypush/backend/http/static/js/dashboard.js b/platypush/backend/http/static/js/dashboard.js index 0c44f4dbb..2270a4c5b 100644 --- a/platypush/backend/http/static/js/dashboard.js +++ b/platypush/backend/http/static/js/dashboard.js @@ -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() { window.registerEventListener(onEvent); }; var init = function() { + initDashboard(); initEvents(); }; diff --git a/platypush/backend/http/static/js/widgets/calendar.js b/platypush/backend/http/static/js/widgets/calendar.js index e4bfba1c9..26926f543 100644 --- a/platypush/backend/http/static/js/widgets/calendar.js +++ b/platypush/backend/http/static/js/widgets/calendar.js @@ -24,7 +24,7 @@ $(document).ready(function() { type: 'request', action: 'google.calendar.get_upcoming_events', args: { - max_results: 10, + max_results: 9, } }, diff --git a/platypush/backend/http/static/js/widgets/rss-news.js b/platypush/backend/http/static/js/widgets/rss-news.js new file mode 100644 index 000000000..b12374cbf --- /dev/null +++ b/platypush/backend/http/static/js/widgets/rss-news.js @@ -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 = $('
').addClass('article'); + var $source = $('
').addClass('source').text(nextArticle.source); + var $title = $('
').addClass('title').text(nextArticle.title); + var $publishTime = $('
').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(); +}); + diff --git a/platypush/backend/http/templates/dashboard.html b/platypush/backend/http/templates/dashboard.html index 0415ee5a7..ff77e030a 100644 --- a/platypush/backend/http/templates/dashboard.html +++ b/platypush/backend/http/templates/dashboard.html @@ -2,6 +2,7 @@ Platypush Dashboard + @@ -25,6 +26,7 @@ window.token = undefined; {% endif %} + window.config = {{ config | safe }}; window.widgets = {{ config['widgets'] | safe }}; diff --git a/platypush/backend/http/templates/widgets/rss-news.html b/platypush/backend/http/templates/widgets/rss-news.html new file mode 100644 index 000000000..adef96037 --- /dev/null +++ b/platypush/backend/http/templates/widgets/rss-news.html @@ -0,0 +1,5 @@ + + + +
+