78 lines
2.8 KiB
HTML
78 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="sk">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Správa používateľov</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<h1>Zoznam používateľov</h1>
|
|
<ul id="user-list">
|
|
{% for user in users %}
|
|
<li>
|
|
<img src="https://api.dicebear.com/8.x/initials/svg?seed={{ user[1] }}" alt="avatar" class="avatar">
|
|
<div class="user-info">
|
|
<strong>{{ user[1] }}</strong><br>
|
|
<small>Pridané: {{ user[2].strftime('%Y-%m-%d %H:%M:%S') }}</small>
|
|
</div>
|
|
<button class="delete-btn" onclick="deleteUser('{{ user[0] }}')">Odstrániť</button>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
|
|
<h2>Pridať používateľa</h2>
|
|
<input type="text" id="username" placeholder="Zadajte meno">
|
|
<button onclick="addUser()">Pridať</button>
|
|
|
|
<br><br>
|
|
<button onclick="showRandomUser()" class="random-btn">🎲 Náhodný používateľ</button>
|
|
<div id="random-user-display" style="margin-top:15px;"></div>
|
|
</div>
|
|
|
|
<script>
|
|
function addUser() {
|
|
const name = document.getElementById("username").value;
|
|
if (!name) {
|
|
alert("Zadajte meno!");
|
|
return;
|
|
}
|
|
fetch("/add_user", {
|
|
method: "POST",
|
|
body: new URLSearchParams({ name }),
|
|
headers: { "Content-Type": "application/x-www-form-urlencoded" }
|
|
})
|
|
.then(response => response.json())
|
|
.then(() => location.reload());
|
|
}
|
|
|
|
function deleteUser(id) {
|
|
fetch(`/delete_user/${id}`, { method: "POST" })
|
|
.then(response => response.json())
|
|
.then(() => location.reload());
|
|
}
|
|
|
|
function showRandomUser() {
|
|
fetch("/random_user")
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const display = document.getElementById("random-user-display");
|
|
if (data.error) {
|
|
display.innerHTML = `<p style="color:red;">${data.error}</p>`;
|
|
} else {
|
|
display.innerHTML = `
|
|
<div class="random-user-card">
|
|
<img src="https://api.dicebear.com/8.x/initials/svg?seed=${data.name}" class="avatar">
|
|
<strong>${data.name}</strong><br>
|
|
<small>Pridané: ${data.created_at}</small>
|
|
</div>`;
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |