333 lines
16 KiB
HTML
333 lines
16 KiB
HTML
{% if session['theme'] == 'darkmode' %}
|
|
{% extends "base_dark.html" %}
|
|
{% else %}
|
|
{% extends "base.html" %}
|
|
{% endif %}
|
|
|
|
{% block title %}Events{% endblock %}
|
|
|
|
{% block content %}
|
|
<style>
|
|
.events-flex-row {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
gap: 30px;
|
|
margin-top: 40px;
|
|
flex-wrap: nowrap;
|
|
}
|
|
.events-flex-row .form-container {
|
|
margin: 0;
|
|
min-width: 320px;
|
|
max-width: 400px;
|
|
flex: 1 1 320px;
|
|
}
|
|
.events-back-btn-row {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 40px;
|
|
}
|
|
.events-form-light button[type="submit"] {
|
|
width: 100%;
|
|
padding: 14px 20px;
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
border: 2px solid #007BFF;
|
|
color: #007BFF;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
border-radius: 6px;
|
|
margin-top: 16px;
|
|
margin-bottom: 10px;
|
|
transition: background 0.2s, color 0.2s;
|
|
}
|
|
.events-form-light button[type="submit"]:hover {
|
|
background: #007BFF;
|
|
color: #fff;
|
|
}
|
|
.events-back-btn-light {
|
|
min-width: 150px;
|
|
text-align: center;
|
|
padding: 14px 20px;
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
border: 2px solid #007BFF;
|
|
color: #007BFF;
|
|
background: transparent;
|
|
border-radius: 6px;
|
|
margin-top: 10px;
|
|
transition: background 0.2s, color 0.2s;
|
|
display: inline-block;
|
|
}
|
|
.events-back-btn-light:hover {
|
|
background: #007BFF;
|
|
color: #fff;
|
|
}
|
|
.events-back-btn-dark {
|
|
width: auto;
|
|
min-width: unset;
|
|
max-width: unset;
|
|
padding: 14px 28px;
|
|
display: inline-block;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
{% if session['theme'] == 'darkmode' %}
|
|
<div>
|
|
<div class="events-flex-row">
|
|
<div class="form-container">
|
|
<h2>Event hinzufügen</h2>
|
|
<form action="{{ url_for('events') }}" method="post">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|
<label for="event_name">Event Name:</label>
|
|
<input type="text" id="event_name" name="event_name" required>
|
|
<label for="community_feedback">Hat es der Community gefallen?</label>
|
|
<select id="community_feedback" name="community_feedback" required>
|
|
<option value="top">Ja</option>
|
|
<option value="flop">Nein</option>
|
|
<option value="etwas">Teilweise</option>
|
|
</select>
|
|
<label for="players">Spieleranzahl:</label>
|
|
<input type="number" id="players" name="players" required>
|
|
<label for="time">Uhrzeit:</label>
|
|
<input type="time" id="time" name="time" required>
|
|
<label for="weekday">Wochentag:</label>
|
|
<select id="weekday" name="weekday" required>
|
|
<option value="Montag">Montag</option>
|
|
<option value="Dienstag">Dienstag</option>
|
|
<option value="Mittwoch">Mittwoch</option>
|
|
<option value="Donnerstag">Donnerstag</option>
|
|
<option value="Freitag">Freitag</option>
|
|
<option value="Samstag">Samstag</option>
|
|
<option value="Sonntag">Sonntag</option>
|
|
</select>
|
|
<button type="submit" class="neon-button neon1"><span>Event hinzufügen</span></button>
|
|
</form>
|
|
</div>
|
|
<div class="form-container">
|
|
<h2>Bestes Event berechnen</h2>
|
|
<form action="{{ url_for('events') }}" method="get">
|
|
<label for="current_players">Aktuelle Spieler:</label>
|
|
<input type="number" id="current_players" name="current_players" required>
|
|
<label for="current_time">Aktuelle Uhrzeit:</label>
|
|
<input type="time" id="current_time" name="current_time" required>
|
|
<label for="current_weekday">Aktueller Wochentag:</label>
|
|
<select id="current_weekday" name="current_weekday" required>
|
|
<option value="Montag">Montag</option>
|
|
<option value="Dienstag">Dienstag</option>
|
|
<option value="Mittwoch">Mittwoch</option>
|
|
<option value="Donnerstag">Donnerstag</option>
|
|
<option value="Freitag">Freitag</option>
|
|
<option value="Samstag">Samstag</option>
|
|
<option value="Sonntag">Sonntag</option>
|
|
</select>
|
|
<button type="submit" name="calculate_best" value="1" id="calculateBestEvent" class="neon-button neon2"><span>Bestes Event berechnen</span></button>
|
|
</form>
|
|
{% if best_events %}
|
|
<h2>Top 5 Events</h2>
|
|
<div id="barChartContainer" style="width:100%;height:260px;display:flex;align-items:end;justify-content:space-around;gap:10px;margin-top:30px;">
|
|
</div>
|
|
<script>
|
|
const bestEvents = {{ best_events|tojson }};
|
|
const colors = ["#00fff7", "#ff00ff", "#39ff14", "#ffb300", "#ff4d4d"];
|
|
function animateBars() {
|
|
const maxRating = Math.max(...bestEvents.map(e => e.rating));
|
|
const container = document.getElementById('barChartContainer');
|
|
container.innerHTML = '';
|
|
bestEvents.forEach((event, idx) => {
|
|
const bar = document.createElement('div');
|
|
bar.style.height = '0px';
|
|
bar.style.width = '60px';
|
|
bar.style.background = colors[idx % colors.length];
|
|
bar.style.borderRadius = '8px 8px 0 0';
|
|
bar.style.display = 'flex';
|
|
bar.style.flexDirection = 'column';
|
|
bar.style.alignItems = 'center';
|
|
bar.style.justifyContent = 'flex-end';
|
|
bar.style.transition = 'height 1s cubic-bezier(.68,-0.55,.27,1.55)';
|
|
bar.style.position = 'relative';
|
|
|
|
const label = document.createElement('div');
|
|
label.innerText = event.name;
|
|
label.style.position = 'absolute';
|
|
label.style.bottom = '-32px';
|
|
label.style.width = '100%';
|
|
label.style.textAlign = 'center';
|
|
label.style.fontSize = '13px';
|
|
label.style.color = '#fff';
|
|
label.style.wordBreak = 'break-word';
|
|
|
|
const value = document.createElement('div');
|
|
value.innerText = event.rating;
|
|
value.style.position = 'absolute';
|
|
value.style.top = '-28px';
|
|
value.style.width = '100%';
|
|
value.style.textAlign = 'center';
|
|
value.style.fontWeight = 'bold';
|
|
value.style.fontSize = '15px';
|
|
value.style.color = '#fff';
|
|
|
|
bar.appendChild(label);
|
|
bar.appendChild(value);
|
|
container.appendChild(bar);
|
|
|
|
setTimeout(() => {
|
|
bar.style.height = (event.rating / (maxRating || 1) * 180 + 30) + 'px';
|
|
}, 100 + idx * 120);
|
|
});
|
|
}
|
|
window.addEventListener('DOMContentLoaded', animateBars);
|
|
</script>
|
|
{% elif best_event %}
|
|
<h2>Bestes Event</h2>
|
|
<p>{{ best_event.name }} - Rating: {{ best_event.rating }} (Top: {{ best_event.top }}, Flop: {{ best_event.flop }})</p>
|
|
{% endif %}
|
|
</div>
|
|
<div class="form-container">
|
|
<h2>Protokollierte Events</h2>
|
|
<ul style="list-style-type: none; padding: 0;">
|
|
{% set event_names = [] %}
|
|
{% for event in events %}
|
|
{% if event.name not in event_names %}
|
|
<li style="background: rgba(255,255,255,0.35); margin: 5px 0; padding: 10px; border-radius: 4px;">{{ event.name }}</li>
|
|
{% set event_names = event_names.append(event.name) %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="events-back-btn-row">
|
|
<a href="javascript:window.history.back()" class="neon-button neon3 events-back-btn-dark"><span>Zurück</span></a>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div>
|
|
<div class="events-flex-row">
|
|
<div class="form-container">
|
|
<h2>Event hinzufügen</h2>
|
|
<form action="{{ url_for('events') }}" method="post" class="events-form-light">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|
<label for="event_name">Event Name:</label>
|
|
<input type="text" id="event_name" name="event_name" required>
|
|
<label for="community_feedback">Hat es der Community gefallen?</label>
|
|
<select id="community_feedback" name="community_feedback" required>
|
|
<option value="top">Ja</option>
|
|
<option value="flop">Nein</option>
|
|
<option value="etwas">Teilweise</option>
|
|
</select>
|
|
<label for="players">Spieleranzahl:</label>
|
|
<input type="number" id="players" name="players" required>
|
|
<label for="time">Uhrzeit:</label>
|
|
<input type="time" id="time" name="time" required>
|
|
<label for="weekday">Wochentag:</label>
|
|
<select id="weekday" name="weekday" required>
|
|
<option value="Montag">Montag</option>
|
|
<option value="Dienstag">Dienstag</option>
|
|
<option value="Mittwoch">Mittwoch</option>
|
|
<option value="Donnerstag">Donnerstag</option>
|
|
<option value="Freitag">Freitag</option>
|
|
<option value="Samstag">Samstag</option>
|
|
<option value="Sonntag">Sonntag</option>
|
|
</select>
|
|
<button type="submit">Event hinzufügen</button>
|
|
</form>
|
|
</div>
|
|
<div class="form-container">
|
|
<h2>Bestes Event berechnen</h2>
|
|
<form action="{{ url_for('events') }}" method="get" class="events-form-light">
|
|
<label for="current_players">Aktuelle Spieler:</label>
|
|
<input type="number" id="current_players" name="current_players" required>
|
|
<label for="current_time">Aktuelle Uhrzeit:</label>
|
|
<input type="time" id="current_time" name="current_time" required>
|
|
<label for="current_weekday">Aktueller Wochentag:</label>
|
|
<select id="current_weekday" name="current_weekday" required>
|
|
<option value="Montag">Montag</option>
|
|
<option value="Dienstag">Dienstag</option>
|
|
<option value="Mittwoch">Mittwoch</option>
|
|
<option value="Donnerstag">Donnerstag</option>
|
|
<option value="Freitag">Freitag</option>
|
|
<option value="Samstag">Samstag</option>
|
|
<option value="Sonntag">Sonntag</option>
|
|
</select>
|
|
<button type="submit" name="calculate_best" value="1" id="calculateBestEvent">Bestes Event berechnen</button>
|
|
</form>
|
|
{% if best_events %}
|
|
<h2>Top 5 Events</h2>
|
|
<div id="barChartContainer" style="width:100%;height:260px;display:flex;align-items:end;justify-content:space-around;gap:10px;margin-top:30px;">
|
|
</div>
|
|
<script>
|
|
const bestEvents = {{ best_events|tojson }};
|
|
const colors = ["#00fff7", "#ff00ff", "#39ff14", "#ffb300", "#ff4d4d"];
|
|
function animateBars() {
|
|
const maxRating = Math.max(...bestEvents.map(e => e.rating));
|
|
const container = document.getElementById('barChartContainer');
|
|
container.innerHTML = '';
|
|
bestEvents.forEach((event, idx) => {
|
|
const bar = document.createElement('div');
|
|
bar.style.height = '0px';
|
|
bar.style.width = '60px';
|
|
bar.style.background = colors[idx % colors.length];
|
|
bar.style.borderRadius = '8px 8px 0 0';
|
|
bar.style.display = 'flex';
|
|
bar.style.flexDirection = 'column';
|
|
bar.style.alignItems = 'center';
|
|
bar.style.justifyContent = 'flex-end';
|
|
bar.style.transition = 'height 1s cubic-bezier(.68,-0.55,.27,1.55)';
|
|
bar.style.position = 'relative';
|
|
|
|
const label = document.createElement('div');
|
|
label.innerText = event.name;
|
|
label.style.position = 'absolute';
|
|
label.style.bottom = '-32px';
|
|
label.style.width = '100%';
|
|
label.style.textAlign = 'center';
|
|
label.style.fontSize = '13px';
|
|
label.style.color = '#fff';
|
|
label.style.wordBreak = 'break-word';
|
|
|
|
const value = document.createElement('div');
|
|
value.innerText = event.rating;
|
|
value.style.position = 'absolute';
|
|
value.style.top = '-28px';
|
|
value.style.width = '100%';
|
|
value.style.textAlign = 'center';
|
|
value.style.fontWeight = 'bold';
|
|
value.style.fontSize = '15px';
|
|
value.style.color = '#fff';
|
|
|
|
bar.appendChild(label);
|
|
bar.appendChild(value);
|
|
container.appendChild(bar);
|
|
|
|
setTimeout(() => {
|
|
bar.style.height = (event.rating / (maxRating || 1) * 180 + 30) + 'px';
|
|
}, 100 + idx * 120);
|
|
});
|
|
}
|
|
window.addEventListener('DOMContentLoaded', animateBars);
|
|
</script>
|
|
{% elif best_event %}
|
|
<h2>Bestes Event</h2>
|
|
<p>{{ best_event.name }} - Rating: {{ best_event.rating }} (Top: {{ best_event.top }}, Flop: {{ best_event.flop }})</p>
|
|
{% endif %}
|
|
</div>
|
|
<div class="form-container">
|
|
<h2>Protokollierte Events</h2>
|
|
<ul style="list-style-type: none; padding: 0;">
|
|
{% set event_names = [] %}
|
|
{% for event in events %}
|
|
{% if event.name not in event_names %}
|
|
<li style="background: rgba(255,255,255,0.5); margin: 5px 0; padding: 10px; border-radius: 4px;">{{ event.name }}</li>
|
|
{% set event_names = event_names.append(event.name) %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="events-back-btn-row">
|
|
<a href="javascript:window.history.back()" class="events-back-btn-light">Zurück</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endblock %}
|