Datepicker is now working
This commit is contained in:
@@ -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 });
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
Reference in New Issue
Block a user