Skip to content

P
planner-team-one
Commit 41a1b7ca authored by “Yevgeniy's avatar “Yevgeniy
Browse files
Options

#19 added concept of week view on front

parent d1b8f15f
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 996 additions and 8 deletions
planner-front/package-lock.json
View file @ 41a1b7ca
This diff is collapsed.
planner-front/package.json
View file @ 41a1b7ca
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
"dependencies": { "dependencies": {
"-": "^0.0.1", "-": "^0.0.1",
"@date-io/moment": "^2.16.1", "@date-io/moment": "^2.16.1",
"@devexpress/dx-react-scheduler-material-ui": "^3.0.6",
"@emotion/react": "^11.10.4", "@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4", "@emotion/styled": "^11.10.4",
"@mui/icons-material": "^5.10.9", "@mui/icons-material": "^5.10.9",
......
planner-front/src/App.js
View file @ 41a1b7ca
...@@ -6,6 +6,7 @@ import MyTasks from './containers/MyTasks/MyTasks'; ...@@ -6,6 +6,7 @@ import MyTasks from './containers/MyTasks/MyTasks';
import Login from './containers/Login/Login'; import Login from './containers/Login/Login';
import Register from './containers/Register/Register'; import Register from './containers/Register/Register';
import MonthCalendar from './containers/MonthCalendar/MonthCalendar'; import MonthCalendar from './containers/MonthCalendar/MonthCalendar';
import WeekCalendar from "./containers/WeekCalendar/WeekCalendar";
const ProtectedRoute = ({isAllowed, roles, redirectUrl, children}) => { const ProtectedRoute = ({isAllowed, roles, redirectUrl, children}) => {
const user = useSelector(state => state.users?.user); const user = useSelector(state => state.users?.user);
...@@ -36,7 +37,8 @@ const App = () => { ...@@ -36,7 +37,8 @@ const App = () => {
isAllowed={user} isAllowed={user}
redirectUrl={"/sign-in"} redirectUrl={"/sign-in"}
> >
<h1>week page</h1> {/* <h1>week page</h1> */}
<WeekCalendar/>
</ProtectedRoute> </ProtectedRoute>
}/> }/>
...@@ -45,7 +47,8 @@ const App = () => { ...@@ -45,7 +47,8 @@ const App = () => {
isAllowed={user} isAllowed={user}
redirectUrl={"/sign-in"} redirectUrl={"/sign-in"}
> >
<h1>week page</h1> <h1>week page</h1>
</ProtectedRoute> </ProtectedRoute>
}/> }/>
......
planner-front/src/components/UI/WeekComponents/TwoHourSwitcher.js 0 → 100644
View file @ 41a1b7ca
import React,{ useState} from 'react';
import {Switch, FormControlLabel} from '@mui/material'
const TwoHourSwitcher = ()=>{
const [twoHours, setTwoHour] = useState(true);
return (
<FormControlLabel
sx={{
display: 'block',
}}
control={
<Switch
checked={twoHours}
onChange={() => setTwoHour(!twoHours)}
name="по 2 часа"
color="primary"
/>
}
label="по 2 часа"
/>
)
}
export default TwoHourSwitcher;
\ No newline at end of file
planner-front/src/containers/WeekCalendar/WeekCalendar.js 0 → 100644
View file @ 41a1b7ca
This diff is collapsed.
planner-front/src/containers/WeekCalendar/demo-data/appointments.js 0 → 100644
View file @ 41a1b7ca
export const appointments = [
{
title: 'Website Re-Design Plan',
startDate: new Date(2018, 5, 25, 9, 0),
endDate: new Date(2018, 5, 25, 11, 0),
id: 0,
location: 'Room 1',
}, {
title: 'Book Flights to San Fran for Sales Trip',
startDate: new Date(2018, 5, 25, 12, 0),
endDate: new Date(2018, 5, 25, 13, 0),
id: 1,
location: 'Room 1',
}, {
title: 'Install New Router in Dev Room',
startDate: new Date(2018, 5, 25, 14, 0),
endDate: new Date(2018, 5, 25, 15, 0),
id: 2,
location: 'Room 2',
}, {
title: 'Approve Personal Computer Upgrade Plan',
startDate: new Date(2018, 5, 26, 10, 0),
endDate: new Date(2018, 5, 26, 11, 0),
id: 3,
location: 'Room 2',
}, {
title: 'Final Budget Review',
startDate: new Date(2018, 5, 26, 12, 0),
endDate: new Date(2018, 5, 26, 13, 0),
id: 4,
location: 'Room 2',
}, {
title: 'New Brochures',
startDate: new Date(2018, 5, 26, 14, 0),
endDate: new Date(2018, 5, 26, 15, 0),
id: 5,
location: 'Room 2',
}, {
title: 'Install New Database',
startDate: new Date(2018, 5, 27, 9, 0),
endDate: new Date(2018, 5, 27, 11, 0),
id: 6,
location: 'Room 1',
}, {
title: 'Approve New Online Marketing Strategy',
startDate: new Date(2018, 5, 27, 12, 0),
endDate: new Date(2018, 5, 27, 14, 0),
id: 7,
location: 'Room 3',
}, {
title: 'Upgrade Personal Computers',
startDate: new Date(2018, 5, 27, 15, 0),
endDate: new Date(2018, 5, 27, 16, 0),
id: 8,
location: 'Room 3',
}, {
title: 'Customer Workshop',
startDate: new Date(2018, 5, 28, 11, 0),
endDate: new Date(2018, 5, 28, 12, 0),
id: 9,
location: 'Room 3',
}, {
title: 'Prepare 2015 Marketing Plan',
startDate: new Date(2018, 5, 28, 11, 0),
endDate: new Date(2018, 5, 28, 13, 0),
id: 10,
location: 'Room 1',
}, {
title: 'Brochure Design Review',
startDate: new Date(2018, 5, 28, 14, 0),
endDate: new Date(2018, 5, 28, 15, 0),
id: 11,
location: 'Room 2',
}, {
title: 'Create Icons for Website',
startDate: new Date(2018, 5, 29, 10, 0),
endDate: new Date(2018, 5, 29, 11, 0),
id: 12,
location: 'Room 2',
}, {
title: 'Upgrade Server Hardware',
startDate: new Date(2018, 5, 29, 14, 0),
endDate: new Date(2018, 5, 29, 16, 0),
id: 13,
location: 'Room 3',
}, {
title: 'Submit New Website Design',
startDate: new Date(2018, 5, 29, 16, 0),
endDate: new Date(2018, 5, 29, 18, 0),
id: 14,
location: 'Room 3',
}, {
title: 'Launch New Website',
startDate: new Date(2018, 5, 29, 12, 0),
endDate: new Date(2018, 5, 29, 14, 0),
id: 15,
location: 'Room 2',
}, {
title: 'Website Re-Design Plan',
startDate: new Date(2018, 6, 2, 9, 0),
endDate: new Date(2018, 6, 2, 15, 0),
id: 16,
location: 'Room 1',
}, {
title: 'Book Flights to San Fran for Sales Trip',
startDate: new Date(2018, 6, 2, 12, 0),
endDate: new Date(2018, 6, 2, 13, 0),
id: 17,
location: 'Room 3',
}, {
title: 'Install New Router in Dev Room',
startDate: new Date(2018, 6, 2, 14, 0),
endDate: new Date(2018, 6, 2, 17, 0),
id: 18,
location: 'Room 2',
}, {
title: 'Approve Personal Computer Upgrade Plan',
startDate: new Date(2018, 6, 2, 16, 0),
endDate: new Date(2018, 6, 3, 9, 0),
id: 19,
location: 'Room 2',
}, {
title: 'Final Budget Review',
startDate: new Date(2018, 6, 3, 10, 0),
endDate: new Date(2018, 6, 3, 13, 0),
id: 20,
location: 'Room 1',
}, {
title: 'New Brochures',
startDate: new Date(2018, 6, 3, 14, 0),
endDate: new Date(2018, 6, 3, 15, 0),
id: 21,
location: 'Room 3',
}, {
title: 'Install New Database',
startDate: new Date(2018, 6, 3, 15, 0),
endDate: new Date(2018, 6, 4, 12, 0),
id: 22,
location: 'Room 3',
}, {
title: 'Approve New Online Marketing Strategy',
startDate: new Date(2018, 6, 4, 12, 0),
endDate: new Date(2018, 6, 4, 14, 0),
id: 23,
location: 'Room 3',
}, {
title: 'Upgrade Personal Computers',
startDate: new Date(2018, 6, 4, 15, 0),
endDate: new Date(2018, 6, 4, 20, 0),
id: 24,
location: 'Room 2',
}, {
title: 'Customer Workshop',
startDate: new Date(2018, 6, 5, 6, 0),
endDate: new Date(2018, 6, 5, 14, 0),
id: 25,
location: 'Room 1',
}, {
title: 'Customer Workshop',
startDate: new Date(2018, 6, 5, 14, 0),
endDate: new Date(2018, 6, 5, 16, 0),
id: 26,
location: 'Room 1',
}, {
title: 'Customer Workshop 2',
startDate: new Date(2018, 6, 5, 10, 0),
endDate: new Date(2018, 6, 5, 11, 0),
id: 27,
location: 'Room 2',
}, {
title: 'Prepare 2015 Marketing Plan',
startDate: new Date(2018, 6, 5, 20, 0),
endDate: new Date(2018, 6, 6, 13, 0),
id: 28,
location: 'Room 3',
}, {
title: 'Brochure Design Review',
startDate: new Date(2018, 6, 6, 14, 0),
endDate: new Date(2018, 6, 6, 15, 0),
id: 29,
location: 'Room 3',
}, {
title: 'Create Icons for Website',
startDate: new Date(2018, 6, 6, 10, 0),
endDate: new Date(2018, 6, 7, 14, 0),
id: 30,
location: 'Room 1',
}, {
title: 'Upgrade Server Hardware',
startDate: new Date(2018, 6, 3, 9, 0),
endDate: new Date(2018, 6, 3, 12, 0),
id: 31,
location: 'Room 2',
}, {
title: 'Submit New Website Design',
startDate: new Date(2018, 6, 3, 12, 0),
endDate: new Date(2018, 6, 3, 18, 0),
id: 32,
location: 'Room 2',
}, {
title: 'Launch New Website',
startDate: new Date(2018, 6, 3, 12, 0),
endDate: new Date(2018, 6, 3, 14, 0),
id: 33,
location: 'Room 2',
}, {
title: 'Book Flights to San Fran for Sales Trip',
startDate: new Date(2018, 5, 26, 0, 0),
endDate: new Date(2018, 5, 27, 0, 0),
id: 34,
location: 'Room 1',
}, {
title: 'Customer Workshop',
startDate: new Date(2018, 5, 29, 10, 0),
endDate: new Date(2018, 5, 30, 14, 0),
id: 35,
location: 'Room 1',
}, {
title: 'Google AdWords Strategy',
startDate: new Date(2018, 6, 3, 0, 0),
endDate: new Date(2018, 6, 4, 10, 0),
id: 36,
location: 'Room 3',
}, {
title: 'Rollout of New Website and Marketing Brochures',
startDate: new Date(2018, 6, 5, 10, 0),
endDate: new Date(2018, 6, 9, 14, 0),
id: 37,
location: 'Room 3',
}, {
title: 'Update NDA Agreement',
startDate: new Date(2018, 6, 1, 10, 0),
endDate: new Date(2018, 6, 3, 14, 0),
id: 38,
location: 'Room 2',
}, {
title: 'Customer Workshop',
startDate: new Date(2018, 6, 1),
endDate: new Date(2018, 6, 2),
allDay: true,
id: 39,
location: 'Room 1',
},
];
\ No newline at end of file
planner-front/src/containers/WeekCalendar/demo-data/today-appointments.js 0 → 100644
View file @ 41a1b7ca
import moment from 'moment';
import { appointments } from './appointments';
const currentDate = moment();
let date = currentDate.date();
const makeTodayAppointment = (startDate, endDate) => {
const days = moment(startDate).diff(endDate, 'days');
const nextStartDate = moment(startDate)
.year(currentDate.year())
.month(currentDate.month())
.date(date);
const nextEndDate = moment(endDate)
.year(currentDate.year())
.month(currentDate.month())
.date(date + days);
return {
startDate: nextStartDate.toDate(),
endDate: nextEndDate.toDate(),
};
};
export default appointments.map(({ startDate, endDate, ...restArgs }) => {
const result = {
...makeTodayAppointment(startDate, endDate),
...restArgs,
};
date += 1;
if (date > 31) date = 1;
return result;
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment