add duration

resources/js/components/TimeTrackers/TimeTrackerEdit.tsx

@@ -0,0 +1,38 @@
+import React, {FC, FormEvent, ReactEventHandler, useState} from "react"
+import Field from "../Field";
+import {timeTracker} from "../../utilities/types";
+
+const TimeTrackerEdit: FC<TimeTrackerEditProps> = ({timeTracker}) => {
+
+    const [trackerForm, setTrackerForm] = useState<timeTracker>(timeTracker)
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        console.log(trackerForm, event.target.value)
+        setTrackerForm({...trackerForm, [event.target.name]: event.target.value.replace('T', ' ')})
+    }
+
+    const onSubmit = (event: FormEvent) => {
+        event.preventDefault()
+
+        console.log(trackerForm)
+    }
+
+    return <form onSubmit={onSubmit}>
+        <Field name="start_at"
+               type="datetime-local"
+               value={trackerForm.start_at}
+               onChange={handleChange}/>
+        <Field name="end_at"
+               type="datetime-local"
+               value={trackerForm.end_at}
+               onChange={handleChange}/>
+
+        <button type="submit">Valider</button>
+    </form>
+}
+
+export default TimeTrackerEdit
+
+interface TimeTrackerEditProps {
+    timeTracker: timeTracker,
+}

resources/js/components/TimeTrackers/Tracker.tsx

@@ -0,0 +1,47 @@
+import React, {useEffect, useState} from "react"
+import useTracker from "../../hooks/TraskerHook"
+import {Link} from "react-router-dom";
+import {StopSVG} from "../SVG";
+
+const Tracker = () => {
+
+    const [timer, setTimer] = useState('')
+    const {currentTimeTracker, stopCurrentTimeTrack} = useTracker()
+
+    useEffect(() => {
+        setTimer(formatTimer(currentTimeTracker?.start_at))
+    }, [currentTimeTracker])
+
+    useEffect(() => {
+        setTimeout(() => setTimer(formatTimer(currentTimeTracker?.start_at)), 1000)
+    }, [timer]);
+
+    const formatTimer = (startAt: string|null|undefined) => {
+        if (!startAt) {
+            return '--:--'
+        }
+        let timer = Math.floor(((new Date()).getTime() - (new Date(startAt)).getTime()) / 1000)
+        return timer.durationify()
+        // let hours = Math.floor(timer / 3600)
+        // let minutes = Math.floor((timer - hours * 3600) / 60)
+        // let secondes = timer - hours * 3600 - minutes * 60
+        // return `${hours}:${String(minutes).padStart(2, '0')}:${String(secondes).padStart(2, '0')}`
+    }
+
+    return <div>
+        {currentTimeTracker
+            ? <div className="flex gap-2">
+                <Link to={`/todos/${currentTimeTracker.to_do.id}`} className="font-bold">
+                    {currentTimeTracker.to_do.name}
+                </Link>
+                <span>{timer}</span>
+                <button onClick={stopCurrentTimeTrack} className="flex items-center">
+                    <StopSVG className="w-6" />
+                </button>
+            </div>
+            : <div>--:--</div>
+        }
+    </div>
+}
+
+export default Tracker