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

format code

Browse Source
This commit is contained in:
Romulus21
2024-05-25 15:54:46 +02:00
parent 64e99676ab
commit ad65ea2e35
2 changed files with 32 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/pages/Rainfall/RainfallGraph.tsx
View File

@@ -39,7 +39,7 @@ const RainfallGraph = () => {
return <PageLayout> return <PageLayout>
{errorLabel()} {errorLabel()}
<div className="mx-5 mb-2 flex items-center justify-between"> <div className="mx-5 mb-2 flex items-center justify-between flex-col md:flex-row gap-5">
<form className="flex flex-wrap gap-2"> <form className="flex flex-wrap gap-2">
<Field name="start_date" <Field name="start_date"
type="date" type="date"

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

@@ -1,4 +1,4 @@
import React, {FC, useEffect, useState} from "react" import React, {FC, Dispatch, SetStateAction, useEffect, useState} from "react"
import PageLayout from "../components/PageLayout" import PageLayout from "../components/PageLayout"
import useAxiosTools from "../hooks/AxiosTools" import useAxiosTools from "../hooks/AxiosTools"
import {WeatherValue} from "../types" import {WeatherValue} from "../types"
@@ -71,7 +71,8 @@ const Weather = () => {
<Card className={`flex justify-between ${loading ? 'animate-pulse' : ''}`}> <Card className={`flex justify-between ${loading ? 'animate-pulse' : ''}`}>
<div className="m-2 flex flex-col justify-between"> <div className="m-2 flex flex-col justify-between">
<span className="text-6xl">{currentWeather?.main.temp.toFixed() ?? '--'} °C</span> <span className="text-6xl">{currentWeather?.main.temp.toFixed() ?? '--'} °C</span>
<span className="text-secondary dark:text-secondary-ligth">{currentWeather?.weather[0].description}</span> <span
className="text-secondary dark:text-secondary-ligth">{currentWeather?.weather[0].description}</span>
</div> </div>
<div className="flex items-stretch"> <div className="flex items-stretch">
<div> <div>
@@ -81,8 +82,10 @@ const Weather = () => {
alt={currentWeather?.weather[0].main} width="120px"/>} alt={currentWeather?.weather[0].main} width="120px"/>}
</div> </div>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<span className="pt-5 text-4xl">{currentWeather?.main.temp_max.toFixed() ?? '--'} <span className="text-2xl">°C</span></span> <span className="pt-5 text-4xl">{currentWeather?.main.temp_max.toFixed() ?? '--'} <span
<span className="mt-2 text-2xl text-secondary dark:text-secondary-ligth">{currentWeather?.main.temp_min.toFixed() ?? '--'} °C</span> className="text-2xl">°C</span></span>
<span
className="mt-2 text-2xl text-secondary dark:text-secondary-ligth">{currentWeather?.main.temp_min.toFixed() ?? '--'} °C</span>
</div> </div>
</div> </div>
</Card> </Card>
@@ -97,7 +100,13 @@ 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) const [showDetails, setShowDetails] = useState(false)
useEffect(() => { useEffect(() => {
@@ -166,7 +175,7 @@ const WeatherCard: FC<{date: string, values: WeatherValue[]}> = ({date, values=
</> </>
} }
const WeatherDetails: FC<{showDetails: boolean, closeDetails: () => void, values: WeatherValue[]}> = ({showDetails, closeDetails, values}) => { const WeatherDetails: FC<WeatherDetailsProps> = ({showDetails, closeDetails, values}) => {
return <ul onClick={closeDetails} return <ul onClick={closeDetails}
className={`${showDetails ? 'h-44 opacity-100' : 'h-0 opacity-0'} flex gap-2 overflow-hidden overflow-x-auto transition-all`}> className={`${showDetails ? 'h-44 opacity-100' : 'h-0 opacity-0'} flex gap-2 overflow-hidden overflow-x-auto transition-all`}>
@@ -186,3 +195,9 @@ const WeatherDetails: FC<{showDetails: boolean, closeDetails: () => void, values
</li>)} </li>)}
</ul> </ul>
} }
interface WeatherDetailsProps {
showDetails: boolean,
closeDetails: Dispatch<SetStateAction<boolean>>,
values: WeatherValue[],
}