aknuth
/
vokabeltraining
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases Wiki Activity

DEck ausblenden bei Training, Image mit id, daten kommen alle aus der deck Tabelle

This commit is contained in:
Andreas Knuth 2024-11-29 21:48:44 +01:00
parent ab021cb4c2
commit c116b56934
5 changed files with 81 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/app/deck-list.component.html
View File

@ -12,45 +12,56 @@
<div *ngFor="let deck of decks" class="bg-white shadow rounded-lg p-6 flex flex-col"> <div *ngFor="let deck of decks" class="bg-white shadow rounded-lg p-6 flex flex-col">
<div class="flex justify-between items-center mb-4"> <div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-semibold">{{ deck.name }}</h2> <h2 class="text-xl font-semibold">{{ deck.name }}</h2>
<button (click)="deleteDeck(deck.name)" class="text-red-500 hover:text-red-700">
<!-- Anzahl der Bilder anzeigen, wenn ein Training aktiv ist -->
<span *ngIf="selectedDeck" class="text-gray-600">
{{ deck.images.length }} Bilder
</span>
<!-- Löschen-Button anzeigen, wenn kein Training aktiv ist -->
<button *ngIf="!selectedDeck" (click)="deleteDeck(deck.name)" class="text-red-500 hover:text-red-700" title="Deck löschen">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg> </svg>
</button> </button>
</div> </div>
<!-- Liste der Bilder mit Anzahl der Boxen und Icons --> <!-- Bildliste und Action-Buttons nur anzeigen, wenn kein Training aktiv ist -->
<ul class="mb-4"> <ng-container *ngIf="!selectedDeck">
<li *ngFor="let image of deck.images" class="flex justify-between items-center py-2 border-b last:border-b-0"> <!-- Liste der Bilder mit Anzahl der Boxen und Icons -->
<div> <ul class="mb-4">
<span class="font-medium">{{ image.name }}</span> <li *ngFor="let image of deck.images" class="flex justify-between items-center py-2 border-b last:border-b-0">
<span class="text-gray-600">&nbsp;({{ image.boxes?.length }} Boxen)</span> <div>
</div> <span class="font-medium">{{ image.name }}</span>
<div class="flex space-x-2"> <span class="text-gray-600">({{ image.boxes.length }} Boxen)</span>
<!-- Edit Icon --> </div>
<button class="text-blue-500 hover:text-blue-700" title="Bild bearbeiten"> <div class="flex space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <!-- Edit Icon -->
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4H4v7m0 0l9-9 9 9M20 13v7h-7m0 0l-9-9-9 9" /> <button class="text-blue-500 hover:text-blue-700" title="Bild bearbeiten">
</svg> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
</button> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4H4v7m0 0l9-9 9 9M20 13v7h-7m0 0l-9-9-9 9" />
<!-- Delete Icon --> </svg>
<button (click)="deleteImage(deck, image)" class="text-red-500 hover:text-red-700" title="Bild löschen"> </button>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <!-- Delete Icon -->
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> <button (click)="deleteImage(deck, image)" class="text-red-500 hover:text-red-700" title="Bild löschen">
</svg> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
</button> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</div> </svg>
</li> </button>
</ul> </div>
</li>
</ul>
<div class="flex space-x-2"> <!-- Action-Buttons -->
<button (click)="openTraining(deck)" class="flex-1 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600"> <div class="flex space-x-2">
Training starten <button (click)="openTraining(deck)" class="flex-1 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
</button> Training starten
<button (click)="openUploadImageModal(deck.name)" class="flex-1 bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600"> </button>
Bild hinzufügen <button (click)="openUploadImageModal(deck.name)" class="flex-1 bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600">
</button> Bild hinzufügen
</div> </button>
</div>
</ng-container>
</div> </div>
</div> </div>

4
src/app/deck-list.component.ts
View File

