366 lines
18 KiB
HTML
366 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dateiverwaltung</title>
|
|
<link rel="stylesheet" href="/static/css/style.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="header-left">
|
|
<h1>Dateiverwaltung</h1>
|
|
</div>
|
|
<div class="header-right">
|
|
<span id="status-indicator"></span>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<div class="main-container">
|
|
<!-- Bereich 1: Mail-Abruf -->
|
|
<section class="bereich">
|
|
<div class="bereich-header">
|
|
<h2>📧 Mail-Abruf</h2>
|
|
<p class="bereich-desc">Attachments aus Postfächern in Ordner speichern</p>
|
|
</div>
|
|
|
|
<div class="bereich-content">
|
|
<!-- Postfächer Liste -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3>Postfächer</h3>
|
|
<button class="btn btn-sm btn-primary" onclick="zeigePostfachModal()">+ Hinzufügen</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="postfaecher-liste">
|
|
<p class="empty-state">Keine Postfächer konfiguriert</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Abruf starten -->
|
|
<div class="action-bar">
|
|
<button class="btn btn-success btn-large" onclick="allePostfaecherAbrufen()">
|
|
▶ Alle Postfächer abrufen
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Letzter Abruf Log -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3>Letzter Abruf</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="abruf-log" class="log-output">
|
|
<p class="empty-state">Noch kein Abruf durchgeführt</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Bereich 2: Datei-Sortierung -->
|
|
<section class="bereich">
|
|
<div class="bereich-header">
|
|
<h2>📁 Datei-Sortierung</h2>
|
|
<p class="bereich-desc">Dateien nach Regeln umbenennen und verschieben</p>
|
|
</div>
|
|
|
|
<div class="bereich-content">
|
|
<!-- Quell-Ordner -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3>Quell-Ordner</h3>
|
|
<button class="btn btn-sm btn-primary" onclick="zeigeOrdnerModal()">+ Hinzufügen</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="ordner-liste">
|
|
<p class="empty-state">Keine Ordner konfiguriert</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Regeln -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3>Sortier-Regeln</h3>
|
|
<button class="btn btn-sm btn-primary" onclick="zeigeRegelModal()">+ Hinzufügen</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="regeln-liste">
|
|
<p class="empty-state">Keine Regeln definiert</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sortierung starten -->
|
|
<div class="action-bar">
|
|
<button class="btn btn-success btn-large" onclick="sortierungStarten()">
|
|
▶ Sortierung starten
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Sortierungs-Log -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3>Verarbeitete Dateien</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="sortierung-log" class="log-output">
|
|
<p class="empty-state">Noch keine Dateien verarbeitet</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Modal: Postfach hinzufügen -->
|
|
<div id="postfach-modal" class="modal hidden">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>Postfach hinzufügen</h3>
|
|
<button class="modal-close" onclick="schliesseModal('postfach-modal')">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label>Name</label>
|
|
<input type="text" id="pf-name" placeholder="z.B. Firma Rechnungen">
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>IMAP Server</label>
|
|
<input type="text" id="pf-server" placeholder="imap.example.com">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Port</label>
|
|
<input type="number" id="pf-port" value="993">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>E-Mail</label>
|
|
<input type="email" id="pf-email" placeholder="mail@example.com">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Passwort</label>
|
|
<input type="password" id="pf-passwort">
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>IMAP-Ordner</label>
|
|
<input type="text" id="pf-ordner" value="INBOX">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Alle Ordner durchsuchen</label>
|
|
<select id="pf-alle-ordner">
|
|
<option value="false">Nein (nur angegebenen Ordner)</option>
|
|
<option value="true">Ja (alle Ordner)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Welche Mails durchsuchen</label>
|
|
<select id="pf-nur-ungelesen">
|
|
<option value="false" selected>Alle Mails</option>
|
|
<option value="true">Nur ungelesene Mails</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Ziel-Ordner</label>
|
|
<div class="input-with-btn">
|
|
<input type="text" id="pf-ziel" value="/srv/http/dateiverwaltung/data/inbox/">
|
|
<button class="btn" type="button" onclick="oeffneBrowser('pf-ziel')">📁</button>
|
|
</div>
|
|
<small>Hier landen die Attachments</small>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Erlaubte Dateitypen</label>
|
|
<div class="checkbox-group" id="pf-typen-gruppe">
|
|
<label class="checkbox-item"><input type="checkbox" value=".pdf" checked> PDF</label>
|
|
<label class="checkbox-item"><input type="checkbox" value=".jpg"> JPG</label>
|
|
<label class="checkbox-item"><input type="checkbox" value=".jpeg"> JPEG</label>
|
|
<label class="checkbox-item"><input type="checkbox" value=".png"> PNG</label>
|
|
<label class="checkbox-item"><input type="checkbox" value=".gif"> GIF</label>
|
|
<label class="checkbox-item"><input type="checkbox" value=".tiff"> TIFF</label>
|
|
<label class="checkbox-item"><input type="checkbox" value=".doc"> DOC</label>
|
|
<label class="checkbox-item"><input type="checkbox" value=".docx"> DOCX</label>
|
|
<label class="checkbox-item"><input type="checkbox" value=".xls"> XLS</label>
|
|
<label class="checkbox-item"><input type="checkbox" value=".xlsx"> XLSX</label>
|
|
<label class="checkbox-item"><input type="checkbox" value=".csv"> CSV</label>
|
|
<label class="checkbox-item"><input type="checkbox" value=".txt"> TXT</label>
|
|
<label class="checkbox-item"><input type="checkbox" value=".zip"> ZIP</label>
|
|
<label class="checkbox-item"><input type="checkbox" value=".xml"> XML</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Max. Größe (MB)</label>
|
|
<input type="number" id="pf-max-groesse" value="25" style="width: 100px;">
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn" onclick="schliesseModal('postfach-modal')">Abbrechen</button>
|
|
<button class="btn btn-primary" onclick="speicherePostfach()">Speichern</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal: Ordner hinzufügen -->
|
|
<div id="ordner-modal" class="modal hidden">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>Quell-Ordner hinzufügen</h3>
|
|
<button class="modal-close" onclick="schliesseModal('ordner-modal')">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label>Name</label>
|
|
<input type="text" id="ord-name" placeholder="z.B. Firma Inbox">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Quell-Pfad (wo liegen die Dateien?)</label>
|
|
<div class="input-with-btn">
|
|
<input type="text" id="ord-pfad" value="/srv/http/dateiverwaltung/data/inbox/">
|
|
<button class="btn" type="button" onclick="oeffneBrowser('ord-pfad')">📁</button>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Ziel-Ordner (wohin nach Sortierung?)</label>
|
|
<div class="input-with-btn">
|
|
<input type="text" id="ord-ziel" value="/srv/http/dateiverwaltung/data/archiv/">
|
|
<button class="btn" type="button" onclick="oeffneBrowser('ord-ziel')">📁</button>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Dateitypen</label>
|
|
<div class="checkbox-group" id="ord-typen-gruppe">
|
|
<label class="checkbox-item"><input type="checkbox" value=".pdf" checked> PDF</label>
|
|
<label class="checkbox-item"><input type="checkbox" value=".jpg" checked> JPG</label>
|
|
<label class="checkbox-item"><input type="checkbox" value=".jpeg" checked> JPEG</label>
|
|
<label class="checkbox-item"><input type="checkbox" value=".png" checked> PNG</label>
|
|
<label class="checkbox-item"><input type="checkbox" value=".gif"> GIF</label>
|
|
<label class="checkbox-item"><input type="checkbox" value=".tiff" checked> TIFF</label>
|
|
<label class="checkbox-item"><input type="checkbox" value=".bmp"> BMP</label>
|
|
<label class="checkbox-item"><input type="checkbox" value=".doc"> DOC</label>
|
|
<label class="checkbox-item"><input type="checkbox" value=".docx"> DOCX</label>
|
|
<label class="checkbox-item"><input type="checkbox" value=".xls"> XLS</label>
|
|
<label class="checkbox-item"><input type="checkbox" value=".xlsx"> XLSX</label>
|
|
<label class="checkbox-item"><input type="checkbox" value=".csv"> CSV</label>
|
|
<label class="checkbox-item"><input type="checkbox" value=".txt"> TXT</label>
|
|
<label class="checkbox-item"><input type="checkbox" value=".xml"> XML</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Unterordner einschließen</label>
|
|
<select id="ord-rekursiv">
|
|
<option value="true" selected>Ja (rekursiv)</option>
|
|
<option value="false">Nein (nur dieser Ordner)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn" onclick="schliesseModal('ordner-modal')">Abbrechen</button>
|
|
<button class="btn btn-primary" onclick="speichereOrdner()">Speichern</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal: Regel hinzufügen -->
|
|
<div id="regel-modal" class="modal hidden">
|
|
<div class="modal-content modal-large">
|
|
<div class="modal-header">
|
|
<h3 id="regel-modal-title">Regel hinzufügen</h3>
|
|
<button class="modal-close" onclick="schliesseModal('regel-modal')">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>Name</label>
|
|
<input type="text" id="regel-name" placeholder="z.B. Sonepar Rechnung">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Priorität (niedriger = wichtiger)</label>
|
|
<input type="number" id="regel-prioritaet" value="100">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Erkennungsmuster (JSON)</label>
|
|
<textarea id="regel-muster" class="code-input" rows="4">{
|
|
"text_match_any": ["sonepar"],
|
|
"text_match": ["rechnung"]
|
|
}</textarea>
|
|
<small>text_match_any: mindestens eins | text_match: alle müssen passen</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Feld-Extraktion (JSON)</label>
|
|
<textarea id="regel-extraktion" class="code-input" rows="6">{
|
|
"datum": {"regex": "(\\d{2}[./]\\d{2}[./]\\d{4})", "format": "%d.%m.%Y"},
|
|
"rechnungsnummer": {"regex": "Rechnungsnummer[:\\s]*(\\d+)"},
|
|
"betrag": {"regex": "Gesamtbetrag[:\\s]*([\\d.,]+)", "typ": "betrag"},
|
|
"ersteller": {"wert": "Sonepar"}
|
|
}</textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Dateiname-Schema</label>
|
|
<input type="text" id="regel-schema"
|
|
value="{datum} - Rechnung - {ersteller} - {rechnungsnummer} - {betrag} EUR.pdf">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Ziel-Unterordner (optional)</label>
|
|
<input type="text" id="regel-unterordner" placeholder="sonepar">
|
|
<small>Wird an den Ziel-Ordner des Quell-Ordners angehängt</small>
|
|
</div>
|
|
|
|
<!-- Tester -->
|
|
<div class="form-group">
|
|
<label>Regel testen</label>
|
|
<textarea id="regel-test-text" rows="3" placeholder="Text zum Testen einfügen..."></textarea>
|
|
<button class="btn btn-sm" onclick="testeRegel()">Testen</button>
|
|
<div id="regel-test-ergebnis" class="test-result hidden"></div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn" onclick="schliesseModal('regel-modal')">Abbrechen</button>
|
|
<button class="btn btn-primary" onclick="speichereRegel()">Speichern</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal: Verzeichnis-Browser -->
|
|
<div id="browser-modal" class="modal hidden">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>Verzeichnis wählen</h3>
|
|
<button class="modal-close" onclick="schliesseModal('browser-modal')">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="file-browser">
|
|
<div class="file-browser-path">
|
|
<span id="browser-current-path">/</span>
|
|
</div>
|
|
<ul class="file-browser-list" id="browser-list"></ul>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn" onclick="schliesseModal('browser-modal')">Abbrechen</button>
|
|
<button class="btn btn-primary" onclick="browserAuswahl()">Auswählen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading Overlay -->
|
|
<div id="loading-overlay" class="loading-overlay hidden">
|
|
<div class="spinner"></div>
|
|
<div class="loading-text" id="loading-text">Wird geladen...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/js/app.js"></script>
|
|
</body>
|
|
</html>
|