diff --git a/src/app/todo/daily.json b/src/app/todo/daily.json
index 581ea3c..d5e358b 100644
--- a/src/app/todo/daily.json
+++ b/src/app/todo/daily.json
@@ -4,64 +4,50 @@
"title": "Opening Checklist",
"desc": "Complete the opening checklist to ensure all equipment is operational and ready for the day.",
"type": "3",
- "timeStart": "07",
- "timeEnd": "09",
- "textStart": "7 AM",
- "textEnd": "9 AM"
+ "timeStart": "07:30",
+ "timeEnd": "09:00"
},
{
"title": "Daily Maintenance Checklist",
"desc": "Perform daily maintenance tasks to keep equipment running smoothly.",
"type": "3",
- "timeStart": "07",
- "timeEnd": "19",
- "textStart": "7 AM",
- "textEnd": "7 PM"
+ "timeStart": "07:30",
+ "timeEnd": "19:30"
},
{
"title": "Site Inspection Checklist",
"desc": "Conduct a thorough inspection of the site to identify any potential issues.",
"type": "4",
- "timeStart": "10",
- "timeEnd": "12",
- "textStart": "10 AM",
- "textEnd": "12 PM"
+ "timeStart": "10:00",
+ "timeEnd": "12:00"
},
{
"title": "Site Inspection Checklist",
"desc": "Conduct a thorough inspection of the site to identify any potential issues.",
"type": "4",
- "timeStart": "12",
- "timeEnd": "14",
- "textStart": "12 PM",
- "textEnd": "2 PM"
+ "timeStart": "12:00",
+ "timeEnd": "14:00"
},
{
"title": "Site Inspection Checklist",
"desc": "Conduct a thorough inspection of the site to identify any potential issues.",
"type": "4",
- "timeStart": "14",
- "timeEnd": "16",
- "textStart": "2 PM",
- "textEnd": "4 PM"
+ "timeStart": "14:00",
+ "timeEnd": "16:00"
},
{
"title": "Site Inspection Checklist",
"desc": "Conduct a thorough inspection of the site to identify any potential issues.",
"type": "4",
- "timeStart": "16",
- "timeEnd": "18",
- "textStart": "4 PM",
- "textEnd": "6 PM"
+ "timeStart": "16:00",
+ "timeEnd": "18:00"
},
{
"title": "Closing Checklist",
"desc": "Complete the closing checklist to ensure all equipment is properly shut down for the day and ready for tomorrow.",
"type": "3",
- "timeStart": "18",
- "timeEnd": "20",
- "textStart": "6 PM",
- "textEnd": "8 PM"
+ "timeStart": "18:00",
+ "timeEnd": "20:00"
}
]
}
diff --git a/src/app/todo/page.js b/src/app/todo/page.js
index f6b4dbe..bdf5707 100644
--- a/src/app/todo/page.js
+++ b/src/app/todo/page.js
@@ -93,16 +93,25 @@ export default function WeatherPage() {
const [dailyItems, setDailyItems] = useState([]);
useEffect(() => {
+ const timeToMinutes = (time) => {
+ const [hours, minutes] = time.split(":").map(Number);
+ return hours * 60 + minutes;
+ };
+
const updateDailyItems = () => {
const now = new Date();
- const currentHour = now.getHours();
+
+ const currentMinutes = now.getHours() * 60 + now.getMinutes();
const filteredItems =
List?.List?.filter((item) => {
- const timeStart = parseInt(item.timeStart);
- const timeEnd = parseInt(item.timeEnd);
+ const startMinutes = timeToMinutes(item.timeStart);
+ const endMinutes = timeToMinutes(item.timeEnd);
- return currentHour >= timeStart && currentHour < timeEnd;
+ return (
+ currentMinutes >= startMinutes &&
+ currentMinutes < endMinutes
+ );
}) || [];
setDailyItems(
@@ -128,6 +137,48 @@ export default function WeatherPage() {
return () => clearInterval(interval);
}, [List]);
+ // show the percentage of time between timeStart and timeEnd for each of the daily tasks and update it automatically ocne a second. show the decimal places up to 5 decimals
+ const getTaskProgress = (item) => {
+ if (!item.timeStart || !item.timeEnd) return 0;
+
+ const [startHour, startMinute] = item.timeStart.split(":").map(Number);
+
+ const [endHour, endMinute] = item.timeEnd.split(":").map(Number);
+
+ const now = new Date();
+
+ const start = new Date(now);
+ start.setHours(startHour, startMinute, 0, 0);
+
+ const end = new Date(now);
+ end.setHours(endHour, endMinute, 0, 0);
+
+ const current = now.getTime();
+ const startTime = start.getTime();
+ const endTime = end.getTime();
+
+ const total = endTime - startTime;
+ const elapsed = current - startTime;
+
+ if (total <= 0) return 0;
+
+ return Math.min(Math.max(elapsed / total, 0), 1) * 100;
+ };
+
+ const formatTime = (time) => {
+ if (!time || time === "--") return "--";
+
+ const [hours, minutes] = time.split(":").map(Number);
+
+ const date = new Date();
+ date.setHours(hours, minutes, 0, 0);
+
+ return date.toLocaleTimeString([], {
+ hour: "numeric",
+ minute: "2-digit",
+ });
+ };
+
const weatherAlerts = weather?.alerts || [];
const futureForecasts = weather?.daily?.data.slice(1, 4) || [];
@@ -156,25 +207,28 @@ export default function WeatherPage() {
{dailyItems?.map((item, index) => (
- {item.title}
+ {item.title}
+
+
+ {formatTime(item.timeStart)} -{" "}
+ {formatTime(item.timeEnd)}
+
+
{item.desc}
-
- {item.textStart && item.textEnd ? (
- <>
- {item.textStart} - {item.textEnd}
-
- ) : (
- <>
- {item.timeStart}:00 - {item.timeEnd}
- :00
-
- )}
+
+
+
- )) || "Test"}
+ ))}
diff --git a/src/app/todo/todo.module.css b/src/app/todo/todo.module.css
index 2a7de6a..1c0ace5 100644
--- a/src/app/todo/todo.module.css
+++ b/src/app/todo/todo.module.css
@@ -79,8 +79,8 @@
.lists {
flex: 1 1 100%;
border-radius: 10px;
- background: #17171b;
- border: 1px solid rgba(200, 200, 200, 0.2);
+ /* background: #17171b; */
+ /* border: 1px solid rgba(200, 200, 200, 0.2); */
.listHeader {
margin: 5px;
@@ -104,12 +104,23 @@
.listItemTitle {
width: 100%;
- display: block;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
font-size: 16pt;
font-weight: bold;
margin: 0 0 5px 0;
color: rgba(255, 255, 255, 0.95);
border-bottom: 1px solid rgba(200, 200, 200, 0.2);
+ padding-bottom: 5px;
+
+ .listItemTime {
+ font-size: 8pt;
+ font-weight: normal;
+ white-space: nowrap;
+ color: rgba(255, 255, 255, 0.65);
+ margin-left: 10px;
+ }
}
.listItemDesc {
@@ -121,16 +132,6 @@
color: rgba(255, 255, 255, 0.75);
}
- .listItemTime {
- width: 100%;
- font-size: 8pt;
- display: block;
- text-align: right;
- padding: 5px 0 0 0;
- color: rgba(255, 255, 255, 0.8);
- border-top: 1px solid rgba(200, 200, 200, 0.075);
- }
-
&:last-child {
border-radius: 2px 2px 5px 5px;
}
@@ -138,6 +139,24 @@
}
}
+.listItemProgress {
+ display: block;
+ width: 100%;
+ height: 6px;
+ margin-top: 8px;
+ background: #333;
+ border-radius: 999px;
+ overflow: hidden;
+}
+
+.listItemProgressBar {
+ display: block;
+ height: 100%;
+ background: #4caf50;
+ border-radius: 999px;
+ transition: width 0.5s linear;
+}
+
.weatherContainer {
flex: 1 1 30%;
margin: 0 0 0 5px;