Create event page

clubhaus/homepage/static/homepage/new_assets/countdown/countdown.js

@@ -0,0 +1,20 @@
+/*
+ countdown.js v2.6.1 http://countdownjs.org
+ Copyright (c)2006-2014 Stephen M. McKamey.
+ Licensed under The MIT License.
+*/
+var countdown=function(){function z(a,b){var c=a.getTime();a.setMonth(a.getMonth()+b);return Math.round((a.getTime()-c)/864E5)}function v(a){var b=a.getTime(),c=new Date(b);c.setMonth(a.getMonth()+1);return Math.round((c.getTime()-b)/864E5)}function w(a,b){b=b instanceof Date||null!==b&&isFinite(b)?new Date(+b):new Date;if(!a)return b;var c=+a.value||0;if(c)return b.setTime(b.getTime()+c),b;(c=+a.milliseconds||0)&&b.setMilliseconds(b.getMilliseconds()+c);(c=+a.seconds||0)&&b.setSeconds(b.getSeconds()+
+c);(c=+a.minutes||0)&&b.setMinutes(b.getMinutes()+c);(c=+a.hours||0)&&b.setHours(b.getHours()+c);(c=+a.weeks||0)&&(c*=7);(c+=+a.days||0)&&b.setDate(b.getDate()+c);(c=+a.months||0)&&b.setMonth(b.getMonth()+c);(c=+a.millennia||0)&&(c*=10);(c+=+a.centuries||0)&&(c*=10);(c+=+a.decades||0)&&(c*=10);(c+=+a.years||0)&&b.setFullYear(b.getFullYear()+c);return b}function C(a,b){return x(a)+(1===a?p[b]:q[b])}function n(){}function k(a,b,c,e,l,d){0<=a[c]&&(b+=a[c],delete a[c]);b/=l;if(1>=b+1)return 0;if(0<=a[e]){a[e]=
++(a[e]+b).toFixed(d);switch(e){case "seconds":if(60!==a.seconds||isNaN(a.minutes))break;a.minutes++;a.seconds=0;case "minutes":if(60!==a.minutes||isNaN(a.hours))break;a.hours++;a.minutes=0;case "hours":if(24!==a.hours||isNaN(a.days))break;a.days++;a.hours=0;case "days":if(7!==a.days||isNaN(a.weeks))break;a.weeks++;a.days=0;case "weeks":if(a.weeks!==v(a.refMonth)/7||isNaN(a.months))break;a.months++;a.weeks=0;case "months":if(12!==a.months||isNaN(a.years))break;a.years++;a.months=0;case "years":if(10!==
+a.years||isNaN(a.decades))break;a.decades++;a.years=0;case "decades":if(10!==a.decades||isNaN(a.centuries))break;a.centuries++;a.decades=0;case "centuries":if(10!==a.centuries||isNaN(a.millennia))break;a.millennia++;a.centuries=0}return 0}return b}function A(a,b,c,e,l,d){var f=new Date;a.start=b=b||f;a.end=c=c||f;a.units=e;a.value=c.getTime()-b.getTime();0>a.value&&(f=c,c=b,b=f);a.refMonth=new Date(b.getFullYear(),b.getMonth(),15,12,0,0);try{a.millennia=0;a.centuries=0;a.decades=0;a.years=c.getFullYear()-
+b.getFullYear();a.months=c.getMonth()-b.getMonth();a.weeks=0;a.days=c.getDate()-b.getDate();a.hours=c.getHours()-b.getHours();a.minutes=c.getMinutes()-b.getMinutes();a.seconds=c.getSeconds()-b.getSeconds();a.milliseconds=c.getMilliseconds()-b.getMilliseconds();var g;0>a.milliseconds?(g=s(-a.milliseconds/1E3),a.seconds-=g,a.milliseconds+=1E3*g):1E3<=a.milliseconds&&(a.seconds+=m(a.milliseconds/1E3),a.milliseconds%=1E3);0>a.seconds?(g=s(-a.seconds/60),a.minutes-=g,a.seconds+=60*g):60<=a.seconds&&(a.minutes+=
+m(a.seconds/60),a.seconds%=60);0>a.minutes?(g=s(-a.minutes/60),a.hours-=g,a.minutes+=60*g):60<=a.minutes&&(a.hours+=m(a.minutes/60),a.minutes%=60);0>a.hours?(g=s(-a.hours/24),a.days-=g,a.hours+=24*g):24<=a.hours&&(a.days+=m(a.hours/24),a.hours%=24);for(;0>a.days;)a.months--,a.days+=z(a.refMonth,1);7<=a.days&&(a.weeks+=m(a.days/7),a.days%=7);0>a.months?(g=s(-a.months/12),a.years-=g,a.months+=12*g):12<=a.months&&(a.years+=m(a.months/12),a.months%=12);10<=a.years&&(a.decades+=m(a.years/10),a.years%=
+10,10<=a.decades&&(a.centuries+=m(a.decades/10),a.decades%=10,10<=a.centuries&&(a.millennia+=m(a.centuries/10),a.centuries%=10)));b=0;!(e&1024)||b>=l?(a.centuries+=10*a.millennia,delete a.millennia):a.millennia&&b++;!(e&512)||b>=l?(a.decades+=10*a.centuries,delete a.centuries):a.centuries&&b++;!(e&256)||b>=l?(a.years+=10*a.decades,delete a.decades):a.decades&&b++;!(e&128)||b>=l?(a.months+=12*a.years,delete a.years):a.years&&b++;!(e&64)||b>=l?(a.months&&(a.days+=z(a.refMonth,a.months)),delete a.months,
+7<=a.days&&(a.weeks+=m(a.days/7),a.days%=7)):a.months&&b++;!(e&32)||b>=l?(a.days+=7*a.weeks,delete a.weeks):a.weeks&&b++;!(e&16)||b>=l?(a.hours+=24*a.days,delete a.days):a.days&&b++;!(e&8)||b>=l?(a.minutes+=60*a.hours,delete a.hours):a.hours&&b++;!(e&4)||b>=l?(a.seconds+=60*a.minutes,delete a.minutes):a.minutes&&b++;!(e&2)||b>=l?(a.milliseconds+=1E3*a.seconds,delete a.seconds):a.seconds&&b++;if(!(e&1)||b>=l){var h=k(a,0,"milliseconds","seconds",1E3,d);if(h&&(h=k(a,h,"seconds","minutes",60,d))&&(h=
+k(a,h,"minutes","hours",60,d))&&(h=k(a,h,"hours","days",24,d))&&(h=k(a,h,"days","weeks",7,d))&&(h=k(a,h,"weeks","months",v(a.refMonth)/7,d))){e=h;var n,p=a.refMonth,q=p.getTime(),r=new Date(q);r.setFullYear(p.getFullYear()+1);n=Math.round((r.getTime()-q)/864E5);if(h=k(a,e,"months","years",n/v(a.refMonth),d))if(h=k(a,h,"years","decades",10,d))if(h=k(a,h,"decades","centuries",10,d))if(h=k(a,h,"centuries","millennia",10,d))throw Error("Fractional unit overflow");}}}finally{delete a.refMonth}return a}
+function d(a,b,c,e,d){var f;c=+c||222;e=0<e?e:NaN;d=0<d?20>d?Math.round(d):20:0;var k=null;"function"===typeof a?(f=a,a=null):a instanceof Date||(null!==a&&isFinite(a)?a=new Date(+a):("object"===typeof k&&(k=a),a=null));var g=null;"function"===typeof b?(f=b,b=null):b instanceof Date||(null!==b&&isFinite(b)?b=new Date(+b):("object"===typeof b&&(g=b),b=null));k&&(a=w(k,b));g&&(b=w(g,a));if(!a&&!b)return new n;if(!f)return A(new n,a,b,c,e,d);var k=c&1?1E3/30:c&2?1E3:c&4?6E4:c&8?36E5:c&16?864E5:6048E5,
+h,g=function(){f(A(new n,a,b,c,e,d),h)};g();return h=setInterval(g,k)}var s=Math.ceil,m=Math.floor,p,q,r,t,u,f,x,y;n.prototype.toString=function(a){var b=y(this),c=b.length;if(!c)return a?""+a:u;if(1===c)return b[0];a=r+b.pop();return b.join(t)+a};n.prototype.toHTML=function(a,b){a=a||"span";var c=y(this),e=c.length;if(!e)return(b=b||u)?"\x3c"+a+"\x3e"+b+"\x3c/"+a+"\x3e":b;for(var d=0;d<e;d++)c[d]="\x3c"+a+"\x3e"+c[d]+"\x3c/"+a+"\x3e";if(1===e)return c[0];e=r+c.pop();return c.join(t)+e};n.prototype.addTo=
+function(a){return w(this,a)};y=function(a){var b=[],c=a.millennia;c&&b.push(f(c,10));(c=a.centuries)&&b.push(f(c,9));(c=a.decades)&&b.push(f(c,8));(c=a.years)&&b.push(f(c,7));(c=a.months)&&b.push(f(c,6));(c=a.weeks)&&b.push(f(c,5));(c=a.days)&&b.push(f(c,4));(c=a.hours)&&b.push(f(c,3));(c=a.minutes)&&b.push(f(c,2));(c=a.seconds)&&b.push(f(c,1));(c=a.milliseconds)&&b.push(f(c,0));return b};d.MILLISECONDS=1;d.SECONDS=2;d.MINUTES=4;d.HOURS=8;d.DAYS=16;d.WEEKS=32;d.MONTHS=64;d.YEARS=128;d.DECADES=256;
+d.CENTURIES=512;d.MILLENNIA=1024;d.DEFAULTS=222;d.ALL=2047;var D=d.setFormat=function(a){if(a){if("singular"in a||"plural"in a){var b=a.singular||[];b.split&&(b=b.split("|"));var c=a.plural||[];c.split&&(c=c.split("|"));for(var d=0;10>=d;d++)p[d]=b[d]||p[d],q[d]=c[d]||q[d]}"string"===typeof a.last&&(r=a.last);"string"===typeof a.delim&&(t=a.delim);"string"===typeof a.empty&&(u=a.empty);"function"===typeof a.formatNumber&&(x=a.formatNumber);"function"===typeof a.formatter&&(f=a.formatter)}},B=d.resetFormat=
+function(){p=" millisecond; second; minute; hour; day; week; month; year; decade; century; millennium".split(";");q=" milliseconds; seconds; minutes; hours; days; weeks; months; years; decades; centuries; millennia".split(";");r=" and ";t=", ";u="";x=function(a){return a};f=C};d.setLabels=function(a,b,c,d,f,k,m){D({singular:a,plural:b,last:c,delim:d,empty:f,formatNumber:k,formatter:m})};d.resetLabels=B;B();"undefined"!==typeof module&&module.exports?module.exports=d:"undefined"!==typeof window&&("function"===
+typeof window.define&&"undefined"!==typeof window.define.amd)&&window.define("countdown",[],function(){return d});return d}();

clubhaus/homepage/templates/homepage/base.html

@@ -22,18 +22,9 @@
 
     <link href="{% static 'homepage/new_assets/bootstrap/bootstrap.min.css' %}" rel="stylesheet">
     <link href="{% static 'homepage/new_assets/self/custom.css' %}" rel="stylesheet">
+    <link href="{% static 'homepage/new_assets/bootstrap-icons/bootstrap-icons.css' %}" rel="stylesheet">
 
-    <style>
+    {% block extra_header_block %}{% endblock %}
-        .bg-logo {
-            background-image: url("{% static 'homepage/logo.svg' %}");
-            background-repeat: no-repeat;
-            background-position: center;
-            background-size: contain;
-        }
-    </style>
-
-    <!-- TODO: Replace with downloaded version -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
 </head>
 <body class="bg-dark h-100"> <!-- d-flex h-100 text-center text-white bg-dark -->
 
@@ -64,9 +55,7 @@
 </div>
 
 <script src="{% static 'homepage/new_assets/bootstrap/bootstrap.min.js' %}"></script>
-<script defer src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"
+{% block extra_scripts_block %}{% endblock %}
-        integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D"
-        crossorigin="anonymous"></script>
 
 </body>
 </html>

clubhaus/homepage/templates/homepage/events.html

