diff --git a/_doc/ToDo.md b/_doc/ToDo.md index e49b6d1..1f612c9 100644 --- a/_doc/ToDo.md +++ b/_doc/ToDo.md @@ -216,3 +216,7 @@ fix published schedule to cover end of the week графика - синк - ОК вестителите от Фабио - потребителите с двойни имейли - + + + админс can send *urgent* email to everybody to ask for shift +in schedule admin - if a publisher is always pair & family is not in the shift - add + button to add them diff --git a/components/calendar/avcalendar.tsx b/components/calendar/avcalendar.tsx index 38756c6..b77c138 100644 --- a/components/calendar/avcalendar.tsx +++ b/components/calendar/avcalendar.tsx @@ -274,6 +274,56 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => { setIsModalOpen(false); }; + + const eventStyleGetter = (event, start, end, isSelected) => { + + //console.log("eventStyleGetter: " + event); + let backgroundColor = '#3174ad'; // default color for calendar events - #3174ad + if (currentView === 'agenda') { + return { style: {} } + } + if (event.type === "assignment") { + //event.title = event.publisher.name; //ToDo: add other publishers names + } + if (event.type === "availability") { + + } + if (event.isFromPreviousAssignment) { //ToDo: does it work? + // orange-500 from Tailwind CSS + backgroundColor = '#f56565'; + } + if (event.isFromPreviousMonth) { + //gray + backgroundColor = '#a0aec0'; + } + if (event.isActive) { + switch (event.type) { + case 'assignment': + backgroundColor = event.isConfirmed ? '#48bb78' : '#f6e05e'; // green-500 and yellow-300 from Tailwind CSS + break; + case 'recurring': + backgroundColor = '#63b3ed'; // blue-300 from Tailwind CSS + break; + default: // availability + //backgroundColor = '#a0aec0'; // gray-400 from Tailwind CSS + break; + } + } else { + backgroundColor = '#a0aec0'; // Default color for inactive events + } + + return { + style: { + backgroundColor, + opacity: 0.8, + color: 'white', + border: '0px', + display: 'block', + } + }; + } + + // Custom Components const EventWrapper = ({ event, style }) => { const [isHovered, setIsHovered] = useState(false); let eventStyle = { @@ -391,55 +441,6 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => { ); }; - const eventStyleGetter = (event, start, end, isSelected) => { - - //console.log("eventStyleGetter: " + event); - let backgroundColor = '#3174ad'; // default color for calendar events - #3174ad - if (currentView === 'agenda') { - return { style: {} } - } - if (event.type === "assignment") { - //event.title = event.publisher.name; //ToDo: add other publishers names - } - if (event.type === "availability") { - - } - if (event.isFromPreviousAssignment) { //ToDo: does it work? - // orange-500 from Tailwind CSS - backgroundColor = '#f56565'; - } - if (event.isFromPreviousMonth) { - //gray - backgroundColor = '#a0aec0'; - } - if (event.isActive) { - switch (event.type) { - case 'assignment': - backgroundColor = event.isConfirmed ? '#48bb78' : '#f6e05e'; // green-500 and yellow-300 from Tailwind CSS - break; - case 'recurring': - backgroundColor = '#63b3ed'; // blue-300 from Tailwind CSS - break; - default: // availability - //backgroundColor = '#a0aec0'; // gray-400 from Tailwind CSS - break; - } - } else { - backgroundColor = '#a0aec0'; // Default color for inactive events - } - - return { - style: { - backgroundColor, - opacity: 0.8, - color: 'white', - border: '0px', - display: 'block', - } - }; - } - - // Custom Toolbar Component const CustomToolbar = ({ onNavigate, label, onView, view }) => { return ( @@ -472,6 +473,17 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => { ); }; + + const CustomEventAgenda = ({ + event + }) => ( + + {event.title} +

{event.desc}

+ + ); + + return ( <>
@@ -497,10 +509,15 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => { components={{ event: EventWrapper, toolbar: CustomToolbar, + view: CustomEventAgenda, + agenda: { + event: CustomEventAgenda + }, // ... other custom components }} eventPropGetter={(eventStyleGetter)} date={date} + showAllEvents={true} onNavigate={setDate} className="rounded-lg shadow-lg" /> diff --git a/components/layout.tsx b/components/layout.tsx index 26d877b..9d9b8b6 100644 --- a/components/layout.tsx +++ b/components/layout.tsx @@ -9,56 +9,63 @@ import Body from 'next/document' import { ToastContainer } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; +import { set } from "date-fns" -export default function Layout({ children }: { children: ReactNode }) { - const router = useRouter() - const [isSidebarOpen, setIsSidebarOpen] = useState(true); +export default function Layout({ children }) { + const router = useRouter(); - // auto resize for tablets: disabled. - // useEffect(() => { - // // Function to check and set the state based on window width - // const handleResize = () => { - // if (window.innerWidth < 768) { // Assuming 768px as the breakpoint for mobile devices - // setIsSidebarOpen(false); - // } else { - // setIsSidebarOpen(true); - // } - // }; - // // Set initial state - // handleResize(); - // // Add event listener - // window.addEventListener('resize', handleResize); - // // Cleanup - // return () => window.removeEventListener('resize', handleResize); - // }, []); + // Assuming that during SSR, we don't want the sidebar to be open. + const [isSmallScreen, setIsSmallScreen] = useState(true); + const [isSidebarOpen, setIsSidebarOpen] = useState(false); + useEffect(() => { + // This function determines if we're on a small screen + const checkIfSmallScreen = () => window.innerWidth < 768; + + // Set the initial screen size and sidebar state + const initialSmallScreenCheck = checkIfSmallScreen(); + setIsSmallScreen(initialSmallScreenCheck); + setIsSidebarOpen(!initialSmallScreenCheck); + + const handleResize = () => { + const smallScreenCheck = checkIfSmallScreen(); + setIsSmallScreen(smallScreenCheck); + + // On small screens, we want to ensure the sidebar is not open by default when resizing + if (smallScreenCheck) { + setIsSidebarOpen(false); + } + }; + + // Add event listener + window.addEventListener('resize', handleResize); + + // Cleanup event listener on component unmount + return () => window.removeEventListener('resize', handleResize); + }, []); + + // Toggle the sidebar only when the button is clicked const toggleSidebar = () => { setIsSidebarOpen(!isSidebarOpen); }; + // We use `isSmallScreen` to determine the margin-left on small screens + // and use `isSidebarOpen` to determine if we need to push the content on large screens. + const marginLeftClass = isSmallScreen ? 'ml-0' : isSidebarOpen ? 'ml-60' : 'ml-6'; + return ( - - //
- //
- //
- // - // - //
- -
-
+
-
- {children} +
+
+ {children} +
- {/*
-
-
*/}
); -} +} \ No newline at end of file diff --git a/components/sidebar.tsx b/components/sidebar.tsx index 3f2d4c2..acd412c 100644 --- a/components/sidebar.tsx +++ b/components/sidebar.tsx @@ -129,7 +129,7 @@ export default function Sidebar({ isSidebarOpen, toggleSidebar }) { className="fixed top-1 left-4 z-40 m- text-xl bg-white border border-gray-200 p-2 rounded-full shadow-lg focus:outline-none" style={{ transform: isSidebarOpen ? `translateX(${sidebarWidth - 64}px)` : 'translateX(-20px)' }}>☰