179 lines
5.9 KiB
HTML
179 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>TimeTracking API WebUI - 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>TimeTracking API WebUI</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 (YYYY-MM-DD):</label>
|
|
<input type="date" id="dateFrom" />
|
|
|
|
<label for="dateUntil">Bis (YYYY-MM-DD):</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 = ''; // Optional, falls die API-URL schon api beinhaltet, kann leer bleiben.
|
|
|
|
async function apiRequest(baseUrl, token, apiSite, method, endpoint, body = null) {
|
|
let url = baseUrl.replace(/\/+$/, '') + (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') || '';
|
|
if (contentType.includes('application/json')) {
|
|
return response.json();
|
|
}
|
|
return response.text();
|
|
}
|
|
|
|
document.getElementById('connectBtn').addEventListener('click', async () => {
|
|
baseUrl = document.getElementById('apiUrl').value.trim();
|
|
token = document.getElementById('token').value.trim();
|
|
apiSite = ''; // Kann erweitert werden, falls nötig
|
|
|
|
if (!baseUrl || !token) {
|
|
alert('Bitte WebAPI URL und Token eingeben.');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// OE laden
|
|
const orgUnits = await apiRequest(baseUrl, token, apiSite, 'GET', 'api/organization/');
|
|
// Export-Definitionen laden
|
|
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.Id || def.id || def.ExportDefinitionId || def.ExportDefinition || '';
|
|
opt.value = def.ObjectId || '';
|
|
opt.textContent = def.ObjectNaming || def.ObjectPatternNumber || opt.ObjectShortTerm;
|
|
exportSelect.appendChild(opt);
|
|
});
|
|
|
|
// Schritt 2 einblenden
|
|
document.getElementById('step1').style.display = 'none';
|
|
document.getElementById('step2').style.display = 'block';
|
|
|
|
// Datum Default setzen (letzte Woche)
|
|
const dateFromInput = document.getElementById('dateFrom');
|
|
const dateUntilInput = document.getElementById('dateUntil');
|
|
const today = new Date();
|
|
const lastWeek = new Date(today);
|
|
lastWeek.setDate(today.getDate() - 7);
|
|
dateFromInput.value = lastWeek.toISOString().split('T')[0];
|
|
dateUntilInput.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 {
|
|
// Export anfragen
|
|
const result = await apiRequest(baseUrl, token, apiSite, 'POST', 'api/export', {
|
|
ExportDefinition: exportDefinitionId,
|
|
organizationUnit: organizationUnitId,
|
|
DateFrom: dateFrom,
|
|
DateUntil: dateUntil
|
|
});
|
|
|
|
if (!result.Result) {
|
|
throw new Error('Kein Result im Antwortobjekt ('+result+')');
|
|
}
|
|
|
|
// Exportdaten abrufen (Result ist GUID)
|
|
const exportData = await apiRequest(baseUrl, token, apiSite, 'GET', `api/export/${result.Result}`);
|
|
|
|
const pre = document.getElementById('exportResult');
|
|
if (typeof exportData === 'object') {
|
|
pre.textContent = JSON.stringify(exportData, null, 2);
|
|
} else {
|
|
pre.textContent = exportData;
|
|
}
|
|
|
|
} catch (e) {
|
|
alert('Fehler beim Export: ' + e.message);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|