- preview
+
+ {preview?.files?.map(((el,i)=>(
+
+
+
+
+ )))}
+
+ {preview?.note || ""}
+
)
}
\ No newline at end of file
diff --git a/src/app/Component/tracker.jsx b/src/app/Component/tracker.jsx
index e87db9f..b6d9d3c 100644
--- a/src/app/Component/tracker.jsx
+++ b/src/app/Component/tracker.jsx
@@ -1,31 +1,53 @@
-import { useEffect } from "react"
+import { useEffect, useState } from "react";
-export default function Tracker({calendar,setDaySelected}){
-
- useEffect(()=>{
- fetch(`/api/days`)
- },[])
- const monthLine = Object.keys(calendar).map((month, monthIndex) =>
-
-
- {month.charAt(0).toUpperCase() + month.slice(1)}
-
-
- {[...Array(calendar[month])].map(
- (dayValue, dayIndex) => (
- {setDaySelected(`${monthIndex+1}/${dayIndex+1}`)}} id={dayIndex} key={dayIndex} title={`${dayIndex+1} ${month}`} className="day"/>
- )
- )}
-
-
- )
+export default function Tracker({ calendar, setDaySelected }) {
+ const [existingDays, setExistingDays] = useState([]);
-
+ useEffect(() => {
+ fetch(`/api/days`)
+ .then(res => res.json())
+ .then(data => setExistingDays(data))
+ .then(console.log(existingDays))
+ }, []);
- return(
-
- {monthLine}
-
- )
-};
\ No newline at end of file
+
+ function getColor(rating) {
+ const colors = [
+ "#d6e6854c", // 0
+ "#d6e685", // 1
+ "#8cc665", // 2
+ "#44a340", // 3
+ "#1e6823", // 4
+ "#0f3d1a" // 5
+ ];
+
+ return colors[rating] || "#eee";
+ }
+
+ const monthLine = Object.keys(calendar).map((month, monthIndex) => (
+
+
{month.charAt(0).toUpperCase() + month.slice(1)}
+
+
+ {[...Array(calendar[month])].map((_, dayIndex) => {
+ const dayString = `${monthIndex + 1}/${dayIndex + 1}`;
+ const dayData = existingDays.find(d => d.date === dayString);
+ const rating = dayData?.appreciation ?? 0;
+
+ return (
+ setDaySelected(dayString)}
+ title={`${dayIndex + 1} ${month} (${rating}/5)`}
+ className="day"
+ style={{ backgroundColor: getColor(rating) }}
+ />
+ );
+ })}
+
+
+ ));
+
+ return
{monthLine}
;
+}
\ No newline at end of file
diff --git a/src/app/Component/upload.jsx b/src/app/Component/upload.jsx
index c2fac49..439be65 100644
--- a/src/app/Component/upload.jsx
+++ b/src/app/Component/upload.jsx
@@ -24,14 +24,18 @@ function DragDrop({setPreview ,file, setFile}) {
}
-export default function Upload({daySelected={daySelected}}){
+export default function Upload({setFetchKey, daySelected}){
const [file, setFile] = useState(null);
const [preview, setPreview] = useState(null);
+ const [note,setNote] = useState(undefined)
+ const [rating,setRating] = useState(1)
function uploadFile(){
const formData = new FormData();
formData.append("file", file);
formData.append("date", daySelected)
+ formData.append("note", note)
+ formData.append("rating", rating)
fetch("/api/days", {
method: "POST",
@@ -39,6 +43,9 @@ export default function Upload({daySelected={daySelected}}){
}).then(() => {
setFile(null);
setPreview(null);
+ setNote(undefined);
+ setRating(1);
+ setFetchKey(Math.random()*10)
});
}
@@ -51,12 +58,19 @@ export default function Upload({daySelected={daySelected}}){
-
-