Skip to content

T
tvgids
Commit 59adfe9c authored by Taddeüs Kroes's avatar Taddeüs Kroes
Browse files
Options

First working version

parent dcf2a518
Hide whitespace changes
Inline Side-by-side
Showing with 185 additions and 94 deletions
channels.js 0 → 100644
View file @ 59adfe9c
window.CHANNELS=[{"id":"1","name":"Nederland 1","name_short":"Ned 1"},{"id":"2","name":"Nederland 2","name_short":"Ned 2"},{"id":"3","name":"Nederland 3","name_short":"Ned 3"},{"id":"4","name":"RTL 4","name_short":"RTL 4"},{"id":"31","name":"RTL 5","name_short":"RTL 5"},{"id":"46","name":"RTL 7","name_short":"RTL 7"},{"id":"92","name":"RTL 8","name_short":"RTL 8"},{"id":"36","name":"SBS 6","name_short":"SBS 6"},{"id":"37","name":"NET 5","name_short":"NET 5"},{"id":"34","name":"Veronica","name_short":"Veronica"},{"id":"29","name":"Discovery Channel","name_short":"Discovery"},{"id":"18","name":"National Geographic","name_short":"NGC"},{"id":"406","name":"NostalgieNet","name_short":"Nost Net"},{"id":"5","name":"Eén","name_short":"Eén"},{"id":"435","name":"24 Kitchen","name_short":"24kitchen"},{"id":"6","name":"Canvas","name_short":"CANV"},{"id":"25","name":"MTV","name_short":"MTV"},{"id":"438","name":"TLC","name_short":"TLC"},{"id":"91","name":"Comedy Central","name_short":"Com. Centr."},{"id":"49","name":"VTM","name_short":"VTM"},{"id":"59","name":"2BE","name_short":"2BE"},{"id":"89","name":"Nickelodeon","name_short":"Nick"},{"id":"60","name":"VT4","name_short":"VT4"},{"id":"407","name":"OUTTV","name_short":"OUTTV"},{"id":"90","name":"BVN","name_short":"BVN"},{"id":"404","name":"FOXlife","name_short":"FOXlife"},{"id":"7","name":"BBC 1","name_short":"BBC 1"},{"id":"8","name":"BBC 2","name_short":"BBC 2"},{"id":"86","name":"BBC World","name_short":"BBC W"},{"id":"9","name":"ARD","name_short":"ARD"},{"id":"10","name":"ZDF","name_short":"ZDF"},{"id":"13","name":"NDR Fernsehen","name_short":"NDR"},{"id":"12","name":"WDR Fernsehen","name_short":"WDR"},{"id":"50","name":"3Sat","name_short":"3Sat"},{"id":"28","name":"Sat 1","name_short":"Sat 1"},{"id":"11","name":"RTL","name_short":"RTL"},{"id":"58","name":"PRO 7","name_short":"PRO 7"},{"id":"15","name":"RTBF La 1","name_short":"RTBF La1"},{"id":"16","name":"RTBF La 2","name_short":"RTBF La2"},{"id":"32","name":"TRT int.","name_short":"TRT"},{"id":"40","name":"AT 5","name_short":"AT 5"},{"id":"24","name":"Film 1 Premiere","name_short":"Film1 Prem"},{"id":"39","name":"Film1 Comedy & Kids","name_short":"Film1 Com & Kid"},{"id":"107","name":"Film 1 Sundance","name_short":"Film1 Fest."},{"id":"21","name":"Cartoon Network","name_short":"Cart. Net."},{"id":"26","name":"CNN","name_short":"CNN"},{"id":"19","name":"Eurosport","name_short":"Eurosport"},{"id":"99","name":"Sport1 Select","name_short":"Sport1 Select"},{"id":"20","name":"TCM","name_short":"TCM"},{"id":"65","name":"Animal Planet OUD","name_short":"Animal Pl. OUD"},{"id":"38","name":"ARTE","name_short":"ARTE"},{"id":"103","name":"RTV Noord-Holland","name_short":"RTV N-H"},{"id":"100","name":"RTV Utrecht","name_short":"Utrecht"},{"id":"101","name":"RTV West","name_short":"RTV West"},{"id":"102","name":"RTV Rijnmond","name_short":"Rijnmond"},{"id":"104","name":"BBC Entertainment","name_short":"BBC E"},{"id":"105","name":"Private Spice","name_short":"Private Sp."},{"id":"93","name":"13TH STREET","name_short":"13TH ST"},{"id":"94","name":"Syfy","name_short":"Syfy"},{"id":"108","name":"RTV Noord","name_short":"RTV Noord"},{"id":"111","name":"RTV Oost","name_short":"RTV Oost"},{"id":"114","name":"Omroep Brabant","name_short":"Brabant"},{"id":"109","name":"Omrop Fryslân","name_short":"Fryslân"},{"id":"112","name":"Omroep Gelderland","name_short":"Gelderland"},{"id":"115","name":"L1 TV","name_short":"L1 TV"},{"id":"110","name":"RTV Drenthe","name_short":"Drenthe"},{"id":"113","name":"Omroep Flevoland","name_short":"Flevoland"},{"id":"116","name":"Omroep Zeeland","name_short":"Zeeland"},{"id":"311","name":"Disney XD","name_short":"Disney XD"},{"id":"430","name":"Film1 Spotlight","name_short":"Fl1 Spotlight"},{"id":"315","name":"CBS Reality","name_short":"CBS Reality"},{"id":"433","name":"HBO 3","name_short":"HBO 3"},{"id":"400","name":"Hustler TV","name_short":"Hustler"},{"id":"437","name":"Comedy Central Extra","name_short":"Com. Extra"},{"id":"405","name":"TLC oud","name_short":"tlc"},{"id":"410","name":"101 TV","name_short":"101 TV"},{"id":"413","name":"History channel","name_short":"Hist. Chan."},{"id":"17","name":"TV 5","name_short":"TV 5"},{"id":"416","name":"Nat Geo Wild","name_short":"Nat Geo W"},{"id":"81","name":"HollandDoc 24","name_short":"HolDoc24"},{"id":"419","name":"Sport1 golf\t","name_short":"Sp1 Golf"},{"id":"300","name":"BBC 3","name_short":"BBC 3"},{"id":"422","name":"Euronews","name_short":"Euronews"},{"id":"305","name":"Discovery World","name_short":"Disc. World"},{"id":"425","name":"MTV Music 24","name_short":"MTV 24"},{"id":"309","name":"3voor12 On Stage","name_short":""},{"id":"428","name":"Brava NL","name_short":"Brava NL"},{"id":"312","name":"Nick Jr.","name_short":"Nick Jr."},{"id":"431","name":"HBO 1","name_short":"HBO 1"},{"id":"316","name":"Best 24","name_short":"Best24"},{"id":"434","name":"Dusk","name_short":"Dusk"},{"id":"401","name":"Playboy TV","name_short":"Playboy"},{"id":"439","name":"Animal Planet","name_short":"Animal Pl."},{"id":"408","name":"RTL Lounge","name_short":"RTL Lounge"},{"id":"411","name":"Film1 Action","name_short":"Film1 Act."},{"id":"414","name":"Investigiation discovery","name_short":"Inv. Disc."},{"id":"66","name":"HumorTV 24","name_short":"Humor24"},{"id":"417","name":"Extreme Sports Channel","name_short":"Ext Sp Chan"},{"id":"83","name":"3voor12","name_short":""},{"id":"420","name":"Sport1 Tennis","name_short":"Sp1 Tennis"},{"id":"301","name":"BBC 4","name_short":"BBC 4"},{"id":"423","name":"Al Jazeera Engels","name_short":"Al Jaz. EN."},{"id":"306","name":"Discovery Science","name_short":"Disc. Sc."},{"id":"426","name":"VH1 Classic","name_short":"VH1 Clas."},{"id":"310","name":"3voor12 Portal","name_short":""},{"id":"429","name":"Oranje TV","name_short":"Oranje TV"},{"id":"313","name":"Boomerang","name_short":"Boomerang"},{"id":"432","name":"HBO 2","name_short":"HBO 2"},{"id":"317","name":"Comedy Family","name_short":"Com. Fam."},{"id":"436","name":"Eurosport 2","name_short":"Eurosport2"},{"id":"403","name":"Goed TV","name_short":"Goed TV"},{"id":"440","name":"Fox","name_short":"Fox"},{"id":"409","name":"Rtl crime","name_short":"RTL Crim"},{"id":"412","name":"Film1 Premiere +1","name_short":"Film 1 Prem+"},{"id":"415","name":"Travel Channel","name_short":"Trav. Chan"},{"id":"70","name":"Cultura 24","name_short":"Cult24"},{"id":"418","name":"ESPN classic","name_short":"ESPN Clas."},{"id":"148","name":"Fox Sports Eredivisie","name_short":"Fox Sports Eredivisie"},{"id":"421","name":"Sport1 extra","name_short":"Sp1 Xtra"},{"id":"304","name":"MGM","name_short":"MGM"},{"id":"424","name":"Disney Channel","name_short":"Disc. Chan."},{"id":"308","name":"3voor12 Central","name_short":""},{"id":"427","name":"MTV Brand new","name_short":"MTV br nw"}]
channels.php 0 → 100644
View file @ 59adfe9c
<?php
echo file_get_contents('http://www.tvgids.nl/json/lists/channels.php')
?>
guide.coffee
View file @ 59adfe9c
...@@ -2,38 +2,22 @@ ...@@ -2,38 +2,22 @@
# Config # Config
# #
#FETCH_URL = 'http://www.tvgids.nl/json/lists/programs.php'
FETCH_URL = 'programs.php'
HOUR_WIDTH = 200 HOUR_WIDTH = 200
SCROLL_MULTIPLIER = HOUR_WIDTH SCROLL_MULTIPLIER = HOUR_WIDTH
CHANNELS =
'1': name: 'Nederland 1'
'2': name: 'Nederland 2'
'3': name: 'Nederland 3'
'4': name: 'RTL 4'
'5': name: 'E&eacute;n'
'6': name: 'Canvas'
'18': name: 'NGC'
'24': name: 'Film 1 Premium'
'29': name: 'Discovery'
'31': name: 'RTL 5'
'34': name: 'Veronica'
'36': name: 'SBS6'
'37': name: 'NET 5'
'46': name: 'RTL 7'
'91': name: 'Comedy Central'
'92': name: 'RTL 8'
'435': name: '24 Kitchen'
'438': name: 'TLC'
'440': name: 'FOX'
# #
# Utils # Utils
# #
tosecs = (date) -> date.getHours() * 60 + date.getSeconds() seconds_today = (time) -> (time - (new Date()).setHours(0, 0, 0, 0)) / 1000
now = -> tosecs(new Date())
time2px = (seconds) -> HOUR_WIDTH / 3600 * seconds time2px = (seconds) -> HOUR_WIDTH / 3600 * seconds
zeropad = (digit) -> if digit < 10 then '0' + digit else String(digit)
format_time = (time) ->
date = new Date(time)
zeropad(date.getHours()) + ':' + zeropad(date.getMinutes())
# #
# Models & collections # Models & collections
...@@ -44,16 +28,18 @@ Channel = Backbone.Model.extend( ...@@ -44,16 +28,18 @@ Channel = Backbone.Model.extend(
id: null id: null
name: 'Some channel' name: 'Some channel'
visible: true visible: true
programs: []
initialize: (attrs, options) ->
@programs = []
) )
Progam = Backbone.Model.extend( Program = Backbone.Model.extend(
defaults: -> defaults: ->
title: 'Some program' title: 'Some program'
start: null genre: ''
end: null sort: ''
start: 0
end: 0
#article_id: null
#article_title: null
) )
ChannelList = Backbone.Collection.extend( ChannelList = Backbone.Collection.extend(
...@@ -61,9 +47,15 @@ ChannelList = Backbone.Collection.extend( ...@@ -61,9 +47,15 @@ ChannelList = Backbone.Collection.extend(
comparator: 'id' comparator: 'id'
initialize: (models, options) -> initialize: (models, options) ->
_.each(CHANNELS, (props, id) => @add(_.extend({id: id}, props))) #_.each(CHANNELS, (props, id) => @add(_.extend({id: id}, props)))
@fetchVisible() @fetchVisible()
#@loadPrograms(0) #@fetchPrograms(0)
fetch: ->
@reset(CHANNELS.slice(0,3))
@reset(CHANNELS)
#$.getJSON('channels.php', (data) => @reset(data))
fetchVisible: -> fetchVisible: ->
visible = if localStorage.hasOwnProperty('channels') \ visible = if localStorage.hasOwnProperty('channels') \
...@@ -83,16 +75,24 @@ ChannelList = Backbone.Collection.extend( ...@@ -83,16 +75,24 @@ ChannelList = Backbone.Collection.extend(
@saveVisible() if save @saveVisible() if save
loadPrograms: (day, callback) -> fetchPrograms: (day) ->
$.get( $.getJSON(
'http://www.tvgids.nl/json/lists/programs.php' FETCH_URL
channels: @pluck('id').join(','), day: day channels: @pluck('id').join(','), day: day
(channels) -> (channels) ->
_.each channels, (id, programs) -> _.each channels, (programs, id) ->
channel = Channels.findWhere(id: id) channel = Channels.findWhere(id: id)
channel.programs = (new Program(p) for p in programs) channel.set('programs', (
callback() if callback new Program(
'json' title: p.titel
genre: p.genre
sort: p.soort
start: Date.parse(p.datum_start)
end: Date.parse(p.datum_end)
#article_id: p.artikel_id
#article_title: p.artikel_titel
) for p in programs
))
) )
) )
...@@ -106,10 +106,19 @@ ChannelView = Backbone.View.extend( ...@@ -106,10 +106,19 @@ ChannelView = Backbone.View.extend(
#template: _.template($('#channel-template').html()) #template: _.template($('#channel-template').html())
initialize: -> initialize: ->
$el.text(@model.title) @listenTo(@model, 'change:programs', @render)
@listenTo(@model, 'change:visible', @toggleVisible)
#@$el.text(@model.get('title'))
render: -> render: ->
$el.toggle(@model.visible) @$el.empty()
_.each @model.get('programs'), (program) =>
view = new ProgramView(model: program)
view.render()
@$el.append(view.el)
toggleVisible: ->
@$el.toggle(@model.get('visible'))
) )
ProgramView = Backbone.View.extend( ProgramView = Backbone.View.extend(
...@@ -117,42 +126,70 @@ ProgramView = Backbone.View.extend( ...@@ -117,42 +126,70 @@ ProgramView = Backbone.View.extend(
className: 'program' className: 'program'
initialize: -> initialize: ->
$el.text(@model.title) @$el.text(@model.get('title'))
from = format_time(@model.get('start'))
to = format_time(@model.get('end'))
@$el.attr('title', @model.get('title') + " (#{from} - #{to})")
left = time2px(Math.max(0, seconds_today(@model.get('start'))))
width = time2px(seconds_today(@model.get('end'))) - left
@$el.css(
left: left + 'px'
width: (width - 10) + 'px'
)
render: -> render: ->
# TODO: set highlight to past/present/future if @model.get('start') <= Date.now()
if @model.get('end') < Date.now()
@$el.removeClass('current').addClass('past')
else
@$el.addClass('current')
) )
AppView = Backbone.View.extend( AppView = Backbone.View.extend(
el: $('#guide') el: $('#guide')
events:
'click #yesterday': -> @loadDay(-1)
'click #today': -> @loadDay(0)
'click #tomorrow': -> @loadDay(1)
initialize: -> initialize: ->
@listenTo(Channels, 'add', @addChannel) @updateIndicator()
@listenTo(Channels, 'reset', => Channels.each(@addChannel, @)) @listenTo(Channels, 'reset', @addChannels)
@listenTo(Channels, 'all', @render)
@setDay(0, => @updateIndicator()) Channels.fetch()
@listenTo(Settings, 'change:day', @fetchPrograms)
#setInterval(=> @updateIndicator(), 3600000 / HOUR_WIDTH) setInterval((=> @updateIndicator()), 3600000 / HOUR_WIDTH)
setDay: (day, callback) -> addChannels: () ->
Channels.loadPrograms(@day = day, callback) Channels.each((channel) ->
view = new ChannelView(model: channel)
view.render()
@$('.channels').append(view.el)
, @)
@fetchPrograms()
addChannel: (channel) -> loadDay: (day) ->
view = new ChannelView(model: channel) Settings.set(day: day)
@$('.channels').append(view.render().el) @$('.navbar .active').removeClass('active')
$(@$('.navbar .navitem')[day + 1]).addClass('active')
updateIndicator: -> updateIndicator: ->
@$('.indicator').css('left', time2px(now()) + 'px') @$('.indicator').css('left', time2px(seconds_today(Date.now())) + 'px')
render: -> fetchPrograms: ->
hidden Channels.fetchPrograms(Settings.get('day'))
@$('.channel')
) )
# #
# Main # Main
# #
Settings = new (Backbone.Model.extend(
defaults: ->
day: 0
))()
Channels = new ChannelList() Channels = new ChannelList()
App = new AppView() App = new AppView()
index.html
View file @ 59adfe9c
...@@ -6,34 +6,40 @@ ...@@ -6,34 +6,40 @@
</head> </head>
<body> <body>
<div id="guide" class="guide"> <div id="guide" class="guide">
<div class="navbar">
<a href="javascript:void(0);" id="yesterday" class="navitem">Gisteren</a>
<a href="javascript:void(0);" id="today" class="navitem active">Vandaag</a>
<a href="javascript:void(0);" id="tomorrow" class="navitem">Morgen</a>
<a href="settings.html" class="navitem">Selecteer zenders</a>
</div>
<div class="timeline"> <div class="timeline">
<div class="hour"><span class="label">00:00</span></div> <div class="hour">00:00</div>
<div class="hour"><span class="label">01:00</span></div> <div class="hour">01:00</div>
<div class="hour"><span class="label">02:00</span></div> <div class="hour">02:00</div>
<div class="hour"><span class="label">03:00</span></div> <div class="hour">03:00</div>
<div class="hour"><span class="label">04:00</span></div> <div class="hour">04:00</div>
<div class="hour"><span class="label">05:00</span></div> <div class="hour">05:00</div>
<div class="hour"><span class="label">06:00</span></div> <div class="hour">06:00</div>
<div class="hour"><span class="label">07:00</span></div> <div class="hour">07:00</div>
<div class="hour"><span class="label">08:00</span></div> <div class="hour">08:00</div>
<div class="hour"><span class="label">09:00</span></div> <div class="hour">09:00</div>
<div class="hour"><span class="label">10:00</span></div> <div class="hour">10:00</div>
<div class="hour"><span class="label">11:00</span></div> <div class="hour">11:00</div>
<div class="hour"><span class="label">12:00</span></div> <div class="hour">12:00</div>
<div class="hour"><span class="label">13:00</span></div> <div class="hour">13:00</div>
<div class="hour"><span class="label">14:00</span></div> <div class="hour">14:00</div>
<div class="hour"><span class="label">15:00</span></div> <div class="hour">15:00</div>
<div class="hour"><span class="label">16:00</span></div> <div class="hour">16:00</div>
<div class="hour"><span class="label">17:00</span></div> <div class="hour">17:00</div>
<div class="hour"><span class="label">18:00</span></div> <div class="hour">18:00</div>
<div class="hour"><span class="label">19:00</span></div> <div class="hour">19:00</div>
<div class="hour"><span class="label">20:00</span></div> <div class="hour">20:00</div>
<div class="hour"><span class="label">21:00</span></div> <div class="hour">21:00</div>
<div class="hour"><span class="label">22:00</span></div> <div class="hour">22:00</div>
<div class="hour"><span class="label">23:00</span></div> <div class="hour">23:00</div>
</div> </div>
<div class="indicator"></div>
<div class="channels"></div> <div class="channels"></div>
<div class="indicator"></div>
</div> </div>
<script src="lib/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="lib/jquery-1.10.2.min.js" type="text/javascript"></script>
...@@ -48,6 +54,7 @@ ...@@ -48,6 +54,7 @@
</div> </div>
</script> </script>
<script src="channels.js" type="text/javascript"></script>
<script src="guide.js" type="text/javascript"></script> <script src="guide.js" type="text/javascript"></script>
</body> </body>
</html> </html>
programs.php 0 → 100644
View file @ 59adfe9c
<?php
echo file_get_contents('http://www.tvgids.nl/json/lists/programs.php?channels='
. $_GET['channels'] . '&day=' . $_GET['day'])
?>
style.sass
View file @ 59adfe9c
$indicator-color: red $indicator-color: red
$timeline-height: 30px
$hour-width: 200px $hour-width: 200px
$channel-height: 40px $channel-height: 34px
html, body html, body
width: 100% width: 100%
...@@ -11,6 +10,24 @@ html, body ...@@ -11,6 +10,24 @@ html, body
padding: 0 padding: 0
.navbar
background-color: #232323
width: 24 * $hour-width
.navitem
color: #9a9a9a
text-decoration: none
font: normal 13px/18px Helvetica
display: inline-block
padding: 10px 20px
&:hover
color: #bcbcbc
&.active
color: #fff
background-color: #1a1a1a
.guide .guide
width: 100% width: 100%
overflow-x: scroll overflow-x: scroll
...@@ -18,30 +35,52 @@ html, body ...@@ -18,30 +35,52 @@ html, body
position: relative position: relative
.timeline .timeline
height: $timeline-height
width: 24 * $hour-width width: 24 * $hour-width
height: 26px
.hour .hour
font: normal 13px Helvetica
float: left float: left
width: $hour-width width: $hour-width - 7px
height: $timeline-height border-left: 1px solid #444
padding: 5px 0 0 6px
height: 21px
//.label //.label
// width: 50px // width: 50px
// margin-left: -25px // margin-left: -25px
// text-align: center // text-align: center
.indicator .channels
position: absolute width: 24 * $hour-width
width: 1px overflow: hidden
height: 100%
top: 0
background-color: $indicator-color
.channel .channel
position: relative position: relative
height: $channel-height
.program .program
position: absolute position: absolute
height: $channel-height - 2px white-space: nowrap
border: 1px solid white height: $channel-height - 10px
padding: 8px 0 0 8px
border-left: 2px solid white
background-color: #eee
font: normal 13px/15px Helvetica
overflow: hidden
color: #555
&.past
background-color: #ececec
color: #aaa
&.current
background-color: #ddd
color: #444
.indicator
position: absolute
width: 1px
height: 100%
top: 0
background-color: $indicator-color
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment