Romain/ticcat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add duration

Browse Source
This commit is contained in:
Romulus21
2024-02-17 00:02:39 +01:00
parent 335fc8b12b
commit f27ffc1ce8
19 changed files with 248 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/Http/Controllers/TimeTrackerController.php
View File

@@ -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));
}
/**

2
app/Http/Resources/TimeTrackerResource.php
View File

@@ -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')),
];
}
}

1
app/Mail/Reset.php
View File

@@ -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;

7
app/Models/User.php
View File

@@ -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);

12
resources/js/components/Header.tsx
View File

@@ -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>
}

44
resources/js/components/Modals.tsx Normal file
View File

@@ -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
}

4
resources/js/components/SVG.tsx
View File

@@ -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

38
resources/js/components/TimeTrackers/TimeTrackerEdit.tsx Normal file
View File

@@ -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,
}

13
resources/js/components/Tracker.tsx → resources/js/components/TimeTrackers/Tracker.tsx
View File

@@ -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)
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 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>

9
resources/js/components/toDos/ToDoFinish.tsx
View File

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

18
resources/js/components/toDos/ToDoIndex.tsx
View File

@@ -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>
</>

9
resources/js/components/toDos/ToDoShow.tsx
View File

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

8
resources/js/hooks/TraskerHook.tsx
View File

@@ -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)

2
resources/js/pages/Router.tsx
View File

@@ -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>

58
resources/js/pages/TimeTrackersIndex.tsx Normal file
View File

@@ -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

25
resources/js/utilities/customProperties.ts
View File

@@ -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()}`
}

6
routes/api.php
View File

@@ -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,
]);
});

4
tests/Feature/TimeTrackerTest.php
View File

@@ -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,
]
],
]);
});