Weather Changes & Timed Reminders #6
7 changed files with 192 additions and 6 deletions
12
src/app/create/page.js
Normal file
12
src/app/create/page.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import Image from "next/image";
|
||||
|
||||
import styles from "./page.module.css";
|
||||
|
||||
export default function Create() {
|
||||
return (
|
||||
<main className={styles.main}>
|
||||
<a href="/todo">Daily Info</a>
|
||||
<a href="/create">+</a>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
3
src/app/create/page.module.css
Normal file
3
src/app/create/page.module.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
body {
|
||||
background: #000;
|
||||
}
|
||||
|
|
@ -6,6 +6,7 @@ export default function Home() {
|
|||
return (
|
||||
<main className={styles.main}>
|
||||
<a href="/todo">Daily Info</a>
|
||||
<a href="/create">+</a>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,5 +18,10 @@
|
|||
text-decoration: none;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
border: 1px solid rgba(200, 200, 200, 0.4);
|
||||
|
||||
&:last-child {
|
||||
width: 7%;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
40
src/app/todo/daily.json
Normal file
40
src/app/todo/daily.json
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
{
|
||||
"List": [
|
||||
{
|
||||
"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"
|
||||
},
|
||||
{
|
||||
"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"
|
||||
},
|
||||
{
|
||||
"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"
|
||||
},
|
||||
{
|
||||
"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"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
import { getWeatherIcon } from "@/utils/weather.js";
|
||||
import Image from "next/image";
|
||||
import { useEffect, useState } from "react";
|
||||
import List from "./daily.json";
|
||||
import styles from "./todo.module.css";
|
||||
|
||||
const version = require("../../../package.json").version;
|
||||
|
|
@ -89,6 +90,42 @@ export default function WeatherPage() {
|
|||
return () => clearInterval(interval);
|
||||
}, [weather]);
|
||||
|
||||
const [dailyItems, setDailyItems] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
const updateDailyItems = () => {
|
||||
const now = new Date();
|
||||
const currentHour = now.getHours();
|
||||
|
||||
const filteredItems =
|
||||
List?.List?.filter((item) => {
|
||||
const timeStart = parseInt(item.timeStart);
|
||||
const timeEnd = parseInt(item.timeEnd);
|
||||
|
||||
return currentHour >= timeStart && currentHour < timeEnd;
|
||||
}) || [];
|
||||
|
||||
setDailyItems(
|
||||
filteredItems.length > 0
|
||||
? filteredItems
|
||||
: [
|
||||
{
|
||||
title: "N/A",
|
||||
desc: "No reminders",
|
||||
},
|
||||
],
|
||||
);
|
||||
};
|
||||
|
||||
// Initial check
|
||||
updateDailyItems();
|
||||
|
||||
// Check every second
|
||||
const interval = setInterval(updateDailyItems, 1000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [List]);
|
||||
|
||||
const weatherAlerts = weather?.alerts || [];
|
||||
|
||||
const futureForecasts = weather?.daily?.data.slice(1, 4) || [];
|
||||
|
|
@ -110,8 +147,44 @@ export default function WeatherPage() {
|
|||
</div>
|
||||
<span className={styles.container}>
|
||||
<span className={styles.listContainer}>
|
||||
<span className={styles.lists}>Daily ToDo Rotation</span>
|
||||
<span className={styles.lists}>Manual ToDo List</span>
|
||||
<span className={styles.lists}>
|
||||
<span className={styles.listHeader}>
|
||||
Daily Reminders
|
||||
</span>
|
||||
{dailyItems?.map((item, index) => (
|
||||
<span key={index} className={styles.dailyListItem}>
|
||||
<span className={styles.listItemTitle}>
|
||||
{item.title}
|
||||
</span>
|
||||
<span className={styles.listItemDesc}>
|
||||
{item.desc}
|
||||
</span>
|
||||
<span className={styles.listItemTime}>
|
||||
{item.textStart && item.textEnd ? (
|
||||
<>
|
||||
{item.textStart} - {item.textEnd}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{item.timeStart}:00 - {item.timeEnd}
|
||||
:00
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
</span>
|
||||
)) || "Test"}
|
||||
</span>
|
||||
<span className={styles.lists}>
|
||||
<span className={styles.listHeader}>
|
||||
Important Reminders
|
||||
</span>
|
||||
<span className={styles.dailyListItem}>
|
||||
<span className={styles.listItemTitle}>N/A</span>
|
||||
<span className={styles.listItemDesc}>
|
||||
No Reminders
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className={styles.weatherContainer}>
|
||||
|
|
|
|||
|
|
@ -77,12 +77,64 @@
|
|||
flex-direction: row;
|
||||
|
||||
.lists {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex: 1 1 100%;
|
||||
border-radius: 10px;
|
||||
background: #17171b;
|
||||
border: 1px solid rgba(200, 200, 200, 0.2);
|
||||
|
||||
.listHeader {
|
||||
margin: 5px;
|
||||
font-size: 14pt;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
width: calc(100% - 24px);
|
||||
padding: 6px 6px 4px 6px;
|
||||
border-radius: 5px 5px 2px 2px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(200, 200, 200, 0.2);
|
||||
}
|
||||
|
||||
.dailyListItem {
|
||||
padding: 5px;
|
||||
display: block;
|
||||
margin: 0 5px 5px 5px;
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(200, 200, 200, 0.1);
|
||||
|
||||
.listItemTitle {
|
||||
width: 100%;
|
||||
display: block;
|
||||
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);
|
||||
}
|
||||
|
||||
.listItemDesc {
|
||||
padding: 5px;
|
||||
display: block;
|
||||
font-size: 10pt;
|
||||
margin-bottom: 5px;
|
||||
width: calc(100% - 10px);
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -104,8 +156,8 @@
|
|||
width: calc(100% - 24px);
|
||||
padding: 6px 6px 4px 6px;
|
||||
border-radius: 5px 5px 2px 2px;
|
||||
border: 1px solid rgba(200, 200, 200, 0.2);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(200, 200, 200, 0.2);
|
||||
}
|
||||
|
||||
.weatherAlerts {
|
||||
|
|
|
|||
Loading…
Reference in a new issue