react-bootstrap#Dropdown JavaScript Examples
The following examples show how to use
react-bootstrap#Dropdown.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: editor-dropdown.jsx From codeinterview-frontend with Apache License 2.0 | 6 votes |
|
editorDropdown = ({ defaultItem, items, handler }) => {
return (
<DropdownButton
alignRight
id="dropdown-basic-button"
className="ml-auto mr-2"
title={defaultItem}
size="sm"
variant="dark"
>
{items.map(item => {
return (
<Dropdown.Item
as="button"
key={item}
onClick={e => handler(e, item)}
>
{item}
</Dropdown.Item>
);
})}
</DropdownButton>
);
}
Example #2
| Source File: Export.js From anutimetable with Creative Commons Attribution Share Alike 4.0 International | 6 votes |
|
Export = ({ API, year, session }) => {
const [path, setPath] = useState('')
const encoded = encodeURIComponent('http://'+path)
const name = `ANU Timetable ${session} ${year}`
return <DropdownButton
style={{flexGrow: 1}}
as={InputGroup.Append}
alignRight
title='Export'
variant='outline-primary'
id='export-button'
onClick={() => setPath(`${API}/GetICS${window.location.search}`)}
>
<Dropdown.Item eventKey="web" target={"_blank"} rel={"noreferrer"}
href={`webcal://${path}`}>
<SiApple /> WebCal (eg iOS)
</Dropdown.Item>
<Dropdown.Item eventKey="gcal" target={"_blank"} rel={"noreferrer"}
href={`https://www.google.com/calendar/render?cid=${encoded}`}>
<SiGooglecalendar /> Google Calendar
</Dropdown.Item>
<Dropdown.Item eventKey="msol" target={"_blank"} rel={"noreferrer"}
// undocumented OWA MSOL/AAD deeplinks. removing the 0 is supposed to work and could be necessary for some accounts
// but in our case it drops all but the first qs param during parsing (maybe need double-encode?) and adds a 10s+ delay
// source code - /owa/node_modules/calendar-bootstrap-config/src/routing/browseDiscoverCalendarsRouteHandler.ts
href={`https://outlook.live.com/calendar/0/addfromweb?name=${name}&url=${encoded}`}>
<SiMicrosoftoutlook /> Outlook.com
</Dropdown.Item>
<Dropdown.Item eventKey="aad" target={"_blank"} rel={"noreferrer"}
href={`https://outlook.office.com/calendar/0/addfromweb?name=${name}&url=${encoded}`}>
<SiMicrosoftexchange /> Office 365
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="ics" download={`${name} as of ${new Date().toLocaleDateString().replace(/(\/|\\)/g,'.')}.ics`} href={`${window.location.protocol}//${path}`}>
<RiCalendar2Fill /> Download ICS file
</Dropdown.Item>
</DropdownButton>
}
Example #3
| Source File: Navbar.js From project-avocado-web with MIT License | 6 votes |
|
render () {
return (
<nav className="navbar col-lg-12 col-12 p-lg-0 fixed-top d-flex flex-row">
<div className="navbar-menu-wrapper d-flex align-items-center justify-content-between">
<a className="navbar-brand brand-logo-mini align-self-center d-lg-none" href="!#" onClick={evt =>evt.preventDefault()}><img src={require("../../assets/images/logo-mini.png")} height={42} alt="logo" /></a>
<button className="navbar-toggler navbar-toggler align-self-center" type="button" onClick={ () => document.body.classList.toggle('sidebar-icon-only') }>
<i className="mdi mdi-menu"></i>
</button>
<ul className="navbar-nav navbar-nav-right ml-lg-auto">
<li className="nav-item nav-profile border-0">
<Dropdown alignRight>
<Dropdown.Toggle className="nav-link count-indicator bg-transparent">
<span className="profile-text">Name</span>
<img className="img-xs rounded-circle" src={require("../../assets/images/faces/face8.jpg")} alt="Profile" />
</Dropdown.Toggle>
<Dropdown.Menu className="preview-list navbar-dropdown pb-3">
<Dropdown.Item className="dropdown-item preview-item d-flex align-items-center border-0" onClick={evt =>evt.preventDefault()}>
Sign Out
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</li>
</ul>
<button className="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" onClick={this.toggleOffcanvas}>
<span className="mdi mdi-menu"></span>
</button>
</div>
</nav>
);
}
Example #4
| Source File: ActivityPreviewCardDropdown.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 6 votes |
|
ActivityPreviewCardDropdown = (props) => {
const {
showLti,
shared,
activity,
projectId,
playlistId,
} = props;
return (
<Dropdown.Item
as={Link}
style={{ borderBottom: '1px solid #eee', padding: '10px' }}
to={
shared
? `/playlist/${playlistId}/activity/${activity.id}/preview`
: (
showLti
? `/playlist/${playlistId}/activity/${activity.id}/preview/lti`
: `/project/${projectId}/playlist/${playlistId}/activity/${activity.id}/preview`
)
}
>
<div className="d-flex align-items-center">
<FontAwesomeIcon icon="play-circle" />
<div className="ml-2 title" style={{ whiteSpace: 'normal' }}>{activity.title}</div>
</div>
</Dropdown.Item>
);
}
Example #5
| Source File: ChartSelector.js From indeplot with GNU General Public License v3.0 | 6 votes |
|
render() {
const { selected, color, colorPickerOn } = this.state;
const { data, labels } = this.props;
return (
<Container>
<Form inline className="justify-content-center mb-3">
<Form.Label className="mr-2">
Select Chart Type
</Form.Label>
<DropdownButton className="chart-type-selector" title={selected} variant="outline-dark" onSelect={this.handleSelect}>
{chartTypes.map((item, i) =>
<Dropdown.Item key={i} eventKey={item} >{chartTypeIcons[item]}{item}</Dropdown.Item>
)}
</DropdownButton>
<span> </span>
<Button as="input" type="button" value="Color Picker" variant="outline-dark" onClick={this.handleColorPicker} />
<Button type="button" variant="outline-dark" onClick={this.refreshData} className="ml-1">Refresh</Button>
<Modal show={colorPickerOn} onHide={this.handleModalClose}>
<Modal.Header closeButton>
Color Picker
</Modal.Header>
<Modal.Body>
<SketchPicker
width="95%"
color={this.state.color}
onChangeComplete={this.handleColor}
/>
</Modal.Body>
</Modal>
</Form>
<Row>
<Col>
<Charts chartType={selected} chartColor={color} labels={labels} title="Sample" data={data} options={{}} />
</Col>
</Row>
</Container>
)
}
Example #6
| Source File: ThemePicker.js From viade_en1b with MIT License | 6 votes |
|
ThemePicker = () => {
const { theme, changeTheme } = useContext(ThemeContext);
const buttons = Object.keys(themes).map((key, index) => {
return (
<Dropdown.Item key={index} onClick={() => changeTheme(themes[key])}>
{themes[key].name}
</Dropdown.Item>
);
});
return (
<Dropdown className={style.picker}>
<Dropdown.Toggle variant="success" id="dropdown-basic">
<FormattedMessage id="Themes" />: {theme.name}
</Dropdown.Toggle>
<Dropdown.Menu>{buttons}</Dropdown.Menu>
</Dropdown>
);
}
Example #7
| Source File: activityprojectdropdown.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 5 votes |
|
ActivityProjectCardDropDown = ({ iconColor }) => {
const IconColor = iconColor ? iconColor : "#084892";
return (
<div className="curriki-utility-activity-project-dropdown">
<Dropdown className="activity-dropdown check ">
<Dropdown.Toggle className="activity-dropdown-btn">
<FontAwesomeIcon
icon={faEllipsisV}
style={{ fontSize: "13px", color: IconColor, marginLeft: "5px" }}
/>
{/* <span>EditActivity</span> */}
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item>
<a className="links " href="#">
Project #1
</a>
</Dropdown.Item>
<Dropdown.Item>
<a className="links " href="#">
Project #2
</a>
</Dropdown.Item>
<Dropdown.Item>
<a className="links " href="#">
Project #3
</a>
</Dropdown.Item>
<Dropdown.Item>
<a className="links " href="#">
Project #4
</a>
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
);
}
Example #8
| Source File: Header.js From rahat-vendor with GNU Affero General Public License v3.0 | 5 votes |
|
export default function Header() {
const history = useHistory();
const [profileImage, setProfileImage] = useState(null);
const { setWallet } = useContext(AppContext);
useEffect(() => {
(async () => {
let profile = await DataService.getProfile();
if (profile) setProfileImage(profile.img);
})();
});
return (
<div>
<div className="appHeader bg-primary scrolled">
<div className="left d-none">
<a href="fake_value" className="headerButton" data-toggle="modal" data-target="#sidebarPanel">
<IoHomeOutline className="ion-icon" />
</a>
</div>
<div className="pageTitle">
<img src="assets/img/brand/icon-white-128.png" width="22" alt="logo" className="logo" />
Rahat Vendor
</div>
<div className="right">
<Dropdown drop="down">
<Dropdown.Toggle variant="link" bsPrefix="p-0">
<img src={profileImage} alt="profile" className="imaged w32" />
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item onClick={() => history.push('/transfer')}>
<IoSendOutline className="ion-icon" />
Transfer
</Dropdown.Item>
<Dropdown.Item onClick={() => history.push('/settings')}>
<IoPersonOutline className="ion-icon" />
My Profile
</Dropdown.Item>
<Dropdown.Item onClick={() => setWallet(null)}>
<IoLockClosedOutline className="ion-icon" />
Lock App
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
</div>
</div>
);
}
Example #9
| Source File: searchbox.js From RC4Community with Apache License 2.0 | 5 votes |
|
export default function Searchbox() {
return (
<Form
className={`d-flex flex-column flex-md-row gap-2 align-items-center ${styles.form}`}
>
<Dropdown>
<Dropdown.Toggle className={styles.dropdown} id='searchbox-dropdown-toggle'>
All Communities
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href='#/action-1'>Rooms</Dropdown.Item>
<Dropdown.Item href='#/action-2'>Users</Dropdown.Item>
<Dropdown.Item href='#/action-3'>Messages</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Form.Group
className=' py-1 align-self-center mx-2 w-100'
controlId='formBasicEmail'
>
<InputGroup>
<InputGroup.Text className='bg-white '>
<svg
width='16'
height='16'
viewBox='0 0 16 16'
fill='none'
xmlns='http://www.w3.org/2000/svg'
>
<g clipPath='url(#clip0_2_49)'>
<path
d='M11.742 10.344C12.7103 9.02269 13.144 7.38449 12.9563 5.75715C12.7686 4.12981 11.9734 2.63334 10.7298 1.56713C9.48611 0.500922 7.88575 -0.0563951 6.24883 0.00667803C4.61192 0.0697512 3.05918 0.748563 1.90127 1.90731C0.743349 3.06605 0.0656481 4.61928 0.00374626 6.25624C-0.0581556 7.89319 0.500307 9.49316 1.56741 10.736C2.6345 11.9789 4.13154 12.7731 5.75902 12.9596C7.38649 13.1461 9.02438 12.7112 10.345 11.742H10.344C10.374 11.782 10.406 11.82 10.442 11.857L14.292 15.707C14.4795 15.8946 14.7339 16.0001 14.9991 16.0002C15.2644 16.0003 15.5189 15.895 15.7065 15.7075C15.8941 15.52 15.9996 15.2656 15.9997 15.0004C15.9998 14.7351 15.8945 14.4806 15.707 14.293L11.857 10.443C11.8212 10.4068 11.7828 10.3734 11.742 10.343V10.344ZM12 6.5C12 7.22227 11.8577 7.93747 11.5813 8.60476C11.3049 9.27205 10.8998 9.87837 10.3891 10.3891C9.87836 10.8998 9.27205 11.3049 8.60476 11.5813C7.93747 11.8577 7.22227 12 6.5 12C5.77773 12 5.06253 11.8577 4.39524 11.5813C3.72795 11.3049 3.12163 10.8998 2.61091 10.3891C2.10019 9.87837 1.69506 9.27205 1.41866 8.60476C1.14226 7.93747 0.999998 7.22227 0.999998 6.5C0.999998 5.04131 1.57946 3.64236 2.61091 2.61091C3.64236 1.57946 5.04131 1 6.5 1C7.95869 1 9.35763 1.57946 10.3891 2.61091C11.4205 3.64236 12 5.04131 12 6.5Z'
fill='#030C1A'
/>
</g>
<defs>
<clipPath id='clip0_2_49'>
<rect width='16' height='16' fill='white' />
</clipPath>
</defs>
</svg>
</InputGroup.Text>
<Form.Control
type='text'
placeholder='Search the community'
className='border-start-0'
/>
</InputGroup>
</Form.Group>
</Form>
);
}
Example #10
| Source File: activitycarddropdown.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 5 votes |
|
ActivityCardDropDown = ({ iconColor }) => {
const IconColor = iconColor ? iconColor : "#084892";
const dispatch = useDispatch();
return (
<div className="curriki-utility-activity-dropdown">
<Dropdown className="activity-dropdown check ">
<Dropdown.Toggle className="activity-dropdown-btn">
<FontAwesomeIcon
icon={faEllipsisV}
style={{ fontSize: "13px", color: IconColor, marginLeft: "5px" }}
/>
{/* <span>EditActivity</span> */}
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item
onClick={() => {
dispatch({
type: "SET_ACTIVE_ACTIVITY_SCREEN",
payload: "addactivity",
});
}}
>
<FontAwesomeIcon icon={faEdit} className="mr-2" />
Edit
</Dropdown.Item>
<Dropdown.Item>
<FontAwesomeIcon icon={faCopy} className="mr-2" />
Duplicate
</Dropdown.Item>
<Dropdown.Item>
<FontAwesomeIcon icon={faTrash} className="mr-2" />
Delete
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
);
}
Example #11
| Source File: index.js From wedding-planner with MIT License | 5 votes |
|
function DropdownButtonAll(props) {
return (
<DropdownButton
id="dropdown-basic-button"
title="States"
className="btn-md m-auto px-5 mb-5 text-white mt-3"
size="md=auto"
variant="outline-secondary light"
>
<Dropdown.Item href="#">Alabama</Dropdown.Item>
<Dropdown.Item href="#">Alaska</Dropdown.Item>
<Dropdown.Item href="#">Arizona</Dropdown.Item>
<Dropdown.Item href="#">Arkansas</Dropdown.Item>
<Dropdown.Item href="#">California</Dropdown.Item>
<Dropdown.Item href="#">Colorado</Dropdown.Item>
<Dropdown.Item href="#">Connecticut</Dropdown.Item>
<Dropdown.Item href="#">Delaware</Dropdown.Item>
<Dropdown.Item href="#">Florida</Dropdown.Item>
<Dropdown.Item href="#">Georgia</Dropdown.Item>
<Dropdown.Item href="#">Hawaii</Dropdown.Item>
<Dropdown.Item href="#">Idaho</Dropdown.Item>
<Dropdown.Item href="#">Illinois</Dropdown.Item>
<Dropdown.Item href="#">Indiana</Dropdown.Item>
<Dropdown.Item href="#">Iowa</Dropdown.Item>
<Dropdown.Item href="#">Kansas</Dropdown.Item>
<Dropdown.Item href="#">Kentucky</Dropdown.Item>
<Dropdown.Item href="#">Louisiana</Dropdown.Item>
<Dropdown.Item href="#">Maine</Dropdown.Item>
<Dropdown.Item href="#">Maryland</Dropdown.Item>
<Dropdown.Item href="#">Massachusetts</Dropdown.Item>
<Dropdown.Item href="#">Michigan</Dropdown.Item>
<Dropdown.Item href="#">Minnesota</Dropdown.Item>
<Dropdown.Item href="#">Mississippi</Dropdown.Item>
<Dropdown.Item href="#">Missouri</Dropdown.Item>
<Dropdown.Item href="#">Montana</Dropdown.Item>
<Dropdown.Item href="#">Nebraska</Dropdown.Item>
<Dropdown.Item href="#">Nevada</Dropdown.Item>
<Dropdown.Item href="#">New Hampshire</Dropdown.Item>
<Dropdown.Item href="#">New Jersey</Dropdown.Item>
<Dropdown.Item href="#">New Mexico</Dropdown.Item>
<Dropdown.Item href="#">New York</Dropdown.Item>
<Dropdown.Item href="#">North Carolina</Dropdown.Item>
<Dropdown.Item href="#">North Dakota</Dropdown.Item>
<Dropdown.Item href="#">Ohio</Dropdown.Item>
<Dropdown.Item href="#">Oklahoma</Dropdown.Item>
<Dropdown.Item href="#">Oregon</Dropdown.Item>
<Dropdown.Item href="#">Pennsylvania</Dropdown.Item>
<Dropdown.Item href="#">Rhode Island</Dropdown.Item>
<Dropdown.Item href="#">South Carolina</Dropdown.Item>
<Dropdown.Item href="#">South Dakota</Dropdown.Item>
<Dropdown.Item href="#">Tennessee</Dropdown.Item>
<Dropdown.Item href="#">Texas</Dropdown.Item>
<Dropdown.Item href="#">Utah</Dropdown.Item>
<Dropdown.Item href="#">Vermont</Dropdown.Item>
<Dropdown.Item href="#">Virginia</Dropdown.Item>
<Dropdown.Item href="#">Washington</Dropdown.Item>
<Dropdown.Item href="#">West Virginia</Dropdown.Item>
<Dropdown.Item href="#">Wisconsin</Dropdown.Item>
<Dropdown.Item href="#">Wyoming</Dropdown.Item>
</DropdownButton>
);
}
Example #12
| Source File: mainPage.jsx From LaayakWeb with MIT License | 4 votes |
|
render() {
var display = <Loader />;
display = this.state.loading ? (
<Loader />
) : this.state.showProfile ? (
<Profile
onHide={() => this.setState({ showProfile: false })}
doc={this.state.stuDoc}
type={this.props.type}
tt={this.state.tt}
/>
) : (
<div className="container-fluid">
<div className="code-head-btn">
<DarkToggle />
<h1 className="mainPageHeading mb-5">Welcome!</h1>
<Dropdown className="float-md-right mb-2">
<Dropdown.Toggle className="acc-dropdown" id="dropdown-basic">
<i
className="fa fa-user-circle"
style={{ fontSize: "30px", cursor: "pointer" }}
/>
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item
onClick={() => this.setState({ showProfile: true })}
>
Profile
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item onClick={() => this.handleSignOut()}>
<i
style={{ fontSize: "25px", cursor: "pointer" }}
className="fa fa-sign-out"
/>
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
{/* semester details */}
<div id="Class">
<h2 className="subHeading">Class Details: </h2>
</div>
<hr className="mb-4" style={{ margin: "0 auto", width: "18rem" }} />
<Details details={this.state.details} />
{/* lectures on the day */}
<div id="Lectures">
<h2 className="subHeading">Lectures Today:</h2>
</div>
<hr className="mb-4" style={{ margin: "0 auto", width: "40%" }} />
<div className="lectures-row">
{this.state.lecturesToday.length === 0 ? (
<h4 style={{ textAlign: "center", width: "100%" }}>
No lectures for the day! Lets enjoy
</h4>
) : (
this.state.lecturesToday.map((lecture) => (
<Lecture lecture={lecture} key={lecture.startTime} />
))
)}
</div>
<div id="Assignments">
<h2 className="subHeading">
Assignments
<span role="img" aria-label="assignments">
?
</span>
</h2>
<hr className="mb-4" style={{ margin: "0 auto", width: "40%" }} />
{this.state.assignments.length ? (
this.state.assignments.map((assignment) => (
<ShowAssign
key={assignment.url}
onDelete={this.deleteAssignment}
details={assignment}
/>
))
) : (
<h4 style={{ textAlign: "center", width: "100%" }}>
No Assignments pending for the class
</h4>
)}
</div>
{/* Announcement/polls/links */}
<div id="Announcements">
<div className="d-inline container-fluid">
<h2 className="subHeading">
Mitron! Announcement Suno{" "}
<span role="img" aria-label="announcement">
?
</span>
</h2>
<hr className="mb-4" style={{ margin: "0 auto", width: "40%" }} />
</div>
<div className="key-container">
<div className="poll-card m-2" style={{ width: "90px" }}>
<span className="p-2">
<i className="fa fa-bookmark text-danger mr-1" /> Official
</span>
</div>
<div className="poll-card m-2" style={{ width: "150px" }}>
<span className="p-2">
<span role="img" className="mr-1" aria-label="announcement">
?{" "}
</span>{" "}
Announcements
</span>
</div>
<div className="poll-card m-2" style={{ width: "75px" }}>
<span className="p-2">
<span role="img" className="mr-1" aria-label="announcement">
?
</span>
Links
</span>
</div>
<div className="poll-card m-2" style={{ width: "75px" }}>
<span className="p-2">
<span role="img" className="mr-1" aria-label="announcement">
?️
</span>
Polls
</span>
</div>
</div>
</div>
<div className="m-4 mx-n3 ann-container">
{this.state.announcements.length !== 0 ? (
this.state.announcements.map((announcement) => (
<Announcement
announcement={announcement}
id={announcement.dateAndTime}
key={announcement.dateAndTime}
/>
))
) : (
<h4 style={{ textAlign: "center", width: "100%" }}>
Any important announcements, polls or links for the class will be
shown here
</h4>
)}
</div>
{/* list of subjects */}
<div id="Subjects">
<h2 className="subHeading">Subjects You study:</h2>
</div>
<hr className="mb-4" style={{ margin: "0 auto", width: "40%" }} />
<div className="my-flex-container">
{this.state.subjects.length === 0 ? (
<h4 style={{ textAlign: "center", width: "100%" }}>
No subjects have been added by the CR yet!
</h4>
) : (
this.state.subjects.map((subject) => (
<Subject subject={subject} key={subject.subjectCode} />
))
)}
</div>
<BottomNav
paths={[
"Class",
"Assignments",
"Lectures",
"Announcements",
"Subjects",
]}
/>
</div>
);
return this.state.classCode === "kicked" ? (
<>
<h1>CR has removed you from the class</h1>
<img src="/stuEjected.gif" alt="ejected" width="75%" />
</>
) : (
display
);
}
Example #13
| Source File: jitsibroadcaster.js From RC4Community with Apache License 2.0 | 4 votes |
|
Jitsibroadcaster = ({ room, disName, rtmpSrc, handleChat }) => {
const apiRef = useRef();
const [logItems, updateLog] = useState([]);
const [knockingParticipants, updateKnockingParticipants] = useState([]);
const [mute, setMute] = useState(true);
const [name, setName] = useState(null);
const dataArr = [
{ speaker: "A", hour: "10" },
{ speaker: "B", hour: "20" },
{ speaker: "C", hour: "30" },
{ speaker: "D", hour: "40" },
{ speaker: "Z", hour: "50" },
];
const handleDisplayName = async (hr) => {
const tar = dataArr.find((o) => o.hour === hr);
if (!tar || tar.speaker == name) {
return;
}
setName(tar.speaker);
await apiRef.current.executeCommand("displayName", tar.speaker);
};
useEffect(() => {
setInterval(() => {
const tada = new Date();
handleDisplayName(tada.getHours().toString());
}, 900000);
}, []);
const printEventOutput = (payload) => {
updateLog((items) => [...items, JSON.stringify(payload)]);
};
const handleAudioStatusChange = (payload, feature) => {
if (payload.muted) {
updateLog((items) => [...items, `${feature} off`]);
} else {
updateLog((items) => [...items, `${feature} on`]);
}
};
const handleChatUpdates = (payload, ref) => {
if (payload.isOpen || !payload.unreadCount) {
return;
}
ref.current.executeCommand("toggleChat");
updateLog((items) => [
...items,
`you have ${payload.unreadCount} unread messages`,
]);
};
const handleKnockingParticipant = (payload) => {
updateLog((items) => [...items, JSON.stringify(payload)]);
updateKnockingParticipants((participants) => [
...participants,
payload?.participant,
]);
};
const resolveKnockingParticipants = (ref, condition) => {
knockingParticipants.forEach((participant) => {
ref.current.executeCommand(
"answerKnockingParticipant",
participant?.id,
condition(participant)
);
updateKnockingParticipants((participants) =>
participants.filter((item) => item.id === participant.id)
);
});
};
const handleJitsiIFrameRef1 = (iframeRef) => {
iframeRef.style.border = "10px solid cadetblue";
iframeRef.style.background = "cadetblue";
iframeRef.style.height = "25em";
iframeRef.style.width = "75%";
};
const showDevices = async (ref) => {
const videoInputs = [];
// get all available video input
const devices = await ref.current.getAvailableDevices();
for (const [key, value] of Object.entries(devices)) {
if (key == "videoInput") {
value.forEach((vid) => {
videoInputs.push(vid.label);
});
}
}
// log for debug
updateLog((items) => [...items, JSON.stringify(videoInputs)]);
let nextDevice = "";
let devs = await ref.current.getCurrentDevices();
for (const [key, value] of Object.entries(devs)) {
if (key == "videoInput") {
updateLog((items) => [...items, "found " + JSON.stringify(value)]);
let devLabel = value.label;
let idx = 0;
videoInputs.forEach((vid) => {
if (devLabel == vid) {
let cur = idx + 1;
if (cur >= videoInputs.length) {
nextDevice = videoInputs[0];
} else {
nextDevice = videoInputs[cur];
updateLog((items) => [...items, "next is " + nextDevice]);
}
}
idx++;
});
}
}
updateLog((items) => [...items, "switching to " + nextDevice]);
await ref.current.setVideoInputDevice(nextDevice);
};
const showAudioOutDevices = async (ref) => {
const audioOutputs = [];
// get all available audio output
const devices = await ref.current.getAvailableDevices();
for (const [key, value] of Object.entries(devices)) {
if (key == "audioOutput") {
value.forEach((vid) => {
audioOutputs.push(vid.label);
});
}
}
// log for debug
updateLog((items) => [...items, JSON.stringify(audioOutputs)]);
let nextDevice = "";
let devs = await ref.current.getCurrentDevices();
for (const [key, value] of Object.entries(devs)) {
if (key == "audioOutput") {
updateLog((items) => [...items, "found " + JSON.stringify(value)]);
let devLabel = value.label;
let idx = 0;
audioOutputs.forEach((vid) => {
if (devLabel == vid) {
let cur = idx + 1;
if (cur >= audioOutputs.length) {
nextDevice = audioOutputs[0];
} else {
nextDevice = audioOutputs[cur];
updateLog((items) => [...items, "next is " + nextDevice]);
}
}
idx++;
});
}
}
updateLog((items) => [...items, "switching to " + nextDevice]);
await ref.current.setAudioOutputDevice(nextDevice);
};
const showAudioDevice = async (ref) => {
const audioInputs = [];
// get all available audio input
const devices = await ref.current.getAvailableDevices();
for (const [key, value] of Object.entries(devices)) {
if (key == "audioInput") {
value.forEach((vid) => {
audioInputs.push(vid.label);
});
}
}
// log for debug
updateLog((items) => [...items, JSON.stringify(audioInputs)]);
let nextDevice = "";
let devs = await ref.current.getCurrentDevices();
for (const [key, value] of Object.entries(devs)) {
if (key == "audioInput") {
updateLog((items) => [...items, "found " + JSON.stringify(value)]);
let devLabel = value.label;
let idx = 0;
audioInputs.forEach((vid) => {
if (devLabel == vid) {
let cur = idx + 1;
if (cur >= audioInputs.length) {
nextDevice = audioInputs[0];
} else {
nextDevice = audioInputs[cur];
updateLog((items) => [...items, "next is " + nextDevice]);
}
}
idx++;
});
}
}
updateLog((items) => [...items, "switching to " + nextDevice]);
await ref.current.setAudioInputDevice(nextDevice);
};
const handleApiReady = async (apiObj, ref) => {
ref.current = apiObj;
await ref.current.addEventListeners({
// Listening to events from the external API
audioMuteStatusChanged: (payload) =>
handleAudioStatusChange(payload, "audio"),
videoMuteStatusChanged: (payload) =>
handleAudioStatusChange(payload, "video"),
raiseHandUpdated: printEventOutput,
tileViewChanged: printEventOutput,
chatUpdated: (payload) => handleChatUpdates(payload, ref),
knockingParticipant: handleKnockingParticipant,
});
await ref.current.executeCommand("toggleFilmStrip");
};
// Multiple instances demo
const showUsers = async (ref, which) => {
try {
const pinfo = await ref.current.getParticipantsInfo();
updateLog((items) => [
...items,
"participantes " + JSON.stringify(pinfo),
]);
await ref.current.executeCommand("setTileView", false);
await ref.current.setLargeVideoParticipant(pinfo[which].participantId);
} catch (e) {
console.error("Participant not found!");
return;
}
};
const makeTile = (ref) => {
ref.current.executeCommand("setTileView", true);
};
const renderStream = (key) => (
<div className={styles.streamButton}>
<ButtonGroup className="m-auto">
<Button
variant="warning"
title="Click to start streaming"
onClick={() =>
apiRef.current.executeCommand("startRecording", {
mode: "stream",
rtmpStreamKey: key,
youtubeStreamKey: "",
})
}
>
Go live!
</Button>
</ButtonGroup>
</div>
);
const toggleDevice = () => (
<div className={styles.device}>
<Button disabled variant="light">
<AiFillSetting size={20} />
</Button>
<ButtonGroup vertical className="m-auto">
<OverlayTrigger
overlay={<Tooltip id="tooltip-disabled">Microphone Device</Tooltip>}
>
<Button
title="Click to switch audio devices"
onClick={() => showAudioDevice(apiRef)}
>
<RiMic2Line size={20} />
</Button>
</OverlayTrigger>
<OverlayTrigger
overlay={<Tooltip id="tooltip-disabled">Camera Device</Tooltip>}
>
<Button
title="Click to switch video devices"
onClick={() => showDevices(apiRef)}
>
<MdCameraswitch size={20} />
</Button>
</OverlayTrigger>
<OverlayTrigger
overlay={<Tooltip id="tooltip-disabled">Audio Device</Tooltip>}
>
<Button
title="Click to switch audio devices"
onClick={() => showAudioOutDevices(apiRef)}
>
<MdHeadset size={20} />
</Button>
</OverlayTrigger>
</ButtonGroup>
</div>
);
const toggleView = () => (
<div className={styles.view}>
<Button variant="light" disabled>
<AiFillEye size={20} />
</Button>
<ButtonGroup vertical className="m-auto">
<OverlayTrigger
overlay={<Tooltip id="tooltip-disabled">Tile View</Tooltip>}
>
<Button
variant="secondary"
onClick={() => makeTile(apiRef)}
title="Click to toggle tile view"
>
<HiViewGridAdd size={20} />
</Button>
</OverlayTrigger>
<OverlayTrigger
overlay={<Tooltip id="tooltip-disabled">First User</Tooltip>}
>
<Button onClick={() => showUsers(apiRef, 0)} variant="secondary">
<BiUserPin size={20} />
</Button>
</OverlayTrigger>
<OverlayTrigger
overlay={<Tooltip id="tooltip-disabled">Second User</Tooltip>}
>
<Button onClick={() => showUsers(apiRef, 1)} variant="secondary">
<FiUsers size={20} />
</Button>
</OverlayTrigger>
</ButtonGroup>
</div>
);
const toolButton = () => (
<div className={styles.deviceButton}>
<ButtonGroup className="m-auto">
<Button
variant="success"
title="Click to toogle audio"
onClick={() => {
apiRef.current.executeCommand("toggleAudio");
setMute(!mute);
}}
>
{mute ? <BiMicrophoneOff /> : <BiMicrophone />}
</Button>
<DropdownButton variant="danger" as={ButtonGroup} title="End">
<Dropdown.Item
as="button"
onClick={() => apiRef.current.executeCommand("hangup")}
>
Leave Meet
</Dropdown.Item>
<Dropdown.Item
variant="danger"
as="button"
onClick={() => apiRef.current.stopRecording("stream")}
>
End for everyone!
</Dropdown.Item>
</DropdownButton>
<Button color="#f5455c" onClick={handleChat}>
<FaRocketchat />
</Button>
</ButtonGroup>
</div>
);
const renderLog = () =>
logItems.map((item, index) => (
<div
style={{
fontFamily: "monospace",
padding: "5px",
}}
key={index}
>
{item}
</div>
));
const renderSpinner = () => (
<div
style={{
fontFamily: "sans-serif",
textAlign: "center",
}}
>
Loading..
</div>
);
return (
<>
{rtmp ? renderStream(rtmp) : rtmpSrc && renderStream(rtmpSrc)}
<div className={styles.jitsiContainer}>
{toggleDevice()}
<JitsiMeeting
domain="meet.jit.si"
roomName={room}
spinner={renderSpinner}
onApiReady={(externalApi) => handleApiReady(externalApi, apiRef)}
getIFrameRef={handleJitsiIFrameRef1}
configOverwrite={{
startWithAudioMuted: true,
disableModeratorIndicator: true,
startScreenSharing: false,
enableEmailInStats: false,
toolbarButtons: [],
enableWelcomePage: false,
prejoinPageEnabled: false,
startWithVideoMuted: false,
liveStreamingEnabled: true,
disableSelfView: false,
disableSelfViewSettings: true,
disableShortcuts: true,
disable1On1Mode: true,
p2p: {
enabled: false,
},
}}
interfaceConfigOverwrite={{
DISABLE_JOIN_LEAVE_NOTIFICATIONS: true,
FILM_STRIP_MAX_HEIGHT: 0,
TILE_VIEW_MAX_COLUMNS: 0,
VIDEO_QUALITY_LABEL_DISABLED: true,
}}
userInfo={{
displayName: disName,
}}
/>
{toggleView()}
</div>
{toolButton()}
<div className={styles.log}>{renderLog()}</div>
</>
);
}
Example #14
| Source File: PitNavigation.js From FRCScout2020 with MIT License | 4 votes |
|
render() {
const competitionItems = this.state.competitions.map(competition => (
<Dropdown.Item
eventKey={competition.shortname}
key={competition.competitionid}
style={{ fontFamily: 'Helvetica, Arial' }}
>
{competition.shortname}
</Dropdown.Item>
));
if (this.state.competition === '') {
return null;
}
return (
<div className='div-main' style={{ minHeight: this.state.heightSize }}>
<div className='justify-content-center'>
<img
alt='Logo'
src={Logo}
style={{
width: this.state.widthSize === '90%' ? '70%' : '30%',
marginTop: '20px',
marginLeft: '10px'
}}
/>
</div>
<div style={{ width: this.state.widthSize }} className='div-second'>
<div className='div-form'>
<Form.Group
style={{
width: '100%',
margin: '0 auto',
marginBottom: '10px'
}}
as={Row}
>
<Form.Label
className='mb-1'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '110%',
margin: '0 auto'
}}
>
Competition:
</Form.Label>
</Form.Group>
<Dropdown
style={{
marginBottom: '10px'
}}
focusFirstItemOnShow={false}
onSelect={this.getPitData}
>
<Dropdown.Toggle
style={{ fontFamily: 'Helvetica, Arial', textAlign: 'center' }}
size='lg'
variant='success'
id='dropdown-basic'
>
{this.state.competition}
</Dropdown.Toggle>
<Dropdown.Menu style={{ minWidth: '3%' }}>
{competitionItems}
</Dropdown.Menu>
</Dropdown>
<Button
variant='dark'
type='btn'
onClick={() => this.getPitData(this.state.competition)}
className='btn-xs'
style={{ fontFamily: 'Helvetica, Arial' }}
>
Refresh
</Button>
</div>
</div>
<BootstrapTable
striped
hover
keyField='team_num'
bordered
bootstrap4
// defaultSorted={defaultSorted}
data={this.state.tableData}
columns={this.state.column}
filter={filterFactory()}
/>
</div>
);
}
Example #15
| Source File: index.js From Algorithm-Visualizer with MIT License | 4 votes |
|
Header = ({
algorithm,
animationSpeed,
device,
fenceToggle,
ready,
resizeGrid,
resetFences,
resetVisited,
run: propRun,
setAlgorithm,
speed: propsSpeed,
setNodeSize: propsNodeSize,
}) => {
const mobile = device === "mobile";
const [nodeSize, setNodeSize] = useState(defaultNodeSize);
const [screenWidth, screenHeight] = getDimensions();
const defaultDimensions = [
maxFill(window.innerWidth, nodeSize),
mobile ? maxFill(window.innerHeight, nodeSize) : screenHeight,
];
const [maxDimensions, setMaxDimensions] = useState(defaultDimensions);
const [maxWidth, maxHeight] = maxDimensions;
// form value display
const [width, setWidth] = useState(Math.ceil(screenWidth));
const [height, setHeight] = useState(Math.ceil(screenHeight));
const [speed, setSpeed] = useState(propsSpeed);
// bootstrap
const [show, setShow] = useState();
const [expanded, setExpanded] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const collapseNav = () => setExpanded(false);
const run = () => {
if (algorithm === "") alert("Please select an algorithm");
if (!ready)
alert(
"Please choose a start and finish point before running by clicking on the desired squares"
);
if (ready && algorithm) {
if (mobile) {
setTimeout(() => propRun(), 200);
collapseNav();
scroll.scrollToBottom({
duration: 1200,
delay: 100,
smooth: true,
});
} else setTimeout(() => propRun(), 200);
}
};
const nodeSizeHandler = (e) => {
// for display
setNodeSize(e.target.value);
// for visualizer to change node inline style
propsNodeSize(e.target.value);
let [width, height] = getDimensions(e.target.value);
resizeGrid([width, height]);
setMaxDimensions([
maxFill(window.innerWidth, nodeSize),
mobile ? maxFill(window.innerWidth, e.target.value) : height,
]);
setWidth(width);
setHeight(height);
};
const gitHubImage = (
<Image
src="/images/github.png"
className={"github-img"}
alt={"Github"}
fluid
/>
);
const linkedInImage = (
<Image
src="/images/linkedin.png"
alt={"LinkedIn"}
className={"linkedin-img"}
fluid
/>
);
const algorithmDropdowns = algorithmInfo.map((alg, i) => {
return (
<OverlayTrigger
key={i}
trigger={["hover", "focus"]}
placement={mobile ? "bottom" : "right"}
overlay={
<Popover id={`${alg.id}-popover`}>
<Popover.Title as="h2" children={`${alg.name}`} />
<Popover.Content>
<p>
<strong>{`${alg.header}`}</strong>
</p>
<p style={{ whiteSpace: "pre-line" }}>{`${alg.content}`}</p>
<p>{`${alg.footer}`}</p>
</Popover.Content>
</Popover>
}
>
<NavDropdown.Item
id={`set-${alg.id}`}
onClick={() => setAlgorithm(`${alg.name}`)}
children={`${alg.name}`}
active={algorithm === `${alg.name}`}
/>
</OverlayTrigger>
);
});
const howToUse = (
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>How To Use</Modal.Title>
</Modal.Header>
<Modal.Body>
<Container>
<Row>
1. Place a start and end point by clicking on the grid! (You can
remove them by clicking on them again)
</Row>
<Row>
{" "}
2. Then place fences by checking "Fence Mode" and clicking on the
grid.{" "}
</Row>
<Row>3. Choose an algorithm via the "Algorithms" dropdown. </Row>
<Row>4. Run it via pressing the green "Run Algorithm" button. </Row>
<Row>5. Enjoy!</Row>
</Container>
</Modal.Body>
<Modal.Footer>
<Button variant="primary" onClick={handleClose}>
Close
</Button>
</Modal.Footer>
</Modal>
);
const settings = (
<DropdownButton title="Settings" size="sm" variant="dark">
<Container variant="dark">
<Row>
<Form variant="dark" inline>
<Col>
Node Size
<FormControl
size="sm"
type="text"
placeholder={`Currently ${nodeSize})`}
onChange={(e) => {
setNodeSize(e.target.value);
}}
/>
<Form.Control
type="range"
size="sm"
min="10"
max="100"
value={nodeSize}
onChange={nodeSizeHandler}
custom
/>
Grid Size
<FormControl
size="sm"
type="text"
placeholder={`Width (Currently ${width})`}
onChange={(e) => {
setWidth(e.target.value);
}}
/>
<Form.Control
type="range"
size="sm"
min="1"
max={maxWidth}
value={width}
onChange={(e) => {
setWidth(e.target.value);
resizeGrid([e.target.value, height]);
}}
custom
/>
<NavDropdown.Divider />
<FormControl
type="text"
size="sm"
placeholder={`Height (Currently ${height})`}
onChange={(e) => {
setHeight(e.target.value);
}}
className="Row-Input"
/>
<Form.Control
type="range"
min="1"
max={maxHeight}
value={height}
onChange={(e) => {
setHeight(e.target.value);
resizeGrid([width, e.target.value]);
}}
custom
/>
<NavDropdown.Divider />
<Form.Label children={"Draw Square"} />
<Form.Control
type="range"
size="sm"
min="1"
max={mobile ? maxWidth : maxHeight}
value={(height, width)}
onChange={(e) => {
setWidth(e.target.value);
setHeight(e.target.value);
resizeGrid([e.target.value, e.target.value]);
}}
custom
/>
<NavDropdown.Divider />
<Form.Label children={"Animation Speed"} />
<Form.Control
type="range"
min="1"
max="5"
value={speed}
onChange={(e) => {
setSpeed(e.target.value);
animationSpeed(e.target.value);
}}
custom
/>
</Col>
</Form>
</Row>
</Container>
</DropdownButton>
);
const contactInfo = (
<DropdownButton title=" Contact The Creators" size="sm" id="contact-info">
<Container>
<Row>
<NavDropdown.Item id={"bassel"} children={"Bassel"} />
<a
className={"image-link"}
href="https://github.com/basselalsayed"
children={gitHubImage}
/>
<a
className={"image-link"}
href="https://www.linkedin.com/in/bsas/"
children={linkedInImage}
/>
</Row>
<Row>
<NavDropdown.Item id={"tom"} children={"Tom"} />
<a
className={"image-link"}
href="https://github.com/Walker-TW"
children={gitHubImage}
/>
<a
className={"image-link"}
href="https://www.linkedin.com/in/thomas-w-walker"
children={linkedInImage}
/>
</Row>
</Container>
</DropdownButton>
);
return (
<Navbar
expanded={expanded}
expand="lg"
bg="dark"
variant="dark"
collapseOnSelect
>
<Navbar.Brand
href="https://github.com/Walker-TW/Algorithm-Visualizer"
children={"Algo-Visualiser"}
/>
<Navbar.Toggle
onClick={() => setExpanded(expanded ? false : "lg")}
aria-controls="responsive-navbar-nav"
/>
<Navbar.Collapse id="responsive-navbar-nav">
<Container fluid>
<Col md={{ span: 2 }}>
<Nav className="mr-auto">
<NavDropdown title="Algorithms" id="collapsible-nav-dropdown">
{algorithmDropdowns}
</NavDropdown>
</Nav>
</Col>
<Col md={{ span: 4 }}>
<Nav>
<Button
id="info-btn"
style={{ border: "2px solid cyan", color: "cyan" }}
variant="dark"
children={"How To Use"}
onClick={handleShow}
/>
{howToUse}
<Button
id="run-btn"
style={{ border: "2px solid chartreuse", color: "chartreuse" }}
variant="dark"
onClick={run}
children={
algorithm
? `Let's Run ${algorithm}`
: "Please Select Algorithm"
}
disabled={!ready || algorithm === ""}
/>
<Dropdown as={ButtonGroup}>
<Button
id="reset-btn"
variant="dark"
style={{ border: "2px solid red", color: "red" }}
children={"Reset Visited"}
onClick={resetVisited}
/>
<Dropdown.Toggle
split
variant="dark"
style={{ border: "2px solid red", color: "red" }}
id="dropdown-custom-2"
/>
<Dropdown.Menu>
<Dropdown.Item
id="fence-reset-btn"
onClick={resetFences}
variant="dark"
children={"Reset Fences"}
/>
</Dropdown.Menu>
</Dropdown>
</Nav>
</Col>
<Col md={{ span: 4 }}>
<Nav navbar="true">
<Container>
<Form inline>
<Form.Check
type="switch"
id="fence-check"
name="fences"
label="Fence mode"
style={{ color: "white" }}
onChange={fenceToggle}
/>
</Form>
</Container>
{settings}
{contactInfo}
</Nav>
</Col>
</Container>
</Navbar.Collapse>
</Navbar>
);
}
Example #16
| Source File: MatchContent.js From FRCScout2020 with MIT License | 4 votes |
|
render() {
const matchTypes = this.state.matchTypes.map(type => (
<Dropdown.Item
eventKey={type.key}
key={type.id}
style={{ fontFamily: 'Helvetica, Arial' }}
>
{type.name}
</Dropdown.Item>
));
if (this.state.retrieved === '') {
return null;
} else if (this.state.retrieved === 'invalid') {
return (
<div className='div-main' style={{ minHeight: this.state.heightSize }}>
<h1 className='pt-4'>Invalid match form request</h1>
</div>
);
} else {
if (this.state.formStage === 0) {
return (
<div
className='div-main'
style={{ minHeight: this.state.heightSize }}
>
<Prompt
when={!this.state.submitting}
message='Are you sure you want to leave?'
/>
<div className='justify-content-center'>
<img
alt='Logo'
src={Logo}
style={{
width: this.state.widthSize === '90%' ? '70%' : '30%',
marginTop: '20px',
marginLeft: '10px'
}}
/>
</div>
<div style={{ width: this.state.widthSize }} className='div-second'>
<div>
<span
onClick={() => this.changeStage(0)}
className='dot'
style={{
borderColor:
this.state.formStage === 0 ? 'black' : 'transparent',
backgroundColor: this.state.validStage0
? '#57c24f'
: '#d4463b'
}}
>
1
</span>
<span
onClick={() => this.changeStage(1)}
className='dot'
style={{
borderColor:
this.state.formStage === 1 ? 'black' : 'transparent',
backgroundColor: this.state.validStage1
? '#57c24f'
: '#d4463b'
}}
>
2
</span>
<span
onClick={() => this.changeStage(2)}
className='dot'
style={{
borderColor:
this.state.formStage === 2 ? 'black' : 'transparent',
backgroundColor: this.state.validStage2
? '#57c24f'
: '#d4463b'
}}
>
3
</span>
<span
onClick={() => this.changeStage(3)}
className='dot'
style={{
borderColor:
this.state.formStage === 3 ? 'black' : 'transparent',
backgroundColor: this.state.validStage3
? '#57c24f'
: '#d4463b'
}}
>
4
</span>
<span
onClick={() => this.changeStage(4)}
className='dot'
style={{
borderColor:
this.state.formStage === 4 ? 'black' : 'transparent',
backgroundColor: this.state.validStage4
? '#57c24f'
: '#d4463b'
}}
>
5
</span>
</div>
<div className='div-form'>
<Form.Group style={{ width: '80%', marginLeft: '1%' }} as={Row}>
<Form.Label
className='mb-2'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '100%'
}}
>
Competition: {this.state.competition}
</Form.Label>
</Form.Group>
<Form.Group style={{ width: '80%', marginLeft: '1%' }} as={Row}>
<Form.Label
className='mb-2'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '100%'
}}
>
Scouter: {this.state.scout}
</Form.Label>
</Form.Group>
<Form.Group style={{ width: '80%', marginLeft: '1%' }} as={Row}>
<Form.Label
className='mb-1'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '110%'
}}
>
Match Number:
</Form.Label>
</Form.Group>
<div style={{ marginLeft: '-6%' }}>
<Dropdown
style={{
marginBottom: '10px',
display: 'inline-block'
}}
focusFirstItemOnShow={false}
onSelect={this.changeMatchType}
>
<Dropdown.Toggle
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'center'
}}
size='xs'
variant='success'
id='dropdown-basic'
>
{this.state.matchTypeLabel}
</Dropdown.Toggle>
<Dropdown.Menu style={{ minWidth: '3%' }}>
{matchTypes}
</Dropdown.Menu>
</Dropdown>
<Form.Control
value={this.state.matchNum1}
autoComplete='off'
type='number'
max={200}
min={1}
placeholder='Match Number'
onChange={this.handleMatchNum1}
isValid={
this.state.validatedStage0 && this.state.matchNum1 !== ''
}
isInvalid={
this.state.validatedStage0 && this.state.matchNum1 === ''
}
className='mb-1'
style={{
background: 'none',
fontFamily: 'Helvetica, Arial',
marginLeft: '2%',
display: 'inline-block',
width: this.state.matchTypeKey === 'qm' ? '50%' : '25%'
}}
/>
{this.state.matchTypeKey !== 'qm' ? (
<React.Fragment>
<span>-</span>
<Form.Control
value={this.state.matchNum2}
autoComplete='off'
type='number'
max={200}
min={1}
placeholder='Match Number'
onChange={this.handleMatchNum2}
isValid={
this.state.validatedStage0 &&
this.state.matchTypeKey !== 'qm' &&
this.state.matchNum2 !== ''
}
isInvalid={
this.state.validatedStage0 &&
this.state.matchTypeKey !== 'qm' &&
this.state.matchNum2 === ''
}
className='mb-1'
style={{
background: 'none',
fontFamily: 'Helvetica, Arial',
display: 'inline-block',
width: '25%'
}}
/>
</React.Fragment>
) : null}
</div>
<Form.Group style={{ width: '80%', marginLeft: '1%' }} as={Row}>
<Form.Label
className='mb-1'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '110%'
}}
>
Alliance Station:
</Form.Label>
</Form.Group>
<Form.Group style={{ width: '80%', marginLeft: '2%' }} as={Row}>
<Form.Control
style={{
background: 'none',
fontFamily: 'Helvetica, Arial'
}}
className='mb-1'
as='select'
onChange={this.handleStationChange}
value={this.state.allianceStation}
>
<option>Red Station 1</option>
<option>Red Station 2</option>
<option>Red Station 3</option>
<option>Blue Station 1</option>
<option>Blue Station 2</option>
<option>Blue Station 3</option>
</Form.Control>
</Form.Group>
<Form.Group style={{ width: '80%', marginLeft: '1%' }} as={Row}>
<Form.Label
className='mb-1'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '110%'
}}
>
Team Number:
</Form.Label>
</Form.Group>
<Form.Group style={{ width: '80%', marginLeft: '2%' }} as={Row}>
<Form.Check
checked={!this.state.autoTeam}
onChange={this.handleModeSwitch}
type='switch'
label={this.state.autoTeam ? 'Automatic' : 'Manual'}
id='switchMode'
style={{ fontFamily: 'Helvetica, Arial', fontSize: '110%' }}
/>
</Form.Group>
<Form.Group style={{ width: '80%', marginLeft: '2%' }} as={Row}>
{this.state.autoTeam ? (
<Form.Label
className='mb-1'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '110%'
}}
onChange={this.checkStage0}
>
{this.state.teamNum}
</Form.Label>
) : (
<Form.Control
value={this.state.teamNum}
autoComplete='off'
type='number'
max={9999}
min={1}
placeholder='Team Number'
onChange={this.handleTeamNum}
isValid={
this.state.validatedStage0 && this.state.teamNum !== ''
}
isInvalid={
this.state.validatedStage0 && this.state.teamNum === ''
}
className='mb-1'
style={{
background: 'none',
fontFamily: 'Helvetica, Arial'
}}
/>
)}
</Form.Group>
<Form.Check
onChange={this.handleFollowUp}
checked={this.state.markForFollowUp}
custom
style={{
fontSize: '100%',
fontFamily: 'Helvetica, Arial'
}}
type='checkbox'
label='Mark for follow up'
id='followUp'
/>
</div>
<Button
variant='success'
type='btn'
style={{
fontFamily: 'Helvetica, Arial',
boxShadow: '-3px 3px black, -2px 2px black, -1px 1px black',
border: '1px solid black',
marginRight: '8%'
}}
onClick={this.handleStage0Increment}
className='btn-lg'
>
Next
</Button>
<Button
variant='success'
type='btn'
style={{
fontFamily: 'Helvetica, Arial',
boxShadow: '-3px 3px black, -2px 2px black, -1px 1px black',
border: '1px solid black',
marginLeft: '8%'
}}
onClick={this.handleSubmit}
className='btn-lg'
>
Submit
</Button>
</div>
</div>
);
} else if (this.state.formStage === 1) {
return (
<div
className='div-main'
style={{ minHeight: this.state.heightSize }}
>
<Prompt
when={!this.state.submitting}
message='Are you sure you want to leave?'
/>
<div className='justify-content-center'>
<img
alt='Logo'
src={Logo}
style={{
width: this.state.widthSize === '90%' ? '70%' : '30%',
marginTop: '20px',
marginLeft: '10px'
}}
/>
</div>
<div style={{ width: this.state.widthSize }} className='div-second'>
<div>
<span
onClick={() => this.changeStage(0)}
className='dot'
style={{
borderColor:
this.state.formStage === 0 ? 'black' : 'transparent',
backgroundColor: this.state.validStage0
? '#57c24f'
: '#d4463b'
}}
>
1
</span>
<span
onClick={() => this.changeStage(1)}
className='dot'
style={{
borderColor:
this.state.formStage === 1 ? 'black' : 'transparent',
backgroundColor: this.state.validStage1
? '#57c24f'
: '#d4463b'
}}
>
2
</span>
<span
onClick={() => this.changeStage(2)}
className='dot'
style={{
borderColor:
this.state.formStage === 2 ? 'black' : 'transparent',
backgroundColor: this.state.validStage2
? '#57c24f'
: '#d4463b'
}}
>
3
</span>
<span
onClick={() => this.changeStage(3)}
className='dot'
style={{
borderColor:
this.state.formStage === 3 ? 'black' : 'transparent',
backgroundColor: this.state.validStage3
? '#57c24f'
: '#d4463b'
}}
>
4
</span>
<span
onClick={() => this.changeStage(4)}
className='dot'
style={{
borderColor:
this.state.formStage === 4 ? 'black' : 'transparent',
backgroundColor: this.state.validStage4
? '#57c24f'
: '#d4463b'
}}
>
5
</span>
</div>
<div className='div-form'>
<Form.Group style={{ width: '80%', marginLeft: '1%' }} as={Row}>
<Form.Label
className='mb-1'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '110%'
}}
>
{'Pre-Loaded Power Cells: ' + this.state.autoPowerCells}
</Form.Label>
</Form.Group>
<input
min={0}
max={3}
step={1}
className='slidercell'
value={this.state.autoPowerCells}
onChange={this.handleSliderAutoCells}
type='range'
id='autoPowerCellSlider'
/>
</div>
<div className='div-form'>
<img
alt='Guide'
src={AllianceStation}
style={{
width: '100%',
marginTop: '20px',
marginBottom: '20px'
}}
/>
<Form.Group style={{ width: '80%', marginLeft: '1%' }} as={Row}>
<Form.Label
className='mb-1'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '110%'
}}
>
Starting Position:
</Form.Label>
</Form.Group>
<Form.Group
style={{ width: '100%', marginLeft: '2%' }}
as={Row}
className='mb-3'
>
{this.state.startingPositions.map(position => (
<Form.Check
style={{ fontFamily: 'Helvetica, Arial' }}
isInvalid={
this.state.validatedStage1 &&
this.state.startingPosition === ''
}
isValid={
this.state.validatedStage1 &&
this.state.startingPosition !== ''
}
inline
custom
label={position.label}
type='radio'
onChange={() => this.handlePositionChange(position)}
checked={this.state.startingPosition === position.label}
id={'position' + position.id}
key={'position' + position.id}
/>
))}
</Form.Group>
</div>
<div className='div-form'>
<Form.Group style={{ width: '80%', marginLeft: '1%' }} as={Row}>
<Form.Label
className='mb-1'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '110%',
textAlign: 'left'
}}
>
Did the robot cross the initiation line?
</Form.Label>
</Form.Group>
<Form.Group
style={{ width: '100%', marginLeft: '2%' }}
as={Row}
className='mb-3'
>
{this.state.crossLineOptions.map(option => (
<Form.Check
style={{ fontFamily: 'Helvetica, Arial' }}
isInvalid={
this.state.validatedStage1 &&
this.state.crossLine === ''
}
isValid={
this.state.validatedStage1 &&
this.state.crossLine !== ''
}
inline
custom
label={option.label}
type='radio'
onChange={() => this.handleCrossLineChange(option)}
checked={this.state.crossLine === option.label}
id={'cross' + option.id}
key={'cross' + option.id}
/>
))}
</Form.Group>
</div>
<div className='div-form'>
<Form.Group style={{ width: '80%', marginLeft: '1%' }} as={Row}>
<Form.Label
className='mb-1'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '110%',
textAlign: 'left'
}}
>
Power Cells Scored in Auto:
</Form.Label>
</Form.Group>
<Form.Group style={{ width: '100%' }}>
{this.state.autoScored.map(goal => (
<Form.Row
className='mb-2 justify-content-center'
key={'autoGoalRow' + goal.id}
>
<Counter
minWidth='170px'
count={goal.value}
margin={'3px 0px 0px 0px'}
colon=': '
onIncrement={() => this.handleAutoGoalIncrement(goal)}
onDecrement={() => this.handleAutoGoalDecrement(goal)}
label={goal.label}
disabled={false}
dynamic={goal.value === 0}
size='xs'
marginRight='0px'
id={'autoGoal' + goal.id}
key={'autoGoal' + goal.id}
/>
</Form.Row>
))}
</Form.Group>
</div>
<div className='div-form'>
<Form.Group style={{ width: '80%', marginLeft: '1%' }} as={Row}>
<Form.Label
className='mb-1'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '110%',
textAlign: 'left'
}}
>
Auto Comments:
</Form.Label>
</Form.Group>
<div
style={{
display: 'inline-block',
width: '80%',
marginTop: '5px'
}}
>
<Form.Group>
<Form.Control
value={this.state.autoComments}
as='textarea'
type='text'
placeholder='Comments concerning auto'
onChange={this.handleAutoComment}
rows='3'
style={{
background: 'none',
fontFamily: 'Helvetica, Arial'
}}
/>
</Form.Group>
</div>
<Form.Check
onChange={this.handleFollowUp}
checked={this.state.markForFollowUp}
custom
style={{
fontSize: '100%',
fontFamily: 'Helvetica, Arial'
}}
type='checkbox'
label='Mark for follow up'
id='followUp'
/>
</div>
<Button
variant='success'
type='btn'
style={{
fontFamily: 'Helvetica, Arial',
boxShadow: '-3px 3px black, -2px 2px black, -1px 1px black',
border: '1px solid black',
marginRight: '4%'
}}
onClick={this.handleStage1Decrement}
className='btn-lg'
>
Back
</Button>
<Button
variant='success'
type='btn'
style={{
fontFamily: 'Helvetica, Arial',
boxShadow: '-3px 3px black, -2px 2px black, -1px 1px black',
border: '1px solid black',
marginLeft: '4%',
marginRight: '4%'
}}
onClick={this.handleStage1Increment}
className='btn-lg'
>
Next
</Button>
<Button
variant='success'
type='btn'
style={{
fontFamily: 'Helvetica, Arial',
boxShadow: '-3px 3px black, -2px 2px black, -1px 1px black',
border: '1px solid black',
marginLeft: '4%'
}}
onClick={this.handleSubmit}
className='btn-lg'
>
Submit
</Button>
</div>
</div>
);
} else if (this.state.formStage === 2) {
return (
<div
className='div-main'
style={{ minHeight: this.state.heightSize }}
>
<Prompt
when={!this.state.submitting}
message='Are you sure you want to leave?'
/>
<div className='justify-content-center'>
<img
alt='Logo'
src={Logo}
style={{
width: this.state.widthSize === '90%' ? '70%' : '30%',
marginTop: '20px',
marginLeft: '10px'
}}
/>
</div>
<div style={{ width: this.state.widthSize }} className='div-second'>
<div>
<span
onClick={() => this.changeStage(0)}
className='dot'
style={{
borderColor:
this.state.formStage === 0 ? 'black' : 'transparent',
backgroundColor: this.state.validStage0
? '#57c24f'
: '#d4463b'
}}
>
1
</span>
<span
onClick={() => this.changeStage(1)}
className='dot'
style={{
borderColor:
this.state.formStage === 1 ? 'black' : 'transparent',
backgroundColor: this.state.validStage1
? '#57c24f'
: '#d4463b'
}}
>
2
</span>
<span
onClick={() => this.changeStage(2)}
className='dot'
style={{
borderColor:
this.state.formStage === 2 ? 'black' : 'transparent',
backgroundColor: this.state.validStage2
? '#57c24f'
: '#d4463b'
}}
>
3
</span>
<span
onClick={() => this.changeStage(3)}
className='dot'
style={{
borderColor:
this.state.formStage === 3 ? 'black' : 'transparent',
backgroundColor: this.state.validStage3
? '#57c24f'
: '#d4463b'
}}
>
4
</span>
<span
onClick={() => this.changeStage(4)}
className='dot'
style={{
borderColor:
this.state.formStage === 4 ? 'black' : 'transparent',
backgroundColor: this.state.validStage4
? '#57c24f'
: '#d4463b'
}}
>
5
</span>
</div>
<div className='div-form'>
<Form.Group style={{ width: '80%', marginLeft: '1%' }} as={Row}>
<Form.Label
className='mb-1'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '110%',
textAlign: 'left'
}}
>
Power Cells Scored in Teleop:
</Form.Label>
</Form.Group>
<Form.Group style={{ width: '100%' }}>
{this.state.teleopScored.map(goal => (
<Form.Row
className='mb-2 justify-content-center'
key={'teleopGoalRow' + goal.id}
>
<Counter
minWidth='170px'
count={goal.value}
margin={'3px 0px 0px 0px'}
colon=': '
onIncrement={() => this.handleTeleopGoalIncrement(goal)}
onDecrement={() => this.handleTeleopGoalDecrement(goal)}
label={goal.label}
disabled={false}
dynamic={goal.value === 0}
size='xs'
marginRight='0px'
id={'teleopGoal' + goal.id}
key={'teleopGoal' + goal.id}
/>
</Form.Row>
))}
</Form.Group>
</div>
<div className='div-form'>
<Form.Group style={{ width: '80%', marginLeft: '1%' }} as={Row}>
<Form.Label
className='mb-0'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '110%'
}}
>
Rotation Control:
</Form.Label>
</Form.Group>
<Form.Group
style={{ width: '100%', marginLeft: '2%' }}
as={Row}
>
<Form.Label
className='mb-0'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '90%'
}}
>
Last Rotation Time: {this.state.oldRotationTimer}
</Form.Label>
</Form.Group>
<StopWatch
value={this.state.rotationTimer}
parentCallback={this.handleRotationControlTimer}
/>
<Form.Group
style={{ width: '100%', marginLeft: '2%' }}
className='mb-3'
>
{this.state.rotationOptions.map(option => (
<Form.Row key={'rotationRow' + option.id} className='mb-2'>
<Form.Check
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'left'
}}
isInvalid={
this.state.validatedStage2 &&
this.state.rotationControl === ''
}
isValid={
this.state.validatedStage2 &&
this.state.rotationControl !== ''
}
inline
custom
label={option.label}
type='radio'
onChange={() => this.handleRotationControl(option)}
checked={this.state.rotationControl === option.label}
id={'rotationOption' + option.id}
key={'rotationOption' + option.id}
/>
</Form.Row>
))}
</Form.Group>
</div>
<div className='div-form'>
<Form.Group style={{ width: '80%', marginLeft: '1%' }} as={Row}>
<Form.Label
className='mb-0'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '110%'
}}
>
Position Control:
</Form.Label>
</Form.Group>
<Form.Group
style={{ width: '100%', marginLeft: '2%' }}
as={Row}
>
<Form.Label
className='mb-0'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '90%'
}}
>
Last Position Time: {this.state.oldPositionTimer}
</Form.Label>
</Form.Group>
<StopWatch
value={this.state.positionTimer}
parentCallback={this.handlePositionControlTimer}
/>
<Form.Group
style={{ width: '100%', marginLeft: '2%' }}
className='mb-3'
>
{this.state.positionOptions.map(option => (
<Form.Row key={'positionRow' + option.id} className='mb-2'>
<Form.Check
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'left'
}}
isInvalid={
this.state.validatedStage2 &&
this.state.positionControl === ''
}
isValid={
this.state.validatedStage2 &&
this.state.positionControl !== ''
}
inline
custom
label={option.label}
type='radio'
onChange={() => this.handlePositionControl(option)}
checked={this.state.positionControl === option.label}
id={'positionOption' + option.id}
key={'positionOption' + option.id}
/>
</Form.Row>
))}
</Form.Group>
<Form.Check
onChange={this.handleFollowUp}
checked={this.state.markForFollowUp}
custom
style={{
fontSize: '100%',
fontFamily: 'Helvetica, Arial'
}}
type='checkbox'
label='Mark for follow up'
id='followUp'
/>
</div>
<Button
variant='success'
type='btn'
style={{
fontFamily: 'Helvetica, Arial',
boxShadow: '-3px 3px black, -2px 2px black, -1px 1px black',
border: '1px solid black',
marginRight: '4%'
}}
onClick={this.handleStage2Decrement}
className='btn-lg'
>
Back
</Button>
<Button
variant='success'
type='btn'
style={{
fontFamily: 'Helvetica, Arial',
boxShadow: '-3px 3px black, -2px 2px black, -1px 1px black',
border: '1px solid black',
marginLeft: '4%',
marginRight: '4%'
}}
onClick={this.handleStage2Increment}
className='btn-lg'
>
Next
</Button>
<Button
variant='success'
type='btn'
style={{
fontFamily: 'Helvetica, Arial',
boxShadow: '-3px 3px black, -2px 2px black, -1px 1px black',
border: '1px solid black',
marginLeft: '4%'
}}
onClick={this.handleSubmit}
className='btn-lg'
>
Submit
</Button>
</div>
</div>
);
} else if (this.state.formStage === 3) {
return (
<div
className='div-main'
style={{ minHeight: this.state.heightSize }}
>
<Prompt
when={!this.state.submitting}
message='Are you sure you want to leave?'
/>
<div className='justify-content-center'>
<img
alt='Logo'
src={Logo}
style={{
width: this.state.widthSize === '90%' ? '70%' : '30%',
marginTop: '20px',
marginLeft: '10px'
}}
/>
</div>
<div style={{ width: this.state.widthSize }} className='div-second'>
<div>
<span
onClick={() => this.changeStage(0)}
className='dot'
style={{
borderColor:
this.state.formStage === 0 ? 'black' : 'transparent',
backgroundColor: this.state.validStage0
? '#57c24f'
: '#d4463b'
}}
>
1
</span>
<span
onClick={() => this.changeStage(1)}
className='dot'
style={{
borderColor:
this.state.formStage === 1 ? 'black' : 'transparent',
backgroundColor: this.state.validStage1
? '#57c24f'
: '#d4463b'
}}
>
2
</span>
<span
onClick={() => this.changeStage(2)}
className='dot'
style={{
borderColor:
this.state.formStage === 2 ? 'black' : 'transparent',
backgroundColor: this.state.validStage2
? '#57c24f'
: '#d4463b'
}}
>
3
</span>
<span
onClick={() => this.changeStage(3)}
className='dot'
style={{
borderColor:
this.state.formStage === 3 ? 'black' : 'transparent',
backgroundColor: this.state.validStage3
? '#57c24f'
: '#d4463b'
}}
>
4
</span>
<span
onClick={() => this.changeStage(4)}
className='dot'
style={{
borderColor:
this.state.formStage === 4 ? 'black' : 'transparent',
backgroundColor: this.state.validStage4
? '#57c24f'
: '#d4463b'
}}
>
5
</span>
</div>
<div className='div-form'>
<Form.Group style={{ width: '80%', marginLeft: '1%' }} as={Row}>
<Form.Label
className='mb-0'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '110%'
}}
>
Did the robot hang or park?
</Form.Label>
</Form.Group>
<Form.Group
style={{ width: '100%', marginLeft: '2%' }}
as={Row}
>
<Form.Label
className='mb-0'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '90%'
}}
>
Last End Game Time: {this.state.oldEndGameTimer}
</Form.Label>
</Form.Group>
<StopWatch
value={this.state.endGameTimer}
parentCallback={this.handleEndGameTimer}
/>
<Form.Group
style={{ width: '100%', marginLeft: '2%' }}
className='mb-3'
>
{this.state.endGameOptions.map(option => (
<Form.Row key={'endGameRow' + option.id} className='mb-2'>
<Form.Check
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'left'
}}
isInvalid={
this.state.validatedStage3 &&
this.state.endGame === ''
}
isValid={
this.state.validatedStage3 &&
this.state.endGame !== ''
}
inline
custom
label={option.label}
type='radio'
onChange={() => this.handleEndGame(option)}
checked={this.state.endGame === option.label}
id={'endGameOption' + option.id}
key={'endGameOption' + option.id}
/>
</Form.Row>
))}
</Form.Group>
{this.state.endGame !== 'Hang' ? (
<Form.Check
onChange={this.handleFollowUp}
checked={this.state.markForFollowUp}
custom
style={{
fontSize: '100%',
fontFamily: 'Helvetica, Arial'
}}
type='checkbox'
label='Mark for follow up'
id='followUp'
/>
) : null}
</div>
{this.state.endGame === 'Hang' ? (
<React.Fragment>
<div className='div-form'>
<Form.Group
style={{ width: '80%', marginLeft: '1%' }}
as={Row}
>
<Form.Label
className='mb-0'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '110%'
}}
>
How did the robot hang?
</Form.Label>
</Form.Group>
<Form.Group
style={{ width: '100%', marginLeft: '2%' }}
className='mb-3'
>
{this.state.climbOptions.map(option => (
<Form.Row key={'climbRow' + option.id} className='mb-2'>
<Form.Check
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'left'
}}
isInvalid={
this.state.validatedStage3 &&
this.state.climb === ''
}
isValid={
this.state.validatedStage3 &&
this.state.climb !== ''
}
inline
custom
label={option.label}
type='radio'
onChange={() => this.handleClimb(option)}
checked={this.state.climb === option.label}
id={'climbOption' + option.id}
key={'climbOption' + option.id}
/>
</Form.Row>
))}
</Form.Group>
{this.state.climb !== '' &&
this.state.climb !== 'Assisted Climb' ? (
<React.Fragment>
<Form.Group
style={{ width: '80%', marginLeft: '1%' }}
as={Row}
>
<Form.Label
className='mb-0'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '110%'
}}
>
Where did it hang?
</Form.Label>
</Form.Group>
<div>{this.state.levelPosition}</div>
<input
min={0}
max={2}
step={0.125}
className='sliderlevel'
value={this.state.levelPosition}
onChange={this.handleLevelChange}
type='range'
id='autoPowerCellSlider'
/>
</React.Fragment>
) : null}
</div>
<div className='div-form'>
<Form.Group
style={{ width: '80%', marginLeft: '1%' }}
as={Row}
>
<Form.Label
className='mb-0'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '110%'
}}
>
How did the robot level?
</Form.Label>
</Form.Group>
<Form.Group
style={{ width: '100%', marginLeft: '2%' }}
className='mb-3'
>
{this.state.levelOptions.map(option => (
<Form.Row key={'levelRow' + option.id} className='mb-2'>
<Form.Check
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'left'
}}
isInvalid={
this.state.validatedStage3 &&
this.state.level === ''
}
isValid={
this.state.validatedStage3 &&
this.state.level !== ''
}
inline
custom
label={option.label}
type='radio'
onChange={() => this.handleLevel(option)}
checked={this.state.level === option.label}
id={'levelOption' + option.id}
key={'levelOption' + option.id}
/>
</Form.Row>
))}
</Form.Group>
<Form.Check
onChange={this.handleFollowUp}
checked={this.state.markForFollowUp}
custom
style={{
fontSize: '100%',
fontFamily: 'Helvetica, Arial'
}}
type='checkbox'
label='Mark for follow up'
id='followUp'
/>
</div>
</React.Fragment>
) : null}
<Button
variant='success'
type='btn'
style={{
fontFamily: 'Helvetica, Arial',
boxShadow: '-3px 3px black, -2px 2px black, -1px 1px black',
border: '1px solid black',
marginRight: '4%'
}}
onClick={this.handleStage3Decrement}
className='btn-lg'
>
Back
</Button>
<Button
variant='success'
type='btn'
style={{
fontFamily: 'Helvetica, Arial',
boxShadow: '-3px 3px black, -2px 2px black, -1px 1px black',
border: '1px solid black',
marginLeft: '4%',
marginRight: '4%'
}}
onClick={this.handleStage3Increment}
className='btn-lg'
>
Next
</Button>
<Button
variant='success'
type='btn'
style={{
fontFamily: 'Helvetica, Arial',
boxShadow: '-3px 3px black, -2px 2px black, -1px 1px black',
border: '1px solid black',
marginLeft: '4%'
}}
onClick={this.handleSubmit}
className='btn-lg'
>
Submit
</Button>
</div>
</div>
);
} else if (this.state.formStage === 4) {
return (
<div
className='div-main'
style={{ minHeight: this.state.heightSize }}
>
<Prompt
when={!this.state.submitting}
message='Are you sure you want to leave?'
/>
<div className='justify-content-center'>
<img
alt='Logo'
src={Logo}
style={{
width: this.state.widthSize === '90%' ? '70%' : '30%',
marginTop: '20px',
marginLeft: '10px'
}}
/>
</div>
<div style={{ width: this.state.widthSize }} className='div-second'>
<div>
<span
onClick={() => this.changeStage(0)}
className='dot'
style={{
borderColor:
this.state.formStage === 0 ? 'black' : 'transparent',
backgroundColor: this.state.validStage0
? '#57c24f'
: '#d4463b'
}}
>
1
</span>
<span
onClick={() => this.changeStage(1)}
className='dot'
style={{
borderColor:
this.state.formStage === 1 ? 'black' : 'transparent',
backgroundColor: this.state.validStage1
? '#57c24f'
: '#d4463b'
}}
>
2
</span>
<span
onClick={() => this.changeStage(2)}
className='dot'
style={{
borderColor:
this.state.formStage === 2 ? 'black' : 'transparent',
backgroundColor: this.state.validStage2
? '#57c24f'
: '#d4463b'
}}
>
3
</span>
<span
onClick={() => this.changeStage(3)}
className='dot'
style={{
borderColor:
this.state.formStage === 3 ? 'black' : 'transparent',
backgroundColor: this.state.validStage3
? '#57c24f'
: '#d4463b'
}}
>
4
</span>
<span
onClick={() => this.changeStage(4)}
className='dot'
style={{
borderColor:
this.state.formStage === 4 ? 'black' : 'transparent',
backgroundColor: this.state.validStage4
? '#57c24f'
: '#d4463b'
}}
>
5
</span>
</div>
<div className='div-form'>
<Form.Group style={{ width: '80%', marginLeft: '1%' }} as={Row}>
<Form.Label
className='mb-1'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '110%',
textAlign: 'left'
}}
>
Did the robot lose communication at any time?
</Form.Label>
</Form.Group>
<Form.Group
style={{ width: '100%', marginLeft: '2%' }}
as={Row}
className='mb-3'
>
{this.state.communicationOptions.map(option => (
<Form.Check
style={{ fontFamily: 'Helvetica, Arial' }}
isInvalid={
this.state.validatedStage4 &&
this.state.communication === ''
}
isValid={
this.state.validatedStage4 &&
this.state.communication !== ''
}
inline
custom
label={option.label}
type='radio'
onChange={() => this.handleCommunication(option)}
checked={this.state.communication === option.label}
id={'communication' + option.id}
key={'communication' + option.id}
/>
))}
</Form.Group>
</div>
<div className='div-form'>
<Form.Group style={{ width: '80%', marginLeft: '1%' }} as={Row}>
<Form.Label
className='mb-1'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '110%',
textAlign: 'left'
}}
>
Did the robot break during the match?
</Form.Label>
</Form.Group>
<Form.Group
style={{ width: '100%', marginLeft: '2%' }}
as={Row}
className='mb-3'
>
{this.state.breakOptions.map(option => (
<Form.Check
style={{ fontFamily: 'Helvetica, Arial' }}
isInvalid={
this.state.validatedStage4 && this.state.break === ''
}
isValid={
this.state.validatedStage4 && this.state.break !== ''
}
inline
custom
label={option.label}
type='radio'
onChange={() => this.handleBreak(option)}
checked={this.state.break === option.label}
id={'break' + option.id}
key={'break' + option.id}
/>
))}
</Form.Group>
</div>
<div className='div-form'>
<Form.Group style={{ width: '80%', marginLeft: '1%' }} as={Row}>
<Form.Label
className='mb-1'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '110%',
textAlign: 'left'
}}
>
Penalties/Yellow Cards/Red Cards:
</Form.Label>
</Form.Group>
<Form.Group style={{ width: '100%' }}>
{this.state.negatives.map(negative => (
<Form.Row
className='mb-2 justify-content-center'
key={'negativeRow' + negative.id}
>
{negative.label === 'Penalties' ? (
<PenaltyCounter
// maxWidth='1000px'
minWidth='170px'
count={negative.value}
margin={'3px 0px 0px 0px'}
colon=': '
onIncrement={() =>
this.handleNegativeIncrement(negative)
}
onDecrement={() =>
this.handleNegativeDecrement(negative)
}
onIncrementLarger={() =>
this.handleNegativeLargerIncrement(negative)
}
onDecrementLarger={() =>
this.handleNegativeLargerDecrement(negative)
}
label={negative.label}
disabled={false}
dynamic={negative.value === 0}
size='xs'
marginRight='0px'
id={'negative' + negative.id}
key={'negative' + negative.id}
/>
) : (
<Counter
minWidth='170px'
count={negative.value}
margin={'3px 0px 0px 0px'}
colon=': '
onIncrement={() =>
this.handleNegativeIncrement(negative)
}
onDecrement={() =>
this.handleNegativeDecrement(negative)
}
label={negative.label}
disabled={false}
dynamic={negative.value === 0}
size='xs'
marginRight='0px'
id={'negative' + negative.id}
key={'negative' + negative.id}
/>
)}
</Form.Row>
))}
</Form.Group>
</div>
<div className='div-form'>
<Form.Group style={{ width: '80%', marginLeft: '1%' }} as={Row}>
<Form.Label
className='mb-1'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '110%',
textAlign: 'left'
}}
>
Ending Comments:
</Form.Label>
</Form.Group>
<div
style={{
display: 'inline-block',
width: '80%',
marginTop: '5px'
}}
>
<Form.Group>
<Form.Control
value={this.state.reflectionComments}
as='textarea'
type='text'
placeholder='Any ending comments'
onChange={this.handleReflectionComment}
rows='3'
style={{
background: 'none',
fontFamily: 'Helvetica, Arial'
}}
/>
</Form.Group>
</div>
<Form.Check
onChange={this.handleFollowUp}
checked={this.state.markForFollowUp}
custom
style={{
fontSize: '100%',
fontFamily: 'Helvetica, Arial'
}}
type='checkbox'
label='Mark for follow up'
id='followUp'
/>
</div>
<Button
variant='success'
type='btn'
style={{
fontFamily: 'Helvetica, Arial',
boxShadow: '-3px 3px black, -2px 2px black, -1px 1px black',
border: '1px solid black',
marginRight: '8%'
}}
onClick={this.handleStage4Decrement}
className='btn-lg'
>
Back
</Button>
<Button
variant='success'
type='btn'
style={{
fontFamily: 'Helvetica, Arial',
boxShadow: '-3px 3px black, -2px 2px black, -1px 1px black',
border: '1px solid black',
marginLeft: '8%'
}}
onClick={this.handleSubmit}
className='btn-lg'
>
Submit
</Button>
</div>
</div>
);
}
}
}
Example #17
| Source File: Dashboard.js From DayPlanner with Creative Commons Attribution 4.0 International | 4 votes |
|
render() {
if (this.state.directlyDashboard) return <Redirect to="/" />;
if (this.state.isSetting)
return (
<div>
<Navbar currentUser={this.state.loggedUser} func={this.setSettingsPage} />
<div className="container mt-3">
<div className="float-right">
<i class="fas fa-times" onClick={this.setSettingsPage}></i>
</div>
<div className="row">
<div className="col-2 border-right">
<SettingsSidebar func={this.setWhichSettingsPage} />
</div>
<div className="col-10">
{this.state.whichSettingsPage === 'Account' ? (
<AccountSettings currentUser={this.state.loggedUser} />
) : null}
{this.state.whichSettingsPage === 'Preferences' ? (
<PreferencesSettings currentUser={this.state.loggedUser} />
) : null}
{this.state.whichSettingsPage === 'Daily' ? (
<DailySettings currentUser={this.state.loggedUser} />
) : null}
</div>
</div>
</div>
</div>
);
const {
loggedUser,
turnTodayDisplay,
isTimerScreen,
minDate,
taskToPost,
taskIdInTimer,
usertasks,
} = this.state;
return (
<div>
<Navbar currentUser={loggedUser} func={this.setSettingsPage} />
<div className="justify-content-center d-flex mt-5">
<Sidebar
sidebar={
<div className="text-center">
<br />
<h4>Edit your task</h4>
<br />
<input
type="text"
className="put-task w-75"
onChange={this.handleInputPutTask}
value={this.state.taskToPut}
/>
<br />
<p className="colors-area text-left pl-5" onChange={null}>
<span className="pr-2">Color:</span>
<i
className="far fa-circle pr-2 cursor-pointer"
style={{ color: 'LimeGreen' }}
onClick={this.handleColorSelect}></i>
<i
className="far fa-circle pr-2 cursor-pointer"
style={{ color: 'Crimson' }}
onClick={this.handleColorSelect}></i>
<i
className="far fa-circle pr-2 cursor-pointer"
style={{ color: 'DodgerBlue' }}
onClick={this.handleColorSelect}></i>
<i
className="far fa-circle pr-2 cursor-pointer"
style={{ color: 'DarkOrange' }}
onClick={this.handleColorSelect}></i>
</p>
<div className="pl-5 pr-5">
<label for="customRange3">Work Time ({this.state.workTime}min)</label>
<input
type="range"
class="custom-range"
min="10"
max="120"
step="5"
id="customRange3"
defaultValue="60"
value={this.state.workTime}
onChange={this.handleWorkTime}
/>
<label for="customRange4">Break Time ({this.state.breakTime}min)</label>
<input
type="range"
class="custom-range"
min="5"
max="30"
step="5"
id="customRange4"
defaultValue="15"
value={this.state.breakTime}
onChange={this.handleBreakTime}
/>
</div>
<textarea
className="transparent-bg-full border-0 pl-3"
placeholder="Enter your task's notes"
name=""
id=""
cols="30"
rows="13"
onChange={this.handleTaskNote}
value={this.state.taskNote}></textarea>
<button className="btn btn-success w-75" onClick={this.putItem}>
Save Changes
</button>
</div>
}
open={this.state.sidebarOpen}
onSetOpen={this.onSetSidebarOpen}
pullRight="true"
styles={{
sidebar: { background: 'rgba(255, 255, 255, 0.5)', marginTop: '55px', width: '25%' },
}}></Sidebar>
<div className="card text-center transparent-bg" style={{ width: '30%' }}>
<div className="card-header">
<h3>{this.getDate()}</h3>
<span className="text-center" style={{ display: turnTodayDisplay }}>
<a href="#" className="turn-today" onClick={this.handleTurnToday}>
Turn Today
</a>
</span>
</div>
<div className="card-body text-left" style={{ height: '100%' }}>
<a
href="#"
className="arrow arrow-right transparent-color"
onClick={this.minus}
style={{
visibility: isTimerScreen ? 'hidden' : 'visible',
}}>
<i className="fas fa-chevron-right"></i>
</a>
<a
href="#"
className="arrow arrow-left transparent-color"
onClick={this.plus}
style={{
visibility: isTimerScreen || minDate ? 'hidden' : 'visible',
}}>
<i className="fas fa-chevron-left"></i>
</a>
<input
type="text"
className="add-task"
placeholder="Add new task"
onChange={this.handleInputPostTask}
value={taskToPost}
style={{
display: isTimerScreen || turnTodayDisplay === 'inline' ? 'none' : 'inline',
}}
onKeyPress={this.postItem}
/>
<Dropdown
style={{
display: isTimerScreen || turnTodayDisplay === 'inline' ? 'none' : 'inline-block',
}}>
<Dropdown.Toggle style={{ background: 'transparent', border: 'none', color: 'black' }}>
<i class="fas fa-ellipsis-v"></i>
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item onClick={this.filterColor} id="remove-filter">
Remove Filter
</Dropdown.Item>
<Dropdown.Item className="dropdownitem">
<p className="" onChange={null}>
<i
className="far fa-circle pr-2 cursor-pointer"
style={{ color: 'LimeGreen' }}
onClick={this.filterColor}
id="green"></i>
<i
className="far fa-circle pr-2 cursor-pointer"
style={{ color: 'Crimson' }}
onClick={this.filterColor}
id="red"></i>
<i
className="far fa-circle pr-2 cursor-pointer"
style={{ color: 'DodgerBlue' }}
onClick={this.filterColor}
id="blue"></i>
<i
className="far fa-circle pr-2 cursor-pointer"
style={{ color: 'DarkOrange' }}
onClick={this.filterColor}
id="yellow"></i>
</p>
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
{isTimerScreen === true ? (
<Timer
id={taskIdInTimer}
tasks={usertasks}
func={this.setTimerScreen}
currentUser={loggedUser}
/>
) : (
<ul className="tasksbox">
{this.state.colorToFilter === 'red' ? this.renderTasks('crimson') : null}
{this.state.colorToFilter === 'yellow' ? this.renderTasks('darkorange') : null}
{this.state.colorToFilter === 'green' ? this.renderTasks('limegreen') : null}
{this.state.colorToFilter === 'blue' ? this.renderTasks('dodgerblue') : null}
{this.state.colorToFilter === 'remove-filter' ? (
<div>
{this.renderTasks('crimson')}
{this.renderTasks('darkorange')}
{this.renderTasks('dodgerblue')}
{this.renderTasks('limegreen')}
{this.renderTasks()}
</div>
) : null}
</ul>
)}
{/* <p className="text-center p-0 m-0" style={{ fontSize: '1.5rem' }}>
<i className="fas fa-sort-down"></i>
</p> */}
</div>
</div>
</div>
</div>
);
}
Example #18
| Source File: Data.js From FRCScout2020 with MIT License | 4 votes |
|
render() {
const competitionItems = this.state.competitions.map(competition => (
<Dropdown.Item
eventKey={competition.shortname}
key={competition.competitionid}
style={{ fontFamily: 'Helvetica, Arial' }}
>
{competition.shortname}
</Dropdown.Item>
));
const tableSectionItems = this.state.tableSections.map(section => (
<Dropdown.Item
eventKey={section.name}
key={section.id}
style={{ fontFamily: 'Helvetica, Arial' }}
>
{section.name}
</Dropdown.Item>
));
const tableColumnSpecifics = this.state.tableColumnSpecifics.map(type => (
<Dropdown.Item
eventKey={type.name}
key={type.id}
style={{ fontFamily: 'Helvetica, Arial' }}
>
{type.name}
</Dropdown.Item>
));
const tableColumnSpecificsMin = this.state.tableColumnSpecificsMin.map(
type => (
<Dropdown.Item
eventKey={type.name}
key={type.id}
style={{ fontFamily: 'Helvetica, Arial' }}
>
{type.name}
</Dropdown.Item>
)
);
let compColumns = [
{
headerStyle: {
width: '25%',
fontSize: '100%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
dataField: 'teamNum',
text: 'Team',
sort: true,
filter: textFilter({
className: 'customtextbar'
})
},
{
headerStyle: {
width: '25%',
fontSize: '100%',
outline: 'none'
},
dataField: 'matchesPlayed',
text: 'Matches Played'
},
{
headerStyle: {
fontSize: '75%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Auto Cells',
dataField: 'autoBottom' + this.state.autoBottomDataField,
text: 'Bottom (' + this.state.autoBottomDataField + ')'
},
{
headerStyle: {
fontSize: '75%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Auto Cells',
dataField: 'autoOuter' + this.state.autoOuterDataField,
text: 'Outer (' + this.state.autoOuterDataField + ')'
},
{
headerStyle: {
fontSize: '75%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Auto Cells',
dataField: 'autoInner' + this.state.autoInnerDataField,
text: 'Inner (' + this.state.autoInnerDataField + ')'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Baseline Cross',
dataField: 'crossLine',
text: 'Baseline Cross'
},
{
headerStyle: {
fontSize: '75%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Teleop Cells',
dataField: 'teleBottom' + this.state.teleBottomDataField,
text: 'Bottom (' + this.state.teleBottomDataField + ')'
},
{
headerStyle: {
fontSize: '75%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Teleop Cells',
dataField: 'teleOuter' + this.state.teleOuterDataField,
text: 'Outer (' + this.state.teleOuterDataField + ')'
},
{
headerStyle: {
fontSize: '75%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Teleop Cells',
dataField: 'teleInner' + this.state.teleInnerDataField,
text: 'Inner (' + this.state.teleInnerDataField + ')'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Rotation Control',
dataField: 'rotationControl',
text: 'Rotation(s)'
},
{
headerStyle: {
fontSize: '75%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Rotation Control',
dataField: 'rotationTimer' + this.state.rotationTimerDataField,
text: 'Timer (' + this.state.rotationTimerDataField + ')'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Position Control',
dataField: 'positionControl',
text: 'Position(s)'
},
{
headerStyle: {
fontSize: '75%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Position Control',
dataField: 'positionTimer' + this.state.positionTimerDataField,
text: 'Timer (' + this.state.positionTimerDataField + ')'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Park',
dataField: 'park',
text: 'Park(s)'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Climb',
dataField: 'climb',
text: 'Climb(s)'
},
{
headerStyle: {
fontSize: '75%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Climb',
dataField: 'climbTimer' + this.state.climbTimerDataField,
text: 'Timer (' + this.state.climbTimerDataField + ')'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Climb',
dataField: 'buddyClimb',
text: 'Buddy Climb(s)'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Level',
dataField: 'level',
text: 'Levels(s)'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Penalties',
dataField: 'penalties',
text: 'Penalties'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Penalties',
dataField: 'yellowCards',
text: 'Yellow Cards'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Penalties',
dataField: 'redCards',
text: 'Red Cards'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Break/Comm.',
dataField: 'break',
text: 'Break(s)'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none',
wordBreak: 'break-all'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Break/Comm.',
dataField: 'communication',
text: 'Communication'
}
];
let teamColumns = [
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
dataField: 'matchNum',
text: 'Match #'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
dataField: 'crossLine',
text: 'Baseline Cross'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
dataField: 'bottomAutoScore',
text: 'Bottom (Auto)'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
dataField: 'outerAutoScore',
text: 'Outer (Auto)'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
dataField: 'innerAutoScore',
text: 'Inner (Auto)'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
dataField: 'bottomTeleopScore',
text: 'Bottom (Teleop)'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
dataField: 'outerTeleopScore',
text: 'Outer (Teleop)'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
dataField: 'innerTeleopScore',
text: 'Inner (Teleop)'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
dataField: 'rotationControl',
text: 'Rotation Control'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
dataField: 'rotationTimer',
text: 'Rotation Timer'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
dataField: 'positionControl',
text: 'Position Control'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
dataField: 'positionTimer',
text: 'Position Timer'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
dataField: 'park',
text: 'Park'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
dataField: 'climb',
text: 'Climb'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
dataField: 'endGameTimer',
text: 'End Game Timer'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
dataField: 'level',
text: 'Level'
}
];
if (this.state.competition === '') {
return null;
}
if (this.state.retrieved === '') {
return null;
} else if (this.state.retrieved === 'teamMatchInvalid') {
return (
<div className='div-main' style={{ minHeight: this.state.heightSize }}>
<div className='justify-content-center'>
<img
alt='Logo'
src={Logo}
style={{
width: this.state.widthSize === '90%' ? '70%' : '30%',
marginTop: '20px',
marginLeft: '10px'
}}
/>
</div>
<div style={{ width: this.state.widthSize }} className='div-second'>
<div className='div-form'>
<Form.Group
style={{
width: '100%',
margin: '0 auto',
marginBottom: '10px'
}}
as={Row}
>
<Form.Label
className='mb-1'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '110%',
margin: '0 auto'
}}
>
Competition:
</Form.Label>
</Form.Group>
<Dropdown
style={{
marginBottom: '10px'
}}
focusFirstItemOnShow={false}
onSelect={this.getData}
>
<Dropdown.Toggle
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'center'
}}
size='lg'
variant='success'
id='dropdown-basic'
>
{this.state.competition}
</Dropdown.Toggle>
<Dropdown.Menu style={{ minWidth: '3%' }}>
{competitionItems}
</Dropdown.Menu>
</Dropdown>
<Form.Control
value={this.state.teamNum}
autoComplete='off'
type='number'
max={9999}
min={1}
placeholder='Team Number'
onChange={this.handleTeamNum}
className='mb-1'
style={{
background: 'none',
fontFamily: 'Helvetica, Arial',
display: 'inline-block',
width: '50%'
}}
onKeyDown={this.checkKeyTeamGo}
/>
<Button
variant='success'
type='btn'
style={{
fontFamily: 'Helvetica, Arial',
boxShadow: '-3px 3px black, -2px 2px black, -1px 1px black',
border: '1px solid black',
marginLeft: '4%',
display: 'inline-block'
}}
onClick={this.handleTeamGo}
className='btn-xs'
>
Go
</Button>
</div>
<div>
<Button
size='xs'
onClick={this.changeToMatchData}
variant={
this.state.teamDataType === 'match'
? 'success'
: 'outline-success'
}
style={{ display: 'inline-block', marginRight: '2%' }}
>
Match Data
</Button>
<Button
size='xs'
onClick={this.changeToPitData}
variant={
this.state.teamDataType === 'pit'
? 'success'
: 'outline-success'
}
style={{ display: 'inline-block', marginLeft: '2%' }}
>
Pit Data
</Button>
</div>
<h1 className='pt-4'>No match data available</h1>
</div>
</div>
);
} else if (this.state.retrieved === 'teamPitInvalid') {
return (
<div className='div-main' style={{ minHeight: this.state.heightSize }}>
<div className='justify-content-center'>
<img
alt='Logo'
src={Logo}
style={{
width: this.state.widthSize === '90%' ? '70%' : '30%',
marginTop: '20px',
marginLeft: '10px'
}}
/>
</div>
<div style={{ width: this.state.widthSize }} className='div-second'>
<div className='div-form'>
<Form.Group
style={{
width: '100%',
margin: '0 auto',
marginBottom: '10px'
}}
as={Row}
>
<Form.Label
className='mb-1'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '110%',
margin: '0 auto'
}}
>
Competition:
</Form.Label>
</Form.Group>
<Dropdown
style={{
marginBottom: '10px'
}}
focusFirstItemOnShow={false}
onSelect={this.getData}
>
<Dropdown.Toggle
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'center'
}}
size='lg'
variant='success'
id='dropdown-basic'
>
{this.state.competition}
</Dropdown.Toggle>
<Dropdown.Menu style={{ minWidth: '3%' }}>
{competitionItems}
</Dropdown.Menu>
</Dropdown>
<Form.Control
value={this.state.teamNum}
autoComplete='off'
type='number'
max={9999}
min={1}
placeholder='Team Number'
onChange={this.handleTeamNum}
className='mb-1'
style={{
background: 'none',
fontFamily: 'Helvetica, Arial',
display: 'inline-block',
width: '50%'
}}
onKeyDown={this.checkKeyTeamGo}
/>
<Button
variant='success'
type='btn'
style={{
fontFamily: 'Helvetica, Arial',
boxShadow: '-3px 3px black, -2px 2px black, -1px 1px black',
border: '1px solid black',
marginLeft: '4%',
display: 'inline-block'
}}
onClick={this.handleTeamGo}
className='btn-xs'
>
Go
</Button>
</div>
<div>
<Button
size='xs'
onClick={this.changeToMatchData}
variant={
this.state.teamDataType === 'match'
? 'success'
: 'outline-success'
}
style={{ display: 'inline-block', marginRight: '2%' }}
>
Match Data
</Button>
<Button
size='xs'
onClick={this.changeToPitData}
variant={
this.state.teamDataType === 'pit'
? 'success'
: 'outline-success'
}
style={{ display: 'inline-block', marginLeft: '2%' }}
>
Pit Data
</Button>
</div>
<h1 className='pt-4'>No pit data available</h1>
</div>
</div>
);
} else if (this.state.retrieved === 'compValid') {
return (
<div className='div-main' style={{ minHeight: this.state.heightSize }}>
<div className='justify-content-center'>
<img
alt='Logo'
src={Logo}
style={{
width: this.state.widthSize === '90%' ? '70%' : '30%',
marginTop: '20px',
marginLeft: '10px'
}}
/>
</div>
<div style={{ width: this.state.widthSize }} className='div-second'>
<div className='div-form'>
<Form.Group
style={{
width: '100%',
margin: '0 auto',
marginBottom: '10px'
}}
as={Row}
>
<Form.Label
className='mb-1'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '110%',
margin: '0 auto'
}}
>
Competition:
</Form.Label>
</Form.Group>
<Dropdown
style={{
marginBottom: '10px'
}}
focusFirstItemOnShow={false}
onSelect={this.getData}
>
<Dropdown.Toggle
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'center'
}}
size='lg'
variant='success'
id='dropdown-basic'
>
{this.state.competition}
</Dropdown.Toggle>
<Dropdown.Menu style={{ minWidth: '3%' }}>
{competitionItems}
</Dropdown.Menu>
</Dropdown>
<Form.Control
value={this.state.teamNum}
autoComplete='off'
type='number'
max={9999}
min={1}
placeholder='Team Number'
onChange={this.handleTeamNum}
className='mb-1'
style={{
background: 'none',
fontFamily: 'Helvetica, Arial',
display: 'inline-block',
width: '50%'
}}
onKeyDown={this.checkKeyTeamGo}
/>
<Button
variant='success'
type='btn'
style={{
fontFamily: 'Helvetica, Arial',
boxShadow: '-3px 3px black, -2px 2px black, -1px 1px black',
border: '1px solid black',
marginLeft: '4%',
display: 'inline-block'
}}
onClick={this.handleTeamGo}
className='btn-xs'
>
Go
</Button>
</div>
<div style={{ textAlign: 'middle', marginBottom: '3%' }}>
<Dropdown
style={{ display: 'inline-block' }}
focusFirstItemOnShow={false}
onSelect={this.changeTable}
>
<Dropdown.Toggle
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'center'
}}
size='xs'
variant='success'
id='dropdown-basic'
>
{this.state.tableSection}
</Dropdown.Toggle>
<Dropdown.Menu>{tableSectionItems}</Dropdown.Menu>
</Dropdown>
</div>
{this.state.tableSection === 'Auto Cells' ? (
<React.Fragment>
<Dropdown
style={{ display: 'inline-block' }}
focusFirstItemOnShow={false}
onSelect={this.changeAutoBottomColumn}
>
<Dropdown.Toggle
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'center'
}}
size='sm'
variant='success'
id='dropdown-basic'
>
{this.state.autoBottomDataField}
</Dropdown.Toggle>
<Dropdown.Menu>{tableColumnSpecifics}</Dropdown.Menu>
</Dropdown>
<Dropdown
style={{
display: 'inline-block',
marginLeft: '3%',
marginRight: '3%'
}}
focusFirstItemOnShow={false}
onSelect={this.changeAutoOuterColumn}
>
<Dropdown.Toggle
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'center'
}}
size='sm'
variant='success'
id='dropdown-basic'
>
{this.state.autoOuterDataField}
</Dropdown.Toggle>
<Dropdown.Menu>{tableColumnSpecifics}</Dropdown.Menu>
</Dropdown>
<Dropdown
style={{ display: 'inline-block' }}
focusFirstItemOnShow={false}
onSelect={this.changeAutoInnerColumn}
>
<Dropdown.Toggle
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'center'
}}
size='sm'
variant='success'
id='dropdown-basic'
>
{this.state.autoInnerDataField}
</Dropdown.Toggle>
<Dropdown.Menu>{tableColumnSpecifics}</Dropdown.Menu>
</Dropdown>
</React.Fragment>
) : null}
{this.state.tableSection === 'Teleop Cells' ? (
<React.Fragment>
<Dropdown
style={{ display: 'inline-block' }}
focusFirstItemOnShow={false}
onSelect={this.changeTeleBottomColumn}
>
<Dropdown.Toggle
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'center'
}}
size='sm'
variant='success'
id='dropdown-basic'
>
{this.state.teleBottomDataField}
</Dropdown.Toggle>
<Dropdown.Menu>{tableColumnSpecifics}</Dropdown.Menu>
</Dropdown>
<Dropdown
style={{
display: 'inline-block',
marginLeft: '3%',
marginRight: '3%'
}}
focusFirstItemOnShow={false}
onSelect={this.changeTeleOuterColumn}
>
<Dropdown.Toggle
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'center'
}}
size='sm'
variant='success'
id='dropdown-basic'
>
{this.state.teleOuterDataField}
</Dropdown.Toggle>
<Dropdown.Menu>{tableColumnSpecifics}</Dropdown.Menu>
</Dropdown>
<Dropdown
style={{ display: 'inline-block' }}
focusFirstItemOnShow={false}
onSelect={this.changeTeleInnerColumn}
>
<Dropdown.Toggle
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'center'
}}
size='sm'
variant='success'
id='dropdown-basic'
>
{this.state.teleInnerDataField}
</Dropdown.Toggle>
<Dropdown.Menu>{tableColumnSpecifics}</Dropdown.Menu>
</Dropdown>
</React.Fragment>
) : null}
{this.state.tableSection === 'Rotation Control' ? (
<Dropdown
style={{ display: 'inline-block' }}
focusFirstItemOnShow={false}
onSelect={this.changeRotationTimerColumn}
>
<Dropdown.Toggle
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'center'
}}
size='sm'
variant='success'
id='dropdown-basic'
>
{this.state.rotationTimerDataField}
</Dropdown.Toggle>
<Dropdown.Menu>{tableColumnSpecificsMin}</Dropdown.Menu>
</Dropdown>
) : null}
{this.state.tableSection === 'Position Control' ? (
<Dropdown
style={{ display: 'inline-block' }}
focusFirstItemOnShow={false}
onSelect={this.changePositionTimerColumn}
>
<Dropdown.Toggle
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'center'
}}
size='sm'
variant='success'
id='dropdown-basic'
>
{this.state.positionTimerDataField}
</Dropdown.Toggle>
<Dropdown.Menu>{tableColumnSpecificsMin}</Dropdown.Menu>
</Dropdown>
) : null}
{this.state.tableSection === 'Climb' ? (
<Dropdown
style={{ display: 'inline-block' }}
focusFirstItemOnShow={false}
onSelect={this.changeClimbTimerColumn}
>
<Dropdown.Toggle
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'center'
}}
size='sm'
variant='success'
id='dropdown-basic'
>
{this.state.climbTimerDataField}
</Dropdown.Toggle>
<Dropdown.Menu>{tableColumnSpecificsMin}</Dropdown.Menu>
</Dropdown>
) : null}
</div>
<BootstrapTable
striped
hover
keyField='teamNum'
//rowStyle={this.state.style}
bordered
bootstrap4
// defaultSorted={defaultSorted}
data={this.state.competitionData}
columns={compColumns}
filter={filterFactory()}
/>
</div>
);
} else if (this.state.retrieved === 'teamMatchValid') {
return (
<React.Fragment>
<div className='div-main'>
<div className='justify-content-center'>
<img
alt='Logo'
src={Logo}
style={{
width: this.state.widthSize === '90%' ? '70%' : '30%',
marginTop: '20px',
marginLeft: '10px'
}}
/>
</div>
<div style={{ width: this.state.widthSize }} className='div-second'>
<div className='div-form'>
<Form.Group
style={{
width: '100%',
margin: '0 auto',
marginBottom: '10px'
}}
as={Row}
>
<Form.Label
className='mb-1'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '110%',
margin: '0 auto'
}}
>
Competition:
</Form.Label>
</Form.Group>
<Dropdown
style={{
marginBottom: '10px'
}}
focusFirstItemOnShow={false}
onSelect={this.getData}
>
<Dropdown.Toggle
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'center'
}}
size='lg'
variant='success'
id='dropdown-basic'
>
{this.state.competition}
</Dropdown.Toggle>
<Dropdown.Menu style={{ minWidth: '3%' }}>
{competitionItems}
</Dropdown.Menu>
</Dropdown>
<Form.Control
value={this.state.teamNum}
autoComplete='off'
type='number'
max={9999}
min={1}
placeholder='Team Number'
onChange={this.handleTeamNum}
className='mb-1'
style={{
background: 'none',
fontFamily: 'Helvetica, Arial',
display: 'inline-block',
width: '50%'
}}
onKeyDown={this.checkKeyTeamGo}
/>
<Button
variant='success'
type='btn'
style={{
fontFamily: 'Helvetica, Arial',
boxShadow: '-3px 3px black, -2px 2px black, -1px 1px black',
border: '1px solid black',
marginLeft: '4%',
display: 'inline-block'
}}
onClick={this.handleTeamGo}
className='btn-xs'
>
Go
</Button>
</div>
<div>
<Button
size='xs'
onClick={this.changeToMatchData}
variant={
this.state.teamDataType === 'match'
? 'success'
: 'outline-success'
}
style={{ display: 'inline-block', marginRight: '2%' }}
>
Match Data
</Button>
<Button
size='xs'
onClick={this.changeToPitData}
variant={
this.state.teamDataType === 'pit'
? 'success'
: 'outline-success'
}
style={{ display: 'inline-block', marginLeft: '2%' }}
>
Pit Data
</Button>
</div>
</div>
{this.state.widthSize === '90%' ? (
<div className='graph-holder'>
<div className='graph-wrap'>
<ResponsiveContainer
width={this.state.widthSize === '90%' ? '15%' : '50%'}
height={300}
>
<BarChart data={this.state.graphData}>
<CartesianGrid strokeDasharray='3 3' />
<XAxis dataKey='matchNum'></XAxis>
<YAxis padding={{ top: 25 }} />
<Legend verticalAlign='top' height={36} iconSize={0} />
<Bar
name='Auto - Bottom Cells'
dataKey={'bottomAutoScore'}
fill='#8884d8'
>
<LabelList
dataKey={'bottomAutoScore'}
position='insideTop'
offset={-20}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
<ResponsiveContainer
width={this.state.widthSize === '90%' ? '15%' : '50%'}
height={300}
>
<BarChart data={this.state.graphData}>
<CartesianGrid strokeDasharray='3 3' />
<XAxis dataKey='matchNum'></XAxis>
<YAxis padding={{ top: 25 }} />
<Legend verticalAlign='top' height={36} iconSize={0} />
<Bar
name='Teleop - Bottom Cells'
dataKey={'bottomTeleopScore'}
fill='#8884d8'
>
<LabelList
dataKey={'bottomTeleopScore'}
position='insideTop'
offset={-20}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
<ResponsiveContainer
width={this.state.widthSize === '90%' ? '15%' : '50%'}
height={300}
>
<BarChart data={this.state.graphData}>
<CartesianGrid strokeDasharray='3 3' />
<XAxis dataKey='matchNum'></XAxis>
<YAxis padding={{ top: 25 }} />
<Legend verticalAlign='top' height={36} iconSize={0} />
<Bar
name='Auto - Outer Cells'
dataKey={'outerAutoScore'}
fill='#8884d8'
>
<LabelList
dataKey={'outerAutoScore'}
position='insideTop'
offset={-20}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
<ResponsiveContainer
width={this.state.widthSize === '90%' ? '15%' : '50%'}
height={300}
>
<BarChart data={this.state.graphData}>
<CartesianGrid strokeDasharray='3 3' />
<XAxis dataKey='matchNum'></XAxis>
<YAxis padding={{ top: 25 }} />
<Legend verticalAlign='top' height={36} iconSize={0} />
<Bar
name='Teleop - Outer Cells'
dataKey={'outerTeleopScore'}
fill='#8884d8'
>
<LabelList
dataKey={'outerTeleopScore'}
position='insideTop'
offset={-20}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
<ResponsiveContainer
width={this.state.widthSize === '90%' ? '15%' : '50%'}
height={300}
>
<BarChart data={this.state.graphData}>
<CartesianGrid strokeDasharray='3 3' />
<XAxis dataKey='matchNum'></XAxis>
<YAxis padding={{ top: 25 }} />
<Legend verticalAlign='top' height={36} iconSize={0} />
<Bar
name='Auto - Inner Cells'
dataKey={'innerAutoScore'}
fill='#8884d8'
>
<LabelList
dataKey={'innerAutoScore'}
position='insideTop'
offset={-20}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
<ResponsiveContainer
width={this.state.widthSize === '90%' ? '15%' : '50%'}
height={300}
>
<BarChart data={this.state.graphData}>
<CartesianGrid strokeDasharray='3 3' />
<XAxis dataKey='matchNum'></XAxis>
<YAxis padding={{ top: 25 }} />
<Legend verticalAlign='top' height={36} iconSize={0} />
<Bar
name='Teleop - Inner Cells'
dataKey={'innerTeleopScore'}
fill='#8884d8'
>
<LabelList
dataKey={'innerTeleopScore'}
position='insideTop'
offset={-20}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
</div>
</div>
) : (
<React.Fragment>
<div>
<ResponsiveContainer
width={this.state.widthSize === '90%' ? '90%' : '50%'}
height={300}
>
<BarChart data={this.state.graphData}>
<CartesianGrid strokeDasharray='3 3' />
<XAxis dataKey='matchNum'></XAxis>
<YAxis padding={{ top: 25 }} />
<Legend verticalAlign='top' height={36} iconSize={0} />
<Bar
name='Auto - Bottom Cells'
dataKey={'bottomAutoScore'}
fill='#8884d8'
>
<LabelList
dataKey={'bottomAutoScore'}
position='insideTop'
offset={-20}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
<ResponsiveContainer
width={this.state.widthSize === '90%' ? '90%' : '50%'}
height={300}
>
<BarChart data={this.state.graphData}>
<CartesianGrid strokeDasharray='3 3' />
<XAxis dataKey='matchNum'></XAxis>
<YAxis padding={{ top: 25 }} />
<Legend verticalAlign='top' height={36} iconSize={0} />
<Bar
name='Teleop - Bottom Cells'
dataKey={'bottomTeleopScore'}
fill='#8884d8'
>
<LabelList
dataKey={'bottomTeleopScore'}
position='insideTop'
offset={-20}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
</div>
<div>
<ResponsiveContainer
width={this.state.widthSize === '90%' ? '90%' : '50%'}
height={300}
>
<BarChart data={this.state.graphData}>
<CartesianGrid strokeDasharray='3 3' />
<XAxis dataKey='matchNum'></XAxis>
<YAxis padding={{ top: 25 }} />
<Legend verticalAlign='top' height={36} iconSize={0} />
<Bar
name='Auto - Outer Cells'
dataKey={'outerAutoScore'}
fill='#8884d8'
>
<LabelList
dataKey={'outerAutoScore'}
position='insideTop'
offset={-20}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
<ResponsiveContainer
width={this.state.widthSize === '90%' ? '90%' : '50%'}
height={300}
>
<BarChart data={this.state.graphData}>
<CartesianGrid strokeDasharray='3 3' />
<XAxis dataKey='matchNum'></XAxis>
<YAxis padding={{ top: 25 }} />
<Legend verticalAlign='top' height={36} iconSize={0} />
<Bar
name='Teleop - Outer Cells'
dataKey={'outerTeleopScore'}
fill='#8884d8'
>
<LabelList
dataKey={'outerTeleopScore'}
position='insideTop'
offset={-20}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
</div>
<div>
<ResponsiveContainer
width={this.state.widthSize === '90%' ? '90%' : '50%'}
height={300}
>
<BarChart data={this.state.graphData}>
<CartesianGrid strokeDasharray='3 3' />
<XAxis dataKey='matchNum'></XAxis>
<YAxis padding={{ top: 25 }} />
<Legend verticalAlign='top' height={36} iconSize={0} />
<Bar
name='Auto - Inner Cells'
dataKey={'innerAutoScore'}
fill='#8884d8'
>
<LabelList
dataKey={'innerAutoScore'}
position='insideTop'
offset={-20}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
<ResponsiveContainer
width={this.state.widthSize === '90%' ? '90%' : '50%'}
height={300}
>
<BarChart data={this.state.graphData}>
<CartesianGrid strokeDasharray='3 3' />
<XAxis dataKey='matchNum'></XAxis>
<YAxis padding={{ top: 25 }} />
<Legend verticalAlign='top' height={36} iconSize={0} />
<Bar
name='Teleop - Inner Cells'
dataKey={'innerTeleopScore'}
fill='#8884d8'
>
<LabelList
dataKey={'innerTeleopScore'}
position='insideTop'
offset={-20}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
</div>
</React.Fragment>
)}
</div>
<div className='table-holder'>
<div className='table-wrap'>
<BootstrapTable
striped
hover
keyField='matchNum'
//rowStyle={this.state.style}
bordered
bootstrap4
// defaultSorted={defaultSorted}
data={this.state.matchData}
columns={teamColumns}
/>
</div>
</div>
</React.Fragment>
);
} else if (this.state.retrieved === 'teamPitValid') {
return (
<div className='div-main'>
<div className='justify-content-center'>
<img
alt='Logo'
src={Logo}
style={{
width: this.state.widthSize === '90%' ? '70%' : '30%',
marginTop: '20px',
marginLeft: '10px'
}}
/>
</div>
<div style={{ width: this.state.widthSize }} className='div-second'>
<div className='div-form'>
<Form.Group
style={{
width: '100%',
margin: '0 auto',
marginBottom: '10px'
}}
as={Row}
>
<Form.Label
className='mb-1'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '110%',
margin: '0 auto'
}}
>
Competition:
</Form.Label>
</Form.Group>
<Dropdown
style={{
marginBottom: '10px'
}}
focusFirstItemOnShow={false}
onSelect={this.getData}
>
<Dropdown.Toggle
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'center'
}}
size='lg'
variant='success'
id='dropdown-basic'
>
{this.state.competition}
</Dropdown.Toggle>
<Dropdown.Menu style={{ minWidth: '3%' }}>
{competitionItems}
</Dropdown.Menu>
</Dropdown>
<Form.Control
value={this.state.teamNum}
autoComplete='off'
type='number'
max={9999}
min={1}
placeholder='Team Number'
onChange={this.handleTeamNum}
className='mb-1'
style={{
background: 'none',
fontFamily: 'Helvetica, Arial',
display: 'inline-block',
width: '50%'
}}
onKeyDown={this.checkKeyTeamGo}
/>
<Button
variant='success'
type='btn'
style={{
fontFamily: 'Helvetica, Arial',
boxShadow: '-3px 3px black, -2px 2px black, -1px 1px black',
border: '1px solid black',
marginLeft: '4%',
display: 'inline-block'
}}
onClick={this.handleTeamGo}
className='btn-xs'
>
Go
</Button>
</div>
<div>
<Button
size='xs'
onClick={this.changeToMatchData}
variant={
this.state.teamDataType === 'match'
? 'success'
: 'outline-success'
}
style={{ display: 'inline-block', marginRight: '2%' }}
>
Match Data
</Button>
<Button
size='xs'
onClick={this.changeToPitData}
variant={
this.state.teamDataType === 'pit'
? 'success'
: 'outline-success'
}
style={{ display: 'inline-block', marginLeft: '2%' }}
>
Pit Data
</Button>
</div>
<div
className='div-form'
style={{ textAlign: 'center', marginTop: '20px' }}
>
<p
style={{
fontSize: '150%',
fontFamily: 'Helvetica, Arial'
}}
>
{'Group: ' + this.state.pitData.groupName}
</p>
<p
style={{
fontSize: '150%',
fontFamily: 'Helvetica, Arial'
}}
>
{'Weight: ' + this.state.pitData.weight + ' lbs'}
</p>
<p
style={{
fontSize: '150%',
fontFamily: 'Helvetica, Arial'
}}
>
{'Height: ' + this.state.pitData.height + ' inches'}
</p>
</div>
<div
className='div-form'
style={{ textAlign: 'center', marginTop: '20px' }}
>
<p
style={{
fontSize: '150%',
fontFamily: 'Helvetica, Arial'
}}
>
{'Drive Train: ' + this.state.pitData.driveTrain}
</p>
<p
style={{
fontSize: '150%',
fontFamily: 'Helvetica, Arial'
}}
>
{'Motors: ' + this.state.pitData.motors}
</p>
<p
style={{
fontSize: '150%',
fontFamily: 'Helvetica, Arial'
}}
>
{'Wheels: ' + this.state.pitData.wheels}
</p>
<p
style={{
textAlign: 'left',
fontSize: '100%',
fontFamily: 'Helvetica, Arial'
}}
>
{'Drive Comments: ' +
(this.state.pitData.driveComments === ''
? 'No comments'
: this.state.pitData.driveComments)}
</p>
</div>
<div
className='div-form'
style={{ textAlign: 'center', marginTop: '20px' }}
>
<p
style={{
fontSize: '150%',
fontFamily: 'Helvetica, Arial'
}}
>
{'Code Language: ' + this.state.pitData.codeLanguage}
</p>
<p
style={{
fontSize: '150%',
fontFamily: 'Helvetica, Arial'
}}
>
{'Starting Position (Pref.): ' +
this.state.pitData.startingPosition}
</p>
<p
style={{
textAlign: 'left',
fontSize: '100%',
fontFamily: 'Helvetica, Arial'
}}
>
{'Auto Comments: ' +
(this.state.pitData.autoComments === ''
? 'No comments'
: this.state.pitData.autoComments)}
</p>
</div>
<div
className='div-form'
style={{ textAlign: 'center', marginTop: '20px' }}
>
<p
style={{
fontSize: '150%',
fontFamily: 'Helvetica, Arial'
}}
>
Abilities:
</p>
<ul>
{this.state.pitData.abilities.map(ability =>
ability.value ? (
<li
key={ability.id}
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'left'
}}
>
{ability.label}
</li>
) : null
)}
</ul>
</div>
<div
className='div-form'
style={{ textAlign: 'center', marginTop: '20px' }}
>
<p
style={{
textAlign: 'left',
fontSize: '100%',
fontFamily: 'Helvetica, Arial'
}}
>
{'Working On Comments: ' +
(this.state.pitData.workingOnComments === ''
? 'No comments'
: this.state.pitData.workingOnComments)}
</p>
<p
style={{
textAlign: 'left',
fontSize: '100%',
fontFamily: 'Helvetica, Arial'
}}
>
{'Closing Comments: ' +
(this.state.pitData.closingComments === ''
? 'No comments'
: this.state.pitData.closingComments)}
</p>
</div>
{this.state.pitData.image === null ? (
<p>No Image</p>
) : (
<ImagePreview
dataUri={this.state.pitData.image}
isFullscreen={false}
/>
)}
</div>
</div>
);
}
}
Example #19
| Source File: createClassForm.js From front-end with MIT License | 4 votes |
|
export default function CreateClass() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const [formState, setFormState] = useState({
className:'',
classDescription:'',
classCost:'',
classEquipment:'',
miami:false,
la:false,
ny:false,
cardio:false,
weights:false,
crossFit:false,
classSize:'',
classLength:'',
easy:false,
medium:false,
hard:false,
classArrivalTime:'',
classKnowledge:'',
startTime:'',
endTime:'',
sunday:false,
monday:false,
tuesday:false,
wednesday:false,
thurday:false,
friday:false,
saturday:false,
sunday:false
})
const changeHandelerString = (event) => {
setFormState({
...formState,
[event.target.name]:event.target.value
})
}
const changeHandelerBool = (event) => {
setFormState({
...formState,
[event.target.name]:event.target.checked
})
}
const submitHandeler = (event) => {
event.preventDefault();
console.log(`
Class Name:${formState.className},
Class Description:${formState.classDescription},
Cost:${formState.classCost},
Class Equipment:${formState.classEquipment},
Location: Miami - ${formState.miami}; New York - ${formState.ny}; Los Angeles - ${formState.la},
Type: Cardio - ${formState.cardio}; Weights - ${formState.weights}; Cross Fit - ${formState.crossFit},
Class Size:${formState.classSize},
Class Length:${formState.classLength},
Mode: Easy - ${formState.easy}; Medium - ${formState.medium}; Hard - ${formState.hard}
Arrival Time: ${formState.classArrivalTime},
What to Know: ${formState.classKnowledge},
Class Time: Start Time ${formState.startTime} - End Time ${formState.endTime},
Class Day(s): Monday: ${formState.monday} ;Tuesday: ${formState.tuesday} ;Wednesday: ${formState.wednesday} ;Thursday: ${formState.thursday} ;Friday: ${formState.friday} ;Saturday: ${formState.saturday} ;Sunday: ${formState.sunday}
`)
setFormState({
className:'',
classDescription:'',
classCost:'',
classEquipment:'',
miami:false,
la:false,
ny:false,
cardio:false,
weights:false,
crossFit:false,
classSize:'',
classLength:'',
easy:false,
medium:false,
hard:false,
classArrivalTime:'',
classKnowledge:'',
startTime:'',
endTime:'',
sunday:false,
monday:false,
tuesday:false,
wednesday:false,
thurday:false,
friday:false,
saturday:false,
sunday:false
})
}
return (
<div style={{margin:'auto 5rem'}}>
<button style={{backgroundColor:'#FF6900', border:'none', outline:'none',color:'black'}} onClick={handleShow}>
Create a Class
</button>
<Modal show={show} onHide={handleClose} dialogClassName='modal-container' size='lg'>
<Modal.Header closeButton >
<Modal.Title>Create a Class</Modal.Title>
</Modal.Header>
<Form onSubmit={submitHandeler}>
<Modal.Body dialogClassName='modal-body'>
<Form.Group controlId="className" style={{paddingLeft:'5%'}}>
<label htmlFor='className'>Class Name</label>
<Form.Control onChange={changeHandelerString} name='className' value={formState.className} type="name" style={{width:'50%'}} />
</Form.Group>
<Form.Group controlId="classDescription" style={{paddingLeft:'5%'}}>
<label htmlFor='classDescription'>Class Description</label>
<Form.Control onChange={changeHandelerString} name='classDescription' value={formState.classDescription} type="text" style={{width:'50%', height:'7.5rem'}} />
</Form.Group>
<Form.Group controlId="classCost" style={{paddingLeft:'5%'}}>
<label htmlFor='classCost'>Cost of Class</label>
<Form.Control onChange={changeHandelerString} name='classCost' value={formState.classCost} type="text" style={{width:'50%'}} />
</Form.Group>
<Form.Group controlId="classEquipment" style={{paddingLeft:'5%'}}>
<label htmlFor='classEquipment'>Class Equipment Requirements</label>
<Form.Control onChange={changeHandelerString} name='classEquipment' value={formState.classEquipment} type="text" style={{width:'50%', height:'3.5rem'}} />
</Form.Group>
<Form.Group controlId="classAddress" style={{paddingLeft:'5%' ,width:'25%'}}>
<label htmlFor='classAddress'>Class Address</label>
<Form.Control onChange={changeHandelerBool} as='select' name='cities' value={formState.cities}>
<option name='miami' value='miami'>Miami, FL</option>
<option name='la' value='la' >Los Angeles, CA</option>
<option name='ny' value='ny' >New York, NY</option>
</Form.Control>
</Form.Group>
<Form.Group controlId="classType" style={{paddingLeft:'5%'}}>
<label htmlFor='classType'>Class Type</label>
<Dropdown>
<Dropdown.Toggle style={{backgroundColor:'#FF6900', border:'none', outline:'0'}} id="dropdown-basic">
Type
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item onSelect={changeHandelerBool} name='cardio' value={formState.cardio} >Cardio</Dropdown.Item>
<Dropdown.Item onChange={changeHandelerBool} name='weights' value={formState.weights} >Weight Training</Dropdown.Item>
<Dropdown.Item onChange={changeHandelerBool} name='crossFit' value={formState.crossFit} >Cross Fit</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Form.Group>
<Form.Group controlId="classSize" style={{paddingLeft:'5%'}}>
<label htmlFor='classSize'>Class Size</label>
<Form.Control onChange={changeHandelerString} name='classSize' value={formState.classSize} type="text" style={{width:'15%'}} />
</Form.Group>
<Form.Group controlId="classLength" style={{paddingLeft:'5%'}}>
<label htmlFor='classLength'>Class Length(in minutes)</label>
<Form.Control onChange={changeHandelerString} name='classLength' value={formState.classLength} type="number" style={{width:'25%'}} />
</Form.Group>
<Form.Group controlId="classLevel" style={{paddingLeft:'5%'}}>
<label htmlFor='classLevel'>Class Type</label>
<Dropdown>
<Dropdown.Toggle style={{backgroundColor:'#FF6900', border:'none'}} id="dropdown-basic">
Class Level
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item onChange={changeHandelerBool} name='easy' value={formState.easy} >Easy</Dropdown.Item>
<Dropdown.Item onChange={changeHandelerBool} name='medium' value={formState.medium} >Medium</Dropdown.Item>
<Dropdown.Item onChange={changeHandelerBool} name='hard' value={formState.hard} >Hard</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Form.Group>
<Form.Group controlId="classArrivalTime" style={{paddingLeft:'5%'}}>
<label htmlFor='classArrivalTime'>When to Arrive</label>
<Form.Control onChange={changeHandelerString} name='classArrivalTime' value={formState.classArrivalTime} type="text" style={{width:'35%', height:'3.5rem'}} />
</Form.Group>
<Form.Group controlId="classKnowledge" style={{paddingLeft:'5%'}}>
<label htmlFor='classKnowledge'>What You Need to Know</label>
<Form.Control onChange={changeHandelerString} name='classKnowledge' value={formState.classKnowledge} type="text" style={{width:'35%', height:'6rem'}} />
</Form.Group>
<Form style={{paddingLeft:'5%'}}>
<label htmlFor='classTime'>Class Time</label>
<Form.Row name='classTime'>
<Form.Control onChange={changeHandelerString} type="text" name='startTime' value={formState.startTime} style={{width:'20%', marginRight:'1rem' }} placeholder="Start Time" />
<h6 style={{margin:'auto 0'}}> to </h6>
<Form.Control onChange={changeHandelerString} type='text' name='endTime' value={formState.endTime} style={{width:'20%', marginLeft:'1rem'}} placeholder="End Time" />
</Form.Row>
</Form>
<Form style={{paddingLeft:'5%', marginTop:'1rem'}}>
<label>Class Day(s)</label>
<ButtonGroup aria-label="Basic example">
<Button onChange={changeHandelerBool} name='sunday' value={formState.sunday} style={{fontSize:'.8rem',margin:'auto', backgroundColor:'#FF6900'}} variant="secondary">Sunday</Button>
<Button onChange={changeHandelerBool} name='monday' value={formState.monday} style={{fontSize:'.8rem',margin:'auto 0 auto .5rem', backgroundColor:'#FF6900', border:'none'}} variant="secondary">Monday</Button>
<Button onChange={changeHandelerBool} name='tuesday' value={formState.tuesday} style={{fontSize:'.8rem',margin:'auto 0 auto .5rem', backgroundColor:'#FF6900', border:'none'}} variant="secondary">Tuesday</Button>
<Button onChange={changeHandelerBool} name='wednesday' value={formState.wednesday} style={{fontSize:'.8rem',margin:'auto 0 auto .5rem', backgroundColor:'#FF6900', border:'none'}} variant="secondary">Wednesday</Button>
<Button onChange={changeHandelerBool} name='thursday' value={formState.thursday} style={{fontSize:'.8rem',margin:'auto 0 auto .5rem', backgroundColor:'#FF6900', border:'none'}} variant="secondary">Thursday</Button>
<Button onChange={changeHandelerBool} name='friday' value={formState.friday} style={{fontSize:'.8rem',margin:'auto 0 auto .5rem', backgroundColor:'#FF6900', border:'none'}} variant="secondary">Friday</Button>
<Button onChange={changeHandelerBool} name='saturday' value={formState.saturday} style={{fontSize:'.8rem',margin:'auto 0 auto .5rem', backgroundColor:'#FF6900', border:'none'}} variant="secondary">Saturday</Button>
</ButtonGroup>
</Form>
</Modal.Body>
<Modal.Footer>
<Button onSubmit={submitHandeler} type='submit' style={{backgroundColor:'#FF6900', border:'none'}} onClick={handleClose}>
Create Class
</Button>
</Modal.Footer>
</Form>
</Modal>
</div>
);
}
Example #20
| Source File: SelectedPool.js From katanapools with GNU General Public License v2.0 | 4 votes |
|
render() {
const {pool: {currentSelectedPool, currentSelectedPoolError}} = this.props;
const {reservesNeeded, reservesAdded, fundAllReservesActive, fundOneReserveActive, singleTokenFundConversionPaths,
withdrawAllReservesActive, withdrawOneReserveActive, singleTokenWithdrawReserveSelection, singleTokenFundReserveSelection,
singleTokenWithdrawConversionPaths, calculatingFunding, calculatingWithdraw, submitFundingEnabled, fundingCalculateInit, withdrawCalculateInit,
calculatingAllInputFunding, calculatingAllInputWithdraw,
fundReserveSelection, withdrawSelection
} = this.state;
const self = this;
let isPurchaseBtnDisabled = false;
let isFundingLoading = <span/>;
let isWithdrawLoading = <span/>;
if (calculatingFunding && !fundingCalculateInit) {
isFundingLoading = <FontAwesomeIcon icon={faSpinner} size="lg" rotation={270} pulse/>;
}
if (calculatingWithdraw && !withdrawCalculateInit) {
isWithdrawLoading = <FontAwesomeIcon icon={faSpinner} size="lg" rotation={270} pulse/>;
}
let isWithdrawBtnDisabled = false;
if (calculatingFunding) {
// isPurchaseBtnDisabled = true;
}
if (calculatingWithdraw) {
isWithdrawBtnDisabled = true;
}
let reserveRatio = '';
reserveRatio = currentSelectedPool.reserves && currentSelectedPool.reserves.length > 0 ?currentSelectedPool.reserves.map(function(item){
if (item) {
return parseInt(item.reserveRatio) / 10000;
} else {
return null;
}
}).filter(Boolean).join("/") : '';
if (currentSelectedPoolError) {
return (<div>
<div>Could not fetch pool details.</div>
<div>Currently only pool contracts which expose reserveTokenCount() and reserveTokens() methods are supported.</div>
</div>)
}
const { fundAmount, liquidateAmount } = this.state;
let minTotalSupply = currentSelectedPool.totalSupply ?
parseFloat(fromDecimals(currentSelectedPool.totalSupply, currentSelectedPool.decimals)).toFixed(4) : "";
let reserveTokenList = currentSelectedPool.reserves && currentSelectedPool.reserves.length > 0 ? currentSelectedPool.reserves.map(function(item, idx){
return <div key={`token-${idx}`}>
<div className="holdings-label">{item.name}</div>
<div className="holdings-data"> {parseFloat(fromDecimals(item.reserveBalance, item.decimals)).toFixed(4)}</div>
</div>
}) : <span/>;
let userHoldingsList = currentSelectedPool.reserves && currentSelectedPool.reserves.length > 0 ? currentSelectedPool.reserves.map(function(item, idx){
let userBalanceItem = parseFloat(item.userBalance);
let userBalanceDisplay = "-";
if (!isNaN(userBalanceItem)) {
userBalanceDisplay = userBalanceItem.toFixed(4);
}
return (<div key={`token-${idx}`}>
<div className="holdings-label">{item.name}</div>
<div className="holdings-data"> {userBalanceDisplay}</div>
</div>)
}) : <span/>;
let poolHoldings = "";
if (currentSelectedPool.senderBalance ) {
poolHoldings = parseFloat(fromDecimals(currentSelectedPool.senderBalance, currentSelectedPool.decimals)).toFixed(4) + " " + currentSelectedPool.symbol;
}
let liquidateInfo = <span/>;
if (liquidateAmount && liquidateAmount > 0 && reservesAdded && reservesAdded.length > 0) {
liquidateInfo = (
<div>
<div>You will receive</div>
{reservesAdded.map(function(item, idx){
return <div key={`reserve-added-${idx}`}>{item.addedDisplay} {item.symbol}</div>
})}
</div>
)
}
let fundInfo = <span/>;
if (fundAmount && fundAmount > 0 && reservesNeeded && reservesNeeded.length > 0) {
fundInfo = (
<div>
<div>You will needs to stake</div>
{reservesNeeded.map(function(item, idx){
return <div key={`reserve-needed-${idx}`}>{item.neededDisplay} {item.symbol}</div>
})}
</div>
)
}
let conversionFee = "";
if (currentSelectedPool && currentSelectedPool.conversionFee) {
conversionFee = currentSelectedPool.conversionFee + "%";
}
let poolLiquidateAction = <span/>;
let poolFundAction = <span/>;
let tokenAllowances = <span/>;
let tokenAllowanceRowVisible = "row-hidden";
if (this.state.approvalDisplay) {
tokenAllowanceRowVisible = "row-visible";
}
if (currentSelectedPool.reserves && currentSelectedPool.reserves.length > 0){
if (withdrawAllReservesActive === 'reserve-active') {
poolLiquidateAction = (
<div>
<div className="select-reserve-container">
<Form.Control type="number" placeholder="Enter amount to liquidate" onChange={this.onLiquidateInputChanged}/>
<Button className="calculate-btn" disabled={isPurchaseBtnDisabled} onClick={this.calculateAllInputWithdraw}>Calculate</Button>
</div>
<div className="action-info-col">
{liquidateInfo}
<Button onClick={this.submitSellPoolToken} className="pool-action-btn">Sell</Button>
</div>
</div>
)
} else if (withdrawOneReserveActive === 'reserve-active') {
let reserveOptions = currentSelectedPool.reserves.map(function(item, key){
return <Dropdown.Item eventKey={item.symbol} key={`${item.symbol}-${key}`}>{item.symbol}</Dropdown.Item>
});
let withdrawActiveAmount = <span/>;
if (singleTokenWithdrawConversionPaths && singleTokenWithdrawConversionPaths.length > 0) {
let totalReserveAmount = 0;
singleTokenWithdrawConversionPaths.forEach(function(item){
totalReserveAmount += parseFloat(item.quantity);
});
totalReserveAmount = totalReserveAmount.toFixed(4);
withdrawActiveAmount = <div>{isWithdrawLoading} You will receive {totalReserveAmount} {singleTokenWithdrawReserveSelection.symbol}</div>
}
poolLiquidateAction = (
<div>
<div className="select-reserve-container">
<div>
<label>
Reserve token in which to withdraw
</label>
<DropdownButton id="dropdown-basic-button" title={singleTokenWithdrawReserveSelection.symbol} onSelect={this.withdrawSingleBaseChanged}>
{reserveOptions}
</DropdownButton>
</div>
<div>
<label>Amount of pool tokens to withdraw</label>
<div>
<Form.Control type="number" placeholder="Pool tokens to withdraw" onChange={this.onSingleReserveLiquidateFundChanged}/>
<Button className="calculate-btn" onClick={this.calculateSingleInputWithdraw}>Calculate</Button>
</div>
</div>
</div>
<div className="action-info-col">
{withdrawActiveAmount}
<Button onClick={this.submitSellPoolTokenWithSingleReserve} disabled={isWithdrawBtnDisabled} className="pool-action-btn">Withdraw</Button>
</div>
</div>
)
}
if (fundAllReservesActive === 'reserve-active' && fundReserveSelection.length > 0) {
poolFundAction = (
<div className="select-reserve-container">
<div>
{
fundReserveSelection.map(function(item, idx){
return <Form.Control type="number" placeholder={`Enter amount of ${item.symbol} to fund`} value={item.value}
onChange={self.fundInputAmountChange.bind(self, idx)}/>
})
}
<div>
<Button className="calculate-btn" disabled={isPurchaseBtnDisabled} onClick={this.calculateAllInputFund}>Calculate</Button>
</div>
</div>
<div className="action-info-col">
{fundInfo}
<Button onClick={this.submitBuyPoolToken} className="pool-action-btn">Purchase</Button>
</div>
</div>
)
} else if (fundOneReserveActive === 'reserve-active') {
let reserveOptions = currentSelectedPool.reserves.map(function(item, key){
return <Dropdown.Item eventKey={item.symbol} key={`${item.symbol}-${key}`} >{item.symbol}</Dropdown.Item>
});
let fundActiveAmount = <span/>;
if (singleTokenFundConversionPaths) {
let totalReserveAmount = 0;
singleTokenFundConversionPaths.forEach(function(item){
totalReserveAmount += parseFloat(item.quantity);
});
totalReserveAmount = totalReserveAmount.toFixed(4);
fundActiveAmount = <div>{isFundingLoading} You will need to stake {totalReserveAmount} {singleTokenFundReserveSelection.symbol}</div>
}
poolFundAction = (
<div>
<div className="select-reserve-container">
<div>
<label>
Reserve token with which to fund.
</label>
<DropdownButton id="dropdown-basic-button" title={singleTokenFundReserveSelection.symbol} onSelect={this.fundSingleBaseChanged}>
{reserveOptions}
</DropdownButton>
</div>
<div>
<label>Amount of {singleTokenFundReserveSelection.symbol} to fund</label>
<div>
<Form.Control type="number" placeholder={`Enter amount of ${singleTokenFundReserveSelection.symbol} to fund`} onChange={this.onSingleReserveFundInputChanged} className="single-reserve-amount-text"/>
<Button className="calculate-btn" disabled={isPurchaseBtnDisabled} onClick={this.calculateSingleInputFund}>Calculate</Button>
</div>
</div>
</div>
<div className="action-info-col">
{fundActiveAmount}
<Button onClick={this.submitBuyPoolTokenWithSingleReserve} className="pool-action-btn">Purchase</Button>
</div>
</div>
)
}
let tokenAllowanceReserves = currentSelectedPool.reserves.map(function(item, idx){
return <div key={`allowance-${idx}`} className="selected-pool-balance">
{item.symbol} {item.userAllowance ? parseFloat(item.userAllowance).toFixed(5) : '-'}
</div>
});
let tokenSwapAllowanceReserves = currentSelectedPool.reserves.map(function(item, idx){
return <div key={`allowance-${idx}`} className="selected-pool-balance">
{item.symbol} {item.swapAllowance ? parseFloat(item.swapAllowance).toFixed(5) : '-'}
</div>
});
tokenAllowances =
<div className={`${tokenAllowanceRowVisible}`}>
<div className="approval-type-label">
Approvals for pool converter contract.
</div>
<Row className={`token-allowances-display-row`}>
<Col lg={8}>
{tokenAllowanceReserves}
</Col>
<Col lg={4}>
<Button onClick={()=>this.showApprovalDialog("pool")}>Approve reserves </Button>
<Button onClick={()=>this.showRevokeDialog("pool")} className="revoke-approval-btn">Revoke approval </Button>
</Col>
</Row>
<div className="approval-type-label">
Approvals for Bancor Network contract.
</div>
<Row className="single-token-description">
<Col lg={12}>
If you using single token funding, it is also recommended that you approve BancorNetwork contract for swaps.
</Col>
</Row>
<Row>
<Col lg={8}>
{tokenSwapAllowanceReserves}
</Col>
<Col lg={4}>
<Button onClick={()=>this.showApprovalDialog("swap")}>Approve reserves </Button>
<Button onClick={()=>this.showRevokeDialog("swap")} className="revoke-approval-btn">Revoke approval </Button>
</Col>
</Row>
</div>
}
function allowanceToolTip(props) {
return <Tooltip {...props}>
<div>Token allowances refer to amount you have approved the converter contract to spend.</div>
<div>Set allowances for BancorConverter for faster pool funding and liquidation and save on Gas costs</div>
</Tooltip>;
}
let currentPoolTransactions = <span/>;
if (currentSelectedPool.poolVersion === '1') {
currentPoolTransactions = (
<div>
<Col lg={6}>
<div className="allowance-label">Fund Pool Holdings</div>
{poolFundAction}
</Col>
<Col lg={6}>
<div className="allowance-label">Liquitate Pool Holdings</div>
{poolLiquidateAction}
</Col>
</div>
)
} else {
currentPoolTransactions = (
<div>
<SelectedV2PoolContainer pool={this.props.pool}/>
</div>
)
}
return (
<div>
<Row className="select-pool-row-1">
<Col lg={1} className="pool-logo-container">
<img src={currentSelectedPool.imageURI} className="selected-pool-image" alt="pool-token-img"/>
</Col>
<Col lg={2}>
<div className="cell-label">{currentSelectedPool.symbol}</div>
<div className="cell-data">{currentSelectedPool.name}</div>
</Col>
<Col lg={2}>
<div className="cell-label">Address</div>
<div className="cell-data"><AddressDisplay address={currentSelectedPool.address}/></div>
</Col>
<Col lg={2}>
<div className="cell-label">Pool Supply</div>
<div className="cell-data">{minTotalSupply}</div>
</Col>
<Col lg={3}>
<div>
<div className="cell-label">Reserves</div>
<div className="cell-data">{reserveTokenList}</div>
</div>
</Col>
<Col lg={2}>
<div className="cell-label">Reserve Ratio</div>
<div className="cell-data">{reserveRatio}</div>
</Col>
</Row>
<Row className="selected-pool-meta-row">
<Col lg={3}>
<div className="cell-label">Conversion fee generated</div>
<div className="cell-data">{conversionFee}</div>
</Col>
<Col lg={3}>
<div className="cell-label">Your pool token holdings</div>
<div className="cell-data">{poolHoldings}</div>
</Col>
<Col lg={4}>
<div className="cell-label">Your reserve token holdings</div>
<div className="cell-data">{userHoldingsList}</div>
</Col>
</Row>
<div className="pool-action-container pool-allowance-container">
<Row>
<Col lg={12}>
<div className="pool-approval-container">
<div className="allowance-label">
Your pool allowances
<OverlayTrigger
placement="right"
delay={{ show: 250, hide: 400 }}
overlay={allowanceToolTip}>
<FontAwesomeIcon icon={faQuestionCircle} className="info-tooltip-btn"/>
</OverlayTrigger>
</div>
<FontAwesomeIcon icon={faChevronDown} className="show-approval-toggle" onClick={this.toggleApprovalDisplay}/>
{tokenAllowances}
</div>
</Col>
</Row>
<Row className="selected-pool-buy-sell-row">
<Col lg={12}>
{currentPoolTransactions}
</Col>
</Row>
</div>
</div>
)
}
Example #21
| Source File: FuncTestPage2.js From openos with MIT License | 4 votes |
|
function FuncTestPage2() {
const [serverIp, setServerIp] = useState("");
const [serverPort, setServerPort] = useState(0);
const [netLog, setNetLog] = useState("");
const [localLog, setLocalLog] = useState("");
const [loginId, setloginId] = useState("kitt1");
const [loginPwd, setloginPwd] = useState("1234");
const [searchMode, setSearchMode] = useState('ALL');
const [searchText, setSearchText] = useState('이봉석');
const [orgGroupCode, setOrgGroupCode] = useState("ORG001");
const [msgKey, setMsgKey] = useState("4a264afc26d9801584df97cccf4907ee");
const netLogArea = useRef(null);
const localLogArea = useRef(null);
//initialize
useEffect(() => {
console.log("FuncTestPage Init");
electron.ipcRenderer.once('net-log', (event, msg, ...args) => {
appendNetLog(msg, args);
});
async function loadConfig() {
let config = await getConfig();
setServerIp(config.server_ip);
setServerPort(config.server_port);
}
loadConfig();
}, []);
//#region WriteLog ...
const appendNetLog = (msg, ...args) => {
msg = moment().format("hh:mm:ss.SSS >") + msg + ':' + args
setNetLog(prev => prev + (prev ? "\r\n" : "") + msg);
if (netLogArea.current) {
netLogArea.current.scrollTop = netLogArea.current.scrollHeight;
}
}
const appendLocalLog = (msg, ...args) => {
msg = moment().format("hh:mm:ss.SSS >") + msg + ':' + args;
setLocalLog(prev => prev + (prev ? "\r\n" : "") + msg);
if (localLogArea.current) {
localLogArea.current.scrollTop = localLogArea.current.scrollHeight;
}
}
const clearLog = () => {
setNetLog('');
setLocalLog('');
}
//#endregion WriteLog ...
// Login
const handleLogin = (e) => {
appendLocalLog("Login1" , loginId, loginPwd);
login(loginId, loginPwd).then(function(resData){
console.log('Promiss login res', resData);
if (resData.resCode) {
appendLocalLog('Login Success! ', JSON.stringify(resData))
} else {
appendLocalLog('Login fail! ', JSON.stringify(resData))
}
}).catch(function(err){
appendLocalLog('Login fail! ', JSON.stringify(err))
});;
}
// SearchUser
const handleSearchUser = (e) => {
appendLocalLog("handleSearchUser:", searchMode, searchText);
searchUsers(searchMode, searchText).then(function(data) {
appendLocalLog('handleSearchUser Result:' + JSON.stringify(data));
});
}
// SearOrgUser
const handleSearchOrgUser = (e) => {
appendLocalLog("handleSearchOrgUser:", orgGroupCode, searchText);
searchOrgUsers(orgGroupCode, searchText).then(function(data) {
appendLocalLog('handleSearchOrgUser Result:' + JSON.stringify(data));
});
}
// GetMessage
const handleGetMessage = (e) => {
appendLocalLog("handleGetMessage:", e.target.value);
getMessage(e.target.value, 0, 10).then(function(data) {
appendLocalLog('handleGetMessage Result:' + JSON.stringify(data));
});
}
// GetMessageDetail
const handleGetMessageDetail = (e) => {
appendLocalLog("handleGetMessageDetail:", msgKey);
getMessageDetail(msgKey).then(function(data) {
appendLocalLog('handleGetMessageDetail Result:' + JSON.stringify(data));
});
}
// DeleteMessage
const handleDeleteMessage = (e) => {
appendLocalLog("handleDeleteMessage:", msgKey);
deleteMessage('SEND', msgKey.split(',')).then(function(data) {
appendLocalLog('handleDeleteMessage Result:' + JSON.stringify(data));
});
}
// GetChatRoomList
const handleGetChatRoomList = (e) => {
appendLocalLog("handleGetChatRoomList");
getChatRoomList().then(function(data) {
appendLocalLog('handleGetChatRoomList Result:' + JSON.stringify(data));
});
}
// LogClear
const handleLogClear = (e) => {
clearLog();
}
return (
<GridWrapper >
<Container fluid='false' className='mt-5'>
<Row xs={2} md={3} lg={5}>
<Col>Server IP : {serverIp}</Col>
<Col>Server PORT : {serverPort}</Col>
</Row>
{/* 로그인 */}
<Row className='mt-1'>
<Col>
<InputGroup >
<InputGroup.Prepend>
<InputGroup.Text id="loginId">Login Id</InputGroup.Text>
</InputGroup.Prepend>
<FormControl
aria-label="Default"
aria-describedby="inputGroup-sizing-default"
placeholder={loginId}
onChange={(e) => setloginId(e.target.value)}
/>
<InputGroup.Prepend>
<InputGroup.Text id="loginPwd">Password</InputGroup.Text>
</InputGroup.Prepend>
<FormControl
aria-label="Default"
aria-describedby="inputGroup-sizing-default"
placeholder={loginPwd}
onChange={(e) => setloginPwd(e.target.value)}
/>
<InputGroup.Append>
<Button variant="outline-secondary" onClick={handleLogin}>Login</Button>
</InputGroup.Append>
</InputGroup>
</Col>
</Row>
<Row>
{/* 사용자 통합검색 요청 */}
<Col>
<InputGroup >
<DropdownButton
as={InputGroup.Prepend}
variant="outline-secondary"
title={searchMode}
id="input-group-dropdown-1"
onSelect={setSearchMode}
>
<Dropdown.Item eventKey="ALL" active >ALL</Dropdown.Item>
<Dropdown.Item eventKey="PHONE">PHONE</Dropdown.Item>
<Dropdown.Item eventKey="IPPHONE">IPPHONE</Dropdown.Item>
<Dropdown.Item eventKey="MOBILE">MOBILE</Dropdown.Item>
<Dropdown.Divider />
</DropdownButton>
<FormControl
aria-label="Default"
aria-describedby="inputGroup-sizing-default"
placeholder={searchText}
onChange={(e) => setSearchText(e.target.value)}
/>
<InputGroup.Append>
<Button variant="outline-secondary" onClick={handleSearchUser}>통합검색</Button>
</InputGroup.Append>
</InputGroup>
</Col>
{/* 조직도 검색 요청 */}
<Col>
<InputGroup >
<FormControl
aria-label="Default"
aria-describedby="inputGroup-sizing-default"
placeholder={orgGroupCode}
onChange={(e) => setOrgGroupCode(e.target.value)}
/>
<FormControl
aria-label="Default"
aria-describedby="inputGroup-sizing-default"
placeholder={searchText}
onChange={(e) => setSearchText(e.target.value)}
/>
<InputGroup.Append>
<Button variant="outline-secondary" onClick={handleSearchOrgUser}>조직도검색</Button>
</InputGroup.Append>
</InputGroup>
</Col>
</Row>
<Row>
{/* 쪽지 이력 요청 */}
<Col>
<InputGroup >
<InputGroup.Append>
<Button variant="outline-secondary" onClick={handleGetMessage} value='RECV'>받은쪽지</Button>
<Button variant="outline-secondary" onClick={handleGetMessage} value='SEND'> 보낸쪽지</Button>
</InputGroup.Append>
</InputGroup>
</Col>
{/* 쪽지 상세정보 요청 */}
<Col>
<InputGroup >
<FormControl
aria-label="Default"
aria-describedby="inputGroup-sizing-default"
placeholder={msgKey}
onChange={(e) => setMsgKey(e.target.value)}
/>
<InputGroup.Append>
<Button variant="outline-secondary" onClick={handleGetMessageDetail}>쪽지 정보 요청</Button>
<Button variant="outline-secondary" onClick={handleDeleteMessage}>쪽지 삭제 요청</Button>
</InputGroup.Append>
</InputGroup>
</Col>
</Row>
<Row>
{/* 쪽지 이력 요청 */}
<Col>
<InputGroup >
<InputGroup.Append>
<Button variant="outline-secondary" onClick={handleGetChatRoomList}>대화방목록</Button>
</InputGroup.Append>
</InputGroup>
</Col>
</Row>
<Row>
<Col>
<Button onClick={handleLogClear}>
Clear
</Button>
</Col>
</Row>
<Row xs={1} className='mt-1' >
<textarea ref={localLogArea} rows={10} value={localLog} className='mt-1' />
</Row>
<Row xs={1} className='mt-1'>
<textarea ref={netLogArea} rows={10} value={netLog} className='mt-1'/>
</Row>
</Container>
</GridWrapper>
);
}
Example #22
| Source File: index.js From project-s0-t1-budget with MIT License | 4 votes |
|
render() {
return (
<Layout user={this.props.user}>
{this.props.user ? (
<UserPageComponent user={this.props.user} />
) : (
<Container>
<br />
<Row>
<Col md="5">
<Jumbotron>
<ChartFormComponent
handleFormUpdate={this.handleFormUpdate.bind(this)}
/>
<br />
<ButtonToolbar>
<ButtonGroup className="mr-2">
<Button
variant="secondary"
onClick={this.handleResetUpdate}
>
Reset
</Button>
</ButtonGroup>
<ButtonGroup className="mr-2">
<DropdownButton id="dropdown-item-button" title="Graphs">
<Dropdown.Item as="button" onClick={this.handleBar}>
Bar Graph
</Dropdown.Item>
<Dropdown.Item
as="button"
onClick={this.handlePieIncome}
>
Income Pie Chart
</Dropdown.Item>
<Dropdown.Item
as="button"
onClick={this.handlePieExpense}
>
Expenses Pie Chart
</Dropdown.Item>
<Dropdown.Item as="button" onClick={this.handleRadar}>
Expense Variance Chart
</Dropdown.Item>
</DropdownButton>
</ButtonGroup>
</ButtonToolbar>
<br />
<Form.Switch
checked={this.state.colorMode}
id="custom-switch"
label="Colorblind Mode"
onChange={this.handleSwitchChange}
/>
</Jumbotron>
</Col>
<Col md="7">
<TableComponent
category={this.state.labels}
price={this.state.data}
/>
</Col>
</Row>
<CardColumns>
<Card
border="none"
style={
this.state.barActive
? { border: "none" }
: { display: "none" }
}
>
<ChartCardComponent
handleBar={this.handleBar}
labels={this.state.labels}
data={this.state.data}
Component={"BarChart"}
/>
</Card>
<Card
border="none"
style={
this.state.incomePieActive
? { border: "none" }
: { display: "none" }
}
>
<ChartCardComponent
handlePieIncome={this.handlePieIncome}
labels={this.state.labels}
data={this.state.data}
color={this.state.colorMode}
Component={"IncomePie"}
/>
</Card>
<Card
style={
this.state.expensePieActive
? { border: "none" }
: { display: "none" }
}
>
<ChartCardComponent
handlePieExpense={this.handlePieExpense}
labels={this.state.labels}
data={this.state.data}
color={this.state.colorMode}
Component={"ExpensePie"}
/>
</Card>
<Card
style={
this.state.radarActive
? { border: "none" }
: { display: "none" }
}
>
<ChartCardComponent
handleRadar={this.handleRadar}
labels={this.state.labels}
data={this.state.data}
Component={"RadarPie"}
/>
</Card>
</CardColumns>
</Container>
)}
</Layout>
);
}
Example #23
| Source File: index.js From pooled-loan with MIT License | 4 votes |
|
export default function SwapToken({
buyToken,
fixedBuyToken,
availableBalance,
balanaceNeeded
}) {
const [processing, setProcessing] = useState(false);
const [allTokens, setAllTokens] = useState([]);
const [state, setState] = useState({
buyToken: buyToken,
sellToken: "USDC",
buyAmount: "1",
});
const [errorModal, setErrorModal] = useState({
msg: "",
open: false
});
const [successModal, setSuccessModal] = useState({
msg: "",
open: false
});
const handleSwapToken = async () => {
try {
const quote = await api0x.fetchTokenQuote({
buyToken: state.buyToken,
sellToken: state.sellToken,
buyAmount: await precision.add(
state.buyAmount,
18,
),
});
if (state.sellToken !== "ETH") {
let tokenAddress;
allTokens.forEach((element) => {
if (state.sellToken === element.symbol)
tokenAddress = element.address
});
const contract = new ERC20TokenContract(
tokenAddress, window.web3.eth.currentProvider
);
const maxApproval = new BigNumber(2)
.pow(256).minus(1);
const approvalTxData = await contract
.approve(quote.allowanceTarget, maxApproval)
.getABIEncodedTransactionData();
await window.web3.eth.sendTransaction
({
to: tokenAddress,
data: approvalTxData,
from: window.userAddress
})
.on("transactionHash", () => {
setProcessing(true);
});
}
await window.web3.eth.sendTransaction(quote)
.on("transactionHash", () => {
setProcessing(true);
})
.on("receipt", () => {
setProcessing(false);
setSuccessModal({
open: true,
msg: "Congratulations ? !!"
});
});
} catch (error) {
setProcessing(false);
setErrorModal({
open: true,
msg: error.message,
});
}
};
const fetchAllTokens = async () => {
const tokens = await api0x.fetchAllTokens();
setAllTokens([{ symbol: "ETH" }].concat(tokens.records));
};
const handleReload = () => {
history.go(0);
}
useEffect(() => {
if (allTokens.length === 0) {
fetchAllTokens();
}
});
return (
<div>
<Card
className="mx-auto form-card text-center"
style={{ backgroundColor: "rgb(253, 255, 255)" }}
>
<Card.Header>
Swap Your Asset
</Card.Header>
<Card.Body>
{fixedBuyToken ?
<div>
<div style={{ marginBottom: "20px", color: "orange" }}>
You don't have enough collateral amount available in your wallet.
Please use another wallet or Get Token by swapping another asset
directly from 0x protocol using below method:
</div>
<Row className="text-center" style={{ paddingBottom: "20px" }}>
<Col>
<u>Available Balance</u>
<span> : </span>
<span>{availableBalance} {buyToken}</span>
</Col>
</Row>
<Row className="text-center" style={{ paddingBottom: "30px" }}>
<Col>
<u>Balance Needed</u>
<span> : </span>
<span>{balanaceNeeded} {buyToken}</span>
</Col>
</Row>
</div>
: <div
className="auction-message"
style={{ fontSize: "medium" }}
>
* Swap Using 0x Protocol
</div>
}
<Row>
<Col className="text-header">
Buy Token:
</Col>
{fixedBuyToken ?
<Col style={{ paddingLeft: "0px" }}>
<Form.Control
className="mb-4"
type="text"
style={{ width: "60%" }}
value={state.buyToken}
readOnly={!buyToken ? false : true}
/>
</Col>
:
<Col
className="text-left float-left"
style={{ marginBottom: "20px", paddingLeft: "0px" }}
>
<DropdownButton
title={state.buyToken}
variant="outline-info"
onSelect={(event) => setState({
...state,
buyToken: event
})}
>
{allTokens.map((element, key) => (
<Dropdown.Item
key={key}
eventKey={element.symbol}
>
{element.symbol}
</Dropdown.Item>
))}
</DropdownButton>
</Col>
}
</Row>
<Row style={{ marginBottom: "30px" }}>
<Col className="text-header">
Sell Token:
</Col>
<Col style={{ paddingLeft: "0px" }}>
<DropdownButton
style={{
position: "absolute",
}}
title={state.sellToken}
variant="outline-info"
onSelect={(event) => setState({
...state,
sellToken: event
})}
>
{allTokens.map((element, key) => (
<Dropdown.Item
key={key}
eventKey={element.symbol}
>
{element.symbol}
</Dropdown.Item>
))}
</DropdownButton>
</Col>
</Row>
<Row>
<Col className="text-header">
Buy Amount:
</Col>
<Col style={{ paddingLeft: "0px" }}>
<Form.Control
className="mb-4"
type="number"
min="0"
placeholder="0"
onChange={async (e) => setState({
...state,
buyAmount: e.target.value,
})}
style={{ width: "60%" }}
value={state.buyAmount}
/>
</Col>
</Row>
<Row className="text-center">
<Col>
<Button
onClick={handleSwapToken}
variant="outline-success"
>
{processing ?
<div className="d-flex align-items-center">
Processing
<span className="loading ml-2"></span>
</div>
:
<div>
<Image src={zeroxLogo} width="25px"></Image>
<span> Submit</span>
</div>
}
</Button>
</Col>
</Row>
</Card.Body>
</Card>
<AlertModal
open={errorModal.open}
toggle={() => setErrorModal({
...errorModal, open: false
})}
>
{errorModal.msg}
</AlertModal>
<SuccessModal
open={successModal.open}
toggle={() => setSuccessModal({
...successModal, open: false
})}
onConfirm={handleReload}
>
{successModal.msg}
</SuccessModal>
</div>
);
}
Example #24
| Source File: JobsCard.js From easy-job-intern with MIT License | 4 votes |
|
JobsCard = ({ job, userId }) => {
const { state, dispatch } = useContext(UserContext);
const deletePost = (postId) => {
axios({
method: "delete",
url: "http://localhost:5000/employer/delete-job",
data: {
postId,
},
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
"Content-Type": "application/json",
},
})
.then((res) => {
console.log(res);
if (res.data.error) {
console.log(res.data.error);
// alert(res.data.error);
const notify = () => toast(res.data.error);
notify();
} else {
// console.log(res.data.jobs);
// setJobs(res.data.jobs);
// console.log(jobs);
window.location.reload(false);
const notify = () => toast(res.data.message);
notify();
}
})
.catch((err) => {
console.log("Error: ", err);
});
};
const bookMarkPost = (postId) => {
axios({
method: "post",
url: `http://localhost:5000/student/bookmarkJob/${postId}`,
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
"Content-Type": "application/json",
},
})
.then((res) => {
console.log(res);
if (res.data.error) {
// console.log(res.data.error);
const notify = () => toast(res.data.error);
notify();
} else {
// setInternships(res.data.internships);
// window.location.reload(false);
console.log(res.data.message);
const notify = () => toast(res.data.message);
notify();
}
})
.catch((err) => {
console.log("Error: ", err);
});
};
const GettingMonth = (date) => {
const monthNames = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
const time =
monthNames[new Date(date).getMonth()] +
", " +
new Date(date).getFullYear();
return time;
};
const GettingDate = (date) => {
const time = new Date(date).getDate() + " " + GettingMonth(date);
return time;
};
return (
<div className="card-custom mx-auto">
<div className="primary-info">
{job.role && <div className="primary-info-role">{job.role}</div>}
{job.companyName && (
<div className="primary-info-company">{job.companyName}</div>
)}
{(job.industry || job.stream) && (
<div className="primary-info-indus-stream">
{job.industry}, {job.stream}
</div>
)}
<div className="primary-info-table">
<ul>
{job.location && (
<li>
<i class="fas fa-map-marker-alt"></i> <span>Location:</span>
{job.location}
</li>
)}
{job.experience && (
<li>
<i class="fas fa-briefcase"></i>
<span>Experience:</span>
{job.experience && "Atleast"} {job.experience}{" "}
{job.experience === 1 && "yrs"} {job.experience > 1 && "yrs"}
</li>
)}
{job.salary && (
<li>
<i class="far fa-money-bill-alt"></i> <span>Salary:</span>₹
{job.salary}
</li>
)}
{job.startDate && (
<li>
<i className="far fa-play-circle"></i> <span>Start Date:</span>
{GettingMonth(job.startDate)}
</li>
)}
{job.lastDate && (
<li>
<i class="fas fa-hourglass-start"></i> <span>Apply By:</span>
{GettingDate(job.lastDate)}
</li>
)}
</ul>
</div>
{job.techstack && job.techstack.length > 0 && (
<div className="primary-info-techstack">
{job.techstack.map((tech) => (
<div>{tech}</div>
))}
</div>
)}
</div>
<div className="secondary-info">
{job.createdBy && userId && userId === job.createdBy._id && (
<div className="dropdown-container">
<Dropdown className="postOptions">
<Dropdown.Toggle
className="postOptionsBtn"
variant="success"
id="dropdown-basic"
>
<Icon.ThreeDotsVertical style={{ fontSize: "1.4rem" }} />
</Dropdown.Toggle>
<Dropdown.Menu className="optionMenu">
<Dropdown.Item
className="optionItem"
href={`/update-job/${job._id}`}
>
<Icon.PencilSquare className="optionsMenuIcon" />
</Dropdown.Item>
<Dropdown.Item
onClick={() => deletePost(job._id)}
className="optionItem"
>
<Icon.Trash className="optionsMenuIcon" />
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
)}
{state && state.userType === "student" && (
<div className="dropdown-container">
<Dropdown className="postOptions">
<Dropdown.Toggle
className="postOptionsBtn"
variant="success"
id="dropdown-basic"
>
<Icon.ThreeDotsVertical style={{ fontSize: "1.4rem" }} />
</Dropdown.Toggle>
<Dropdown.Menu className="optionMenu">
<Dropdown.Item
onClick={() => {
bookMarkPost(job._id);
console.log(job._id);
}}
className="optionItem"
>
<Icon.Bookmark className="optionsMenuIcon" />
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
)}
<div className="secondary-info-container">
{job.description && (
<div className="secondary-info-description w-100">
{job.description}
</div>
)}
<a href="#" className="btn btn-custom">
Apply Now
</a>
</div>
</div>
</div>
);
}
Example #25
| Source File: membersCard.js From community-forum-frontend with GNU General Public License v3.0 | 4 votes |
|
function MembersCard(props) {
const {
memberType,
user,
} = props;
return (
<Col sm={6} xl={4}>
{" "}
<React.Fragment>
<div className="admin-user-card-container">
<Row>
<Col xs={3}>
<AccountCircleIcon className="admin-user-icon" />
</Col>
<Col xs={8}>
<Link className="common-card-link" to={`/profile/${user._id}`}>
<h3 className="admin-user-card-heading">
{user.name.firstName}
</h3>
</Link>
<h6 className="admin-user-card-email">{user.email}</h6>
<h6 className="admin-user-card-description">
<span>Joined:</span> {user.createdAt.slice(0, 10)}
</h6>
</Col>
{!user.isFirstAdmin && (
<Col xs={1}>
<Dropdown className="admin-members-dropdown">
<Dropdown.Toggle variant=""></Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item
href=""
onClick={() => {
props.setCurrentUser(user);
props.handleOpenBlock();
}}
>
{memberType === "blocked" ? "Unblock User" : "Block User"}
</Dropdown.Item>
<Dropdown.Item
href=""
onClick={() => {
props.setCurrentUser(user);
props.handleOpenDelete();
}}
>
Remove Account
</Dropdown.Item>
{memberType !== "blocked" &&
(memberType === "moderator" || memberType === "user") && (
<Dropdown.Item
href=""
onClick={() => {
props.changeAccess("makeAdmin", user._id);
}}
>
Make Admin
</Dropdown.Item>
)}
{memberType !== "blocked" &&
(memberType === "admin" || memberType === "user") && (
<Dropdown.Item
href=""
onClick={() => {
props.changeAccess("makeModerator", user._id);
}}
>
Make Moderator
</Dropdown.Item>
)}
{memberType !== "blocked" && memberType === "admin" && (
<Dropdown.Item
href=""
onClick={() => {
props.changeAccess("removeAdmin", user._id);
}}
>
Remove Admin
</Dropdown.Item>
)}
{memberType !== "blocked" && memberType === "moderator" && (
<Dropdown.Item
href=""
onClick={() => {
props.changeAccess("removeModerator", user._id);
}}
>
Remove Moderator
</Dropdown.Item>
)}
</Dropdown.Menu>
</Dropdown>
</Col>
)}
</Row>
</div>
</React.Fragment>
</Col>
);
}
Example #26
| Source File: WorkflowControl.jsx From makerverse with GNU General Public License v3.0 | 4 votes |
|
render() {
const { state } = this.props;
const { controller } = state;
const activeState = this.workspace.activeState;
activeState.updateControllerState(controller.state);
const isRunningWorkflow = this.isWorkflowRunning;
const hasPausedWorkflow = this.isWorkflowPaused;
const isWorkflowActive = hasPausedWorkflow || isRunningWorkflow;
const canClose = this.isWorkflowIdle;
const hasError = !!activeState.error;
const isPaused = hasPausedWorkflow || activeState.isPaused;
const canPause = isRunningWorkflow || activeState.isRunning;
const canPlay = this.canRunWorkflow || activeState.isPaused;
const playPauseText = isPaused ? 'Resume (Cycle Start)' : 'Run Program';
return (
<div className={styles.workflowControl}>
<input
// The ref attribute adds a reference to the component to
// this.refs when the component is mounted.
ref={(node) => {
this.fileInputEl = node;
}}
type="file"
style={{ display: 'none' }}
multiple={false}
onChange={this.handleChangeFile}
/>
<div className="btn-toolbar">
<div className="btn-group btn-group-sm">
<button
type="button"
className="btn btn-primary"
title={i18n._('Uplload Program')}
onClick={this.handleClickUpload}
>
{i18n._('Upload Program')}
</button>
</div>
<div className="btn-group btn-group-sm">
{this.renderButtonFeature('cyclestart', null, playPauseText, 'fa-play', 'success', !canPlay)}
{this.renderButtonFeature('feedhold', null, 'Pause execution (feedhold)', 'fa-pause', 'warning', !canPause)}
{isWorkflowActive && !canClose && this.renderButtonFeature('stop', null, 'Stop program execution (progress will be lost)', 'fa-stop', 'danger', !hasPausedWorkflow)}
{canClose && this.renderButtonFeature('unload', null, 'Unload the current program', 'fa-trash', 'danger')}
</div>
<div className="btn-group btn-group-sm">
{activeState.isIdle && this.renderButtonFeature('sleep', 'Sleep', 'Put machine to sleep', 'fa-bed', 'success')}
{(activeState.hasAlarm || hasError) && this.renderButtonFeature('unlock', 'Unlock', 'Clear system alarms and errors', 'fa-unlock-alt', 'warning')}
{this.renderButtonFeature('reset', 'Reset', 'Reset board connection', 'fa-plug', 'danger')}
</div>
<div className="pull-right btn-group btn-group-sm">
{this.renderButtonFeature('homing', 'Set Home', 'Set current position as machine home', 'fa-home', 'primary')}
</div>
<Dropdown
className="hidden"
bsSize="sm"
id="toolbar-dropdown"
pullRight
>
<Dropdown.Toggle
noCaret
style={{
paddingLeft: 8,
paddingRight: 8
}}
>
<i className="fa fa-list-alt" />
</Dropdown.Toggle>
<Dropdown.Menu>
<MenuItem>
<i className={classNames(styles.icon, styles.iconPerimeterTracingSquare)} />
<Space width="4" />
</MenuItem>
</Dropdown.Menu>
</Dropdown>
</div>
<AlertErrorToast
workspaceId={this.workspace.id}
/>
</div>
);
}
Example #27
| Source File: NavBar.js From talk4free with MIT License | 4 votes |
|
render() {
const checkLogin = () => {
if (this.state.isSignedIn) {
return (
<React.Fragment>
<Dropdown>
<Dropdown.Toggle
className="ml-5"
variant="primary"
id="dropdown-basic"
>
{this.state.userName}
{this.state.isSignedIn ? (
<Image
src={this.state.imageUrl}
style={{ width: "35px" }}
roundedCircle
/>
) : (
""
)}
</Dropdown.Toggle>
<Dropdown.Menu className="ml-5">
<Dropdown.Item>
{" "}
<GoogleLogout
clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
render={renderProps => (
<Button
variant="secondary"
onClick={renderProps.onClick}
disabled={renderProps.disabled}
>
{" "}
Logout
</Button>
)}
buttonText="Logout"
onLogoutSuccess={this.logout}
></GoogleLogout>
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</React.Fragment>
);
} else {
return (
<GoogleLogin
clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
render={renderProps => (
<React.Fragment>
<Button
variant="primary"
className="ml-5"
id="signInBtn"
onClick={renderProps.onClick}
disabled={renderProps.disabled}
>
{this.state.isSignedIn ? this.state.userName : "Sign In"}
<FaSignInAlt />
</Button>
</React.Fragment>
)}
buttonText="Login"
onSuccess={this.responseGoogle}
onFailure={this.responseGoogle}
isSignedIn={true}
cookiePolicy={"single_host_origin"}
/>
);
}
};
return (
<Navbar bg="dark" variant="dark" fixed="top">
<Container>
<Navbar.Brand href="#home">
<Image src={require("./logo5x5.png")} />
Talk4Free
</Navbar.Brand>
<Nav className="ml-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#features">Rooms</Nav.Link>
<Nav.Link href="#pricing">Pricing</Nav.Link>
</Nav>
{checkLogin()}
</Container>
</Navbar>
);
}
Example #28
| Source File: Sidebar.js From project-avocado-web with MIT License | 4 votes |
|
render () {
return (
<nav className="sidebar sidebar-offcanvas" id="sidebar">
<div className="text-center sidebar-brand-wrapper d-flex align-items-center">
<a className="sidebar-brand brand-logo" href="index.html"><img src={require("../../assets/images/logo.png")} alt="logo" /></a>
<a className="sidebar-brand brand-logo-mini pt-3" href="index.html"><img src={require("../../assets/images/logo-mini.png" )} alt="logo" /></a>
</div>
<ul className="nav">
<li className="nav-item nav-profile not-navigation-link">
<div className="nav-link">
<Dropdown>
<Dropdown.Toggle className="nav-link user-switch-dropdown-toggler p-0 toggle-arrow-hide bg-transparent border-0 w-100">
<div className="d-flex justify-content-between align-items-start">
<div className="profile-image">
<img src={ require("../../assets/images/faces/face8.jpg")} alt="profile" />
</div>
<div className="text-left ml-3">
<p className="profile-name">Name</p>
<small className="designation text-muted text-small">Access Level</small>
<span className="status-indicator online"></span>
</div>
</div>
</Dropdown.Toggle>
<Dropdown.Menu className="preview-list navbar-dropdown">
<Dropdown.Item className="dropdown-item preview-item d-flex align-items-center text-small" onClick={evt =>evt.preventDefault()}>
Sign Out
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
</li>
<li className={ this.isPathActive('/dashboard') ? 'nav-item active' : 'nav-item' }>
<Link className="nav-link" to="/dashboard">
<i className="mdi mdi-television menu-icon"></i>
<span className="menu-title">Dashboard</span>
</Link>
</li>
<li className={ this.isPathActive('/basic-ui') ? 'nav-item active' : 'nav-item' }>
<div className={ this.state.basicUiMenuOpen ? 'nav-link menu-expanded' : 'nav-link' } onClick={ () => this.toggleMenuState('basicUiMenuOpen') } data-toggle="collapse">
<i className="mdi mdi-crosshairs-gps menu-icon"></i>
<span className="menu-title">ICS Team</span>
<i className="menu-arrow"></i>
</div>
<Collapse in={ this.state.basicUiMenuOpen }>
<ul className="nav flex-column sub-menu">
<li className="nav-item"> <Link className={ this.isPathActive('/ics-team/coordinators') ? 'nav-link active' : 'nav-link' } to="/ics-team/coordinators">Coordinators</Link></li>
<li className="nav-item"> <Link className={ this.isPathActive('/ics-team/prefects') ? 'nav-link active' : 'nav-link' } to="/ics-team/prefects">Prefects</Link></li>
<li className="nav-item"> <Link className={ this.isPathActive('/ics-team/mentors') ? 'nav-link active' : 'nav-link' } to="/ics-team/mentors">Mentors</Link></li>
<li className="nav-item"> <Link className={ this.isPathActive('/ics-team/mentee') ? 'nav-link active' : 'nav-link' } to="/ics-team/mentee">Mentee</Link></li>
</ul>
</Collapse>
</li>
<li className={ this.isPathActive('/form-elements') ? 'nav-item active' : 'nav-item' }>
<Link className="nav-link" to="/form-elements/basic-elements">
<i className="mdi mdi-format-list-bulleted menu-icon"></i>
<span className="menu-title">Form Elements</span>
</Link>
</li>
<li className={ this.isPathActive('/tables') ? 'nav-item active' : 'nav-item' }>
<Link className="nav-link" to="/tables/basic-table">
<i className="mdi mdi-table-large menu-icon"></i>
<span className="menu-title">Tables</span>
</Link>
</li>
<li className={ this.isPathActive('/icons') ? 'nav-item active' : 'nav-item' }>
<Link className="nav-link" to="/icons/font-awesome">
<i className="mdi mdi-account-box-outline menu-icon"></i>
<span className="menu-title">Icons</span>
</Link>
</li>
<li className={ this.isPathActive('/charts') ? 'nav-item active' : 'nav-item' }>
<Link className="nav-link" to="/charts/chart-js">
<i className="mdi mdi-chart-line menu-icon"></i>
<span className="menu-title">Charts</span>
</Link>
</li>
<li className={ this.isPathActive('/user-pages') ? 'nav-item active' : 'nav-item' }>
<div className={ this.state.userPagesMenuOpen ? 'nav-link menu-expanded' : 'nav-link' } onClick={ () => this.toggleMenuState('userPagesMenuOpen') } data-toggle="collapse">
<i className="mdi mdi-lock-outline menu-icon"></i>
<span className="menu-title">User Pages</span>
<i className="menu-arrow"></i>
</div>
<Collapse in={ this.state.userPagesMenuOpen }>
<ul className="nav flex-column sub-menu">
<li className="nav-item"> <Link className={ this.isPathActive('/user-pages/blank-page') ? 'nav-link active' : 'nav-link' } to="/user-pages/blank-page">Blank Page</Link></li>
<li className="nav-item"> <Link className={ this.isPathActive('/user-pages/login-1') ? 'nav-link active' : 'nav-link' } to="/user-pages/login-1">Login</Link></li>
<li className="nav-item"> <Link className={ this.isPathActive('/user-pages/register-1') ? 'nav-link active' : 'nav-link' } to="/user-pages/register-1">Register</Link></li>
<li className="nav-item"> <Link className={ this.isPathActive('/user-pages/error-404') ? 'nav-link active' : 'nav-link' } to="/user-pages/error-404">404</Link></li>
<li className="nav-item"> <Link className={ this.isPathActive('/user-pages/error-500') ? 'nav-link active' : 'nav-link' } to="/user-pages/error-500">500</Link></li>
</ul>
</Collapse>
</li>
<li className="nav-item">
<a className="nav-link" href="http://www.bootstrapdash.com/demo/star-admin-free/react/documentation/documentation.html" rel="noopener noreferrer" target="_blank">
<i className="mdi mdi-file-outline menu-icon"></i>
<span className="menu-title">Documentation</span>
</a>
</li>
</ul>
</nav>
);
}
Example #29
| Source File: tasks.js From community-forum-frontend with GNU General Public License v3.0 | 4 votes |
|
render() {
return (
<div>
<Modal show={this.state.showModal} onHide={this.handleClose} centered>
<div className="modalbody">
<Modal.Body>
<Form>
<div className="formdetails">
<div className="forminsides">
<Form.Group controlId="Description">
<Form.Label>Description</Form.Label>
<Form.Control
as="textarea"
rows="3"
placeholder="Description"
onChange={(e) => {
this.handleChange("description", e);
}}
/>
</Form.Group>
<Form.Group controlId="TopicList">
<Form.Label>Topic</Form.Label>
<InputGroup>
<FormControl
placeholder={this.state.topicName}
aria-describedby="basic-addon2"
disabled="true"
/>
<DropdownButton
as={InputGroup.Append}
variant="outline-secondary"
title=""
id="input-group-dropdown-2"
>
{this.state.Topics.map((topic) => {
return (
<Dropdown.Item
eventKey={topic.topicName}
onSelect={() =>
this.handleSelect(
topic.topicName,
{
topic: topic.topicName,
id: topic._id,
},
"topics"
)
}
>
{topic.topicName}
</Dropdown.Item>
);
})}
</DropdownButton>
</InputGroup>
</Form.Group>
<Form.Group controlId="assigned">
<Form.Label>Assign To:</Form.Label>
<InputGroup>
<FormControl
placeholder={this.state.username}
aria-describedby="basic-addon2"
disabled="true"
/>
<DropdownButton
as={InputGroup.Append}
variant="outline-secondary"
title=""
id="input-group-dropdown-2"
>
{this.state.users.map((user) => {
return (
<Dropdown.Item
eventKey={user.username}
onSelect={() =>
this.handleSelect(
user.username,
{
username: user.username,
email: user.email,
id: user._id,
},
"users"
)
}
>
{user.username}
</Dropdown.Item>
);
})}
</DropdownButton>
</InputGroup>
</Form.Group>
<Form.Group controlId="setDate">
<Form.Label>Complete By: </Form.Label>
<Form.Control
type="date"
placeholder="Enter email"
onChange={(e) => this.handleChange("date", e)}
/>
</Form.Group>
</div>
</div>
<div className="cta-register">
<Button
variant="primary"
type="submit"
onClick={(e) => this.handleAddTask(e)}
>
Add Task
</Button>
</div>
</Form>
</Modal.Body>
</div>
</Modal>
<div className="ToDosHeading">
To-Do Tasks
<Button className="addbutton" onClick={this.handleTasksAdd}>
Add
</Button>
</div>
<div className="navTabs">
<Tabs defaultActiveKey="ongoing" id="uncontrolled-tab-example">
<Tab eventKey="ongoing" title="OnGoing" className="ongoingTab">
<Form>
{this.state.tasks.map((task) => {
return task.completed ? (
""
) : (
<div>
<Form.Group
controlId="formBasicCheckbox"
className="formCheckbox"
onChange={(e) =>
this.handleChangeTask("completed", e, task._id)
}
id={task.description}
>
<Form.Check type="checkbox" />
<div className="textTasks">
<div className="labelParra">{task.description}</div>
<div className="subparra">
{task.assignedBy.username}, {task.dueDate}.
</div>
</div>
<div className="icons">
<FiMoreVertical
size={20}
className="FiMoreVertical"
/>
<MdInfoOutline size={20} className="FiMoreVertical" />
</div>
</Form.Group>
</div>
);
})}
</Form>
</Tab>
<Tab
eventKey="completed"
title="Completed"
className="completedTab"
>
{this.state.tasks.map((task) => {
return task.completed ? (
<Form.Group
controlId="formBasicCheckbox"
className="formCheckbox"
onChange={(e) =>
this.handleChangeTask("notCompleted", e, task._id)
}
>
<Form.Check
defaultChecked="true"
type="checkbox"
label={
<div className="textTasks">
<div className="labelParra">
<s>{task.description}</s>
</div>
<div className="subparra">
{task.assignedBy.username}, {task.dueDate}.
</div>
</div>
}
/>
<div className="icons">
<FiMoreVertical size={20} className="FiMoreVertical" />
<MdInfoOutline size={20} className="FiMoreVertical" />
</div>
</Form.Group>
) : (
""
);
})}
</Tab>
</Tabs>
</div>
</div>
);
}
