169 lines
6.9 KiB
HTML
169 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %}MYP API Tester{% endblock %}</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.css') }}">
|
|
<style>
|
|
.sidebar {
|
|
min-height: calc(100vh - 56px);
|
|
background-color: #f8f9fa;
|
|
}
|
|
.api-response {
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
font-family: monospace;
|
|
background-color: #f5f5f5;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
}
|
|
.nav-link.active {
|
|
background-color: #0d6efd;
|
|
color: white !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="/">MYP API Tester</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if active_page == 'home' %}active{% endif %}" href="/">Home</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if active_page == 'printers' %}active{% endif %}" href="/admin/printers">Drucker</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if active_page == 'jobs' %}active{% endif %}" href="/admin/jobs">Druckaufträge</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if active_page == 'users' %}active{% endif %}" href="/admin/users">Benutzer</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if active_page == 'stats' %}active{% endif %}" href="/admin/stats">Statistiken</a>
|
|
</li>
|
|
</ul>
|
|
<ul class="navbar-nav ms-auto">
|
|
{% if current_user %}
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown">
|
|
{{ current_user.username }}
|
|
</a>
|
|
<ul class="dropdown-menu dropdown-menu-end">
|
|
<li><a class="dropdown-item" href="/logout">Abmelden</a></li>
|
|
</ul>
|
|
</li>
|
|
{% else %}
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/login">Anmelden</a>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container-fluid py-3">
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
{% for category, message in messages %}
|
|
<div class="alert alert-{{ category }}" role="alert">
|
|
{{ message }}
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
|
|
<script src="{{ url_for('static', filename='js/bootstrap.bundle.js') }}"></script>
|
|
<script>
|
|
function formatJson(jsonString) {
|
|
try {
|
|
const obj = JSON.parse(jsonString);
|
|
return JSON.stringify(obj, null, 2);
|
|
} catch (e) {
|
|
return jsonString;
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Format all response areas
|
|
document.querySelectorAll('.api-response').forEach(function(el) {
|
|
if (el.textContent) {
|
|
el.textContent = formatJson(el.textContent);
|
|
}
|
|
});
|
|
|
|
// Add event listener to show response areas
|
|
document.querySelectorAll('.api-form').forEach(function(form) {
|
|
form.addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
|
|
const url = this.getAttribute('data-url');
|
|
const method = this.getAttribute('data-method') || 'GET';
|
|
const responseArea = document.getElementById(this.getAttribute('data-response'));
|
|
const formData = new FormData(this);
|
|
const data = {};
|
|
|
|
formData.forEach((value, key) => {
|
|
if (value) {
|
|
try {
|
|
// Try to parse as JSON if it looks like JSON
|
|
if (value.trim().startsWith('{') || value.trim().startsWith('[')) {
|
|
data[key] = JSON.parse(value);
|
|
} else {
|
|
data[key] = value;
|
|
}
|
|
} catch (e) {
|
|
data[key] = value;
|
|
}
|
|
}
|
|
});
|
|
|
|
const options = {
|
|
method: method,
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
credentials: 'same-origin'
|
|
};
|
|
|
|
if (method !== 'GET' && method !== 'HEAD') {
|
|
options.body = JSON.stringify(data);
|
|
}
|
|
|
|
try {
|
|
responseArea.textContent = 'Sending request...';
|
|
const response = await fetch(url, options);
|
|
const responseText = await response.text();
|
|
|
|
try {
|
|
const formatted = formatJson(responseText);
|
|
responseArea.textContent = formatted;
|
|
} catch (e) {
|
|
responseArea.textContent = responseText;
|
|
}
|
|
|
|
if (this.hasAttribute('data-reload') && response.ok) {
|
|
setTimeout(() => {
|
|
window.location.reload();
|
|
}, 1000);
|
|
}
|
|
} catch (err) {
|
|
responseArea.textContent = 'Error: ' + err.message;
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{% block scripts %}{% endblock %}
|
|
</body>
|
|
</html> |