harheimertc/components/cms/CmsTtRegeln.vue

<template>
  <div>
    <!-- Header with save button -->
    <div class="flex items-center justify-between mb-4">
      <h2 class="text-xl sm:text-2xl font-display font-bold text-gray-900">
        TT-Regeln bearbeiten
      </h2>
      <button
        class="inline-flex items-center px-3 py-1.5 sm:px-4 sm:py-2 rounded-lg bg-primary-600 text-white hover:bg-primary-700 text-sm sm:text-base"
        @click="save"
      >
        Speichern
      </button>
    </div>

    <!-- Toolbar -->
    <div class="sticky top-0 z-10 bg-white border border-gray-200 rounded-t-lg shadow-sm">
      <div class="flex flex-wrap items-center gap-1 sm:gap-2 py-1.5 sm:py-2 px-3">
        <!-- Formatierung -->
        <div class="flex items-center gap-1 border-r pr-2 mr-2">
          <button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="format('bold')"><strong>B</strong></button>
          <button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="format('italic')"><em>I</em></button>
          <button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="formatHeader(1)">H1</button>
          <button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="formatHeader(2)">H2</button>
          <button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="formatHeader(3)">H3</button>
        </div>
        <!-- Listen -->
        <div class="flex items-center gap-1 border-r pr-2 mr-2">
          <button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="format('insertUnorderedList')">•</button>
          <button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="format('insertOrderedList')">1.</button>
        </div>
        <!-- Schnellzugriff für Regeln -->
        <div class="flex items-center gap-1 border-r pr-2 mr-2">
          <button class="px-2 py-1 sm:px-3 sm:py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs sm:text-sm" @click="insertRuleTemplate('generic')">Neue Regel</button>
          <button class="px-2 py-1 sm:px-3 sm:py-1 rounded bg-blue-100 hover:bg-blue-200 text-blue-700 text-xs sm:text-sm" @click="insertRuleTemplate('basic')">Grundregel</button>
          <button class="px-2 py-1 sm:px-3 sm:py-1 rounded bg-green-100 hover:bg-green-200 text-green-700 text-xs sm:text-sm" @click="insertRuleTemplate('penalty')">Strafregel</button>
          <button class="px-2 py-1 sm:px-3 sm:py-1 rounded bg-yellow-100 hover:bg-yellow-200 text-yellow-700 text-xs sm:text-sm" @click="insertRuleTemplate('service')">Aufschlag</button>
          <button class="px-2 py-1 sm:px-3 sm:py-1 rounded bg-red-100 hover:bg-red-200 text-red-700 text-xs sm:text-sm" @click="deleteCurrentRule()">Regel löschen</button>
        </div>
        <!-- Weitere Tools -->
        <div class="flex items-center gap-1">
          <button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="createLink()">Link</button>
          <button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="removeFormat()">Clear</button>
        </div>
      </div>
    </div>

    <!-- Hilfe-Sektion -->
    <div class="my-4 bg-blue-50 border border-blue-200 rounded-lg p-4">
      <h3 class="text-lg font-semibold text-blue-900 mb-2">So arbeiten Sie mit Regel-Kästchen:</h3>
      <div class="text-sm text-blue-800 space-y-2">
        <p><strong>1. Neue Kästchen hinzufügen:</strong> Klicken Sie in ein bestehendes Kästchen und verwenden Sie die Buttons:</p>
        <ul class="ml-4 space-y-1">
          <li>• <span class="bg-gray-100 px-2 py-1 rounded text-xs">Neue Regel</span> - Graues Kästchen</li>
          <li>• <span class="bg-blue-100 px-2 py-1 rounded text-xs">Grundregel</span> - Blaues Kästchen</li>
          <li>• <span class="bg-green-100 px-2 py-1 rounded text-xs">Strafregel</span> - Grünes Kästchen</li>
          <li>• <span class="bg-yellow-100 px-2 py-1 rounded text-xs">Aufschlag</span> - Gelbes Kästchen</li>
        </ul>
        <p><strong>2. Kästchen löschen:</strong> Klicken Sie in ein Kästchen und dann auf <span class="bg-red-100 px-2 py-1 rounded text-xs">Regel löschen</span></p>
        <p><strong>3. Kästchen bearbeiten:</strong> Klicken Sie direkt in die Texte und bearbeiten Sie sie</p>
      </div>
    </div>

    <!-- Editor -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-3 sm:p-4">
      <div
        ref="editor"
        class="min-h-[320px] p-3 sm:p-4 outline-none prose max-w-none text-sm sm:text-base"
        contenteditable
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const editor = ref(null)

async function load() {
  const data = await $fetch('/api/config')
  const html = data?.seiten?.ttRegeln || ''
  if (editor.value) editor.value.innerHTML = html
}

async function save() {
  const html = editor.value?.innerHTML || ''
  const current = await $fetch('/api/config')
  const updated = { ...current, seiten: { ...(current.seiten || {}), ttRegeln: html } }
  try {
    await $fetch('/api/config', { method: 'PUT', body: updated })
    try { window.showSuccessModal && window.showSuccessModal('Erfolg', 'Regeln erfolgreich gespeichert!') } catch { /* */ }
  } catch (error) {
    try { window.showErrorModal && window.showErrorModal('Fehler', error?.data?.message || 'Speichern fehlgeschlagen') } catch { /* */ }
  }
}

