Pomodoro v3

 avatar
unknown
typescript
3 years ago
7.4 kB
3
Indexable
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);