DSB-PlugIn/AddOn/Datenexport_Zeiterfassung/webapi_test.html

161 lines
5.6 KiB
HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<title>WebAPI - Test</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; max-width: 600px; }
label, select, input, button { display: block; width: 100%; margin-top: 10px; padding: 8px; }
pre { background: #f0f0f0; padding: 10px; white-space: pre-wrap; max-height: 300px; overflow-y: auto; }
#step2, #step3 { margin-top: 20px; }
</style>
</head>
<body>
<h1>WebAPI - Test</h1>
<div id="step1">
<label for="apiUrl">WebAPI URL (z.B. https://time.mycompany.de/zsvc):</label>
<input type="text" id="apiUrl" placeholder="https://time.mycompany.de/zsvc" />
<label for="token">API Token:</label>
<input type="text" id="token" placeholder="API Token hier eingeben" />
<button id="connectBtn">Verbinden und Daten laden</button>
</div>
<div id="step2" style="display:none;">
<label for="organizationUnit">Organisationseinheit:</label>
<select id="organizationUnit"></select>
<label for="exportDefinition">Export-Definition:</label>
<select id="exportDefinition"></select>
<label for="dateFrom">Von (dd.mm.yyyy):</label>
<input type="date" id="dateFrom" />
<label for="dateUntil">Bis (dd.mm.yyyy):</label>
<input type="date" id="dateUntil" />
<button id="requestExport">Export anfragen</button>
</div>
<div id="step3" style="margin-top: 20px;">
<h2>Export Daten</h2>
<pre id="exportResult">Noch keine Daten</pre>
</div>
<script>
let baseUrl = '';
let token = '';
let apiSite = '';
async function apiRequest(baseUrl, token, apiSite, method, endpoint, body = null) {
const url = baseUrl.replace(/\/+$/g, '') + (apiSite ? '/' + apiSite.replace(/^\/+|\/+$/g, '') : '') + '/' + endpoint.replace(/^\/+/, '');
const headers = { 'Authorization': token };
if (body) headers['Content-Type'] = 'application/json';
const options = { method: method.toUpperCase(), headers };
if (body) options.body = JSON.stringify(body);
const response = await fetch(url, options);
if (!response.ok) {
const errorText = await response.text();
throw new Error(`API Fehler ${response.status}: ${errorText}`);
}
const contentType = response.headers.get('content-type') || '';
return contentType.includes('application/json') ? response.json() : response.text();
}
document.getElementById('connectBtn').addEventListener('click', async () => {
baseUrl = document.getElementById('apiUrl').value.trim();
token = document.getElementById('token').value.trim();
if (!baseUrl || !token) {
alert('Bitte WebAPI URL und Token eingeben.');
return;
}
try {
const orgUnits = await apiRequest(baseUrl, token, apiSite, 'GET', 'api/organization/');
const exportDefs = await apiRequest(baseUrl, token, apiSite, 'GET', 'api/export/');
const orgSelect = document.getElementById('organizationUnit');
orgSelect.innerHTML = '';
orgUnits.forEach(org => {
const opt = document.createElement('option');
opt.value = org.ObjectId || '';
opt.textContent = org.ObjectNaming || org.ObjectPatternNumber || org.ObjectShortTerm;
orgSelect.appendChild(opt);
});
const exportSelect = document.getElementById('exportDefinition');
exportSelect.innerHTML = '';
exportDefs.forEach(def => {
const opt = document.createElement('option');
opt.value = def.ObjectId || '';
opt.textContent = def.ObjectNaming || def.ObjectPatternNumber || def.ObjectShortTerm;
exportSelect.appendChild(opt);
});
document.getElementById('step1').style.display = 'none';
document.getElementById('step2').style.display = 'block';
const today = new Date();
const lastWeek = new Date(today);
lastWeek.setDate(today.getDate() - 7);
document.getElementById('dateFrom').value = lastWeek.toISOString().split('T')[0];
document.getElementById('dateUntil').value = today.toISOString().split('T')[0];
} catch (e) {
alert('Fehler beim Laden der Daten: ' + e.message);
}
});
document.getElementById('requestExport').addEventListener('click', async () => {
const exportDefinitionId = document.getElementById('exportDefinition').value;
const organizationUnitId = document.getElementById('organizationUnit').value;
const dateFrom = document.getElementById('dateFrom').value;
const dateUntil = document.getElementById('dateUntil').value;
if (!exportDefinitionId || !organizationUnitId || !dateFrom || !dateUntil) {
alert('Bitte alle Felder ausfüllen.');
return;
}
try {
const guid = await apiRequest(baseUrl, token, apiSite, 'POST', 'api/export', {
ExportDefinition: exportDefinitionId,
organizationUnit: organizationUnitId,
DateFrom: dateFrom,
DateUntil: dateUntil
});
const pre = document.getElementById('exportResult');
pre.textContent = 'Job gestartet (GUID: ' + guid + '), warte auf Ergebnis...';
const poll = async () => {
try {
const data = await apiRequest(baseUrl, token, apiSite, 'GET', `api/export/${guid}`);
if (typeof data === 'object') {
pre.textContent = JSON.stringify(data, null, 2);
if (data.Result === 'JobPending') {
pre.textContent += 'starte erneuten Versuch (alle 60sec.) ...';
setTimeout(poll, 60000);
}
} else {
pre.textContent = data;
}
} catch (err) {
console.error('Polling-Fehler:', err);
}
};
setTimeout(poll, 5000);
} catch (e) {
alert('Fehler beim Export: ' + e.message);
}
});
</script>
</body>
</html>