sam/daily-time-tracking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial Commit

Browse Source
This commit is contained in:
Sam Stevens
2025-02-07 22:14:11 +00:00
commit 167e51bfce
15 changed files with 5612 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

22
README.md Normal file
View File

@@ -0,0 +1,22 @@
# `Daily Time Recording`
Inputs:
- Start Time
- Target Duration
- Break Duration
- Break Taken Yes/No
- Recorded Duration
- Remaining Duration
Calculation:
Remaining = Target - Now - Start - Break (if taken) + Recorded
## Getting Started
- `npm run dev` - Starts a dev server at http://localhost:5173/
- `npm run build` - Builds for production, emitting to `dist/`
- `npm run preview` - Starts a server at http://localhost:4173/ to test production build locally

14
index.html Normal file
View File

@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/clock.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light" />
<title>Daily Time Tracking</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/index.jsx"></script>
</body>
</html>

20
jsconfig.json Normal file
View File

@@ -0,0 +1,20 @@
{
"compilerOptions": {
"target": "ES2020",
"module": "ESNext",
"moduleResolution": "bundler",
"noEmit": true,
"allowJs": true,
"checkJs": true,
/* Preact Config */
"jsx": "react-jsx",
"jsxImportSource": "preact",
"skipLibCheck": true,
"paths": {
"react": ["./node_modules/preact/compat/"],
"react-dom": ["./node_modules/preact/compat/"]
}
},
"include": ["node_modules/vite/client.d.ts", "**/*"]
}

5226
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

25
package.json Normal file
View File

@@ -0,0 +1,25 @@
{
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"preact": "^10.25.3",
"react-hook-form": "^7.54.2"
},
"devDependencies": {
"@hookform/resolvers": "^3.10.0",
"@preact/preset-vite": "^2.9.3",
"eslint": "^8.57.1",
"eslint-config-preact": "^1.5.0",
"vite": "^6.1.0",
"xp.css": "^0.2.6",
"yup": "^1.6.1"
},
"eslintConfig": {
"extends": "preact"
}
}

4
public/clock.svg Normal file
View File

@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 7V12L14.5 10.5M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 455 B

15
public/vite.svg Normal file
View File

@@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257">
<defs>
<linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%">
<stop offset="0%" stop-color="#41D1FF"></stop>
<stop offset="100%" stop-color="#BD34FE"></stop>
</linearGradient>
<linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%">
<stop offset="0%" stop-color="#FFEA83"></stop>
<stop offset="8.333%" stop-color="#FFDD35"></stop>
<stop offset="100%" stop-color="#FFA800"></stop>
</linearGradient>
</defs>
<path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path>
<path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

11
src/Duration.jsx Normal file
View File

@@ -0,0 +1,11 @@
export default function Duration({ label, id, name, errors, register}) {
return (
<>
<div class="field-row-stacked">
<label for={id}>{label}</label>
<input type="text" id={id} {...register(name)} autocomplete="off" />
</div>
{errors && <p class="error-message">{errors.message}</p>}
</>
)
}

25
src/calc.js Normal file
View File

@@ -0,0 +1,25 @@
import {convertTime, timeToMins} from "./time.js";
import {convertDuration} from "./duration.js";
export default function calculateRemaining(data) {
const startNormalised = timeToMins(convertTime(data.startTime));
const target = convertDuration(data.target);
const breakLength = convertDuration(data.break);
const recorded = convertDuration(data.recorded);
const today = new Date();
let now = today.getHours() * 60 + today.getMinutes();
if (data.breakTaken) {
now -= breakLength;
}
let remaining = now - startNormalised;
if (remaining > target) {
remaining = target;
}
remaining -= recorded;
return remaining;
}

41
src/duration.js Normal file
View File

@@ -0,0 +1,41 @@
/**
* allows for minutes, hh:mm, 1h 1m formats
* @type {RegExp}
*/
export const durationRe = /(^\d+|^([012]?\d:\d{2})|((?:^|\s)\d+(?:\.\d+)?[hm])+)$/i;
export function convertDuration(value) {
if (!value) {
return value;
}
if (/^\d+$/.test(value)) {
return parseInt(value, 10);
}
const timeMatch = /^(?<hour>[012]?\d):(?<min>\d{2}$)/.exec(value);
if (timeMatch != null) {
const hours = parseInt(timeMatch.groups.hour, 10);
const mins = parseInt(timeMatch.groups.min, 10);
return (hours * 60) + mins;
}
if (/((?:^|\s)\d+(?:\.\d+)?[hm])+$/i.test(value)) {
let mins = 0;
const parts = value.split(/\s+/);
for (const part of parts) {
const {groups: {amount, spec}} = /^(?<amount>\d+(?:\.\d+)?)(?<spec>[hm])$/i.exec(part);
switch (spec.toLowerCase()) {
case 'h':
mins += parseFloat(amount) * 60;
break;
case 'm':
mins += parseFloat(amount);
break;
}
}
return mins;
}
return 0;
}

121
src/index.jsx Normal file
View File

