87 lines
3.9 KiB
PHP
87 lines
3.9 KiB
PHP
<?php use Steuerkram\View; $h = fn($v) => View::h($v); ?>
|
||
|
||
<div class="card" style="max-width:700px">
|
||
<div class="card-body">
|
||
<form method="post" action="/bank/upload" enctype="multipart/form-data" id="bank-upload-form">
|
||
|
||
<!-- Drag & Drop Zone -->
|
||
<div id="bank-dnd-zone" style="
|
||
border:2px dashed var(--color-border);
|
||
border-radius:var(--radius);
|
||
background:var(--color-surface);
|
||
padding:3rem 2rem;
|
||
text-align:center;
|
||
margin-bottom:1.5rem;
|
||
cursor:pointer;
|
||
transition:border-color .15s,background .15s;
|
||
position:relative;
|
||
">
|
||
<input type="file" id="bank-dnd-input" name="bank_file"
|
||
accept=".csv,.txt,.xlsx"
|
||
style="position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%">
|
||
<div style="font-size:2rem;line-height:1;margin-bottom:.75rem;pointer-events:none">🏦</div>
|
||
<div style="font-weight:600;font-size:1.1rem;pointer-events:none">Bank-Buchungen hierher ziehen oder klicken</div>
|
||
<div class="text-muted text-sm" style="margin-top:.4rem;pointer-events:none">CSV · TXT · XLSX</div>
|
||
<div id="bank-dnd-status" style="margin-top:.75rem;min-height:1.5rem;pointer-events:none"></div>
|
||
</div>
|
||
|
||
<!-- Format-Auswahl -->
|
||
<div class="form-group">
|
||
<label for="format_id">Import-Format *</label>
|
||
<select id="format_id" name="format_id" required>
|
||
<?php foreach ($formats as $fmt): ?>
|
||
<option value="<?= (int)$fmt['id'] ?>"><?= $h($fmt['name']) ?></option>
|
||
<?php endforeach; ?>
|
||
</select>
|
||
<div class="form-hint">Format der hochgeladenen Datei</div>
|
||
</div>
|
||
|
||
<div style="display:flex;gap:.75rem;margin-top:1.5rem">
|
||
<button type="submit" class="btn btn-primary" id="bank-upload-btn" disabled>Importieren</button>
|
||
<a href="/bank" class="btn btn-secondary">Abbrechen</a>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
(function () {
|
||
const zone = document.getElementById('bank-dnd-zone');
|
||
const input = document.getElementById('bank-dnd-input');
|
||
const status = document.getElementById('bank-dnd-status');
|
||
const btn = document.getElementById('bank-upload-btn');
|
||
|
||
function setActive(on) {
|
||
zone.style.borderColor = on ? 'var(--color-primary)' : 'var(--color-border)';
|
||
zone.style.background = on ? '#eff6ff' : 'var(--color-surface)';
|
||
}
|
||
|
||
function onFile(file) {
|
||
if (!file) return;
|
||
const ext = file.name.split('.').pop().toLowerCase();
|
||
if (!['csv', 'txt', 'xlsx'].includes(ext)) {
|
||
status.innerHTML = '<span style="color:var(--color-danger)">Nicht unterstütztes Format. Bitte CSV, TXT oder XLSX verwenden.</span>';
|
||
btn.disabled = true;
|
||
return;
|
||
}
|
||
status.innerHTML = '<span style="color:var(--color-success)">✓ ' + file.name + ' (' + (file.size / 1024).toFixed(1) + ' KB)</span>';
|
||
btn.disabled = false;
|
||
}
|
||
|
||
zone.addEventListener('dragover', (e) => { e.preventDefault(); setActive(true); });
|
||
zone.addEventListener('dragleave', (e) => { if (!zone.contains(e.relatedTarget)) setActive(false); });
|
||
zone.addEventListener('drop', (e) => {
|
||
e.preventDefault();
|
||
setActive(false);
|
||
const file = e.dataTransfer.files[0];
|
||
if (file) {
|
||
// DataTransfer-Datei in Input-Element spiegeln ist nicht möglich – Form-Submit via DataTransfer
|
||
const dt = new DataTransfer();
|
||
dt.items.add(file);
|
||
input.files = dt.files;
|
||
onFile(file);
|
||
}
|
||
});
|
||
input.addEventListener('change', () => onFile(input.files[0]));
|
||
})();
|
||
</script>
|