mirror of
https://github.com/PhoenixTwoFive/karaoqueue.git
synced 2025-05-20 03:21:47 +02:00
Phillip Kühne
865df5d588
Implement an EventID saved in settings. Currently this is used to scope clientIDs and entryIDs to an event. The client checks the event currently going on on the server, and discards its localstorage (containing the clientID) if it has changed
153 lines
6.5 KiB
HTML
153 lines
6.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
<meta name="color-scheme" content="light dark" />
|
|
<link rel="icon" href="favicon.ico">
|
|
<link rel="manifest" href="/static/manifest.webmanifest">
|
|
|
|
<title>{% block title %}{% endblock %} - KaraoQueue</title>
|
|
|
|
<!-- Bootstrap-Tables -->
|
|
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.css">
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
|
|
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
|
|
|
<!-- Custom styles for this template -->
|
|
<link href="static/css/style.css" rel="stylesheet">
|
|
|
|
<!-- Fontawesome Icons -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
|
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
|
|
<!-- Bootstraptoggle -->
|
|
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
|
|
|
|
<!-- Active Theme -->
|
|
<link href="static/css/themes/{{config['THEME']}}" rel="stylesheet">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
|
|
<a class="navbar-brand" href="/">KaraoQueue</a>
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
|
|
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
|
<ul class="navbar-nav mr-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/">Warteliste</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/list">Songsuche</a>
|
|
</li>
|
|
{% if auth %}
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/plays">Abspielliste</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/settings">Einstellungen</a>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
<!--<form class="form-inline my-2 my-lg-0">
|
|
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
|
|
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
|
</form>-->
|
|
</div>
|
|
</nav>
|
|
<div class="site">
|
|
<main role="main" class="container">
|
|
{% block content %}{% endblock %}
|
|
</main><!-- /.container -->
|
|
</div>
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="container text-center py-3">
|
|
{% if not auth %}
|
|
<a href="/login" class="ml-1 mr-1"><i class="fas fa-sign-in-alt mr-1"></i><span>Login</span></a>
|
|
{% endif %}
|
|
<a href="https://github.com/PhoenixTwoFive/karaoqueue"
|
|
class="ml-1 mr-1"><i class="fab fa-github mr-1"></i><span>Github</span></a>
|
|
<span class="text-muted"> {{karaoqueue_version}} - 2019-23 - Phillip
|
|
Kühne</span>
|
|
</div>
|
|
</footer>
|
|
<!-- Footer -->
|
|
<!-- Bootstrap core JavaScript
|
|
================================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
|
|
integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous">
|
|
</script>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
|
|
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous">
|
|
</script>
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
|
|
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">
|
|
</script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"
|
|
integrity="sha256-4F7e4JsAJyLUdpP7Q8Sah866jCOhv72zU5E8lIRER4w=" crossorigin="anonymous">
|
|
</script>
|
|
<script src="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.js"></script>
|
|
<script
|
|
src="https://unpkg.com/bootstrap-table@1.21.2/dist/extensions/auto-refresh/bootstrap-table-auto-refresh.min.js"></script>
|
|
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
|
|
{% block extrajs %}{% endblock %}
|
|
<script>
|
|
$(document).ready(function () {
|
|
checkEventID()
|
|
// get current URL path and assign 'active' class
|
|
var pathname = window.location.pathname;
|
|
$('.navbar-nav > li > a[href="' + pathname + '"]').parent().addClass('active');
|
|
$('[data-toggle="tooltip"]').tooltip()
|
|
})
|
|
|
|
function create_UUID() {
|
|
var dt = new Date().getTime();
|
|
var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
|
|
var r = (dt + Math.random() * 16) % 16 | 0;
|
|
dt = Math.floor(dt / 16);
|
|
return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
|
|
});
|
|
return uuid;
|
|
}
|
|
|
|
function loadOrGenerateClientId() {
|
|
if (!localStorage.getItem("clientId")) {
|
|
localStorage.setItem("clientId", create_UUID())
|
|
}
|
|
}
|
|
|
|
function getClientId() {
|
|
return localStorage.getItem("clientId")
|
|
}
|
|
|
|
async function checkEventID() {
|
|
const localEventID = localStorage.getItem("eventID")
|
|
const resp = await fetch("/api/events/current")
|
|
const respJson = await resp.json()
|
|
const remoteEventID = respJson.event
|
|
|
|
if (localEventID == null || localEventID != remoteEventID) {
|
|
localStorage.clear()
|
|
localStorage.setItem("eventID", remoteEventID)
|
|
loadOrGenerateClientId()
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |