├── public
    ├── pwa-144x144.png
    ├── pwa-192x192.png
    ├── pwa-512x512.png
    ├── vite.svg
    └── favicon.svg
├── src
    ├── vite-env.d.ts
    ├── theme.ts
    ├── main.tsx
    ├── App.css
    ├── claims-sw.ts
    ├── prompt-sw.ts
    ├── ReloadPrompt.css
    ├── logic
    │   ├── asyncLocalStorage.ts
    │   ├── localStorage.ts
    │   ├── utils.ts
    │   └── store.ts
    ├── index.css
    ├── ReloadPrompt.tsx
    ├── App.tsx
    ├── assets
    │   └── react.svg
    └── views
    │   ├── components.tsx
    │   └── boardComponent.tsx
├── tsconfig.node.json
├── githubDeploy.bat
├── .gitignore
├── index.html
├── package.json
├── tsconfig.json
├── readme.md
└── vite.config.ts


/public/pwa-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidacm/cronos/main/public/pwa-144x144.png


--------------------------------------------------------------------------------
/public/pwa-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidacm/cronos/main/public/pwa-192x192.png


--------------------------------------------------------------------------------
/public/pwa-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidacm/cronos/main/public/pwa-512x512.png


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | /// <reference types="vite-plugin-pwa/client" />
3 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "module": "ESNext",
 5 |     "moduleResolution": "Node",
 6 |     "allowSyntheticDefaultImports": true
 7 |   },
 8 |   "include": ["vite.config.ts"]
 9 | }
10 | 


--------------------------------------------------------------------------------
/githubDeploy.bat:
--------------------------------------------------------------------------------
1 | call git checkout -b gh-pages
2 | call npm run build
3 | ren dist docs
4 | call git add docs
5 | call git commit -m "deploy for gh pages"
6 | call git push --force --set-upstream origin gh-pages
7 | call git checkout main
8 | call git branch -d gh-pages
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | *.code-workspace
26 | certs
27 | 


--------------------------------------------------------------------------------
/src/theme.ts:
--------------------------------------------------------------------------------
 1 | import { createTheme } from '@mui/material/styles';
 2 | import { red } from '@mui/material/colors';
 3 | 
 4 | // Create a theme instance.
 5 | const theme = createTheme({
 6 |   palette: {
 7 |     primary: {
 8 |       main: '#556cd6',
 9 |     },
10 |     secondary: {
11 |       main: '#19857b',
12 |     },
13 |     error: {
14 |       main: red.A400,
15 |     },
16 |   },
17 | });
18 | 
19 | export default theme;


--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom/client'
 3 | import CssBaseline from '@mui/material/CssBaseline';
 4 | import { ThemeProvider } from '@mui/material/styles';
 5 | 
 6 | import App from './App'
 7 | import './index.css'
 8 | import theme from './theme';
 9 | 
10 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
11 |   <React.StrictMode>
12 |     <ThemeProvider theme={theme}>
13 |       <CssBaseline />
14 |       <App />
15 |     </ThemeProvider>
16 |   </React.StrictMode>
17 | )
18 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | 
 2 | .logo {
 3 |   height: 6em;
 4 |   padding: 1.5em;
 5 |   will-change: filter;
 6 | }
 7 | .logo:hover {
 8 |   filter: drop-shadow(0 0 2em #646cffaa);
 9 | }
10 | .logo.react:hover {
11 |   filter: drop-shadow(0 0 2em #61dafbaa);
12 | }
13 | 
14 | @keyframes logo-spin {
15 |   from {
16 |     transform: rotate(0deg);
17 |   }
18 |   to {
19 |     transform: rotate(360deg);
20 |   }
21 | }
22 | 
23 | @media (prefers-reduced-motion: no-preference) {
24 |   a:nth-of-type(2) .logo {
25 |     animation: logo-spin infinite 20s linear;
26 |   }
27 | }
28 | 
29 | 
30 | .vw-100 {
31 |   width: 100vw !important;
32 | }
33 | 
34 | .vh-100 {
35 |   height: 100vh !important;
36 | }
37 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <link rel="icon" href="/favicon.svg" type="image/svg+xml">
 8 |     <link rel="apple-touch-icon" href="/pwa-192x192.png">
 9 |     <link rel="mask-icon" href="/favicon.svg" color="#FFFFFF">
10 |     <meta name="msapplication-TileColor" content="#FFFFFF">
11 |     <meta name="theme-color" content="#ffffff"> 
12 |     <title>Cronos</title>
13 |   </head>
14 |   <body>
15 |     <div id="root"></div>
16 |     <script type="module" src="/src/main.tsx"></script>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/src/claims-sw.ts:
--------------------------------------------------------------------------------
 1 | import { cleanupOutdatedCaches, createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching'
 2 | import { clientsClaim } from 'workbox-core'
 3 | import { NavigationRoute, registerRoute } from 'workbox-routing'
 4 | 
 5 | declare let self: ServiceWorkerGlobalScope
 6 | 
 7 | // self.__WB_MANIFEST is default injection point
 8 | precacheAndRoute(self.__WB_MANIFEST)
 9 | 
10 | // clean old assets
11 | cleanupOutdatedCaches()
12 | 
13 | let allowlist: undefined | RegExp[]
14 | if (import.meta.env.DEV)
15 |   allowlist = [/^\/$/]
16 | 
17 | // to allow work offline
18 | registerRoute(new NavigationRoute(
19 |   createHandlerBoundToURL('index.html'),
20 |   { allowlist },
21 | ))
22 | 
23 | self.skipWaiting()
24 | clientsClaim()
25 | 


--------------------------------------------------------------------------------
/src/prompt-sw.ts:
--------------------------------------------------------------------------------
 1 | /// <reference lib="webworker" />
 2 | 
 3 | import { cleanupOutdatedCaches, createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching'
 4 | import { NavigationRoute, registerRoute } from 'workbox-routing'
 5 | /// <reference lib="webworker" />
 6 | export default null
 7 | declare let self: ServiceWorkerGlobalScope
 8 | 
 9 | self.addEventListener('message', (event) => {
10 |   if (event.data && event.data.type === 'SKIP_WAITING')
11 |     self.skipWaiting()
12 | })
13 | 
14 | // self.__WB_MANIFEST is default injection point
15 | precacheAndRoute(self.__WB_MANIFEST)
16 | 
17 | // clean old assets
18 | cleanupOutdatedCaches()
19 | 
20 | // to allow work offline
21 | registerRoute(new NavigationRoute(createHandlerBoundToURL('index.html')))
22 | 


--------------------------------------------------------------------------------
/src/ReloadPrompt.css:
--------------------------------------------------------------------------------
 1 | .ReloadPrompt-container {
 2 |     padding: 0;
 3 |     margin: 0;
 4 |     width: 0;
 5 |     height: 0;
 6 | }
 7 | .ReloadPrompt-date {
 8 |     visibility: hidden;
 9 | }
10 | .ReloadPrompt-toast {
11 |     position: fixed;
12 |     right: 0;
13 |     bottom: 0;
14 |     margin: 16px;
15 |     padding: 12px;
16 |     border: 1px solid #8885;
17 |     border-radius: 4px;
18 |     z-index: 1;
19 |     text-align: left;
20 |     box-shadow: 3px 4px 5px 0 #8885;
21 |     background-color: white;
22 | }
23 | .ReloadPrompt-toast-message {
24 |     margin-bottom: 8px;
25 | }
26 | .ReloadPrompt-toast-button {
27 |     border: 1px solid #8885;
28 |     outline: none;
29 |     margin-right: 5px;
30 |     border-radius: 2px;
31 |     padding: 3px 10px;
32 | }
33 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "cronos",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "tsc && vite build",
 9 |     "preview": "vite preview"
10 |   },
11 |   "dependencies": {
12 |     "@mui/icons-material": "^5.10.3",
13 |     "@mui/material": "^5.10.3",
14 |     "framer-motion": "^6.5.1",
15 |     "mobx": "^6.6.1",
16 |     "mobx-react-lite": "^3.4.0",
17 |     "mobx-state-tree": "^5.1.6",
18 |     "react": "^18.2.0",
19 |     "react-dom": "^18.2.0"
20 |   },
21 |   "devDependencies": {
22 |     "@types/react": "^18.0.15",
23 |     "@types/react-dom": "^18.0.6",
24 |     "@vitejs/plugin-react": "^2.0.0",
25 |     "typescript": "^4.6.4",
26 |     "vite": "^3.0.0",
27 |     "vite-plugin-pwa": "^0.12.4"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "useDefineForClassFields": true,
 5 |     "lib": [
 6 |       "DOM",
 7 |       "DOM.Iterable",
 8 |       "ESNext"
 9 |     ],
10 |     "allowJs": false,
11 |     "skipLibCheck": true,
12 |     "esModuleInterop": false,
13 |     "allowSyntheticDefaultImports": true,
14 |     "forceConsistentCasingInFileNames": true,
15 |     "module": "ESNext",
16 |     "moduleResolution": "Node",
17 |     "resolveJsonModule": true,
18 |     "isolatedModules": true,
19 |     "noEmit": true,
20 |     "jsx": "react-jsx",
21 |     "strict": true,
22 |     "strictNullChecks": true,
23 |     "strictFunctionTypes": true,
24 |     "noImplicitAny": true,
25 |     "noImplicitReturns": true,
26 |     "noImplicitThis": true,
27 |     "types": [
28 |       "vite-plugin-pwa/client"
29 |     ]
30 |   },
31 |   "include": [
32 |     "src"
33 |   ],
34 |   "references": [
35 |     {
36 |       "path": "./tsconfig.node.json"
37 |     }
38 |   ]
39 | }


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # cronos application.
 2 | 
 3 | This app has been created as a react learning exercise, but should be functional on local mode.
 4 | This was created using vite, react, MobX, MobXStateTree, and chakra UI
 5 | The goal of this app is to help you to measure your time. You need to start the timer of your current activity, stop it when you finish the activity. You can use the stop button, or tab in the current timer.
 6 | 
 7 | ## features
 8 | * you can create, delete and rename timers.
 9 | * the timers are sorted by the most recent timer used.
10 | * the current timer is updated each second.
11 | * you can see the log of each used timer.
12 | * the log is for just one day, the current day.
13 | * you can install it as a PWA.
14 | * the data is saved in the local storage.
15 | 
16 | ## todo:
17 | * Implement a sumary of the timers by date range.
18 | * add the option to adjust the range for the log, for now you can see just the current day.
19 | * the possibility to add, change, remove and rename boards.
20 | * add pretty styles and icons.
21 | * change the UI to be more useable.
22 | * add the option to sign in, and sync boards, timers and the history between devices.
23 | 


--------------------------------------------------------------------------------
/src/logic/asyncLocalStorage.ts:
--------------------------------------------------------------------------------
 1 | interface IAsyncLocalStorage {
 2 |     clear(): Promise<void>
 3 |     getItem(key: string): Promise<string>
 4 |     removeItem(key: string): Promise<void>
 5 |     setItem(key: string, value: string): Promise<void>
 6 |   }
 7 |   
 8 |   export const AsyncLocalStorage: IAsyncLocalStorage = {
 9 |     // must use wrapper functions when passing localStorage functions
10 |     clear /* ignore next */ ()
11 |     {
12 |       return callWithPromise(() => window.localStorage.clear())
13 |     },
14 |     getItem (key) {
15 |       return callWithPromise(() => window.localStorage.getItem(key))
16 |     },
17 |     removeItem /* istanbul ignore next */ (key) {
18 |       return callWithPromise(() => window.localStorage.removeItem(key))
19 |     },
20 |     setItem (key, value) {
21 |       return callWithPromise(() => window.localStorage.setItem(key, value))
22 |     }
23 |   }
24 |   
25 |   function callWithPromise (func: Function, ...args: any[]): Promise<any> {
26 |     try {
27 |       return Promise.resolve(func(...args))
28 |     } catch (err) {
29 |       /* istanbul ignore next */
30 |       return Promise.reject(err)
31 |     }
32 |   }
33 |   
34 |   export default AsyncLocalStorage


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" 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>


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
 3 |   font-size: 16px;
 4 |   line-height: 24px;
 5 |   font-weight: 400;
 6 | 
 7 |   color-scheme: light dark;
 8 |   color: rgba(255, 255, 255, 0.87);
 9 |   background-color: #242424;
10 | 
11 |   font-synthesis: none;
12 |   text-rendering: optimizeLegibility;
13 |   -webkit-font-smoothing: antialiased;
14 |   -moz-osx-font-smoothing: grayscale;
15 |   -webkit-text-size-adjust: 100%;
16 | }
17 | 
18 | a {
19 |   font-weight: 500;
20 |   color: #646cff;
21 |   text-decoration: inherit;
22 | }
23 | a:hover {
24 |   color: #535bf2;
25 | }
26 | 
27 | body {
28 |   margin: 0;
29 |   display: flex;
30 |   place-items: center;
31 |   min-width: 320px;
32 |   min-height: 100vh;
33 | }
34 | 
35 | h1 {
36 |   font-size: 3.2em;
37 |   line-height: 1.1;
38 | }
39 | 
40 | button {
41 |   border-radius: 8px;
42 |   border: 1px solid transparent;
43 |   padding: 0.6em 1.2em;
44 |   font-size: 1em;
45 |   font-weight: 500;
46 |   font-family: inherit;
47 |   background-color: #1a1a1a;
48 |   cursor: pointer;
49 |   transition: border-color 0.25s;
50 | }
51 | button:hover {
52 |   border-color: #646cff;
53 | }
54 | button:focus,
55 | button:focus-visible {
56 |   outline: 4px auto -webkit-focus-ring-color;
57 | }
58 | 
59 | @media (prefers-color-scheme: light) {
60 |   :root {
61 |     color: #213547;
62 |     background-color: #ffffff;
63 |   }
64 |   a:hover {
65 |     color: #747bff;
66 |   }
67 |   button {
68 |     background-color: #f9f9f9;
69 |   }
70 | }
71 | 


--------------------------------------------------------------------------------
/src/ReloadPrompt.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import './ReloadPrompt.css'
 3 | 
 4 | import { useRegisterSW } from 'virtual:pwa-register/react'
 5 | 
 6 | function ReloadPrompt() {
 7 |   // replaced dynamically
 8 |   const buildDate = '__DATE__'
 9 |   // replaced dyanmicaly
10 |   const reloadSW = '__RELOAD_SW__'
11 | 
12 |   const {
13 |     offlineReady: [offlineReady, setOfflineReady],
14 |     needRefresh: [needRefresh, setNeedRefresh],
15 |     updateServiceWorker,
16 |   } = useRegisterSW({
17 |     onRegistered(r) {
18 |       // @ts-expect-error just ignore
19 |       if (reloadSW === 'true') {
20 |         r && setInterval(() => {
21 |           // eslint-disable-next-line no-console
22 |           console.log('Checking for sw update')
23 |           r.update()
24 |         }, 20000 /* 20s for testing purposes */)
25 |       }
26 |       else {
27 |         // eslint-disable-next-line prefer-template,no-console
28 |         console.log('SW Registered: ' + r)
29 |       }
30 |     },
31 |     onRegisterError(error) {
32 |       // eslint-disable-next-line no-console
33 |       console.log('SW registration error', error)
34 |     },
35 |   })
36 | 
37 |   const close = () => {
38 |     setOfflineReady(false)
39 |     setNeedRefresh(false)
40 |   }
41 | 
42 |   return (
43 |     <div className="ReloadPrompt-container">
44 |       { (offlineReady || needRefresh)
45 |           && <div className="ReloadPrompt-toast">
46 |             <div className="ReloadPrompt-message">
47 |               { offlineReady
48 |                 ? <span>App ready to work offline</span>
49 |                 : <span>New content available, click on reload button to update.</span>
50 |               }
51 |             </div>
52 |             { needRefresh && <button className="ReloadPrompt-toast-button" onClick={() => updateServiceWorker(true)}>Reload</button> }
53 |             <button className="ReloadPrompt-toast-button" onClick={() => close()}>Close</button>
54 |           </div>
55 |       }
56 |       <div className="ReloadPrompt-date">{buildDate}</div>
57 |     </div>
58 |   )
59 | }
60 | 
61 | export default ReloadPrompt
62 | 


--------------------------------------------------------------------------------
/src/logic/localStorage.ts:
--------------------------------------------------------------------------------
 1 | import { onSnapshot, applySnapshot, IStateTreeNode } from "mobx-state-tree"
 2 | 
 3 | import AsyncLocalStorage from "./asyncLocalStorage"
 4 | 
 5 | export interface IArgs {
 6 |   (name: string, store: IStateTreeNode, options?: IOptions): Promise<void>
 7 | }
 8 | export interface IOptions {
 9 |   storage?: any,
10 |   jsonify?: boolean,
11 |   readonly whitelist?: Array<string>,
12 |   readonly blacklist?: Array<string>
13 | }
14 | type StrToAnyMap = {[key: string]: any}
15 | 
16 | export const persist: IArgs = (name, store, options = {}) => {
17 |   let {storage, jsonify = true, whitelist, blacklist} = options
18 | 
19 |   // use AsyncLocalStorage by default (or if localStorage was passed in)
20 |   if (
21 |     typeof window !== 'undefined' &&
22 |     typeof window.localStorage !== 'undefined' &&
23 |     (!storage || storage === window.localStorage)
24 |   ) {
25 |     storage = AsyncLocalStorage
26 |   }
27 |   if (!storage) {
28 |     return Promise.reject('localStorage (the default storage engine) is not ' +
29 |       'supported in this environment. Please configure a different storage ' +
30 |       'engine via the `storage:` option.')
31 |   }
32 | 
33 |   const whitelistDict = arrToDict(whitelist)
34 |   const blacklistDict = arrToDict(blacklist)
35 | 
36 |   onSnapshot(store, (_snapshot: StrToAnyMap) => {
37 |     // need to shallow clone as otherwise properties are non-configurable (https://github.com/agilgur5/mst-persist/pull/21#discussion_r348105595)
38 |     const snapshot = { ..._snapshot }
39 |     Object.keys(snapshot).forEach((key) => {
40 |       if (whitelist && !whitelistDict[key]) {
41 |         delete snapshot[key]
42 |       }
43 |       if (blacklist && blacklistDict[key]) {
44 |         delete snapshot[key]
45 |       }
46 |     })
47 | 
48 |     const data = !jsonify ? snapshot : JSON.stringify(snapshot)
49 |     storage.setItem(name, data)
50 |   })
51 | 
52 |   return storage.getItem(name)
53 |     .then((data: object | string) => {
54 |       const snapshot = !isString(data) ? data : JSON.parse(data)
55 |       // don't apply falsey (which will error), leave store in initial state
56 |       if (!snapshot) { return }
57 |       applySnapshot(store, snapshot)
58 |     })
59 | }
60 | 
61 | type StrToBoolMap = {[key: string]: boolean}
62 | 
63 | function arrToDict (arr?: Array<string>): StrToBoolMap {
64 |   if (!arr) { return {} }
65 |   return arr.reduce((dict: StrToBoolMap, elem) => {
66 |     dict[elem] = true
67 |     return dict
68 |   }, {})
69 | }
70 | 
71 | function isString (value: any): value is string {
72 |   return typeof value === 'string'
73 | }
74 | 
75 | export default persist


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState, SyntheticEvent } from 'react'
 2 | import Tabs from '@mui/material/Tabs';
 3 | import Tab from '@mui/material/Tab';
 4 | import Box from '@mui/material/Box';
 5 | import { Typography } from '@mui/material';
 6 | import Container from '@mui/material/Container';
 7 | 
 8 | import './App.css'
 9 | import { beepSlower } from "./logic/utils"
10 | import { EditTimers, LogView, Stopwatch, SummaryView } from "./views/boardComponent"
11 | import { ITimer, factory, store } from "./logic/store"
12 | 
13 | // window.store = store
14 | 
15 | 
16 | interface TabPanelProps {
17 |   children?: React.ReactNode;
18 |   index: number;
19 |   value: number;
20 | }
21 | 
22 | function TabPanel(props: TabPanelProps) {
23 |   const { children, value, index, ...other } = props;
24 | 
25 |   return (
26 |     <div
27 |       role="tabpanel"
28 |       hidden={value !== index}
29 |       id={`simple-tabpanel-${index}`}
30 |       aria-labelledby={`simple-tab-${index}`}
31 |       {...other}
32 |     >
33 |       {value === index && (
34 |         <Box>
35 |           {children}
36 |         </Box>
37 |       )}
38 |     </div>
39 |   );
40 | }
41 | 
42 | 
43 | function a11yProps(index: number) {
44 |   return {
45 |     id: `simple-tab-${index}`,
46 |     'aria-controls': `simple-tabpanel-${index}`,
47 |   };
48 | }
49 | 
50 | function App() {
51 |   const [value, setValue] = useState(0);
52 | 
53 |   const handleChange = (event: SyntheticEvent, newValue: number) => {
54 |     setValue(newValue);
55 |   };
56 | 
57 |   return (
58 |     <div className="App">
59 |       <Container maxWidth="sm">
60 |         <Box sx={{ width: '100%' }}>
61 |           <Box sx={{ borderBottom: 1, borderColor: 'divider', position:'fixed', top:10, maxHeight:20}}>
62 |             <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
63 |               <Tab label="stopwatch" {...a11yProps(0)} />
64 |               <Tab label="edit timers" {...a11yProps(1)} />
65 |               <Tab label="activity log" {...a11yProps(2)} />
66 |               <Tab label="Summary" {...a11yProps(3)} />
67 |             </Tabs>
68 |           </Box>
69 |           <TabPanel value={value} index={0} >
70 |             <Stopwatch board={store.currentBoard!} />
71 |           </TabPanel>
72 |           <TabPanel value={value} index={1}>
73 |             <EditTimers board={store.currentBoard!} />
74 |           </TabPanel>
75 |           <TabPanel value={value} index={2}>
76 |             <LogView board={store.currentBoard!} />
77 |           </TabPanel>
78 |           <TabPanel value={value} index={3} >
79 |             <SummaryView board={store.currentBoard!} />
80 |           </TabPanel>
81 |         </Box>
82 |       </Container>
83 |     </div>
84 |   )
85 | }
86 | 
87 | export default App
88 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import react from '@vitejs/plugin-react'
 3 | import type { ManifestOptions, VitePWAOptions } from 'vite-plugin-pwa'
 4 | import { VitePWA } from 'vite-plugin-pwa'
 5 | import replace from '@rollup/plugin-replace'
 6 | 
 7 | const pwaOptions: Partial<VitePWAOptions> = {
 8 |   mode: 'production',
 9 |   base: '/cronos/',
10 |   includeAssets: ['favicon.svg'],
11 |   manifest: {
12 |     name: 'Cronos',
13 |     short_name: 'Cronos',
14 |     theme_color: '#ffffff',
15 |     icons: [
16 |       {
17 |         src: 'pwa-192x192.png',
18 |         sizes: '192x192',
19 |         type: 'image/png',
20 |       },
21 |       {
22 |         src: '/pwa-512x512.png',
23 |         sizes: '512x512',
24 |         type: 'image/png',
25 |       },
26 |       {
27 |         src: 'pwa-512x512.png',
28 |         sizes: '512x512',
29 |         type: 'image/png',
30 |         purpose: 'any maskable',
31 |       },
32 |       {
33 |         src: 'pwa-144x144.png',
34 |         sizes: '144x144',
35 |         type: 'image/png',
36 |         purpose: 'any',
37 |       },
38 |     ],
39 |   },
40 |   devOptions: {
41 |     enabled: process.env.SW_DEV === 'true',
42 |     /* when using generateSW the PWA plugin will switch to classic */
43 |     type: 'module',
44 |     navigateFallback: 'index.html',
45 |   },
46 | }
47 | 
48 | const replaceOptions = { __DATE__: new Date().toISOString() }
49 | const claims = process.env.CLAIMS === 'true'
50 | const reload = process.env.RELOAD_SW === 'true'
51 | const selfDestroying = process.env.SW_DESTROY === 'true'
52 | 
53 | if (process.env.SW === 'true') {
54 |   pwaOptions.srcDir = 'src'
55 |   pwaOptions.filename = claims ? 'claims-sw.ts' : 'prompt-sw.ts'
56 |   pwaOptions.strategies = 'injectManifest'
57 |   ;(pwaOptions.manifest as Partial<ManifestOptions>).name = 'PWA Inject Manifest'
58 |   ;(pwaOptions.manifest as Partial<ManifestOptions>).short_name = 'PWA Inject'
59 | }
60 | 
61 | if (claims)
62 |   pwaOptions.registerType = 'autoUpdate'
63 | 
64 | if (reload) {
65 |   // @ts-expect-error just ignore
66 |   replaceOptions.__RELOAD_SW__ = 'true'
67 | }
68 | 
69 | if (selfDestroying)
70 |   pwaOptions.selfDestroying = selfDestroying
71 | 
72 | 
73 | // https://vitejs.dev/config/
74 | export default defineConfig({
75 |   base: '/cronos/',
76 |   build: {
77 |     sourcemap: process.env.SOURCE_MAP === 'true',
78 |     rollupOptions: {
79 |       output: {
80 |         manualChunks: (id) => {
81 |           if (id.includes("node_modules")) {
82 |             if (id.includes("@material-ui")) {
83 |                   return "vendor_mui"
84 |               }
85 |               return "vendor"
86 |           }
87 |           },
88 |       }
89 |     }
90 |   },
91 | 
92 |   plugins: [
93 |     react(),
94 |     VitePWA(pwaOptions),
95 |     replace(replaceOptions),
96 |   ]
97 | })
98 | 


--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>


--------------------------------------------------------------------------------
/src/views/components.tsx:
--------------------------------------------------------------------------------
  1 | import { Box, Button, ButtonGroup, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, InputLabel, styled, TextField } from '@mui/material'
  2 | import { Ref, useEffect, useId, useRef, useState } from 'react'
  3 | import AddIcon from '@mui/icons-material/Add'
  4 | 
  5 | 
  6 | export function useToggleFocus<R extends HTMLElement>(): [boolean, () => void, Ref<R>, () => void] {
  7 |     const focusRef = useRef<R>(null)
  8 |     const [_toggle, _setToggle] = useState(false)
  9 |     const [shouldFocus, setShouldFocus] = useState(false)
 10 | 
 11 |     useEffect(() => {
 12 |         if (shouldFocus) {
 13 |             focusRef.current?.focus()
 14 |             setShouldFocus(false)
 15 |         }
 16 |     })
 17 |     const setFocus = () => setShouldFocus(true)
 18 |     const toggle = () => {
 19 |         if (_toggle) {
 20 |             _setToggle(false)
 21 |             setFocus()
 22 |         }
 23 |         else _setToggle(true)
 24 |     }
 25 |     return [_toggle, toggle, focusRef, setFocus]
 26 | }
 27 | 
 28 | 
 29 | export const Item = styled(Box)(({ theme }) => ({
 30 |     backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
 31 |     ...theme.typography.body2,
 32 |     padding: theme.spacing(1),
 33 |     textAlign: 'center',
 34 |     color: theme.palette.text.secondary
 35 | }))
 36 | 
 37 | 
 38 | type DialogCallback = (value: string) => void
 39 | type SimpleDialogProps = { open: boolean, title: string, labelConfirm: string, onOk: DialogCallback, onCancel: DialogCallback }
 40 | type DialogInputProps = SimpleDialogProps & { labelInput: string, initialValue?: string }
 41 | 
 42 | export function GetInputDialog(p: DialogInputProps) {
 43 |     const idInput = useId()
 44 |     const refInput = useRef<HTMLInputElement>(null)
 45 |     const handleOK = () => {
 46 |         p.onOk(refInput.current!.value)
 47 |     };
 48 | 
 49 |     const handleCancel = () => {
 50 |         p.onCancel("")
 51 |     };
 52 |     return (
 53 |         <Dialog open={p.open} onClose={handleCancel} fullWidth>
 54 |             <DialogTitle>{p.title}</DialogTitle>
 55 |             <DialogContent sx={{ height: 300 }}>
 56 |                 <InputLabel htmlFor={idInput} >{p.labelInput}</InputLabel>
 57 |                 <TextField id={idInput} fullWidth autoFocus type="text" inputRef={refInput} defaultValue={p.initialValue} />
 58 |             </DialogContent>
 59 |             <DialogActions sx={{ width: '100vw', position: 'fixed', bottom: 0 }}>
 60 |                 <ButtonGroup fullWidth size='large'>
 61 |                     <Button onClick={handleCancel}>Cancel</Button>
 62 |                     <Button onClick={handleOK}>{p.labelConfirm}</Button>
 63 |                 </ButtonGroup>
 64 |             </DialogActions>
 65 |         </Dialog >
 66 |     );
 67 | }
 68 | 
 69 | type ConfirmDialogProps = SimpleDialogProps & { description: string }
 70 | export function ConfirmDialog(p: ConfirmDialogProps) {
 71 |     const handleOK = () => {
 72 |         p.onOk("ok")
 73 |     };
 74 |     const handleCancel = () => {
 75 |         p.onCancel("cancel")
 76 |     };
 77 | 
 78 |     return (<Dialog open={p.open} onClose={handleCancel} fullWidth>
 79 |         <DialogTitle>{p.title}</DialogTitle>
 80 |         <DialogContent>
 81 |             <DialogContentText>
 82 |                 {p.description}
 83 |             </DialogContentText>
 84 |         </DialogContent>
 85 |         <DialogActions sx={{ width: '100vw', position: 'fixed', bottom: 0 }}>
 86 |             <ButtonGroup fullWidth size='large'>
 87 |                 <Button autoFocus onClick={handleCancel}>Cancel</Button>
 88 |                 <Button onClick={handleOK}>{p.labelConfirm}</Button>
 89 |             </ButtonGroup>
 90 |         </DialogActions>
 91 |     </Dialog>)
 92 | }
 93 | 
 94 | 
 95 | export function ButtonNewDialog(p: Omit<DialogInputProps, 'onCancel' | 'open'> & { labelOpen: string }) {
 96 |     const [open, toggleOpen, focusRef] = useToggleFocus<HTMLButtonElement>()
 97 | 
 98 |     const handleOk = (value: string) => {
 99 |         p.onOk(value)
100 |         toggleOpen()
101 |     }
102 | 
103 |     if (!open) return (<Button sx={{ width: '100%' }} onClick={toggleOpen} ref={focusRef}>
104 |         {p.labelOpen}
105 |     </Button>)
106 | 
107 |     return (<GetInputDialog open={open} title={p.title} labelInput={p.labelInput} labelConfirm={p.labelConfirm} onOk={handleOk} onCancel={toggleOpen} />)
108 | }
109 | 
110 | 
111 | 
112 | 


--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2 | <svg
  3 |    width="410"
  4 |    height="404"
  5 |    viewBox="0 0 410 404"
  6 |    fill="none"
  7 |    version="1.1"
  8 |    id="svg20"
  9 |    sodipodi:docname="favicon.svg"
 10 |    inkscape:version="1.1 (c68e22c387, 2021-05-23)"
 11 |    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
 12 |    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
 13 |    xmlns="http://www.w3.org/2000/svg"
 14 |    xmlns:svg="http://www.w3.org/2000/svg"
 15 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 16 |    xmlns:cc="http://creativecommons.org/ns#"
 17 |    xmlns:dc="http://purl.org/dc/elements/1.1/">
 18 |   <metadata
 19 |      id="metadata24">
 20 |     <rdf:RDF>
 21 |       <cc:Work
 22 |          rdf:about="">
 23 |         <dc:format>image/svg+xml</dc:format>
 24 |         <dc:type
 25 |            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
 26 |         <dc:title />
 27 |       </cc:Work>
 28 |     </rdf:RDF>
 29 |   </metadata>
 30 |   <sodipodi:namedview
 31 |      pagecolor="#ffffff"
 32 |      bordercolor="#666666"
 33 |      borderopacity="1"
 34 |      objecttolerance="10"
 35 |      gridtolerance="10"
 36 |      guidetolerance="10"
 37 |      inkscape:pageopacity="0"
 38 |      inkscape:pageshadow="2"
 39 |      inkscape:window-width="1920"
 40 |      inkscape:window-height="1001"
 41 |      id="namedview22"
 42 |      showgrid="false"
 43 |      inkscape:zoom="0.51361386"
 44 |      inkscape:cx="-374.79518"
 45 |      inkscape:cy="145.0506"
 46 |      inkscape:window-x="-9"
 47 |      inkscape:window-y="-9"
 48 |      inkscape:window-maximized="1"
 49 |      inkscape:current-layer="g8"
 50 |      inkscape:document-rotation="0"
 51 |      inkscape:pagecheckerboard="0" />
 52 |   <path
 53 |      d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z"
 54 |      fill="url(#paint0_linear)"
 55 |      id="path2" />
 56 |   <defs
 57 |      id="defs18">
 58 |     <linearGradient
 59 |        id="paint0_linear"
 60 |        x1="6.00017"
 61 |        y1="32.9999"
 62 |        x2="235"
 63 |        y2="344"
 64 |        gradientUnits="userSpaceOnUse">
 65 |       <stop
 66 |          stop-color="#41D1FF"
 67 |          id="stop6" />
 68 |       <stop
 69 |          offset="1"
 70 |          stop-color="#BD34FE"
 71 |          id="stop8" />
 72 |     </linearGradient>
 73 |     <linearGradient
 74 |        id="paint1_linear"
 75 |        x1="194.651"
 76 |        y1="8.81818"
 77 |        x2="236.076"
 78 |        y2="292.989"
 79 |        gradientUnits="userSpaceOnUse">
 80 |       <stop
 81 |          stop-color="#FFEA83"
 82 |          id="stop11" />
 83 |       <stop
 84 |          offset="0.0833333"
 85 |          stop-color="#FFDD35"
 86 |          id="stop13" />
 87 |       <stop
 88 |          offset="1"
 89 |          stop-color="#FFA800"
 90 |          id="stop15" />
 91 |     </linearGradient>
 92 |   </defs>
 93 |   <path
 94 |      d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z"
 95 |      fill="url(#paint1_linear)"
 96 |      id="path4" />
 97 |   <g
 98 |      inkscape:groupmode="layer"
 99 |      id="layer1"
100 |      inkscape:label="PWA">
101 |     <g
102 |        id="g8"
103 |        transform="matrix(0.15789659,0,0,0.15890333,54.892928,275.21638)">
104 |       <path
105 |          fill="#3d3d3d"
106 |          fill-opacity="1"
107 |          stroke-width="0.2"
108 |          stroke-linejoin="round"
109 |          d="m 1436.62,603.304 56.39,-142.599 h 162.82 L 1578.56,244.39 1675.2,5.28336e-4 1952,734.933 h -204.13 l -47.3,-131.629 z"
110 |          id="path2-1"
111 |          style="fill:#3e3e3e;fill-opacity:1" />
112 |       <path
113 |          fill="#5a0fc8"
114 |          fill-opacity="1"
115 |          stroke-width="0.2"
116 |          stroke-linejoin="round"
117 |          d="M 1262.47,734.935 1558.79,0.00156593 1362.34,0.0025425 1159.64,474.933 1015.5,0.00351906 H 864.499 L 709.731,474.933 600.585,258.517 501.812,562.819 602.096,734.935 h 193.331 l 139.857,-425.91 133.346,425.91 z"
118 |          id="path4-4"
119 |          style="fill:#2e859c;fill-opacity:1" />
120 |       <path
121 |          fill="#3d3d3d"
122 |          fill-opacity="1"
123 |          stroke-width="0.2"
124 |          stroke-linejoin="round"
125 |          d="m 186.476,482.643 h 121.003 c 36.654,0 69.293,-4.091 97.917,-12.273 l 31.293,-96.408 87.459,-269.446 C 517.484,93.9535 509.876,83.9667 501.324,74.5569 456.419,24.852 390.719,4.06265e-4 304.222,4.06265e-4 H -3.8147e-6 V 734.933 H 186.476 Z M 346.642,169.079 c 17.54,17.653 26.309,41.276 26.309,70.871 0,29.822 -7.713,53.474 -23.138,70.956 -16.91,19.425 -48.047,29.137 -93.409,29.137 H 186.476 V 142.598 h 70.442 c 42.277,0 72.185,8.827 89.724,26.481 z"
126 |          id="path6"
127 |          style="fill:#3e3e3e;fill-opacity:1" />
128 |     </g>
129 |   </g>
130 | </svg>
131 | 


--------------------------------------------------------------------------------
/src/logic/utils.ts:
--------------------------------------------------------------------------------
  1 | export function range(start: number, end: number, step: number): number[] {
  2 |     let r: number[] = []
  3 |     for (let i = start; i < end; i += step)
  4 |         r.push(i)
  5 |     return r;
  6 | }
  7 | 
  8 | // the function type to get the value in a list to be used in functions like getNearest.
  9 | export type GetVal<T> = (it: T) => number | string | boolean
 10 | 
 11 | 
 12 | /**
 13 |  * get the position for the equal or greater element  just after of the given item for the specified array.
 14 |  * this function assumes the array is sorted.
 15 |  * if the key is greater than all elements in the array, -1 is returned.
 16 |  * if less is set to true, this reverse the behavior, to gett the less or equal element instead.
 17 |  * -1 is used when the conditions were not met.
 18 |  * @param val: the item to compare with, this item should be less or equals that the element to find.
 19 |  * @param arr: array of sorted elements.
 20 |  * @param fnVal: the function to get the value to be used in comparations.
 21 |  * @less: reverses the behavior. default is false.
 22 |  * @returns: the equals or greater element than the specified element, or the reverse case if less is true. -1 if the conditions were not met.
 23 |  */
 24 | export function getNearest<t>(val: number | string | boolean, arr: t[], fnVal: GetVal<t>, less: boolean = false): number {
 25 |     let max = arr.length;
 26 |     if ((max == 0) || (!less && val > fnVal(arr[max - 1])) || (less && val < fnVal(arr[0])))
 27 |         return -1
 28 |     if (max == 1)
 29 |         return 0
 30 |     if (!less && val < fnVal(arr[0]))
 31 |         return 0
 32 |     if (less && val > fnVal(arr[max - 1]))
 33 |         return max - 1
 34 |     --max;
 35 |     let min = 0;
 36 |     for (let i = 0; i <= arr.length; ++i) {
 37 |         let curPos = Math.ceil((min + max) / 2);
 38 |         let prev = fnVal(arr[curPos - 1])
 39 |         let next = fnVal(arr[curPos])
 40 |         if (prev <= val && val <= next) {
 41 |             if (prev == val)
 42 |                 return curPos - 1
 43 |             if (next == val)
 44 |                 return curPos
 45 |             return less ? curPos - 1 : curPos
 46 |         }
 47 |         if (prev < val)
 48 |             min = curPos;
 49 |         else
 50 |             max = curPos
 51 |     }
 52 |     return -1
 53 | }
 54 | 
 55 | 
 56 | /**
 57 |  * a helper to manage the local storage.
 58 |  */
 59 | export const tLocal = {
 60 |     /**
 61 |      * get the value from the local storage. The value will be parsed before return.
 62 |      * the default value, if given, won't be parsed.
 63 |      * @param key: the key to get from the local storage.
 64 |      * @param defaultValue: an optional value to be returned if the key is not found.
 65 |      * @returns: the value of the key if exist. Default value or null otherwise.
 66 |      */
 67 |     get(key: string, defaultValue?: any): any | null {
 68 |         let v = localStorage.getItem(key)
 69 |         return v !== null ? JSON.parse(v) : defaultValue ? defaultValue : v
 70 |     },
 71 | 
 72 |     /**
 73 |      * 
 74 |      * @param key: the key to asign the value.
 75 |      * @param value: an object to store. JSON.stringify will be aplied to this object.
 76 |      * @returns: true if all is OK.
 77 |      */
 78 |     set(key: string, value: any) {
 79 |         localStorage.setItem(key, JSON.stringify(value))
 80 |         return true;
 81 |     },
 82 | 
 83 |     remove(key: string) {
 84 |         localStorage.removeItem(key)
 85 |     }
 86 | }
 87 | 
 88 | 
 89 | // generates an unique id (consecutive number) to use as a ID. Just a temporal solution to do some tests.
 90 | export const uuid = {
 91 |     counter: 0,
 92 |     // tLocal.get('count', 0) as number,
 93 |     getId(): string {
 94 |         // tLocal.set("count", ++this.counter)
 95 |         ++this.counter
 96 |         return String(this.counter)
 97 |     }
 98 | }
 99 | 
100 | export function msToHumanTime(t: number): string {
101 |     let d = new Date(t)
102 |     let [day, hours] = d.toISOString().split("T") as [string, string]
103 |     hours = hours.substring(0, 8)
104 |     let stringDays = ""
105 |     for (let [i, v] of day.split("-").entries()) {
106 |         let n = Number(v)
107 |         // year
108 |         if (i === 0 && n - 1970 > 0)
109 |             stringDays = `${n - 1970} years, `
110 |         // months or days.
111 |         else if (i > 0 && n - 1 > 0)
112 |             stringDays += `${n - 1} ${i == 1 ? "months" : "days"}, `
113 |     }
114 | 
115 |     let stringHours = ""
116 |     for (let [i, v] of hours.split(":").entries()) {
117 |         let n = Number(v)
118 |         switch (i) {
119 |             case 0:
120 |                 stringHours = `${n}h, `
121 |                 break
122 |             case 1:
123 |                 stringHours += `${n}m, `
124 |                 break
125 |             case 2:
126 |                 stringHours += `${n}s`
127 |         }
128 |     }
129 |     return stringDays + stringHours
130 | }
131 | 
132 | export const dateUtils = {
133 |     getCurrentStartDay() {
134 |         let d = new Date()
135 |         d.setHours(0, 0, 0)
136 |         return d
137 |     },
138 |     getCurrentStartWeek(): Date {
139 |         let d = dateUtils.getCurrentStartDay()
140 |         d = dateUtils.sumDay(d, -d.getDay())
141 |         return d
142 |     },
143 |     getCurrentStartMonth(): Date {
144 |         let d = dateUtils.getCurrentStartDay()
145 |         d.setDate(1)
146 |         return d
147 |     },
148 | 
149 |     sumDay(date: Date, n: number): Date {
150 |         let d = new Date(date)
151 |         d.setDate(date.getDate() + n)
152 |         return d
153 |     },
154 |     sumWeek(date: Date, n: number): Date {
155 |         let d = new Date(date)
156 |         d.setDate(date.getDate() + n * 7)
157 |         return d
158 |     },
159 |     sumMonth(date: Date, n: number): Date {
160 |         let d = new Date(date)
161 |         d.setMonth(date.getMonth() + n)
162 |         return d
163 |     },
164 |     sumYear(date: Date, n: number): Date {
165 |         let d = new Date(date)
166 |         d.setFullYear(date.getFullYear() + n)
167 |         return d
168 |     }
169 | }
170 | 
171 | 
172 | const beepState = {
173 |     audioContext: undefined as AudioContext | undefined,
174 |     osc: undefined as OscillatorNode | undefined,
175 |     waitToBreak: 0,
176 |     isRunning: false
177 | }
178 | 
179 | function startAudioContext() {
180 |     if (!beepState.audioContext)
181 |         beepState.audioContext = new AudioContext()
182 | }
183 | 
184 | 
185 | /**
186 |  * produces a beep tone with a sine wave in the browser.
187 |  * @param frequency: the freq of the wave. default 440.
188 |  * @param duration: duration in ms. default is 100.
189 |  * @param volume: the volume, default is 1. Don't use very high values or you can get distorted sounds.
190 |  */
191 | export function beep(frequency: number = 440, duration: number = 100, volume: number = 1) {
192 |     startAudioContext()
193 |     if (!beepState.audioContext)
194 |         return
195 |     if (beepState.osc)
196 |         beepState.osc.stop(beepState.audioContext.currentTime)
197 |     beepState.osc = beepState.audioContext?.createOscillator() as OscillatorNode
198 |     let [osc, audio] = [beepState.osc, beepState.audioContext]
199 |     let g = audio.createGain() as GainNode
200 |     osc.connect(g)
201 |     osc.frequency.value = frequency
202 |     osc.type = "sine"
203 |     g.connect(audio.destination)
204 |     g.gain.value = volume
205 |     osc.start(audio.currentTime)
206 |     beepState.isRunning = true
207 |     osc.stop(audio.currentTime + duration * 0.001)
208 |     osc.onended = e => beepState.isRunning = false
209 | }
210 | 
211 | const WAIT_TIME = 30
212 | 
213 | /**
214 |  * for debug purposes. If a beep is running, this will wait WAIT_TIME ms more from the last beep to interrupt the current beep. This will allow to hear the differences between events.
215 |  * WAIT_TIME is set to 30 ms, change it to your needs.
216 |  * */
217 | export function beepSlower(frequency: number = 440, duration: number = 100, volume: number = 1) {
218 |     if (beepState.waitToBreak < 0)
219 |         beepState.waitToBreak = 0
220 |     if (beepState.isRunning) {
221 |         beepState.waitToBreak += WAIT_TIME
222 |         setTimeout(() => {
223 |             beep(frequency, duration, volume)
224 |             beepState.waitToBreak -= WAIT_TIME
225 |         },
226 |             beepState.waitToBreak)
227 |     }
228 |     else
229 |         beep(frequency, duration, volume)
230 | }
231 | 


--------------------------------------------------------------------------------
/src/logic/store.ts:
--------------------------------------------------------------------------------
  1 | import { Instance, types } from "mobx-state-tree"
  2 | import persist from "./localStorage"
  3 | type ReferenceIdentifier = string | number
  4 | 
  5 | import { dateUtils, getNearest, uuid } from "./utils"
  6 | 
  7 | 
  8 | const Timer = types.model("timer", {
  9 |     id: types.identifier,
 10 |     name: types.string,
 11 |     lastDuration: 0
 12 | })
 13 |     .actions(self => ({
 14 |         setName(name: string) {
 15 |             self.name = name
 16 |         },
 17 |         setLastDuration(duration: number) {
 18 |             self.lastDuration = duration
 19 |         }
 20 |     }))
 21 | export interface ITimer extends Instance<typeof Timer> { }
 22 | 
 23 | 
 24 | export const MarkTime = types.model("markTime", {
 25 |     time: types.number,
 26 |     timer: types.safeReference(Timer)
 27 | })
 28 |     .actions(self => ({
 29 |         setTimer(timer: ITimer) {
 30 |             self.timer = timer
 31 |         }
 32 |     }))
 33 | export interface IMarkTime extends Instance<typeof MarkTime> { }
 34 | 
 35 | 
 36 | function getMarkTime(mark: IMarkTime): number {
 37 |     return mark.time
 38 | }
 39 | 
 40 | 
 41 | const Board = types.model("board", {
 42 |     id: types.identifier,
 43 |     name: types.string,
 44 |     timers: types.map(Timer),
 45 |     history: types.array(MarkTime),
 46 |     mostRecent: types.array(types.safeReference(Timer, { acceptsUndefined: false }))
 47 | })
 48 |     .views(self => ({
 49 |         get lastMark(): IMarkTime | undefined {
 50 |             return self.history.at(-1)
 51 |         },
 52 | 
 53 |         getHistoryBetween(start: number, end: number): IMarkTime[] {
 54 |             const posStart = getNearest(start, self.history, getMarkTime)
 55 |             const posEnd = getNearest(end, self.history, getMarkTime, true)
 56 |             if (posStart !== -1 && posEnd !== -1) {
 57 |                 const r = self.history.slice(posStart, posEnd + 1)
 58 |                 if (r.length > 0) return r
 59 |             }
 60 |             return []
 61 |         },
 62 | 
 63 |         getPrevMark(time: number): IMarkTime | undefined {
 64 |             const pos = getNearest(time, self.history, getMarkTime, true)
 65 |             if (pos !== -1) return self.history[pos]
 66 |             return undefined
 67 |         },
 68 |         getNextMark(time: number): IMarkTime | undefined {
 69 |             const pos = getNearest(time, self.history, getMarkTime)
 70 |             if (pos !== -1) return self.history[pos]
 71 |             return undefined
 72 |         }
 73 |     }))
 74 |     .actions(self => ({
 75 |         setName(name: string) {
 76 |             self.name = name
 77 |         },
 78 | 
 79 |         updateMostRecent(timer: ITimer) {
 80 |             self.mostRecent.remove(timer)
 81 |             self.mostRecent.push(timer)
 82 |         },
 83 | 
 84 |         addTimer(timer: ITimer) {
 85 |             self.timers.put(timer)
 86 |             this.updateMostRecent(timer)
 87 |         },
 88 | 
 89 |         deleteTimer(id: string) {
 90 |             self.timers.delete(id)
 91 |             // remove marks that are not stoper marks. That is, a mark with undefined timer, after another undefined timer mark.
 92 |             for (let i = 1; i < self.history.length; ++i) {
 93 |                 if (self.history[i - 1].timer === undefined) {
 94 |                     self.history.splice(i, 1)
 95 |                     --i
 96 |                 }
 97 |             }
 98 |             if (self.history.length > 0 && self.history[0].timer === undefined)
 99 |                 self.history.splice(0, 1)
100 |         },
101 | 
102 |         startTimer(timer: ITimer | undefined, time: number) {
103 |             if (self.lastMark && self.lastMark.time > time) {
104 |                 throw Error("The mark time can't be less than the last mark time")
105 |             }
106 |             if (self.lastMark) {
107 |                 if (timer === self.lastMark.timer) return
108 |                 self.lastMark.timer?.setLastDuration(time - self.lastMark.time)
109 |             }
110 |             const m = MarkTime.create({ time: time })
111 |             self.history.push(m)
112 |             if (timer) {
113 |                 m.setTimer(timer)
114 |                 this.updateMostRecent(timer)
115 |             }
116 |         },
117 | 
118 |         stopTimer(time: number) {
119 |             this.startTimer(undefined, time)
120 |         },
121 |         updateTimers(timers: ITimer[]) {
122 |             for (const k of timers) {
123 |                 self.timers.put(k)
124 |             }
125 |         },
126 | 
127 |         updateHistory(marks: IMarkTime[]): boolean | never {
128 |             if (marks.length == 0)
129 |                 return false
130 |             if (self.history.length == 0)
131 |                 self.history.replace(marks)
132 |             else if ((marks.at(-1) as IMarkTime).time < self.history[0].time)
133 |                 self.history.replace([...marks, ...self.history])
134 |             else if ((self.lastMark as IMarkTime).time < marks[0].time)
135 |                 self.history.replace([...self.history, ...marks])
136 |             else
137 |                 throw Error(`error updating the istory of marks. The specified items are inside the current range of the history. in board ${self.id} name: ${self.name}`)
138 |             return true
139 |         }
140 |     }))
141 | export interface IBoard extends Instance<typeof Board> { }
142 | 
143 | 
144 | export interface IGenerator {
145 |     getCurrentTime(): number
146 |     generateUId(): string
147 | }
148 | 
149 | export interface IFactory {
150 |     createBoard(name: string): IBoard
151 |     createTimer(name: string, containerId: string): ITimer
152 |     createMarkTime(timer: ITimer, board: IBoard): IMarkTime
153 | }
154 | 
155 | 
156 | class Generator implements IGenerator {
157 |     getCurrentTime(): number {
158 |         return Date.now()
159 |     }
160 | 
161 |     generateUId(): string {
162 |         return uuid.getId()
163 |     }
164 | }
165 | 
166 | 
167 | class Factory implements IFactory {
168 |     public generator;
169 |     constructor(generator: IGenerator) {
170 |         this.generator = generator
171 |     }
172 | 
173 |     public createBoard(name: string): IBoard {
174 |         return Board.create({ id: this.generator.generateUId(), name: name })
175 |     }
176 | 
177 |     public createTimer(name: string, containerId: string): ITimer {
178 |         return Timer.create({ id: this.generator.generateUId(), name: name })
179 |     }
180 | 
181 |     public createMarkTime(timer: ITimer, board: IBoard): IMarkTime {
182 |         return MarkTime.create({ timer: timer.id, time: this.generator.getCurrentTime() })
183 |     }
184 | }
185 | 
186 | const Boards = types.model({
187 |     boards: types.map(Board),
188 |     currentBoard: types.safeReference(Board)
189 | }).actions(self => ({
190 |     addBoard(board: IBoard) {
191 |         self.boards.put(board)
192 |         self.currentBoard = board
193 |     },
194 |     deleteBoard(id: string) {
195 |         self.boards.delete(id)
196 |     }
197 | }))
198 | export interface IBoards extends Instance<typeof Boards> { }
199 | 
200 | function initialize() {
201 |     const f = new Factory(new Generator())
202 |     const s = Boards.create()
203 |     const b = f.createBoard("Personal")
204 |     s.addBoard(b)
205 |     b.addTimer(f.createTimer("Pereceando", ""))
206 |     b.addTimer(f.createTimer("Comiendo", ""))
207 |     b.addTimer(f.createTimer("ejercicio", ""))
208 |     b.addTimer(f.createTimer("durmiendo", ""))
209 |     b.addTimer(f.createTimer("redes sociales", ""))
210 |     b.addTimer(f.createTimer("tertulia", ""))
211 |     b.addTimer(f.createTimer("hablar con amigos", ""))
212 |     return { factory: f, store: s }
213 | }
214 | 
215 | export const { factory, store } = initialize()
216 | persist("Cronos", store)
217 | 
218 | 
219 | 
220 | /**
221 |  * an easier way to show the mark time data.
222 |  * if the duration is undefined, the duration should be updated dynamically.
223 |  */
224 | export class ReportMark implements IMarkTime {
225 |     time: number
226 |     duration: number | undefined
227 |     timer: ITimer
228 |     constructor(timer: ITimer, time: number, duration?: number) {
229 |         this.time = time
230 |         this.timer = timer
231 |         this.duration = duration
232 |     }
233 |     setTimer(timer: ITimer) {
234 |         this.timer = timer
235 |     }
236 | }
237 | 
238 | 
239 | /**
240 |  * an easier way to show the summary of a timer.
241 |  * the total duration and the number of times the timer has been activated, are saved here.
242 |  */
243 | export class TimerSummary implements ITimer {
244 |     id: string
245 |     name: string
246 |     lastDuration: number = 0
247 |     count: number = 0
248 |     constructor(id: string, name: string) {
249 |         this.id = id
250 |         this.name = name
251 |     }
252 |     setName(name: string) {
253 |         this.name = name
254 |     }
255 | 
256 |     setLastDuration(duration: number) {
257 |         this.lastDuration += duration
258 |     }
259 | 
260 |     addDuration(duration: number) {
261 |         this.lastDuration += duration
262 |     }
263 |     addCount() {
264 |         ++this.count
265 |     }
266 | }
267 | 
268 | export function getHistoryRange(startDate: Date, endDate: Date, board: IBoard): ReportMark[] {
269 |     const logRange = board.getHistoryBetween(startDate.getTime(), endDate.getTime())
270 |     let greatestTime = factory.generator.getCurrentTime()
271 |     if (greatestTime > endDate.getTime()) greatestTime = endDate.getTime()
272 |     const prev = board.getPrevMark(startDate.getTime())
273 |     // if a mark time is before the current start range, count the time from the start of the current range to the first mark of the current range.
274 |     if (prev && prev.timer) {
275 |         const time = startDate.getTime()
276 |         const duration = (logRange.length > 0? logRange[0].time: greatestTime) -time
277 |         const m = new ReportMark(prev.timer, time, duration)
278 |         logRange.unshift(m)
279 |     }
280 | 
281 |     const items: ReportMark[] = []
282 |     for (let i = 0; i < logRange!.length - 1; ++i) {
283 |         const m = logRange[i]
284 |         if (!m.timer) continue
285 |         items.push(new ReportMark(m.timer, m.time, logRange[i + 1].time - m.time))
286 |     }
287 | 
288 |     // set the duration for the last mark in the range.
289 |     const last = logRange.at(-1)
290 |     if (last && last!.timer)
291 |         items.push(new ReportMark(last.timer, last.time, greatestTime -last.time))
292 |     return items
293 | }
294 | 
295 | export function getSummaryRange(startDate: Date, endDate: Date, board: IBoard): TimerSummary[] {
296 |     const marks = getHistoryRange(startDate, endDate, board)
297 |     const summary: Record<string, TimerSummary> = {}
298 |     for (const m of marks) {
299 |         if (!(m.timer!.id in summary))
300 |             summary[m.timer!.id] = new TimerSummary(m.timer!.id, m.timer!.name)
301 |         const duration = m.duration ? m.duration : factory.generator.getCurrentTime() - m.time
302 |         summary[m.timer!.id].addDuration(duration)
303 |         summary[m.timer!.id].addCount()
304 |     }
305 |     return Object.values(summary)
306 | }
307 | 


