1
0

Create event page

This commit is contained in:
Marcel Schwarz 2022-07-31 18:53:53 +02:00
parent 259b8710d3
commit db38b92ffc
10 changed files with 2115 additions and 38 deletions

File diff suppressed because it is too large Load Diff

View File

@ -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}();

File diff suppressed because one or more lines are too long

View File

@ -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>
.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">
{% block extra_header_block %}{% endblock %}
</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"
integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D"
crossorigin="anonymous"></script>
{% block extra_scripts_block %}{% endblock %}
</body>
</html>

View File

@ -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">
<div class="container py-4">
<div class="p-5 mb-4 bg-light rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">Custom jumbotron</h1>
<p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the
one in previous versions of Bootstrap. Check out the examples below for how you can remix and
restyle it to your liking.</p>
<button class="btn btn-primary btn-lg" type="button">Example button</button>
<main class="mt-auto mb-auto w-100 cus-bg-image text-center">
<div class="container py-4 text-white">
<div class="row">
<h1 class="display-1 fw-bold">{{ next_event.name }} Event</h1>
</div>
<!-- countdown -->
<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">
<div class="col-md-6">
<div class="h-100 p-5 text-white bg-dark rounded-3">
<h2>Change the background</h2>
<p>Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron
look. Then, mix and match with additional component themes and more.</p>
<button class="btn btn-outline-light" type="button">Example button</button>
<!-- links -->
<div class="row justify-content-center my-5">
<div class="col-auto display-6 m-2">
<a href="#info">
<span class="badge rounded-pill text-bg-dark"><i class="bi-spotify"></i> Playlist</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-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 class="h-100 p-5 bg-light border rounded-3">
<h2>Add borders</h2>
<p>Or, keep it light and add a border for some added definition to the boundaries of your
content. Be sure to look under the hood at the source HTML here as we've adjusted the
alignment and sizing of both column's content for equal-height.</p>
<button class="btn btn-outline-secondary" type="button">Example button</button>
</div>
<!-- cards section -->
<div class="row align-items-md-stretch text-break" id="info">
<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-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 %}

View File

@ -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>

View File

@ -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">

View File

@ -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: