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

Compare commits

base: aknuth:303ba7c4b2e26ce5711d3903fa729495ce4eb27d
Branches Tags
aknuth:master
aknuth:nonx
aknuth:srs
..
compare: aknuth:ddac7102feb64ba31df06debb06eb188f3ce28f0
Branches Tags
aknuth:master
aknuth:nonx
aknuth:srs

No commits in common. "303ba7c4b2e26ce5711d3903fa729495ce4eb27d" and "ddac7102feb64ba31df06debb06eb188f3ce28f0" have entirely different histories.
303ba7c4b2 ... ddac7102fe

3 changed files with 35 additions and 60 deletions
Show Stats Expand all files Collapse all files

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

@ -1,6 +1,7 @@
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({
@ -17,5 +18,6 @@ import { DeckListComponent } from './deck-list.component';
export class AppComponent {
title = 'vocabulary-training';
ngOnInit(): void {
initFlowbite();
}
}

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

@ -1,9 +1,16 @@
<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 *ngIf="!trainingsDeck" class="flex flex-col md:flex-row gap-4 mx-auto max-w-5xl">
<div class="flex flex-col md:flex-row gap-4 mx-auto max-w-5xl">
<!-- Left column: List of decks -->
<div class="w-auto">
<div class="w-full md:w-1/3">
<div class="bg-white shadow rounded-lg p-4">
<div class="flex">
<h2 class="text-xl font-semibold mb-4">Decks</h2>
@ -16,14 +23,13 @@
</div>
<div class="space-y-2">
<div *ngFor="let deck of decks"
class="flex justify-between items-center p-2 rounded hover:bg-gray-300 cursor-pointer"
[class.bg-blue-200]="isDeckActive(deck)"
(click)="toggleDeckExpansion(deck)">
class="flex justify-between items-center p-2 rounded hover:bg-gray-100 cursor-pointer"
[class.bg-blue-100]="isDeckActive(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 class="text-gray-500 hover:text-gray-700 focus:outline-none">
<button (click)="toggleDeckExpansion(deck)" 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>
@ -37,8 +43,8 @@
</div>
<!-- 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-gray-300">
<div class="w-full md:w-2/3" *ngIf="activeDeck">
<div class="bg-white shadow rounded-lg p-6 border-dashed border-2 border-indigo-600">
<!-- Deck header -->
<div class="flex justify-between items-center mb-4">
<div class="flex items-center space-x-2">
@ -110,7 +116,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="trainingsDeck" [deck]="trainingsDeck" (close)="closeTraining()"></app-training>
<app-training *ngIf="selectedDeck" [deck]="selectedDeck" (close)="closeTraining()"></app-training>
<!-- MoveImageModalComponent -->
<app-move-image-modal
*ngIf="imageToMove"
@ -133,7 +139,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" [value]="deckToRename?.name" />
<input type="text" id="newDeckNameInput" class="w-full p-2 border rounded mb-2" />
<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>

67
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[] = [];
trainingsDeck: Deck | null = null;
selectedDeck: Deck | null = null;
activeDeck: Deck | null = null;
private deckToDelete: string | null = null;
deckToRename: Deck | null = null;
private deckToRename: Deck | null = null;
@ViewChild(CreateDeckModalComponent) createDeckModal!: CreateDeckModalComponent;
@ViewChild(UploadImageModalComponent) uploadImageModal!: UploadImageModalComponent;
@ -79,7 +79,8 @@ export class DeckListComponent implements OnInit {
this.activeDeck = deck;
}
// Method to open the delete confirmation popover
// Methode zum Öffnen des Lösch-Popovers
openDeletePopover(deckName: string): void {
this.deckToDelete = deckName;
const deletePopover = document.getElementById('deletePopover');
@ -87,32 +88,29 @@ 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;
}
// Method to confirm the deletion of a deck
// Methode zum Bestätigen des Löschens
confirmDelete(): void {
if (this.deckToDelete) {
this.deckService.deleteDeck(this.deckToDelete).subscribe({
next: () => {
this.loadDecks();
this.closeDeletePopover();
this.activeDeck = this.decks[0];
},
error: (err) => console.error('Error deleting deck', err),
});
}
}
// Method to cancel the deletion of a deck
// Methode zum Abbrechen des Löschens
cancelDelete(): void {
this.closeDeletePopover();
}
// Method to close the delete confirmation popover
// Methode zum Schließen des Lösch-Popovers
closeDeletePopover(): void {
const deletePopover = document.getElementById('deletePopover');
if (deletePopover) {
@ -121,24 +119,16 @@ export class DeckListComponent implements OnInit {
this.deckToDelete = null;
}
// Method to open the rename popover
// Methode zum Öffnen des Umbenennungs-Popovers
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);
}
}
// Method to confirm the renaming of a deck
// Methode zum Bestätigen des Umbenennens
confirmRename(): void {
const newDeckNameInput = document.getElementById('newDeckNameInput') as HTMLInputElement;
if (newDeckNameInput && this.deckToRename) {
@ -146,11 +136,7 @@ export class DeckListComponent implements OnInit {
if (newDeckName && newDeckName !== this.deckToRename.name) {
this.deckService.renameDeck(this.deckToRename.name, newDeckName).subscribe({
next: () => {
// 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.loadDecks();
this.closeRenamePopover();
},
error: (err) => console.error('Error renaming deck', err),
@ -159,12 +145,12 @@ export class DeckListComponent implements OnInit {
}
}
// Method to cancel the renaming of a deck
// Methode zum Abbrechen des Umbenennens
cancelRename(): void {
this.closeRenamePopover();
}
// Method to close the rename popover
// Methode zum Schließen des Umbenennungs-Popovers
closeRenamePopover(): void {
const renamePopover = document.getElementById('renamePopover');
if (renamePopover) {
@ -172,8 +158,6 @@ 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;
@ -184,7 +168,6 @@ 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) {
@ -195,7 +178,6 @@ 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;
@ -209,7 +191,6 @@ 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;
@ -233,23 +214,19 @@ export class DeckListComponent implements OnInit {
});
}
// Method to open the training component
openTraining(deck: Deck): void {
this.trainingsDeck = deck;
this.selectedDeck = deck;
}
// Method to close the training component
closeTraining(): void {
this.trainingsDeck = null;
this.selectedDeck = 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;
@ -261,7 +238,7 @@ export class DeckListComponent implements OnInit {
return this.expandedDecks.has(deckName);
}
// Method to load expanded decks from sessionStorage
// Load expanded decks from sessionStorage
loadExpandedDecks(): void {
const stored = sessionStorage.getItem('expandedDecks');
if (stored) {
@ -277,13 +254,13 @@ export class DeckListComponent implements OnInit {
}
}
// Method to save expanded decks to sessionStorage
// Save expanded decks to sessionStorage
saveExpandedDecks(): void {
const expandedArray = Array.from(this.expandedDecks);
sessionStorage.setItem('expandedDecks', JSON.stringify(expandedArray));
}
// Method to open the upload modal
// Function to open the upload modal (can be triggered by a button)
openUploadModal(): void {
this.uploadImageModal.open();
}
@ -300,17 +277,7 @@ 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