update Layout Events, add Category Selector

ofu_app/apps/events/urls.py

@@ -19,6 +19,7 @@ from apps.events import views
 
 urlpatterns = [
     url(r'^$', views.events_main_page, name='events-main'),
+    url(r'^today/$', views.day_events, name='day-events'),
     url(r'^week/$', views.week_events, name='week-events'),
     url(r'^all/$', views.all_events, name='all-events'),
 ]

ofu_app/apps/events/views.py

@@ -1,10 +1,20 @@
 import datetime
+from time import time
 
 from django.shortcuts import render
 
 from apps.events.models import Event
 
 
+# Helper Methods
+def get_categories(events: list):
+    categories = []
+    for event in events:
+        if not categories.__contains__(event.category):
+            categories.append(event.category)
+    return categories
+
+
 # Create your views here.
 def events_main_page(request):
     return render(request, "events/home.jinja")
@@ -12,21 +22,33 @@ def events_main_page(request):
 
 def all_events(request):
     today = datetime.datetime.now()
-    all_future_events = Event.objects.filter(date__gte=today)
+    all_future_events = Event.objects.filter(date__gte=today).order_by('date', 'time')
     lastdate = Event.objects.latest('date').date
     return render(request, "events/all_events.jinja", {
         'startdate': today,
         'events': all_future_events,
         'enddate': lastdate,
+        'categories': get_categories(all_future_events),
     })
 
 
 def week_events(request):
     today = datetime.datetime.now()
     weekdelta = today + datetime.timedelta(7)
-    events = Event.objects.filter(date__gte=today, date__lte=weekdelta)
+    events = Event.objects.filter(date__gte=today, date__lte=weekdelta).order_by('date', 'time')
     return render(request, "events/week_events.jinja", {
         'startdate': today,
         'enddate': weekdelta,
         'events': events,
+        'categories': get_categories(events),
+    })
+
+
+def day_events(request):
+    today = datetime.datetime.now()
+    events = Event.objects.filter(date=today).order_by('time')
+    return render(request, "events/day_events.jinja", {
+        'date': today,
+        'events': events,
+        'categories': get_categories(events),
     })

ofu_app/static/css/events/main.css

@@ -0,0 +1,47 @@
+#food-nav {
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+#food-nav .container, #food-nav .container .nav-link {
+    height: 100%;
+}
+
+.jump-up-menu {
+    position: fixed;
+    margin-bottom: 50px;
+    bottom: 0;
+    right: 0;
+    background: white;
+    display: none;
+    border: 1px solid #343a40;
+    border-top-left-radius: 3px;
+}
+
+#category-jump-up:hover .jump-up-menu, .jump-up-menu:hover {
+    display: block;
+}
+
+.jump-up-elem {
+    padding: 5px;
+    margin-bottom: 0;
+    border-bottom: 1px solid #343a40;
+}
+
+.jump-up-elem:hover {
+    background-color: #cfcfcf;
+}
+
+footer {
+    /*mb equal height in #food-nav*/
+    margin-bottom: 50px;
+}
+
+/** Sticky Bottom Nav **/
+#food-nav {
+    z-index: 5000;
+    bottom: 0;
+    position: fixed;
+    width: 100%;
+    height: 50px;
+}

ofu_app/static/js/events/sort_categories.js

@@ -0,0 +1,19 @@
+/**
+ * Created by michigg on 16.10.17.
+ */
+function showCategory(category) {
+    // TODO: Überarbeiten. Uni eigentlich /= Univis geht das auch schöner?
+    var events = document.getElementsByClassName('event');
+    for (var i = 0; i < events.length; i++) {
+        events[i].style.display = 'none';
+    }
+    for (var i = 0; i < events.length; i++) {
+        var classes = events[i].classList;
+        for (var j = 0; j < classes.length; j++) {
+            if (category.includes(classes[j])) {
+                console.log(events[i])
+                events[i].style.display = 'block';
+            }
+        }
+    }
+}

ofu_app/templates/base.jinja

@@ -8,8 +8,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>OFU App</title>
     <meta name="author" content="Michael Götz"/>
-    {#    {% javascript "main_js" %}#}
-    {#    {% block js_head %}{% endblock %}#}
     {% block js_extra %}{% endblock %}
     <!-- Bootstrap CSS -->
     <link rel="stylesheet" href="{{ static('libs/font-awesome-4.7.0/css/font-awesome.css') }}">

ofu_app/templates/donar/show_room.jinja

@@ -1,10 +1,12 @@
 {% extends 'base.jinja' %}
-{% block head_extra_first %}
+<!-- Make sure you put this AFTER Leaflet's CSS -->
+{% block js_extra %}
+<script src="{{ static('libs/leaflet/leaflet.js') }}"></script>
+<script id="nav_data" src="{{ static('js/donar/navigate.js') }}" data-address="{{ room.address }}"
+        data-short="{{ room.short }}"></script>
+{% endblock %}
+{% block css_extra %}
     <link rel="stylesheet" href="{{ static('libs/leaflet/leaflet.css') }}"/>
-    <!-- Make sure you put this AFTER Leaflet's CSS -->
-    <script src="{{ static('libs/leaflet/leaflet.js') }}"></script>
-    <script id="nav_data" src="{{ static('js/donar/navigate.js') }}" data-address="{{ room.address }}"
-            data-short="{{ room.short }}"></script>
 {% endblock %}
 {% block headline %}
     <h1 class="text-center"> Donar </h1>

ofu_app/templates/events/all_events.jinja

@@ -1,32 +1,14 @@
-{% extends 'base.jinja' %}
+{% extends 'events/events_wrapper.jinja' %}
+{% import '/macros/event_macros.jinja' as macros %}
 {% block headline %}
-    <h1 class="text-center">Alle Events an der OFU </h1>
-    <h2 class="text-center">{{ startdate.strftime("%d.%m.%Y") }} bis {{ enddate.strftime("%d.%m.%Y") }}</h2>
+    <h1 class="text-center">Events</h1>
+    <p class="text-center">{{ startdate.strftime("%d.%m.%Y") }} bis {{ enddate.strftime("%d.%m.%Y") }}</p>
 {% endblock %}
 {% block content %}
     <div class="container">
-    <div class="row">
+    <div id="events" class="row">
         {% for event in  events %}
-            <div class="col-6 p-3">
-                <div class="p-3 border border-dark roundep-3 border border-dark rounded bg-light text-dark">
-                    <h3>{{ event.title }}</h3>
-                    <p>Wann: {{ event.date.strftime("%d.%m.") }} ab {{ event.time.strftime("%H:%M") }}</p>
-                    <p>Wo:</p>
-                    <ul>
-                        {% for location in event.locations.all() %}
-                            <li>{{ location.name }}</li>
-                        {% endfor %}
-                    </ul>
-                    {% if event.orgname %}
-                        <p>Organisator: {{ event.orgname }}</p>
-                    {% endif %}
-                    {% if event.link %}
-                        <a href="{{ event.link }}">Details</a>
-                    {% endif %}
-
-                    <p>Kategorie: {{ event.category }}</p>
-                </div>
-            </div>
+            {{ macros.event(event) }}
         {% endfor %}
     </div>
     </div>

ofu_app/templates/events/day_events.jinja

@@ -0,0 +1,15 @@
+{% extends 'events/events_wrapper.jinja' %}
+{% import '/macros/event_macros.jinja' as macros %}
+{% block headline %}
+    <h1 class="text-center">Events</h1>
+    <p class="text-center">{{ date.strftime("%d.%m.%Y") }}</p>
+{% endblock %}
+{% block content %}
+    <div class="container">
+    <div id="events" class="row">
+        {% for event in  events %}
+            {{ macros.event(event) }}
+        {% endfor %}
+    </div>
+    </div>
+{% endblock %}

ofu_app/templates/events/events_wrapper.jinja

@@ -0,0 +1,23 @@
+{% extends 'base.jinja' %}
+{% block js_extra %}
+    <script src="{{ static('js/events/sort_categories.js') }}"></script>
+{% endblock %}
+{% block css_extra %}
+    <link rel="stylesheet" href="{{ static('css/events/main.css') }}">
+{% endblock %}
+{% block bottom_nav %}
+    <nav id="food-nav" class="navbar navbar-default bg-light">
+        <div class="container">
+            <a class="nav-link" href="{{ url('day-events') }}">Today</a>
+            <a class="nav-link" href="{{ url('week-events') }}">Week</a>
+            <a class="nav-link" href="{{ url('all-events') }}">All</a>
+            <div id="category-jump-up" class="nav-link"><i class="fa fa-bars" aria-hidden="true"></i>
+                <div class="jump-up-menu">
+                    {% for category in categories %}
+                        <p class="jump-up-elem" onclick="showCategory('{{ category }}')">{{ category }}</p>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+    </nav>
+{% endblock %}

ofu_app/templates/events/week_events.jinja

@@ -1,28 +1,17 @@
-{% extends 'base.jinja' %}
+{% extends 'events/events_wrapper.jinja' %}
+{% import '/macros/event_macros.jinja' as macros %}
+{% block js_extra %}
+    <script src="{{ static('js/events/sort_categories.js') }}"></script>
+{% endblock %}
 {% block headline %}
-    <h1 class="text-center">Events an der OFU </h1>
-    <h2 class="text-center">{{ startdate.strftime("%d.%m.%Y") }} bis {{ enddate.strftime("%d.%m.%Y") }}</h2>
+    <h1 class="text-center">Events</h1>
+    <p class="text-center">{{ startdate.strftime("%d.%m.%Y") }} bis {{ enddate.strftime("%d.%m.%Y") }}</p>
 {% endblock %}
 {% block content %}
     <div class="container">
-        <div class="row">
+        <div id="events" class="row">
             {% for event in  events %}
-                <div class="col-6 p-3">
-                    <div class="p-3 border border-dark rounded bg-light text-dark">
-                        <h3>{{ event.title }}</h3>
-                        <p>Wann: {{ event.date.strftime("%d.%m.") }} ab {{ event.time.strftime("%H:%M") }}</p>
-                        <p>Wo:</p>
-                        <ul>
-                            {% for location in event.locations.all() %}
-                                <li>{{ location.name }}</li>
-                            {% endfor %}
-                        </ul>
-                        {% if event.link %}
-                            <a href="{{ event.link }}">Details</a>
-                        {% endif %}
-                        <p>Kategorie: {{ event.category }}</p>
-                    </div>
-                </div>
+                {{ macros.event(event) }}
             {% endfor %}
         </div>
     </div>

ofu_app/templates/food/home.jinja

@@ -4,10 +4,10 @@
     <h1 class="text-center">Essen an der OFU</h1>
 {% endblock %}
 {% block content %}
-    <div class="container text-dark">
-        <div class="row">
-            {{ macros.home_item(title='Daily Food', url_id='daily-food', description='Übersicht über die heutigen Essensmöglichkeiten für Studenten') }}
-            {{ macros.home_item(title='Weekly Food', url_id='weekly-food', description='Übersicht über die wöchentlichen Essensmöglichkeiten für Studenten.') }}
-        </div>
-    </div>
+{#    <div class="container text-dark">#}
+{#        <div class="row">#}
+{#            {{ macros.home_item(title='Daily Food', url_id='daily-food', description='Übersicht über die heutigen Essensmöglichkeiten für Studenten') }}#}
+{#            {{ macros.home_item(title='Weekly Food', url_id='weekly-food', description='Übersicht über die wöchentlichen Essensmöglichkeiten für Studenten.') }}#}
+{#        </div>#}
+{#    </div>#}
 {% endblock %}

ofu_app/templates/macros/event_macros.jinja

@@ -0,0 +1,22 @@
+{% macro event(event) -%}
+    <div class="col-sm-12 col-md-6 col p-3 event {{ event.category }}">
+        <div class="p-3 border border-dark rounded bg-light text-dark">
+            {% if event.link %}
+                <a href="{{ event.link }}">
+                    <h5>{{ event.title }}</h5></a>
+                <small>{{ event.category }}</small>
+            {% else %}
+                <h5>{{ event.title }}</h5>
+                <small>{{ event.category }}</small>
+            {% endif %}
+
+            <p class="mb-0">Wann: {{ event.date.strftime("%d.%m.") }}
+                ab {{ event.time.strftime("%H:%M") }}</p>
+            <p>Wo:
+                {% for location in event.locations.all() %}
+                    <span>{{ location.name }}</span>
+                {% endfor %}
+            </p>
+        </div>
+    </div>
+{% endmacro %}