@@ -1,38 +1,205 @@
 {% extends 'homepage/base.html' %}
 {% load static %}
+{% load i18n %}
+
+{% block extra_header_block %}
+    <style>
+        .cus-bg-image {
+            background-image: url("{% static 'homepage/image01.jpg' %}");
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: cover;
+        }
+    </style>
+{% endblock %}
+
+{% block extra_scripts_block %}
+    <!-- countdown -->
+    <script src="{% static 'homepage/new_assets/countdown/countdown.js' %}"></script>
+    <script>
+        const timerId =
+            countdown(
+                function (ts) {
+                    document.getElementById("timerDays").textContent = ts.days;
+                    document.getElementById("timerHours").textContent = ts.hours;
+                    document.getElementById("timerMinutes").textContent = ts.minutes;
+                    document.getElementById("timerSeconds").textContent = ts.seconds;
+                },
+                new Date("{{ next_event.date.isoformat }}"),
+                countdown.DAYS | countdown.HOURS | countdown.MINUTES | countdown.SECONDS);
+    </script>
+{% endblock %}
 
 {% block main %}
-    <main class="mt-auto mb-auto w-100">
+    <main class="mt-auto mb-auto w-100 cus-bg-image text-center">
-        <div class="container py-4">
+        <div class="container py-4 text-white">
-            <div class="p-5 mb-4 bg-light rounded-3">
+
-                <div class="container-fluid py-5">
+            <div class="row">
-                    <h1 class="display-5 fw-bold">Custom jumbotron</h1>
+                <h1 class="display-1 fw-bold">{{ next_event.name }} Event</h1>
-                    <p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the
+            </div>
-                        one in previous versions of Bootstrap. Check out the examples below for how you can remix and
+
-                        restyle it to your liking.</p>
+            <!-- countdown -->
-                    <button class="btn btn-primary btn-lg" type="button">Example button</button>
+            <div class="row my-4 text-center fw-bold">
+                <div class="col-3">
+                    <div class="display-2" id="timerDays"></div>
+                    <div class="display-7">Tage</div>
+                </div>
+                <div class="col-3">
+                    <div class="display-2" id="timerHours"></div>
+                    <div class="display-7">Stunden</div>
+                </div>
+                <div class="col-3">
+                    <div class="display-2" id="timerMinutes"></div>
+                    <div class="display-7">Minuten</div>
+                </div>
+                <div class="col-3">
+                    <div class="display-2" id="timerSeconds"></div>
+                    <div class="display-7">Sekunden</div>
                 </div>
             </div>
 
