diff --git a/code/index.html b/code/example.html
similarity index 100%
rename from code/index.html
rename to code/example.html
diff --git a/code/template.html b/code/template.html
new file mode 100644
index 0000000000000000000000000000000000000000..bd8bb608351609b4289720d6340c69914c93b56a
--- /dev/null
+++ b/code/template.html
@@ -0,0 +1,158 @@
+<!DOCTYPE HTML>
+<?xml version="1.0" encoding="UTF-8" ?>
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+ <!-- Mimic Internet Explorer -->
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <meta charset="UTF-8" />
+ <meta name="content-type" content="website" />
+ <meta name="keywords" content="" />
+ <meta name="description" content="" />
+ <meta name="author" content="Stefan Bernhardt" />
+
+ <script type="text/javascript" src="jquery.min.js"></script>
+ <link type="text/css" rel="stylesheet" href="style.css" />
+ <link type="image/x-icon" rel="shortcut icon" href="." />
+ <title>iDiv events</title>
+</head>
+
+<body>
+
+ <header>
+ <div class="gradient-wrapper">
+ <div class="gradient" id="gradient-counter"> </div>
+ </div>
+ <div class="header-content">
+ <div><img src="img/logo-idivEventCalendar.png" alt="iDiv event calendar logo" /></div>
+ <div>
+ <p id="date"> </p>
+ <p id="time"> </p>
+ </div>
+ </div>
+ </header>
+
+ <div class="main-wrapper">
+ <div class="main-content">
+ <ul class="event-list">
+ {% for event in html_list %}
+ <li>
+ <div class="event-wrapper">
+ <p class="event-date">
+ {{ event.date }}
+ </p>
+ <h2 class="event-title">
+ {{ event.name }}
+ </h2>
+ <p class="event-location">
+ {{ event.location }}
+ </p>
+ </div>
+ </li>
+ {% endfor %}
+ </ul>
+ </div>
+ </div>
+
+ <footer>
+ <div class="pagination-wrapper">
+ <ul class="pagination">
+ </ul>
+ </div>
+ <div class="footer-content">
+ </div>
+ </footer>
+
+<script type="text/javascript">
+var eventsPerSlide = 3;
+var timePerSlide = 10000;
+var slides = Math.ceil($('.event-list li').length / eventsPerSlide);
+
+// set height of event items
+var height = $('.main-wrapper').height();
+height = height / (eventsPerSlide * 1.1) ;
+
+function contentHeight(height) {
+ $('.event-list li').css({
+ 'height': height
+ });
+}
+setInterval(function(){ contentHeight(height), 100 });
+
+// create pagination
+for (var i = 0; i < slides; i++) {
+ $('.pagination').append('<li> </li>');
+};
+
+// enable defaults
+$('.pagination li:first-child').addClass('active');
+$('.event-list li:first-child').addClass('event-first');
+$('.event-list li:lt(3)').removeClass('event-inactive').addClass('event-active');
+
+
+
+function eventTicker(){
+ var eventsLength = $('.event-list li').length;
+
+ // disable active items and append items at the end of list
+ $('.event-list li.event-active').removeClass('event-active').addClass('event-inactive').appendTo('.event-list');
+
+ // check if first item in list is first event
+ if ($('.event-list li:first-child').hasClass('event-first') == true ) {
+
+ // enable next items in list
+ $('.event-list li:lt(' + eventsPerSlide + ')').removeClass('event-inactive').addClass('event-active');
+ $('.pagination li.active').removeClass('active');
+ $('.pagination li:first-child').addClass('active');
+
+ // first event is not part of the first three items
+ } else if (!$('.event-list li:lt(' + eventsPerSlide + ')').hasClass('event-first') ) {
+
+ // enable next items in list
+ $('.event-list li:lt(' + eventsPerSlide + ')').removeClass('event-inactive').addClass('event-active');
+ $('.pagination li.active').removeClass('active').next().addClass('active');
+
+ } else {
+
+ // start loop to check following items
+ for (var i = 2; i <= eventsPerSlide; i++) {
+ // check if following items have class 'event-first'
+ if ( $( '.event-list li:lt(' + i + ')').hasClass('event-first') == true ) {
+ var j = i-1;
+ // enable i-next item in list
+ $('.event-list li:lt(' + j + ')').removeClass('event-inactive').addClass('event-active');
+ $('.pagination li.active').removeClass('active').next().addClass('active');
+
+ break;
+ };
+ };
+
+ };
+
+}
+setInterval(function(){ eventTicker() }, timePerSlide);
+
+function currentTime() {
+
+ var d = new Date();
+ var month = d.getMonth()+1;
+ var day = d.getDate();
+ var h = d.getHours();
+ var m = d.getMinutes();
+ var s = d.getSeconds();
+
+ var date = (day<10 ? '0' : '') + day + '.' + (month<10 ? '0' : '') + month + '.' + d.getFullYear();
+ var time = (h<10 ? '0' : '') + h + ":" + (m<10 ? '0' : '') + m + ':' + (s<10 ? '0' : '') + s;
+
+ $('#date').text(date);
+ $('#time').text(time);
+}
+setInterval(function(){ currentTime() }, 1000);
+
+
+</script>
+
+</body>
+</html>
diff --git a/event_display.py b/event_display.py
index cb260848ad810168b86f257bcfeb9b0b12db3b2d..28ce4011cb0a9387d0dc20c37c2d1d0ee5a88108 100644
--- a/event_display.py
+++ b/event_display.py
@@ -1,80 +1,55 @@
#!/usr/bin/python
-# parse ical calendar and place parsed events in html code
+# parse ical calendar and insert values into html template
import requests
import arrow
from ics import Calendar
+from jinja2 import Environment, FileSystemLoader
+import os
+
url = 'https://portal.idiv.de/ssf/ical/basic.ics?bi=393&ui=1026&pd=171497477d81eb659bd832ffe26c8bfe39d65fc3&v=1'
tz = 'Europe/Berlin'
now = arrow.now(tz)
period = (now.floor('day'), now.replace(weeks=+2))
+
c = Calendar(requests.get(url).text)
-my_list = []
+html_list = []
for e in c.events:
if e.end > period[0] and e.begin < period[1]:
- my_list.append((e.name, e.begin.format('DD-MM-YYYY HH:mm:ss'), e.end.format('DD-MM-YYYY HH:mm:ss'), e.location))
-
-event = [my_list[0][0], my_list[1][0], my_list[2][0]]
-begin = [my_list[0][1], my_list[1][1], my_list[2][1]]
-end = [my_list[0][2], my_list[1][2], my_list[2][2]]
-location = [my_list[0][3], my_list[1][3], my_list[2][3]]
-
-html_page = """<html xmlns="http://www.w3.org/1999/xhtml">
-
-<head>
-<meta content="de" http-equiv="Content-Language" />
-<meta http-equiv="refresh" content="1800"/>
-<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
-<title>BeginnEventLocationBeginnEventLo</title>
-<style type="text/css">
-.auto-style1 {
- margin-top: 0px;
- margin: 0px;
- padding: 0px;
- font-size: xx-large;
- font-family: Arial, Helvetica, sans-serif;
- color: #000000;
-}
-.auto-style3 {
- font-family: Arial, Helvetica, sans-serif;
- color: #000000;
- font-size: xx-large;
-}
-</style>
-</head>
-
-<body bgcolor="#FFFFCC" alink="#FFFFCC" background="background.jpg">
-<div id="layer1" style="background: #FADA08; position: absolute; left: 90px; top: 160px; width: 375px; height: 240px; z-index: 1" class="auto-style3">
- <var> %s</var></div>
-<div id="layer2" style="background: #FADA08; position: absolute; left: 495px; top: 160px; width: 950px; height: 50px; z-index: 2; background-color: #FADA08;" class="auto-style3">
- <var> %s</var></div>
-<div id="layer3" style="background: #FADA08; position: absolute; left: 495px; top: 240px; width: 950px; height: 160px; z-index: 3" class="auto-style1">
- <var> %s</var></div>
-<div id="layer4" style="background: #79B248; position: absolute; left: 90px; top: 430px; width: 375px; height: 240px; z-index: 4" class="auto-style3">
- <var> %s</var></div>
-<div id="layer5" style="background: #79B248; position: absolute; left: 495px; top: 430px; width: 950px; height: 50px; z-index: 5" class="auto-style3">
- <var> %s</var></div>
-<div id="layer6" style="background: #79B248; position: absolute; left: 495px; top: 510px; width: 950px; height: 160px; z-index: 6" class="auto-style3">
- <var> %s</var></div>
-<div id="layer7" style="background: #4D90C7; position: absolute; left: 90px; top: 700px; width: 375px; height: 240px; z-index: 7" class="auto-style3">
- <var> %s</var></div>
-<div id="layer8" style="background: #4D90C7; position: absolute; left: 495px; top: 700px; width: 950px; height: 50px; z-index: 8" class="auto-style3">
- <var> %s</var></div>
-<div id="layer9" style="background: #4D90C7; position: absolute; left: 495px; top: 780px; width: 950px; height: 160px; z-index: 9" class="auto-style3">
- <var> %s</var></div>
-<div id="layer10" style="position: absolute; left: 1450px; top: 200px; width: 203px; height: 93px; z-index: 10">
-<div style="text-align:center;width:400px;padding:0em;"> <h2><a id="717864741" href="http://www.uhr-homepage.de">Uhr Homepage Billig</a><script src="https://www.uhr-homepage.de/data.php?i=717864741&h=172&w=292" type="text/javascript"></script></div>
-</div>
-<div id="layer11" style="position: absolute; left: 1500px; top: 570px; width: 241px; height: 242px; z-index: 11; background-color: #FFFFCC;">
-<script type="text/javascript">document.write("<iframe id = \\"widget\\" width=\\"300\\" height=\\"270\\" src=\\"http://www.wetter-deutschland.com/international/europa/deutschland/leipzig/widget/w300/color-hellgruen?utm_source=widget&utm_medium="+top.location.hostname+"&utm_content="+top.location.href+"&utm_campaign=Wetter%%2BWidget\\" frameborder=\\"0\\" scrolling=\\"no\\"></iframe>");</script><center style="padding-top:5px; padding-bottom:5px; font-size:14px; line-height:18px; font-family:arial;"><br/></center><br />
-</div>
-</body>
-
-</html>""" % (event[0], location[0], begin[0], end[0], event[1], location[1], begin[1], end[1], event[2], location[2], begin[2], end[2])
-
-out_file = open("/home/eventviewer/events/events.html", "w")
-out_file.write(html_page.encode("utf8"))
+ # only display events which have not ended yet
+ # and start earlier than defined above
+ duration = e.end - e.begin
+ # short, full day and multi day events display datetime differently
+ if duration.days < 1:
+ event_date = (e.begin.format('DD.MM.YYYY HH:mm')
+ + ' – '
+ + e.end.format('HH:mm'))
+ elif duration.days == 1:
+ event_date = e.begin.format('DD.MM.YYYY') + ', all day'
+ elif duration.days > 1:
+ # in ics file the end date is the day after end date at 00:00:00
+ corrected_end_date = e.end.replace(days = - 1)
+ event_date = (e.begin.format('DD.MM.YYYY')
+ + ' – '
+ + corrected_end_date.format('DD.MM.YYYY')
+ + ', all day')
+ else:
+ event_date = ''
+ # create list of dictionaries for jinja2 template
+ event = dict(date = event_date, name = e.name, location = e.location)
+ html_list.append(event)
+
+# Capture our current directory
+this_dir = os.path.dirname(os.path.abspath(__file__))
+
+# Create the jinja2 environment.
+# Notice the use of trim_blocks, which greatly helps control whitespace.
+j2_env = Environment(loader=FileSystemLoader(this_dir),
+ trim_blocks=True)
+output = j2_env.get_template('code/template.html').render(html_list = html_list)
+out_file = open("code/events_jinja.html", "w")
+out_file.write(output.encode("utf-8"))
out_file.close()