Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | 2x 2x 42x 42x 294x 546x 78x 1008x 294x 6762x 2x | import React from "react";
import { Container, Row, Col, Card } from 'react-bootstrap';
import SchedulerEvents from "./SchedulerEvent";
const daysOfWeek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
const hours = [
'', '1 AM', '2 AM', '3 AM', '4 AM', '5 AM', '6 AM',
'7 AM', '8 AM', '9 AM', '10 AM', '11 AM', '12 PM',
'1 PM', '2 PM', '3 PM', '4 PM', '5 PM', '6 PM',
'7 PM', '8 PM', '9 PM', '10 PM', '11 PM'
];
// Example minimum required data for event object
// {
// title: "Meeting with Team",
// day: "Tuesday",
// startTime: "2:00PM",
// endTime: "4:00PM"
// }
// Stryker disable next-line all : no need to test default colors
export default function SchedulerPanel({ Events = [], eventColor="#d1ecf188", borderColor="#bee5eb"}) {
const testId = "SchedulerPanel";
return (
<Container fluid style={styles.schedulerPanel}>
<Row style={styles.headerRow}>
<Col style={styles.timeColumn}></Col>
{daysOfWeek.map(day => (
<Col key={day} style={styles.dayColumn} data-testid={`${testId}-${day}-column`}>
<Card style={styles.dayCard}>
<Card.Body>
<Card.Title style={styles.dayTitle} data-testid={`${testId}-${day}-title`}>{day}</Card.Title>
</Card.Body>
{Events
.filter(event => event.day === day)
.map(event => (
<SchedulerEvents key={event.id} event={event} eventColor={eventColor} borderColor={borderColor}/>
))}
</Card>
</Col>
))}
</Row>
<Row>
<Col style={styles.timeColumn}>
{/* Stryker disable next-line all : no test needed for styling */
<div style={{...styles.timeSlot, height: "30px", border: "0"}}></div>}
{hours.map((hour, index) => (
/* Stryker disable next-line all : no test needed for styling */
<div key={index} style={{...styles.timeSlot, border: "0"}} data-testid={`${testId}-${hour.replace(' ', '-')}-title`}>
<span style={styles.hourLabel} data-testid={`${testId}-${hour.replace(' ', '-')}-label`}>{hour}</span>
</div>
))}
</Col>
{daysOfWeek.map(day => (
<Col key={day} style={styles.dayColumn}>
{/* Stryker disable next-line all : no test needed for styling */
<div style={{...styles.timeSlot, height: "30px"}}></div>}
{hours.slice(0, hours.length-1).map(hour => (
<div key={hour} style={styles.timeSlot} data-testid={`${testId}-base-slot`}>
<Card style={styles.eventCard}/>
</div>
))}
</Col>
))}
</Row>
</Container>
);
}
// Stryker disable all: no need to test styles
const styles = {
schedulerPanel: {
backgroundColor: "#fff",
padding: "20px",
},
headerRow: {
textAlign: "center",
},
timeColumn: {
textAlign: "right",
borderRight: "1px solid #ddd",
position: "relative",
},
dayColumn: {
padding: 0,
borderRight: "1px solid #ddd"
},
dayCard: {
backgroundColor: "#ddd",
borderRadius: "0"
},
dayTitle: {
fontSize: "1.2rem",
fontWeight: "bold"
},
timeSlot: {
height: "60px", /* Full time slot height */
display: "flex",
alignItems: "center",
justifyContent: "center",
position: "relative",
borderBottom: "1px solid #ddd",
},
eventCard: {
width: "100%",
height: "100%",
border: "0",
// borderBottom: "1px solid #eeeeee",
borderRadius: "0",
},
hourLabel: {
height: "30px", /* Half of the full time slot height */
display: "flex",
alignItems: "center",
justifyContent: "right",
position: "absolute",
top: 0,
right: "5px",
transform: "translateY(-50%)",
}
};
// Stryker restore all |