prompt_template/web/index.html

1112 lines
34 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prompt Templates</title>
<style>
:root {
--bg-primary: #0f0f0f;
--bg-secondary: #1a1a1a;
--bg-card: #1e1e1e;
--bg-input: #262626;
--bg-hover: #2a2a2a;
--border: #2e2e2e;
--border-light: #3d3d3d;
--text-primary: #dbdbdb;
--text-secondary: #8b8b8b;
--text-muted: #5e5e5e;
--accent: #e24329;
--accent-hover: #fc6d26;
--accent-light: rgba(226, 67, 41, 0.12);
--green: #2da160;
--red: #dd3e31;
--yellow: #e0a118;
--gray: #737373;
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, sans-serif;
--mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: var(--bg-primary);
color: var(--text-primary);
font-family: var(--font);
font-size: 14px;
line-height: 1.5;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
}
/* Modal */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
padding: 20px;
}
.modal-overlay.active {
display: flex;
}
.modal {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
max-width: 900px;
width: 100%;
max-height: 80vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.modal-header {
padding: 16px 20px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-header h2 {
font-size: 16px;
font-weight: 600;
}
/* WCAG-konforme Eingabefelder für Edit-Modal (4.5:1 Kontrastminimum) */
#edit-content-content input,
#edit-content-content textarea,
#edit-modal input,
#edit-modal textarea {
background: #222222;
color: #ffffff; /* Weiß auf Dunkelgrau (#222222) */
border: 1px solid #cccccc;
border-radius: 4px;
padding: 8px;
font-family: var(--mono);
font-size: 13px;
line-height: 1.4;
}
#edit-content-content input:focus,
#edit-content-content textarea:focus,
#edit-modal input:focus,
#edit-modal textarea:focus {
outline: 2px solid #2563eb;
outline-offset: 1px;
border-color: #93c5fd;
}
#edit-content-content input:hover,
#edit-content-content textarea:hover,
#edit-modal input:hover,
#edit-modal textarea:hover {
border-color: #9ca3af;
background: #2d2d2d; /* Dark theme beibehalten */
}
.modal-body {
padding: 20px;
overflow-y: auto;
}
.modal-close {
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
font-size: 24px;
padding: 4px 8px;
border-radius: 4px;
}
.modal-close:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.modal-actions {
padding: 16px 20px;
border-top: 1px solid var(--border);
display: flex;
justify-content: flex-end;
gap: 8px;
}
.header {
background: var(--bg-secondary);
border-bottom: 1px solid var(--border);
padding: 16px 24px;
display: flex;
align-items: center;
gap: 16px;
}
.header h1 {
font-size: 18px;
font-weight: 600;
}
/* Edit Modal spezifische Eingabefelder - auch Checkboxen mit Kontrast */
#edit-content-content input[type="checkbox"],
#edit-modal input[type="checkbox"] {
width: auto;
margin-right: 8px;
accent-color: #2563eb;
}
#edit-content-content input[type="checkbox"] + label,
#edit-modal input[type="checkbox"] + label {
color: #e0e0e0;
font-weight: normal;
}
.header .badge {
background: var(--accent-light);
color: var(--accent);
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
.header .actions {
margin-left: auto;
display: flex;
gap: 8px;
}
.btn {
background: var(--bg-input);
color: var(--text-primary);
border: 1px solid var(--border);
padding: 8px 16px;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
}
.btn:hover {
background: var(--bg-hover);
border-color: var(--border-light);
}
.btn-primary {
background: var(--accent);
color: white;
border-color: var(--accent);
}
.btn-primary:hover {
background: var(--accent-hover);
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 24px;
}
.nav {
display: flex;
gap: 8px;
margin-bottom: 24px;
border-bottom: 1px solid var(--border);
padding-bottom: 16px;
}
.nav a {
color: var(--text-secondary);
padding: 8px 16px;
border-radius: 4px;
font-size: 13px;
text-decoration: none;
}
.nav a:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.nav a.active {
color: var(--accent);
background: var(--accent-light);
}
.card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
}
.card-header {
padding: 16px 20px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
}
.card-header h2 {
font-size: 15px;
font-weight: 600;
}
.card-body {
padding: 20px;
}
.template-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 16px;
}
.template-item {
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 8px;
padding: 20px;
transition: border-color 0.15s;
}
.template-item:hover {
border-color: var(--border-light);
}
.template-item h3 {
font-size: 14px;
font-weight: 600;
margin-bottom: 8px;
color: var(--accent-hover);
}
.template-item .meta {
display: flex;
gap: 12px;
margin-bottom: 12px;
font-size: 12px;
color: var(--text-secondary);
}
.template-item .meta span {
display: inline-flex;
align-items: center;
gap: 4px;
}
.template-item p {
font-size: 13px;
color: var(--text-secondary);
margin-bottom: 12px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.template-item .tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.template-item .tag {
background: var(--bg-input);
color: #b0b0b0;
padding: 3px 8px;
border-radius: 4px;
font-size: 11px;
}
.template-item .actions {
display: flex;
gap: 8px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--border);
}
.template-item .btn-icon {
padding: 6px 12px;
font-size: 12px;
}
.empty-state {
text-align: center;
padding: 60px 20px;
color: var(--text-muted);
}
.empty-state h3 {
font-size: 16px;
font-weight: 500;
margin-bottom: 8px;
color: var(--text-secondary);
}
.code-block {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 6px;
padding: 16px;
font-family: var(--mono);
font-size: 12px;
overflow-x: auto;
white-space: pre-wrap;
word-wrap: break-word;
margin-top: 12px;
color: var(--text-primary);
max-height: 400px;
overflow-y: auto;
}
/* Filter bar */
.filter-bar {
display: flex;
gap: 12px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.filter-bar input {
background: var(--bg-input);
border: 1px solid var(--border);
color: var(--text-primary);
padding: 8px 12px;
border-radius: 6px;
font-size: 13px;
flex: 1;
min-width: 200px;
}
.filter-bar input:focus {
outline: none;
border-color: var(--accent);
}
.toast {
position: fixed;
bottom: 20px;
right: 20px;
background: var(--bg-card);
border: 1px solid var(--border);
padding: 12px 16px;
border-radius: 6px;
font-size: 13px;
display: none;
z-index: 1001;
}
.toast.show {
display: block;
animation: fadeIn 0.2s;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Responsive */
@media (max-width: 768px) {
.container {
padding: 16px;
}
.template-grid {
grid-template-columns: 1fr;
}
.header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.nav {
overflow-x: auto;
padding-bottom: 8px;
}
.modal {
margin: 10px;
}
}
</style>
</head>
<body>
<!-- Modal -->
<div class="modal-overlay" id="modal" role="dialog" aria-label="Template anzeigen">
<div class="modal">
<div class="modal-header">
<h2 id="modal-title">Template</h2>
<button class="modal-close" onclick="closeModal()">&times;</button>
</div>
<div class="modal-body">
<div class="code-block" id="modal-content">Lädt...</div>
</div>
<div class="modal-actions">
<button class="btn" onclick="copyModalContent()">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
</svg>
Inhalt kopieren
</button>
<button class="btn" onclick="closeModal()">Schließen</button>
</div>
</div>
</div>
<!-- Edit Modal -->
<div class="modal-overlay" id="edit-modal" role="dialog" aria-label="Template bearbeiten">
<div class="modal" style="max-width: 800px;">
<div class="modal-header">
<h2 id="edit-title">Template bearbeiten</h2>
<button class="modal-close" onclick="closeEditModal()">&times;</button>
</div>
<div class="modal-body" id="edit-content-content" style="min-height: 300px; padding: 16px; overflow-y: auto;"></div>
<div class="modal-actions">
<button class="btn btn-primary" onclick="saveEditedContent()">Speichern</button>
<button class="btn" onclick="closeEditModal()">Abbrechen</button>
</div>
</div>
</div>
<!-- Toast -->
<div class="toast" id="toast"></div>
<div class="header">
<h1>Prompt Templates</h1>
<span class="badge">Git Managed</span>
<div class="actions"></div>
</div>
<div class="container">
<nav class="nav">
<a href="#" class="active">Alle</a>
<a href="#?type=system">System</a>
<a href="#?type=user">User</a>
<a href="#?type=custom">Custom</a>
</nav>
<div class="filter-bar">
<input type="text" id="search" placeholder="Suche Templates... (Name, Beschreibung, Tags)">
</div>
<div class="card">
<div class="card-header">
<h2>Templates</h2>
<span id="count">0 Template(s)</span>
</div>
<div class="card-body">
<div class="template-grid" id="templates"></div>
</div>
</div>
<div class="card" style="margin-top: 16px;">
<div class="card-header">
<h2>Usage Beispiel</h2>
</div>
<div class="card-body">
<div class="code-block"># Validierung
$ python scripts/validate.py templates/system/commit_analysis.json
# Alle validieren
$ python scripts/validate.py --all
# Server starten
$ python web/serve.py</div>
</div>
</div>
</div>
<script>
let allTemplates = [];
let currentEditTemplate = null;
let editContainerRef = null;
// XSS-schutz:_esc-Helper
function esc(s) {
const d = document.createElement('div');
d.textContent = s == null ? '' : String(s);
return d.innerHTML;
}
// Edit Modal Funktionen
function closeEditModal() {
document.getElementById('edit-modal').classList.remove('active');
}
function editModalContent(path) {
currentEditTemplate = path;
const title = path.split('/').pop();
document.getElementById('edit-title').textContent = `Template bearbeiten: ${title}`;
// Inhalt laden und editierbare Formulare abhängig vom Dateityp erstellen
fetch(path)
.then(r => r.text())
.then(content => {
const editContainer = document.getElementById('edit-content-content');
editContainer.innerHTML = '';
if (path.endsWith('.json')) {
try {
const jsonData = JSON.parse(content);
createJsonEditUI(editContainer, jsonData, path);
} catch (e) {
// Falls JSON ungültig, als Text bearbeiten
createTextEditUI(editContainer, content);
}
} else {
// Markdown als einfaches Textfeld
createTextEditUI(editContainer, content);
}
document.getElementById('edit-modal').classList.add('active');
})
.catch(e => showToast(`✗ Fehler beim Laden: ${e.message}`));
}
function createTextEditUI(container, content) {
const textarea = document.createElement('textarea');
textarea.id = 'edit-textarea';
textarea.value = content;
textarea.style.cssText = 'width: 100%; min-height: 300px; background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border); border-radius: 4px; padding: 10px; font-family: var(--mono); font-size: 13px;';
textarea.spellcheck = false;
container.appendChild(textarea);
}
function createJsonEditUI(container, jsonData, editPathHint = '') {
editContainerRef = container;
container.innerHTML = '';
const formDiv = document.createElement('div');
formDiv.style.cssText = 'display: flex; flex-direction: column; gap: 16px; padding: 8px; background: var(--bg-card); border-radius: 4px; margin: 0; min-height: 300px; overflow-y: auto;';
// Rekursive Funktion zum Erstellen von Eingabefeldern für alle Properties
function buildJsonForm(data, prefix = '', level = 0, targetElement = null) {
if (typeof data !== 'object' || data === null) return;
const container = targetElement || document.getElementById('edit-content-content');
if (!container) return;
Object.keys(data).forEach(key => {
const fullKey = prefix ? `${prefix}.${key}` : key;
const value = data[key];
const isObject = typeof value === 'object' && value !== null && !Array.isArray(value);
const isArray = Array.isArray(value);
// Für Objekte: Rekursiv alle inneren Properties anzeigen
if (isObject) {
const fieldContainer = document.createElement('div');
fieldContainer.style.cssText = 'background: #1a1a1a; padding: 12px; border-radius: 4px; border-left: 3px solid #4CAF50;';
const label = document.createElement('label');
label.htmlFor = `edit-${fullKey.replace(/[.\s]/g, '-')}`;
label.textContent = fullKey + ' (Objekt)';
label.style.cssText = 'font-weight: 600; color: #4CAF50; margin-bottom: 8px; display: block; font-size: 14px;';
fieldContainer.appendChild(label);
// Rekursiv innere Properties in den Container einfügen
const innerContainer = document.createElement('div');
innerContainer.style.cssText = 'padding-left: 12px; margin-top: 4px;';
buildJsonForm(value, fullKey, level + 1, innerContainer);
fieldContainer.appendChild(innerContainer);
container.appendChild(fieldContainer);
return;
}
// Für Arrays: Rekursiv jedes Element als eigenes Feld anzeigen
if (isArray) {
const arrayContainer = document.createElement('div');
arrayContainer.style.cssText = 'background: #1a1a1a; padding: 12px; border-radius: 4px; border-left: 3px solid #2196F3;';
const arrayLabel = document.createElement('label');
arrayLabel.htmlFor = `edit-${fullKey.replace(/[.\s]/g, '-')}`;
arrayLabel.textContent = fullKey + ' (Array) - ' + value.length + ' Elemente';
arrayLabel.style.cssText = 'font-weight: 600; color: #2196F3; margin-bottom: 8px; display: block; font-size: 14px;';
arrayContainer.appendChild(arrayLabel);
// Für jedes Array-Element ein separates Eingabefeld
const arrayItemsContainer = document.createElement('div');
arrayItemsContainer.style.cssText = 'margin-top: 4px; padding-left: 12px;';
value.forEach((item, index) => {
const itemKey = `${fullKey}[${index}]`;
const itemContainer = document.createElement('div');
itemContainer.style.cssText = 'background: #2a2a2a; padding: 8px; margin: 4px 0; border-radius: 3px; border-left: 2px solid #FF9800;';
const itemLabel = document.createElement('label');
itemLabel.htmlFor = `edit-${itemKey.replace(/[.\s]/g, '-')}`;
itemLabel.textContent = `Element [${index}]`;
itemLabel.style.cssText = 'font-weight: 500; color: #FF9800; margin-bottom: 4px; display: block; font-size: 13px;';
itemContainer.appendChild(itemLabel);
// Prüfen, ob das Array-Element selbst ein Objekt ist
if (typeof item === 'object' && item !== null) {
const innerObjContainer = document.createElement('div');
innerObjContainer.style.cssText = 'padding-left: 12px; margin-top: 4px;';
buildJsonForm(item, itemKey, level + 1, innerObjContainer);
itemContainer.appendChild(innerObjContainer);
} else {
const itemFieldContainer = document.createElement('div');
itemFieldContainer.style.cssText = 'background: var(--bg-input); padding: 8px; border-radius: 3px; margin-bottom: 4px;';
const input = document.createElement('input');
const type = typeof item === 'boolean' ? 'checkbox' : typeof item === 'number' ? 'number' : 'text';
input.type = type;
input.value = item !== null && item !== undefined ? item : '';
input.dataset.key = itemKey;
input.dataset.type = typeof item;
input.dataset.arrayIndex = index;
if (type === 'checkbox') input.checked = item;
else input.value = String(item !== null && item !== undefined ? item : '');
input.style.cssText = 'width: 100%; padding: 8px; background: #222222; color: #ffffff; border: 1px solid #555; border-radius: 3px; font-family: var(--mono); font-size: 13px;';
itemFieldContainer.appendChild(input);
itemContainer.appendChild(itemFieldContainer);
}
arrayItemsContainer.appendChild(itemContainer);
});
arrayContainer.appendChild(arrayItemsContainer);
container.appendChild(arrayContainer);
return;
}
// Für primitive Werte: Standard-Eingabefeld erstellen
const fieldContainer = document.createElement('div');
fieldContainer.style.cssText = 'background: var(--bg-input); padding: 8px; border-radius: 4px; border: 1px solid transparent;';
const label = document.createElement('label');
label.htmlFor = `edit-${fullKey.replace(/[.\s]/g, '-')}`;
label.textContent = fullKey;
label.style.cssText = 'font-weight: 600; color: var(--text-primary); display: block; margin-bottom: 4px; font-size: 14px; margin-top: 0;';
fieldContainer.appendChild(label);
const type = typeof value === 'boolean' ? 'checkbox' : typeof value === 'number' ? 'number' : 'text';
const input = document.createElement('input');
input.type = type;
input.value = value !== null && value !== undefined ? value : '';
input.dataset.key = fullKey;
input.dataset.type = typeof value;
if (type === 'checkbox') input.checked = value;
else input.value = String(value !== null && value !== undefined ? value : '');
input.style.cssText = 'width: 100%; padding: 8px; background: #222222; color: #ffffff; border: 1px solid #555; border-radius: 3px; font-family: var(--mono); font-size: 13px;';
fieldContainer.appendChild(input);
container.appendChild(fieldContainer);
});
}
buildJsonForm(jsonData, '', 0, formDiv);
container.appendChild(formDiv);
}
function extractInputValue(input) {
if (input.type === 'checkbox') {
return input.checked;
}
const value = input.value;
try {
// Nur wenn der Input-Typ "text" ist und Wert JSON-ähnlich formatiert
if (input.type === 'text' && value.length > 0) {
if ((value.startsWith('{') && value.endsWith('}')) ||
(value.startsWith('[') && value.endsWith(']'))) {
try {
return JSON.parse(value);
} catch (parseErr) {
// Kein gültiges JSON, behalte String-Wert
}
}
}
if (input.dataset.type === 'number') {
return Number(value);
}
return value;
} catch (e) {
return value;
}
}
function extractJsonFromForm(formDiv) {
// Map: full key -> { value, type }
const inputEntries = [];
const inputs = formDiv.querySelectorAll('[data-key]');
inputs.forEach(input => {
const key = input.dataset.key || '';
inputEntries.push({ key, value: extractInputValue(input) });
});
// Sort by key to ensure stable parent-first construction
inputEntries.sort((a,b) => a.key.localeCompare(b.key));
const result = {};
inputEntries.forEach(({ key, value }) => {
const parts = key.split('.');
let cur = result;
for (let i = 0; i < parts.length; i++) {
const part = parts[i];
const isLast = i === parts.length - 1;
const m = part.match(/^([^\[\]]+)\[(\d+)\]$/);
if (m && !isLast) {
const base = m[1];
const idx = Number(m[2]);
if (!cur[base]) cur[base] = [];
if (!cur[base][idx]) cur[base][idx] = {};
cur = cur[base][idx];
} else if (m && isLast) {
// Array leaf
const base = m[1];
const idx = Number(m[2]);
if (!cur[base]) cur[base] = [];
cur[base][idx] = value;
} else if (isLast) {
cur[part] = value;
} else {
if (!cur[part]) cur[part] = {};
cur = cur[part];
}
}
});
return result;
}
async function saveEditedContent() {
if (!currentEditTemplate) return;
try {
if (currentEditTemplate.endsWith('.json')) {
const editContainer = document.getElementById('edit-content-content');
const firstChild = editContainer.children[0];
const formDiv = (firstChild && firstChild.nodeType === Node.ELEMENT_NODE && firstChild.tagName === 'DIV') ? firstChild : null;
if (!formDiv) {
showToast('✗ Keine Eingabefelder gefunden');
return;
}
const updatedData = extractJsonFromForm(formDiv);
const finalJsonString = JSON.stringify(updatedData, null, 2);
// Valid JSON prüfen
try {
JSON.parse(finalJsonString);
} catch (e) {
showToast('✗ Ungültiges JSON. Bitte korrigiere den Inhalt.');
return;
}
const response = await fetch(currentEditTemplate, {
method: 'PUT',
headers: {'Content-Type': 'text/plain'},
body: finalJsonString
});
if (response.ok) {
showToast('✓ Änderungen gespeichert');
closeEditModal();
closeModal();
viewTemplate(currentEditTemplate);
} else {
throw new Error(`HTTP ${response.status}`);
}
} else {
const textarea = document.getElementById('edit-textarea');
const content = textarea.value;
const response = await fetch(currentEditTemplate, {
method: 'PUT',
headers: {'Content-Type': 'text/plain'},
body: content
});
if (response.ok) {
showToast('✓ Änderungen gespeichert');
closeEditModal();
closeModal();
viewTemplate(currentEditTemplate);
} else {
throw new Error(`HTTP ${response.status}`);
}
}
} catch (e) {
showToast(`✗ Fehler beim Speichern: ${e.message}`);
}
}
// Modal-Funktionen
function showModal(title, content) {
document.getElementById('modal-title').textContent = title;
document.getElementById('modal-content').textContent = content;
document.getElementById('modal').classList.add('active');
}
function closeModal() {
document.getElementById('modal').classList.remove('active');
}
function showToast(message) {
const toast = document.getElementById('toast');
toast.textContent = message;
toast.classList.add('show');
setTimeout(() => toast.classList.remove('show'), 3000);
}
async function copyModalContent() {
const content = document.getElementById('modal-content').textContent;
try {
await navigator.clipboard.writeText(content);
showToast('✓ Inhalt kopiert');
} catch (e) {
// Fallback für ältere Browser
const textarea = document.createElement('textarea');
textarea.value = content;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
showToast('✓ Inhalt kopiert');
}
}
// Template-Inhalt laden und anzeigen
async function viewTemplate(path) {
try {
const response = await fetch(path);
if (!response.ok) throw new Error('Datei nicht gefunden');
let content = await response.text();
// Für JSON: formatiert anzeigen
if (path.endsWith('.json')) {
try {
const data = JSON.parse(content);
content = JSON.stringify(data, null, 2);
} catch (e) {
// Nicht valides JSON, als Raw Text anzeigen
}
}
showModal(path.split('/').pop(), content);
} catch (e) {
showModal(path, `Fehler beim Laden: ${e.message}`);
}
}
// Template-Inhalt kopieren
async function copyContent(path) {
try {
const response = await fetch(path);
if (!response.ok) throw new Error('Datei nicht gefunden');
let content = await response.text();
// Für JSON: originalen Inhalt (nicht formatiert) kopieren
if (path.endsWith('.json')) {
try {
JSON.parse(content);
// Valides JSON - originalen Inhalt behalten
} catch (e) {
// Nicht valides JSON
}
}
await navigator.clipboard.writeText(content);
showToast('✓ Inhalt kopiert');
} catch (e) {
showToast(`✗ Fehler: ${e.message}`);
}
}
// Template-Daten laden
async function loadTemplates() {
const response = await fetch('/templates.json');
if (!response.ok) {
return await scanTemplates();
}
return response.json();
}
async function scanTemplates() {
const templates = [];
const systemFiles = ['commit_analysis', 'code_reviewer', 'summarizer'];
for (const file of systemFiles) {
try {
const response = await fetch(`/templates/system/${file}.json`);
if (response.ok) {
const data = await response.json();
templates.push({
path: `/templates/system/${file}.json`,
type: 'system',
name: data.name || file,
description: data.description || '',
version: data.version || '1.0',
tags: data.tags || [],
format: 'json'
});
}
} catch (e) {}
}
const userFiles = ['email_draft', 'brainstorming'];
for (const file of userFiles) {
try {
const response = await fetch(`/templates/user/${file}.md`);
if (response.ok) {
const text = await response.text();
const name = text.split('\n')[0].replace('# ', '');
templates.push({
path: `/templates/user/${file}.md`,
type: 'user',
name: name,
description: '',
version: '1.0',
tags: [],
format: 'md'
});
}
} catch (e) {}
}
return templates;
}
function renderTemplates(templates) {
const container = document.getElementById('templates');
const count = document.getElementById('count');
count.textContent = `${templates.length} Template(s)`;
if (templates.length === 0) {
container.innerHTML = '<div class="empty-state"><h3>Keine Templates gefunden</h3><p>Füge Templates in den templates/ Ordnern hinzu.</p></div>';
return;
}
container.innerHTML = templates.map(t => `
<div class="template-item">
<h3>${esc(t.name)}</h3>
<div class="meta">
<span>🏷️ ${esc(t.type)}</span>
<span>📄 ${esc(t.format)}</span>
<span>📌 v${esc(t.version)}</span>
</div>
<p>${esc(t.description) || 'Keine Beschreibung'}</p>
<div class="tags">
${t.tags.map(tag => `<span class="tag">${esc(tag)}</span>`).join('')}
</div>
<div class="actions">
<button class="btn btn-icon" onclick="viewTemplate('${esc(t.path)}')">Anzeigen</button>
<button class="btn btn-icon" onclick="editModalContent('${esc(t.path)}')">📝 Bearbeiten</button>
<button class="btn btn-icon" onclick="copyContent('${esc(t.path)}')">Inhalt kopieren</button>
</div>
</div>
`).join('');
}
// Filter state
let currentType = null;
let currentQuery = '';
function parseTypeFromHash() {
const match = window.location.hash.match(/[?&]type=([^&]+)/);
return match ? decodeURIComponent(match[1]) : null;
}
function setNavActive(type) {
document.querySelectorAll('.nav a').forEach(a => {
const m = (a.getAttribute('href') || '').match(/type=([^&]+)/);
const aType = m ? m[1] : null;
a.classList.toggle('active', aType === type);
});
}
function applyFilters() {
let list = allTemplates;
if (currentType) {
list = list.filter(t => t.type === currentType);
}
if (currentQuery) {
const q = currentQuery;
list = list.filter(t =>
(t.name || '').toLowerCase().includes(q) ||
(t.description || '').toLowerCase().includes(q) ||
(t.tags || []).some(tag => tag.toLowerCase().includes(q))
);
}
setNavActive(currentType);
renderTemplates(list);
}
// Search
document.getElementById('search').addEventListener('input', (e) => {
currentQuery = e.target.value.toLowerCase();
applyFilters();
});
// Close modal on overlay click
document.getElementById('modal').addEventListener('click', (e) => {
if (e.target === e.currentTarget) closeModal();
});
// Escape key closes modal
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') { closeEditModal(); closeModal(); }
});
// Hash -> type filter
window.addEventListener('hashchange', () => {
currentType = parseTypeFromHash();
applyFilters();
});
// Nav clicks set the hash; hashchange drives filtering
document.querySelectorAll('.nav a').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
const target = link.getAttribute('href') || '#';
if (window.location.hash === target || (target === '#' && window.location.hash === '')) {
return; // same target, no hashchange would fire
}
window.location.hash = target;
});
});
// Initial load
loadTemplates().then(t => {
allTemplates = t;
currentType = parseTypeFromHash();
applyFilters();
}).catch(e => {
console.error('Failed to load templates:', e);
allTemplates = [];
applyFilters();
});
</script>
</body>
</html>