admin/hejyou_content_creation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fertigstellen-Button + drawing_created Status-Flow

Browse Source 
- DrawIt: Button "Fertigstellen" unter Objektliste setzt Picture-Status auf drawing_created
- Bild verschwindet danach aus der Annotieren-Ansicht
- GenerateIt: lädt jetzt Directus-Bilder mit status=drawing_created
- GenerateIt: zeigt Bild-Vorschau + Directus-Objekte
- app.py: PATCH-Endpunkt für Pictures + Status-Parameter im GET

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
admin
2026-04-25 21:49:13 +02:00
parent e18d9a5796
commit a42fadef09
4 changed files with 111 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/api.ts
View File

@@ -19,8 +19,8 @@ export interface DirectusPicture {
status: string
}
export async function getDirectusPictures(token: string): Promise<DirectusPicture[]> {
const res = await fetch('/api/directus/pictures', {
export async function getDirectusPictures(token: string, status = 'new'): Promise<DirectusPicture[]> {
const res = await fetch(`/api/directus/pictures?status=${status}`, {
headers: { Authorization: `Bearer ${token}` },
})
if (!res.ok) throw new Error('Fehler beim Laden der Directus-Bilder')
@@ -28,6 +28,15 @@ export async function getDirectusPictures(token: string): Promise<DirectusPictur
return data.data as DirectusPicture[]
}
export async function updatePictureStatus(pictureId: string, status: string, token: string): Promise<void> {
const res = await fetch(`/api/directus/pictures/${pictureId}`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
body: JSON.stringify({ status }),
})
if (!res.ok) throw new Error('Fehler beim Aktualisieren des Status')
}
export function directusAssetUrl(mediaId: string, token: string): string {
return `${DIRECTUS_URL}/assets/${mediaId}?access_token=${token}`
}

31
frontend/src/pages/DrawIt.tsx
View File

@@ -4,6 +4,7 @@ import Topbar from '../components/Topbar'
import {
getDirectusPictures, directusAssetUrl, type DirectusPicture,
getDirectusObjects, createDirectusObject, updateDirectusObject, deleteDirectusObject,
updatePictureStatus,
} from '../api'
import { useAuth } from '../context/AuthContext'
import type { DirectusObject, Selection, CanvasObject } from '../types'
@@ -38,6 +39,7 @@ export default function DrawIt() {
const [mode, setMode] = useState<'rect' | 'polygon'>('polygon')
const [hasSelection, setHasSelection] = useState(false)
const [saving, setSaving] = useState(false)
const [finishing, setFinishing] = useState(false)
const [status, setStatus] = useState('')
const [statusError, setStatusError] = useState(false)
@@ -106,6 +108,22 @@ export default function DrawIt() {
}
}
const finishPicture = async () => {
if (!currentPicture || !token) return
setFinishing(true)
try {
await updatePictureStatus(currentPicture.id, 'drawing_created', token)
setPictureList(prev => prev.filter(p => p.id !== currentPicture.id))
setCurrentIndex(i => Math.max(0, i - 1))
setObjects([])
showStatus('Bild fertiggestellt.')
} catch (e) {
showStatus(e instanceof Error ? e.message : 'Fehler.', true)
} finally {
setFinishing(false)
}
}
const saveNoteEdit = async () => {
if (!editingNotes || !token) return
try {
@@ -220,6 +238,19 @@ export default function DrawIt() {
</div>
)}
</div>
{objects.length > 0 && (
<div className="sidebar-panel">
<button
className="btn-primary btn-sm btn-block"
onClick={finishPicture}
disabled={finishing}
style={{ background: 'var(--success, #16a34a)' }}
>
{finishing ? 'Wird fertiggestellt…' : '✅ Fertigstellen'}
</button>
</div>
)}
</aside>
{/* Center: Canvas */}

119
frontend/src/pages/GenerateIt.tsx
View File

@@ -3,7 +3,9 @@ import ObjectsList from '../components/ObjectsList'
import DetailsPanel from '../components/DetailsPanel'
import SentencesList from '../components/SentencesList'
import Topbar from '../components/Topbar'
import { getImages, getObjects, generateDetails, generateSentence, getSentences } from '../api'
import { getDirectusPictures, directusAssetUrl, type DirectusPicture, getDirectusObjects, generateDetails, generateSentence, getSentences } from '../api'
import { useAuth } from '../context/AuthContext'
import type { DirectusObject, Selection } from '../types'
import type { ObjectMeta, Sentence } from '../types'
const ChevronLeftIcon = () => (
@@ -30,54 +32,58 @@ const ChatIcon = () => (
</svg>
)
function directusObjToMeta(obj: DirectusObject, index: number): ObjectMeta {
const first = obj.selections?.[0]
return {
id: obj.id,
image_file: '',
title_de: '',
position_de: '',
action_de: '',
condition_de: '',
hierarchy: 1,
parent_id: obj.parent ?? undefined,
user_notes: obj.user_notes ?? '',
selections: obj.selections ?? [],
} as unknown as ObjectMeta
}
export default function GenerateIt() {
const [imageList, setImageList] = useState<string[]>([])
const { token } = useAuth()
const [pictureList, setPictureList] = useState<DirectusPicture[]>([])
const [currentIndex, setCurrentIndex] = useState(-1)
const [directusObjects, setDirectusObjects] = useState<DirectusObject[]>([])
const [objects, setObjects] = useState<ObjectMeta[]>([])
const [selectedObj, setSelectedObj] = useState<ObjectMeta | null>(null)
const [sentences, setSentences] = useState<Sentence[]>([])
const [isGeneratingDetails, setIsGeneratingDetails] = useState(false)
const [isGeneratingSentence, setIsGeneratingSentence] = useState(false)
const currentFilename =
currentIndex >= 0 && currentIndex < imageList.length ? imageList[currentIndex] : null
const currentPicture: DirectusPicture | null =
currentIndex >= 0 && currentIndex < pictureList.length ? pictureList[currentIndex] : null
useEffect(() => {
getImages('generate')
.then(imgs => {
setImageList(imgs)
setCurrentIndex(imgs.length - 1)
})
if (!token) return
getDirectusPictures(token, 'drawing_created')
.then(pics => { setPictureList(pics); setCurrentIndex(pics.length > 0 ? 0 : -1) })
.catch(console.error)
}, [])
}, [token])
useEffect(() => {
if (!currentFilename) {
setObjects([])
setSelectedObj(null)
setSentences([])
return
}
getObjects(currentFilename)
if (!currentPicture || !token) { setDirectusObjects([]); setObjects([]); setSelectedObj(null); setSentences([]); return }
getDirectusObjects(currentPicture.id, token)
.then(objs => {
setObjects(objs)
if (objs.length > 0) {
setSelectedObj(objs[0])
loadSentences(objs[0].id)
} else {
setSelectedObj(null)
setSentences([])
}
setDirectusObjects(objs)
const metas = objs.map((o, i) => directusObjToMeta(o, i))
setObjects(metas)
if (metas.length > 0) { setSelectedObj(metas[0]); loadSentences(metas[0].id) }
else { setSelectedObj(null); setSentences([]) }
})
.catch(console.error)
}, [currentFilename])
}, [currentPicture?.id, token])
const loadSentences = async (objId: string) => {
try {
setSentences(await getSentences(objId))
} catch (e) {
console.error(e)
}
try { setSentences(await getSentences(objId)) } catch (e) { console.error(e) }
}
const handleGenerateDetails = async () => {
@@ -114,48 +120,32 @@ export default function GenerateIt() {
const imageNav = (
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<div className="image-nav">
<button
className="btn-icon"
onClick={() => setCurrentIndex(i => i - 1)}
disabled={currentIndex <= 0}
>
<button className="btn-icon" onClick={() => setCurrentIndex(i => i - 1)} disabled={currentIndex <= 0}>
<ChevronLeftIcon />
</button>
<span className="image-counter">
{imageList.length > 0 ? (
{pictureList.length > 0 ? (
<>
<span className="image-counter-num">{currentIndex + 1}</span>
<span className="image-counter-sep">/</span>
<span className="image-counter-total">{imageList.length}</span>
<span className="image-counter-total">{pictureList.length}</span>
</>
) : (
<span className="image-counter-empty">Keine Bilder</span>
)}
</span>
<button
className="btn-icon"
onClick={() => setCurrentIndex(i => i + 1)}
disabled={currentIndex >= imageList.length - 1}
>
<button className="btn-icon" onClick={() => setCurrentIndex(i => i + 1)} disabled={currentIndex >= pictureList.length - 1}>
<ChevronRightIcon />
</button>
</div>
<div style={{ width: 1, height: 24, background: 'var(--border)' }} />
<button
className="btn-ghost btn-sm"
onClick={handleGenerateDetails}
disabled={isGeneratingDetails || !selectedObj}
>
<button className="btn-ghost btn-sm" onClick={handleGenerateDetails} disabled={isGeneratingDetails || !selectedObj}>
<SparkleIcon />
{isGeneratingDetails ? 'Generiere…' : 'KI-Details'}
</button>
<button
className="btn-ghost btn-sm"
onClick={handleGenerateSentence}
disabled={isGeneratingSentence || !selectedObj}
>
<button className="btn-ghost btn-sm" onClick={handleGenerateSentence} disabled={isGeneratingSentence || !selectedObj}>
<ChatIcon />
{isGeneratingSentence ? 'Generiere…' : 'KI-Sentence'}
</button>
@@ -170,16 +160,16 @@ export default function GenerateIt() {
{/* Left: Objects */}
<aside className="sidebar">
<div className="sidebar-panel" style={{ flex: 1 }}>
<h3 className="sidebar-heading">Objekte</h3>
<h3 className="sidebar-heading">
Objekte
{objects.length > 0 && <span className="badge">{objects.length}</span>}
</h3>
<ObjectsList
objects={objects}
selectedObjectId={selectedObj?.id ?? null}
onSelect={id => {
const obj = objects.find(o => o.id === id)
if (obj) {
setSelectedObj(obj)
loadSentences(obj.id)
}
if (obj) { setSelectedObj(obj); loadSentences(obj.id) }
}}
onObjectsChange={setObjects}
isGeneratePage={true}
@@ -189,9 +179,16 @@ export default function GenerateIt() {
</div>
</aside>
{/* Center: Details */}
<main className="canvas-area" style={{ alignItems: 'flex-start', justifyContent: 'flex-start' }}>
<div style={{ width: '100%', maxWidth: 520, display: 'flex', flexDirection: 'column', gap: 1 }}>
{/* Center: Image + Details */}
<main className="canvas-area" style={{ alignItems: 'flex-start', justifyContent: 'flex-start', flexDirection: 'column', gap: 12, padding: 16 }}>
{currentPicture && token && (
<img
src={directusAssetUrl(currentPicture.media, token)}
alt="Bild"
style={{ maxWidth: '100%', maxHeight: 320, borderRadius: 8, objectFit: 'contain', border: '1px solid var(--border)' }}
/>
)}
<div style={{ width: '100%', maxWidth: 520 }}>
<div className="sidebar-panel" style={{ background: 'var(--surface)', borderRadius: 'var(--r-lg)', border: '1px solid var(--border)' }}>
<DetailsPanel obj={selectedObj} objects={objects} sentences={sentences} />
</div>