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