diff options
-rw-r--r-- | www/js/todo.js | 126 | ||||
-rw-r--r-- | www/js/utils.js | 16 | ||||
-rw-r--r-- | www/styles/todo.css | 69 | ||||
-rw-r--r-- | www/todo.html | 33 |
4 files changed, 243 insertions, 1 deletions
diff --git a/www/js/todo.js b/www/js/todo.js new file mode 100644 index 0000000..259c123 --- /dev/null +++ b/www/js/todo.js @@ -0,0 +1,126 @@ +/* + * rhrdweb + * + * Copyright (C) 2016 Christian Pointner <equinox@helsinki.at> + * + * This file is part of rhrdweb. + * + * rhrdweb is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * any later version. + * + * rhrdweb is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with rhrdweb. If not, see <http://www.gnu.org/licenses/>. + */ + +'use strict'; + +var rh = rh || {}; + + + +/***************** models *****************/ + +var shows = null; + +rh.ShowList = function(d) { + this.$this = $(this); + this.shows = []; + if((Object.prototype.toString.call(d) !== '[object Date]') || (d.toString() === 'Invalid Date')) { + this.current = new Date(); + } else { + this.current = d; + } +}; + +rh.ShowList.prototype.fetch = function() { + var self = this; + + var d = this.current + var dstr = d.getFullYear() + '-' + Number(d.getMonth() + 1).pad(2) + '-' + Number(d.getDate()).pad(2); + $.getJSON( "/rh-bin/schedules.json?DAYS=1&START=" + dstr, function(data) { + if(data.status == "OK") { + self.shows = []; + $(data.shows).each(function(index, showdata) { + var show = new rh.Show(showdata); + self.shows.push(show); + }); + self.$this.trigger('update'); + } + }); +}; + +rh.Show = function(show) { + this.id = show.id; + this.title = show.title; + this.start = new Date(show.start); + this.len = show.len; +}; + + + +/***************** views *****************/ + +var showListView = null; + +rh.ShowListView = function(model) { + this.model = model; + + this.showViews = []; + + var self = this; + $(this.model).on('update', function() { + self.render(); + }); + this.model.fetch(); +}; + +rh.ShowListView.prototype.render = function() { + var hdr = $('#header'); + $('div.date', hdr).text(format_date(this.model.current)); + + var list = $('#shows'); + $('div.show', list).remove(); + this.showViews = []; + + for (var i = 0; i < this.model.shows.length; i++) { + var showView = new rh.ShowView(this.model.shows[i], this); + this.showViews.push(showView); + showView.render(); + list.append(showView.$el); + } +}; + + +rh.ShowView = function(model, listView) { + this.model = model; + this.listView = listView; + + this.$el = $('<div>'); +}; + +rh.ShowView.prototype.render = function() { + var start = $('<span>').addClass('show-start').text(format_time(this.model.start)); + var len = $('<span>').addClass('show-len').text("(" + format_durationms(this.model.len) + ")"); + + var showlink = $('<a>').attr('href', "https://import.helsinki.at/shows/" + this.model.id) + .attr('target', "import").text(this.model.title); + var title = $('<span>').addClass('show-title').append(showlink); + + this.$el.empty().addClass('show').append(start).append(title).append(len); +} + + + +/***************** controller *****************/ + +function todo_init() { + shows = new rh.ShowList(); + showListView = new rh.ShowListView(shows); +} diff --git a/www/js/utils.js b/www/js/utils.js index c09628c..ad64c17 100644 --- a/www/js/utils.js +++ b/www/js/utils.js @@ -54,6 +54,20 @@ monthname[11] = 'Dezember'; var monthname_short = new Array('Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'); +function format_date(d) { + if(Object.prototype.toString.call(d) !== '[object Date]') { + return '-'; + } + if (d.toString() === 'Invalid Date') { + return '-'; + } + var datestr = weekday_short[d.getDay()]; + datestr += ' ' + Number(d.getDate()).pad(2); + datestr += '.' + Number(d.getMonth() + 1).pad(2); + datestr += '.' + d.getFullYear(); + return datestr; +} + function format_time(d) { if(Object.prototype.toString.call(d) !== '[object Date]') { return '-'; @@ -84,7 +98,7 @@ function format_datetime(d) { return datetimestr; } -function msToTimeString(time) { +function format_durationms(time) { if(time == '-') return time; var h = Number(Math.floor(time / 3600000)); diff --git a/www/styles/todo.css b/www/styles/todo.css new file mode 100644 index 0000000..f31acee --- /dev/null +++ b/www/styles/todo.css @@ -0,0 +1,69 @@ +/* + * rhrdweb + * + * Copyright (C) 2016 Christian Pointner <equinox@helsinki.at> + * + * This file is part of rhrdweb. + * + * rhrdweb is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * any later version. + * + * rhrdweb is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with rhrdweb. If not, see <http://www.gnu.org/licenses/>. + */ + +body { + font-family: "Droid Sans", Helvetica, Arial, Sans; + margin: 0; + padding: 0; + font-size: 30px; +} + + +#header { + background-color: #36373B; + width: 100%; + color: white; +} + +#header div.date { + font-size: 1.2em; + font-weight: bold; + padding: 0.3em 1em 0.2em 5em; +} + + +#shows div.show { + padding: 0.05em 0; +} + +#shows div:nth-child(odd) { + background-color: white; +} + +#shows div:nth-child(even) { + background-color: #E0E0E0; +} + +div.show span { + font-weight: bold; +} + +div.show span.show-start { + font-size: 0.75em; + margin-left: 5em; + margin-right: 1em; +} + +div.show span.show-len { + font-size: 0.75em; + margin-left: 0.2em; + margin-right: 1em; +}
\ No newline at end of file diff --git a/www/todo.html b/www/todo.html new file mode 100644 index 0000000..8479c98 --- /dev/null +++ b/www/todo.html @@ -0,0 +1,33 @@ +<!DOCTYPE HTML> +<html> + <head> + <title>Coming Up next on Radio Helsinki</title> + <meta charset="utf-8"> + <meta name="author" content="Christian Pointner <equinox@helsinki.at>"> + + <link rel="shortcut icon" href="/img/favicon.ico" /> + <link href="/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet"> + <link href="/styles/common.css" rel="stylesheet"> + <link href="/styles/todo.css" rel="stylesheet"> + <script src="/javascript/jquery/jquery.min.js"></script> + <script src="/js/utils.js"></script> + <script src="/js/todo.js"></script> + </head> + <body> + <div id="container"> + <div id="header"> + <div class="date">--.--.----</div> + <div id="control"> + </div> + </div> + + <div id="shows"> + </div> + </div> + + <script type="text/javascript"> + todo_init(); + </script> + + </body> +</html> |