@ -57,9 +57,9 @@ export class DeckListComponent implements OnInit {
// Hier gehen wir davon aus, dass das Deck eine eindeutige ID hat. Falls nicht, passe den Code entsprechend an. // Hier gehen wir davon aus, dass das Deck eine eindeutige ID hat. Falls nicht, passe den Code entsprechend an.
const deckId = deck.id; // Stelle sicher, dass das Deck eine `id` hat const deckId = deck.id; // Stelle sicher, dass das Deck eine `id` hat
const imageName = image.name; // Stelle sicher, dass das Bild eine `id` hat const imageId = image.id; // Stelle sicher, dass das Bild eine `id` hat
this.deckService.deleteImage(imageName).subscribe({ this.deckService.deleteImage(imageId).subscribe({
next: () => this.loadDecks(), next: () => this.loadDecks(),
error: (err) => console.error('Fehler beim Löschen des Bildes', err) error: (err) => console.error('Fehler beim Löschen des Bildes', err)
}); });

54
src/app/deck.service.ts
View File

@ -12,6 +12,7 @@ export interface Deck {
export interface DeckImage { export interface DeckImage {
boxes: Box[]; boxes: Box[];
name: string; name: string;
id:string;
} }
export interface Box { export interface Box {
x1:number; x1:number;
@ -51,13 +52,14 @@ export class DeckService {
const imageMap: { [key: string]: DeckImage } = {}; const imageMap: { [key: string]: DeckImage } = {};
images.forEach(image => { images.forEach(image => {
if (!imageMap[image.name]) { if (!imageMap[image.id]) {
imageMap[image.name] = { imageMap[image.id] = {
name: image.name, name: image.name,
id:image.id,
boxes: [] boxes: []
}; };
} }
imageMap[image.name].boxes.push({ imageMap[image.id].boxes.push({
x1: image.x1, x1: image.x1,
x2: image.x2, x2: image.x2,
y1: image.y1, y1: image.y1,
@ -70,32 +72,32 @@ export class DeckService {
getDeck(deckname:string): Observable<Deck> { getDeck(deckname:string): Observable<Deck> {
return this.http.get<Deck>(`${this.apiUrl}/${deckname}/images`); return this.http.get<Deck>(`${this.apiUrl}/${deckname}/images`);
} }
getImage(name: string): Observable<DeckImage> { // getImage(name: string): Observable<DeckImage> {
return this.http.get<BackendBox[]>(`${this.apiUrl}/image/${name}`).pipe( // return this.http.get<BackendBox[]>(`${this.apiUrl}/image/${name}`).pipe(
map(response => { // map(response => {
if (response.length === 0) { // if (response.length === 0) {
// Falls keine Daten zurückgegeben werden, ein leeres DeckImage zurückgeben // // Falls keine Daten zurückgegeben werden, ein leeres DeckImage zurückgeben
return { name: name, boxes: [] }; // return { name: name, boxes: [] };
} // }
// Extrahiere den Bildnamen aus dem ersten Element des Arrays // // Extrahiere den Bildnamen aus dem ersten Element des Arrays
const imageName = response[0].bildname; // const imageName = response[0].bildname;
// Mape die Backend-Daten auf das Box-Interface // // Mape die Backend-Daten auf das Box-Interface
const boxes: Box[] = response.map(item => ({ // const boxes: Box[] = response.map(item => ({
x1: item.x1, // x1: item.x1,
x2: item.x2, // x2: item.x2,
y1: item.y1, // y1: item.y1,
y2: item.y2 // y2: item.y2
})); // }));
return { // return {
name: imageName, // name: imageName,
boxes: boxes // boxes: boxes
}; // };
}) // })
); // );
} // }
createDeck(deckname: string): Observable<any> { createDeck(deckname: string): Observable<any> {
return this.http.post(this.apiUrl, { deckname }); return this.http.post(this.apiUrl, { deckname });
} }

20
src/app/training/training.component.ts
View File

@ -15,7 +15,7 @@ export class TrainingComponent implements OnInit {
@Input() deck!: Deck; @Input() deck!: Deck;
@Output() close = new EventEmitter<void>(); @Output() close = new EventEmitter<void>();
@ViewChild('canvas') canvasRef!: ElementRef<HTMLCanvasElement>; @ViewChild('canvas',{static : false}) canvasRef!: ElementRef<HTMLCanvasElement>;
currentImageIndex: number = 0; currentImageIndex: number = 0;
currentImageData: DeckImage | null = null; currentImageData: DeckImage | null = null;
@ -32,6 +32,8 @@ export class TrainingComponent implements OnInit {
constructor(private deckService: DeckService) { } constructor(private deckService: DeckService) { }
ngOnInit(): void { ngOnInit(): void {
}
ngAfterViewInit(){
if (this.deck && this.deck.images.length > 0) { if (this.deck && this.deck.images.length > 0) {
this.loadImage(this.currentImageIndex); this.loadImage(this.currentImageIndex);
} else { } else {
@ -39,7 +41,6 @@ export class TrainingComponent implements OnInit {
this.close.emit(); this.close.emit();
} }
} }
loadImage(imageIndex: number): void { loadImage(imageIndex: number): void {
if (imageIndex >= this.deck.images.length) { if (imageIndex >= this.deck.images.length) {
this.endTraining(); this.endTraining();
@ -47,21 +48,12 @@ export class TrainingComponent implements OnInit {
} }
const imageName = this.deck.images[imageIndex].name; const imageName = this.deck.images[imageIndex].name;
this.deckService.getImage(imageName).subscribe({ this.currentImageData = this.deck.images[imageIndex];
next: (imageData: DeckImage) => { this.boxes = this.deck.images[imageIndex].boxes;
this.currentImageData = imageData;
this.boxes = imageData.boxes;
this.boxRevealed = new Array(this.boxes.length).fill(false); this.boxRevealed = new Array(this.boxes.length).fill(false);
this.currentBoxIndex = 0; this.currentBoxIndex = 0;
this.isShowingBox = false; this.isShowingBox = false;
this.drawCanvas(); this.drawCanvas();
},
error: (err) => {
console.error('Fehler beim Laden des Bildes:', err);
alert('Fehler beim Laden des Bildes.');
this.close.emit();
}
});
} }
drawCanvas(): void { drawCanvas(): void {
@ -70,7 +62,7 @@ export class TrainingComponent implements OnInit {
if (!ctx || !this.currentImageData) return; if (!ctx || !this.currentImageData) return;
const img = new Image(); const img = new Image();
img.src = `/api/debug_image/${this.currentImageData.name}`; img.src = `/api/debug_image/${this.currentImageData.id}`;
img.onload = () => { img.onload = () => {
// Set canvas size to image size // Set canvas size to image size
canvas.width = img.width; canvas.width = img.width;

6
src/app/upload-image-modal/upload-image-modal.component.ts
View File

@ -107,7 +107,6 @@ export class UploadImageModalComponent implements AfterViewInit, OnDestroy {
async onFileChange(event: any): Promise<void> { async onFileChange(event: any): Promise<void> {
const file: File = event.target.files[0]; const file: File = event.target.files[0];
if (!file) return; if (!file) return;
this.imageFile = file; this.imageFile = file;
this.processingStatus = 'Verarbeitung läuft...'; this.processingStatus = 'Verarbeitung läuft...';
this.detectedText = ''; this.detectedText = '';
@ -317,12 +316,12 @@ export class UploadImageModalComponent implements AfterViewInit, OnDestroy {
// Zum Beispiel: // Zum Beispiel:
const data = { const data = {
deckname: this.deckName, deckname: this.deckName,
image: this.imagename, bildname: this.imageFile?.name,
bildid: this.imagename,
boxes: this.boxes, boxes: this.boxes,
}; };
this.deckService.saveImageData(data).subscribe({ this.deckService.saveImageData(data).subscribe({
next: () => { next: () => {
alert('Bild gespeichert!');
this.imageUploaded.emit(); this.imageUploaded.emit();
this.closeModal(); this.closeModal();
}, },
@ -332,7 +331,6 @@ export class UploadImageModalComponent implements AfterViewInit, OnDestroy {
} }
}); });
// Temporäres Beispiel: // Temporäres Beispiel:
alert('Save button clicked');
this.imageUploaded.emit(); this.imageUploaded.emit();
this.closeModal(); this.closeModal();
} }