Komponent liczący czas pracy

Cześć,

chcę w vue.js zrobić prosty timer liczący czas pracy.
Wciskamy Start / Stop. Po wciśnięciu start zapisuje się w bazie rekord z początkową datą i czasem, po kliknięciu stop rekord się aktualizuje zapisując datę i czas końca oraz przepracowany czas w sekundach.
Po kliknięciu start pojawia się też na stronie timer który odlicza przepracowany czas. Wszystko jest ok do momentu w których nie odświeżymy strony. Timer musi działać niezależnie w tle i np kiedy "nastuka " nam że pracujemy 30 min i przejdziemy do innej zakładki to nadal powinien wyświetlać odpowiednio przepracowany czas.

Chyba każdy rozumie o co mi chodzi, jak to poprawnie wykonać?

1. W momencie kliknięcia "start" zapisz aktualną godzinę (lub timestamp)
2. W momencie kliknięcia "stop", zapisz teraz aktualną godzinę (lub timestamp)
3. Odejmij je od siebie, różnica będzie przepracowanym czasem.

Dodatkowo możesz w między czasie pokazywać różnicę startu z aktualnym czasem, żeby pokazać progress.

@Riddle: To co napisałem w punktach w zasadzie mam gotowe. Moje pytanie dotyczy tego jak zrobić timer (dodający sekundy pracy) na górze strony. Czyli zrobię sobie jakiś komponent Vue, umieszczę go na górnym pasku aplikacji (tak aby był stale widoczny) kliknę start i zaczynają się dodawać sekundy (w tle wykona się punkt 1 z tego co napisałeś). Teraz po jakimś czasie zmieniam zakładkę więc strona się odśwież (czas pracy nadal się liczy) jednak przechodząc do nowej zakładki timer na górze powinien nadal liczyć czas i jeśli przepracowano powiedzmy 30 min, zmieniono zakładkę/odświeżono stronę timer powinien kontynuować od tego moment. W zasadzie całe moje pytanie dotyczy ogarnięcia timera który będzie wyświetlał ile czasu minęło od kliknięcia przycisku Start no i liczył/dodawał kolejne sekundy

Ale po co to potrzebujesz?

Wystarczy że odczytasz godzinę startu i końca, i weźmiesz różnice. A jeśli się jeszcze nie skończyło to godzinę startu i godzinę aktualną.

Potrzebuję to wyświetlić. Chodzi mi właśnie o to jak ma wyglądać taki komponent vue gdzie mam obecną godziną i godzinę początkową. Biorę godzinę początkową i mam odliczanie

michalos25 napisał(a):

Potrzebuję to wyświetlić. Chodzi mi właśnie o to jak ma wyglądać taki komponent vue gdzie mam obecną godziną i godzinę początkową. Biorę godzinę początkową i mam odliczanie

No ale co jest trudnego w tym żeby pokazać to co Ci napisałem?

<template>
  Minęło {{elapsedTime}} milisekund
</template>

A w komponencie Vue:

const start = new Date().getTime();

setInterval(() => {
  const currentDate = new Date().getTime();
  this.state.elapsedTime = currentDate - start;
}, 1000);