2026-06-03 11:15:59 +00:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="de">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
|
<title>DocuWare Ablage – Einstellungen</title>
|
|
|
|
|
|
<style>
|
2026-06-16 12:41:52 +00:00
|
|
|
|
/* DocuWare-naher Dark-Style: tiefes Slate, DocuWare-Blau als Akzent. */
|
|
|
|
|
|
:root {
|
|
|
|
|
|
--bg: #11151b;
|
|
|
|
|
|
--bg-grad: radial-gradient(1200px 500px at 80% -10%, #18324a 0%, rgba(17,21,27,0) 60%);
|
|
|
|
|
|
--surface: #1a1f27;
|
|
|
|
|
|
--surface-2: #222a34;
|
|
|
|
|
|
--border: #2b3340;
|
|
|
|
|
|
--border-strong: #38424f;
|
|
|
|
|
|
--text: #e8edf2;
|
|
|
|
|
|
--muted: #8c97a4;
|
|
|
|
|
|
--accent: #2aa4df; /* DocuWare-Blau */
|
|
|
|
|
|
--accent-hover: #3cb6f0;
|
|
|
|
|
|
--accent-weak: rgba(42,164,223,.14);
|
|
|
|
|
|
--ok: #46c98a;
|
|
|
|
|
|
--err: #ec6b75;
|
|
|
|
|
|
--radius: 10px;
|
|
|
|
|
|
--shadow: 0 1px 0 rgba(255,255,255,.02) inset, 0 8px 24px rgba(0,0,0,.28);
|
|
|
|
|
|
font-synthesis: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
|
|
html, body { background: var(--bg); }
|
|
|
|
|
|
body {
|
|
|
|
|
|
font: 14px/1.55 "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
|
|
|
|
|
|
color: var(--text);
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
padding: 0 16px 120px;
|
|
|
|
|
|
background-image: var(--bg-grad);
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
|
|
}
|
|
|
|
|
|
.wrap { max-width: 620px; margin: 0 auto; }
|
|
|
|
|
|
|
|
|
|
|
|
/* Kopfzeile */
|
|
|
|
|
|
header.app {
|
|
|
|
|
|
display: flex; align-items: center; gap: 12px;
|
|
|
|
|
|
padding: 26px 2px 18px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.logo {
|
|
|
|
|
|
width: 34px; height: 34px; border-radius: 8px; flex: none;
|
|
|
|
|
|
background: linear-gradient(135deg, var(--accent), #1c6fae);
|
|
|
|
|
|
display: grid; place-items: center;
|
|
|
|
|
|
box-shadow: 0 4px 14px rgba(42,164,223,.35);
|
|
|
|
|
|
}
|
|
|
|
|
|
.logo svg { width: 20px; height: 20px; }
|
|
|
|
|
|
header.app h1 { font-size: 18px; font-weight: 650; margin: 0; letter-spacing: .2px; }
|
|
|
|
|
|
header.app .sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
|
|
|
|
|
|
|
|
|
|
|
|
/* Karten / Abschnitte */
|
|
|
|
|
|
section.card {
|
|
|
|
|
|
background: var(--surface);
|
|
|
|
|
|
border: 1px solid var(--border);
|
|
|
|
|
|
border-radius: var(--radius);
|
|
|
|
|
|
box-shadow: var(--shadow);
|
|
|
|
|
|
padding: 18px 20px 20px;
|
|
|
|
|
|
margin: 14px 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
.card-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; }
|
|
|
|
|
|
.card-head h2 {
|
|
|
|
|
|
font-size: 13px; font-weight: 650; text-transform: uppercase;
|
|
|
|
|
|
letter-spacing: .8px; color: var(--accent); margin: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
.card-head .num {
|
|
|
|
|
|
font-size: 11px; color: var(--muted); border: 1px solid var(--border-strong);
|
|
|
|
|
|
border-radius: 999px; padding: 1px 8px; line-height: 1.5;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
label { display: block; margin: 14px 0 5px; font-weight: 550; font-size: 13px; }
|
|
|
|
|
|
input[type="text"], input[type="password"], input[type="url"], select {
|
|
|
|
|
|
width: 100%; padding: 9px 11px; color: var(--text);
|
|
|
|
|
|
background: var(--surface-2); border: 1px solid var(--border-strong);
|
|
|
|
|
|
border-radius: 8px; font: inherit; outline: none;
|
|
|
|
|
|
transition: border-color .15s, box-shadow .15s, background .15s;
|
|
|
|
|
|
}
|
|
|
|
|
|
select { appearance: none;
|
|
|
|
|
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%238c97a4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
|
|
|
|
|
|
background-repeat: no-repeat; background-position: right 11px center; padding-right: 30px;
|
|
|
|
|
|
}
|
|
|
|
|
|
input:focus, select:focus {
|
|
|
|
|
|
border-color: var(--accent);
|
|
|
|
|
|
box-shadow: 0 0 0 3px var(--accent-weak);
|
|
|
|
|
|
}
|
|
|
|
|
|
input::placeholder { color: #5f6b78; }
|
|
|
|
|
|
code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px;
|
|
|
|
|
|
padding: 1px 5px; font-size: 12px; color: #b7c2cd; }
|
|
|
|
|
|
.hint { font-size: 12px; color: var(--muted); margin-top: 5px; }
|
|
|
|
|
|
|
|
|
|
|
|
.check { display: flex; align-items: center; gap: 9px; margin: 9px 0; font-weight: 450; }
|
|
|
|
|
|
.check label { margin: 0; font-weight: 450; font-size: 13px; }
|
|
|
|
|
|
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
|
|
|
|
|
|
|
|
|
|
|
|
/* Mapping-Tabelle */
|
|
|
|
|
|
.map-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
|
|
|
|
|
|
.map-toolbar .grow { flex: 1; min-width: 180px; }
|
|
|
|
|
|
table.map { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
|
|
|
|
|
|
table.map th { text-align: left; font-size: 11px; letter-spacing: .4px; text-transform: uppercase;
|
|
|
|
|
|
color: var(--muted); font-weight: 600; padding: 0 6px 2px; }
|
|
|
|
|
|
table.map td { padding: 0 6px; vertical-align: middle; }
|
|
|
|
|
|
table.map input, table.map select { padding: 7px 9px; }
|
|
|
|
|
|
table.map td.del { width: 40px; }
|
|
|
|
|
|
.icon-btn {
|
|
|
|
|
|
width: 30px; height: 30px; padding: 0; border-radius: 7px; cursor: pointer;
|
|
|
|
|
|
background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--muted);
|
|
|
|
|
|
font-size: 14px; line-height: 1; transition: .15s;
|
|
|
|
|
|
}
|
|
|
|
|
|
.icon-btn:hover { color: var(--err); border-color: var(--err); }
|
|
|
|
|
|
|
|
|
|
|
|
/* Buttons */
|
|
|
|
|
|
button { font: inherit; cursor: pointer; border-radius: 8px; }
|
|
|
|
|
|
button.primary {
|
|
|
|
|
|
padding: 9px 18px; border: 0; font-weight: 650; color: #04222f;
|
|
|
|
|
|
background: linear-gradient(180deg, var(--accent-hover), var(--accent));
|
|
|
|
|
|
box-shadow: 0 4px 14px rgba(42,164,223,.3);
|
|
|
|
|
|
}
|
|
|
|
|
|
button.primary:hover { filter: brightness(1.06); }
|
|
|
|
|
|
button.ghost {
|
|
|
|
|
|
padding: 8px 15px; font-weight: 550; color: var(--text);
|
|
|
|
|
|
background: var(--surface-2); border: 1px solid var(--border-strong);
|
|
|
|
|
|
}
|
|
|
|
|
|
button.ghost:hover { border-color: var(--accent); color: var(--accent); }
|
|
|
|
|
|
button:disabled { opacity: .5; cursor: default; }
|
|
|
|
|
|
|
|
|
|
|
|
/* Sticky Aktionsleiste */
|
|
|
|
|
|
.actionbar {
|
|
|
|
|
|
position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
|
|
|
|
|
|
background: rgba(17,21,27,.82); backdrop-filter: blur(8px);
|
|
|
|
|
|
border-top: 1px solid var(--border);
|
|
|
|
|
|
}
|
|
|
|
|
|
.actionbar .inner { max-width: 620px; margin: 0 auto; padding: 12px 16px;
|
|
|
|
|
|
display: flex; align-items: center; gap: 12px; }
|
2026-06-03 11:15:59 +00:00
|
|
|
|
#status { font-size: 13px; min-height: 18px; }
|
2026-06-16 12:41:52 +00:00
|
|
|
|
.ok { color: var(--ok); } .err { color: var(--err); }
|
|
|
|
|
|
.spacer { flex: 1; }
|
2026-06-03 11:15:59 +00:00
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
2026-06-16 12:41:52 +00:00
|
|
|
|
<div class="wrap">
|
|
|
|
|
|
<header class="app">
|
|
|
|
|
|
<span class="logo" aria-hidden="true">
|
|
|
|
|
|
<svg viewBox="0 0 24 24" fill="none"><path d="M4 5.5A1.5 1.5 0 0 1 5.5 4H13l3 3h2.5A1.5 1.5 0 0 1 20 8.5v10A1.5 1.5 0 0 1 18.5 20h-13A1.5 1.5 0 0 1 4 18.5v-13Z" fill="#fff" opacity=".95"/><path d="M9 13.5h6M12 11v5" stroke="#1c6fae" stroke-width="1.6" stroke-linecap="round"/></svg>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<h1>DocuWare Ablage</h1>
|
|
|
|
|
|
<div class="sub">Einstellungen</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
|
|
<section class="card">
|
|
|
|
|
|
<div class="card-head"><span class="num">1</span><h2>Verbindung</h2></div>
|
|
|
|
|
|
<label for="serverUrl">Server-URL</label>
|
|
|
|
|
|
<input type="url" id="serverUrl" placeholder="https://docuware.example.com" />
|
|
|
|
|
|
<div class="hint">Basis-URL ohne <code>/DocuWare/Platform</code>.</div>
|
|
|
|
|
|
|
|
|
|
|
|
<label for="organization">Organisation</label>
|
|
|
|
|
|
<input type="text" id="organization" />
|
|
|
|
|
|
|
|
|
|
|
|
<label for="username">Benutzername</label>
|
|
|
|
|
|
<input type="text" id="username" autocomplete="username" />
|
|
|
|
|
|
|
|
|
|
|
|
<label for="password">Passwort</label>
|
|
|
|
|
|
<input type="password" id="password" autocomplete="off" />
|
|
|
|
|
|
<div class="hint">Wird <strong>nicht gespeichert</strong> – nur zum Anmelden/Testen für
|
|
|
|
|
|
diese Sitzung. Im Ablage-Fenster wird es 1× pro Sitzung abgefragt.</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<section class="card">
|
|
|
|
|
|
<div class="card-head"><span class="num">2</span><h2>Standardwerte</h2></div>
|
|
|
|
|
|
<label for="defaultCabinet">Standard-Ziel (Archiv oder Briefkorb)</label>
|
|
|
|
|
|
<select id="defaultCabinet"><option value="">— keiner —</option></select>
|
|
|
|
|
|
<div class="hint">Liste wird nach erfolgreichem Verbindungstest gefüllt.</div>
|
|
|
|
|
|
|
|
|
|
|
|
<label>Standard-Format der E-Mail</label>
|
|
|
|
|
|
<div class="check"><input type="radio" name="mailFormat" id="fmtEml" value="eml" /> <label for="fmtEml">Original (.eml)</label></div>
|
|
|
|
|
|
<div class="check"><input type="radio" name="mailFormat" id="fmtPdf" value="pdf" /> <label for="fmtPdf">PDF</label></div>
|
|
|
|
|
|
<div class="hint">Die E-Mail wird immer in genau einem Format abgelegt (nicht beides). Im Ablage-Fenster umstellbar.</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="check" style="margin-top:12px"><input type="checkbox" id="storeAttachments" /> <label for="storeAttachments">Anhänge mit ablegen</label></div>
|
|
|
|
|
|
<div class="check"><input type="checkbox" id="tagOnSuccess" /> <label for="tagOnSuccess">Mail nach Ablage als „DocuWare" markieren</label></div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<section class="card">
|
|
|
|
|
|
<div class="card-head"><span class="num">3</span><h2>Feld-Zuordnung</h2></div>
|
|
|
|
|
|
<div class="hint" style="margin-bottom:10px">Welches DocuWare-Indexfeld wird aus welchem
|
|
|
|
|
|
Mail-Attribut vorbefüllt? Gilt für alle Aktenschränke. Leere/entfernte Zeilen befüllen
|
|
|
|
|
|
nichts vor.</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="map-toolbar">
|
|
|
|
|
|
<div class="grow">
|
|
|
|
|
|
<select id="mapCabinet"><option value="">Feldnamen aus Archiv vorschlagen …</option></select>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<span id="mapFieldStatus" class="hint" style="margin:0"></span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<table class="map">
|
|
|
|
|
|
<thead><tr><th>DocuWare-Feldname</th><th>Mail-Attribut</th><th></th></tr></thead>
|
|
|
|
|
|
<tbody id="mapBody"></tbody>
|
|
|
|
|
|
</table>
|
|
|
|
|
|
<datalist id="fieldNames"></datalist>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="map-toolbar" style="margin-top:10px">
|
|
|
|
|
|
<button id="mapAdd" class="ghost" type="button">+ Zeile</button>
|
|
|
|
|
|
<button id="mapReset" class="ghost" type="button">Auf Standard zurücksetzen</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
2026-06-03 11:15:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
|
2026-06-16 12:41:52 +00:00
|
|
|
|
<div class="actionbar">
|
|
|
|
|
|
<div class="inner">
|
|
|
|
|
|
<button id="save" class="primary">Speichern</button>
|
|
|
|
|
|
<button id="test" class="ghost">Verbindung testen</button>
|
|
|
|
|
|
<span class="spacer"></span>
|
|
|
|
|
|
<span id="status"></span>
|
2026-06-03 11:15:59 +00:00
|
|
|
|
</div>
|
2026-06-16 12:41:52 +00:00
|
|
|
|
</div>
|
2026-06-03 11:15:59 +00:00
|
|
|
|
|
|
|
|
|
|
<script src="../lib/store.js"></script>
|
|
|
|
|
|
<script src="../lib/auth.js"></script>
|
|
|
|
|
|
<script src="../lib/docuware.js"></script>
|
|
|
|
|
|
<script src="options.js"></script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
