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>
{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">
<Field name="start_date"
type="date"

47
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 useAxiosTools from "../hooks/AxiosTools"
import {WeatherValue} from "../types"
@@ -7,9 +7,9 @@ import Img from "../components/Img"
const Weather = () => {
const [currentWeather, setCurrentWeather] = useState<WeatherValue|null>(null)
const [currentWeather, setCurrentWeather] = useState<WeatherValue | null>(null)
const [fetchTime, setFetchTime] = useState(0)
const [weatherDays, setWeatherDays] = useState<[string, WeatherValue[]][]|null>(null)
const [weatherDays, setWeatherDays] = useState<[string, WeatherValue[]][] | null>(null)
const {loading, setLoading, errorLabel, errorCatch, cleanErrors, axiosGet} = useAxiosTools()
useEffect(() => {
@@ -21,7 +21,7 @@ const Weather = () => {
return () => clearInterval(timer)
}, [fetchTime])
const getCurrentTime = () => Number(((new Date).getTime() /1000).toFixed())
const getCurrentTime = () => Number(((new Date).getTime() / 1000).toFixed())
const fetchWeather = async () => {
try {
@@ -71,18 +71,21 @@ const Weather = () => {
<Card className={`flex justify-between ${loading ? 'animate-pulse' : ''}`}>
<div className="m-2 flex flex-col justify-between">
<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 className="flex items-stretch">
<div>
{/*{currentWeather && <img src={`http://openweathermap.org/img/wn/${currentWeather?.weather[0].icon}@2x.png`}*/}
{/* alt={currentWeather?.weather[0].main} width="120px" />}*/}
{currentWeather && <Img src={`images/icons/${currentWeather?.weather[0].icon}.svg`}
alt={currentWeather?.weather[0].main} width="120px" />}
alt={currentWeather?.weather[0].main} width="120px"/>}
</div>
<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="mt-2 text-2xl text-secondary dark:text-secondary-ligth">{currentWeather?.main.temp_min.toFixed() ?? '--'} °C</span>
<span className="pt-5 text-4xl">{currentWeather?.main.temp_max.toFixed() ?? '--'} <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>
</Card>
@@ -95,9 +98,15 @@ const Weather = () => {
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(() => {
@@ -119,15 +128,15 @@ const WeatherCard: FC<{date: string, values: WeatherValue[]}> = ({date, values=
}
const tag = value.weather[0].main
if (! result[tag]) {
if (!result[tag]) {
result[tag] = 0
}
result[tag]++
})
let itemToReturn: {name:string, value: number}|null = null
let itemToReturn: { name: string, value: number } | null = null
for (const item in result) {
if (! itemToReturn || itemToReturn.value < result[item]) {
if (!itemToReturn || itemToReturn.value < result[item]) {
itemToReturn = {name: item, value: result[item]}
}
}
@@ -162,14 +171,14 @@ const WeatherCard: FC<{date: string, values: WeatherValue[]}> = ({date, values=
<span className="text-secondary dark:text-secondary-ligth">{weatherState?.min.toFixed()} °C</span>
</div>
</div>
<WeatherDetails showDetails={showDetails} closeDetails={() => showDetails(false)} values={values} />
<WeatherDetails showDetails={showDetails} closeDetails={() => showDetails(false)} values={values}/>
</>
}
const WeatherDetails: FC<{showDetails: boolean, closeDetails: () => void, values: WeatherValue[]}> = ({showDetails, closeDetails, values}) => {
const WeatherDetails: FC<WeatherDetailsProps> = ({showDetails, closeDetails, values}) => {
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`}>
{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>
@@ -186,3 +195,9 @@ const WeatherDetails: FC<{showDetails: boolean, closeDetails: () => void, values
</li>)}
</ul>
}
interface WeatherDetailsProps {
showDetails: boolean,
closeDetails: Dispatch<SetStateAction<boolean>>,
values: WeatherValue[],
}