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

bugfixes

This commit is contained in:
Andreas Knuth 2025-01-16 18:26:12 +00:00
parent 0ea427b265
commit 303ba7c4b2
3 changed files with 57 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app.component.ts
View File

@ -1,7 +1,6 @@
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { initFlowbite } from 'flowbite';
import { DeckListComponent } from './deck-list.component';
@Component({
@ -18,6 +17,5 @@ import { DeckListComponent } from './deck-list.component';
export class AppComponent {
title = 'vocabulary-training';
ngOnInit(): void {
initFlowbite();
}
}

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

@ -1,13 +1,6 @@
<div class="flex flex-col">
<!-- Button to create a new deck -->
<!-- <div class="flex justify-end mb-4">
<button (click)="openCreateDeckModal()" class="bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600">
Create New Deck
</button>
</div> -->
<!-- Two-column layout -->
<div class="flex flex-col md:flex-row gap-4 mx-auto max-w-5xl">
<div *ngIf="!trainingsDeck" class="flex flex-col md:flex-row gap-4 mx-auto max-w-5xl">
<!-- Left column: List of decks -->
<div class="w-auto">
@ -23,13 +16,14 @@
</div>
<div class="space-y-2">
<div *ngFor="let deck of decks"
class="flex justify-between items-center p-2 rounded hover:bg-gray-100 cursor-pointer"
[class.bg-blue-100]="isDeckActive(deck)">
class="flex justify-between items-center p-2 rounded hover:bg-gray-300 cursor-pointer"
[class.bg-blue-200]="isDeckActive(deck)"
(click)="toggleDeckExpansion(deck)">
<div class="flex items-center space-x-2 whitespace-nowrap">
<h3 class="font-medium">{{ deck.name }}</h3>
<span class="text-gray-600">({{ deck.images.length }})</span>
</div>
<button (click)="toggleDeckExpansion(deck)" class="text-gray-500 hover:text-gray-700 focus:outline-none">
<button class="text-gray-500 hover:text-gray-700 focus:outline-none">
<svg *ngIf="!isDeckActive(deck)" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-0 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
@ -44,7 +38,7 @@
<!-- Right column: Active deck details -->
<div class="w-auto min-w-96" *ngIf="activeDeck">
<div class="bg-white shadow rounded-lg p-6 border-dashed border-2 border-indigo-600">
<div class="bg-white shadow rounded-lg p-6 border-dashed border-2 border-gray-300">
<!-- Deck header -->
<div class="flex justify-between items-center mb-4">
<div class="flex items-center space-x-2">
@ -116,7 +110,7 @@
<app-upload-image-modal (imageUploaded)="onImageUploaded($event)"></app-upload-image-modal>
<app-edit-image-modal *ngIf="imageData" [deckName]="currentUploadDeckName" [imageData]="imageData" (imageSaved)="onImageSaved()" (closed)="onClosed()"></app-edit-image-modal>
<!-- TrainingComponent -->
<app-training *ngIf="selectedDeck" [deck]="selectedDeck" (close)="closeTraining()"></app-training>
<app-training *ngIf="trainingsDeck" [deck]="trainingsDeck" (close)="closeTraining()"></app-training>
<!-- MoveImageModalComponent -->
<app-move-image-modal
*ngIf="imageToMove"
@ -139,7 +133,7 @@
<!-- Popover für die Eingabe des neuen Decknamens -->
<div id="renamePopover" popover="manual" class="popover">
<p>Enter the new name for the deck:</p>
<input type="text" id="newDeckNameInput" class="w-full p-2 border rounded mb-2" />
<input type="text" id="newDeckNameInput" class="w-full p-2 border rounded mb-2" [value]="deckToRename?.name" />
<div class="flex justify-end space-x-2">
<button (click)="confirmRename()" class="bg-blue-500 text-white px-4 py-2 rounded">Rename</button>
<button (click)="cancelRename()" class="bg-gray-500 text-white px-4 py-2 rounded">Cancel</button>

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

@ -34,10 +34,10 @@ import { MoveImageModalComponent } from './move-image-modal/move-image-modal.com
})
export class DeckListComponent implements OnInit {
decks: Deck[] = [];
selectedDeck: Deck | null = null;
trainingsDeck: Deck | null = null;
activeDeck: Deck | null = null;
private deckToDelete: string | null = null;
private deckToRename: Deck | null = null;
deckToRename: Deck | null = null;
@ViewChild(CreateDeckModalComponent) createDeckModal!: CreateDeckModalComponent;
@ViewChild(UploadImageModalComponent) uploadImageModal!: UploadImageModalComponent;
@ -79,8 +79,7 @@ export class DeckListComponent implements OnInit {
this.activeDeck = deck;
}
// Methode zum Öffnen des Lösch-Popovers
// Method to open the delete confirmation popover
openDeletePopover(deckName: string): void {
this.deckToDelete = deckName;
const deletePopover = document.getElementById('deletePopover');
@ -88,11 +87,13 @@ export class DeckListComponent implements OnInit {
deletePopover.showPopover();
}
}
// Method to check if a deck is active
isDeckActive(deck: Deck): boolean {
return this.activeDeck?.name === deck.name;
}
// Methode zum Bestätigen des Löschens
// Method to confirm the deletion of a deck
confirmDelete(): void {
if (this.deckToDelete) {
this.deckService.deleteDeck(this.deckToDelete).subscribe({
@ -106,12 +107,12 @@ export class DeckListComponent implements OnInit {
}
}
// Methode zum Abbrechen des Löschens
// Method to cancel the deletion of a deck
cancelDelete(): void {
this.closeDeletePopover();
}
// Methode zum Schließen des Lösch-Popovers
// Method to close the delete confirmation popover
closeDeletePopover(): void {
const deletePopover = document.getElementById('deletePopover');
if (deletePopover) {
@ -120,16 +121,24 @@ export class DeckListComponent implements OnInit {
this.deckToDelete = null;
}
// Methode zum Öffnen des Umbenennungs-Popovers
// Method to open the rename popover
openRenamePopover(deck: Deck): void {
this.deckToRename = deck;
const renamePopover = document.getElementById('renamePopover');
if (renamePopover) {
renamePopover.showPopover();
// Set the input value to the current deck name and select it
setTimeout(() => {
const newDeckNameInput = document.getElementById('newDeckNameInput') as HTMLInputElement;
if (newDeckNameInput) {
newDeckNameInput.value = deck.name;
newDeckNameInput.select();
}
}, 0);
}
}
// Methode zum Bestätigen des Umbenennens
// Method to confirm the renaming of a deck
confirmRename(): void {
const newDeckNameInput = document.getElementById('newDeckNameInput') as HTMLInputElement;
if (newDeckNameInput && this.deckToRename) {
@ -137,7 +146,11 @@ export class DeckListComponent implements OnInit {
if (newDeckName && newDeckName !== this.deckToRename.name) {
this.deckService.renameDeck(this.deckToRename.name, newDeckName).subscribe({
next: () => {
this.loadDecks();
// Aktualisiere den Namen im activeDeck, falls dieser der umbenannte Deck ist
if (this.activeDeck && this.activeDeck.name === this.deckToRename?.name) {
this.activeDeck.name = newDeckName;
}
this.loadDecks(); // Lade die Decks neu, um die Liste zu aktualisieren
this.closeRenamePopover();
},
error: (err) => console.error('Error renaming deck', err),
@ -146,12 +159,12 @@ export class DeckListComponent implements OnInit {
}
}
// Methode zum Abbrechen des Umbenennens
// Method to cancel the renaming of a deck
cancelRename(): void {
this.closeRenamePopover();
}
// Methode zum Schließen des Umbenennungs-Popovers
// Method to close the rename popover
closeRenamePopover(): void {
const renamePopover = document.getElementById('renamePopover');
if (renamePopover) {
@ -159,6 +172,8 @@ export class DeckListComponent implements OnInit {
}
this.deckToRename = null;
}
// Method to delete a deck
deleteDeck(deckName: string): void {
if (!confirm(`Are you sure you want to delete the deck "${deckName}"?`)) {
return;
@ -169,6 +184,7 @@ export class DeckListComponent implements OnInit {
});
}
// Method to rename a deck
renameDeck(deck: Deck): void {
const newDeckName = prompt('Enter the new name for the deck:', deck.name);
if (newDeckName && newDeckName !== deck.name) {
@ -179,6 +195,7 @@ export class DeckListComponent implements OnInit {
}
}
// Method to delete an image from a deck
deleteImage(deck: Deck, image: DeckImage): void {
if (!confirm(`Are you sure you want to delete the image "${image.name}"?`)) {
return;
@ -192,6 +209,7 @@ export class DeckListComponent implements OnInit {
});
}
// Method to edit an image in a deck
editImage(deck: Deck, image: DeckImage): void {
let imageSrc = null;
this.currentUploadDeckName = deck.name;
@ -215,19 +233,23 @@ export class DeckListComponent implements OnInit {
});
}
// Method to open the training component
openTraining(deck: Deck): void {
this.selectedDeck = deck;
this.trainingsDeck = deck;
}
// Method to close the training component
closeTraining(): void {
this.selectedDeck = null;
this.trainingsDeck = null;
this.loadDecks();
}
// Method to open the create deck modal
openCreateDeckModal(): void {
this.createDeckModal.open();
}
// Method to open the upload image modal
openUploadImageModal(deckName: string): void {
this.currentUploadDeckName = deckName;
this.uploadImageModal.deckName = deckName;
@ -239,7 +261,7 @@ export class DeckListComponent implements OnInit {
return this.expandedDecks.has(deckName);
}
// Load expanded decks from sessionStorage
// Method to load expanded decks from sessionStorage
loadExpandedDecks(): void {
const stored = sessionStorage.getItem('expandedDecks');
if (stored) {
@ -255,13 +277,13 @@ export class DeckListComponent implements OnInit {
}
}
// Save expanded decks to sessionStorage
// Method to save expanded decks to sessionStorage
saveExpandedDecks(): void {
const expandedArray = Array.from(this.expandedDecks);
sessionStorage.setItem('expandedDecks', JSON.stringify(expandedArray));
}
// Function to open the upload modal (can be triggered by a button)
// Method to open the upload modal
openUploadModal(): void {
this.uploadImageModal.open();
}
@ -278,7 +300,17 @@ export class DeckListComponent implements OnInit {
async onImageSaved() {
// Handle saving the image data, e.g., update the list of images
this.imageData = null;
// Lade die Decks neu
this.decks = await firstValueFrom(this.deckService.getDecks());
// Aktualisiere den activeDeck, falls dieser der aktuelle Deck ist
if (this.activeDeck) {
const updatedDeck = this.decks.find(deck => deck.name === this.activeDeck?.name);
if (updatedDeck) {
this.activeDeck = updatedDeck;
}
}
}
// Method to open the MoveImageModal