add duration

app/Http/Controllers/TimeTrackerController.php

@@ -12,9 +12,15 @@ class TimeTrackerController extends Controller
     /**
      * Display a listing of the resource.
      */
-    public function index()
+    public function index(Request $request)
     {
-        //
+        $timeTrackers = $request->user()
+            ->timeTrackers()
+            ->with('toDo')
+            ->orderBy('start_at', 'desc')
+            ->paginate();
+
+        return response()->json(TimeTrackerResource::collection($timeTrackers));
     }
 
     /**

app/Http/Resources/TimeTrackerResource.php

@@ -18,7 +18,7 @@ class TimeTrackerResource extends JsonResource
             'id' => $this->id,
             'start_at' => $this->start_at->format('Y-m-d H:i:s'),
             'end_at' => $this->end_at?->format('Y-m-d H:i:s'),
-            'to_do' => new ToDoResource($this->whenLoaded('toDo'))
+            'to_do' => new ToDoResource($this->whenLoaded('toDo')),
         ];
     }
 }

app/Mail/Reset.php

@@ -3,7 +3,6 @@
 namespace App\Mail;
 
 use Illuminate\Bus\Queueable;
-use Illuminate\Contracts\Queue\ShouldQueue;
 use Illuminate\Mail\Mailable;
 use Illuminate\Mail\Mailables\Content;
 use Illuminate\Mail\Mailables\Envelope;

app/Models/User.php

@@ -6,7 +6,7 @@ namespace App\Models;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\Relations\HasMany;
-use Illuminate\Database\Eloquent\Relations\HasOne;
+use Illuminate\Database\Eloquent\Relations\HasManyThrough;
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notifiable;
 use Laravel\Sanctum\HasApiTokens;
@@ -51,6 +51,11 @@ class User extends Authenticatable
         return $this->belongsTo(TimeTracker::class, 'time_tracker_id');
     }
 
+    public function timeTrackers(): HasManyThrough
+    {
+        return $this->hasManyThrough(TimeTracker::class, ToDo::class);
+    }
+
     public function toDos(): HasMany
     {
         return $this->hasMany(ToDo::class);

resources/js/components/Header.tsx

@@ -1,7 +1,7 @@
 import React from "react"
-import {Link, useLocation} from "react-router-dom"
+import {Link, NavLink, useLocation} from "react-router-dom"
 import useAuthUser from "../hooks/AuthUser";
-import Tracker from "./Tracker";
+import Tracker from "./TimeTrackers/Tracker";
 
 const Header = () => {
 
@@ -10,7 +10,8 @@ const Header = () => {
 
     console.log(authUser)
 
-    return <header className="flex justify-between py-3 px-5 bg-blue-700 text-white text-xl">
+    return <header className="bg-blue-700 text-white text-xl">
+        <div className="flex py-3 px-5  justify-between">
             <div>
                 <Link to="/">Ticcat</Link>
             </div>
@@ -24,6 +25,11 @@ const Header = () => {
                 <Link to="/connexion">Connexion</Link>
                     {/*<Link to="/sinscrire">S'inscrire</Link>*/}
             </span>}
+        </div>
+        <nav className="bg-gray-600 px-5 flex gap-5">
+            <NavLink to="/">ToDos</NavLink>
+            <NavLink to="/times">Times</NavLink>
+        </nav>
     </header>
 }
 

resources/js/components/Modals.tsx

@@ -0,0 +1,44 @@
+import React, {FC, FormEvent, PropsWithChildren, ReactNode} from "react"
+import ReactDOM from "react-dom"
+
+export const Modal: FC<ModalProps> = ({children, show, closeModal, ...props}) => {
+
+    const stopEvent = (event: FormEvent) => {
+        event.stopPropagation()
+        event.preventDefault()
+    }
+
+    return show && <Overlay onClick={closeModal}>
+        <div className="dark:bg-gray-900 cursor-auto dark:text-white bg-white"
+             onClick={stopEvent}
+             {...props}>
+            {children}
+        </div>
+    </Overlay>
+}
+
+interface ModalProps {
+    children: ReactNode,
+    show: boolean,
+    closeModal: () => void
+}
+
+const Overlay: FC<OverlayProps> = ({children, ...props}) => {
+
+    const app = document.getElementById('app')
+
+    if (app) {
+        return ReactDOM.createPortal(
+            <button className={"flex justify-center items-center w-full fixed inset-0 z-10 bg-gray-900/50"}
+                 {...props}>
+                {children}
+            </button>,
+            app
+        )
+    }
+}
+
+interface OverlayProps {
+    children: ReactNode,
+    onClick: () => void
+}