@@ -0,0 +1,121 @@
import { useForm } from "react-hook-form";
import { render } from 'preact';
import {useEffect, useState} from "preact/hooks";
import { yupResolver } from "@hookform/resolvers/yup"
import * as yup from "yup";
import {convertTime, minsToTime, timeRe, timeToMins} from "./time.js";
import 'xp.css/dist/XP.css';
import './style.css';
import {convertDuration, durationRe} from "./duration.js";
import Duration from "./Duration.jsx";
import calculateRemaining from "./calc.js";
const schema = yup.object({
startTime: yup.string().matches(timeRe, {message: '12 or 24 hr time format required'}).required(),
target: yup.string().matches(durationRe, {message: 'duration in hh:mm or hrs and mins required'}).required(),
break: yup.string().matches(durationRe, {message: 'duration in hh:mm or hrs and mins required'}).required(),
breakTaken: yup.bool().required(),
recorded: yup.string().matches(durationRe, {message: 'duration in hh:mm or hrs and mins required'}).required()
}).required();
export function App() {
const {
handleSubmit,
register,
formState: { errors },
watch
} = useForm({
defaultValues: {
startTime: '09:00',
target: '7.5h',
break: '1h',
recorded: ''
},
resolver: yupResolver(schema)
});
const [currentData, setCurrentData] = useState(null);
const [remaining, setRemaining] = useState(0);
const onSubmit = (data) => {
setCurrentData({...data});
};
// update remaining when data changes and re-calc every minute
useEffect(() => {
if (!currentData) {
return;
}
setRemaining(calculateRemaining(currentData));
const interval = setInterval(() => {
setRemaining(calculateRemaining(currentData));
}, 60000);
return () => clearInterval(interval);
}, [currentData]);
// submit form when field changes
useEffect(() => {
const sub = watch(handleSubmit(onSubmit));
return () => sub.unsubscribe();
}, [handleSubmit, watch]);
return (
<div class="window" style={{margin: "32px auto", width: "250px"}}>
<div class="title-bar">
<div class="title-bar-text">
Daily Time Tracking
</div>
<div class="title-bar-controls">
<button type="button" aria-label="Close" />
</div>
</div>
<div class="window-body">
<form onSubmit={handleSubmit(onSubmit)}>
<div class="field-row-stacked">
<label for="StartTime">Start Time</label>
<input type="text" id="StartTime" {...register("startTime", { })} />
</div>
{errors?.startTime && <p class="error-message">{errors.startTime.message}</p>}
<Duration
label="Target Duration"
id="TargetDuration"
name="target"
errors={errors?.target}
register={register}
/>
<Duration
label="Break Duration"
id="BreakDuration"
name="break"
errors={errors?.break}
register={register}
/>
<div class="field-row">
<input type="checkbox" id="BreakTaken" {...register("breakTaken")} />
<label for="BreakTaken">Break Taken</label>
</div>
<Duration
label="Recorded Duration"
id="RecordedDuration"
name="recorded"
errors={errors?.recorded}
register={register}
/>
<p>
<button type="submit">Calculate</button>
</p>
<div class="field-row-stacked">
<label for="RemainingTime">Remaining Time</label>
<input type="text" id="RemainingTime" value={minsToTime(remaining)} readonly />
</div>
</form>
</div>
</div>
);
}
render(<App />, document.getElementById('app'));

8
src/style.css Normal file
View File

@@ -0,0 +1,8 @@
p.error-message {
color: #9c0000;
margin: 0 0 10px 0;
}
input[readonly] {
background-color: #eaeaea;
}

49
src/time.js Normal file
View File

@@ -0,0 +1,49 @@
export const timeRe = /^(?:[012]?\d:\d{2}|1?\d(?::\d{2})?(?:am|pm))$/i
export function convertTime(value) {
if (/^[012]?\d:\d{2}$/.test(value)) {
return value;
}
const twelveHour = /^(?<hour>[01]?\d)(?::(?<min>\d{2}))?(?<ampm>am|pm)$/i.exec(value);
if (twelveHour != null) {
let hour = parseInt(twelveHour.groups['hour'], 10);
const minute = parseInt(twelveHour.groups['min'] ?? '0', 10);
const ampm = twelveHour.groups['ampm'].toLowerCase();
if (hour === 12) {
if (ampm === 'am') {
hour = 0;
}
} else if (ampm === 'pm') {
if (hour < 12) {
hour += 12;
}
}
return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
}
return value;
}
export function timeToMins(value) {
const match = /^(?<hour>[012]?\d):(?<min>\d{2})$/.exec(value);
if (match) {
const hour = parseInt(match.groups.hour, 10);
const min = parseInt(match.groups.min, 10);
return (hour * 60) + min;
}
return 0;
}
export function minsToTime(totalMinutes) {
let prefix = totalMinutes < 0 ? '- ' : '';
let absMinutes = Math.abs(totalMinutes);
let hours = Math.floor(absMinutes / 60);
let minutes = absMinutes % 60;
if (minutes > 0) {
return `${prefix}${hours}h ${minutes}m`;
}
if (hours > 0) {
return `${hours}h`;
}
return '0m';
}

7
vite.config.js Normal file
View File

@@ -0,0 +1,7 @@
import { defineConfig } from 'vite';
import preact from '@preact/preset-vite';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [preact()],
});