Skip to content

Commit 1110bd1

Browse files
lailaarkadanlailaarkadan
committed
connected program and date selections to display available courses.
1 parent bac3f41 commit 1110bd1

8 files changed

Lines changed: 981 additions & 373 deletions

File tree

‎src/components/pages/ParentBooking/BookingCalendar.js‎

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,40 @@
1-
import { Calendar } from 'antd';
2-
import React from 'react';
1+
import { Alert, Calendar } from 'antd';
2+
import React, { useState } from 'react';
3+
import moment from 'moment';
34

4-
const BookingCalendar = () => {
5-
const onPanelChange = (value, mode) => {
6-
console.log(value.format('YYYY-MM-DD'), mode);
5+
const BookingCalendar = ({ handleCalendarClick }) => {
6+
const [value, setValue] = useState(moment());
7+
const [selectedValue, setSelectedValue] = useState(moment());
8+
9+
const onSelect = newValue => {
10+
setValue(newValue);
11+
setSelectedValue(newValue);
12+
};
13+
const onPanelChange = newValue => {
14+
setValue(newValue);
715
};
816

917
return (
10-
<div className="site-calendar-demo-card">
11-
<Calendar fullscreen={false} onPanelChange={onPanelChange} />
18+
<div
19+
className="site-calendar-demo-card"
20+
style={{
21+
border: '1px solid #f0f0f0',
22+
borderRadius: '2px',
23+
}}
24+
>
25+
<Alert
26+
style={{ minWidth: '600px', maxWidth: '800px' }}
27+
message={`You selected date: ${selectedValue &&
28+
selectedValue.format('MM/DD/YYYY')}`}
29+
/>
30+
<Calendar
31+
value={value}
32+
onSelect={onSelect}
33+
onPanelChange={onPanelChange}
34+
style={{ minWidth: '600px', maxWidth: '800px' }}
35+
fullscreen={false}
36+
onChange={handleCalendarClick}
37+
/>
1238
</div>
1339
);
1440
};

‎src/components/pages/ParentBooking/BookingProgram.js‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
import { Card, Radio } from 'antd';
2+
import { useState, useEffect } from 'react';
3+
import { parentDummyData } from '../../../parentDummyData';
4+
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
5+
6+
// const defaultValues = {
7+
// program: '',
8+
// course: '',
9+
// date: '',
10+
// };
11+
const BookingProgram = ({ handleRadioClick, disabled }) => {
12+
const [index, setIndex] = useState(0);
13+
// const [userChoice, setUserChoice] = useState(defaultValues);
14+
// const [disabled, setDisabled] = useState(false);
15+
// const toggleDisabled = () => {
16+
// setDisabled(!disabled);
17+
// };
18+
19+
const subjectsArray = [
20+
...new Set(
21+
parentDummyData.availableCourses.map(course => {
22+
return course.subject;
23+
})
24+
),
25+
];
26+
27+
let selectProgramArray = subjectsArray.slice(index, index + 3);
28+
29+
useEffect(() => {
30+
const lastIndex = subjectsArray.length - 1;
31+
if (index < 0) {
32+
setIndex(lastIndex);
33+
}
34+
if (index > lastIndex) {
35+
setIndex(0);
36+
}
37+
}, [index, subjectsArray]);
38+
39+
// const handleRadioClick = e => {
40+
// setUserChoice({ program: e.target.value });
41+
// console.log(userChoice);
42+
// };
43+
// const handleCalendarClick = e => {
44+
// setUserChoice({ date: e.target.value });
45+
// console.log(userChoice);
46+
// };
47+
48+
// const handleTime = e => {
49+
// setUserChoice({ time: e.target.value });
50+
// console.log(userChoice);
51+
// };
52+
53+
return (
54+
<>
55+
<div style={{ display: 'flex' }}>
56+
<button
57+
style={{ background: 'none' }}
58+
onClick={() => {
59+
if (index > 0) {
60+
setIndex(index - 1);
61+
} else if (index === 0) {
62+
setIndex(subjectsArray.length - 3);
63+
}
64+
}}
65+
>
66+
<LeftOutlined style={{ color: '#4a1e3c' }} />
67+
</button>
68+
69+
<Radio.Group
70+
style={{
71+
width: '60vw',
72+
backgroundColor: '#eeedd9',
73+
}}
74+
>
75+
<div style={{ display: 'flex', overflow: 'hidden' }}>
76+
{selectProgramArray.map((subject, index) => {
77+
return (
78+
<Card
79+
style={{
80+
padding: '5px 0 5px 5px',
81+
background: '#f35f24',
82+
alignItems: 'center',
83+
minWidth: '250px',
84+
flex: '1 ',
85+
margin: '0 10px',
86+
}}
87+
>
88+
<Radio
89+
onChange={handleRadioClick}
90+
disabled={disabled}
91+
value={subject}
92+
key={index}
93+
name="program"
94+
style={{ fontSize: '20px' }}
95+
>
96+
{subject}
97+
</Radio>
98+
</Card>
99+
);
100+
})}
101+
</div>
102+
</Radio.Group>
103+
104+
<button
105+
style={{ background: 'none' }}
106+
onClick={() => {
107+
if (index !== subjectsArray.length - 3) {
108+
setIndex(index + 1);
109+
} else if (index === subjectsArray.length - 3) {
110+
setIndex(0);
111+
}
112+
}}
113+
>
114+
<RightOutlined style={{ color: '#4a1e3c', fontWeight: 'bold' }} />
115+
</button>
116+
</div>
117+
</>
118+
);
119+
};
120+
121+
export default BookingProgram;
122+
123+
// const startTimes = parentDummyData.availableCourses.map(
124+
// time => time.start_time
125+
// );
126+
127+
// const endTimes = parentDummyData.availableCourses.map(time => time.end_time);
128+
// let durationArr = [];
129+
// let duration = '';
130+
// const [durations, setDurations] = useState([]);
131+
// const generateDurationArr = () => {
132+
// for (let i = 0; i < endTimes.length; i++) {
133+
// let difference =
134+
// parseInt(endTimes[i][0] + endTimes[i][1]) -
135+
// parseInt(startTimes[i][0] + startTimes[i][1]);
136+
// duration += difference;
137+
// if (endTimes[i][3] !== '0' || startTimes[i][3] !== '0') {
138+
// duration += ' - ' + (difference + 1);
139+
// }
140+
// duration += ' hour(s)';
141+
// durationArr.push(duration);
142+
// duration = '';
143+
// }
144+
// setDurations(durationArr);
145+
// };
146+
// useEffect(() => {
147+
// generateDurationArr();
148+
// }, [durationArr, endTimes, startTimes]);

‎src/components/pages/ParentBooking/BookingTimeBtn.js‎

Lines changed: 0 additions & 22 deletions
This file was deleted.

0 commit comments

Comments
 (0)