function format(cmd) { document.execCommand(cmd, false, null) }
function formatHeader(level) { document.execCommand('formatBlock', false, 'H' + level) }
function createLink() { const url = prompt('URL eingeben:'); if (url) document.execCommand('createLink', false, url) }
function removeFormat() { document.execCommand('removeFormat', false, null) }

function insertRuleTemplate(type) {
  const editorElement = editor.value
  if (!editorElement) return
  
  const templates = {
    generic: '<div class="text-center p-6 bg-gray-50 rounded-lg"><h3 class="text-xl font-semibold text-gray-900 mb-2">Neue Regel</h3><p class="text-gray-600 text-sm">[Regeltext hier eingeben]</p></div>',
    basic: '<div class="text-center p-6 bg-blue-50 rounded-lg"><h3 class="text-xl font-semibold text-gray-900 mb-2">Neue Grundregel</h3><p class="text-gray-600 text-sm"><strong>Regel:</strong> [Regeltext hier eingeben]<br><strong>Beschreibung:</strong> [Detaillierte Beschreibung]<br><strong>Anwendung:</strong> [Wann gilt diese Regel?]</p></div>',
    penalty: '<div class="text-center p-6 bg-green-50 rounded-lg"><h3 class="text-xl font-semibold text-gray-900 mb-2">Neue Strafregel</h3><p class="text-gray-600 text-sm"><strong>Verstoß:</strong> [Was ist der Verstoß?]<br><strong>Strafe:</strong> [Welche Strafe wird verhängt?]<br><strong>Häufigkeit:</strong> [Bei wiederholten Verstößen?]</p></div>',
    service: '<div class="text-center p-6 bg-yellow-50 rounded-lg"><h3 class="text-xl font-semibold text-gray-900 mb-2">Neue Aufschlagregel</h3><p class="text-gray-600 text-sm"><strong>Regel:</strong> [Aufschlagregel hier eingeben]<br><strong>Technik:</strong> [Wie muss der Aufschlag ausgeführt werden?]<br><strong>Fehler:</strong> [Was gilt als Fehler?]</p></div>'
  }
  
  const template = templates[type] || templates.generic
  editorElement.focus()
  
  const selection = window.getSelection()
  if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0)
    if (editorElement.contains(range.commonAncestorContainer) || editorElement === range.commonAncestorContainer) {
      let currentElement = range.commonAncestorContainer
      if (currentElement.nodeType === Node.TEXT_NODE) currentElement = currentElement.parentElement
      
      let targetContainer = currentElement
      while (targetContainer && !targetContainer.classList.contains('grid')) {
        targetContainer = targetContainer.parentElement
      }
      
      if (targetContainer && targetContainer.classList.contains('md:grid-cols-2') && targetContainer.classList.contains('lg:grid-cols-3') && targetContainer.classList.contains('gap-6')) {
        const tempDiv = document.createElement('div')
        tempDiv.innerHTML = template
        let newCard = null
        for (let i = 0; i < tempDiv.childNodes.length; i++) {
          if (tempDiv.childNodes[i].nodeType === Node.ELEMENT_NODE) { newCard = tempDiv.childNodes[i]; break }
        }
        if (newCard) {
          targetContainer.appendChild(newCard)
          const newRange = document.createRange()
          const titleElement = newCard.querySelector('h3')
          if (titleElement) { newRange.setStart(titleElement, 0); newRange.collapse(true); selection.removeAllRanges(); selection.addRange(newRange) }
        }
      } else {
        editorElement.innerHTML += template
      }
    } else {
      editorElement.innerHTML += template
    }
  } else {
    editorElement.innerHTML += template
  }
}

function deleteCurrentRule() {
  const editorElement = editor.value
  if (!editorElement) return
  editorElement.focus()
  const selection = window.getSelection()
  if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0)
    if (editorElement.contains(range.commonAncestorContainer) || editorElement === range.commonAncestorContainer) {
      let currentElement = range.commonAncestorContainer
      if (currentElement.nodeType === Node.TEXT_NODE) currentElement = currentElement.parentElement
      let cardElement = currentElement
      while (cardElement && !cardElement.classList.contains('text-center')) { cardElement = cardElement.parentElement }
      if (cardElement && cardElement.classList.contains('text-center')) {
        cardElement.remove()
        const gridContainer = editorElement.querySelector('.grid')
        if (gridContainer && gridContainer.children.length > 0) {
          const firstCard = gridContainer.firstElementChild
          const titleElement = firstCard.querySelector('h3')
          if (titleElement) {
            const newRange = document.createRange()
            newRange.setStart(titleElement, 0); newRange.collapse(true)
            selection.removeAllRanges(); selection.addRange(newRange)
          }
        }
      }
    }
  }
}

onMounted(load)
</script>