How to reset timer I’ve created in Angular on click?

I’m creating a small app which keeps track of what activity I’ve done in a certain timespan once I write down said activity inside of an input field, once I click “OK” it should appear in a list.

I’m stuck on how I should proceed to reset the timer once I click the “OK” button, so basically what I should add inside the “resetTimer()” function which is supposed to trigger each time I add a task in a list.

HTML:

<div class="modalbox" [class.active]="modalboxActive">
  <div class="modal">
    <p>What did you do?</p>

    <input type="text" [(ngModel)]="activity.name" />
    <button (click)="addTask()" [disabled]="activity.name === ''">OK</button>
  </div>
</div>
<div class="boxSuper">
  <div class="boxLeft">
    <div class="containerUp">
      <button id="start" (click)="startTimer()">START</button>
      <button id="pause" (click)="pauseTimer()">PAUSE</button>
      <button id="stop" (click)="stopTimer()">STOP</button>
    </div>
    <div class="containerDown">
      <p>{{ display }}</p>
    </div>
  </div>
  <div class="boxRight">
    <div class="containerLeft"></div>
    <div class="containerRight">
      <ul class="listElement" *ngFor="let item of tasks">
        <li>
          Activity:
          <span>{{ item.name }}</span>
          Length:
          <span>{{ item.length }}</span>
        </li>
      </ul>
    </div>
  </div>
</div>

TS:

import { importExpr } from '@angular/compiler/src/output/output_ast';
import { Component, OnInit } from '@angular/core';
import { timer } from 'rxjs';
import { Activity } from '../activity';
import { Result } from '../result';

@Component({
  selector: 'app-timer',
  templateUrl: './timer.component.html',
  styleUrls: ['./timer.component.css'],
})
export class TimerComponent implements OnInit {
  ngOnInit() {}
  time: number = 0;
  display: string | undefined;
  interval: any;
  modalboxActive = false;

  activity: Activity = {
    name: '',
  };

  tasks: Result[] = [];

  addTask() {
    var el: Result = {
      name: this.activity.name,
      end: '',
      start: '',
      length: this.display,
    };

    this.tasks.push(el);
    this.activity.name = '';
    this.modalboxActive = false;
    this.resetTimer();
  }

  resetTimer() {
    console.log('reset');
  }

  startTimer() {
    console.log('go');
    this.interval = setInterval(() => {
      if (this.time === 0) {
        this.time++;
      } else {
        this.time++;
      }
      this.display = this.transform(this.time);
    }, 1000);
  }
  transform(value: number): string {
    var sec_num = value;
    var hours = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - hours * 3600) / 60);
    var seconds = sec_num - hours * 3600 - minutes * 60;
    return hours + ':' + minutes + ':' + seconds;
  }
  pauseTimer() {
    clearInterval(this.interval);
  }
  stopTimer() {
    this.modalboxActive = true;
    clearInterval(this.interval);
    console.log('show');
  }
}

Result interface:

export interface Result {
  start: string | undefined;
  end: string | undefined;
  length: string | undefined;
  name: string | undefined;
}

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

If you are trying to just reset it back to 0, all you would need to do is:

resetTimer(){
   this.time = 0;
}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0