Skip to content
Snippets Groups Projects
Commit 59adfe9c authored by Taddeüs Kroes's avatar Taddeüs Kroes
Browse files

First working version

parent dcf2a518
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
channels.js 0 → 100644
+ 1
− 0
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
+ 3
− 0
View file @ 59adfe9c
<?php
echo file_get_contents('http://www.tvgids.nl/json/lists/channels.php')
?>
guide.coffee
+ 93
− 56
View file @ 59adfe9c
......@@ -2,38 +2,22 @@
# Config
#
#FETCH_URL = 'http://www.tvgids.nl/json/lists/programs.php'
FETCH_URL = 'programs.php'
HOUR_WIDTH = 200
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
#
tosecs = (date) -> date.getHours() * 60 + date.getSeconds()
now = -> tosecs(new Date())
seconds_today = (time) -> (time - (new Date()).setHours(0, 0, 0, 0)) / 1000
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
......@@ -44,16 +28,18 @@ Channel = Backbone.Model.extend(
id: null
name: 'Some channel'
visible: true
initialize: (attrs, options) ->
@programs = []
programs: []
)
Progam = Backbone.Model.extend(
Program = Backbone.Model.extend(
defaults: ->
title: 'Some program'
start: null
end: null
genre: ''
sort: ''
start: 0
end: 0
#article_id: null
#article_title: null
)
ChannelList = Backbone.Collection.extend(
......@@ -61,9 +47,15 @@ ChannelList = Backbone.Collection.extend(
comparator: 'id'
initialize: (models, options) ->
_.each(CHANNELS, (props, id) => @add(_.extend({id: id}, props)))
#_.each(CHANNELS, (props, id) => @add(_.extend({id: id}, props)))
@fetchVisible()
#@loadPrograms(0)
#@fetchPrograms(0)
fetch: ->
@reset(CHANNELS.slice(0,3))
@reset(CHANNELS)
#$.getJSON('channels.php', (data) => @reset(data))
fetchVisible: ->
visible = if localStorage.hasOwnProperty('channels') \
......@@ -83,16 +75,24 @@ ChannelList = Backbone.Collection.extend(
@saveVisible() if save
loadPrograms: (day, callback) ->
$.get(
'http://www.tvgids.nl/json/lists/programs.php'
fetchPrograms: (day) ->
$.getJSON(
FETCH_URL
channels: @pluck('id').join(','), day: day
(channels) ->
_.each channels, (id, programs) ->
_.each channels, (programs, id) ->
channel = Channels.findWhere(id: id)
channel.programs = (new Program(p) for p in programs)
callback() if callback
'json'
channel.set('programs', (
new Program(
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(
#template: _.template($('#channel-template').html())
initialize: ->
$el.text(@model.title)
@listenTo(@model, 'change:programs', @render)
@listenTo(@model, 'change:visible', @toggleVisible)
#@$el.text(@model.get('title'))
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(
......@@ -117,42 +126,70 @@ ProgramView = Backbone.View.extend(
className: 'program'
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: ->
# 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(
el: $('#guide')
events:
'click #yesterday': -> @loadDay(-1)
'click #today': -> @loadDay(0)
'click #tomorrow': -> @loadDay(1)
initialize: ->
@listenTo(Channels, 'add', @addChannel)
@listenTo(Channels, 'reset', => Channels.each(@addChannel, @))
@listenTo(Channels, 'all', @render)
@updateIndicator()
@listenTo(Channels, 'reset', @addChannels)
@setDay(0, => @updateIndicator())
Channels.fetch()
@listenTo(Settings, 'change:day', @fetchPrograms)
#setInterval(=> @updateIndicator(), 3600000 / HOUR_WIDTH)
setInterval((=> @updateIndicator()), 3600000 / HOUR_WIDTH)
setDay: (day, callback) ->
Channels.loadPrograms(@day = day, callback)
addChannels: () ->
Channels.each((channel) ->
view = new ChannelView(model: channel)
view.render()
@$('.channels').append(view.el)
, @)
@fetchPrograms()
addChannel: (channel) ->
view = new ChannelView(model: channel)
@$('.channels').append(view.render().el)
loadDay: (day) ->
Settings.set(day: day)
@$('.navbar .active').removeClass('active')
$(@$('.navbar .navitem')[day + 1]).addClass('active')
updateIndicator: ->
@$('.indicator').css('left', time2px(now()) + 'px')
@$('.indicator').css('left', time2px(seconds_today(Date.now())) + 'px')
render: ->
hidden
@$('.channel')
fetchPrograms: ->
Channels.fetchPrograms(Settings.get('day'))
)
#
# Main
#
Settings = new (Backbone.Model.extend(
defaults: ->
day: 0
))()
Channels = new ChannelList()
App = new AppView()
index.html
+ 32
− 25
View file @ 59adfe9c
......@@ -6,34 +6,40 @@
</head>
<body>
<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="hour"><span class="label">00:00</span></div>
<div class="hour"><span class="label">01:00</span></div>
<div class="hour"><span class="label">02:00</span></div>
<div class="hour"><span class="label">03:00</span></div>
<div class="hour"><span class="label">04:00</span></div>
<div class="hour"><span class="label">05:00</span></div>
<div class="hour"><span class="label">06:00</span></div>
<div class="hour"><span class="label">07:00</span></div>
<div class="hour"><span class="label">08:00</span></div>
<div class="hour"><span class="label">09:00</span></div>
<div class="hour"><span class="label">10:00</span></div>
<div class="hour"><span class="label">11:00</span></div>
<div class="hour"><span class="label">12:00</span></div>
<div class="hour"><span class="label">13:00</span></div>
<div class="hour"><span class="label">14:00</span></div>
<div class="hour"><span class="label">15:00</span></div>
<div class="hour"><span class="label">16:00</span></div>
<div class="hour"><span class="label">17:00</span></div>
<div class="hour"><span class="label">18:00</span></div>
<div class="hour"><span class="label">19:00</span></div>
<div class="hour"><span class="label">20:00</span></div>
<div class="hour"><span class="label">21:00</span></div>
<div class="hour"><span class="label">22:00</span></div>
<div class="hour"><span class="label">23:00</span></div>
<div class="hour">00:00</div>
<div class="hour">01:00</div>
<div class="hour">02:00</div>
<div class="hour">03:00</div>
<div class="hour">04:00</div>
<div class="hour">05:00</div>
<div class="hour">06:00</div>
<div class="hour">07:00</div>
<div class="hour">08:00</div>
<div class="hour">09:00</div>
<div class="hour">10:00</div>
<div class="hour">11:00</div>
<div class="hour">12:00</div>
<div class="hour">13:00</div>
<div class="hour">14:00</div>
<div class="hour">15:00</div>
<div class="hour">16:00</div>
<div class="hour">17:00</div>
<div class="hour">18:00</div>
<div class="hour">19:00</div>
<div class="hour">20:00</div>
<div class="hour">21:00</div>
<div class="hour">22:00</div>
<div class="hour">23:00</div>
</div>
<div class="indicator"></div>
<div class="channels"></div>
<div class="indicator"></div>
</div>
<script src="lib/jquery-1.10.2.min.js" type="text/javascript"></script>
......@@ -48,6 +54,7 @@
</div>
</script>
<script src="channels.js" type="text/javascript"></script>
<script src="guide.js" type="text/javascript"></script>
</body>
</html>
programs.php 0 → 100644
+ 4
− 0
View file @ 59adfe9c
<?php
echo file_get_contents('http://www.tvgids.nl/json/lists/programs.php?channels='
. $_GET['channels'] . '&day=' . $_GET['day'])
?>
style.sass
+ 52
− 13
View file @ 59adfe9c
$indicator-color: red
$timeline-height: 30px
$hour-width: 200px
$channel-height: 40px
$channel-height: 34px
html, body
width: 100%
......@@ -11,6 +10,24 @@ html, body
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
width: 100%
overflow-x: scroll
......@@ -18,30 +35,52 @@ html, body
position: relative
.timeline
height: $timeline-height
width: 24 * $hour-width
height: 26px
.hour
font: normal 13px Helvetica
float: left
width: $hour-width
height: $timeline-height
width: $hour-width - 7px
border-left: 1px solid #444
padding: 5px 0 0 6px
height: 21px
//.label
// width: 50px
// margin-left: -25px
// text-align: center
.indicator
position: absolute
width: 1px
height: 100%
top: 0
background-color: $indicator-color
.channels
width: 24 * $hour-width
overflow: hidden
.channel
position: relative
height: $channel-height
.program
position: absolute
height: $channel-height - 2px
border: 1px solid white
white-space: nowrap
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
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