tietokonepaja/lootakalenteri-frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Logic to change box as picked up

Browse Source
This commit is contained in:
Veikko Lintujärvi
2025-06-17 00:26:06 +03:00
parent cb9f9b3c00
commit cb06c560f8
3 changed files with 92 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/components/Calendar.module.css
View File

@@ -35,10 +35,14 @@
border-radius: 0.5rem;
}
.deliveryDateCell {
.deliveredCell {
background-color: #62ed8e;
}
.pickedUpCell {
background-color: #6287ed;
}
.firstWeekPaddingCell {
height: 3rem;
width: 3rem;

107
app/components/Calendar.tsx
View File

@@ -4,50 +4,7 @@ import { getMonthName, daysInMonth } from "../utils/dateUtils";
import { customerState } from "../store";
import { Box } from "../types";
import { useAtom } from "jotai";
const generateFirstWeekPadding = (month: number) => {
const firstDay = new Date(new Date().getFullYear(), month, 1).getDay();
const padding = Array.from({ length: firstDay === 0 ? 6 : firstDay - 1 }, (_, index) => (
<div key={index} className={`${styles.firstWeekPaddingCell}`}>
&nbsp;
</div>
));
return padding;
}
const generateCalendarCells = (month: number, boxes: Box[]) => {
const monthDays = daysInMonth[month];
const calendarCells = Array.from({ length: monthDays }, (_, index) => {
const day = index + 1;
const date = new Date(new Date().getFullYear(), month, day);
const isDeliveryDate = boxes.find(box => {
const boxDate = new Date(box.delivery_date);
return boxDate.getDate() === day && boxDate.getMonth() === month && boxDate.getFullYear() === date.getFullYear();
});
if (isDeliveryDate) {
return (
<div key={index} className={`${styles.calendarCell} ${styles.deliveryDateCell}`}>
{date.toLocaleDateString("fi-FI", {
day: "2-digit",
month: "2-digit",
})}
</div>
);
}
return (
<div key={index} className={`${styles.calendarCell}`}>
{date.toLocaleDateString("fi-FI", {
day: "2-digit",
month: "2-digit",
})}
</div>
);
});
return calendarCells;
}
import { markBoxPickedUp } from "../api";
export default function Calendar() {
const [customerData, setCustomerData] = useAtom(customerState);
@@ -60,6 +17,68 @@ export default function Calendar() {
setFirstWeekPadding(generateFirstWeekPadding(selectedMonth));
}, [selectedMonth]);
const generateFirstWeekPadding = (month: number) => {
const firstDay = new Date(new Date().getFullYear(), month, 1).getDay();
const padding = Array.from({ length: firstDay === 0 ? 6 : firstDay - 1 }, (_, index) => (
<div key={index} className={`${styles.firstWeekPaddingCell}`}>
&nbsp;
</div>
));
return padding;
}
const generateCalendarCells = (month: number, boxes: Box[]) => {
const monthDays = daysInMonth[month];
const calendarCells = Array.from({ length: monthDays }, (_, index) => {
const day = index + 1;
const date = new Date(new Date().getFullYear(), month, day);
const matchingBox = boxes.find(box => {
const boxDate = new Date(box.delivery_date);
return boxDate.getDate() === day && boxDate.getMonth() === month && boxDate.getFullYear() === date.getFullYear();
});
if (matchingBox) {
return (
<div
key={index}
className={`${styles.calendarCell} ${matchingBox.pickup_date ? styles.pickedUpCell : styles.deliveredCell}`}
onClick={() => {
console.log(`Box picked up for date: ${date.toLocaleDateString("fi-FI")}`);
markBoxPickedUp(matchingBox.id).then((updatedBox) => {
console.log(`Box with ID ${updatedBox.id} marked as picked up.`);
setCustomerData((prev) => ({
...prev,
boxes: prev.boxes.map(box =>
box.id === updatedBox.id ? { ...box, pickup_date: updatedBox.pickup_date } : box
),
}));
}
).catch((error) => {
console.error("Error marking box as picked up:", error);
})
}}>
{date.toLocaleDateString("fi-FI", {
day: "2-digit",
month: "2-digit",
})}
</div>
);
}
return (
<div key={index} className={`${styles.calendarCell}`}>
{date.toLocaleDateString("fi-FI", {
day: "2-digit",
month: "2-digit",
})}
</div>
);
});
return calendarCells;
}
return (
<>
<h2 className={styles.monthTitle}>