add duration

resources/js/components/toDos/ToDoIndex.tsx

@@ -5,13 +5,13 @@ import {Link} from "react-router-dom";
 import useTracker from "../../hooks/TraskerHook";
 import {Simulate} from "react-dom/test-utils";
 import load = Simulate.load;
-import {DraggableSVG, PlaySVG} from "../SVG";
+import {DraggableSVG, PauseSVG, PlaySVG} from "../SVG";
 
 const ToDoIndex: FC<ToDoIndexProps> = ({reload, setReload}) => {
 
     const {loading, setLoading, errorCatch, errorLabel, axiosGet, axiosPut} = useAxiosTools(true)
     const [toDos, setToDos] = useState<toDo[]>([])
-    const {startTrackToDo} = useTracker()
+    const {currentTimeTracker, startTrackToDo, stopCurrentTimeTrack} = useTracker()
 
     useEffect(() => {
         fetchToDos()
@@ -59,13 +59,21 @@ const ToDoIndex: FC<ToDoIndexProps> = ({reload, setReload}) => {
                 <Link to={"/todos/" + toDo.id}
                       className={`${toDo.checked ? 'line-through' : ''} flex-1 flex justify-between`}>
                     <span>{toDo.name}</span>
-                    <span className="text-gray-400 text-md mr-2">{toDo.duration} s</span>
+                    <span className="text-gray-400 text-md mr-2">{toDo.duration.durationify()}</span>
                 </Link>
-                {!toDo.checked && <span className="cursor-pointer flex items-center"
-                                        title="Commencer"
-                                        onClick={() => startTrackToDo(toDo)}>
-                    <PlaySVG className="w-4" />
-                </span>}
+                {toDo.id === currentTimeTracker?.to_do?.id
+                    ? <button className="cursor-pointer w-7  justify-center flex items-center"
+                              type="button"
+                              title="Commencer"
+                              onClick={stopCurrentTimeTrack}>
+                        <PauseSVG className="w-7"/>
+                      </button>
+                    : <button className="cursor-pointer  w-7 justify-center flex items-center"
+                              type="button"
+                              title="Commencer"
+                              onClick={() => startTrackToDo(toDo)}>
+                        <PlaySVG className="w-4"/>
+                    </button>}
             </li>)}
         </ul>
     </>
@@ -74,6 +82,6 @@ const ToDoIndex: FC<ToDoIndexProps> = ({reload, setReload}) => {
 export default ToDoIndex
 
 interface ToDoIndexProps {
-    reload: Date|null,
+    reload: Date | null,
     setReload: (date: Date) => void,
 }