From 254e07c59e35becbfffad4ff5ba7876919a41b88 Mon Sep 17 00:00:00 2001
From: Dirk Sarpe <dsarpe@posteo.de>
Date: Mon, 3 Jul 2017 23:17:44 +0200
Subject: [PATCH] migrate to jinja2 for adaption to new website
keep example.html around for explanatory purposes
the directory structure and file pathes in script need to be adapted
before we can go to production
---
code/{index.html => example.html} | 0
code/template.html | 158 ++++++++++++++++++++++++++++++
event_display.py | 103 ++++++++-----------
3 files changed, 197 insertions(+), 64 deletions(-)
rename code/{index.html => example.html} (100%)
create mode 100644 code/template.html
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 0000000..bd8bb60
--- /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 cb26084..28ce401 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()
--
GitLab