frankenbot/templates/files.html

{% extends "base.html" %}
{% block title %}Dateien{% endblock %}

{% block content %}
<div class="page-header">
  <h1>Dateiverwaltung</h1>
  <p>Uploads, Email-Vorlagen und Projektdokumente</p>
</div>

<div class="row g-4">
  <!-- Upload sidebar -->
  <div class="col-lg-4">
    <div class="card">
      <div class="card-header bg-info">
        <span>📤 Datei hochladen</span>
      </div>
      <div class="card-body">
        <form method="POST" action="/files" enctype="multipart/form-data">
          <div class="mb-3">
            <label for="file" class="form-label">Datei auswählen</label>
            <input type="file" class="form-control" id="file" name="file" required>
          </div>
          <p style="color:var(--text-muted);font-size:.76rem;margin-bottom:.75rem;">Max. 16 MB</p>
          <button type="submit" class="btn btn-info w-100">Hochladen</button>
        </form>
      </div>
    </div>

    <!-- Quick stats -->
    <div class="card mt-3">
      <div class="card-body p-0">
        <ul class="list-group list-group-flush">
          <li class="list-group-item d-flex justify-content-between align-items-center" style="padding:.7rem 1rem;">
            <span style="font-size:.85rem;color:var(--text-secondary);">📁 Uploads</span>
            <span class="badge bg-secondary">{{ files|length }}</span>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center" style="padding:.7rem 1rem;">
            <span style="font-size:.85rem;color:var(--text-secondary);">✉ Email-Vorlagen</span>
            <span class="badge bg-secondary">{{ email_files|length }}</span>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center" style="padding:.7rem 1rem;">
            <span style="font-size:.85rem;color:var(--text-secondary);">📄 Projektdokumente</span>
            <span class="badge bg-secondary">{{ project_files|length }}</span>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center" style="padding:.7rem 1rem;">
            <span style="font-size:.85rem;color:var(--text-secondary);">🤖 Agenten-Dateien</span>
            <span class="badge bg-secondary">{{ agent_work_folders|length }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <!-- File lists -->
  <div class="col-lg-8">

    <!-- Uploads -->
    <div class="card mb-3">
      <div class="card-header bg-primary d-flex justify-content-between align-items-center">
        <span>📁 Hochgeladene Dateien</span>
        <span class="badge bg-secondary">{{ files|length }}</span>
      </div>
      <div class="card-body">
        {% if files %}
          {% for file in files %}
          <div class="file-item">
            <span class="file-icon">{{ '📄' if file.name.endswith('.txt') else '📝' if file.name.endswith('.md') else '📋' if file.name.endswith('.docx') else '📁' }}</span>
            <div style="flex:1;min-width:0;">
              <div class="file-name">{{ file.name }}</div>
              <div class="file-meta">{{ (file.size / 1024)|round(1) }} KB · {{ file.modified }}</div>
            </div>
            <div class="file-actions">
              <a href="/files/download/{{ file.name }}" class="btn btn-sm btn-secondary" title="Herunterladen">↓</a>
              <a href="/files/delete/{{ file.name }}" class="btn btn-sm btn-danger"
                onclick="return confirm('Datei löschen?')" title="Löschen">✕</a>
            </div>
          </div>
          {% endfor %}
        {% else %}
          <div class="text-center py-4" style="color:var(--text-muted);">
            <div style="font-size:2rem;margin-bottom:.5rem;">📂</div>
            <p style="margin:0;font-size:.875rem;">Noch keine Dateien hochgeladen.</p>
          </div>
        {% endif %}
      </div>
    </div>

    <!-- Email-Vorlagen -->
    <div class="card mb-3">
      <div class="card-header bg-dark d-flex justify-content-between align-items-center">
        <span>✉ Email-Vorlagen <small style="font-weight:400;font-size:.72rem;color:var(--text-muted);margin-left:.4rem;">emails/</small></span>
        <span class="badge bg-secondary">{{ email_files|length }}</span>
      </div>
      <div class="card-body">
        {% if email_files %}
          {% for file in email_files %}
          <div class="file-item" id="file-row-{{ loop.index }}">
            <span class="file-icon">✉</span>
            <div style="flex:1;min-width:0;">
              <div class="file-name">{{ file.name }}</div>
              <div class="file-meta">{{ (file.size / 1024)|round(1) }} KB · {{ file.modified }}</div>
            </div>
            <div class="file-actions">
              <button class="btn btn-sm btn-secondary"
                onclick="viewEmailFile(event, '{{ file.name }}')" title="Anzeigen">👁</button>
              <button class="btn btn-sm btn-primary"
                onclick="editEmailFile('{{ file.name }}')" title="Bearbeiten">✎</button>
              <a href="/files/email/delete/{{ file.name }}" class="btn btn-sm btn-danger"
                onclick="return confirm('Email-Vorlage löschen?')" title="Löschen">✕</a>
            </div>
          </div>
          {% endfor %}
        {% else %}
          <div class="text-center py-4" style="color:var(--text-muted);">
            <div style="font-size:2rem;margin-bottom:.5rem;">✉</div>
            <p style="margin:0;font-size:.875rem;">Keine Email-Vorlagen gefunden.</p>
          </div>
        {% endif %}
      </div>
    </div>

    <!-- Projektdokumente -->
    <div class="card mb-3">
      <div class="card-header bg-secondary d-flex justify-content-between align-items-center">
        <span>📄 Projektdokumente <small style="font-weight:400;font-size:.72rem;color:var(--text-muted);margin-left:.4rem;">Arbeitsverzeichnis</small></span>
        <span class="badge bg-secondary">{{ project_files|length }}</span>
      </div>
      <div class="card-body">
        {% if project_files %}
          {% for file in project_files %}
          <div class="file-item">
            <span class="file-icon">{{ '📋' if file.name.endswith('.docx') else '📝' if file.name.endswith('.md') else '📄' }}</span>
            <div style="flex:1;min-width:0;">
              <div class="file-name">{{ file.name }}</div>
              <div class="file-meta">{{ (file.size / 1024)|round(1) }} KB · {{ file.modified }}</div>
            </div>
            <div class="file-actions">
              <button class="btn btn-sm btn-secondary"
                onclick="viewProjectFile(event, '{{ file.name }}')" title="Anzeigen">👁</button>
            </div>
          </div>
          {% endfor %}
        {% else %}
          <div class="text-center py-4" style="color:var(--text-muted);">
            <p style="margin:0;font-size:.875rem;color:var(--text-muted);">Keine Projektdokumente gefunden.</p>
          </div>
        {% endif %}
      </div>
    </div>

    <!-- Agent Work Folders -->
    {% if agent_work_folders %}
    {% for agent_key, files in agent_work_folders.items() %}
    <div class="card mb-3">
      <div class="card-header bg-success d-flex justify-content-between align-items-center">
        <span>🤖 {{ agent_key.replace('_', ' ').title() }} <small style="font-weight:400;font-size:.72rem;color:var(--text-muted);margin-left:.4rem;">agents/{{ agent_key }}/work/</small></span>
        <span class="badge bg-secondary">{{ files|length }}</span>
      </div>
      <div class="card-body">
        {% for file in files %}
        <div class="file-item">
          <span class="file-icon">{{ '📋' if file.name.endswith('.docx') else '📝' if file.name.endswith('.md') else '📊' if file.name.endswith(('.json', '.csv')) else '📄' }}</span>
          <div style="flex:1;min-width:0;">
            <div class="file-name">{{ file.name }}</div>
            <div class="file-meta">{{ (file.size / 1024)|round(1) }} KB · {{ file.modified[:10] }}</div>
          </div>
          <div class="file-actions">
            <a href="/files/agent/{{ agent_key }}/{{ file.name }}" class="btn btn-sm btn-secondary" title="Herunterladen">↓</a>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
    {% endfor %}
    {% endif %}

  </div>
</div>

<!-- File Viewer Modal -->
<div class="modal fade" id="fileModal" tabindex="-1">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="fileModalTitle">Datei</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <pre id="fileModalContent" style="background:var(--bg-base);color:#a5f3fc;
          border-radius:var(--radius-sm);padding:1.1rem;white-space:pre-wrap;
          word-break:break-word;max-height:70vh;overflow-y:auto;font-size:.83rem;
          border:1px solid var(--border);font-family:'JetBrains Mono',monospace;">Wird geladen…</pre>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
      </div>
    </div>
  </div>
</div>

<!-- Email Editor Modal -->
<div class="modal fade" id="editModal" tabindex="-1">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">✎ Bearbeiten: <span id="editModalFilename"></span></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <textarea id="editModalContent" class="inline-editor" spellcheck="false"></textarea>
        <div id="editSaveStatus" style="font-size:.8rem;color:var(--text-muted);margin-top:.5rem;height:1.2em;"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
        <button type="button" class="btn btn-primary" onclick="saveEmailFile()">💾 Speichern</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let currentEditFile = null;

function openFileModal(title, url) {
  document.getElementById('fileModalTitle').textContent = title;
  const content = document.getElementById('fileModalContent');
  content.textContent = 'Wird geladen…';
  const modal = new bootstrap.Modal(document.getElementById('fileModal'));
  modal.show();
  fetch(url)
    .then(r => r.json())
    .then(d => { content.textContent = d.content || d.error || '(leer)'; })
    .catch(e => { content.textContent = 'Fehler: ' + e.message; });
}

function viewEmailFile(event, name) {
  event.preventDefault();
  openFileModal(name, '/files/email/view/' + encodeURIComponent(name) + '?json=1');
}

function viewProjectFile(event, name) {
  event.preventDefault();
  openFileModal(name, '/files/project/view/' + encodeURIComponent(name) + '?json=1');
}

function editEmailFile(name) {
  currentEditFile = name;
  document.getElementById('editModalFilename').textContent = name;
  const textarea = document.getElementById('editModalContent');
  const status = document.getElementById('editSaveStatus');
  textarea.value = 'Wird geladen…';
  status.textContent = '';
  const modal = new bootstrap.Modal(document.getElementById('editModal'));
  modal.show();
  fetch('/files/email/view/' + encodeURIComponent(name) + '?json=1')
    .then(r => r.json())
    .then(d => { textarea.value = d.content || d.error || ''; })
    .catch(e => { textarea.value = 'Fehler: ' + e.message; });
}

function saveEmailFile() {
  if (!currentEditFile) return;
  const content = document.getElementById('editModalContent').value;
  const status = document.getElementById('editSaveStatus');
  status.style.color = 'var(--text-muted)';
  status.textContent = 'Speichern…';

  fetch('/files/email/save/' + encodeURIComponent(currentEditFile), {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ content })
  })
  .then(r => r.json())
  .then(d => {
    if (d.ok) {
      status.style.color = 'var(--success)';
      status.textContent = '✓ Gespeichert';
      setTimeout(() => { status.textContent = ''; }, 3000);
    } else {
      status.style.color = 'var(--danger)';
      status.textContent = '✗ Fehler: ' + (d.error || 'Unbekannt');
    }
  })
  .catch(e => {
    status.style.color = 'var(--danger)';
    status.textContent = '✗ ' + e.message;
  });
}
</script>
{% endblock %}