Romain/lara-bermite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add update package & weather details

Browse Source
This commit is contained in:
Romulus21
2024-04-22 23:50:59 +02:00
parent 2f2077497d
commit 49f0abd08c
9 changed files with 1038 additions and 993 deletions
Download Patch File Download Diff File Expand all files Collapse all files

425
composer.lock generated
View File

File diff suppressed because it is too large Load Diff

22
package.json
View File

@@ -12,25 +12,25 @@
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/forms": "^0.5.7", "@tailwindcss/forms": "^0.5.7",
"@types/react": "^18.2.64", "@types/react": "^18.2.79",
"@types/react-dom": "^18.2.21", "@types/react-dom": "^18.2.25",
"@typescript-eslint/eslint-plugin": "^7.1.1", "@typescript-eslint/eslint-plugin": "^7.7.1",
"@vite-pwa/assets-generator": "^0.0.11", "@vite-pwa/assets-generator": "^0.0.11",
"@vitejs/plugin-react": "^4.2.1", "@vitejs/plugin-react": "^4.2.1",
"autoprefixer": "^10.4.18", "autoprefixer": "^10.4.19",
"axios": "^1.6.7", "axios": "^1.6.8",
"eslint": "^8.57.0", "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-react-hooks": "^4.6.0",
"eslint-plugin-tailwindcss": "^3.14.3", "eslint-plugin-tailwindcss": "^3.15.1",
"laravel-vite-plugin": "^0.8.1", "laravel-vite-plugin": "^0.8.1",
"postcss": "^8.4.35", "postcss": "^8.4.38",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"rollup-plugin-copy": "^3.5.0", "rollup-plugin-copy": "^3.5.0",
"tailwindcss": "^3.4.1", "tailwindcss": "^3.4.3",
"typescript": "^5.4.2", "typescript": "^5.4.5",
"vite": "^4.5.2" "vite": "^4.5.3"
}, },
"dependencies": { "dependencies": {
"echarts": "^5.5.0", "echarts": "^5.5.0",

1510
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

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

@@ -1,15 +1,20 @@
import React from "react" import React from "react"
import {Link, useLocation} from "react-router-dom" import {Link, useLocation} from "react-router-dom"
import useAuthUser from "../hooks/AuthUser" import useAuthUser from "../hooks/AuthUser"
import useDimension from "../hooks/DimensionHook"
const Header = () => { const Header = () => {
const {authUser} = useAuthUser() const {authUser} = useAuthUser()
const location = useLocation() 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> <div>
<Link to="/">Bermite</Link> <Link to="/" className={`font-bold`}>
{dimensions.width < 400 ? 'B' : 'Bermite'}
</Link>
</div> </div>
{authUser?.locations && authUser.locations.length > 0 && <nav className="flex gap-2"> {authUser?.locations && authUser.locations.length > 0 && <nav className="flex gap-2">
@@ -19,7 +24,9 @@ const Header = () => {
{authUser {authUser
? <span className="flex gap-2"> ? <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>
: <span className="flex gap-2"> : <span className="flex gap-2">
<Link to="/connexion">Connexion</Link> <Link to="/connexion">Connexion</Link>

4
resources/js/components/rainfall/AddRainfall.tsx
View File

@@ -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"> <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 Ajout d&apos;une mesure
</h2> </h2>
@@ -38,7 +38,7 @@ const AddRainfall: FC<AddRainfallProps> = ({reload}) => {
</Field> </Field>
{!loading ? <Field type="number" {!loading ? <Field type="number"
name="value" name="value"
value={data.value} value={data.value ?? ''}
onChange={event => setData({...data, value: Number(event.target.value)})}> onChange={event => setData({...data, value: Number(event.target.value)})}>
Mesure Mesure
</Field> : <div className="h-[74px]" />} </Field> : <div className="h-[74px]" />}

6
resources/js/components/rainfall/YearRainfaill.tsx
View File

@@ -7,7 +7,7 @@ import {monthlyRainfall} from "../../types"
const YearRainfall: FC<YearRainfallProps> = ({loadedAt}) => { const YearRainfall: FC<YearRainfallProps> = ({loadedAt}) => {
const {errorCatch, errorLabel, setError, axiosGet} = useAxiosTools() const {errorCatch, errorLabel, setError, axiosGet} = useAxiosTools()
const [data, setData] = useState<monthlyRainfall[]>([]) const [data, setData] = useState<monthlyRainfall[][]>([])
useEffect(() => { useEffect(() => {
fetchData() fetchData()
@@ -27,10 +27,10 @@ const YearRainfall: FC<YearRainfallProps> = ({loadedAt}) => {
} }
return <div> 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> <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()} {errorLabel()}
<table className="w-full text-center"> <table className="w-full overflow-y-scroll text-center">
<thead> <thead>
<tr> <tr>
<th>Mois</th> <th>Mois</th>

2
resources/js/hooks/DimensionHook.tsx
View File

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

48
resources/js/pages/Weather.tsx
View File

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

1
resources/js/types.ts
View File

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