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

28
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,20 +10,26 @@ const Header = () => {
console.log(authUser)
return <header className="flex justify-between py-3 px-5 bg-blue-700 text-white text-xl">
<div>
<Link to="/">Ticcat</Link>
</div>
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>
{authUser && <Tracker />}
{authUser
? <span className="flex gap-2">
{authUser && <Tracker />}
{authUser
? <span className="flex gap-2">
<Link to="/profile" className={location.pathname === '/profile' ? 'font-bold' : ''}>{authUser.name}</Link>
</span>
: <span className="flex gap-2">
: <span className="flex gap-2">
<Link to="/connexion">Connexion</Link>
{/*<Link to="/sinscrire">S'inscrire</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>
}

26
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"
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,
}

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>