resources/js/components/SVG.tsx

@@ -23,6 +23,10 @@ export const DraggableSVG: FC<ComponentProps<any>> = (props) => SVGSkeleton({
     ...props
 })
 
+export const PauseSVG: FC<ComponentProps<any>> = (props) => SVGSkeleton({
+    paths: <path d="M16 19q-.825 0-1.412-.587T14 17V7q0-.825.588-1.412T16 5q.825 0 1.413.588T18 7v10q0 .825-.587 1.413T16 19m-8 0q-.825 0-1.412-.587T6 17V7q0-.825.588-1.412T8 5q.825 0 1.413.588T10 7v10q0 .825-.587 1.413T8 19"/>,
+    ...props
+})
 export const PlaySVG: FC<ComponentProps<any>> = (props) => SVGSkeleton({
     viewBox: "0 0 448 512",
     paths: <path

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

@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from "react"
-import useTracker from "../hooks/TraskerHook"
+import useTracker from "../../hooks/TraskerHook"
 import {Link} from "react-router-dom";
-import {StopSVG} from "./SVG";
+import {StopSVG} from "../SVG";
 
 const Tracker = () => {
 
@@ -21,10 +21,11 @@ const Tracker = () => {
             return '--:--'
         }
         let timer = Math.floor(((new Date()).getTime() - (new Date(startAt)).getTime()) / 1000)
-        let hours = Math.floor(timer / 3600)
+        return timer.durationify()
-        let minutes = Math.floor((timer - hours * 3600) / 60)
+        // let hours = Math.floor(timer / 3600)
-        let secondes = timer - hours * 3600 - minutes * 60
+        // let minutes = Math.floor((timer - hours * 3600) / 60)
-        return `${hours}:${String(minutes).padStart(2, '0')}:${String(secondes).padStart(2, '0')}`
+        // let secondes = timer - hours * 3600 - minutes * 60
+        // return `${hours}:${String(minutes).padStart(2, '0')}:${String(secondes).padStart(2, '0')}`
     }
 
     return <div>

resources/js/components/toDos/ToDoFinish.tsx

@@ -43,8 +43,13 @@ const ToDoFinish: FC<ToDoFinishProps>  = ({reload}) => {
         </button>
 
         {errorLabel()}
-        {showTodos && <ul className="list-disc ml-5">
+        {showTodos && <ul className="list-disc m-2">
-        {toDos.map(toDo => <li key={toDo.id}>{toDo.checked ? (new Date(toDo.checked)).toSmallFrDate() : ''} {toDo.name}</li>)}
+        {toDos.map(toDo => <li key={toDo.id} className="flex gap-2">
+            <span>{toDo.checked ? (new Date(toDo.checked)).toSmallFrDate() : ''}</span>
+            <span className="flex-1">{toDo.name}</span>
+            <span>{toDo.duration.durationify()}</span>
+
+        </li>)}
         </ul>}
     </div>
 }

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"
+                {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"/>
-                </span>}
+                    </button>}
             </li>)}
         </ul>
     </>

resources/js/components/toDos/ToDoShow.tsx

@@ -68,10 +68,11 @@ const ToDoTimeTrackers: FC<ToDoTimeTrackers> = ({toDo: toDo}) => {
         })
 
         timer = Math.floor(timer / 1000)
-        let hours = Math.floor(timer / 3600)
+        return (more ? '+' : '') + timer.durationify()
-        let minutes = Math.floor((timer - hours * 3600) / 60)
+        // let hours = Math.floor(timer / 3600)
-        let secondes = timer - hours * 3600 - minutes * 60
+        // let minutes = Math.floor((timer - hours * 3600) / 60)
-        return `${more ? '+' : ''} ${hours}:${String(minutes).padStart(2, '0')}:${String(secondes).padStart(2, '0')}`
+        // let secondes = timer - hours * 3600 - minutes * 60
+        // return `${more ? '+' : ''} ${hours}:${String(minutes).padStart(2, '0')}:${String(secondes).padStart(2, '0')}`
     }
 
     return <div>

resources/js/hooks/TraskerHook.tsx

@@ -13,7 +13,7 @@ interface TrackerProps {
 }
 
 export const TrackerProvider = ({children}: PropsWithChildren) => {
-    const [currentTimeTracker, setCurrentTimeTracker] = useState(null)
+    const [currentTimeTracker, setCurrentTimeTracker] = useState<timeTracker|null>(null)
     const [toDoTracked, setToDoTracked] = useState<toDo|null>(null)
     const {axiosGet, axiosPost, axiosDelete} = useAxiosTools()
 
@@ -23,7 +23,7 @@ export const TrackerProvider = ({children}: PropsWithChildren) => {
 
     const fetchCurrentTimeTracker = async () => {
         try {
-            const res = await axiosGet(`/api/time-tracker/user`)
+            const res = await axiosGet(`/api/time-trackers/user`)
             setCurrentTimeTracker(res.data)
         } catch (error) {
             console.error(error)
@@ -32,7 +32,7 @@ export const TrackerProvider = ({children}: PropsWithChildren) => {
 
     const startTrackToDo = async (toDo: toDo) => {
         try {
-            const res = await axiosPost('/api/time-tracker', {todo_id: toDo.id})
+            const res = await axiosPost('/api/time-trackers', {todo_id: toDo.id})
             setCurrentTimeTracker(res.data)
         } catch (error) {
             console.error(error)
@@ -41,7 +41,7 @@ export const TrackerProvider = ({children}: PropsWithChildren) => {
 
     const stopCurrentTimeTrack = async () => {
         try {
-            const res = await axiosDelete(`/api/time-tracker/user`)
+            const res = await axiosDelete(`/api/time-trackers/user`)
             setCurrentTimeTracker(null)
         } catch (error) {
             console.error(error)

resources/js/pages/Router.tsx

@@ -8,6 +8,7 @@ import Home from "./Home";
 import useAuthUser from "../hooks/AuthUser";
 import Register from "./Auth/Register";
 import ToDoShow from "../components/toDos/ToDoShow";
+import TimeTrackersIndex from "./TimeTrackersIndex";
 
 const Router = () => {
 
@@ -25,6 +26,7 @@ const Router = () => {
                         <Route path="/connexion" element={<Login />} />
                         <Route path="/inscription" element={<Register />} />
                         <Route path="/todos/:id" element={<ToDoShow />} />
+                        <Route path="/times" element={<TimeTrackersIndex />} />
                     </Routes>
                 </Suspense>
             </BrowserRouter>

resources/js/pages/TimeTrackersIndex.tsx

@@ -0,0 +1,58 @@
+import React, {useEffect, useState} from "react"
+import useAxiosTools from "../hooks/AxiosTools";
+import {timeTracker, toDo} from "../utilities/types";
+import {PlaySVG} from "../components/SVG";
+import useTracker from "../hooks/TraskerHook";
+import {Modal} from "../components/Modals";
+import TimeTrackerEdit from "../components/TimeTrackers/TimeTrackerEdit";
+
+const TimeTrackersIndex = () => {
+
+    const {loading, setLoading, errorCatch, errorLabel, axiosGet, axiosPut} = useAxiosTools(true)
+    const [timeTrackers, setTimeTrackers] = useState<timeTracker[]>([])
+    const [showTrackers, setShowTrackers] = useState<timeTracker|null>(null)
+    const {startTrackToDo} = useTracker()
+
+    useEffect(() => {
+        fetchTimeTrackers()
+    }, [])
+
+    const fetchTimeTrackers = async () => {
+        try {
+            const res = await axiosGet('api/time-trackers')
+            setTimeTrackers(res.data)
+        } catch (error) {
+            errorCatch(error)
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return <div className="p-5">
+        {errorLabel()}
+        <ul>
+            {timeTrackers.map(tracker => <li key={tracker.id} className="flex justify-between gap-5">
+                <span className="text-center w-36">{tracker.start_at ? (new Date(tracker.start_at)).toSmallFrDate() : ''}</span>
+                <span className="text-center w-36">{(new Date(tracker.end_at)).toSmallFrDate()}</span>
+                <span className={`flex-1 ${tracker.to_do.checked ? 'line-through' : ''}`}>{tracker.to_do.name}</span>
+                <span className="flex gap-2">
+                    {!tracker.to_do.checked && <button className="cursor-pointer  w-7 justify-center flex items-center"
+                            type="button"
+                            title="Commencer"
+                            onClick={() => startTrackToDo(tracker.to_do)}>
+                        <PlaySVG className="w-4"/>
+                    </button>}
+                    <button onClick={() => setShowTrackers(tracker)}>
+                        Edit
+                    </button>
+                </span>
+            </li>)}
+        </ul>
+
+        <Modal show={!!showTrackers} closeModal={() => setShowTrackers(null)}>
+            {showTrackers && <TimeTrackerEdit timeTracker={showTrackers} />}
+        </Modal>
+    </div>
+}
+
+export default TimeTrackersIndex

resources/js/utilities/customProperties.ts

@@ -1,12 +1,31 @@
 
 interface Number {
-    pad(n: number, char?: string): string
+    pad(n: number, char?: string): string,
+    durationify(): string
 }
 
 Number.prototype.pad = function(n, char = "0") {
     return (new Array(n).join(char) + this).slice(-n)
 }
 
+Number.prototype.durationify = function () {
+    if (! this) {
+        return '0s'
+    }
+    const base = Number(this)
+    const days = Math.floor(base / 60 / 60 / 24)
+    const hours = Math.floor((base - (days * 60 * 60 * 24)) / 60 / 60)
+    const minutes = Math.floor((base - (days * 60 * 60 * 24) - (hours * 60 *60)) / 60)
+    const secondes = Math.floor(base - (days * 60 * 60 * 24) - (hours * 60 *60) - (minutes *60))
+
+    let duration = ''
+    duration += (days) ? `${days}j ` : ''
+    duration += (days > 0 || hours > 0) ? `${hours}h ` : ''
+    duration += (days > 0 || hours > 0 || minutes > 0) ? `${minutes}m ` : ''
+    duration += `${secondes}s`
+    return duration
+}
+
 interface Date {
     toFrDate(): string,
     toFrTime(): string,
@@ -27,6 +46,10 @@ Date.prototype.toSmallFrDate = function() {
         return `${this.toFrTime()}`
     }
 
+    if ((new Date(this)).getFullYear() === (new Date()).getFullYear()) {
+        return `${this.getDate()}/${Number(this.getMonth() + 1).pad(2)} ${this.toFrTime()}`
+    }
+
     return `${this.toFrDate()} ${this.toFrTime()}`
 }
 

routes/api.php

@@ -25,13 +25,13 @@ Route::middleware('auth:sanctum')->group(function () {
     Route::get('/user', [AuthController::class, 'user'])->name('user');
     Route::delete('/logout', [AuthController::class, 'logout'])->name('logout');
 
-    Route::get('/time-tracker/user', [TimeTrackerController::class, 'userTimeTracker'])->name('time-tracker.user');
+    Route::get('/time-trackers/user', [TimeTrackerController::class, 'userTimeTracker'])->name('time-tracker.user');
     Route::get('/todos/{toDo}/time-trackers', [TimeTrackerController::class, 'toDoTimeTrackers'])->name('todos.time-trackers');
     Route::get('/todos/finished', [ToDoController::class, 'finished'])->name('todos.finished');
-    Route::delete('/time-tracker/user', [TimeTrackerController::class, 'stopUserTimeTracker'])->name('time-tracker.stop');
+    Route::delete('/time-trackers/user', [TimeTrackerController::class, 'stopUserTimeTracker'])->name('time-tracker.stop');
 
     Route::apiResources([
-        'time-tracker' => TimeTrackerController::class,
+        'time-trackers' => TimeTrackerController::class,
         'todos' => ToDoController::class,
     ]);
 });

tests/Feature/TimeTrackerTest.php

@@ -19,7 +19,7 @@ test('user can start a time tracker', function () {
                 'user_id' => $user->id,
                 'name' => $toDo->name,
                 'checked' => false,
-            ]
+            ],
         ]);
 });
 
@@ -41,7 +41,7 @@ test('user can retrieve his current timer', function () {
                 'user_id' => $user->id,
                 'name' => $toDo->name,
                 'checked' => false,
-            ]
+            ],
         ]);
 });