393 lines
14 KiB
Vue
393 lines
14 KiB
Vue
<template>
|
|
<div class="min-h-full bg-gray-50">
|
|
<!-- Fixed Header below navigation -->
|
|
<div class="fixed top-20 left-0 right-0 z-40 bg-white border-b border-gray-200 shadow-sm">
|
|
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-3 sm:py-4">
|
|
<div class="flex items-center justify-between">
|
|
<h1 class="text-xl sm:text-3xl font-display font-bold text-gray-900">
|
|
TT-Regeln bearbeiten
|
|
</h1>
|
|
<div class="space-x-3">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Fixed Toolbar below header -->
|
|
<div
|
|
class="fixed left-0 right-0 z-30 bg-white border-b border-gray-200 shadow-sm"
|
|
style="top: 9.5rem;"
|
|
>
|
|
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex flex-wrap items-center gap-1 sm:gap-2 py-1.5 sm:py-2">
|
|
<!-- 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>
|
|
</div>
|
|
|
|
<!-- Content with top padding -->
|
|
<div
|
|
class="pb-16"
|
|
style="padding-top: 12rem;"
|
|
>
|
|
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<!-- Hilfe-Sektion -->
|
|
<div class="mb-6 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>
|
|
<p><strong>4. Grid-Layout:</strong> Kästchen werden automatisch im Grid-Layout angeordnet</p>
|
|
<p class="text-xs text-blue-600 mt-2">
|
|
💡 <strong>Tipp:</strong> Neue Kästchen werden automatisch in das bestehende Grid eingefügt!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl 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>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
|
|
definePageMeta({
|
|
middleware: 'auth',
|
|
})
|
|
|
|
useHead({ title: 'CMS: TT-Regeln' })
|
|
|
|
const editor = ref(null)
|
|
const initialHtml = ref('')
|
|
|
|
async function load() {
|
|
const data = await $fetch('/api/config')
|
|
initialHtml.value = data?.seiten?.ttRegeln || ''
|
|
if (editor.value) editor.value.innerHTML = initialHtml.value
|
|
}
|
|
|
|
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 (_e) {
|
|
// Modal nicht verfügbar, ignorieren
|
|
}
|
|
} catch (error) {
|
|
try { window.showErrorModal && window.showErrorModal('Fehler', error?.data?.message || 'Speichern fehlgeschlagen') } catch (_e) {
|
|
// Modal nicht verfügbar, ignorieren
|
|
}
|
|
}
|
|
}
|
|
|
|
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) return
|
|
document.execCommand('createLink', false, url)
|
|
}
|
|
|
|
function removeFormat() {
|
|
document.execCommand('removeFormat', false, null)
|
|
}
|
|
|
|
function insertRuleTemplate(type) {
|
|
const editorElement = editor.value
|
|
if (!editorElement) return
|
|
|
|
let template = ''
|
|
let bgColor = 'bg-gray-50'
|
|
|
|
switch (type) {
|
|
case 'generic':
|
|
template = `
|
|
<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>
|
|
`
|
|
bgColor = 'bg-gray-50'
|
|
break
|
|
case 'basic':
|
|
template = `
|
|
<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 hier eingeben]<br><strong>Anwendung:</strong> [Wann gilt diese Regel?]</p>
|
|
</div>
|
|
`
|
|
bgColor = 'bg-blue-50'
|
|
break
|
|
case 'penalty':
|
|
template = `
|
|
<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>
|
|
`
|
|
bgColor = 'bg-green-50'
|
|
break
|
|
case 'service':
|
|
template = `
|
|
<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>
|
|
`
|
|
bgColor = 'bg-yellow-50'
|
|
break
|
|
}
|
|
|
|
// Editor fokussieren
|
|
editorElement.focus()
|
|
|
|
const selection = window.getSelection()
|
|
if (selection.rangeCount > 0) {
|
|
const range = selection.getRangeAt(0)
|
|
|
|
// Prüfen ob der Cursor im Editor ist
|
|
if (editorElement.contains(range.commonAncestorContainer) || editorElement === range.commonAncestorContainer) {
|
|
// Aktuelles Element finden
|
|
let currentElement = range.commonAncestorContainer
|
|
|
|
// Falls es ein Text-Node ist, zum Parent-Element gehen
|
|
if (currentElement.nodeType === Node.TEXT_NODE) {
|
|
currentElement = currentElement.parentElement
|
|
}
|
|
|
|
// Zum spezifischen Container navigieren mit den Klassen "grid md:grid-cols-2 lg:grid-cols-3 gap-6"
|
|
let targetContainer = currentElement
|
|
while (targetContainer && !targetContainer.classList.contains('grid')) {
|
|
targetContainer = targetContainer.parentElement
|
|
}
|
|
|
|
// Prüfen ob es der richtige Container ist
|
|
if (targetContainer &&
|
|
targetContainer.classList.contains('md:grid-cols-2') &&
|
|
targetContainer.classList.contains('lg:grid-cols-3') &&
|
|
targetContainer.classList.contains('gap-6')) {
|
|
|
|
// Wir sind im richtigen Container - neues Kästchen hinzufügen
|
|
const tempDiv = document.createElement('div')
|
|
tempDiv.innerHTML = template
|
|
|
|
// Neues Kästchen in den Container einfügen
|
|
// Suche nach dem ersten Element-Node (nicht Text-Node)
|
|
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)
|
|
|
|
// Cursor in das neue Kästchen setzen
|
|
const newRange = document.createRange()
|
|
const titleElement = newCard.querySelector('h3')
|
|
if (titleElement) {
|
|
newRange.setStart(titleElement, 0)
|
|
newRange.collapse(true)
|
|
selection.removeAllRanges()
|
|
selection.addRange(newRange)
|
|
}
|
|
} else {
|
|
console.error('No valid element found in template');
|
|
}
|
|
} else {
|
|
// Spezifischer Container nicht gefunden - am Ende einfügen
|
|
editorElement.innerHTML += template
|
|
}
|
|
} else {
|
|
// Cursor ist nicht im Editor - Template am Ende einfügen
|
|
editorElement.innerHTML += template
|
|
}
|
|
} else {
|
|
// Keine Auswahl - Template am Ende einfügen
|
|
editorElement.innerHTML += template
|
|
}
|
|
}
|
|
|
|
function deleteCurrentRule() {
|
|
const editorElement = editor.value
|
|
if (!editorElement) return
|
|
|
|
// Editor fokussieren
|
|
editorElement.focus()
|
|
|
|
const selection = window.getSelection()
|
|
if (selection.rangeCount > 0) {
|
|
const range = selection.getRangeAt(0)
|
|
|
|
// Prüfen ob der Cursor im Editor ist
|
|
if (editorElement.contains(range.commonAncestorContainer) || editorElement === range.commonAncestorContainer) {
|
|
// Aktuelles Element finden
|
|
let currentElement = range.commonAncestorContainer
|
|
|
|
// Falls es ein Text-Node ist, zum Parent-Element gehen
|
|
if (currentElement.nodeType === Node.TEXT_NODE) {
|
|
currentElement = currentElement.parentElement
|
|
}
|
|
|
|
// Zum Grid-Kästchen navigieren
|
|
let cardElement = currentElement
|
|
while (cardElement && !cardElement.classList.contains('text-center')) {
|
|
cardElement = cardElement.parentElement
|
|
}
|
|
|
|
if (cardElement && cardElement.classList.contains('text-center')) {
|
|
// Grid-Kästchen gefunden - löschen
|
|
cardElement.remove()
|
|
|
|
// Cursor in das nächste Kästchen oder Grid setzen
|
|
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>
|