-            <div class="row align-items-md-stretch">
+            <!-- links -->
-                <div class="col-md-6">
+            <div class="row justify-content-center my-5">
-                    <div class="h-100 p-5 text-white bg-dark rounded-3">
+                <div class="col-auto display-6 m-2">
-                        <h2>Change the background</h2>
+                    <a href="#info">
-                        <p>Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron
+                        <span class="badge rounded-pill text-bg-dark"><i class="bi-spotify"></i> Playlist</span>
-                            look. Then, mix and match with additional component themes and more.</p>
+                    </a>
-                        <button class="btn btn-outline-light" type="button">Example button</button>
+                </div>
+                <div class="col-auto display-6 m-2">
+                    <a href="#info">
+                        <span class="badge rounded-pill text-bg-dark"><i class="bi-cloud"></i> Wetter</span>
+                    </a>
+                </div>
+                <div class="col-auto display-6 m-2">
+                    <a href="#info">
+                        <span class="badge rounded-pill text-bg-dark"><i class="bi-info-lg"></i> Info</span>
+                    </a>
+                </div>
+            </div>
+
+            <!-- voting -->
+            <div class="row mx-1 mb-5">
+                <div class="card text-bg-dark">
+                    <div class="card-header display-5 fw-bold text-start">
+                        Terminabstimmung
+                    </div>
+                    <div class="card-body">
+                        <h5 class="card-title text-start">Aktuelle Ergebnisse</h5>
+
+                        <!-- results table -->
+                        <div class="table-responsive">
+                        <table class="table text-white text-start align-middle ">
+                            <thead>
+                            <tr>
+                                <th scope="col">Name</th>
+                                <th scope="col">15. August</th>
+                                <th scope="col">7. August</th>
+                                <th scope="col">27. August</th>
+                                <th scope="col">1. September</th>
+                            </tr>
+                            </thead>
+                            <tbody class="table-group-divider">
+                            <tr>
+                                <td>Marcel</td>
+                                <td><i class="fs-4 text-success bi-check-circle"></i></td>
+                                <td><i class="fs-4 text-success bi-check-circle"></i></td>
+                                <td><i class="fs-4 text-success bi-check-circle"></i></td>
+                                <td><i class="fs-4 text-success bi-check-circle"></i></td>
+                            </tr>
+                            <tr>
+                                <td>Tim</td>
+                                <td><i class="fs-4 text-success bi-check-circle"></i></td>
+                                <td><i class="fs-4 text-danger bi-x-circle"></i></td>
+                                <td><i class="fs-4 text-success bi-check-circle"></i></td>
+                                <td><i class="fs-4 text-danger bi-x-circle"></i></td>
+                            </tr>
+                            <tr>
+                                <td>Dome</td>
+                                <td><i class="fs-4 text-danger bi-x-circle"></i></td>
+                                <td><i class="fs-4 text-success bi-check-circle"></i></td>
+                                <td><i class="fs-4 text-success bi-check-circle"></i></td>
+                                <td><i class="fs-4 text-danger bi-x-circle"></i></td>
+                            </tr>
+                            </tbody>
+                        </table>
+                            </div>
+
+                        <button type="button" class="btn btn-primary float-end" data-bs-toggle="modal"
+                                data-bs-target="#votingModal">
+                            Jetzt abstimmen
+                        </button>
                     </div>
                 </div>
-                <div class="col-md-6">
+            </div>
-                    <div class="h-100 p-5 bg-light border rounded-3">
+
-                        <h2>Add borders</h2>
+            <!-- cards section -->
-                        <p>Or, keep it light and add a border for some added definition to the boundaries of your
+            <div class="row align-items-md-stretch text-break" id="info">
-                            content. Be sure to look under the hood at the source HTML here as we've adjusted the
+                <div class="col-lg-3 col-md-6 mb-lg-0 mb-md-4 mb-3">
-                            alignment and sizing of both column's content for equal-height.</p>
+                    <div class="h-100 p-3 text-white bg-dark rounded-3">
-                        <button class="btn btn-outline-secondary" type="button">Example button</button>
+                        <h2><i class="bi-clock display-2"></i></h2>
+                        <strong class="fs-2 fw-bold"><em>
+                            {{ next_event.date|date:"d.m.Y" }}
+                            <br>
+                            ab {{ next_event.date|date:"H:i" }} Uhr
+                        </em></strong>
+                    </div>
+                </div>
+
+                <div class="col-lg-3 col-md-6 mb-lg-0 mb-md-4 mb-3">
+                    <div class="h-100 p-3 text-white bg-dark rounded-3">
+                        <h2><i class="bi-pin-map display-2"></i></h2>
+                        <strong class="fs-2 fw-bold"><em>{{ next_event.location|linebreaksbr }}</em></strong>
+                    </div>
+                </div>
+
+                <div class="col-lg-3 col-md-6 mb-lg-0 mb-md-4 mb-3">
+                    <div class="h-100 p-3 text-white bg-dark rounded-3">
+                        <h2><i class="bi-cup-straw display-2"></i></h2>
+                        <strong class="fs-2 fw-bold"><em>{{ next_event.beverages|linebreaksbr }}</em></strong>
+                    </div>
+                </div>
+
+                <div class="col-lg-3 col-md-6 mb-lg-0 mb-md-4 mb-3">
+                    <div class="h-100 p-3 text-white bg-dark rounded-3">
+                        <h2><i class="bi-cart2 display-2"></i></h2>
+                        <strong class="fs-2 fw-bold"><em>{{ next_event.food|linebreaksbr }}</em></strong>
                     </div>
                 </div>
             </div>
         </div>
     </main>