--------------------------------------------------------------------------------
/src/views/boardComponent.tsx:
--------------------------------------------------------------------------------
  1 | import { SyntheticEvent, useEffect, useRef, useState } from 'react'
  2 | import { Box, Button, Divider, Drawer, FormControlLabel, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Radio, RadioGroup, Stack } from '@mui/material'
  3 | import { Add as AddIcon, ArrowLeftRounded, ArrowRight, ArrowRightRounded, Stop as StopIcon, TimelapseRounded } from '@mui/icons-material'
  4 | 
  5 | import { observer } from "mobx-react-lite"
  6 | 
  7 | 
  8 | import { ButtonNewDialog, ConfirmDialog, GetInputDialog, Item, useToggleFocus } from "./components"
  9 | 
 10 | import { factory, getHistoryRange, getSummaryRange, IBoard, IMarkTime, ITimer, ReportMark, TimerSummary } from "../logic/store"
 11 | import { dateUtils, msToHumanTime, uuid } from '../logic/utils'
 12 | 
 13 | 
 14 | function createTimer(board: IBoard, name: string) {
 15 |   board.addTimer(factory.createTimer(name, board.id))
 16 | }
 17 | 
 18 | function deleteTimer(board: IBoard, timer: ITimer) {
 19 |   board.deleteTimer(timer.id)
 20 | }
 21 | 
 22 | function renameTimer(timer: ITimer, name: string) {
 23 |   timer.setName(name)
 24 | }
 25 | 
 26 | function toggleTimer(board: IBoard, t: ITimer, lastMark: number | undefined) {
 27 |   const time = factory.generator.getCurrentTime()
 28 |   if (lastMark) board.stopTimer(time)
 29 |   else board.startTimer(t, time)
 30 | }
 31 | 
 32 | 
 33 | 
 34 | 
 35 | export const TimerComponent = observer((p: { timer: ITimer, lastMark: number | undefined }) => {
 36 |   const [duration, setDuration] = useState(msToHumanTime(p.timer.lastDuration))
 37 |   useEffect(() => {
 38 |     if (p.lastMark) {
 39 |       setDuration(msToHumanTime(0))
 40 |       let iv = setInterval(() => p.lastMark && setDuration(msToHumanTime(Date.now() - p.lastMark)), 1000)
 41 |       return () => clearInterval(iv)
 42 |     }
 43 |     setDuration(msToHumanTime(p.timer.lastDuration))
 44 |     return undefined
 45 |   }, [p.lastMark])
 46 | 
 47 |   return (<>{p.timer.name}. {duration}</>)
 48 | })
 49 | 
 50 | type WrapperTimerNode = (p: { timer: ITimer, lastMark: number | undefined, children: any }) => any
 51 | export const TimersView = observer((p: { board: IBoard, WrapperTimer: WrapperTimerNode }) => {
 52 |   const { board, WrapperTimer } = p
 53 | 
 54 |   const listRef = useRef<HTMLDivElement>(null)
 55 |   useEffect(() => {
 56 |     if (listRef.current) {
 57 |       listRef.current.scrollTop = 100000
 58 |       console.log("actualizando scroll", uuid.getId())
 59 |     }
 60 |   })
 61 |   console.log("construyendo board", uuid.getId(), board.history.length, board.lastMark?.time, board.lastMark?.timer?.id)
 62 | 
 63 |   return (<Box style={{ maxHeight: 500, overflow: 'auto' }} ref={listRef}>
 64 |     <List>
 65 |       {board.mostRecent.map(v => {
 66 |         let l: number | undefined = undefined
 67 |         if (board.lastMark && v.id === board.lastMark.timer?.id)
 68 |           l = board.lastMark.time
 69 |         return (<ListItem key={v.id} sx={{ width: '100vw' }}>
 70 |           <WrapperTimer timer={v} lastMark={l}>
 71 |             <TimerComponent timer={v} lastMark={l} />
 72 |           </WrapperTimer>
 73 |         </ListItem>)
 74 |       })}
 75 |     </List>
 76 |   </Box>
 77 |   )
 78 | })
 79 | 
 80 | 
 81 | export const TimersFooter = observer((p: { board: IBoard }) => {
 82 |   return (<>
 83 |     <Divider />
 84 |     <Stack spacing={2} direction='row' sx={{ width: '100%' }}>
 85 |       {p.board.lastMark?.timer && (
 86 |         <Button onClick={() => p.board.stopTimer(factory.generator.getCurrentTime())} startIcon={<StopIcon />}>
 87 |           stop {p.board.lastMark.timer.name}
 88 |         </Button>
 89 |       )}
 90 |       <ButtonNewDialog labelOpen='new timer' title='new Timer' labelInput='timer name' labelConfirm='create' onOk={(n) => createTimer(p.board, n)} />
 91 |     </Stack>
 92 |   </>)
 93 | })
 94 | 
 95 | 
 96 | export const Stopwatch = observer((p: { board: IBoard }) => {
 97 |   const Wrapper = (wp: { timer: ITimer, lastMark: number | undefined, children: any }) => (
 98 |     <ListItemButton autoFocus={wp.lastMark !== undefined}
 99 |       onClick={() => toggleTimer(p.board, wp.timer, wp.lastMark)}>
100 |       {wp.lastMark !== undefined && (<ListItemIcon><TimelapseRounded /></ListItemIcon>)}
101 |       <ListItemText>
102 |         {wp.children}
103 |       </ListItemText>
104 |     </ListItemButton>
105 |   )
106 | 
107 |   return (<Box sx={{ width: '100vw', position: 'fixed', bottom: 0 }}>
108 |     <Stack spacing={2}>
109 |       <Box>
110 |         <TimersView board={p.board} WrapperTimer={Wrapper} />
111 |       </Box>
112 |       <TimersFooter board={p.board} />
113 | 
114 |     </Stack>
115 |   </Box>
116 |   )
117 | })
118 | 
119 | export const EditTimers = observer((p: { board: IBoard }) => {
120 | 
121 |   const Wrapper = (wp: { timer: ITimer, lastMark: number | undefined, children: any }) => {
122 |     const [openDrawer, toggleDrawer, focusRef, setFocus] = useToggleFocus<HTMLButtonElement>()
123 |     const [openDialog, setOpenDialog] = useState(0)
124 | 
125 |     const handleCloseDialog = () => {
126 |       setOpenDialog(0)
127 |       setFocus()
128 |     }
129 | 
130 |     const rename = (v: string) => {
131 |       renameTimer(wp.timer, v)
132 |       handleCloseDialog()
133 |     }
134 | 
135 |     const _delete = (v: string) => {
136 |       deleteTimer(p.board, wp.timer)
137 |       handleCloseDialog()
138 |     }
139 | 
140 |     const handleKeyMouse = (event: React.KeyboardEvent | React.MouseEvent) => {
141 |       if (event.type === 'keydown') {
142 |         const key = (event as React.KeyboardEvent).key
143 |         if (key !== 'Escape') return
144 |       }
145 |       toggleDrawer()
146 |     };
147 | 
148 |     switch (openDialog) {
149 |       case 1:
150 |         return (<GetInputDialog title={`Rename timer ${wp.timer.name}`} labelInput='Timer name' onCancel={handleCloseDialog} labelConfirm='rename' onOk={rename} open={openDialog === 1} initialValue={wp.timer.name} />)
151 |       case 2:
152 |         return (<ConfirmDialog
153 |           title={`Delete timer ${wp.timer.name}?`}
154 |           description={`Are you sure to delete the timer ${wp.timer.name}? This action will delete this timer and it's related activity. This action can't be undone`}
155 |           onCancel={handleCloseDialog}
156 |           labelConfirm={`Delete ${wp.timer.name}`}
157 |           onOk={_delete}
158 |           open={openDialog === 2}
159 |         />)
160 |       default:
161 |         return (<>
162 |           <Button ref={focusRef} onClick={toggleDrawer}>{wp.children}</Button>
163 |           <Drawer open={openDrawer} onClick={handleKeyMouse} onKeyDown={handleKeyMouse} >
164 |             <List>
165 |               <ListItem disablePadding>
166 |                 <ListItemButton autoFocus onClick={() => setOpenDialog(1)}>
167 |                   <ListItemText primary="Rename" />
168 |                 </ListItemButton>
169 |               </ListItem>
170 |               <ListItem disablePadding>
171 |                 <ListItemButton onClick={() => setOpenDialog(2)}>
172 |                   <ListItemText primary="Delete" />
173 |                 </ListItemButton>
174 |               </ListItem>
175 |             </List>
176 |           </Drawer>
177 |         </>)
178 |     }
179 |   }
180 | 
181 |   return (<Box sx={{ width: '100vw' }}>
182 |     <Stack spacing={2}>
183 |       <Box style={{ maxHeight: 500, overflow: 'auto', position: 'fixed', bottom: 35 }}>
184 |         <List style={{}}>
185 |           <TimersView board={p.board} WrapperTimer={Wrapper} />
186 |         </List>
187 |       </Box>
188 |       <Box style={{ maxHeight: 25, position: 'fixed', bottom: 0, width: '100%' }}>
189 |         <Divider />
190 |         <Stack spacing={2} direction='row'>
191 |           {p.board.lastMark?.timer && (
192 |             <Box>
193 |               <button onClick={() => p.board.stopTimer(factory.generator.getCurrentTime())}>stop {p.board.lastMark.timer.name}</button>
194 |             </Box>
195 |           )}
196 |           <Box>
197 |             <ButtonNewDialog labelOpen='new timer' title='new Timer' labelInput='timer' labelConfirm='create' onOk={(n) => createTimer(p.board, n)} />
198 |           </Box>
199 |         </Stack>
200 |       </Box>
201 |     </Stack>
202 |   </Box>
203 |   )
204 | })
205 | 
206 | export function MarkTimeEntry(p: { mark: ReportMark }) {
207 |   const mark = p.mark
208 |   const [duration, setDuration] = useState(mark.duration ? mark.duration : factory.generator.getCurrentTime() - mark.time)
209 | 
210 |   useEffect(() => {
211 |     if (!mark.duration) {
212 |       let iv = setInterval(() => setDuration(Date.now() - mark.time), 1000)
213 |       return () => clearInterval(iv)
214 |     }
215 |     return undefined
216 |   }, [p.mark])
217 | 
218 |   return (<tr>
219 |     <td>
220 |       {mark.timer!.name}
221 |     </td>
222 |     <td>
223 |       {new Date(mark.time).toLocaleTimeString()}
224 |     </td>
225 |     <td>
226 |       {msToHumanTime(duration)}
227 |     </td>
228 |   </tr>)
229 | }
230 | 
231 | 
232 | interface IDatePicker {
233 |   startDate: Date
234 |   endDate: Date
235 |   setStartDate(d: Date): void
236 |   setEndDate(d: Date): void
237 | }
238 | 
239 | 
240 | function useDatePicker(): IDatePicker {
241 |   const [startDate, setStartDate] = useState<Date>(dateUtils.getCurrentStartDay)
242 |   const [endDate, setEndDate] = useState<Date>(dateUtils.sumDay(startDate, 1))
243 |   return { startDate, endDate, setStartDate, setEndDate }
244 | }
245 | 
246 | 
247 | function RangeDatePicker(props: { dateRange: IDatePicker }) {
248 |   const d = props.dateRange
249 |   const [rangeType, setRangeType] = useState("day")
250 | 
251 |   type FNStart = () => Date
252 |   type FNSum = (d: Date, n: number) => Date
253 |   const setRange = (fnStart: FNStart, fnSum: FNSum) => {
254 |     const start = fnStart()
255 |     d.setStartDate(start)
256 |     d.setEndDate(fnSum(start, 1))
257 |   }
258 |   const addToRange = (fnSum: FNSum, n: number) => {
259 |     d.setStartDate(fnSum(d.startDate, n))
260 |     d.setEndDate(fnSum(d.endDate, n))
261 |   }
262 |   const fnSumbs: Record<string, [FNStart, FNSum]> = {
263 |     day: [dateUtils.getCurrentStartDay, dateUtils.sumDay],
264 |     week: [dateUtils.getCurrentStartWeek, dateUtils.sumWeek],
265 |     month: [dateUtils.getCurrentStartMonth, dateUtils.sumMonth]
266 |   }
267 | 
268 |   const onSelectRadio = (e: SyntheticEvent<HTMLInputElement>) => {
269 |     const v = e.currentTarget.value
270 |     setRangeType(v)
271 |     setRange(fnSumbs[v]![0], fnSumbs[v][1])
272 |   }
273 | 
274 |   return (<div>
275 |     <RadioGroup defaultValue="day" onChange={onSelectRadio}>
276 |       <Stack direction="row">
277 |         <FormControlLabel label="Day" value="day" control={<Radio />} />
278 |         <FormControlLabel label="Week" value="week" control={<Radio />} />
279 |         <FormControlLabel label="Month" value="month" control={<Radio />} />
280 |       </Stack>
281 |     </RadioGroup>
282 |     <Stack direction="row">
283 |       <Button onClick={() => addToRange(fnSumbs[rangeType][1], -1)} startIcon={<ArrowLeftRounded />}>Prev {rangeType}</Button>
284 |       <Button onClick={() => addToRange(fnSumbs[rangeType][1], 1)} endIcon={<ArrowRightRounded />}>Next {rangeType}</Button>
285 |     </Stack>
286 |     <Button>from: {d.startDate.toLocaleDateString()}, to: {d.endDate.toLocaleDateString()}</Button>
287 |   </div>)
288 | }
289 | 
290 | 
291 | function ListHistory(p: { marks: ReportMark[] }) {
292 |   return (<table>
293 |     <tr>
294 |       <th>
295 |         timer
296 |       </th>
297 |       <th>
298 |         date
299 |       </th>
300 |       <th>
301 |         Duration
302 |       </th>
303 |     </tr>
304 |     {p.marks.map((v, i) => (<MarkTimeEntry key={i} mark={v} />))}
305 |   </table>)
306 | }
307 | 
308 | 
309 | function SumaryHistory(p: { summary: TimerSummary[] }) {
310 |   const [data, setData] = useState([...p.summary])
311 |   const [sortBy, setSortBy] = useState("duration")
312 |   const fnSorts = {
313 |     duration: (a: TimerSummary, b: TimerSummary) => a.lastDuration == b.lastDuration ? 0 : a.lastDuration > b.lastDuration ? -1 : 1,
314 |     count: (a: TimerSummary, b: TimerSummary) => a.count == b.count ? 0 : a.count > b.count ? -1 : 1
315 |   }
316 |   const handleSort = () => {
317 |     switch (sortBy) {
318 |       case "duration":
319 |         setData([...p.summary].sort(fnSorts.duration))
320 |         break
321 |       case "count":
322 |         setData([...p.summary].sort(fnSorts.count))
323 |         break
324 |     }
325 |   }
326 | 
327 |   useEffect(() => {
328 |     handleSort()
329 |   }, [p.summary])
330 |   return (<table>
331 |     <tr>
332 |       <th>
333 |         timer
334 |       </th>
335 |       <th>
336 |         <Button onClick={() => setSortBy("duration")}>
337 |           Total duration
338 |         </Button>
339 |       </th>
340 |       <th>
341 |         <Button onClick={() => setSortBy("count")}>
342 |           Count
343 |         </Button>
344 |       </th>
345 |     </tr>
346 |     {data.map((v) => (<tr key={v.id}>
347 |       <td>
348 |         {v.name}
349 |       </td>
350 |       <td>
351 |         {msToHumanTime(v.lastDuration)}
352 |       </td>
353 |       <td>
354 |         {v.count}
355 |       </td>
356 |     </tr>))}
357 |   </table>)
358 | }
359 | 
360 | export const LogView = observer((p: { board: IBoard }) => {
361 |   const date = useDatePicker()
362 | 
363 |   return (<Box sx={{ width: '100vh' }}>
364 |     <Stack spacing={2}>
365 |       <RangeDatePicker dateRange={date} />
366 |       <ListHistory marks={getHistoryRange(date.startDate, date.endDate, p.board)} />
367 |     </Stack>
368 |   </Box>)
369 | })
370 | 
371 | 
372 | export const SummaryView = observer((p: { board: IBoard }) => {
373 |   const date = useDatePicker()
374 | 
375 |   return (<Box sx={{ width: '100vh' }}>
376 |     <Stack spacing={2}>
377 |       <RangeDatePicker dateRange={date} />
378 |       <SumaryHistory summary={getSummaryRange(date.startDate, date.endDate, p.board)} />
379 |     </Stack>
380 |   </Box>)
381 | })
382 | 


--------------------------------------------------------------------------------