interface IPomodoro {
init(),
keyboard(),
keyboardEvents(keyEvent): void,
handleKeyboardEvent(button, keyEvent): void,
getInputId(button): string,
getInput(button): void,
startStop(): void,
timerSwitch(on): void,
timer(): void,
zero(): void,
modeSwitch(): void,
updateDisplay(): string,
formatSeconds(num): string,
reset(): void,
changeSession(value): number,
changeBreak(value): number
}
enum modeEnum {
Session = 'session',
Break = 'break'
}
enum statusEnum {
NotStarted = 0,
InProgress = 1
}
enum getInputEnum {
Start_stop = "start_stop",
Reset = "reset",
SessionIncrement = "session-increment",
SessionDecrement = "session-decrement",
BreakIncrement = "break-increment",
BreakDecrement = "break-decrement"
}
type KeyboardEventNames = "keydown" | "keyup";
class Pomodoro implements IPomodoro {
private displayTime: HTMLSpanElement = document.querySelector("#time-left");
private timerLabel: HTMLLabelElement = document.querySelector("#timer-label");
private displaySession: HTMLSpanElement = document.querySelector("#session-length");
private displayBreak: HTMLSpanElement = document.querySelector("#break-length");
private startStopButton: HTMLButtonElement = document.querySelector("#start_stop");
private resetButton: HTMLButtonElement = document.querySelector("#reset");
private buttons: NodeListOf<HTMLButtonElement> = document.querySelectorAll(".button");
private alarm: HTMLMediaElement = document.querySelector("#beep");
// zmienne
public sessionLength: number;
public breakLength: number;
private time: number;
public appStatus: statusEnum;
public mode: modeEnum;
public minutes: number;
public seconds: number;
private display: string;
private countdown;
constructor(sessionLength: number, breakLength: number, time: number, appStatus: statusEnum, mode: modeEnum, minutes: number, seconds: number) {
this.sessionLength = sessionLength;
this.breakLength = breakLength;
this.time = time;
this.appStatus = appStatus;
this.mode = mode;
this.minutes = minutes;
this.seconds = seconds;
this.display = this.updateDisplay();
this.init();
}
init() {
for (let i = 0; i < this.buttons.length; i++) {
let button = this.buttons[i];
button.addEventListener("click", (event) => {
this.getInput(button);
});
}
this.keyboard();
}
getInputId(button: HTMLButtonElement): string {
return button.id;
}
getInput(button: HTMLButtonElement): void {
switch (this.getInputId(button)) {
case getInputEnum.Start_stop:
this.startStop();
break;
case getInputEnum.Reset:
this.reset();
break;
case getInputEnum.SessionIncrement:
this.changeSession(1);
break;
case getInputEnum.SessionDecrement:
this.changeSession(-1);
break;
case getInputEnum.BreakIncrement:
this.changeBreak(1);
break;
case getInputEnum.BreakDecrement:
this.changeBreak(-1);
}
}
keyboard(): void {
this.keyboardEvents("keydown");
this.keyboardEvents("keyup");
}
keyboardEvents(keyEvent: KeyboardEventNames): void {
document.addEventListener(keyEvent, (event) => {
if (event.defaultPrevented) {
return;
}
var key = event.key || event.keyCode;
for (var i = 0; i < this.buttons.length; i++) {
let button = this.buttons[i];
if (button.dataset.key == key) {
this.handleKeyboardEvent(button, keyEvent);
}
}
});
}
handleKeyboardEvent(button: HTMLButtonElement, keyEvent): void {
if (keyEvent == "keydown") {
button.classList.add("select");
this.getInput(button);
}
if (keyEvent == "keyup") {
button.classList.remove("select");
}
}
startStop(): void {
if (this.appStatus === statusEnum.InProgress) {
this.timerSwitch(0);
} else if (this.appStatus === statusEnum.NotStarted) {
this.timerSwitch(1);
}
}
timerSwitch(on: number): void {
console.log(on);
if (this.minutes == 0 && this.seconds == 0) {
return;
}
if (on == 1) {
this.countdown = setInterval(() => { this.timer() }, 1000);
this.appStatus = statusEnum.InProgress;
this.startStopButton.innerText = "Stop";
this.startStopButton.classList.remove('start');
this.startStopButton.classList.add('stop');
console.log("Timer started");
} else {
clearInterval(this.countdown);
this.appStatus = statusEnum.NotStarted;
this.startStopButton.innerText = "Start";
this.startStopButton.classList.remove('stop');
this.startStopButton.classList.add('start');
console.log("Timer stopped");
}
}
timer(): void {
if (this.minutes == 0 && this.seconds == 0) {
this.updateDisplay();
return this.zero();
}
if (this.minutes >= 0) {
if (this.seconds > 0) {
console.log(this.seconds);
this.seconds -= 1;
this.updateDisplay();
} else {
this.minutes -= 1;
this.seconds = 59;
this.updateDisplay();
}
}
}
zero(): void {
this.alarm.play();
this.modeSwitch();
}
modeSwitch(): void {
if (modeEnum.Session) {
console.log("Session finished");
this.timerLabel.innerText = "Break";
this.minutes = this.breakLength;
this.updateDisplay();
this.mode = modeEnum.Break;
return;
} else {
console.log("Break finished");
this.timerLabel.innerText = "Session";
this.minutes = this.sessionLength;
this.updateDisplay();
this.mode = modeEnum.Session;
return;
}
}
updateDisplay(): string {
this.display = this.minutes + ":" + this.formatSeconds(this.seconds);
this.displayTime.innerText = this.display;
console.log(this.display);
return this.display;
}
formatSeconds(num: number): string {
var str = num.toString();
if (str.length == 1) {
str = "0" + str;
}
return str;
}
reset(): void {
if (statusEnum.InProgress) {
this.timerSwitch(0);
}
this.mode = modeEnum.Session;
this.timerLabel.innerText = "Session";
this.minutes = this.sessionLength;
this.seconds = 0;
this.updateDisplay();
}
changeSession(value: number): number {
if (this.sessionLength + value > 0 && this.sessionLength + value <= 60) {
this.sessionLength += value;
if (modeEnum.Session) {
this.minutes = this.sessionLength;
this.updateDisplay();
}
this.displaySession.innerText = String(this.sessionLength);
}
return this.sessionLength;
}
changeBreak(value: number): number {
if (this.breakLength + value > 0 && this.breakLength + value <= 60) {
this.breakLength += value;
if (modeEnum.Break) {
this.minutes = this.breakLength;
this.updateDisplay();
}
this.displayBreak.innerText = String(this.breakLength);
}
return this.breakLength;
}
}
let pomodoro = new Pomodoro(25,5,0,statusEnum.NotStarted, modeEnum.Session, 25, 0);