+
+    <!-- voting modal -->
+    <div class="modal fade" id="votingModal" tabindex="-1" aria-labelledby="votingModal"
+         aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content text-bg-dark">
+                <form>
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="exampleModalLabel">Abstimmung</h5>
+                        <button type="button" class="btn-close bg-white" data-bs-dismiss="modal"
+                                aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        {% csrf_token %}
+                        <div class="mb-3">
+                            <label for="nameInput" class="form-label">Name</label>
+                            <input type="text" class="form-control" id="nameInput">
+                        </div>
+                        {% language 'de' %}
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
+                                <label class="form-check-label" for="flexCheckDefault">
+                                    {{ next_event.date|date:'l, d. F H:i' }}
+                                </label>
+                            </div>
+                        {% endlanguage %}
+                    </div>
+                    <div class="modal-footer">
+                        <button type="submit" class="btn btn-primary">Abstimmen</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
 {% endblock %}

clubhaus/homepage/templates/homepage/index.html

@@ -1,6 +1,17 @@
 {% extends 'homepage/base.html' %}
 {% load static %}
 
+{% block extra_header_block %}
+    <style>
+        .bg-logo {
+            background-image: url("{% static 'homepage/logo.svg' %}");
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: contain;
+        }
+    </style>
+{% endblock %}
+
 {% block main %}
     <div class="d-flex h-100 mx-3">
         <main class="d-flex flex-grow-1 w-100 my-5 mx-auto bg-logo" style="max-width: 42rem"></main>

clubhaus/homepage/templates/homepage/tobacco.html

@@ -3,6 +3,10 @@
 
 {% block site_name %}Tobacco Card{% endblock %}
 
+{% block extra_scripts_block %}
+    <script defer src="{% static 'homepage/new_assets/masonry/masonry.pkgd.min.js' %}"></script>
+{% endblock %}
+
 {% block main %}
     <main class="container text-white w-100">
         <div class="row text-center mb-3">

clubhaus/homepage/views.py

@@ -13,7 +13,7 @@ def index(request: HttpRequest) -> django.http.HttpResponse:
 
 
 def tobacco(request: HttpRequest) -> django.http.HttpResponse:
-    context = {'tobaccos': Tobacco.objects.all().order_by('in_stock').reverse()}
+    context = {'tobaccos': Tobacco.objects.all().order_by('-in_stock')}
     return render(request, 'homepage/tobacco.html', context)
 
 
@@ -26,6 +26,7 @@ def events(request: HttpRequest) -> django.http.HttpResponse:
 
 def voting(request: HttpRequest) -> django.http.HttpResponse:
     request.session.clear_expired()
+
     ip = request.META.get("REMOTE_ADDR")
     rate_cache: django.core.cache.BaseCache = cache
     if ip not in rate_cache: