dpfens / stopwatch Goto Github PK
View Code? Open in Web Editor NEWA more functional stopwatch for Javascript
Home Page: https://dpfens.github.io/stopwatch
A more functional stopwatch for Javascript
Home Page: https://dpfens.github.io/stopwatch
Allow developers to specify a type
of Split
to specify the business value of the split.
For example, in a running race, a type could be when a runner falls, reached a water station, etc.
Would be great to be able to set and clone stopwatches then start all of them at once. Would work great for sprints where you won’t have time to start a stopwatch, clone it a few times, personalise them and hit stop on each before the race finishes.
This is a good idea. I think it would be best that users can select which stopwatches they want to be able to take bulk actions on, so they let other stopwatches continue running. This will also give them the ability to create whatever combinations they need in any given situation.
Give users the option to export their data to a file. This would probably be best suited for the settings tab, as that is where data is kept.
Should users be given the option to import data from compatible files?
A stopwatch with additional functionality based around laps
and pace
:
laps
- If a lapDistance
is provided, allow a lapSplit to be taken. This can be extended to include a method which returns the lapDuration
.pace
- Methods to give the pace of a lap, the fastest/slowest/average lap pace.Add a dark mode to the website.
Athletes/Coaches/Spectators may not have access to a charger, and having a dark mode could reduce battery consumption. It would also be useful for night races, reviewing times at night, etc.
Adds functionality to undo the last action of each stopwatch. Stack-based, so once the most recent action is un-done, then the one before it can be un-done.
Related to #17.
Make stopwatches accessible for multiple users so that multiple users can record splits.
Will need to make this application a hosted application. Use WebSockets for broadcasting splits to users of each given stopwatch.
May also need a different interface for visualizing races with splits recorded by many users, and for filtering out other users' splits.
Related to #16, add functionality for promoting splits to laps, and demoting laps to splits.
StopWatch.prototype.splitSplit = function(index, timestamp) {
return newSplit;
}
This method should be called something that denotes that in order to add a split, that time must be taken from a pre-existing split to make room for it,
The a user provides a lap distance and lap units, add a Lap button to track laps. Laps are a more specialized lap, in that laps have a constant distance, where splits can be taken at any distance interval. Laps track the time since the last lap, and splits track the time since the last split of any kind. This gives the user fast multi-tiered tracking of users and matches the existing mental model for tracking competitors in a race.
ReferenceError: removeArchivedStopwatch is not defined
Also the Delete icon is missing, and stack the icons
Add the ability to add long-form notes to a stopwatch to document anything that isn't covered by other functionality.
From reddit:
I’d love to be able to archive with a race name / tag
Maybe even have tags in the customise section as well.
As users accumulate many records, they would need a way to quickly find relevant races. Tags might be the best/simplest way to go. Maybe a search box to search by the name of the stopwatch.
Stopwatch data should include timezone data, to ensure the originating timezone can be tracked. If a stopwatch has a valid timezone
/timezoneOffset
value, the stopwatch data will be rendered in that timezone.
Store all stopwatch values as timezone-aware dates:
class TZDate {
private utcTimestamp: number; // Milliseconds since Unix epoch in UTC
private timezone: string;
private timezoneOffset: number;
constructor(utcTimestamp: number, timezoneOffset: number | null, timezone: string | null) {
this.utcTimestamp = utcTimestamp;
this.timezoneOffset = timezoneOffset || (new Date).getTimezoneOffset();
this.timezone = timezone || Intl.DateTimeFormat().resolvedOptions().timeZone;
}
toOriginalDate(): Date {
var date = new Date(this.utcTimestamp),
utcMinutes = date.getUTCHours() * 60 + date.getUTCMinutes(),
localMinutes = (utcMinutes + this.timezoneOffset + 1440) % 1440;
date.setUTCHours(Math.floor(localMinutes / 60), localMinutes % 60);
return date;
}
toLocalDate(): Date {
return new Date(this.utcTimestamp);
}
static now(): TZDate {
var now: number = Date.now(),
timezoneOffset = (new Date).getTimezoneOffset(),
timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
return new TZDate(now, timezoneOffset, timezone);
}
}
interface CreationModificationDates {
readonly createdAt: TZDate;
lastModified: TZDate | null;
}
interface StopWatchMetadata {
readonly createdAt: TZDate;
startedAt: TZDate | null;
stoppedAt: TZDate | null;
resumedAt: TZDate | null;
resetAt: TZDate | null;
lastModified: TZDate | null;
}
class Split {
public value: TZDate;
public metadata: CreationModificationDates;
constructor(value: number, metadata: CreationModificationDates) {
this.value = value;
this.metadata = metadata;
}
}
Split labels are not being saved when updated.
Add custom attributes
to stopwatch,split, & lap objects
u/EverybodyWangChung52 made a good point about the start and stop buttons:
The stop/split buttons should be made larger and some separation so users don't accidentally stop the stopwatch when they have a lot going on.
Add logic to merge multiple splits into a single split. Something like:
StopWatch.prototype.merge = function(startIndex, endIndex) {
return newSplit;
}
Cases to handle:
startIndex
;split
is merged, update lastSplit
and localGap
accordinglyThis is to account for the fact that time cannot be removed from a stopwatch, so delete
would be ambiguous, and we would not know if the time needs to be applied to the previous/next split already recorded.
Record all the actions taken on a given stopwatch, and when they were taken. The log for each stopwatch could be deleted when the stopwatch is deleted.
This would need to be another screen/view on each stopwatch. May need to switch to a tab-based interface under the clock of each stopwatch to keep the UI from getting too cluttered.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.