isGraduated eingebaut SRS Berechnung umgebaut
This commit is contained in:
parent
05bfd4f3eb
commit
26088f58c9
|
|
@ -16,18 +16,18 @@
|
|||
<h2 class="text-xl font-semibold">{{ deck.name }}</h2>
|
||||
<span class="text-gray-600">({{ deck.images.length }} Bilder)</span>
|
||||
</div>
|
||||
<button (click)="toggleDeckExpansion(deck.id)" class="text-gray-500 hover:text-gray-700 focus:outline-none" title="Deck ein-/ausklappen">
|
||||
<svg *ngIf="!isDeckExpanded(deck.id)" 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">
|
||||
<button (click)="toggleDeckExpansion(deck.name)" class="text-gray-500 hover:text-gray-700 focus:outline-none" title="Deck ein-/ausklappen">
|
||||
<svg *ngIf="!isDeckExpanded(deck.name)" 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="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
<svg *ngIf="isDeckExpanded(deck.id)" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-180 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<svg *ngIf="isDeckExpanded(deck.name)" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-180 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Bildliste und Action-Buttons nur anzeigen, wenn das Deck erweitert ist und kein Training aktiv ist -->
|
||||
<ng-container *ngIf="isDeckExpanded(deck.id) && !selectedDeck">
|
||||
<ng-container *ngIf="isDeckExpanded(deck.name) && !selectedDeck">
|
||||
<!-- Liste der Bilder mit Anzahl der Boxen und Icons -->
|
||||
<ul class="mb-4">
|
||||
<li *ngFor="let image of deck.images" class="flex justify-between items-center py-2 border-b last:border-b-0">
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ export class DeckListComponent implements OnInit {
|
|||
currentUploadDeckName: string = '';
|
||||
|
||||
// Set zur Verfolgung erweiterter Decks
|
||||
expandedDecks: Set<number> = new Set<number>();
|
||||
expandedDecks: Set<string> = new Set<string>();
|
||||
|
||||
// State für das Verschieben von Bildern
|
||||
imageToMove: { image: DeckImage, sourceDeck: Deck } | null = null;
|
||||
|
|
@ -122,18 +122,18 @@ export class DeckListComponent implements OnInit {
|
|||
}
|
||||
|
||||
// Methode zum Umschalten der Deck-Erweiterung
|
||||
toggleDeckExpansion(deckId: number): void {
|
||||
if (this.expandedDecks.has(deckId)) {
|
||||
this.expandedDecks.delete(deckId);
|
||||
toggleDeckExpansion(deckName: string): void {
|
||||
if (this.expandedDecks.has(deckName)) {
|
||||
this.expandedDecks.delete(deckName);
|
||||
} else {
|
||||
this.expandedDecks.add(deckId);
|
||||
this.expandedDecks.add(deckName);
|
||||
}
|
||||
this.saveExpandedDecks();
|
||||
}
|
||||
|
||||
// Methode zur Überprüfung, ob ein Deck erweitert ist
|
||||
isDeckExpanded(deckId: number): boolean {
|
||||
return this.expandedDecks.has(deckId);
|
||||
isDeckExpanded(deckName: string): boolean {
|
||||
return this.expandedDecks.has(deckName);
|
||||
}
|
||||
|
||||
// Laden der erweiterten Decks aus dem sessionStorage
|
||||
|
|
@ -141,14 +141,14 @@ export class DeckListComponent implements OnInit {
|
|||
const stored = sessionStorage.getItem('expandedDecks');
|
||||
if (stored) {
|
||||
try {
|
||||
const parsed: number[] = JSON.parse(stored);
|
||||
this.expandedDecks = new Set<number>(parsed);
|
||||
const parsed: string[] = JSON.parse(stored);
|
||||
this.expandedDecks = new Set<string>(parsed);
|
||||
} catch (e) {
|
||||
console.error('Fehler beim Parsen der erweiterten Decks aus sessionStorage', e);
|
||||
}
|
||||
} else {
|
||||
// Wenn keine Daten gespeichert sind, alle Decks standardmäßig nicht erweitern
|
||||
this.expandedDecks = new Set<number>();
|
||||
this.expandedDecks = new Set<string>();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import { HttpClient } from '@angular/common/http';
|
|||
import { map, Observable, switchMap } from 'rxjs';
|
||||
|
||||
export interface Deck {
|
||||
id?:number;
|
||||
name: string;
|
||||
images: DeckImage[];
|
||||
}
|
||||
|
|
@ -26,6 +25,7 @@ export interface Box {
|
|||
factor?: number;
|
||||
reps?: number;
|
||||
lapses?: number;
|
||||
isGraduated?:boolean;
|
||||
}
|
||||
|
||||
export interface BackendBox {
|
||||
|
|
@ -90,7 +90,8 @@ export class DeckService {
|
|||
ivl:image.ivl,
|
||||
factor:image.factor,
|
||||
reps:image.reps,
|
||||
lapses:image.lapses
|
||||
lapses:image.lapses,
|
||||
isGraduated:image.isGraduated?true:false
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,19 @@ import { Deck, DeckImage, DeckService, Box } from '../deck.service';
|
|||
import { CommonModule } from '@angular/common';
|
||||
import { lastValueFrom } from 'rxjs';
|
||||
|
||||
const LEARNING_STEPS = {
|
||||
AGAIN: 1, // 1 minute
|
||||
GOOD: 10, // 10 minutes
|
||||
GRADUATION: 1440 // 1 day (in minutes)
|
||||
};
|
||||
|
||||
const FACTOR_CHANGES = {
|
||||
AGAIN: 0.85, // Reduce factor by 15%
|
||||
EASY: 1.15, // Increase factor by 15%
|
||||
MIN: 1.3, // Minimum factor allowed
|
||||
MAX: 2.9 // Maximum factor allowed
|
||||
};
|
||||
const EASY_INTERVAL = 4 * 1440; // 4 days in minutes
|
||||
@Component({
|
||||
selector: 'app-training',
|
||||
templateUrl: './training.component.html',
|
||||
|
|
@ -123,7 +136,7 @@ export class TrainingComponent implements OnInit {
|
|||
this.boxesToReview.forEach((box, index) => {
|
||||
ctx.beginPath();
|
||||
ctx.rect(box.x1, box.y1, box.x2 - box.x1, box.y2 - box.y1);
|
||||
if (this.currentBoxIndex === index && this.isShowingBox) {
|
||||
if (this.currentBoxIndex === index && this.isShowingBox || (box.due && box.due-this.getTodayInDays()>0)) {
|
||||
// Box ist aktuell enthüllt, keine Überlagerung
|
||||
return;
|
||||
} else if (this.currentBoxIndex === index && !this.isShowingBox) {
|
||||
|
|
@ -226,39 +239,11 @@ export class TrainingComponent implements OnInit {
|
|||
const box = this.boxesToReview[this.currentBoxIndex];
|
||||
const today = this.getTodayInDays();
|
||||
|
||||
let newIvl = box.ivl || 0;
|
||||
let newFactor = box.factor || 2.5;
|
||||
let newReps = box.reps || 0;
|
||||
let newLapses = box.lapses || 0;
|
||||
|
||||
switch(action) {
|
||||
case 'again':
|
||||
newIvl = 1 / 1440; // 1 Minute in Tagen
|
||||
newReps = 0;
|
||||
newLapses += 1;
|
||||
break;
|
||||
case 'good':
|
||||
if (newReps === 0) {
|
||||
newIvl = 10 / 1440; // 10 Minuten in Tagen
|
||||
// newIvl = 1; // nächste Wiederholung am nächsten Tag
|
||||
} else {
|
||||
newIvl = newIvl * newFactor;
|
||||
}
|
||||
newReps += 1;
|
||||
break;
|
||||
case 'easy':
|
||||
if (newReps === 0) {
|
||||
newIvl = 4; // nächste Wiederholung in 4 Tagen
|
||||
} else {
|
||||
newIvl = newIvl * newFactor * 1.3; // leicht erhöhtes Intervall
|
||||
}
|
||||
newReps += 1;
|
||||
newFactor = newFactor * 1.15; // optional: Faktor leicht erhöhen
|
||||
break;
|
||||
}
|
||||
// Berechne das neue Intervall und eventuell den neuen Faktor
|
||||
const { newIvl, newFactor, newReps, newLapses, newIsGraduated } = this.calculateNewInterval(box, action);
|
||||
|
||||
// Aktualisiere das Fälligkeitsdatum
|
||||
const nextDue = today + Math.floor(newIvl);
|
||||
const nextDue = today + Math.floor(newIvl/1440);
|
||||
|
||||
// Aktualisiere das Box-Objekt
|
||||
box.ivl = newIvl;
|
||||
|
|
@ -266,6 +251,7 @@ export class TrainingComponent implements OnInit {
|
|||
box.reps = newReps;
|
||||
box.lapses = newLapses;
|
||||
box.due = nextDue;
|
||||
box.isGraduated = newIsGraduated
|
||||
|
||||
// Sende das Update an das Backend
|
||||
try {
|
||||
|
|
@ -276,6 +262,94 @@ export class TrainingComponent implements OnInit {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Berechnet das neue Intervall, den Faktor, die Wiederholungen und die Lapses basierend auf der Aktion.
|
||||
* @param box Die aktuelle Box
|
||||
* @param action Die Aktion ('again', 'good', 'easy')
|
||||
* @returns Ein Objekt mit den neuen Werten für ivl, factor, reps und lapses
|
||||
*/
|
||||
calculateNewInterval(box: Box, action: 'again' | 'good' | 'easy'): { newIvl: number, newFactor: number, newReps: number, newLapses: number, newIsGraduated: boolean } {
|
||||
let newIvl = box.ivl || 0;
|
||||
let newFactor = box.factor || 2.5;
|
||||
let newReps = box.reps || 0;
|
||||
let newLapses = box.lapses || 0;
|
||||
let newIsGraduated = box.isGraduated || false
|
||||
|
||||
if (action === 'again') {
|
||||
newLapses++;
|
||||
newReps = 0;
|
||||
newIvl = LEARNING_STEPS.AGAIN;
|
||||
newIsGraduated = false;
|
||||
|
||||
// Reduce factor but not below minimum
|
||||
newFactor = Math.max(
|
||||
FACTOR_CHANGES.MIN,
|
||||
newFactor * FACTOR_CHANGES.AGAIN
|
||||
);
|
||||
|
||||
return { newIvl, newFactor, newReps, newLapses, newIsGraduated };
|
||||
}
|
||||
|
||||
if (action === 'easy') {
|
||||
newReps++;
|
||||
newIsGraduated = true;
|
||||
newIvl = EASY_INTERVAL;
|
||||
|
||||
// Increase factor but not above maximum
|
||||
newFactor = Math.min(
|
||||
FACTOR_CHANGES.MAX,
|
||||
newFactor * FACTOR_CHANGES.EASY
|
||||
);
|
||||
|
||||
return { newIvl, newFactor, newReps, newLapses, newIsGraduated };;
|
||||
}
|
||||
|
||||
// Handle 'good' action
|
||||
newReps++;
|
||||
|
||||
if (!newIsGraduated) {
|
||||
// Card is in learning phase
|
||||
if (newReps === 1) {
|
||||
newIvl = LEARNING_STEPS.GOOD;
|
||||
} else {
|
||||
// Graduate the card
|
||||
newIsGraduated = true;
|
||||
newIvl = LEARNING_STEPS.GRADUATION;
|
||||
}
|
||||
} else {
|
||||
// Card is in review phase, apply space repetition
|
||||
newIvl = Math.round(newIvl * newFactor);
|
||||
}
|
||||
|
||||
return { newIvl, newFactor, newReps, newLapses, newIsGraduated };;
|
||||
}
|
||||
|
||||
/**
|
||||
* Berechnet das nächste Intervall basierend auf der Aktion und gibt es als String zurück.
|
||||
* @param box Die aktuelle Box
|
||||
* @param action Die Aktion ('again', 'good', 'easy')
|
||||
* @returns Das nächste Intervall als String (z.B. "10 min", "2 d")
|
||||
*/
|
||||
getNextInterval(box: Box | null, action: 'again' | 'good' | 'easy'): string {
|
||||
if (!box)
|
||||
return '';
|
||||
|
||||
const { newIvl } = this.calculateNewInterval(box, action);
|
||||
|
||||
return this.formatInterval(newIvl);
|
||||
}
|
||||
|
||||
/**
|
||||
* Formatiert das Intervall als String, entweder in Minuten oder Tagen.
|
||||
* @param ivl Das Intervall in Tagen
|
||||
* @returns Das formatierte Intervall als String
|
||||
*/
|
||||
formatInterval(minutes: number): string {
|
||||
if (minutes < 60) return `${minutes}min`;
|
||||
if (minutes < 1440) return `${Math.round(minutes/60)}h`;
|
||||
return `${Math.round(minutes/1440)}d`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Deckt die aktuelle Box wieder auf (verdeckt sie erneut).
|
||||
*/
|
||||
|
|
@ -339,58 +413,6 @@ export class TrainingComponent implements OnInit {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Berechnet das nächste Intervall basierend auf der Aktion und gibt es als String zurück.
|
||||
* @param box Die aktuelle Box
|
||||
* @param action Die Aktion ('again', 'good', 'easy')
|
||||
* @returns Das nächste Intervall als String (z.B. "10 min", "2 d")
|
||||
*/
|
||||
getNextInterval(box: Box | null, action: 'again' | 'good' | 'easy'): string {
|
||||
if (!box)
|
||||
return '';
|
||||
|
||||
let ivl = box.ivl || 0;
|
||||
let factor = box.factor || 2.5;
|
||||
let reps = box.reps || 0;
|
||||
|
||||
switch(action) {
|
||||
case 'again':
|
||||
ivl = 1 / 1440; // 1 Minuten in Tagen
|
||||
break;
|
||||
case 'good':
|
||||
if (reps === 0) {
|
||||
ivl = 10 / 1440; // 10 Minuten in Tagen
|
||||
} else {
|
||||
ivl = ivl * factor;
|
||||
}
|
||||
break;
|
||||
case 'easy':
|
||||
if (reps === 0) {
|
||||
ivl = 4; // 4 Tage
|
||||
} else {
|
||||
ivl = ivl * factor * 1.3;
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
return this.formatInterval(ivl);
|
||||
}
|
||||
|
||||
/**
|
||||
* Formatiert das Intervall als String, entweder in Minuten oder Tagen.
|
||||
* @param ivl Das Intervall in Tagen
|
||||
* @returns Das formatierte Intervall als String
|
||||
*/
|
||||
formatInterval(ivl: number): string {
|
||||
if (ivl < 1) {
|
||||
const minutes = Math.round(ivl * 1440);
|
||||
return `${minutes} min`;
|
||||
} else {
|
||||
const days = Math.floor(ivl);
|
||||
return `${days} d`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gibt den Fortschritt des Trainings an, z.B. "Bild 2 von 5".
|
||||
*/
|
||||
|
|
|
|||
Loading…
Reference in New Issue