Datepicker is now working

This commit is contained in:
Maxime Boulay
2025-08-19 20:31:11 +01:00
parent fd652ae936
commit e92967f85f
6 changed files with 64 additions and 39 deletions

View File

@@ -56,7 +56,7 @@ public class PurchaseController : ControllerBase
{ {
try { try {
GetUserId(); GetUserId();
return Ok(await _purchaseRepository.GetBetweenDate(_userId, DateTime.ParseExact(dateBegin, "dd-MM-yyyy", null), DateTime.ParseExact(dateEnd + " 23:59:59", "dd-MM-yyyy HH:mm:ss", null))); return Ok(await _purchaseRepository.GetBetweenDate(_userId, DateTime.ParseExact(dateBegin, "dd-MM-yyyy", null).ToLocalTime(), DateTime.ParseExact(dateEnd + " 23:59:59", "dd-MM-yyyy HH:mm:ss", null).ToLocalTime()));
} }
catch (Exception ex) { catch (Exception ex) {
return StatusCode(500, new { Message = ex.Message }); return StatusCode(500, new { Message = ex.Message });
@@ -68,7 +68,7 @@ public class PurchaseController : ControllerBase
{ {
try { try {
GetUserId(); GetUserId();
return Ok(await _purchaseRepository.GetCO2BetweenDate(_userId, DateTime.ParseExact(dateBegin, "dd-MM-yyyy", null), DateTime.ParseExact(dateEnd + " 23:59:59", "dd-MM-yyyy HH:mm:ss", null))); return Ok(await _purchaseRepository.GetCO2BetweenDate(_userId, DateTime.ParseExact(dateBegin, "dd-MM-yyyy", null).ToLocalTime(), DateTime.ParseExact(dateEnd + " 23:59:59", "dd-MM-yyyy HH:mm:ss", null).ToLocalTime()));
} }
catch (Exception ex) { catch (Exception ex) {
return StatusCode(500, new { Message = ex.Message }); return StatusCode(500, new { Message = ex.Message });

View File

@@ -9,6 +9,7 @@
"@testing-library/user-event": "^14.4.3", "@testing-library/user-event": "^14.4.3",
"axios": "^1.3.2", "axios": "^1.3.2",
"bootstrap": "5.3.5", "bootstrap": "5.3.5",
"date-fns": "^4.1.0",
"env-cmd": "^10.1.0", "env-cmd": "^10.1.0",
"http-proxy-middleware": "^3.0.5", "http-proxy-middleware": "^3.0.5",
"i18next": "25.0.1", "i18next": "25.0.1",
@@ -16,7 +17,7 @@
"i18next-xhr-backend": "3.2.2", "i18next-xhr-backend": "3.2.2",
"react": "^19.1.0", "react": "^19.1.0",
"react-bootstrap": "2.10.9", "react-bootstrap": "2.10.9",
"react-datepicker": "8.3.0", "react-datepicker": "8.6.0",
"react-dom": "^19.1.0", "react-dom": "^19.1.0",
"react-i18next": "15.4.1", "react-i18next": "15.4.1",
"react-icons": "^5.5.0", "react-icons": "^5.5.0",

View File

@@ -3,7 +3,8 @@
"createNewProduct" : "Create new product", "createNewProduct" : "Create new product",
"startDate": "Start Date", "startDate": "Start Date",
"endDate": "End Date", "endDate": "End Date",
"labelCost": "CO2 consumption from {start} to {end}", "labelCost": "CO2 consumption from ",
"dateSeparator": "to",
"date": "Date", "date": "Date",
"CO2Cost": "CO2 cost", "CO2Cost": "CO2 cost",
"WaterCost": "Water cost" "WaterCost": "Water cost"

View File

@@ -3,7 +3,8 @@
"createNewProduct" : "Créer un nouveau produit", "createNewProduct" : "Créer un nouveau produit",
"startDate": "Date de début", "startDate": "Date de début",
"endDate": "Date de fin", "endDate": "Date de fin",
"labelCost": "Utilisation de CO2 sur la période du {start} au {end}", "labelCost": "Utilisation de CO2 sur la période du ",
"dateSeparator": "au",
"date": "Date", "date": "Date",
"CO2Cost": "Coût en CO2", "CO2Cost": "Coût en CO2",
"WaterCost": "Coût en eau" "WaterCost": "Coût en eau"

View File

@@ -5,37 +5,50 @@ import ProgressBar from 'react-bootstrap/ProgressBar';
import { reset, getpurchasesbydate, deletepurchase, getCO2bydate} from '../../features/purchases/purchaseSlice' import { reset, getpurchasesbydate, deletepurchase, getCO2bydate} from '../../features/purchases/purchaseSlice'
import {LinePurchase} from './LinePurchase' import {LinePurchase} from './LinePurchase'
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import DatePicker from "react-datepicker"; import { startOfWeek, endOfWeek } from 'date-fns';
import { enGB, fr } from 'date-fns/locale';
import DatePicker, { registerLocale } from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css"; import "react-datepicker/dist/react-datepicker.css";
export const HomePurchase = () => { export const HomePurchase = () => {
const { isLoading, purchases, CO2Emissions } = useSelector((state) => state.purchase) const { isLoading, purchases, CO2Emissions } = useSelector((state) => state.purchase)
const [startDate, setStartDate] = useState(new Date()); const [startDate, setStartDate] = useState(startOfWeek(new Date(), { weekStartsOn: 1 }));
const [endDate, setEndDate] = useState(new Date()); const [endDate, setEndDate] = useState(endOfWeek(new Date(), { weekStartsOn: 1 }));
const [purchasesUser, setPurchasesUser] = useState([]); const [purchasesUser, setPurchasesUser] = useState([]);
const [CO2EmissionsPurcentage, setCO2EmissionsPurcentage] = useState(0.0); const [CO2EmissionsPurcentage, setCO2EmissionsPurcentage] = useState(0.0);
const { t } = useTranslation(["Home"]); const { t } = useTranslation(["Home"]);
const rangeSeparator = " " + t("dateSeparator") + " ";
registerLocale('en-GB', enGB);
const dispatch = useDispatch() const dispatch = useDispatch()
useEffect(() => { useEffect(() => {
setPurchasesUser(purchases); setPurchasesUser(purchases);
setCO2EmissionsPurcentage(CO2Emissions / (2500 / 365 * (endDate.getDate() - startDate.getDate() + 1)) * 100); setCO2EmissionsPurcentage((endDate === undefined) ? 0 : (CO2Emissions / (2500 / 365 * (endDate?.getDate() - startDate.getDate() + 1)) * 100));
}, [purchases, CO2Emissions]) }, [purchases, CO2Emissions]);
useEffect(() => { useEffect(() => {
changeDate(); if (endDate) {
changeDate();
}
}, [startDate, endDate]) }, [startDate, endDate])
const onChangeDates = (dates) => {
const [start, end] = dates;
setStartDate(start);
setEndDate(end);
};
function changeDate() { function changeDate() {
dispatch(reset()) dispatch(reset())
dispatch(getpurchasesbydate({ dispatch(getpurchasesbydate({
startDate: startDate.toLocaleDateString("es-CL"), startDate: startDate.toLocaleDateString("es-CL"),
endDate: endDate.toLocaleDateString("es-CL") endDate: endDate?.toLocaleDateString("es-CL")
})); }));
dispatch(getCO2bydate({ dispatch(getCO2bydate({
startDate: startDate.toLocaleDateString("es-CL"), startDate: startDate.toLocaleDateString("es-CL"),
endDate: endDate.toLocaleDateString("es-CL") endDate: endDate?.toLocaleDateString("es-CL")
})); }));
} }
@@ -52,14 +65,23 @@ export const HomePurchase = () => {
return ( return (
<> <>
<div className='center'> <div className='center'>
{t("labelCost").replace("{start}", new Intl.DateTimeFormat("fr-FR").format(startDate)).replace("{end}", new Intl.DateTimeFormat("fr-FR").format(endDate))} {t("labelCost")}
<DatePicker
dateFormat="dd/MM/yyyy"
locale="fr"
selected={startDate}
onChange={onChangeDates}
startDate={startDate}
endDate={endDate}
selectsRange
rangeSeparator={rangeSeparator}
/>
</div> </div>
<div className='mbottom-20'> <div className='mbottom-20'>
<ProgressBar now={CO2EmissionsPurcentage} label={`${CO2EmissionsPurcentage.toFixed(2)}%`} /> <ProgressBar now={CO2EmissionsPurcentage} label={`${CO2EmissionsPurcentage.toFixed(2)}%`} />
</div> </div>
<div style={{display: "flex"}} className="form-group"> <div className="form-group width-100">
<label>{t("startDate")}</label><DatePicker dateFormat="dd/MM/yyyy" selected={startDate} className="form-control" onChange={(date) => {setStartDate(date);}} />
<label>{t("endDate")}</label><DatePicker dateFormat="dd/MM/yyyy" selected={endDate} className="form-control" onChange={(date) => {setEndDate(date);}} />
</div> </div>
<div className='flex'> <div className='flex'>
<div className='form-group width-30'>{t("date")}</div> <div className='form-group width-30'>{t("date")}</div>

View File

@@ -1363,7 +1363,7 @@
dependencies: dependencies:
"@floating-ui/dom" "^1.7.3" "@floating-ui/dom" "^1.7.3"
"@floating-ui/react@^0.27.3": "@floating-ui/react@^0.27.15":
version "0.27.15" version "0.27.15"
resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.27.15.tgz#1005b01e8de79ff98de9a93717bdd1bd4fcd1949" resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.27.15.tgz#1005b01e8de79ff98de9a93717bdd1bd4fcd1949"
integrity sha512-0LGxhBi3BB1DwuSNQAmuaSuertFzNAerlMdPbotjTVnvPtdOs7CkrHLaev5NIXemhzDXNC0tFzuseut7cWA5mw== integrity sha512-0LGxhBi3BB1DwuSNQAmuaSuertFzNAerlMdPbotjTVnvPtdOs7CkrHLaev5NIXemhzDXNC0tFzuseut7cWA5mw==
@@ -3238,12 +3238,12 @@ browser-process-hrtime@^1.0.0:
integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow== integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==
browserslist@^4.0.0, browserslist@^4.18.1, browserslist@^4.21.4, browserslist@^4.24.0, browserslist@^4.24.4, browserslist@^4.25.1: browserslist@^4.0.0, browserslist@^4.18.1, browserslist@^4.21.4, browserslist@^4.24.0, browserslist@^4.24.4, browserslist@^4.25.1:
version "4.25.2" version "4.25.3"
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.25.2.tgz#90c1507143742d743544ae6e92bca3348adff667" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.25.3.tgz#9167c9cbb40473f15f75f85189290678b99b16c5"
integrity sha512-0si2SJK3ooGzIawRu61ZdPCO1IncZwS8IzuX73sPZsXW6EQ/w/DAfPyKI8l1ETTCr2MnvqWitmlCUxgdul45jA== integrity sha512-cDGv1kkDI4/0e5yON9yM5G/0A5u8sf5TnmdX5C9qHzI9PPu++sQ9zjm1k9NiOrf3riY4OkK0zSGqfvJyJsgCBQ==
dependencies: dependencies:
caniuse-lite "^1.0.30001733" caniuse-lite "^1.0.30001735"
electron-to-chromium "^1.5.199" electron-to-chromium "^1.5.204"
node-releases "^2.0.19" node-releases "^2.0.19"
update-browserslist-db "^1.1.3" update-browserslist-db "^1.1.3"
@@ -3333,7 +3333,7 @@ caniuse-api@^3.0.0:
lodash.memoize "^4.1.2" lodash.memoize "^4.1.2"
lodash.uniq "^4.5.0" lodash.uniq "^4.5.0"
caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001702, caniuse-lite@^1.0.30001733: caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001702, caniuse-lite@^1.0.30001735:
version "1.0.30001735" version "1.0.30001735"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001735.tgz#ba658fd3fd24a4106fd68d5ce472a2c251494dbe" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001735.tgz#ba658fd3fd24a4106fd68d5ce472a2c251494dbe"
integrity sha512-EV/laoX7Wq2J9TQlyIXRxTJqIw4sxfXS4OYgudGxBYRuTv0q7AM6yMEpU/Vo1I94thg9U6EZ2NfZx9GJq83u7w== integrity sha512-EV/laoX7Wq2J9TQlyIXRxTJqIw4sxfXS4OYgudGxBYRuTv0q7AM6yMEpU/Vo1I94thg9U6EZ2NfZx9GJq83u7w==
@@ -4252,10 +4252,10 @@ ejs@^3.1.6:
dependencies: dependencies:
jake "^10.8.5" jake "^10.8.5"
electron-to-chromium@^1.5.199: electron-to-chromium@^1.5.204:
version "1.5.203" version "1.5.207"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.203.tgz#ef7fc2f7e1b816fa4535c861d1ec1348204142b6" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.207.tgz#0fedde3eec615065ee95531c09a10578644c5552"
integrity sha512-uz4i0vLhfm6dLZWbz/iH88KNDV+ivj5+2SA+utpgjKaj9Q0iDLuwk6Idhe9BTxciHudyx6IvTvijhkPvFGUQ0g== integrity sha512-mryFrrL/GXDTmAtIVMVf+eIXM09BBPlO5IQ7lUyKmK8d+A4VpRGG+M3ofoVef6qyF8s60rJei8ymlJxjUA8Faw==
emittery@^0.10.2: emittery@^0.10.2:
version "0.10.2" version "0.10.2"
@@ -6008,9 +6008,9 @@ istanbul-lib-source-maps@^4.0.0:
source-map "^0.6.1" source-map "^0.6.1"
istanbul-reports@^3.1.3: istanbul-reports@^3.1.3:
version "3.1.7" version "3.2.0"
resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.1.7.tgz#daed12b9e1dca518e15c056e1e537e741280fa0b" resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.2.0.tgz#cb4535162b5784aa623cee21a7252cf2c807ac93"
integrity sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g== integrity sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==
dependencies: dependencies:
html-escaper "^2.0.0" html-escaper "^2.0.0"
istanbul-lib-report "^3.0.0" istanbul-lib-report "^3.0.0"
@@ -8228,12 +8228,12 @@ react-bootstrap@2.10.9:
uncontrollable "^7.2.1" uncontrollable "^7.2.1"
warning "^4.0.3" warning "^4.0.3"
react-datepicker@8.3.0: react-datepicker@8.6.0:
version "8.3.0" version "8.6.0"
resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-8.3.0.tgz#21d51294a953755bcc273d411fe10d12918a6f51" resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-8.6.0.tgz#2d20cc41a2a393e95016f15c3904d4a9224e5626"
integrity sha512-DhfrIJnTPJTUVRtXU7c7zooug40rD6q+Fc8UTCt19dYEotLpDQgTN98MfocY6Rc4S99oOFFEoxyanOM/TKauuw== integrity sha512-wTfsXaGwrwCTyW8TW+glxCmeD4UDgW9q8fLhQmj80A4v+vgqi9mz5d+4npT3qCc38Ivi4cLVbUcW9GS9Dhi+Ug==
dependencies: dependencies:
"@floating-ui/react" "^0.27.3" "@floating-ui/react" "^0.27.15"
clsx "^2.1.1" clsx "^2.1.1"
date-fns "^4.1.0" date-fns "^4.1.0"
@@ -10111,9 +10111,9 @@ webpack-sources@^3.3.3:
integrity sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg== integrity sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg==
webpack@^5.64.4: webpack@^5.64.4:
version "5.101.2" version "5.101.3"
resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.101.2.tgz#08c222b7acfce7da95c593e2f88ea1638a07b344" resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.101.3.tgz#3633b2375bb29ea4b06ffb1902734d977bc44346"
integrity sha512-4JLXU0tD6OZNVqlwzm3HGEhAHufSiyv+skb7q0d2367VDMzrU1Q/ZeepvkcHH0rZie6uqEtTQQe0OEOOluH3Mg== integrity sha512-7b0dTKR3Ed//AD/6kkx/o7duS8H3f1a4w3BYpIriX4BzIhjkn4teo05cptsxvLesHFKK5KObnadmCHBwGc+51A==
dependencies: dependencies:
"@types/eslint-scope" "^3.7.7" "@types/eslint-scope" "^3.7.7"
"@types/estree" "^1.0.8" "@types/estree" "^1.0.8"