update
This commit is contained in:
Team3
20
README.md
20
README.md
@@ -12,8 +12,11 @@ Rein manuelle Pflege: Sidebar links = Projekte, Hauptbereich = Feature-Cards.
|
||||
Markdown-Dateien unter `daten/<projekt>/<feature>.md` — Projekt = Ordner, die Datei ist
|
||||
die Wahrheit. Der Editor bearbeitet immer den rohen Text; geparst wird nur für die Anzeige.
|
||||
|
||||
Format (Marker allein auf einer Zeile; `<!-- funktion -->` ist wiederholbar, `<!-- regel -->`
|
||||
und `<!-- flow -->` gehören zur davorstehenden Funktion; Trennzeilen aus `---` sind Optik):
|
||||
Format (Marker allein auf einer Zeile; `<!-- funktion -->` ist wiederholbar; `<!-- ziel -->`,
|
||||
`<!-- regeln -->` und `<!-- testen -->` nach einer Funktion gehören zu ihr — `ziel`/`regeln`
|
||||
vor der ersten Funktion gehören zur Karte; regeln/testen: je eine `- `-Zeile pro Eintrag;
|
||||
`<!-- regel -->`-Blöcke aus dem Alt-Format werden zu Zeilen zusammengeführt;
|
||||
Trennzeilen aus `---` sind Optik):
|
||||
|
||||
```markdown
|
||||
<!-- titel -->
|
||||
@@ -24,18 +27,19 @@ kern
|
||||
Kurzer Satz, was das Ziel ist.
|
||||
<!-- funktion -->
|
||||
Anmeldung mit E-Mail
|
||||
<!-- regel -->
|
||||
Passwort nie loggen
|
||||
<!-- flow -->
|
||||
<!-- regeln -->
|
||||
- Passwort nie loggen
|
||||
<!-- testen -->
|
||||
- Formular öffnen
|
||||
- Daten eingeben
|
||||
<!-- funktion -->
|
||||
Abmeldung
|
||||
```
|
||||
|
||||
Funktionen erscheinen als Titelliste; Regeln und Flow zeigt die Karte erst beim Hover über
|
||||
die Funktion. Text vor dem ersten Marker, Inhalt unbekannter Marker und verwaiste
|
||||
regel/flow-Blöcke werden nicht angezeigt, aber beim Speichern erhalten. Bearbeitet wird live auf
|
||||
Funktionen erscheinen als Titelliste; Regeln und Testen zeigt die ausführliche Ansicht.
|
||||
Text vor dem ersten Marker, Inhalt unbekannter Marker und verwaiste
|
||||
regeln/testen-Blöcke (auch Alt-Marker `flow`) werden nicht angezeigt, aber beim Speichern
|
||||
erhalten. Bearbeitet wird live auf
|
||||
der Karte (Klick ins Feld, Verlassen speichert, Escape verwirft); jedes Speichern setzt
|
||||
die Datei neu zusammen. Titeländerungen benennen die Datei passend um.
|
||||
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
"""Zerlegt den rohen Feature-Text in Sektionen — nur für die Anzeige.
|
||||
|
||||
Format: titel (eine Zeile), art, ziel, dann wiederholbare <!-- funktion -->-Blöcke;
|
||||
<!-- regel -->- und <!-- flow -->-Blöcke gehören zur davorstehenden Funktion.
|
||||
Präambel, unbekannte Marker und verwaiste regel/flow-Blöcke landen in `sonstiges`
|
||||
(wird nicht angezeigt, aber beim Speichern erhalten).
|
||||
<!-- regeln -->- und <!-- testen -->-Blöcke (je eine `- `-Zeile pro Eintrag) gehören zur
|
||||
davorstehenden Funktion. Alt-Format wird weiter gelesen: <!-- regel -->-Blöcke (einer je
|
||||
Regel) und <!-- flow --> (heute testen) werden zusammengeführt. Präambel, unbekannte
|
||||
Marker und verwaiste Blöcke landen in `sonstiges` (wird nicht angezeigt, aber beim
|
||||
Speichern erhalten).
|
||||
Trennzeilen aus Bindestrichen (---) sind reine Optik und werden ignoriert.
|
||||
"""
|
||||
|
||||
@@ -36,6 +38,7 @@ def zerlege(roh: str) -> dict:
|
||||
|
||||
titel = []
|
||||
ziel = []
|
||||
regeln = []
|
||||
funktionen = []
|
||||
sonstiges = []
|
||||
art = []
|
||||
@@ -45,18 +48,22 @@ def zerlege(roh: str) -> dict:
|
||||
elif schluessel == "art":
|
||||
art.append(text)
|
||||
elif schluessel == "ziel":
|
||||
ziel.append(text)
|
||||
# vor der ersten Funktion: Karten-Ziel, danach: Ziel der Funktion
|
||||
(funktionen[-1]["ziel"] if funktionen else ziel).append(text)
|
||||
elif schluessel == "funktion":
|
||||
funktionen.append({"text": text, "regeln": [], "flow": []})
|
||||
elif schluessel == "regel" and funktionen:
|
||||
funktionen[-1]["regeln"].append(text)
|
||||
elif schluessel == "flow" and funktionen:
|
||||
funktionen[-1]["flow"].append(text)
|
||||
else: # Präambel, unbekannter Marker, regel/flow ohne funktion
|
||||
funktionen.append({"text": text, "ziel": [], "regeln": [], "testen": []})
|
||||
elif schluessel in ("regel", "regeln"):
|
||||
# vor der ersten Funktion: Karten-Regeln, danach: Regeln der Funktion
|
||||
(funktionen[-1]["regeln"] if funktionen else regeln).append(text)
|
||||
elif schluessel in ("flow", "testen") and funktionen:
|
||||
funktionen[-1]["testen"].append(text)
|
||||
else: # Präambel, unbekannter Marker, regeln/testen ohne funktion
|
||||
sonstiges.append(text)
|
||||
|
||||
for f in funktionen:
|
||||
f["flow"] = "\n".join(f["flow"])
|
||||
f["ziel"] = "\n\n".join(f["ziel"])
|
||||
f["regeln"] = "\n".join(f["regeln"])
|
||||
f["testen"] = "\n".join(f["testen"])
|
||||
|
||||
# Titel ist eine Zeile: erste nicht-leere
|
||||
titel_zeilen = [z.strip() for t in titel for z in t.splitlines() if z.strip()]
|
||||
@@ -65,6 +72,7 @@ def zerlege(roh: str) -> dict:
|
||||
"titel": titel_zeilen[0] if titel_zeilen else "",
|
||||
"art": "optional" if art and art[0].strip().lower() == "optional" else "kern",
|
||||
"ziel": "\n\n".join(ziel),
|
||||
"regeln": "\n".join(regeln),
|
||||
"funktionen": funktionen,
|
||||
"sonstiges": "\n\n".join(sonstiges),
|
||||
}
|
||||
|
||||
@@ -11,11 +11,10 @@ Nutzer können sich anmelden.
|
||||
----------------------------------------
|
||||
<!-- funktion -->
|
||||
Anmeldung mit E-Mail
|
||||
<!-- regel -->
|
||||
Passwort nie loggen
|
||||
<!-- regel -->
|
||||
Sperre nach 5 Fehlversuchen
|
||||
<!-- flow -->
|
||||
<!-- regeln -->
|
||||
- Passwort nie loggen
|
||||
- Sperre nach 5 Fehlversuchen
|
||||
<!-- testen -->
|
||||
- Formular öffnen
|
||||
- Daten eingeben
|
||||
<!-- funktion -->
|
||||
@@ -31,16 +30,33 @@ def test_alle_sektionen():
|
||||
assert s["funktionen"] == [
|
||||
{
|
||||
"text": "Anmeldung mit E-Mail",
|
||||
"regeln": ["Passwort nie loggen", "Sperre nach 5 Fehlversuchen"],
|
||||
"flow": "- Formular öffnen\n- Daten eingeben",
|
||||
"ziel": "",
|
||||
"regeln": "- Passwort nie loggen\n- Sperre nach 5 Fehlversuchen",
|
||||
"testen": "- Formular öffnen\n- Daten eingeben",
|
||||
},
|
||||
{"text": "Abmeldung", "regeln": [], "flow": ""},
|
||||
{"text": "Abmeldung", "ziel": "", "regeln": "", "testen": ""},
|
||||
]
|
||||
|
||||
|
||||
def test_mehrere_flow_bloecke_werden_verbunden():
|
||||
s = zerlege("<!-- funktion -->\nX\n<!-- flow -->\n- a\n<!-- flow -->\n- b\n")
|
||||
assert s["funktionen"][0]["flow"] == "- a\n- b"
|
||||
def test_ziel_nach_funktion_gehoert_zur_funktion():
|
||||
s = zerlege("<!-- ziel -->\nKarte\n<!-- funktion -->\nX\n<!-- ziel -->\nFunktion\n")
|
||||
assert s["ziel"] == "Karte"
|
||||
assert s["funktionen"][0]["ziel"] == "Funktion"
|
||||
|
||||
|
||||
def test_mehrere_testen_bloecke_werden_verbunden():
|
||||
s = zerlege("<!-- funktion -->\nX\n<!-- testen -->\n- a\n<!-- testen -->\n- b\n")
|
||||
assert s["funktionen"][0]["testen"] == "- a\n- b"
|
||||
|
||||
|
||||
def test_alter_flow_marker_wird_gelesen():
|
||||
s = zerlege("<!-- funktion -->\nX\n<!-- flow -->\n- a\n")
|
||||
assert s["funktionen"][0]["testen"] == "- a"
|
||||
|
||||
|
||||
def test_alte_regel_bloecke_werden_zusammengefuehrt():
|
||||
s = zerlege("<!-- funktion -->\nX\n<!-- regel -->\na\n<!-- regel -->\nb\n")
|
||||
assert s["funktionen"][0]["regeln"] == "a\nb"
|
||||
|
||||
|
||||
def test_trenner_zeilen_werden_ignoriert():
|
||||
@@ -59,10 +75,16 @@ def test_unbekannter_marker_landet_in_sonstiges():
|
||||
assert s["sonstiges"] == "Geheim"
|
||||
|
||||
|
||||
def test_regel_und_flow_ohne_funktion_landen_in_sonstiges():
|
||||
s = zerlege("<!-- regel -->\nverwaist\n<!-- flow -->\n- auch\n")
|
||||
def test_regeln_vor_erster_funktion_gehoeren_zur_karte():
|
||||
s = zerlege("<!-- regeln -->\n- karte\n<!-- funktion -->\nX\n<!-- regeln -->\n- funktion\n")
|
||||
assert s["regeln"] == "- karte"
|
||||
assert s["funktionen"][0]["regeln"] == "- funktion"
|
||||
|
||||
|
||||
def test_testen_ohne_funktion_landet_in_sonstiges():
|
||||
s = zerlege("<!-- testen -->\n- verwaist\n")
|
||||
assert s["funktionen"] == []
|
||||
assert s["sonstiges"] == "verwaist\n\n- auch"
|
||||
assert s["sonstiges"] == "- verwaist"
|
||||
|
||||
|
||||
def test_doppelter_marker_wird_konkateniert():
|
||||
@@ -72,7 +94,7 @@ def test_doppelter_marker_wird_konkateniert():
|
||||
|
||||
def test_leerer_text():
|
||||
s = zerlege("")
|
||||
assert s == {"titel": "", "art": "kern", "ziel": "", "funktionen": [], "sonstiges": ""}
|
||||
assert s == {"titel": "", "art": "kern", "ziel": "", "regeln": "", "funktionen": [], "sonstiges": ""}
|
||||
|
||||
|
||||
def test_art_optional():
|
||||
|
||||
@@ -9,11 +9,9 @@ optional
|
||||
----------------------------------------
|
||||
<!-- funktion -->
|
||||
Darkmode umschalten
|
||||
<!-- regel -->
|
||||
Icon: ☾ / ☀
|
||||
<!-- regel -->
|
||||
Folgt beim ersten Start der System-Einstellung
|
||||
<!-- regel -->
|
||||
Zustand bleibt gespeichert
|
||||
<!-- flow -->
|
||||
<!-- regeln -->
|
||||
- Icon: ☾ / ☀
|
||||
- Folgt beim ersten Start der System-Einstellung
|
||||
- Zustand bleibt gespeichert
|
||||
<!-- testen -->
|
||||
- Klick auf Icon in der Sidebar oben
|
||||
|
||||
@@ -5,74 +5,85 @@ Features
|
||||
kern
|
||||
----------------------------------------
|
||||
<!-- ziel -->
|
||||
|
||||
Gruppieren Informationen zu ähnlichen Funktionen
|
||||
----------------------------------------
|
||||
<!-- regeln -->
|
||||
- Alphabetisch sortiert
|
||||
- Unter daten/ als md Datei gespeichert
|
||||
- Verlassen speichert
|
||||
- Escape verwirft
|
||||
----------------------------------------
|
||||
<!-- funktion -->
|
||||
Ausführliche Ansicht umschalten
|
||||
<!-- regel -->
|
||||
Volle Breite
|
||||
<!-- regel -->
|
||||
Funktionen als Boxen in zwei Spalten
|
||||
<!-- regel -->
|
||||
Alle Details offen
|
||||
<!-- flow -->
|
||||
Anzeigemodus umschalten
|
||||
<!-- ziel -->
|
||||
Kompaktmodus zum lesen und Vollmodus zum vertiefen und anpassen
|
||||
<!-- regeln -->
|
||||
- Standard ist Kompaktmodus
|
||||
- Vollmodus geht über responsive Spalten
|
||||
- Vollmodus zeigt alles
|
||||
- Kompaktmodus zeigt Ziel und Funktionstitel als Liste
|
||||
<!-- testen -->
|
||||
- Klick auf Karte
|
||||
- Vollmodus sichtbar
|
||||
- Klick auf freie Kartenfläche
|
||||
- Nochmal klicken schaltet zurück
|
||||
- Kompaktmodus sichtbar
|
||||
<!-- funktion -->
|
||||
Feature als Datei speichern
|
||||
<!-- regel -->
|
||||
Projekt = Ordner unter daten/
|
||||
<!-- regel -->
|
||||
Feature = Markdown-Datei im Projektordner
|
||||
<!-- regel -->
|
||||
Titeländerung benennt die Datei um
|
||||
<!-- regel -->
|
||||
Versionierbar per git
|
||||
Badge umschalten
|
||||
<!-- ziel -->
|
||||
Unterscheidet die Kern- und Optionalen Features
|
||||
<!-- regeln -->
|
||||
- Kernfarbe blau
|
||||
- Optionalfarbe grün
|
||||
- Verändert die Randfarbe vom Feature
|
||||
<!-- testen -->
|
||||
- Vollmodus öffnen
|
||||
- Klick auf Badge zum toggeln
|
||||
<!-- funktion -->
|
||||
Feature entfernen
|
||||
<!-- regeln -->
|
||||
- x-Icon
|
||||
<!-- testen -->
|
||||
- RMB auf Featurecard
|
||||
- Klick auf "Feature entfernen"
|
||||
- Bestätigen im Modal
|
||||
- Feature entfernt
|
||||
<!-- funktion -->
|
||||
Feature erstellen
|
||||
<!-- regel -->
|
||||
Icon: +
|
||||
<!-- regel -->
|
||||
Titel direkt zur Bearbeitung geöffnet
|
||||
<!-- regel -->
|
||||
Karten alphabetisch nach Titel sortiert
|
||||
<!-- flow -->
|
||||
- Klick auf leere Card
|
||||
- Card wird erstellt
|
||||
<!-- regeln -->
|
||||
- +-Icon
|
||||
- Feature direkt in Vollmodus geöffnet
|
||||
<!-- testen -->
|
||||
- RMB auf Hauptbereich
|
||||
- Klick auf "Feature erstellen"
|
||||
- Im Modal Namen eingeben
|
||||
- Bestätigen
|
||||
<!-- funktion -->
|
||||
Features entfernen
|
||||
<!-- regel -->
|
||||
Icon: x
|
||||
<!-- flow -->
|
||||
- Hover über Card
|
||||
- Auf Icon klicken
|
||||
- Icon wird zum Bestätigungs Icon
|
||||
- Klick zum entfernen
|
||||
<!-- funktion -->
|
||||
Kern/Optional umschalten
|
||||
<!-- regel -->
|
||||
Kern blau umrandet
|
||||
<!-- regel -->
|
||||
Optional grün umrandet
|
||||
<!-- flow -->
|
||||
- Klick auf Badge
|
||||
Regeln anpassen
|
||||
<!-- ziel -->
|
||||
Spezifische Hinweise für Features
|
||||
<!-- regeln -->
|
||||
- Nur paar Wörter je Regel
|
||||
<!-- testen -->
|
||||
- Vollmodus öffnen
|
||||
- Klick auf Regeln
|
||||
- Inhalt anpassen
|
||||
<!-- funktion -->
|
||||
Titel anpassen
|
||||
<!-- regel -->
|
||||
Enter schließt ab
|
||||
<!-- regel -->
|
||||
Verlassen speichert
|
||||
<!-- regel -->
|
||||
Escape verwirft
|
||||
<!-- flow -->
|
||||
- Hover über Card
|
||||
<!-- regeln -->
|
||||
- 1-2 Wörter
|
||||
- Aktualisiert den Dateinamen
|
||||
<!-- testen -->
|
||||
- Vollmodus öffnen
|
||||
- Klick auf Titel
|
||||
- Inhalt ändern
|
||||
<!-- funktion -->
|
||||
Ziel anpassen
|
||||
<!-- regel -->
|
||||
Leer: Platzhalter „Ziel ergänzen" klicken
|
||||
<!-- flow -->
|
||||
- Hover über Card
|
||||
- Klick auf Zieltext
|
||||
<!-- ziel -->
|
||||
Beschreibt kurz das Kernziel vom Feature
|
||||
<!-- regeln -->
|
||||
- 1-2 simple Sätze
|
||||
- Nur wenn der Titel nicht selbsterklärend ist
|
||||
<!-- testen -->
|
||||
- Vollmodus öffnen
|
||||
- Klick auf Ziel
|
||||
- Inhalt anpassen
|
||||
|
||||
@@ -8,52 +8,46 @@ kern
|
||||
|
||||
----------------------------------------
|
||||
<!-- funktion -->
|
||||
Flow anpassen
|
||||
<!-- regel -->
|
||||
Ein Flow je Funktion
|
||||
<!-- regel -->
|
||||
Leeren entfernt den Flow
|
||||
<!-- flow -->
|
||||
- Hover über Funktion
|
||||
- Klick auf Flow oder + Flow
|
||||
Testen anpassen
|
||||
<!-- regeln -->
|
||||
- Ein Testen-Block je Funktion
|
||||
- Leeren entfernt den Block
|
||||
<!-- testen -->
|
||||
- Klick auf Testen oder + Testen
|
||||
- Inhalt anpassen
|
||||
<!-- funktion -->
|
||||
Funktion anpassen
|
||||
<!-- flow -->
|
||||
<!-- testen -->
|
||||
- Klick auf Text
|
||||
- Inhalt ändern
|
||||
<!-- funktion -->
|
||||
Funktion entfernen
|
||||
<!-- regel -->
|
||||
Feld leeren entfernt auch
|
||||
<!-- flow -->
|
||||
<!-- regeln -->
|
||||
- Feld leeren entfernt auch
|
||||
<!-- testen -->
|
||||
- Hover über Funktion
|
||||
- Klick auf x
|
||||
<!-- funktion -->
|
||||
Funktion hinzufügen
|
||||
<!-- regel -->
|
||||
Alphabetisch sortiert
|
||||
<!-- regel -->
|
||||
Neue Funktion rückt nach dem Speichern an ihre Position
|
||||
<!-- flow -->
|
||||
- Hover über Card
|
||||
<!-- regeln -->
|
||||
- Alphabetisch sortiert
|
||||
- Neue Funktion rückt nach dem Speichern an ihre Position
|
||||
<!-- testen -->
|
||||
- Klick auf + Funktion
|
||||
- Inhalt eingeben
|
||||
<!-- funktion -->
|
||||
Regel anpassen
|
||||
<!-- flow -->
|
||||
- Klick auf Text
|
||||
- Inhalt ändern
|
||||
Ziel anpassen
|
||||
<!-- regeln -->
|
||||
- Ein Ziel je Funktion
|
||||
- Leeren entfernt das Ziel
|
||||
<!-- testen -->
|
||||
- Klick auf Ziel oder + Ziel
|
||||
- Inhalt anpassen
|
||||
<!-- funktion -->
|
||||
Regel entfernen
|
||||
<!-- regel -->
|
||||
Feld leeren entfernt auch
|
||||
<!-- flow -->
|
||||
- Hover über Regel
|
||||
- Klick auf x
|
||||
<!-- funktion -->
|
||||
Regel hinzufügen
|
||||
<!-- flow -->
|
||||
- Hover über Funktion
|
||||
- Klick auf + Regel
|
||||
- Inhalt eingeben
|
||||
Regeln anpassen
|
||||
<!-- regeln -->
|
||||
- Eine Regel je Zeile
|
||||
- Leeren entfernt alle Regeln
|
||||
<!-- testen -->
|
||||
- Klick auf Regeln oder + Regeln
|
||||
- Inhalt anpassen
|
||||
|
||||
@@ -5,43 +5,45 @@ Projekte
|
||||
kern
|
||||
----------------------------------------
|
||||
<!-- ziel -->
|
||||
|
||||
Gruppiert Features für ein Projekt
|
||||
----------------------------------------
|
||||
<!-- regeln -->
|
||||
- Alphabetisch sortiert
|
||||
- Aktives Projekt ist hervorgehoben
|
||||
- 1-2 Wörter für den Namen
|
||||
----------------------------------------
|
||||
<!-- funktion -->
|
||||
Projekt anpassen
|
||||
<!-- regel -->
|
||||
Icon: Stift
|
||||
<!-- regel -->
|
||||
Enter bestätigt
|
||||
<!-- regel -->
|
||||
Escape bricht ab
|
||||
<!-- flow -->
|
||||
- Hover über Projektname
|
||||
- Klick auf Icon
|
||||
<!-- regeln -->
|
||||
- Stift-Icon
|
||||
<!-- testen -->
|
||||
- RMB auf Projektname
|
||||
- Klick auf "Projekt anpassen"
|
||||
- Inhalt anpassen
|
||||
- Rausklicken
|
||||
- Name ist angepasst
|
||||
<!-- funktion -->
|
||||
Projekt auswählen
|
||||
<!-- regel -->
|
||||
Aktives Projekt ist hervorgehoben
|
||||
<!-- flow -->
|
||||
- Klick auf Name
|
||||
- Features werden im Hauptbereich angezeigt
|
||||
Projekt aufrufen
|
||||
<!-- testen -->
|
||||
- LMB auf Projektname
|
||||
- Features werden angezeigt
|
||||
<!-- funktion -->
|
||||
Projekt entfernen
|
||||
<!-- regel -->
|
||||
Icon: x
|
||||
<!-- flow -->
|
||||
- Hover über Name
|
||||
- Klick auf Icon
|
||||
- Icon wird zum Bestätigungs Icon
|
||||
- Klick zum entfernen
|
||||
<!-- regeln -->
|
||||
- X-Icon
|
||||
- Auch Features entfernen
|
||||
<!-- testen -->
|
||||
- RMB auf Projektname
|
||||
- Klick auf "Projekt entfernen"
|
||||
- Bestätigen im Modal
|
||||
- Projekt entfernt
|
||||
<!-- funktion -->
|
||||
Projekt erstellen
|
||||
<!-- regel -->
|
||||
Alphabetisch in der Sidebar sortiert
|
||||
<!-- regel -->
|
||||
Feature-Anzahl neben dem Namen
|
||||
<!-- flow -->
|
||||
- Inputfeld titel eingeben
|
||||
- Mit Icon oder Enter erstellen
|
||||
- Projekt wird direkt ausgewählt
|
||||
<!-- regeln -->
|
||||
- Projekt wird direkt aufgerufen
|
||||
- +-Icon
|
||||
<!-- testen -->
|
||||
- RMB auf Sidebar
|
||||
- Klick auf "Projekt erstellen"
|
||||
- Im Modal Namen eingeben
|
||||
- Bestätigen
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import { fetchProjekte } from './api.js'
|
||||
import SeitenLeiste from './components/SeitenLeiste.vue'
|
||||
import FeatureListe from './components/FeatureListe.vue'
|
||||
@@ -21,13 +21,25 @@ function umbenannt(alt, neu) {
|
||||
ladeProjekte()
|
||||
}
|
||||
|
||||
// Zuletzt aktives Projekt überlebt das Neuladen
|
||||
watch(aktivesProjekt, name => {
|
||||
if (name) localStorage.setItem('aktivesProjekt', name)
|
||||
else localStorage.removeItem('aktivesProjekt')
|
||||
})
|
||||
|
||||
function wechsleDarkMode() {
|
||||
dunkel.value = !dunkel.value
|
||||
document.documentElement.classList.toggle('dark', dunkel.value)
|
||||
localStorage.setItem('darkMode', dunkel.value)
|
||||
}
|
||||
|
||||
onMounted(ladeProjekte)
|
||||
onMounted(async () => {
|
||||
await ladeProjekte()
|
||||
const gemerkt = localStorage.getItem('aktivesProjekt')
|
||||
if (gemerkt && projekte.value.some(p => p.name === gemerkt)) {
|
||||
aktivesProjekt.value = gemerkt
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -88,6 +88,50 @@ input, textarea {
|
||||
|
||||
.meldung { color: var(--rot); font-size: 0.85rem; }
|
||||
|
||||
.kontextmenue {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--rand);
|
||||
border-radius: 6px;
|
||||
padding: 0.2rem;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
.kontextmenue button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: none;
|
||||
text-align: left;
|
||||
padding: 0.3rem 0.7rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.kontextmenue button:hover { background: var(--bg); }
|
||||
|
||||
.schleier {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 20;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.modal {
|
||||
min-width: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.7rem;
|
||||
cursor: default;
|
||||
}
|
||||
.modal h2 { margin: 0; font-size: 1rem; }
|
||||
.modal .frage { margin: 0; }
|
||||
.modal footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
|
||||
@@ -1,22 +1,23 @@
|
||||
<script setup>
|
||||
import { nextTick, onMounted, ref, watch } from 'vue'
|
||||
import { marked } from 'marked'
|
||||
import { featureSpeichern, featureLoeschen } from '../api.js'
|
||||
import { featureSpeichern } from '../api.js'
|
||||
|
||||
const props = defineProps({
|
||||
projekt: { type: String, required: true },
|
||||
feature: { type: Object, required: true },
|
||||
titelBearbeiten: { type: Boolean, default: false }, // frisch angelegt: Titel direkt öffnen
|
||||
vollmodus: { type: Boolean, default: false }, // frisch angelegt: direkt im Vollmodus öffnen
|
||||
})
|
||||
const emit = defineEmits(['aktualisiert', 'geloescht'])
|
||||
const emit = defineEmits(['aktualisiert', 'kontextmenue'])
|
||||
|
||||
function kopie(sekt) {
|
||||
return {
|
||||
titel: sekt.titel,
|
||||
art: sekt.art,
|
||||
ziel: sekt.ziel,
|
||||
regeln: sekt.regeln,
|
||||
funktionen: sekt.funktionen
|
||||
.map(f => ({ text: f.text, regeln: [...f.regeln], flow: f.flow }))
|
||||
.map(f => ({ text: f.text, ziel: f.ziel, regeln: f.regeln, testen: f.testen }))
|
||||
.sort((a, b) => a.text.localeCompare(b.text, 'de', { sensitivity: 'base' })),
|
||||
sonstiges: sekt.sonstiges, // nicht angezeigt, aber beim Speichern erhalten
|
||||
}
|
||||
@@ -26,6 +27,7 @@ const s = ref(kopie(props.feature.sektionen))
|
||||
watch(() => props.feature, f => { s.value = kopie(f.sektionen) })
|
||||
|
||||
const aktiv = ref(null) // {feld, i, j, original} — das eine gerade offene Eingabefeld
|
||||
const gross = ref(false) // ausführliche Ansicht
|
||||
const entwurf = ref('')
|
||||
const meldung = ref('')
|
||||
const feldRef = ref(null)
|
||||
@@ -40,13 +42,14 @@ function istAktiv(feld, i, j) {
|
||||
|
||||
function wert(feld, i, j) {
|
||||
if (feld === 'titel') return s.value.titel
|
||||
if (feld === 'ziel') return s.value.ziel
|
||||
if (feld === 'ziel') return i === undefined ? s.value.ziel : s.value.funktionen[i].ziel
|
||||
if (feld === 'funktion') return s.value.funktionen[i].text
|
||||
if (feld === 'flow') return s.value.funktionen[i].flow
|
||||
return s.value.funktionen[i].regeln[j]
|
||||
if (feld === 'testen') return s.value.funktionen[i].testen
|
||||
return i === undefined ? s.value.regeln : s.value.funktionen[i].regeln
|
||||
}
|
||||
|
||||
async function starte(feld, i, j) {
|
||||
if (!gross.value) return // Bearbeiten nur in der ausführlichen Ansicht
|
||||
const original = wert(feld, i, j)
|
||||
aktiv.value = { feld, i, j, original }
|
||||
entwurf.value = original
|
||||
@@ -59,16 +62,16 @@ async function starte(feld, i, j) {
|
||||
function abbrechen() {
|
||||
const a = aktiv.value
|
||||
aktiv.value = null
|
||||
// frisch angelegte, noch leere Einträge wieder entfernen
|
||||
if (a && !a.original) {
|
||||
if (a.feld === 'funktion') s.value.funktionen.splice(a.i, 1)
|
||||
if (a.feld === 'regel') s.value.funktionen[a.i].regeln.splice(a.j, 1)
|
||||
// frisch angelegte, noch leere Funktion wieder entfernen
|
||||
if (a && !a.original && a.feld === 'funktion') {
|
||||
s.value.funktionen.splice(a.i, 1)
|
||||
}
|
||||
}
|
||||
|
||||
async function fertig() {
|
||||
const a = aktiv.value
|
||||
if (!a) return
|
||||
blurZeit = Date.now() // der Klick, der das Feld schloss, soll die Ansicht nicht schließen
|
||||
aktiv.value = null
|
||||
const neu = entwurf.value.trim()
|
||||
|
||||
@@ -78,45 +81,34 @@ async function fertig() {
|
||||
if (!neu) return // Titel ist Pflicht — leere Eingabe verwerfen
|
||||
s.value.titel = neu
|
||||
} else if (a.feld === 'ziel') {
|
||||
s.value.ziel = neu
|
||||
if (a.i === undefined) s.value.ziel = neu
|
||||
else s.value.funktionen[a.i].ziel = neu
|
||||
} else if (a.feld === 'funktion') {
|
||||
if (!neu) s.value.funktionen.splice(a.i, 1) // leeren = löschen
|
||||
else s.value.funktionen[a.i].text = neu
|
||||
} else if (a.feld === 'flow') {
|
||||
s.value.funktionen[a.i].flow = neu
|
||||
} else if (a.feld === 'regel') {
|
||||
if (!neu) s.value.funktionen[a.i].regeln.splice(a.j, 1)
|
||||
else s.value.funktionen[a.i].regeln[a.j] = neu
|
||||
} else if (a.feld === 'testen') {
|
||||
s.value.funktionen[a.i].testen = neu
|
||||
} else if (a.feld === 'regeln') {
|
||||
if (a.i === undefined) s.value.regeln = neu
|
||||
else s.value.funktionen[a.i].regeln = neu
|
||||
}
|
||||
await speichern()
|
||||
}
|
||||
|
||||
function abbrechenLeer(a) {
|
||||
if (a.original) return
|
||||
if (a.feld === 'funktion') s.value.funktionen.splice(a.i, 1)
|
||||
if (a.feld === 'regel') s.value.funktionen[a.i].regeln.splice(a.j, 1)
|
||||
if (!a.original && a.feld === 'funktion') s.value.funktionen.splice(a.i, 1)
|
||||
}
|
||||
|
||||
function neueFunktion() {
|
||||
s.value.funktionen.unshift({ text: '', regeln: [], flow: '' })
|
||||
s.value.funktionen.unshift({ text: '', ziel: '', regeln: '', testen: '' })
|
||||
starte('funktion', 0)
|
||||
}
|
||||
|
||||
function neueRegel(i) {
|
||||
s.value.funktionen[i].regeln.push('')
|
||||
starte('regel', i, s.value.funktionen[i].regeln.length - 1)
|
||||
}
|
||||
|
||||
function entferneFunktion(i) {
|
||||
s.value.funktionen.splice(i, 1)
|
||||
speichern()
|
||||
}
|
||||
|
||||
function entferneRegel(i, j) {
|
||||
s.value.funktionen[i].regeln.splice(j, 1)
|
||||
speichern()
|
||||
}
|
||||
|
||||
function wechsleArt() {
|
||||
s.value.art = s.value.art === 'kern' ? 'optional' : 'kern'
|
||||
speichern()
|
||||
@@ -131,10 +123,13 @@ function baueRoh() {
|
||||
`<!-- art -->\n${s.value.art}`,
|
||||
`<!-- ziel -->\n${s.value.ziel}`,
|
||||
]
|
||||
if (s.value.regeln) teile.push(`<!-- regeln -->\n${s.value.regeln}`)
|
||||
const funktionen = s.value.funktionen
|
||||
.map(f => {
|
||||
const bloecke = [`<!-- funktion -->\n${f.text}`, ...f.regeln.map(r => `<!-- regel -->\n${r}`)]
|
||||
if (f.flow) bloecke.push(`<!-- flow -->\n${f.flow}`)
|
||||
const bloecke = [`<!-- funktion -->\n${f.text}`]
|
||||
if (f.ziel) bloecke.push(`<!-- ziel -->\n${f.ziel}`)
|
||||
if (f.regeln) bloecke.push(`<!-- regeln -->\n${f.regeln}`)
|
||||
if (f.testen) bloecke.push(`<!-- testen -->\n${f.testen}`)
|
||||
return bloecke.join('\n')
|
||||
})
|
||||
.join('\n')
|
||||
@@ -153,42 +148,33 @@ async function speichern() {
|
||||
}
|
||||
}
|
||||
|
||||
const loeschBestaetigung = ref(false)
|
||||
|
||||
async function loeschen() {
|
||||
// Erster Klick: Icon wird zum Bestätigungs-Icon, zweiter Klick löscht
|
||||
if (!loeschBestaetigung.value) {
|
||||
loeschBestaetigung.value = true
|
||||
return
|
||||
}
|
||||
loeschBestaetigung.value = false
|
||||
try {
|
||||
await featureLoeschen(props.projekt, props.feature.id)
|
||||
emit('geloescht')
|
||||
} catch (e) {
|
||||
meldung.value = e.message
|
||||
}
|
||||
}
|
||||
|
||||
function zeilen(text) {
|
||||
return Math.max(2, text.split('\n').length)
|
||||
}
|
||||
|
||||
// Flow-Text („- Schritt“ je Zeile) für die nummerierte Anzeige zerlegen
|
||||
function flowSchritte(flow) {
|
||||
return flow.split('\n').map(z => z.replace(/^[-*]\s*/, '').trim()).filter(Boolean)
|
||||
// Blocktext („- Eintrag“ je Zeile) für die Listen-Anzeige zerlegen
|
||||
function punkte(text) {
|
||||
return text.split('\n').map(z => z.replace(/^[-*]\s*/, '').trim()).filter(Boolean)
|
||||
}
|
||||
|
||||
// Ausführliche Ansicht: Klick auf freie Kartenfläche schaltet um
|
||||
const gross = ref(false)
|
||||
// Standardansicht ist reine Übersicht: Klick öffnet die ausführliche Ansicht,
|
||||
// nur dort wird bearbeitet; Klick auf freie Fläche schließt sie wieder —
|
||||
// außer der Klick hat gerade eine Bearbeitung beendet (Blur kommt vor dem Klick)
|
||||
let blurZeit = 0
|
||||
|
||||
function wechsleAnsicht(e) {
|
||||
if (e.target.closest('button, input, textarea, .klickbar, h3')) return
|
||||
gross.value = !gross.value
|
||||
if (gross.value) {
|
||||
if (e.target.closest('button, input, textarea, .klickbar, h3, .hinweis')) return
|
||||
if (Date.now() - blurZeit < 300) return
|
||||
gross.value = false
|
||||
} else {
|
||||
if (e.target.closest('button, input, textarea')) return
|
||||
gross.value = true
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (props.titelBearbeiten) starte('titel')
|
||||
if (props.vollmodus) gross.value = true
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -197,7 +183,7 @@ onMounted(() => {
|
||||
class="karte"
|
||||
:class="[s.art, { gross }]"
|
||||
@click="wechsleAnsicht"
|
||||
@mouseleave="loeschBestaetigung = false"
|
||||
@contextmenu.prevent.stop="emit('kontextmenue', $event)"
|
||||
>
|
||||
<header>
|
||||
<input
|
||||
@@ -209,19 +195,15 @@ onMounted(() => {
|
||||
@keyup.enter="$event.target.blur()"
|
||||
@keydown.esc="abbrechen"
|
||||
>
|
||||
<h3 v-else :title="'Klicken zum Bearbeiten'" @click="starte('titel')">{{ s.titel }}</h3>
|
||||
<h3 v-else :title="gross ? 'Klicken zum Bearbeiten' : null" @click="starte('titel')">{{ s.titel }}</h3>
|
||||
<button
|
||||
v-if="gross"
|
||||
class="badge"
|
||||
:class="s.art === 'kern' ? 'blau' : 'gruen'"
|
||||
title="Klicken zum Umschalten"
|
||||
@click="wechsleArt"
|
||||
>{{ s.art }}</button>
|
||||
<button
|
||||
class="icon-knopf rot werkzeug"
|
||||
:class="{ bestaetigen: loeschBestaetigung }"
|
||||
:title="loeschBestaetigung ? 'Wirklich löschen?' : 'Feature löschen'"
|
||||
@click="loeschen"
|
||||
>{{ loeschBestaetigung ? '✓' : '✕' }}</button>
|
||||
<span v-else class="badge" :class="s.art === 'kern' ? 'blau' : 'gruen'">{{ s.art }}</span>
|
||||
</header>
|
||||
|
||||
<section :class="{ leer: !s.ziel && !istAktiv('ziel') }">
|
||||
@@ -235,12 +217,29 @@ onMounted(() => {
|
||||
@keydown.esc="abbrechen"
|
||||
/>
|
||||
<div v-else-if="s.ziel" class="inhalt klickbar" v-html="md(s.ziel)" @click="starte('ziel')" />
|
||||
<p v-else class="hinweis" @click="starte('ziel')">Ziel ergänzen…</p>
|
||||
<p v-else-if="gross" class="hinweis" @click="starte('ziel')">Ziel ergänzen…</p>
|
||||
</section>
|
||||
|
||||
<!-- Karten-Regeln nur in der ausführlichen Ansicht -->
|
||||
<section v-if="gross" :class="{ leer: !s.regeln && !istAktiv('regeln') }">
|
||||
<p class="gruppe">Regeln</p>
|
||||
<textarea
|
||||
v-if="istAktiv('regeln')"
|
||||
ref="feldRef"
|
||||
v-model="entwurf"
|
||||
:rows="zeilen(entwurf)"
|
||||
@blur="fertig"
|
||||
@keydown.esc="abbrechen"
|
||||
/>
|
||||
<div v-else-if="s.regeln" class="klickbar" @click="starte('regeln')">
|
||||
<div v-for="(r, k) in punkte(s.regeln)" :key="k" class="regel">{{ r }}</div>
|
||||
</div>
|
||||
<p v-else-if="gross" class="hinweis" @click="starte('regeln')">Regeln ergänzen…</p>
|
||||
</section>
|
||||
|
||||
<section :class="{ leer: !s.funktionen.length }">
|
||||
<p class="gruppe">Funktionen</p>
|
||||
<button class="hinzu werkzeug" @click="neueFunktion">+ Funktion</button>
|
||||
<button v-if="gross" class="hinzu werkzeug" @click="neueFunktion">+ Funktion</button>
|
||||
<div class="liste">
|
||||
<div
|
||||
v-for="(f, i) in s.funktionen"
|
||||
@@ -259,44 +258,62 @@ onMounted(() => {
|
||||
@keydown.esc="abbrechen"
|
||||
>
|
||||
<div v-else class="funktionstitel klickbar" @click="starte('funktion', i)">{{ f.text }}</div>
|
||||
<button class="icon-knopf rot" title="Funktion entfernen" @click="entferneFunktion(i)">✕</button>
|
||||
<button v-if="gross" class="icon-knopf rot" title="Funktion entfernen" @click="entferneFunktion(i)">✕</button>
|
||||
</div>
|
||||
|
||||
<!-- Regeln und Flow nur beim Hover über die Funktion (oder während der Bearbeitung) -->
|
||||
<div class="details">
|
||||
<!-- Regeln als Punktliste -->
|
||||
<div v-if="f.regeln.length" class="regeln">
|
||||
<div v-for="(r, j) in f.regeln" :key="j" class="zeile">
|
||||
<textarea
|
||||
v-if="istAktiv('regel', i, j)"
|
||||
ref="feldRef"
|
||||
v-model="entwurf"
|
||||
:rows="zeilen(entwurf)"
|
||||
@blur="fertig"
|
||||
@keydown.esc="abbrechen"
|
||||
/>
|
||||
<div v-else class="regel klickbar" @click="starte('regel', i, j)">{{ r }}</div>
|
||||
<button class="icon-knopf rot" title="Regel entfernen" @click="entferneRegel(i, j)">✕</button>
|
||||
<!-- Ziel der Funktion -->
|
||||
<div v-if="istAktiv('ziel', i) || f.ziel" class="block">
|
||||
<p class="mini">Ziel</p>
|
||||
<textarea
|
||||
v-if="istAktiv('ziel', i)"
|
||||
ref="feldRef"
|
||||
v-model="entwurf"
|
||||
:rows="zeilen(entwurf)"
|
||||
@blur="fertig"
|
||||
@keydown.esc="abbrechen"
|
||||
/>
|
||||
<div v-else class="inhalt klickbar" v-html="md(f.ziel)" @click="starte('ziel', i)" />
|
||||
</div>
|
||||
<button v-if="!f.ziel && !istAktiv('ziel', i)" class="hinzu" @click="starte('ziel', i)">+ Ziel</button>
|
||||
|
||||
<!-- Regeln als Punktliste, ein Block je Funktion -->
|
||||
<div v-if="istAktiv('regeln', i) || f.regeln" class="block">
|
||||
<p class="mini">Regeln</p>
|
||||
<textarea
|
||||
v-if="istAktiv('regeln', i)"
|
||||
ref="feldRef"
|
||||
v-model="entwurf"
|
||||
:rows="zeilen(entwurf)"
|
||||
@blur="fertig"
|
||||
@keydown.esc="abbrechen"
|
||||
/>
|
||||
<div v-else class="klickbar" @click="starte('regeln', i)">
|
||||
<div v-for="(r, k) in punkte(f.regeln)" :key="k" class="regel">{{ r }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="hinzu" @click="neueRegel(i)">+ Regel</button>
|
||||
<button v-if="!f.regeln && !istAktiv('regeln', i)" class="hinzu" @click="starte('regeln', i)">+ Regeln</button>
|
||||
|
||||
<!-- Flow als nummerierte Schritte -->
|
||||
<textarea
|
||||
v-if="istAktiv('flow', i)"
|
||||
ref="feldRef"
|
||||
v-model="entwurf"
|
||||
:rows="zeilen(entwurf)"
|
||||
@blur="fertig"
|
||||
@keydown.esc="abbrechen"
|
||||
/>
|
||||
<div v-else-if="f.flow" class="flow klickbar" @click="starte('flow', i)">
|
||||
<div v-for="(schritt, k) in flowSchritte(f.flow)" :key="k" class="schritt">
|
||||
<span class="nr">{{ k + 1 }}.</span>{{ schritt }}
|
||||
<!-- Testen als nummerierte Schritte -->
|
||||
<div v-if="istAktiv('testen', i) || f.testen" class="block">
|
||||
<p class="mini">Testen</p>
|
||||
<textarea
|
||||
v-if="istAktiv('testen', i)"
|
||||
ref="feldRef"
|
||||
v-model="entwurf"
|
||||
:rows="zeilen(entwurf)"
|
||||
@blur="fertig"
|
||||
@keydown.esc="abbrechen"
|
||||
/>
|
||||
<div v-else class="klickbar" @click="starte('testen', i)">
|
||||
<div v-for="(schritt, k) in punkte(f.testen)" :key="k" class="schritt">
|
||||
<span class="nr">{{ k + 1 }}.</span>{{ schritt }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button v-if="!f.flow && !istAktiv('flow', i)" class="hinzu" @click="starte('flow', i)">+ Flow</button>
|
||||
<button v-if="!f.testen && !istAktiv('testen', i)" class="hinzu" @click="starte('testen', i)">+ Testen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -314,7 +331,7 @@ onMounted(() => {
|
||||
/* Ausführliche Ansicht: volle Breite, Funktionen in Spalten, alle Details offen.
|
||||
Jede Funktion als eigene Box, Zufüge-Knöpfe nur beim Hover über die Box. */
|
||||
.karte.gross { column-span: all; display: block; }
|
||||
.karte.gross .liste { columns: 2; column-gap: 1.2rem; }
|
||||
.karte.gross .liste { columns: 320px; column-gap: 1.2rem; }
|
||||
.karte.gross section.leer { display: block; }
|
||||
.karte.gross .funktion {
|
||||
break-inside: avoid;
|
||||
@@ -331,9 +348,6 @@ onMounted(() => {
|
||||
margin: 0.1rem 0 0;
|
||||
padding-left: 0.2rem;
|
||||
}
|
||||
.karte.gross .details .hinzu { display: none; }
|
||||
.karte.gross .funktion:hover .details .hinzu { display: block; }
|
||||
.icon-knopf.bestaetigen { color: var(--rot); }
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
@@ -343,6 +357,13 @@ header {
|
||||
border-bottom: 1px solid var(--rand);
|
||||
}
|
||||
h3 { margin: 0; font-size: 1rem; cursor: pointer; flex: 1; }
|
||||
/* Im Bearbeitungsmodus zeigt Hover die klickbare Titelfläche */
|
||||
.karte.gross h3 {
|
||||
padding: 0.1rem 0.3rem;
|
||||
margin-left: -0.3rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.karte.gross h3:hover { background: var(--code-bg); }
|
||||
.titel-feld { flex: 1; font-weight: 600; padding: 0.1rem 0.4rem; }
|
||||
.badge { cursor: pointer; }
|
||||
|
||||
@@ -357,9 +378,8 @@ section + section { border-top: 1px solid var(--rand); }
|
||||
margin: 0 0 0.15rem;
|
||||
}
|
||||
|
||||
/* Leere Sektionen und Werkzeuge erscheinen erst beim Hover über die Karte */
|
||||
/* Leere Sektionen nur in der ausführlichen Ansicht */
|
||||
section.leer { display: none; }
|
||||
.karte:hover section.leer { display: block; }
|
||||
.werkzeug { opacity: 0; transition: opacity 0.1s; }
|
||||
.karte:hover .werkzeug, .werkzeug:focus { opacity: 1; }
|
||||
/* „+ Funktion" belegt ohne Hover auch keinen Platz */
|
||||
@@ -369,9 +389,12 @@ section.leer { display: none; }
|
||||
.hinweis {
|
||||
color: var(--dezent);
|
||||
font-size: 0.85rem;
|
||||
margin: 0.1rem 0;
|
||||
padding: 0.1rem 0.3rem;
|
||||
margin: 0.1rem 0 0.1rem -0.3rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.hinweis:hover { background: var(--code-bg); }
|
||||
.hinzu {
|
||||
border: none;
|
||||
background: none;
|
||||
@@ -391,38 +414,35 @@ section.leer { display: none; }
|
||||
.zeile .icon-knopf { font-size: 0.8rem; opacity: 0; }
|
||||
.zeile:hover .icon-knopf { opacity: 1; }
|
||||
|
||||
/* Funktionsliste: Zeilen mit Aufklapp-Pfeil */
|
||||
/* Funktionsliste */
|
||||
.zeile.kopf { padding: 0.15rem 0.2rem; border-radius: 4px; }
|
||||
.zeile.kopf:hover { background: var(--code-bg); }
|
||||
.karte.gross .zeile.kopf:hover { background: var(--code-bg); }
|
||||
.funktionstitel { flex: 1; }
|
||||
.pfeil {
|
||||
color: var(--dezent);
|
||||
font-size: 0.75rem;
|
||||
display: inline-block;
|
||||
transition: transform 0.12s;
|
||||
.pfeil { color: var(--dezent); font-size: 0.75rem; }
|
||||
|
||||
/* Regeln und Flow nur in der ausführlichen Ansicht */
|
||||
.details { display: none; font-size: 0.9rem; }
|
||||
|
||||
/* Regeln (Punktliste) und Flow (nummerierte Schritte) als getönte Blöcke */
|
||||
.block {
|
||||
background: var(--code-bg);
|
||||
border-radius: 6px;
|
||||
padding: 0.3rem 0.55rem 0.35rem;
|
||||
margin: 0.3rem 0 0.1rem;
|
||||
}
|
||||
.funktion:hover .pfeil, .funktion.offen .pfeil {
|
||||
transform: rotate(90deg);
|
||||
.mini {
|
||||
font-size: 0.68rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--akzent);
|
||||
margin: 0 0 0.1rem;
|
||||
}
|
||||
|
||||
/* Regeln und Flow erst beim Hover über die Funktion; offen bleiben während Bearbeitung */
|
||||
.details { display: none; }
|
||||
.funktion:hover .details, .funktion.offen .details {
|
||||
display: block;
|
||||
margin: 0.15rem 0 0.45rem 0.35rem;
|
||||
padding: 0.1rem 0 0.1rem 0.75rem;
|
||||
border-left: 2px solid var(--akzent);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Regeln als Punktliste, Flow als nummerierte Schritte */
|
||||
.regeln { margin: 0.15rem 0; }
|
||||
.regel {
|
||||
flex: 1;
|
||||
.block .klickbar { border-radius: 4px; }
|
||||
.block .klickbar:hover { background: var(--bg); }
|
||||
.regel, .schritt {
|
||||
position: relative;
|
||||
padding-left: 1.15rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.regel::before {
|
||||
content: "•";
|
||||
@@ -430,25 +450,18 @@ section.leer { display: none; }
|
||||
left: 0.35rem;
|
||||
color: var(--dezent);
|
||||
}
|
||||
.regel:hover { background: var(--code-bg); }
|
||||
/* „+ Regel"/„+ Flow" bündig zur Listen-Einrückung */
|
||||
.details .hinzu {
|
||||
display: block;
|
||||
padding: 0.05rem 0 0.05rem 1.15rem;
|
||||
margin: 0.05rem 0;
|
||||
}
|
||||
.flow { border-radius: 4px; }
|
||||
.flow:hover { background: var(--code-bg); }
|
||||
.schritt {
|
||||
position: relative;
|
||||
padding-left: 1.15rem;
|
||||
}
|
||||
.nr {
|
||||
position: absolute;
|
||||
left: 0.15rem;
|
||||
color: var(--dezent);
|
||||
font-size: 0.85em;
|
||||
}
|
||||
/* „+ Regeln"/„+ Flow" bündig zur Listen-Einrückung */
|
||||
.details .hinzu {
|
||||
display: block;
|
||||
padding: 0.05rem 0 0.05rem 0.55rem;
|
||||
margin: 0.05rem 0;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
import { fetchFeatures, featureAnlegen } from '../api.js'
|
||||
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
import { fetchFeatures, featureAnlegen, featureLoeschen } from '../api.js'
|
||||
import FeatureKarte from './FeatureKarte.vue'
|
||||
|
||||
const props = defineProps({
|
||||
@@ -10,7 +10,7 @@ const emit = defineEmits(['geaendert'])
|
||||
|
||||
const features = ref([])
|
||||
const meldung = ref('')
|
||||
const neuId = ref(null) // frisch angelegte Karte: Titel direkt bearbeiten
|
||||
const neuId = ref(null) // frisch angelegte Karte: direkt im Vollmodus öffnen
|
||||
|
||||
async function laden() {
|
||||
meldung.value = ''
|
||||
@@ -23,35 +23,84 @@ async function laden() {
|
||||
}
|
||||
}
|
||||
|
||||
async function neuesFeature() {
|
||||
function aktualisiert(altId, f) {
|
||||
const idx = features.value.findIndex(x => x.id === altId)
|
||||
if (idx >= 0) features.value[idx] = f
|
||||
if (neuId.value === altId) neuId.value = f.id
|
||||
}
|
||||
|
||||
// Kontextmenü: Rechtsklick auf eine Card (entfernen) oder den Hauptbereich (erstellen)
|
||||
const kontextMenue = ref(null) // {feature|null, x, y}
|
||||
|
||||
function oeffneKartenMenue(e, f) {
|
||||
kontextMenue.value = { feature: f, x: e.clientX, y: e.clientY }
|
||||
}
|
||||
|
||||
function oeffneBereichsMenue(e) {
|
||||
kontextMenue.value = { feature: null, x: e.clientX, y: e.clientY }
|
||||
}
|
||||
|
||||
function schliesseKontextMenue() {
|
||||
kontextMenue.value = null
|
||||
}
|
||||
|
||||
onMounted(() => window.addEventListener('click', schliesseKontextMenue))
|
||||
onUnmounted(() => window.removeEventListener('click', schliesseKontextMenue))
|
||||
|
||||
// Modal für Erstellen und Entfernen
|
||||
const modal = ref(null) // {art: 'erstellen'} | {art: 'entfernen', feature}
|
||||
const modalName = ref('')
|
||||
const modalFeld = ref(null)
|
||||
|
||||
async function menueErstellen() {
|
||||
kontextMenue.value = null
|
||||
meldung.value = ''
|
||||
modal.value = { art: 'erstellen' }
|
||||
modalName.value = ''
|
||||
await nextTick()
|
||||
modalFeld.value?.focus()
|
||||
}
|
||||
|
||||
function menueEntfernen() {
|
||||
const feature = kontextMenue.value.feature
|
||||
kontextMenue.value = null
|
||||
meldung.value = ''
|
||||
modal.value = { art: 'entfernen', feature }
|
||||
}
|
||||
|
||||
async function erstellenBestaetigen() {
|
||||
meldung.value = ''
|
||||
const name = modalName.value.trim()
|
||||
if (!name) return
|
||||
try {
|
||||
const f = await featureAnlegen(props.projekt, '<!-- titel -->\nNeues Feature\n')
|
||||
const f = await featureAnlegen(props.projekt, `<!-- titel -->\n${name}\n`)
|
||||
modal.value = null
|
||||
features.value.push(f)
|
||||
neuId.value = f.id
|
||||
emit('geaendert') // Anzahl in der Seitenleiste aktualisieren
|
||||
neuId.value = f.id // öffnet die Karte im Vollmodus
|
||||
emit('geaendert')
|
||||
} catch (e) {
|
||||
meldung.value = e.message
|
||||
}
|
||||
}
|
||||
|
||||
function aktualisiert(altId, f) {
|
||||
const idx = features.value.findIndex(x => x.id === altId)
|
||||
if (idx >= 0) features.value[idx] = f
|
||||
if (neuId.value === altId) neuId.value = null
|
||||
}
|
||||
|
||||
function geloescht(id) {
|
||||
features.value = features.value.filter(f => f.id !== id)
|
||||
emit('geaendert')
|
||||
async function entfernenBestaetigen() {
|
||||
meldung.value = ''
|
||||
try {
|
||||
await featureLoeschen(props.projekt, modal.value.feature.id)
|
||||
features.value = features.value.filter(f => f.id !== modal.value.feature.id)
|
||||
modal.value = null
|
||||
emit('geaendert')
|
||||
} catch (e) {
|
||||
meldung.value = e.message
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => props.projekt, laden, { immediate: true })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<p v-if="meldung" class="meldung">{{ meldung }}</p>
|
||||
<div class="bereich" @contextmenu.prevent="oeffneBereichsMenue">
|
||||
<p v-if="meldung && !modal" class="meldung">{{ meldung }}</p>
|
||||
|
||||
<div class="gitter">
|
||||
<FeatureKarte
|
||||
@@ -59,16 +108,54 @@ watch(() => props.projekt, laden, { immediate: true })
|
||||
:key="f.id"
|
||||
:projekt="projekt"
|
||||
:feature="f"
|
||||
:titel-bearbeiten="f.id === neuId"
|
||||
:vollmodus="f.id === neuId"
|
||||
@aktualisiert="aktualisiert"
|
||||
@geloescht="geloescht(f.id)"
|
||||
@kontextmenue="oeffneKartenMenue($event, f)"
|
||||
/>
|
||||
<button class="karte neu" @click="neuesFeature">+ Feature</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="kontextMenue"
|
||||
class="kontextmenue"
|
||||
:style="{ left: kontextMenue.x + 'px', top: kontextMenue.y + 'px' }"
|
||||
>
|
||||
<button v-if="kontextMenue.feature" @click="menueEntfernen">✕ Feature entfernen</button>
|
||||
<button v-else @click="menueErstellen">+ Feature erstellen</button>
|
||||
</div>
|
||||
|
||||
<div v-if="modal" class="schleier" @click.self="modal = null">
|
||||
<div class="modal karte">
|
||||
<template v-if="modal.art === 'erstellen'">
|
||||
<h2>Feature erstellen</h2>
|
||||
<input
|
||||
ref="modalFeld"
|
||||
v-model="modalName"
|
||||
placeholder="Feature-Titel"
|
||||
@keyup.enter="erstellenBestaetigen"
|
||||
@keydown.esc="modal = null"
|
||||
>
|
||||
<p v-if="meldung" class="meldung">{{ meldung }}</p>
|
||||
<footer>
|
||||
<button @click="modal = null">Abbrechen</button>
|
||||
<button class="primaer" :disabled="!modalName.trim()" @click="erstellenBestaetigen">Bestätigen</button>
|
||||
</footer>
|
||||
</template>
|
||||
<template v-else>
|
||||
<h2>Feature entfernen</h2>
|
||||
<p class="frage">„{{ modal.feature.sektionen.titel }}“ entfernen?</p>
|
||||
<p v-if="meldung" class="meldung">{{ meldung }}</p>
|
||||
<footer>
|
||||
<button @click="modal = null">Abbrechen</button>
|
||||
<button class="primaer" @click="entfernenBestaetigen">Entfernen</button>
|
||||
</footer>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.bereich { min-height: 100%; }
|
||||
/* Spaltenlayout: unterschiedlich hohe Karten stapeln sich ohne Lücken */
|
||||
.gitter {
|
||||
columns: 340px;
|
||||
@@ -83,13 +170,4 @@ watch(() => props.projekt, laden, { immediate: true })
|
||||
margin-bottom: 0.9rem;
|
||||
width: 100%;
|
||||
}
|
||||
/* Geisterkarte statt Kopfzeilen-Knopf */
|
||||
.neu {
|
||||
border: 1px dashed var(--rand);
|
||||
background: none;
|
||||
color: var(--dezent);
|
||||
min-height: 90px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.neu:hover { color: var(--akzent); border-color: var(--akzent); }
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { nextTick, ref } from 'vue'
|
||||
import { nextTick, onMounted, onUnmounted, ref } from 'vue'
|
||||
import { projektAnlegen, projektUmbenennen, projektLoeschen } from '../api.js'
|
||||
|
||||
const props = defineProps({
|
||||
@@ -8,26 +8,10 @@ const props = defineProps({
|
||||
})
|
||||
const emit = defineEmits(['auswaehlen', 'geaendert', 'umbenannt'])
|
||||
|
||||
const neuerName = ref('')
|
||||
const meldung = ref('')
|
||||
const bearbeitet = ref(null) // Projektname, der gerade umbenannt wird
|
||||
const umbenennung = ref('')
|
||||
const umbenennFeld = ref(null)
|
||||
const loeschBestaetigung = ref(null) // Projektname, dessen ✕ auf Bestätigung wartet
|
||||
|
||||
async function anlegen() {
|
||||
meldung.value = ''
|
||||
const name = neuerName.value.trim()
|
||||
if (!name) return
|
||||
try {
|
||||
await projektAnlegen(name)
|
||||
neuerName.value = ''
|
||||
emit('geaendert')
|
||||
emit('auswaehlen', name)
|
||||
} catch (e) {
|
||||
meldung.value = e.message
|
||||
}
|
||||
}
|
||||
|
||||
async function starteUmbenennen(name) {
|
||||
meldung.value = ''
|
||||
@@ -49,16 +33,71 @@ async function umbenennen(alt) {
|
||||
}
|
||||
}
|
||||
|
||||
async function loeschen(name) {
|
||||
// Erster Klick: Icon wird zum Bestätigungs-Icon, zweiter Klick löscht
|
||||
if (loeschBestaetigung.value !== name) {
|
||||
loeschBestaetigung.value = name
|
||||
return
|
||||
// Kontextmenü: Rechtsklick auf Projektname (anpassen/entfernen)
|
||||
// oder auf freie Sidebar-Fläche (erstellen)
|
||||
const kontextMenue = ref(null) // {name|null, x, y}
|
||||
|
||||
function oeffneProjektMenue(e, name) {
|
||||
kontextMenue.value = { name, x: e.clientX, y: e.clientY }
|
||||
}
|
||||
|
||||
function oeffneLeistenMenue(e) {
|
||||
kontextMenue.value = { name: null, x: e.clientX, y: e.clientY }
|
||||
}
|
||||
|
||||
function schliesseKontextMenue() {
|
||||
kontextMenue.value = null
|
||||
}
|
||||
|
||||
onMounted(() => window.addEventListener('click', schliesseKontextMenue))
|
||||
onUnmounted(() => window.removeEventListener('click', schliesseKontextMenue))
|
||||
|
||||
// Modal für Erstellen und Entfernen
|
||||
const modal = ref(null) // {art: 'erstellen'} | {art: 'entfernen', name}
|
||||
const modalName = ref('')
|
||||
const modalFeld = ref(null)
|
||||
|
||||
async function menueErstellen() {
|
||||
kontextMenue.value = null
|
||||
meldung.value = ''
|
||||
modal.value = { art: 'erstellen' }
|
||||
modalName.value = ''
|
||||
await nextTick()
|
||||
modalFeld.value?.focus()
|
||||
}
|
||||
|
||||
function menueAnpassen() {
|
||||
const name = kontextMenue.value.name
|
||||
kontextMenue.value = null
|
||||
starteUmbenennen(name)
|
||||
}
|
||||
|
||||
function menueEntfernen() {
|
||||
const name = kontextMenue.value.name
|
||||
kontextMenue.value = null
|
||||
meldung.value = ''
|
||||
modal.value = { art: 'entfernen', name }
|
||||
}
|
||||
|
||||
async function erstellenBestaetigen() {
|
||||
meldung.value = ''
|
||||
const name = modalName.value.trim()
|
||||
if (!name) return
|
||||
try {
|
||||
await projektAnlegen(name)
|
||||
modal.value = null
|
||||
emit('geaendert')
|
||||
emit('auswaehlen', name) // Projekt wird direkt aufgerufen
|
||||
} catch (e) {
|
||||
meldung.value = e.message
|
||||
}
|
||||
loeschBestaetigung.value = null
|
||||
}
|
||||
|
||||
async function entfernenBestaetigen() {
|
||||
meldung.value = ''
|
||||
try {
|
||||
await projektLoeschen(name)
|
||||
await projektLoeschen(modal.value.name)
|
||||
modal.value = null
|
||||
emit('geaendert')
|
||||
} catch (e) {
|
||||
meldung.value = e.message
|
||||
@@ -67,7 +106,7 @@ async function loeschen(name) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside>
|
||||
<aside @contextmenu.prevent="oeffneLeistenMenue">
|
||||
<header>
|
||||
<p class="gruppe">Projekte</p>
|
||||
<slot />
|
||||
@@ -78,7 +117,7 @@ async function loeschen(name) {
|
||||
:key="p.name"
|
||||
:class="{ aktiv: p.name === aktiv }"
|
||||
@click="emit('auswaehlen', p.name)"
|
||||
@mouseleave="loeschBestaetigung = null"
|
||||
@contextmenu.prevent.stop="oeffneProjektMenue($event, p.name)"
|
||||
>
|
||||
<template v-if="bearbeitet === p.name">
|
||||
<input
|
||||
@@ -92,25 +131,51 @@ async function loeschen(name) {
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="name">{{ p.name }}</span>
|
||||
<span class="anzahl">{{ p.anzahl }}</span>
|
||||
<span class="aktionen" @click.stop>
|
||||
<button class="icon-knopf" title="Umbenennen" @click="starteUmbenennen(p.name)">✎</button>
|
||||
<button
|
||||
class="icon-knopf rot"
|
||||
:class="{ bestaetigen: loeschBestaetigung === p.name }"
|
||||
:title="loeschBestaetigung === p.name ? 'Wirklich löschen?' : 'Löschen'"
|
||||
@click="loeschen(p.name)"
|
||||
>{{ loeschBestaetigung === p.name ? '✓' : '✕' }}</button>
|
||||
</span>
|
||||
</template>
|
||||
</li>
|
||||
</ul>
|
||||
<p v-if="meldung && !modal" class="meldung">{{ meldung }}</p>
|
||||
|
||||
<form class="neu" @submit.prevent="anlegen">
|
||||
<input v-model="neuerName" placeholder="Neues Projekt">
|
||||
<button class="primaer" :disabled="!neuerName.trim()">+</button>
|
||||
</form>
|
||||
<p v-if="meldung" class="meldung">{{ meldung }}</p>
|
||||
<div
|
||||
v-if="kontextMenue"
|
||||
class="kontextmenue"
|
||||
:style="{ left: kontextMenue.x + 'px', top: kontextMenue.y + 'px' }"
|
||||
>
|
||||
<template v-if="kontextMenue.name">
|
||||
<button @click="menueAnpassen">✎ Projekt anpassen</button>
|
||||
<button @click="menueEntfernen">✕ Projekt entfernen</button>
|
||||
</template>
|
||||
<button v-else @click="menueErstellen">+ Projekt erstellen</button>
|
||||
</div>
|
||||
|
||||
<div v-if="modal" class="schleier" @click.self="modal = null">
|
||||
<div class="modal karte">
|
||||
<template v-if="modal.art === 'erstellen'">
|
||||
<h2>Projekt erstellen</h2>
|
||||
<input
|
||||
ref="modalFeld"
|
||||
v-model="modalName"
|
||||
placeholder="Projektname"
|
||||
@keyup.enter="erstellenBestaetigen"
|
||||
@keydown.esc="modal = null"
|
||||
>
|
||||
<p v-if="meldung" class="meldung">{{ meldung }}</p>
|
||||
<footer>
|
||||
<button @click="modal = null">Abbrechen</button>
|
||||
<button class="primaer" :disabled="!modalName.trim()" @click="erstellenBestaetigen">Bestätigen</button>
|
||||
</footer>
|
||||
</template>
|
||||
<template v-else>
|
||||
<h2>Projekt entfernen</h2>
|
||||
<p class="frage">„{{ modal.name }}“ mit allen Features entfernen?</p>
|
||||
<p v-if="meldung" class="meldung">{{ meldung }}</p>
|
||||
<footer>
|
||||
<button @click="modal = null">Abbrechen</button>
|
||||
<button class="primaer" @click="entfernenBestaetigen">Entfernen</button>
|
||||
</footer>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
@@ -154,16 +219,6 @@ li.aktiv { background: var(--bg); font-weight: 600; }
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.anzahl { color: var(--dezent); font-size: 0.78rem; }
|
||||
.aktionen { display: none; }
|
||||
li:hover .aktionen { display: inline-flex; }
|
||||
li:hover .anzahl { display: none; }
|
||||
li input { width: 100%; padding: 0.1rem 0.4rem; }
|
||||
.icon-knopf.bestaetigen { color: var(--rot); }
|
||||
.neu {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
.neu input { flex: 1; min-width: 0; }
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user