add update package & weather details
This commit is contained in:
Romulus21
425
composer.lock
generated
425
composer.lock
generated
File diff suppressed because it is too large
Load Diff
22
package.json
22
package.json
@@ -12,25 +12,25 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/forms": "^0.5.7",
|
||||
"@types/react": "^18.2.64",
|
||||
"@types/react-dom": "^18.2.21",
|
||||
"@typescript-eslint/eslint-plugin": "^7.1.1",
|
||||
"@types/react": "^18.2.79",
|
||||
"@types/react-dom": "^18.2.25",
|
||||
"@typescript-eslint/eslint-plugin": "^7.7.1",
|
||||
"@vite-pwa/assets-generator": "^0.0.11",
|
||||
"@vitejs/plugin-react": "^4.2.1",
|
||||
"autoprefixer": "^10.4.18",
|
||||
"axios": "^1.6.7",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"axios": "^1.6.8",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-react": "^7.34.0",
|
||||
"eslint-plugin-react": "^7.34.1",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-tailwindcss": "^3.14.3",
|
||||
"eslint-plugin-tailwindcss": "^3.15.1",
|
||||
"laravel-vite-plugin": "^0.8.1",
|
||||
"postcss": "^8.4.35",
|
||||
"postcss": "^8.4.38",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"rollup-plugin-copy": "^3.5.0",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"typescript": "^5.4.2",
|
||||
"vite": "^4.5.2"
|
||||
"tailwindcss": "^3.4.3",
|
||||
"typescript": "^5.4.5",
|
||||
"vite": "^4.5.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"echarts": "^5.5.0",
|
||||
|
||||
1510
pnpm-lock.yaml
generated
1510
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -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>
|
||||
|
||||
@@ -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'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]" />}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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(() => {
|
||||
|
||||
@@ -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,15 +143,17 @@ const WeatherCard: FC<{date: string, values: WeatherValue[]}> = ({date, values=
|
||||
}
|
||||
}, [])
|
||||
|
||||
return <div className="flex gap-5">
|
||||
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-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" />
|
||||
width="80px"/>
|
||||
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
@@ -158,4 +161,21 @@ const WeatherCard: FC<{date: string, values: WeatherValue[]}> = ({date, values=
|
||||
<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>
|
||||
</>
|
||||
}
|
||||
|
||||
@@ -26,6 +26,7 @@ export interface WeatherRequest {
|
||||
}
|
||||
|
||||
export interface WeatherValue {
|
||||
dt: number,
|
||||
dt_txt: string,
|
||||
main: {
|
||||
temp: number,
|
||||
|
||||
Reference in New Issue
Block a user