Überarbeitung: HTML-Templates aus Repo entfernt, Plugin verbessert
- HTML-Vorlagen werden separat verteilt (nicht mehr im Plugin-Repo) - background.js: insertText API für korrekte Darstellung im Composer - background.js: automatischer Wechsel zu HTML-Modus bei Plain-Text - Options-Seite: komplett überarbeitetes UI mit Hotel-Branding - Popup: deutsches UI, gestylte Template-Auswahl - Notifications auf Deutsch - Fertige XPI im Repo
This commit is contained in:
Kendrick Bollens
@@ -1,57 +1,248 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Manage Templates</title>
|
||||
<style>
|
||||
body { font-family: sans-serif; padding: 20px; }
|
||||
#templates-list { margin-top: 20px; border: 1px solid #ccc; padding: 10px; }
|
||||
.template-item { padding: 10px; border-bottom: 1px dashed #eee; display: flex; justify-content: space-between; align-items: center; }
|
||||
.template-item:last-child { border-bottom: none; }
|
||||
.template-name { font-weight: bold; }
|
||||
button { margin-left: 10px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h2>Templates manager</h2>
|
||||
|
||||
<fieldset>
|
||||
<legend>HTML-Dateien importieren</legend>
|
||||
<p style="font-size: 0.9em; color: #555;">Wähle eine oder mehrere .html Dateien aus (z.B. vom Netzlaufwerk). Dateiname = Template-Name. Bestehende Templates mit gleichem Namen werden überschrieben.</p>
|
||||
<input type="file" id="import-files" accept=".html,.htm" multiple style="margin-bottom: 10px;">
|
||||
<br>
|
||||
<button type="button" id="import-button">Importieren</button>
|
||||
<span id="import-status" style="margin-left: 10px; color: green; display: none;"></span>
|
||||
</fieldset>
|
||||
|
||||
<br>
|
||||
|
||||
<fieldset>
|
||||
<legend id="form-legend">New Template</legend>
|
||||
<form id="template-form">
|
||||
<input type="hidden" id="template-id">
|
||||
|
||||
<label for="template-name">Title:</label><br>
|
||||
<input type="text" id="template-name" required style="width: 98%; margin-bottom: 10px;"><br>
|
||||
|
||||
<label for="template-content">Text (HTML/Tekst):</label><br>
|
||||
<textarea id="template-content" required rows="10" style="width: 98%; margin-bottom: 10px;"></textarea><br>
|
||||
|
||||
<button type="submit" id="save-button">Save</button>
|
||||
<button type="button" id="cancel-edit" style="display: none;">Discard</button>
|
||||
</form>
|
||||
</fieldset>
|
||||
|
||||
<h3>Existing Templates</h3>
|
||||
<div style="margin-bottom: 10px;">
|
||||
<button type="button" id="select-all-button">Alle auswählen</button>
|
||||
<button type="button" id="delete-selected-button" style="color: red;">Ausgewählte löschen</button>
|
||||
</div>
|
||||
<div id="templates-list">
|
||||
<p id="no-templates">There is no saved templates.</p>
|
||||
</div>
|
||||
|
||||
<script src="templates_options.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Vorlagen verwalten</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
font-family: "Segoe UI", -apple-system, sans-serif;
|
||||
background: #f5f5f5;
|
||||
color: #333;
|
||||
padding: 24px 32px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #4a7c59;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #4a7c59;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.card {
|
||||
background: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
padding: 18px 20px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #4a7c59;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 12.5px;
|
||||
color: #777;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Form elements */
|
||||
label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
input[type="text"], textarea {
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid #d0d0d0;
|
||||
border-radius: 6px;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
margin-bottom: 10px;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
input[type="text"]:focus, textarea:focus {
|
||||
outline: none;
|
||||
border-color: #4a7c59;
|
||||
box-shadow: 0 0 0 2px rgba(74, 124, 89, 0.15);
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
font-size: 13px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #4a7c59;
|
||||
color: white;
|
||||
}
|
||||
.btn-primary:hover { background: #3d6a4b; }
|
||||
|
||||
.btn-secondary {
|
||||
background: #e8e8e8;
|
||||
color: #333;
|
||||
}
|
||||
.btn-secondary:hover { background: #d8d8d8; }
|
||||
|
||||
.btn-danger {
|
||||
background: white;
|
||||
color: #c0392b;
|
||||
border: 1px solid #e0b4b0;
|
||||
}
|
||||
.btn-danger:hover { background: #fdf0ef; border-color: #c0392b; }
|
||||
|
||||
.btn + .btn { margin-left: 8px; }
|
||||
|
||||
/* Template list */
|
||||
#templates-list {
|
||||
background: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.template-item {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.template-item:last-child { border-bottom: none; }
|
||||
|
||||
.template-item:hover { background: #fafff8; }
|
||||
|
||||
.template-item input[type="checkbox"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 12px;
|
||||
accent-color: #4a7c59;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.template-name {
|
||||
font-weight: 500;
|
||||
font-size: 13.5px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.template-actions { display: flex; gap: 6px; }
|
||||
|
||||
.template-actions button {
|
||||
padding: 5px 10px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 5px;
|
||||
background: white;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: background 0.1s, border-color 0.1s;
|
||||
}
|
||||
|
||||
.template-actions .edit-btn:hover {
|
||||
background: #e8f0eb;
|
||||
border-color: #4a7c59;
|
||||
color: #4a7c59;
|
||||
}
|
||||
|
||||
.template-actions .delete-btn {
|
||||
color: #c0392b;
|
||||
}
|
||||
.template-actions .delete-btn:hover {
|
||||
background: #fdf0ef;
|
||||
border-color: #c0392b;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
#no-templates {
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
margin-left: 10px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 500;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h2>Vorlagen verwalten</h2>
|
||||
|
||||
<!-- Import Section -->
|
||||
<div class="card">
|
||||
<div class="card-title">HTML-Dateien importieren</div>
|
||||
<div class="card-desc">Wähle eine oder mehrere .html Dateien aus (z.B. vom Netzlaufwerk).<br>Dateiname = Vorlagen-Name. Bestehende Vorlagen mit gleichem Namen werden überschrieben.</div>
|
||||
<input type="file" id="import-files" accept=".html,.htm" multiple>
|
||||
<br>
|
||||
<button type="button" class="btn btn-primary" id="import-button">Importieren</button>
|
||||
<span id="import-status" class="status-badge"></span>
|
||||
</div>
|
||||
|
||||
<!-- Add/Edit Section -->
|
||||
<div class="card">
|
||||
<div class="card-title" id="form-legend">Neue Vorlage erstellen</div>
|
||||
<form id="template-form">
|
||||
<input type="hidden" id="template-id">
|
||||
<label for="template-name">Titel</label>
|
||||
<input type="text" id="template-name" required placeholder="z.B. Buchungsbestätigung">
|
||||
<label for="template-content">Inhalt (HTML)</label>
|
||||
<textarea id="template-content" required placeholder="<p>Sehr geehrte/r ...</p>"></textarea>
|
||||
<button type="submit" class="btn btn-primary" id="save-button">Speichern</button>
|
||||
<button type="button" class="btn btn-secondary" id="cancel-edit" style="display: none;">Abbrechen</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Template List -->
|
||||
<h3>Gespeicherte Vorlagen</h3>
|
||||
<div class="toolbar">
|
||||
<button type="button" class="btn btn-secondary" id="select-all-button">Alle auswählen</button>
|
||||
<button type="button" class="btn btn-danger" id="delete-selected-button">Ausgewählte löschen</button>
|
||||
</div>
|
||||
<div id="templates-list">
|
||||
<p id="no-templates">Keine Vorlagen vorhanden.</p>
|
||||
</div>
|
||||
|
||||
<script src="templates_options.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -57,11 +57,11 @@ function renderTemplates(templates) {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'template-item';
|
||||
item.innerHTML = `
|
||||
<input type="checkbox" class="template-checkbox" data-id="${template.id}" style="margin-right: 10px;">
|
||||
<input type="checkbox" class="template-checkbox" data-id="${template.id}">
|
||||
<span class="template-name">${template.name}</span>
|
||||
<div>
|
||||
<button data-id="${template.id}" class="edit-btn">Edit</button>
|
||||
<button data-id="${template.id}" class="delete-btn">Delete</button>
|
||||
<div class="template-actions">
|
||||
<button data-id="${template.id}" class="edit-btn">Bearbeiten</button>
|
||||
<button data-id="${template.id}" class="delete-btn">Löschen</button>
|
||||
</div>
|
||||
`;
|
||||
templateList.appendChild(item);
|
||||
@@ -109,7 +109,7 @@ templateForm.addEventListener('submit', async (e) => {
|
||||
* Deletes a template
|
||||
*/
|
||||
async function handleDelete(e) {
|
||||
if (!confirm('Are you sure you want to delete this template?')) {
|
||||
if (!confirm('Diese Vorlage wirklich löschen?')) {
|
||||
return;
|
||||
}
|
||||
const idToDelete = e.target.dataset.id;
|
||||
@@ -136,8 +136,8 @@ async function handleEdit(e) {
|
||||
document.getElementById('template-content').value = template.content;
|
||||
|
||||
// Update UI to signal editing
|
||||
formLegend.textContent = 'Edit Template';
|
||||
saveButton.textContent = 'Update Template';
|
||||
formLegend.textContent = 'Vorlage bearbeiten';
|
||||
saveButton.textContent = 'Aktualisieren';
|
||||
cancelButton.style.display = 'inline';
|
||||
|
||||
// Scroll to the top of the form
|
||||
@@ -152,8 +152,8 @@ function resetForm() {
|
||||
templateForm.reset();
|
||||
document.getElementById('template-id').value = '';
|
||||
|
||||
formLegend.textContent = 'Add New Template';
|
||||
saveButton.textContent = 'Save Template';
|
||||
formLegend.textContent = 'Neue Vorlage erstellen';
|
||||
saveButton.textContent = 'Speichern';
|
||||
cancelButton.style.display = 'none';
|
||||
}
|
||||
|
||||
@@ -238,7 +238,7 @@ document.getElementById('import-button').addEventListener('click', async () => {
|
||||
await saveTemplates(templates);
|
||||
renderTemplates(templates);
|
||||
|
||||
statusEl.textContent = `${importCount} Template(s) importiert!`;
|
||||
statusEl.textContent = `${importCount} Vorlage(n) importiert!`;
|
||||
statusEl.style.color = 'green';
|
||||
statusEl.style.display = 'inline';
|
||||
fileInput.value = '';
|
||||
|
||||
Reference in New Issue
Block a user