add update package & weather details

resources/js/components/Header.tsx

@@ -1,15 +1,20 @@
 import React from "react"
 import {Link, useLocation} from "react-router-dom"
 import useAuthUser from "../hooks/AuthUser"
+import useDimension from "../hooks/DimensionHook"
 
 const Header = () => {
 
     const {authUser} = useAuthUser()
     const location = useLocation()
+    const {targetRef, dimensions} = useDimension()
 
-    return <header className="flex justify-between bg-blue-700 px-5 py-3 text-xl text-white">
+    return <header ref={targetRef}
+                   className="flex justify-between bg-blue-700 px-5 py-3 text-xl text-white">
         <div>
-            <Link to="/">Bermite</Link>
+            <Link to="/" className={`font-bold`}>
+                {dimensions.width < 400 ? 'B' : 'Bermite'}
+            </Link>
         </div>
 
         {authUser?.locations && authUser.locations.length > 0 && <nav className="flex gap-2">
@@ -19,7 +24,9 @@ const Header = () => {
 
         {authUser
             ? <span className="flex gap-2">
-                <Link to="/profile" className={location.pathname === '/profile' ? 'font-bold' : ''}>{authUser.name}</Link>
+                <Link to="/profile" className={`${location.pathname === '/profile' ? 'font-bold' : ''} font-bold`}>
+                    {dimensions.width < 400 ? authUser.name[0] : authUser.name}
+                </Link>
             </span>
             : <span className="flex gap-2">
                 <Link to="/connexion">Connexion</Link>

resources/js/components/rainfall/AddRainfall.tsx

@@ -23,7 +23,7 @@ const AddRainfall: FC<AddRainfallProps> = ({reload}) => {
         }
     }
 
-    return <Card className="w-full min-w-[300px] self-start overflow-hidden md:w-auto">
+    return <Card className="w-full self-start overflow-hidden md:w-auto">
         <h2 className="-mx-2 -mt-1 bg-blue-500 px-2 py-1 text-center text-lg font-bold text-white">
             Ajout d&apos;une mesure
         </h2>
@@ -38,7 +38,7 @@ const AddRainfall: FC<AddRainfallProps> = ({reload}) => {
             </Field>
             {!loading ? <Field type="number"
                    name="value"
-                   value={data.value}
+                   value={data.value ?? ''}
                    onChange={event => setData({...data, value: Number(event.target.value)})}>
                 Mesure
             </Field> : <div className="h-[74px]" />}

resources/js/components/rainfall/YearRainfaill.tsx

@@ -7,7 +7,7 @@ import {monthlyRainfall} from "../../types"
 const YearRainfall: FC<YearRainfallProps> = ({loadedAt}) => {
 
     const {errorCatch, errorLabel, setError, axiosGet} = useAxiosTools()
-    const [data, setData] = useState<monthlyRainfall[]>([])
+    const [data, setData] = useState<monthlyRainfall[][]>([])
 
     useEffect(() => {
         fetchData()
@@ -27,10 +27,10 @@ const YearRainfall: FC<YearRainfallProps> = ({loadedAt}) => {
     }
 
     return <div>
-        <Card className="w-full min-w-[300px] self-start overflow-hidden md:w-auto">
+        <Card className="w-full self-start overflow-hidden md:w-auto">
             <h1 className="-mx-2 -mt-1 bg-blue-500 px-2 py-1 text-center text-lg font-bold text-white">Précipitations des derniers mois</h1>
             {errorLabel()}
-            <table className="w-full text-center">
+            <table className="w-full overflow-y-scroll text-center">
                 <thead>
                     <tr>
                         <th>Mois</th>

resources/js/hooks/DimensionHook.tsx

@@ -4,7 +4,7 @@ const useDimension = () => {
 
     const RESET_TIMEOUT = 300
     let movement_timer: number|undefined = undefined
-    const targetRef = useRef<HTMLDivElement|undefined>()
+    const targetRef = useRef<HTMLDivElement>(null)
     const [dimensions, setDimensions] = useState({ width:0, height: 0 })
 
     useEffect(() => {

resources/js/pages/Weather.tsx

@@ -98,6 +98,7 @@ export default Weather
 const WeatherCard: FC<{date: string, values: WeatherValue[]}> = ({date, values= []}) => {
 
     const [weatherState, setWeatherState] = useState<{main: string, description: string, icon: string, min: number, max: number}|null>(null)
+    const [showDetails, setShowDetails] = useState(false)
 
     useEffect(() => {
         const weatherState = {
@@ -142,20 +143,39 @@ const WeatherCard: FC<{date: string, values: WeatherValue[]}> = ({date, values=
         }
     }, [])
 
-    return <div className="flex gap-5">
-        <div className="flex h-full flex-1 flex-col gap-2">
-            <span className="text-lg font-bold" title={(new Date(date)).toLocaleDateString()}>{(new Date(date)).getWeekDay()}</span>
-            <span className="text-secondary dark:text-secondary-ligth">{weatherState?.description}</span>
-        </div>
-        <div className="-mt-1.5 flex items-center">
-            <Img src={`images/icons/${weatherState?.icon}.svg`}
-                 alt={weatherState?.main + ' ' + weatherState?.icon}
-                 width="80px" />
+    return <>
+        <div className="flex gap-5" onClick={(() => setShowDetails(!showDetails))}>
+            <div className="flex h-full flex-1 flex-col gap-2">
+                <span className="text-lg font-bold"
+                      title={(new Date(date)).toLocaleDateString()}>{(new Date(date)).getWeekDay()}</span>
+                <span className="text-secondary dark:text-secondary-ligth">{weatherState?.description}</span>
+            </div>
+            <div className="-mt-1.5 flex items-center">
+                <Img src={`images/icons/${weatherState?.icon}.svg`}
+                     alt={weatherState?.main + ' ' + weatherState?.icon}
+                     width="80px"/>
 
+            </div>
+            <div className="flex flex-col gap-1">
+                <span className="text-lg">{weatherState?.max.toFixed()} °C</span>
+                <span className="text-secondary dark:text-secondary-ligth">{weatherState?.min.toFixed()} °C</span>
+            </div>
         </div>
-        <div className="flex flex-col gap-1">
-            <span className="text-lg">{weatherState?.max.toFixed()} °C</span>
-            <span className="text-secondary dark:text-secondary-ligth">{weatherState?.min.toFixed()} °C</span>
-        </div>
-    </div>
+        <ul className={`${showDetails ? 'h-44 opacity-100' : 'h-0 opacity-0'} flex gap-2 overflow-hidden overflow-x-auto transition-all`}>
+            {values.map(value => <li key={value.dt} className="w-40">
+                <div className="text-center">{Number(value.dt_txt.split(' ')[1].split(':')[0])} h</div>
+                <div>
+                    <Img src={`images/icons/${value.weather[0].icon.replace('n', 'd')}.svg`}
+                         alt={weatherState?.main + ' ' + weatherState?.icon}
+                         width="80px"/>
+                </div>
+                <div className="text-center">
+                    <span className="font-bold">
+                        {value.main.temp}
+                    </span> °C
+                </div>
+                {value.weather[0].description}
+            </li>)}
+        </ul>
+    </>
 }

resources/js/types.ts

@@ -26,6 +26,7 @@ export interface WeatherRequest {
 }
 
 export interface WeatherValue {
+    dt: number,
     dt_txt: string,
     main: {
         temp: number,