reactstrap#ModalHeader JavaScript Examples
The following examples show how to use
reactstrap#ModalHeader.
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: info.js From tunnel-tool with MIT License | 6 votes |
|
Modal = ({ text, title, children, icon, iconColor="link" }) => {
const [isOpen, setModalState] = useState(false);
const close = () => setModalState(false);
const open = () => setModalState(true);
return (
<React.Fragment>
{text}
<Button
size="sm"
color={iconColor}
onClick={e => {
open();
}}
>
{icon ? icon : <Icon />}
</Button>
<ReactModal fade={false} isOpen={isOpen} toggle={close} size="lg">
<ModalHeader toggle={close}>{title}</ModalHeader>
<ModalBody>{children}</ModalBody>
<ModalFooter>
<Button
color="secondary"
onClick={e => {
close();
}}
>
Close
</Button>
</ModalFooter>
</ReactModal>
</React.Fragment>
);
}
Example #2
| Source File: activityPopup.js From schematic-capture-fe with MIT License | 6 votes |
|
ActivityModal = (props) => {
const {
className
} = props;
const activities = useSelector((state) => state.dashboard.activities);
const [modal, setModal] = useState(false);
const toggle = () => setModal(!modal);
const deleteRead = () => {
// delete endpoint needed for activities
}
return (
<div>
<Button color="danger" onClick={toggle}>Activity</Button>
<Modal isOpen={modal} toggle={toggle} className={className}>
<ModalHeader toggle={toggle}>Activity</ModalHeader>
<ModalBody>
<Activity />
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={toggle}>Sounds Good!</Button>
<Button color="secondary" onClick={deleteRead}>Mark All Read</Button>
</ModalFooter>
</Modal>
</div>
);
}
Example #3
| Source File: index.js From HexactaLabs-NetCore_React-Final with Apache License 2.0 | 6 votes |
|
ElementRemove = ({ remove, goBack }) => {
return (
<Modal isOpen>
<ModalHeader>Eliminar producto</ModalHeader>
<ModalBody>¿Desea eliminar este producto?</ModalBody>
<ModalFooter>
<Button color="danger" onClick={remove}>
Sí
</Button>
<Button color="secondary" onClick={goBack}>
No
</Button>
</ModalFooter>
</Modal>
);
}
Example #4
| Source File: index.js From HexactaLabs-NetCore_React-Level2 with Apache License 2.0 | 6 votes |
|
ModalRemove = ({ remove, goBack }) => {
return (
<Modal isOpen>
<ModalHeader>Confirmar</ModalHeader>
<ModalBody>¿Desea eliminar esta categoría?</ModalBody>
<ModalFooter>
<Button color="danger" onClick={remove}>
Sí
</Button>
<Button color="secondary" onClick={goBack}>
No
</Button>
</ModalFooter>
</Modal>
);
}
Example #5
| Source File: ModalConfirm.js From agenda with MIT License | 6 votes |
|
ModalConfirm = ({
message,
title,
onAccept,
onDismiss,
children,
large
}) => (
<Modal
isOpen
centered
toggle={onDismiss}
size={large ? 'lg' : null}
>
<ModalHeader toggle={onDismiss}>
{title}
</ModalHeader>
<ModalBody >
{message}
{children}
</ModalBody>
<ModalFooter>
{onAccept && (
<Button onClick={onAccept} color="primary">
<FontAwesomeIcon icon={faCheck}/>
Confirmar
</Button>
)}
<Button onClick={onDismiss}>
<FontAwesomeIcon icon={faBan}/>
Cancelar
</Button>
</ModalFooter>
</Modal>
)
Example #6
| Source File: index.js From HexactaLabs-NetCore_React-Initial with Apache License 2.0 | 6 votes |
|
ElementRemove = ({ remove, goBack }) => {
return (
<Modal isOpen>
<ModalHeader>Eliminar tienda</ModalHeader>
<ModalBody>¿Desea eliminar esta tienda?</ModalBody>
<ModalFooter>
<Button color="danger" onClick={remove}>
Si
</Button>
<Button color="secondary" onClick={goBack}>
No
</Button>
</ModalFooter>
</Modal>
);
}
Example #7
| Source File: index.js From HexactaLabs-NetCore_React-Level1 with Apache License 2.0 | 6 votes |
|
ElementRemove = ({ remove, goBack }) => {
return (
<Modal isOpen>
<ModalHeader>Eliminar ProdType</ModalHeader>
<ModalBody>
¿Desea eliminar este ProdType? El sabe que quieres eliminarlo?
</ModalBody>
<ModalFooter>
<Button color="danger" onClick={remove}>
Si
</Button>
<Button color="secondary" onClick={goBack}>
No
</Button>
</ModalFooter>
</Modal>
);
}
Example #8
| Source File: MediaList.js From DMS_React with GNU Affero General Public License v3.0 | 6 votes |
|
MediaList = (props) => {
const [previewVisible, setPreviewVisible] = useState();
const handleToggle = () => {
setPreviewVisible(!previewVisible);
};
return (
<Auxiliary>
<GreedImage mediaList={props.mediaList} handleToggle={handleToggle}/>
<Modal isOpen={previewVisible} toggle={handleToggle}>
<ModalHeader toggle={handleToggle}>Slide Show</ModalHeader>
<ModalBody>
<Carousel mediaList={props.mediaList}/>
</ModalBody>
</Modal>
</Auxiliary>
);
}
Example #9
| Source File: ConfigResetModal.jsx From watchmo with MIT License | 5 votes |
|
ConfigResetModal = props => {
const { buttonLabel, className, handleReset } = props;
const [modal, setModal] = useState(false);
const toggle = () => setModal(!modal);
const resetReload = () => {
handleReset();
toggle();
};
const center = true;
return (
<div>
<Button color="danger" onClick={toggle}>
{buttonLabel}
</Button>
<Modal
centered={center}
isOpen={modal}
toggle={toggle}
className={className}
>
<ModalHeader toggle={toggle}>Confirm Reset</ModalHeader>
<ModalBody>
Form data will revert to your last saved configuration. Are you sure
you want to do this?
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={resetReload}>
Reset Form
</Button>{' '}
<Button color="secondary" onClick={toggle}>
Cancel Reset
</Button>
</ModalFooter>
</Modal>
</div>
);
}
Example #10
| Source File: index.js From DMS_React with GNU Affero General Public License v3.0 | 5 votes |
|
render() {
const {onMailSend, onClose, user} = this.props;
const {to, subject, message} = this.state;
return (
<Modal className="modal-box modal-box-mail" toggle={onClose} isOpen={this.props.open}
style={{zIndex: 2600}}>
<ModalHeader className="modal-box-header bg-primary text-white">
New Message
<IconButton className="text-white"
onClick={onClose}>
<CloseIcon/>
</IconButton>
</ModalHeader>
<div className="modal-box-content d-flex flex-column">
<TextField
id="required"
label="To*"
onChange={(event) => this.setState({to: event.target.value})}
defaultValue={to}
margin="normal"/>
<TextField
id="required"
label="Subject"
onChange={(event) => this.setState({subject: event.target.value})}
value={subject}
margin="normal"
/>
<TextField
id="required"
label="Message"
onChange={(event) => this.setState({message: event.target.value})}
value={message}
multiline
rowsMax="4"
margin="normal"/>
</div>
<div className="modal-box-footer">
<Button className="attach-file jr-btn text-muted">
<i className="zmdi zmdi-attachment mr-2 zmdi-hc-2x"/> Attach File
</Button>
<Button disabled={to === ''} variant="contained" color="primary" onClick={() => {
onClose();
onMailSend(
{
'id': '15453a06c08fb021776',
'from': {
'name': user.name,
'avatar': user.avatar,
'email': user.email
},
'to': [
{
'name': to,
'email': to
}
],
'subject': subject,
'message': message,
'time': Moment().format('DD MMM'),
'read': false,
'starred': false,
'important': false,
'hasAttachments': false,
'folder': 1,
'selected': false,
'labels': [],
})
}}>
<i className="zmdi zmdi-mail-send mr-2"/> Send Message</Button>
</div>
</Modal>
);
}
Example #11
| Source File: Footer.js From covid19 with MIT License | 5 votes |
|
render() {
const { lang, fullMap, fullPlot, fullTree } = this.props
if (fullMap || fullPlot || fullTree) return <div />
return (
<Fragment>
<div className="footer">
<span>
<a href="https://yliu.io">Steven Liu</a> 2020
</span>
<FaInfoCircle
data-tip={!(isMobile || isIPad13) ? i18n.ABOUT[lang] : null}
size={18}
onClick={() => this.setState({ modal: true })}
/>
<FaGithub
data-tip={!(isMobile || isIPad13) ? i18n.SOURCE_CODE[lang] : null}
size={18}
onClick={() => window.open('https://github.com/stevenliuyi/covid19')}
/>
</div>
<Modal isOpen={this.state.modal} centered={true} toggle={this.toggle}>
<ModalHeader toggle={this.toggle}>{i18n.ABOUT[lang]}</ModalHeader>
<ModalBody className="footer-about">
<div dangerouslySetInnerHTML={{ __html: i18n.ABOUT_TEXT[lang] }} />
<a
className="bmc-button"
target="_blank"
href="https://www.buymeacoffee.com/stevenliuyi"
rel="noopener noreferrer"
>
<img
src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg"
alt="Buy me a coffee"
/>
<span style={{ marginLeft: 15, fontSize: 19 }}>Buy me a coffee</span>
</a>
</ModalBody>
</Modal>
</Fragment>
)
}
Example #12
| Source File: index.js From gobench with Apache License 2.0 | 5 votes |
|
render() {
const { modal, modalCentered } = this.state
return (
<div>
<h5 className="mb-4">
<strong>Default Modals</strong>
</h5>
<div className="mb-5">
<Button color="primary" onClick={this.toggle} className="mr-3">
Launch demo modal
</Button>
<Modal isOpen={modal} toggle={this.toggle}>
<ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</ModalBody>
<ModalFooter>
<Button color="light" onClick={this.toggle}>
Cancel
</Button>{' '}
<Button color="primary" onClick={this.toggle}>
Do Something
</Button>
</ModalFooter>
</Modal>
<Button color="primary" onClick={this.toggleCentered}>
Vertically centered modal
</Button>
<Modal
isOpen={modalCentered}
toggle={this.toggleCentered}
className="modal-dialog-centered"
>
<ModalHeader toggle={this.toggleCentered}>Vertically centered modal</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</ModalBody>
<ModalFooter>
<Button color="light" onClick={this.toggleCentered}>
Cancel
</Button>{' '}
<Button color="primary" onClick={this.toggleCentered}>
Do Something
</Button>
</ModalFooter>
</Modal>
</div>
</div>
)
}
Example #13
| Source File: Modal.js From placement-portal-web with MIT License | 5 votes |
|
render() {
const company=this.state
const toggleModalEdit=this.props.toggleModalEdit
return (
<div>
<Modal isOpen={company.modalIsOpen} >
<ModalHeader toggle={ ()=>toggleModalEdit()}>
Edit Details
</ModalHeader>
<ModalBody>
<div className="grid-item"><form >
<div className="display_editGridModal">
<input type="text"className="display_addInput" defaultValue={company.name} placeholder="Name:" onChange={this.handleChange} name="name" required/>
<select className="form-control" defaultValue={company.category} id="exampleFormControlSelect1"placeholder="Category:" onChange={this.handleChange} name="category" required>
<option disabled selected hidden>Category:</option>
<option>Super-Dream</option>
<option>Dream</option>
<option>Regular</option>
</select> </div>
<div className="display_editMore" >
{
this.state.addFields.map((field,index)=>{
let position = `position-${index}`, addDets = `addDets-${index}` ,packages = `packages-${index}`,deadline = `deadline-${index}`,Interviewdate = `Interviewdate-${index}` , noOfPos = `noOfPos-${index}`
return(
<div key={index}>
<div className="display_editMoreGrid">
<input type="text" className="display_addInput"placeholder="Position:" defaultValue={field.position} data-id={index} id={position} onChange={this.handleChange} name="position" required/>
<input type="number" className="display_addInput"placeholder="Number Of Position:" defaultValue={field.noOfPos} data-id={index} id={noOfPos} onChange={this.handleChange} name="noOfPos" required min="0" />
<input type="text"className="display_addInput"placeholder="Interview Date:" defaultValue={field.Interviewdate} data-id={index} id={Interviewdate} onFocus = {this.onFocus} onBlur={this.onBlur} onChange={this.handleChange} name="Interviewdate" required />
<input type="text"className="display_addInput"placeholder="Deadline:" defaultValue={field.deadline} data-id={index} id={deadline} onFocus = {this.onFocus} onBlur={this.onBlur} onChange={this.handleChange} name="deadline" required />
<input type="text"className="display_addInput" placeholder="Package:" defaultValue={field.packages} data-id={index} id={packages} onChange={this.handleChange} name="packages" required/>
</div>
<input type="text" className="display_addInput"placeholder="Add Details" defaultValue={field.addDets} data-id={index} id={addDets} onChange={this.handleChange} name="addDets" required />
</div>
)
})
}
<button className="display_editMoreBtn" onClick={this.handleAddMore}><span className="center" style={{marginBottom:'5px'}}>+</span></button> </div>
<input type="text" className="display_addInput" defaultValue={company.link} placeholder="Link" onChange={this.handleChange} name="link" required="required" />
</form></div>
</ModalBody>
<ModalFooter>
<button type="display_submit" className="display_btnModal" type="submit" onClick={() => { this.handleSave()}}>Save</button>
<button className="display_btnModal" onClick={() => { toggleModalEdit()}} >cancel</button>
</ModalFooter>
</Modal>
</div>
)}
Example #14
| Source File: PartsCard.js From covid-break-master with MIT License | 5 votes |
|
export default function PartsCard(props) {
const {name, url, price} = props.part
return (
<div>
<Modal isOpen={props.modal} toggle={props.toggleModal}>
<ModalHeader toggle={props.toggleModal}>{name}</ModalHeader>
<ModalBody>
{props.part.model && <p>Socket Type: {props.part.model}
</p>}
{props.part.socket && <p>Socket Type: {props.part.socket}
</p>}
{props.part.cores && <p>Cores: {props.part.cores}
</p>}
{props.part.speed && <p>Speed: {props.part.speed}Mhz
</p>}
{props.part.watts && <p>Watts: {props.part.watts}
</p>}
{props.part.formFactor && <p>Form Factor: {props.part.formFactor}
</p>}
{props.part.size && <p>Size: {props.part.size}
</p>}
{props.part.modules && <p>Modules: {props.part.modules}
</p>}
{props.part.capacity && <p>Capacity: {props.part.capacity}
</p>}
{props.part.interface && <p>Interface: {props.part.interface}
</p>}
{props.part.chipset && <p>Chipset: {props.part.chipset}
</p>}
{props.part.memory && <p>Memory: {props.part.memory}
Gb
</p>}
<p>
{price}
</p>
<img
style={{
maxWidth: "100%",
maxHeight: "173px"
}}
src={url}/>
</ModalBody>
<ModalFooter>
{props.cart.items.includes(props.part) ? <button
onClick={() => {
props.cartRemove(props.part.id, props.part.name)
}}>Remove from Cart</button> : null}
<button
onClick={() => {
props.cartAdd(props.part)
}}>Add to Cart</button>
<Button color="secondary" onClick={props.toggleModal}>Close</Button>
</ModalFooter>
</Modal>
</div>
)
}
Example #15
| Source File: fakeModal.js From ErgoAuctionHouse with MIT License | 5 votes |
|
render() {
return (
<Modal
isOpen={this.props.isOpen}
toggle={this.props.close}
>
<ModalHeader toggle={this.props.close}>
<span className="fsize-1 text-muted">Potential warning</span>
</ModalHeader>
<ModalBody>
<Container>
<p className="text-danger mr-2 ml-2">
There is a similar artwork issued before this one.
<br/>
<b>Note that this message may not be accurate! Please see the potential original one and make the decision for yourself.</b>
</p>
</Container>
</ModalBody>
<ModalFooter>
<Button
className="ml-3 mr-3 btn-transition"
color="secondary"
onClick={() => {
this.props.close()
bidHelper(this.props.bid, this.props.box, this.props.modal, null, false)
}}
>
Place the bid anyway
</Button>
<Button
className="ml-3 mr-3 btn-transition"
color="secondary"
onClick={() => {
window.open(getArtworkUrl(this.props.original))
}}
>
See the potential original
</Button>
</ModalFooter>
</Modal>
);
}
Example #16
| Source File: PlacementEditBoard.js From GB-GCGC with MIT License | 5 votes |
|
render() {
const {redirect} = this.state;
if(redirect){
return <Redirect to={"/home"}/>
}
return (
<div className="container">
<Card>
<Card.Body>
<div className="inline">
<Card.Title>
<h5 align="center">
Notice Board-Placements
<Tooltip title="Add">
<Link onClick={this.toggleModal}>
<FontAwesomeIcon icon={faPlus} size="xs" className="p-1 fa-lg" style={{backgroundColor:'#2A324B',color:'white',fontSize:'20',borderRadius:'10'}}/>
</Link>
</Tooltip>
</h5>
</Card.Title>
</div>
<div>
<Table size="sm" responsive striped>
<thead className="p-3" style={{backgroundColor:'#2A324B',color:'white',fontSize:'24px'}}>
<tr>
<th>S.No</th>
<th>Name of the Company</th>
<th>Date</th>
<th>CTC</th>
<th colspan="2">Operations</th>
</tr>
</thead>
<tbody>
{this.userList()}
</tbody>
</Table>
</div>
</Card.Body>
</Card>
<Modal isOpen={this.state.isModalOpen} toggle={this.toggleModal}>
<ModalHeader toggle={this.toggleModal}>
Add Placement Event
</ModalHeader>
<ModalBody>
<Form onSubmit={this.handleSubmit}>
<FormGroup>
<Label htmlfor="company">Name Of The Company</Label>
<Input type="text" id="company" name="company" value={this.state.company} onChange={this.onChangeCompany} />
</FormGroup>
<FormGroup>
<Label htmlFor="date"> From </Label>
<Input type="date" id="date" name="date" value={this.state.date} onChange={this.onChangeDate} />
</FormGroup>
<FormGroup>
<Label htmlFor="CTC"> CTC </Label>
<Input type="text" id="ctc" name="ctc" value={this.state.CTC} onChange={this.onChangeCTC}/>
</FormGroup>
<Button type="submit" value="submit" color="primary">
Submit
</Button>
</Form>
</ModalBody>
</Modal>
</div>
);
}
Example #17
| Source File: AddPlaylistModal.js From Frontend with Apache License 2.0 | 5 votes |
|
PlaylistModal = (props) => {
const [modal, setModal] = useState(false)
const [playlistName, setPlaylistName] = useState()
const [playlistDes, setPlaylistDes] = useState()
function addPlaylist(e) {
const res = fetch(`https://api.codedigger.tech/lists/userlist/new`, {
method: 'POST',
headers: {
'Content-type': 'application/json',
Authorization: `Bearer ${props.acc}`,
},
body: JSON.stringify({
name: playlistName,
description: playlistDes,
public: true,
}),
})
window.location.reload()
res.catch((err) => console.log(err))
}
const toggle = () => setModal(!modal)
return (
<div>
<Button id="Add_Problem_List" color="danger" onClick={toggle}>
Add Problem List
</Button>
<Modal isOpen={modal} toggle={toggle}>
<ModalHeader toggle={toggle}>Add a Problem List</ModalHeader>
<ModalBody>
Add the name and the description for your Problem List.
</ModalBody>
<Form id="form">
<div>
<Input
type="text"
id="playlistName"
onChange={(e) => setPlaylistName(e.target.value)}
placeholder="Playlist Name"
/>
<Input
type="textarea"
onChange={(e) => setPlaylistDes(e.target.value)}
id="playlistdec"
placeholder="Playlist Description"
/>
<Button
id="Add_Problem_List_With_Details"
color="primary"
onClick={addPlaylist}
>
Add Problem List
</Button>
</div>
</Form>
<ModalFooter>
<Button id="close" color="secondary" onClick={toggle}>
Close
</Button>
</ModalFooter>
</Modal>
</div>
)
}
Example #18
| Source File: WorkspaceDetail.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
const projectType = this.state.projectType;
const { params } = this.props.match;
// let link = "namespaces/" + params.namespace + "/services/" + params.name
// // console.log(params.namespace, params.name)
// // console.log(this.state.apiList, "serviceDetail")
// let apitoData = []
// let labels = []
// let selectors = []
// let updateTime = []
// let loadBalancer = []
// let annotations = [];
// let dataFromApi = apiList.map(list => {
// if (list.metadata.annotations == undefined) {
// annotations = "-"
// } else {
// annotations = list.metadata.annotations;
// }
// // labels.push(list.metadata.labels);
// if (list.metadata.managedFields.length > 1) {
// list.metadata.managedFields.map(time => {
// updateTime = time.time
// })
// } else {
// updateTime = list.metadata.managedFields[0].time;
// }
// labels = list.metadata.labels;
// if (list.spec.selector === undefined) {
// selectors = "-"
// } else {
// selectors = list.spec.selector
// }
// if (Object.keys(list.status.loadBalancer).length < 1) {
// loadBalancer = "-"
// } else {
// loadBalancer = list.status.loadBalancer;
// }
// return {
// name: list.metadata.name,
// namespace: list.metadata.namespace,
// createTime: list.metadata.creationTimestamp,
// label: labels,
// ip: list.spec.clusterIP,
// uid: list.metadata.uid,
// selector: selectors,
// port: list.spec.ports,
// sessionAffinity: list.spec.sessionAffinity,
// loadBalancer: loadBalancer,
// type: list.spec.type,
// updateTime: updateTime,
// annotations: annotations
// }
// })
// apitoData = dataFromApi;
// console.log(apitoData, "apitoData");
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Project Detail" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg={4}>
<Card className="checkout-order-summary">
<CardBody>
{/* <div className="p-3 bg-light mb-4"> */}
<h5 className="text-dark font-weight-bold">{params.name}</h5>
<Card>
</Card>
<Row>
<div>
<Link
onClick={() =>
this.setState({ isModal: !this.state.modal })
}
to="#"
className="popup-form btn btn-primary"
>
정보수정
</Link>
</div>
<Modal
size="xl"
isOpen={this.state.isModal}
centered={true}
toggle={() =>
this.setState({ isModal: !this.state.isModal })
}
>
<ModalHeader
toggle={() =>
this.setState({ isModal: !this.state.isModal })
}
>
Form
</ModalHeader>
<ModalBody>
<Form>
<Row>
<Col lg={4}>
<FormGroup>
<Label htmlFor="name">Name</Label>
<Input
type="text"
className="form-control"
id="name"
placeholder="Enter Name"
required
/>
</FormGroup>
</Col>
<Col lg={4}>
<FormGroup>
<Label htmlFor="email">Email</Label>
<Input
type="email"
className="form-control"
id="email"
placeholder="Enter Email"
required
/>
</FormGroup>
</Col>
<Col lg={4}>
<FormGroup>
<Label htmlFor="password">Password</Label>
<Input
type="text"
className="form-control"
id="password"
placeholder="Enter Password"
required
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg={12}>
<FormGroup>
<Label htmlFor="subject">Subject</Label>
<textarea
className="form-control"
id="subject"
rows="3"
></textarea>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg={12}>
<div className="text-right">
<Button
type="submit"
color="primary"
>
Submit
</Button>
</div>
</Col>
</Row>
</Form>
</ModalBody>
</Modal>
<Col sm={3}>
{/* 정보 수정 */}
{/* 더보기 */}
<Dropdown
isOpen={this.state.singlebtn}
toggle={() =>
this.setState({ singlebtn: !this.state.singlebtn })
}
>
<DropdownToggle color="primary" caret>
더보기{" "}
<i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>서비스 수정</DropdownItem>
<DropdownItem>인터넷 접근 수정</DropdownItem>
<DropdownItem>수정(YAML)</DropdownItem>
<DropdownItem>삭제</DropdownItem>
</DropdownMenu>
</Dropdown>
</Col>
</Row>
{/* </div> */}
<div className="table-responsive">
{/* project detail info table */}
<ProjectDetail_detail params={params} projectType={projectType} />
</div>
</CardBody>
</Card>
</Col>
<Col lg={8}>
<Card>
<CardBody>
<Nav pills className="navtab-bg nav-justified">
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "5"
})}
onClick={() => {
this.toggle1("5");
}}
>
리소스 상태
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "6"
})}
onClick={() => {
this.toggle1("6");
}}
>
메타 데이터
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "7"
})}
onClick={() => {
this.toggle1("7");
}}
>
이벤트
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab1}>
<TabPane tabId="5" className="p-3">
<Row>
<Col sm="12">
{/* <ServicePorts params={params} apitoData={apitoData} />
<ServiceDeploy params={params} apitoData={apitoData} />
<ServicePodState params={params} apitoData={apitoData} /> */}
</Col>
</Row>
</TabPane>
<TabPane tabId="6" className="p-3">
<Row>
<Col sm="12">
{/* <DeploymentMeta apitoData={apitoData} /> */}
</Col>
</Row>
</TabPane>
<TabPane tabId="7" className="p-3">
<Row>
<Col sm="12">
{/* <CardText> */}
<div className="table-responsive">
{/* <Table className=" table-centered mb-0 table-nowrap"> */}
<Table hover className=" mb-0 table-centered table-nowrap">
<thead>
<tr>
<th className="border-top-0" style={{ width: "110px" }} scope="col">이벤트</th>
</tr>
</thead>
<tbody>
<tr>
<Alert color="primary" >
A simple primary alert—check it out!
</Alert>
<Alert color="secondary" role="alert">
A simple secondary alert—check it out!
</Alert>
<Alert color="success" role="alert">
A simple success alert—check it out!
</Alert>
<Alert ccolor="danger" role="alert">
A simple danger alert—check it out!
</Alert>
<Alert color="warning" role="alert">
A simple warning alert—check it out!
</Alert>
<Alert color="info" className="mb-0" role="alert">
A simple info alert—check it out!
</Alert>
</tr>
</tbody>
</Table>
</div>
{/* </CardText> */}
</Col>
</Row>
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #19
| Source File: blogList.component.js From blogApp with MIT License | 4 votes |
|
render() {
return (
<div className=''>
<Button
color='danger'
onClick={this.toggleModal}
style={{
marginLeft: "15vw",
marginTop: "2vh",
width: "70vw",
}}>
Add a BLOG
</Button>
<div
className='row pt-4 justify-content-center '
style={{
marginLeft: "5vw",
width: "90vw",
}}>
{this.state.blogs ? (
<Blogs
blogs={this.state.blogs}
user={this.state.user}
liked={this.state.like}
toggleLike={this.toggleLike}
setUser={this.props.setUser}
/>
) : (
<ReactLoading
type={"spin"}
color={"orange"}
height={"100vh"}
width={"40%"}
className='loading'
/>
)}
<Modal
isOpen={this.state.isModalOpen}
fade={false}
toggle={this.toggleModal}>
<ModalHeader toggle={this.toggleModal}>
Add a blog
</ModalHeader>
<Form onSubmit={this.onSubmit}>
<ModalBody>
<FormGroup>
<Label htmlFor='title'>title</Label>
<Input
type='text'
id='title'
onChange={this.ontitleChange}
name='title'
/>
</FormGroup>
<FormGroup>
<Label htmlFor='imageURL'>imageURL</Label>
<Input
type='text'
id='imageURL'
onChange={this.onimgChange}
name='imageURL'
/>
</FormGroup>
<FormGroup>
<Label htmlFor='body'>body</Label>
<Input
type='textarea'
id='body'
onChange={this.onbodyChange}
name='body'
/>
</FormGroup>
</ModalBody>
<ModalFooter>
<Button
type='submit'
value='submit'
color='primary'>
Add BLOG
</Button>
</ModalFooter>
</Form>
</Modal>
</div>
</div>
);
}
Example #20
| Source File: ProfilePage.js From Frontend with Apache License 2.0 | 4 votes |
|
function ProfilePage({ handle }) {
// console.log(handle);
const [user, setUsers] = useState({})
const [error, setErrors] = useState(false)
const creds = JSON.parse(localStorage.getItem('creds'))
const uu = handle
const [firstTime, setFirstTime] = useState()
const [acc, setAcc] = useState()
const [codeforcesDat, setCodeforcesDat] = useState()
const [codechefDat, setCodechefDat] = useState()
const [atcoderDat, setAtcodercesDat] = useState()
const [spojDat, setSpojDat] = useState()
const [uvaDat, setUvaDat] = useState()
const [codeforcesStatus, setCodeforcesStatus] = useState(true)
const [codechefStatus, setCodechefStatus] = useState(true)
const [atcoderStatus, setAtcodercesStatus] = useState(true)
const [spojStatus, setSpojStatus] = useState(true)
const [uvaStatus, setUvaStatus] = useState(true)
const [show, setShow] = useState(true)
const tabs1 = ['#tab1-1', '#tab1-2', '#tab1-3']
const tabs2 = ['#tab2-1', '#tab2-2', '#tab2-3']
const tabs3 = ['#tab3-1', '#tab3-2', '#tab3-3']
const tabSection1 = ['tab1-1', 'tab1-2', 'tab1-3']
const tabSection2 = ['tab2-1', 'tab2-2', 'tab2-3']
const tabSection3 = ['tab3-1', 'tab3-2', 'tab3-3']
const [nestedModal3, setNestedModal3] = useState(false)
const [friendReq, setFriendReq] = useState({})
const [friendReqStatus, setFriendReqStatus] = useState(false)
const toggleNested3 = (e) => {
e.preventDefault()
setNestedModal3(!nestedModal3)
}
useEffect(() => {
$(function () {
// Reference the tab links.
const tabLinks = $('#tab1-links li a')
// console.log("PP");
// Handle link clicks.
tabLinks.click(function (event) {
var $this = $(this)
// Prevent default click behaviour.
event.preventDefault()
// Remove the active class from the active link and section.
$('#tab1-links a.active1, section.active1').removeClass('active1')
// Add the active class to the current link and corresponding section.
$this.addClass('active1')
$($this.attr('href')).addClass('active1')
})
})
$(window).scroll(function () {
if ($(window).scrollTop() <= 800) {
$('#profileCard').css({
'margin-top': $(window).scrollTop() + 'px',
'margin-left': $(window).scrollLeft() + 'px',
})
}
})
})
useEffect(() => {
$(function () {
// Reference the tab links.
const tabLinks = $('#tab2-links li a')
// console.log("PP");
// Handle link clicks.
tabLinks.click(function (event) {
var $this = $(this)
// Prevent default click behaviour.
event.preventDefault()
// Remove the active class from the active link and section.
$('#tab2-links a.active2, section.active2').removeClass('active2')
// Add the active class to the current link and corresponding section.
$this.addClass('active2')
$($this.attr('href')).addClass('active2')
})
})
$(window).scroll(function () {
if ($(window).scrollTop() <= 800) {
$('#profileCard').css({
'margin-top': $(window).scrollTop() + 'px',
'margin-left': $(window).scrollLeft() + 'px',
})
}
})
})
useEffect(() => {
$(function () {
// Reference the tab links.
const tabLinks = $('#tab3-links li a')
// console.log("PP");
// Handle link clicks.
tabLinks.click(function (event) {
var $this = $(this)
// Prevent default click behaviour.
event.preventDefault()
// Remove the active class from the active link and section.
$('#tab3-links a.active3, section.active3').removeClass('active3')
// Add the active class to the current link and corresponding section.
// $this.addClass('active3');
$($this.attr('href')).addClass('active3')
})
})
// $(window).scroll(function(){
// if($(window).scrollTop() <=800)
// {
// $("#profileCard").css({"margin-top": ($(window).scrollTop()) + "px", "margin-left":($(window).scrollLeft()) + "px"});
// }
// });
})
useEffect(() => {
if (creds) {
setFirstTime(creds.first)
setAcc(creds.access)
}
// jQuery.
async function fetchData() {
if (creds) {
const res = await getProfile(creds.access, uu)
.then((res) => setUsers(res))
.then((show) => setShow(false))
.catch((error) => setErrors(true))
} else {
alert('Please Login to Proceed')
window.location = '/login'
}
const res1 = await getInfoBySite(uu, 'codeforces')
.then((res) => setCodeforcesDat(res))
.then((show) => setCodeforcesStatus(false))
.catch((error) => setErrors(true))
const res2 = await getInfoBySite(uu, 'codechef')
.then((res) => setCodechefDat(res))
.then((show) => setCodechefStatus(false))
.catch((error) => setErrors(true))
const res3 = await getInfoBySite(uu, 'atcoder')
.then((res) => setAtcodercesDat(res))
.then((show) => setAtcodercesStatus(false))
.catch((error) => setErrors(true))
const res4 = await getInfoBySite(uu, 'spoj')
.then((res) => setSpojDat(res))
.then((show) => setSpojStatus(false))
.catch((error) => setErrors(true))
const res5 = await getInfoBySite(uu, 'uva')
.then((res) => setUvaDat(res))
.then((show) => setUvaStatus(false))
.catch((error) => setErrors(true))
if (creds) {
const res6 = await getFriendReq(creds.access)
.then((res6) => setFriendReq(res6))
.then(() => {
setFriendReqStatus(true)
})
} else {
alert('Please Login to Proceed')
window.location = '/login'
}
}
fetchData()
// console.log(friendReq);
}, [])
return firstTime === true ? (
(window.location = '/createProfile')
) : show == true ? (
<Loading />
) : (
<>
<Navbar />
<div className="container" style={{ marginTop: '100px' }}>
<div className="main-body">
<div className="row gutters-sm">
<div className="col-md-4 mb-3">
<div className="card1">
<div className="card-body">
{user.result.about_user === 'Logged In User Itself' ? (
<div>
{/* <FontAwesomeIcon onClick={toggleNested3} alt="Click to view pending requests" style={{fontSize:"1.5rem",cursor:"pointer"}} icon={faUserClock}/> */}
<div style={{ width: '2rem' }}>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
>
<defs>
<linearGradient
id="WatsonOnboard_svg__a"
x1="4"
y1="24"
x2="4"
y2="9"
gradientUnits="userSpaceOnUse"
>
<stop offset=".2"></stop>
<stop offset="1" stop-opacity="0"></stop>
</linearGradient>
<linearGradient
id="WatsonOnboard_svg__b"
x1="28.5"
y1="-1959"
x2="28.5"
y2="-1976"
gradientTransform="translate(-1 1984)"
gradientUnits="userSpaceOnUse"
>
<stop offset=".5"></stop>
<stop offset="1" stop-opacity="0"></stop>
</linearGradient>
<linearGradient
id="WatsonOnboard_svg__d"
y1="32"
x2="32"
gradientUnits="userSpaceOnUse"
>
<stop offset=".1" stop-color="#a56eff"></stop>
<stop offset=".9" stop-color="#0f62fe"></stop>
</linearGradient>
<mask
id="WatsonOnboard_svg__c"
x="0"
y="0"
width="32"
height="32"
maskUnits="userSpaceOnUse"
>
<path
d="M3.873 23A14 14 0 0125.9 6.1l-1.415 1.415A12 12 0 005.6 22zM16 29.993A13.952 13.952 0 016.1 25.9l1.414-1.414A12 12 0 0026.4 10l1.731-1A14 14 0 0116 29.993z"
fill="#fff"
></path>
<path
fill="url(#WatsonOnboard_svg__a)"
d="M1 9h6v15H1z"
></path>
<path
transform="rotate(180 27.5 16.5)"
fill="url(#WatsonOnboard_svg__b)"
d="M24 8h7v17h-7z"
></path>
</mask>
</defs>
<g data-name="Layer 2">
<g data-name="Light theme icons">
<g mask="url(#WatsonOnboard_svg__c)">
<path
fill="url(#WatsonOnboard_svg__d)"
d="M0 0h32v32H0z"
></path>
</g>
<path
d="M19 18h-6a3 3 0 00-3 3v2h2v-2a1 1 0 011-1h6a1 1 0 011 1v2h2v-2a3 3 0 00-3-3zM16 17a4 4 0 10-4-4 4 4 0 004 4zm0-6a2 2 0 11-2 2 2 2 0 012-2zM30 12h-2v-2h-2v2h-2v2h2v2h2v-2h2v-2z"
fill="#001d6c"
></path>
</g>
</g>
</svg>
</div>
<Modal isOpen={nestedModal3} toggle={toggleNested3}>
<ModalHeader>
List of Received Friend Requests
</ModalHeader>
<ModalBody style={{ marginBottom: '20px' }}>
{friendReqStatus ? (
<FriendList friends={friendReq} i="2" acc={acc} />
) : (
<Loading />
)}
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={toggleNested3}>
Close{' '}
</Button>{' '}
</ModalFooter>
</Modal>
</div>
) : (
<></>
)}
<div className="d-flex flex-column align-items-center text-center">
<img
src="https://www.bootdey.com/img/Content/avatar/avatar7.png"
alt="Admin"
className="rounded-circle"
style={{ height: '8rem', width: '8rem' }}
width="150"
/>
<div className="mt-3">
<h4 style={{ color: 'black' }}>{user.result.name}</h4>
<p className="text-secondary mb-5">{uu}</p>
<FriendsBtn
creds={creds}
acc={acc}
handle={uu}
user={user}
/>
<MentorBtn
creds={creds}
acc={acc}
handle={uu}
user={user}
/>
</div>
</div>
</div>
<ul className="list-group list-group-flush">
<li className="d-flex justify-content-between align-items-center flex-wrap handlesItem">
<div style={{ display: 'flex', alignItems: 'center' }}>
<img
style={{
height: '1.5rem',
width: '1.5rem',
marginRight: '0.5rem',
}}
src={CodeforcesImg}
></img>
<h6 className="mb-0">Codeforces</h6>
</div>
<span className="text-secondary">
{user.result.codeforces != null ? (
<a
className="handleName"
href={
'https://codeforces.com/profile/' +
user.result.codeforces
}
>
{user.result.codeforces}
</a>
) : (
'NA'
)}
</span>
</li>
<li className="d-flex justify-content-between align-items-center flex-wrap handlesItem">
<div style={{ display: 'flex', alignItems: 'center' }}>
<img
style={{
height: '1.5rem',
width: '1.5rem',
marginRight: '0.5rem',
}}
src={CodechefImg}
></img>
<h6 className="mb-0">Codechef</h6>
</div>
<span className="text-secondary">
{user.result.codechef != '' ? (
<a
className="handleName"
href={
'https://codechef.com/users/' + user.result.codechef
}
>
{user.result.codechef}
</a>
) : (
'NA'
)}
</span>
</li>
<li className="d-flex justify-content-between align-items-center flex-wrap handlesItem">
<div style={{ display: 'flex', alignItems: 'center' }}>
<img
style={{
height: '1.5rem',
width: '1.5rem',
marginRight: '0.5rem',
}}
src={SpojImg}
></img>
<h6 className="mb-0">SPOJ</h6>
</div>
<span className="text-secondary">
{user.result.spoj != null ? (
<a
className="handleName"
href={'https://spoj.com/users/' + user.result.spoj}
>
{user.result.spoj}
</a>
) : (
'NA'
)}
</span>
</li>
<li className="d-flex justify-content-between align-items-center flex-wrap handlesItem">
<div style={{ display: 'flex', alignItems: 'center' }}>
<img
style={{
height: '1.5rem',
width: '1.5rem',
marginRight: '0.5rem',
}}
src={UAVImg}
></img>
<h6 className="mb-0">UVA</h6>
</div>
<span className="text-secondary">
{user.result.uva_handle != null ? (
<a
className="handleName"
href={
'https://uva.com/users/' + user.result.uva_handle
}
>
{user.result.uva_handle}
</a>
) : (
'NA'
)}
</span>
</li>
<li className="d-flex justify-content-between align-items-center flex-wrap handlesItem">
<div style={{ display: 'flex', alignItems: 'center' }}>
<img
style={{
height: '1.5rem',
width: '1.5rem',
marginRight: '0.5rem',
}}
src={AtcoderImg}
></img>
<h6 className="mb-0">Atcoder</h6>
</div>
<span className="text-secondary">
{user.result.atcoder === null ? (
'NA'
) : (
<a
className="handleName"
href={
'https://atcoder.com/users/' + user.result.atcoder
}
>
{user.result.atcoder}
</a>
)}
</span>
</li>
</ul>
</div>
</div>
{/* Platform Cards Starts */}
<div className="col-md-8">
<div className="card1 mb-3">
<div className="card-body" style={{ color: 'black' }}>
<div>
<span>
<img
style={{
height: '1rem',
width: '6rem',
marginRight: 'auto',
marginLeft: 'auto',
display: 'block',
}}
src={CodeforcesLongImg}
></img>
</span>
</div>
{/* {console.log(codeforcesDat)} */}
{codeforcesStatus === true ? (
<>
<div className="body2">
<div id="container">
<div className="divider" aria-hidden="true"></div>
<p className="loading-text" aria-label="Loading">
<span className="letter" aria-hidden="true">
L
</span>
<span className="letter" aria-hidden="true">
o
</span>
<span className="letter" aria-hidden="true">
a
</span>
<span className="letter" aria-hidden="true">
d
</span>
<span className="letter" aria-hidden="true">
i
</span>
<span className="letter" aria-hidden="true">
n
</span>
<span className="letter" aria-hidden="true">
g
</span>
</p>
</div>
</div>
</>
) : (
<div>
<div style={{ marginTop: '20px' }}>
<div>
Current Rating : {codeforcesDat.result.rating}
</div>
<div>Max Rating : {codeforcesDat.result.maxRating}</div>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
marginTop: '10px',
justifyContent: 'space-around',
}}
>
<div
style={{ marginRight: '40px', marginLeft: '20px' }}
>
<Carousel controls={false} indicators={false}>
<Carousel.Item
style={{ height: '190px', width: '100px' }}
>
<img
className="d-block w-100"
src={Photo}
alt="First slide"
style={{ objectFit: 'contain' }}
/>
<Carousel.Caption
style={{
position: 'absolute',
top: '50px',
right: '20px',
}}
>
<h3
style={{
fontSize: '17px',
fontWeight: '700',
color: 'black',
}}
>
Organization Rank
</h3>
<p
style={{
fontSize: '18px',
color: 'black',
marginTop: '0px',
marginTop: '0px',
color: 'black',
}}
>
{codeforcesDat.result.organizationRank
? codeforcesDat.result.organizationRank
: '12023'}
</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item
style={{ height: '190px', width: '100px' }}
>
<img
className="d-block w-100"
src={Photo}
alt="First slide"
/>
<Carousel.Caption
style={{
position: 'absolute',
top: '50px',
right: '20px',
}}
>
<h3
style={{
fontSize: '17px',
fontWeight: '700',
color: 'black',
}}
>
Country Rank
</h3>
<p
style={{
fontSize: '18px',
color: 'black',
marginTop: '0px',
color: 'black',
marginTop: '0px',
}}
>
{codeforcesDat.result.countryRank
? codeforcesDat.result.countryRank
: 'NA'}
</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item
style={{ height: '190px', width: '100px' }}
>
<img
className="d-block w-100"
src={Photo}
alt="First slide"
/>
<Carousel.Caption
style={{
position: 'absolute',
top: '50px',
right: '20px',
}}
>
<h3
style={{
fontSize: '20px',
fontWeight: '700',
color: 'black',
}}
>
World Rank
</h3>
<p
style={{
fontSize: '18px',
color: 'black',
marginTop: '0px',
}}
>
{codeforcesDat.result.worldRank}
</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
</div>
<div
className="tabs1"
style={{
minWidth: '428px',
minHeight: '198px',
maxWidth: '428px',
maxHeight: '198px',
paddingTop: '12px',
}}
>
{codeforcesDat.result.contestRank.length === 0 ? (
<h6 style={{ color: 'black', fontSize: '2rem' }}>
You havent participated in any contest
</h6>
) : (
<>
<ul
id="tab1-links"
style={{ marginBottom: '0', height: '160px' }}
>
{codeforcesDat.result.contestRank.map(
(contestDat, index) => {
return (
<li key={index}>
<a
href={tabs1[index]}
className={
index === 0 ? 'active1' : ''
}
>
{index + 1}
</a>
</li>
)
}
)}
</ul>
{codeforcesDat.result.contestRank.map(
(contestDat, index) => {
return (
<section
style={{ width: '100%', height: '160px' }}
id={tabSection1[index]}
key={index}
className={index === 0 ? 'active1' : ''}
>
<h6
style={{
color: 'black',
fontSize: '18px',
fontWeight: '700',
color: 'black',
textDecoration: 'underline',
}}
>
{contestDat.contest.name.slice(0, 40)}
</h6>
<p
style={{
fontSize: '14px',
fontWeight: '500',
}}
>
World Rank :{' '}
{contestDat.worldRank
? contestDat.worldRank
: 'NA'}
</p>
<p
style={{
fontSize: '14px',
fontWeight: '500',
}}
>
Country Rank :{' '}
{contestDat.countryRank
? contestDat.countryRank
: 'NA'}
</p>
<p
style={{
fontSize: '14px',
fontWeight: '500',
}}
>
Org Rank :{' '}
{contestDat.organizationRank
? contestDat.organizationRank
: 'NA'}
</p>
</section>
)
}
)}{' '}
</>
)}
</div>
</div>{' '}
</div>
)}
{/* <hr width="100%" className="mt-4" style={{height: '5px', color: 'black', opacity: '1'}}/> */}
</div>
</div>
<div className="card1 mb-3">
<div className="card-body" style={{ color: 'black' }}>
{/* {console.log(codeforcesDat)} */}
{/* <hr width="100%" className="mt-4" style={{height: '5px', color: 'black', opacity: '1'}}/> */}
{/* Codechef card starts */}
{codechefStatus === true ? (
<LoadingProfile />
) : codechefDat.status === 'FAILED' ? (
<></>
) : (
<div>
<div>
<span>
<img
style={{
height: '3rem',
width: '6rem',
marginRight: 'auto',
marginLeft: 'auto',
display: 'block',
}}
src={CodechefImg}
></img>
</span>
</div>
<div style={{ marginTop: '20px' }}>
<div>Current Rating : {codechefDat.result.rating}</div>
<div>Max Rating : {codechefDat.result.maxRating}</div>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
marginTop: '10px',
justifyContent: 'space-around',
}}
>
<div
style={{ marginRight: '40px', marginLeft: '20px' }}
>
<Carousel controls={false} indicators={false}>
<Carousel.Item
style={{ height: '190px', width: '100px' }}
>
<img
className="d-block w-100"
src={Photo}
alt="First slide"
/>
<Carousel.Caption
style={{
position: 'absolute',
top: '50px',
right: '20px',
}}
>
<h3
style={{
fontSize: '17px',
fontWeight: '700',
color: 'black',
}}
>
Country Rank
</h3>
<p
style={{
fontSize: '18px',
color: 'black',
marginTop: '0px',
}}
>
{codechefDat.result.countryRank
? codechefDat.result.countryRank
: 'NA'}
</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item
style={{ height: '190px', width: '100px' }}
>
<img
className="d-block w-100"
src={Photo}
alt="First slide"
/>
<Carousel.Caption
style={{
position: 'absolute',
top: '50px',
right: '20px',
}}
>
<h3
style={{
fontSize: '20px',
fontWeight: '700',
color: 'black',
}}
>
World Rank
</h3>
<p
style={{
fontSize: '18px',
color: 'black',
marginTop: '0px',
}}
>
{codechefDat.result.worldRank}
</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
</div>
<div
className="tabs2"
style={{
minWidth: '428px',
minHeight: '198px',
maxWidth: '428px',
maxHeight: '198px',
paddingTop: '12px',
}}
>
{codechefDat.result.contestRank.length === 0 ? (
<h6 style={{ color: 'black', fontSize: '2rem' }}>
You havent participated in any contest
</h6>
) : (
<>
<ul
id="tab2-links"
style={{ marginBottom: '0', height: '160px' }}
>
{codechefDat.result.contestRank.map(
(contestDat, index) => {
return (
<li key={index}>
<a
href={tabs2[index]}
className={
index === 0 ? 'active2' : ''
}
>
{index + 1}
</a>
</li>
)
}
)}
</ul>
{codechefDat.result.contestRank.map(
(contestDat, index) => {
return (
<section
style={{ width: '100%', height: '160px' }}
id={tabSection2[index]}
key={index}
className={index === 0 ? 'active2' : ''}
>
<h6
style={{
color: 'black',
fontSize: '18px',
fontWeight: '700',
color: 'black',
textDecoration: 'underline',
}}
>
{contestDat.name.slice(0, 40)}
</h6>
<p
style={{
marginTop: '20px',
fontSize: '16px',
fontWeight: '500',
}}
>
Rank : {contestDat.rank}
</p>
</section>
)
}
)}{' '}
</>
)}
</div>
</div>
{/* <hr width="100%" className="mt-4" style={{height: '5px', color: 'black', opacity: '1'}}/> */}
</div>
)}
</div>
</div>
{/* {console.log(codeforcesDat)} */}
{/* <hr width="100%" className="mt-4" style={{height: '5px', color: 'black', opacity: '1'}}/> */}
{/* Codechef card starts */}
{/* Atcoder Card Starts */}
{/* {console.log(atcoderDat)} */}
{atcoderStatus === true ? (
<>
<div className="card1 mb-3">
<div className="card-body" style={{ color: 'black' }}>
<LoadingProfile />
</div>
</div>
</>
) : atcoderDat.status === 'FAILED' ? (
<></>
) : (
<div className="card1 mb-3">
<div className="card-body" style={{ color: 'black' }}>
<div>
<div>
<span>
<img
style={{
height: '3rem',
width: '3rem',
marginRight: 'auto',
marginLeft: 'auto',
display: 'block',
marginBottom: '0px',
}}
src={AtcoderImg}
></img>
</span>
</div>
<div style={{ marginTop: '20px' }}>
<div>Rating : {atcoderDat.result.rating}</div>
<div>Max Rating : {atcoderDat.result.maxRating}</div>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
marginTop: '10px',
justifyContent: 'space-around',
}}
>
<div
style={{ marginRight: '40px', marginLeft: '20px' }}
>
<Carousel controls={false} indicators={false}>
<Carousel.Item
style={{ height: '190px', width: '100px' }}
>
<img
className="d-block w-100"
src={Photo}
alt="First slide"
/>
<Carousel.Caption
style={{
position: 'absolute',
top: '50px',
right: '20px',
}}
>
<h3
style={{
fontSize: '20px',
fontWeight: '700',
color: 'black',
}}
>
World Rank
</h3>
<p
style={{
fontSize: '18px',
color: 'black',
marginTop: '0px',
}}
>
{atcoderDat.result.worldRank
? atcoderDat.result.worldRank
: 'NA'}
</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
</div>
<div
className="tabs3"
style={{
minWidth: '428px',
minHeight: '198px',
maxWidth: '428px',
maxHeight: '198px',
paddingTop: '12px',
}}
>
{atcoderDat.result.contestRank.length === 0 ? (
<h6 style={{ color: 'black', fontSize: '2rem' }}>
You havent participated in any contest
</h6>
) : (
<>
<ul
id="tab3-links"
style={{ marginBottom: '0', height: '160px' }}
>
{atcoderDat.result.contestRank.map(
(contestDat, index) => {
return (
<li key={index}>
<a
href={tabs3[index]}
className={
index === 0 ? 'active3' : ''
}
>
{index + 1}
</a>
</li>
)
}
)}
</ul>
{atcoderDat.result.contestRank.map(
(contestDat, index) => {
return (
<section
style={{ width: '100%', height: '160px' }}
id={tabSection3[index]}
key={index}
className={index === 0 ? 'active3' : ''}
>
<h6
style={{
color: 'black',
fontSize: '18px',
fontWeight: '700',
color: 'black',
textDecoration: 'underline',
}}
>
{contestDat.name.slice(0, 40)}
</h6>
<p
style={{
marginTop: '20px',
fontSize: '16px',
fontWeight: '500',
}}
>
World Rank : {contestDat.worldRank}
</p>
</section>
)
}
)}{' '}
</>
)}
</div>
</div>
</div>
</div>
{/* <hr width="100%" className="mt-4" style={{height: '5px', color: 'black', opacity: '1'}}/> */}
</div>
)}
<div className="card1 mb-3">
<div
className="card-body"
style={{ color: 'black', padding: '0', minHeight: '0' }}
>
{/* {console.log(codeforcesDat)} */}
<div className="row">
{/* SPOJ Card Starts */}
<div className="col-md-6 border-right">
{/* {console.log(spojDat)} */}
{spojStatus === true ? (
<div className="card1 mb-3">
<div className="card-body" style={{ color: 'black' }}>
<LoadingProfile />
</div>
</div>
) : spojDat.status === 'FAILED' ? (
<></>
) : (
<div>
<div>
<span>
<img
style={{
height: '1rem',
width: '6rem',
marginRight: 'auto',
marginLeft: 'auto',
display: 'block',
marginBottom: '0px',
}}
src={SpojLongImg}
></img>
</span>
</div>
<div style={{ marginTop: '20px' }}>
<div>Points : {spojDat.result.points}</div>
<div>Solved : {spojDat.result.solvedCount}</div>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
marginTop: '10px',
justifyContent: 'space-around',
}}
>
<div
style={{
marginRight: '40px',
marginLeft: '20px',
}}
>
<Carousel controls={false} indicators={false}>
<Carousel.Item
style={{ height: '190px', width: '60px' }}
>
<img
className="d-block"
src={Photo}
alt="First slide"
style={{
width: '80%',
position: 'relative',
left: '30px',
top: '-10px',
}}
/>
<Carousel.Caption
style={{
position: 'absolute',
top: '50px',
right: '20px',
}}
>
<h3
style={{
fontSize: '20px',
fontWeight: '700',
color: 'black',
}}
>
World Rank
</h3>
<p
style={{
fontSize: '18px',
color: 'black',
marginTop: '0px',
}}
>
{spojDat.result.worldRank
? spojDat.result.worldRank
: 'NA'}
</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
</div>
</div>{' '}
</div>
)}
</div>
{/* UVA Card Starts */}
<div className="col-md-6">
{/* {console.log(spojDat)} */}
{uvaStatus === true ? (
<LoadingProfile />
) : uvaDat.status === 'FAILED' ? (
<></>
) : (
<div>
<div>
<span>
<img
style={{
height: '2rem',
width: '2rem',
marginRight: 'auto',
marginLeft: 'auto',
display: 'block',
marginBottom: '0px',
}}
src={UAVImg}
></img>
</span>
</div>
<div style={{ marginTop: '20px' }}>
<div>Solved : {uvaDat.result.solvedCount}</div>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
marginTop: '10px',
justifyContent: 'space-around',
}}
>
<div
style={{
marginRight: '40px',
marginLeft: '20px',
}}
>
<Carousel controls={false} indicators={false}>
<Carousel.Item
style={{ height: '190px', width: '60px' }}
>
<img
className="d-block"
src={Photo}
alt="First slide"
style={{
width: '80%',
position: 'relative',
left: '30px',
top: '-10px',
}}
/>
<Carousel.Caption
style={{
position: 'absolute',
top: '50px',
right: '20px',
}}
>
<h3
style={{
fontSize: '20px',
fontWeight: '700',
color: 'black',
}}
>
World Rank
</h3>
<p
style={{
fontSize: '18px',
color: 'black',
marginTop: '0px',
}}
>
{uvaDat.result.worldRank
? uvaDat.result.worldRank
: 'NA'}
</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
</div>
</div>{' '}
</div>
)}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<FooterSmall />
</>
)
}
Example #21
| Source File: Modals.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
return (
<div className="animated fadeIn">
<Row>
<Col>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i> Bootstrap Modals
</CardHeader>
<CardBody>
<Button onClick={this.toggle} className="mr-1">Launch demo modal</Button>
<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
<ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
<Button color="secondary" onClick={this.toggle}>Cancel</Button>
</ModalFooter>
</Modal>
<Button onClick={this.toggleLarge} className="mr-1">Launch large modal</Button>
<Modal isOpen={this.state.large} toggle={this.toggleLarge}
className={'modal-lg ' + this.props.className}>
<ModalHeader toggle={this.toggleLarge}>Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.toggleLarge}>Do Something</Button>{' '}
<Button color="secondary" onClick={this.toggleLarge}>Cancel</Button>
</ModalFooter>
</Modal>
<Button onClick={this.toggleSmall} className="mr-1">Launch small modal</Button>
<Modal isOpen={this.state.small} toggle={this.toggleSmall}
className={'modal-sm ' + this.props.className}>
<ModalHeader toggle={this.toggleSmall}>Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.toggleSmall}>Do Something</Button>{' '}
<Button color="secondary" onClick={this.toggleSmall}>Cancel</Button>
</ModalFooter>
</Modal>
<hr />
<Button color="primary" onClick={this.togglePrimary} className="mr-1">Primary modal</Button>
<Modal isOpen={this.state.primary} toggle={this.togglePrimary}
className={'modal-primary ' + this.props.className}>
<ModalHeader toggle={this.togglePrimary}>Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.togglePrimary}>Do Something</Button>{' '}
<Button color="secondary" onClick={this.togglePrimary}>Cancel</Button>
</ModalFooter>
</Modal>
<Button color="success" onClick={this.toggleSuccess} className="mr-1">Success modal</Button>
<Modal isOpen={this.state.success} toggle={this.toggleSuccess}
className={'modal-success ' + this.props.className}>
<ModalHeader toggle={this.toggleSuccess}>Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</ModalBody>
<ModalFooter>
<Button color="success" onClick={this.toggleSuccess}>Do Something</Button>{' '}
<Button color="secondary" onClick={this.toggleSuccess}>Cancel</Button>
</ModalFooter>
</Modal>
<Button color="warning" onClick={this.toggleWarning} className="mr-1">Warning modal</Button>
<Modal isOpen={this.state.warning} toggle={this.toggleWarning}
className={'modal-warning ' + this.props.className}>
<ModalHeader toggle={this.toggleWarning}>Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</ModalBody>
<ModalFooter>
<Button color="warning" onClick={this.toggleWarning}>Do Something</Button>{' '}
<Button color="secondary" onClick={this.toggleWarning}>Cancel</Button>
</ModalFooter>
</Modal>
<Button color="danger" onClick={this.toggleDanger} className="mr-1">Danger modal</Button>
<Modal isOpen={this.state.danger} toggle={this.toggleDanger}
className={'modal-danger ' + this.props.className}>
<ModalHeader toggle={this.toggleDanger}>Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</ModalBody>
<ModalFooter>
<Button color="danger" onClick={this.toggleDanger}>Do Something</Button>{' '}
<Button color="secondary" onClick={this.toggleDanger}>Cancel</Button>
</ModalFooter>
</Modal>
<Button color="info" onClick={this.toggleInfo} className="mr-1">Info modal</Button>
<Modal isOpen={this.state.info} toggle={this.toggleInfo}
className={'modal-info ' + this.props.className}>
<ModalHeader toggle={this.toggleInfo}>Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.toggleInfo}>Do Something</Button>{' '}
<Button color="secondary" onClick={this.toggleInfo}>Cancel</Button>
</ModalFooter>
</Modal>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
}
Example #22
| Source File: ProblemsPage.js From Frontend with Apache License 2.0 | 4 votes |
|
function ProblemsPage({info,queryStr}) {
console.log("qs", queryStr);
const queryDefault = queryString.parse(queryStr, {parseBooleans: true});
console.log(queryDefault);
const creds= JSON.parse(localStorage.getItem("creds"));
const [error, setErrors] = useState(false);
const [show, setShow] = useState(true);
const [problems, setProblems] = useState([]);
const [playlists, setPlaylists] = useState([]);
const [modal, setModal] = useState(false);
const[modalOpenDiffi,setModalOpenDiffi]=useState(false);
const[modalOpenPlat,setModalOpenPlat]=useState(false);
const[modalOpenDiffiRange,setModalOpenDiffiRange]=useState(false);
const [openTags,setOpenTags]=useState(false);
const [searchText, setSearchText] = useState();
const [tagText, setTagText] = useState();
const [problemid, setProblemListId] = useState();
const [problemplatform, setProblemListPlatform] = useState();
const platforms=[
"Codechef",
"Codeforces",
"Atcoder",
"Spoj",
"UVA"
];
const difficultyLevels=[
"Beginner",
"Easy" ,
"Medium",
"Hard",
"SuperHard",
"Challenging"
]
const defaultTags = ["string","dp","math","combinatorics", "Number Theory", "interactive","Binary Search","greedy","graph"];
const [rangeLeft,setRangeLeft]=useState(queryDefault.range_l ? queryDefault.range_l : 0);
const [rangeRight,setRangeRight]=useState(queryDefault.range_r ? queryDefault.range_r : 0);
const [displayDiff, setDisplayDiff] = useState(
queryDefault.difficulty ? { values: [
queryDefault.difficulty.includes("B"), queryDefault.difficulty.includes("E"),queryDefault.difficulty.includes("M"),queryDefault.difficulty.includes("H"),queryDefault.difficulty.includes("S"),queryDefault.difficulty.includes("C")
] } : {values:[false,false,false,false,false,false]}
)
const [displayPlat, setDisplayPlat] = useState(
queryDefault.platform ? {
values:[
queryDefault.platform.includes("C"),queryDefault.platform.includes("F"),queryDefault.platform.includes("A"),queryDefault.platform.includes("S"),queryDefault.platform.includes("U")
// false,false,false,false,false
]} : {values:[false,false,false,false,false]}
)
const [displayTags, setDisplayTags] = useState(
queryDefault.tags ? {
values:[
queryDefault.tags.includes("string"),queryDefault.tags.includes("dp"),queryDefault.tags.includes("math"),queryDefault.tags.includes("combinatorics"),queryDefault.tags.includes("Number Theory"),queryDefault.tags.includes("interactive"),queryDefault.tags.includes("Binary Search"),queryDefault.tags.includes("greedy"),queryDefault.tags.includes("graph")
]} : {
values:[
false,false,false,false,false,false,false,false,false
]}
)
const platformFilters = [
'C', 'F', 'A', 'S', 'U'
];
const difficultyFilters = [
'B','E','M','H','S','C'
]
const [queries,setQueries]=useState({
difficulty:[],
platform:[],
range_l:1200,
range_r:5000,
tags:[]
});
const [mentorr,setMentorr] = useState(queryDefault.mentor ? queryDefault.mentor : false);
const [mentorrCount,setMentorrCount] = useState(queryDefault.mentor ? true : false);
const[platformQueries, setPlatformQueries]=useState(queryDefault.platform ? queryDefault.platform.split(',') : []);
const[difficultyQueries, setDifficultyQueries]=useState(queryDefault.difficulty ? queryDefault.difficulty.split(',') : []);
const[tagQueries, setTagQueries]=useState(queryDefault.tags ? queryDefault.tags.split(','):[]);
// var difficultyQueries=[];
// var TagQueries=[];
const [diffRange, setDiffRange] = useState( queryDefault.range_l && queryDefault.range_r ? [queryDefault.range_l, queryDefault.range_r] : queryDefault.range_l ? [queryDefault.range_l,3200] : queryDefault.range_r ? [0,queryDefault.range_r] : [100,3200]);
const [sliderChange,setSliderChange] = useState(queryDefault.range_l || queryDefault.range_r ? true:false);
const handleSlider = (event, newValue) => {
setSliderChange(true);
setDiffRange(newValue);
};
const setLeftRangeQuery = (event) => {
event.preventDefault();
setRangeLeft(event.target.value);
}
const setRightRangeQuery = (event) => {
event.preventDefault();
setRangeRight(event.target.value);
}
// const toggle = (e) => {
// e.preventDefault();
// setModal(!modal);
// }
function toggle2(event) {
event.preventDefault();
setModal(!modal);
// console.log(id, platform);
if(!modal)
{
// console.log("ppppppp");
getPlaylists();
// fetchData();
}
// console.log(playlists);
};
const changePlatformFilter = (event,lev) => {
// console.log(queryString.stringifyUrl({url: 'https://api.codedigger.tech/problems/', query: {platform: 'F,A',difficulty:'B,E'}}));
// console.log(queryString.parseUrl('https://foo.bar?foo=b,l&g=k'))
const res=event.target.checked;
// console.log(lev);
// console.log(res);
const platformAdd=platformFilters[lev];
if(res)
{
// queries.platform.push(platformFilters[lev]);
// setQueries({platform:[...queries.platforms, platformFilters[lev]]});
// console.log(platformAdd);
// platformQueries.concat([platformAdd]);
// var temp=platformQueries.concat([platformAdd]);
// setPlatformQueries({platformQueries:temp});
setPlatformQueries([...platformQueries,[platformAdd]]);
// setDisplayPlat(
// result: { // object that we want to update
// ...prevState.result, // keep all other key-value pairs
// platformAdd: true // update the value of specific key
// }
// )
setDisplayPlat(update(displayPlat, {
values: {
[lev]: {
$set: true
}
}
}));
}
else
{
// setDisplayPlat(prevState => ({
// result: { // object that we want to update
// ...prevState.result, // keep all other key-value pairs
// platformAdd: false // update the value of specific key
// }
// }))
const newList = platformQueries.filter((item) => item != platformFilters[lev]);
setPlatformQueries(newList);
setDisplayPlat(update(displayPlat, {
values: {
[lev]: {
$set: false
}
}
}));
}
// console.log(JSON.stringify(queries.platform).replace(/"/g,'').replace(/]|[[]/g, ''));
}
const tagTextAdd = (event) => {
setTagQueries([...tagQueries, [tagText]]);
setTagText("");
}
function addProblem(slug){
if(!creds){
return;
}
let p;
let platform = problemplatform;
if(platform === "Codeforces"){
p = "F";
}else if(platform === "Codechef"){
p = "C";
}else if(platform === "Atcoder"){
p = "A";
}else if(platform === "UVA"){
p = "U";
}else if(platform === "SPOJ"){
p = "S";
}
// console.log(slug, prob_id, platform)
const result = fetch (`https://api.codedigger.tech/lists/userlist/add`,{
method:"POST",
headers:{
"Content-type":"application/json",
"Authorization":`Bearer ${creds.access}`
},
body:JSON.stringify({
"prob_id": problemid,
"slug": slug,
"platform": p
})
}).then(data => data.json())
.then(data => data.status === "FAILED"? alert("Problem has already been added to the problem list!"):alert("Problem is successfully Added to problem list."))
}
const changeTagFilter = (event,lev) => {
// console.log(difficultyFilters[lev]);
const res=event.target.checked;
// console.log(lev + res);
const tagAdd=defaultTags[lev];
if(res)
{
// console.log(queries.difficulty.push(difficultyFilters[lev]));
setTagQueries([...tagQueries, [tagAdd]]);
setDisplayTags(update(displayTags, {
values: {
[lev]: {
$set: true
}
}
}));
}
else
{
// var y=-1;
// queries.difficulty.map((plat,i) => {
// if(plat==difficultyFilters[lev])
// {
// y=i;
// }
// });
// queries.difficulty.splice(y,1);
const newList = tagQueries.filter((item) => item != defaultTags[lev]);
setTagQueries(newList);
// console.log(newList);
// console.log(lev);
// console.log(defaultTags[lev]);
setDisplayTags(update(displayTags, {
values: {
[lev]: {
$set: false
}
}
}));
}
// console.log(JSON.stringify(queries.difficulty).replace(/"/g,'').replace(/]|[[]/g, ''));
}
const changeDifficultyFilter = (event,lev) => {
// console.log(difficultyFilters[lev]);
const res=event.target.checked;
// console.log(lev + res);
const difficultyAdd=difficultyFilters[lev];
if(res)
{
// console.log(queries.difficulty.push(difficultyFilters[lev]));
setDifficultyQueries([...difficultyQueries, [difficultyAdd]]);
setDisplayDiff(update(displayDiff, {
values: {
[lev]: {
$set: true
}
}
}));
}
else
{
// var y=-1;
// queries.difficulty.map((plat,i) => {
// if(plat==difficultyFilters[lev])
// {
// y=i;
// }
// });
// queries.difficulty.splice(y,1);
const newList = difficultyQueries.filter((item) => item != difficultyFilters[lev]);
setDifficultyQueries(newList);
setDisplayDiff(update(displayDiff, {
values: {
[lev]: {
$set: false
}
}
}));
}
// console.log(JSON.stringify(queries.difficulty).replace(/"/g,'').replace(/]|[[]/g, ''));
}
const mentorrChange = (e) => {
setMentorr(!mentorr);
setMentorrCount(true);
}
const handleSubmit = (e) => {
e.preventDefault();
// console.log(queries);
// console.log(platformQueries);
// console.log(difficultyQueries);
// console.log(displayPlat);
// console.log(tagQueries);
if(!sliderChange)
{
if(mentorrCount)
{
const queryy = {
difficulty:JSON.stringify(difficultyQueries).replace(/"/g,'').replace(/]|[[]/g, ''),
platform:JSON.stringify(platformQueries).replace(/"/g,'').replace(/]|[[]/g, ''),
tags:JSON.stringify(tagQueries).replace(/"/g,'').replace(/]|[[]/g, ''),
mentor:JSON.stringify(mentorr)
}
const finalQ = queryString.stringify(queryy,{skipEmptyString:true});
const urlTo = `/problems/?${finalQ}`;
// console.log(urlTo);
window.location.href=urlTo;
}
else
{
const queryy = {
difficulty:JSON.stringify(difficultyQueries).replace(/"/g,'').replace(/]|[[]/g, ''),
platform:JSON.stringify(platformQueries).replace(/"/g,'').replace(/]|[[]/g, ''),
tags:JSON.stringify(tagQueries).replace(/"/g,'').replace(/]|[[]/g, '')
}
const finalQ = queryString.stringify(queryy,{skipEmptyString:true});
const urlTo = `/problems/?${finalQ}`;
// console.log(urlTo);
window.location.href=urlTo;
}
}
else
{
if(mentorrCount)
{
const queryy = {
difficulty:JSON.stringify(difficultyQueries).replace(/"/g,'').replace(/]|[[]/g, ''),
platform:JSON.stringify(platformQueries).replace(/"/g,'').replace(/]|[[]/g, ''),
tags:JSON.stringify(tagQueries).replace(/"/g,'').replace(/]|[[]/g, ''),
range_l:JSON.stringify(diffRange[0]).replace(/"/g,'').replace(/]|[[]/g, ''),
range_r:JSON.stringify(diffRange[1]).replace(/"/g,'').replace(/]|[[]/g, ''),
mentor:JSON.stringify(mentorr)
}
const finalQ = queryString.stringify(queryy,{skipEmptyString:true});
const urlTo = `/problems/?${finalQ}`;
// console.log(urlTo);
window.location.href=urlTo;
}
else
{
const queryy = {
difficulty:JSON.stringify(difficultyQueries).replace(/"/g,'').replace(/]|[[]/g, ''),
platform:JSON.stringify(platformQueries).replace(/"/g,'').replace(/]|[[]/g, ''),
tags:JSON.stringify(tagQueries).replace(/"/g,'').replace(/]|[[]/g, ''),
range_l:JSON.stringify(diffRange[0]).replace(/"/g,'').replace(/]|[[]/g, ''),
range_r:JSON.stringify(diffRange[1]).replace(/"/g,'').replace(/]|[[]/g, '')
}
const finalQ = queryString.stringify(queryy,{skipEmptyString:true});
const urlTo = `/problems/?${finalQ}`;
// console.log(urlTo);
window.location.href=urlTo;
}
}
}
const handleSearch = (e) => {
e.preventDefault();
const searchUrl = `/problems/?search=${searchText}`;
window.location.href=searchUrl;
}
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width="0";
}
async function getPlaylists()
{
if(!creds){
alert("Please Login to Add Problems to Problem List!")
return;
}
const res = await fetch(`https://api.codedigger.tech/lists/userlist/`, {
method:"GET",
headers:{
"Content-Type":"application/json",
"Authorization":`Bearer ${creds.access}`
}
});
res
.json()
.then(res => setPlaylists(res))
.catch(error => setErrors(true));
}
useEffect(() => {
if(creds)
{
getProblemsWithCreds(queryStr,creds.access)
.then(res => setProblems(res))
.then(show => setShow(false))
.catch(error => setErrors(true));
}
else
{
getProblems(queryStr)
.then(res => setProblems(res))
.then(show => setShow(false))
.catch(error => setErrors(true));
}
},[])
function toggle(){
setModalOpenDiffi(false)
}
return (
show==true ? <><Loading/></>:
<>
<Navbar />
<h3
style={{
textAlign: 'center',
marginBottom: '65px',
marginTop: '100px'
}}
>Problems</h3>
<Button style={{position:'absolute', bottom:'77vh', right:'6vw'}} onClick={openNav}>Filter</Button>
<Button style={{position:'absolute', bottom:'77vh', right:'12vw'}} onClick={() => window.location.reload()}>Refresh</Button>
<div id="mySidenav" className="sidenav">
<Button className="filterHeading" onClick={(e)=>setModalOpenDiffi(!modalOpenDiffi)}>Difficulty</Button>
<Modal toggle={(e)=>{setModalOpenDiffi(false)}}
isOpen={modalOpenDiffi}><ModalBody>
<h2 style={{marginBottom:'2rem'}}>Difficulty</h2>
<Form style={{marginBottom:'1rem'}}>
<div key="inline-checkbox">
{difficultyLevels.map((lev,i) => {
if(displayDiff.values[i])
{
return(
<Form.Check checked={true} onChange={(event) => changeDifficultyFilter(event,i)} inline label={lev} type="checkbox" id={`inline-${lev}-${i}`} />
)
}
else
{
return(
<Form.Check onChange={(event) => changeDifficultyFilter(event,i)} inline label={lev} type="checkbox" id={`inline-${lev}-${i}`} />
)
}
})}
</div></Form>
<Button onClick={(e)=>setModalOpenDiffi(false)}>Set</Button>
</ModalBody></Modal>
<br></br><br></br>
<Button className="filterHeading" onClick={(e)=>setOpenTags(!openTags)}>Tags</Button>
<Modal toggle={(e)=>{setOpenTags(false)}} isOpen={openTags}><ModalBody>
<h2 style={{marginBottom:'2rem'}}>Tags</h2>
<Form style={{marginBottom:'1rem'}}>
<div key="inline-checkbox">
{defaultTags.map((lev,i) => {
if(displayTags.values[i])
{
return(
<Form.Check checked={true} onChange={(event) => changeTagFilter(event,i)} inline label={lev} type="checkbox" id={`inline-${lev}-${i}`} />
)
}
else
{
return(
<Form.Check onChange={(event) => changeTagFilter(event,i)} inline label={lev} type="checkbox" id={`inline-${lev}-${i}`} />
)
}
})}
</div>
<div>
<Form.Group as={Row} onSubmit={e => { e.preventDefault(); }} style={{marginTop:'1rem'}}>
<Form.Label column sm="3" style={{maxWidth:'18%'}}>
Your Tag
</Form.Label>
<Col sm="8">
<Form.Control onKeyPress={event => {
if (event.key === "Enter") {
event.preventDefault();
tagTextAdd();
}
}} value={tagText} onChange={(e)=>setTagText(e.target.value)} type="text" placeholder="Type your Tag" />
</Col>
<Col sm="1" style={{paddingLeft:'0'}}>
<Button onClick={tagTextAdd}>Add</Button>
</Col>
</Form.Group>
</div>
</Form>
<Row style={{marginBottom:'2rem'}}>
<Col sm='3'>Your Tags</Col>
<Col sm='9'>
<div style={{display:'flex', flexWrap:'wrap'}}>
{tagQueries.map((quer) => {
return(
<>
<div
style={{
padding:'0.4rem',
color:'black',
backgroundColor:'powderblue',
borderRadius:'4px',
margin:"0.3rem"
}}
>
{quer}
</div></>
)
})}
</div>
</Col>
</Row>
<Button onClick={(e)=>setOpenTags(false)}>Set</Button>
</ModalBody> </Modal> <br></br><br></br>
<Button className="filterHeading" onClick={(e)=>setModalOpenPlat(!modalOpenPlat)}>Platforms</Button>
<Modal toggle={(e)=>{setModalOpenPlat(false)}} isOpen={modalOpenPlat}><ModalBody>
<h2 style={{marginBottom:'2rem'}}>Platforms</h2>
<Form style={{marginBottom:'1rem'}}>
<div key="inline-checkbox">
{platforms.map((lev,i) => {
// console.log(`${displayPlat.values[i]}`)
if(displayPlat.values[i])
{
return(
<Form.Check checked={true} onChange={(event) => changePlatformFilter(event,i)} inline label={lev} type="checkbox" id={`inline-${lev}-${i}`} />
)
}
else
{
return(
<Form.Check checked={false} onChange={(event) => changePlatformFilter(event,i)} inline label={lev} type="checkbox" id={`inline-${lev}-${i}`} />
)
}
})}
</div>
</Form>
<Button onClick={(e)=>setModalOpenPlat(false)}>Set</Button>
</ModalBody></Modal>
<br></br><br></br>
<Button className="filterHeading" onClick={(e)=>setModalOpenDiffiRange(!modalOpenDiffiRange)}>Difficulty Range</Button>
<Modal toggle={(e)=>{setModalOpenDiffiRange(false)}} isOpen={modalOpenDiffiRange}><ModalBody>
{/* <Form inline>
<label style={{marginRight:'20px',padding:'4px'}}>
Range Left
<input style={{width:'100px',height:'32px',marginLeft:'11px'}} onChange={setLeftRangeQuery} type="number"/>
</label>
<br></br>
<label style={{padding:'4px'}}>
Range Right
<input style={{width:'100px',height:'32px',marginLeft:'11px'}} onChange={setRightRangeQuery} type="number"/>
</label>
</Form> */}
<div style={{width:'300'}}>
<Typography id="range-slider" gutterBottom>
Set your Difficulty Range
</Typography>
<Slider
value={diffRange}
min={400}
max={6000}
onChange={handleSlider}
valueLabelDisplay="auto"
aria-labelledby="range-slider"
// getAriaValueText={diffRange}
/>
<Typography>
<strong>Your Range :</strong>
<span>{diffRange[0]}</span>
<span> - </span>
<span>{diffRange[1]}</span>
</Typography>
</div>
<Button onClick={(e)=>setModalOpenDiffiRange(false)}>Set</Button>
</ModalBody> </Modal>
<br></br> <br></br>
<div className="filterHeading" style={{
marginTop:'1rem',
fontSize:'1.2rem',
marginBottom:'1rem'
}}>
Solved By Mentor:
<AntSwitch
checked={mentorr}
onChange={mentorrChange}
/>
{/* <Switch
// checked={state.checkedB}
// onChange={handleChange}
color="default"
name="checkedB"
inputProps={{ 'aria-label': 'checkbox with default color' }}
/> */}
</div>
<Button style={{padding:'6px',marginLeft:'12px',backgroundColor:'forestgreen'}}onClick={handleSubmit}>Apply</Button>
<Button style={{padding:'6px',marginLeft:'5px',backgroundColor:'firebrick'}} onClick={closeNav}>Close</Button>
</div>
{/** */}
{!problems.result? (<Loading />) :
(
<>
<div onClick={closeNav} style={{
margin: '0px',
padding: '0px',
marginLeft: '100px',
marginRight: '100px',
paddingBottom:'100px'
}}>
<div className="row" style={{marginBottom:'3rem'}}>
<div class="input-group" style={{justifyContent:'center'}}>
<div class="form-outline">
<input onChange={(e)=>setSearchText(e.target.value)} type="search" id="form1" class="form-control" style={{height:'3rem', width:'26rem'}}/>
</div>
<button type="button" onClick={handleSearch} class="btn btn-primary">
Search
</button>
</div>
</div>
<div>
{creds? <>
<Modal isOpen={modal} toggle={creds.access? toggle2:null}>
<ModalHeader toggle={toggle2}>Add to Problem List</ModalHeader>
<ModalBody>
</ModalBody>
<ul>
{playlists.map((list, i) => {
return(
<>
<li style={{
marginBottom:'10px'
}}>
<span style={{color:"white", fontSize:"19px"}}>{list.name}</span>
<Button
onClick={() => {addProblem(list.slug)}}
color="success"
style={{padding:"5px 7px",
position:"relative",
float:"right",
right:"40px",
bottom:"0",
borderRadius:"10%",
marginBottom: '3px'
}}>
Add
</Button>
</li>
</>
)
})}
</ul>
<ModalFooter>
<Button color="secondary" onClick={toggle2}>Close</Button>
</ModalFooter>
</Modal></> : <></>}
{/* {console.log(problems.result)} */}
<div className="row">
<div className="col-md-6" >
{problems.result.slice(0,9).map((playlist, i) => {
return(
<>
<div className="col-md-12" style={{
}} style={{marginBottom:'1rem'}}>
<AccordionCom problem={playlist}/>
<span onClick={() => {
setModal(!modal);
if(!modal){
getPlaylists();
}
setProblemListId(playlist.prob_id);
setProblemListPlatform(playlist.platform);
}} ><FontAwesomeIcon style={{cursor:"pointer", position: 'absolute', right: '30%', height: '30px', fontSize: '20px', color: 'black', zIndex: '100', top: "20px" }} icon={faFolderPlus} /></span>
</div>
</>
)
})}
</div>
<div className="col-md-6">
{problems.result.slice(10,19).map((playlist, i) => {
return(
<>
<div className="col-md-12" style={{
}} style={{marginBottom:'1rem'}}>
<AccordionCom problem={playlist}/>
<span onClick={() => {
setModal(!modal);
if(!modal){
getPlaylists();
}
setProblemListId(playlist.prob_id);
setProblemListPlatform(playlist.platform);
}} ><FontAwesomeIcon style={{cursor:"pointer", position: 'absolute', right: '30%', height: '30px', fontSize: '20px', color: 'black', zIndex: '100', top: "20px" }} icon={faFolderPlus} /></span>
</div>
</>
)
})}
</div></div>
</div>
</div>
<FooterSmall/>
</>
)
}
</>
)
}
Example #23
| Source File: index.js From DMS_React with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const {onSaveContact, onContactClose, open, contact} = this.props;
const {id, name, email, phone, designation, selected, starred, frequently} = this.state;
let {thumb} = this.state;
if (!thumb) {
thumb = "https://via.placeholder.com/225x225"; //1
}
return (
<Modal className="modal-box" toggle={onContactClose} isOpen={open} data-test="container-component"> {//2
}
<ModalHeader className="modal-box-header bg-primary text-white">
{contact.name === '' ? <IntlMessages id="contact.addContact" data-test="intlAdd-component"/> :
<IntlMessages id="contact.saveContact" data-test="intlSave-component"/>} {//3}
}
<IconButton className="text-white"
onClick={onContactClose}
data-test="iconbutton-component"
> {//4
}
<CloseIcon/>
</IconButton>
</ModalHeader>
<div className="modal-box-content">
<div className="row no-gutters">
<div className="col-lg-3 text-center text-lg-right order-lg-2">
<img className="ml-lg-3 mb-4 mb-lg-0 avatar size-120" src={thumb} alt={thumb}/> {//5
}
</div>
<div className="col-lg-9 d-flex flex-column order-lg-1">
<TextField
required
id="required"
label={<IntlMessages id="appModule.name"/>}
onChange={(event) => this.setState({name: event.target.value})}
defaultValue={name}
margin="none"
data-test="textfield1-component"/>{//6
}
<TextField
id="required"
label={<IntlMessages id="appModule.email"/>}
onChange={(event) => this.setState({email: event.target.value})}
value={email}
data-test="textfield2-component"
margin="normal"/>{//7
}}
<TextField
id="required"
label={<IntlMessages id="appModule.phone"/>}
onChange={(event) => this.setState({phone: event.target.value})}
value={phone}
data-test="textfield3-component"
margin="normal"
/>
{//8
}
<TextField
id="required"
label={<IntlMessages id="appModule.designation"/>}
onChange={(event) => this.setState({designation: event.target.value})}
value={designation}
multiline
rowsMax="4"
data-test="textfield4-component"
margin="normal"/>
{//9
}
</div>
</div>
</div>
<div className="modal-box-footer d-flex flex-row">
<Button disabled={name === ''}
data-test="button-component"
variant="contained"
color="primary"
onClick={() => {
onContactClose();
onSaveContact(
{
'id': id,
'name': name,
'thumb': thumb,
'email': email,
'phone': phone,
'designation': designation,
'selected': selected,
'starred': starred,
'frequently': frequently
});
this.setState({
'id': id + 1,
'name': '',
'thumb': '',
'email': '',
'phone': '',
'designation': '',
})
{//10
}
}}><IntlMessages id="contact.saveContact"/></Button>
</div>
</Modal>
);
}
Example #24
| Source File: MainCard.js From Frontend with Apache License 2.0 | 4 votes |
|
MainCard = (props) => {
const creds = JSON.parse(localStorage.getItem('creds'))
const uu = props.handle
const [modal, setModal] = useState(false)
const [playlists, setPlaylists] = useState([])
const [error, setErrors] = useState(false)
const [problemAdd, setProblemAdd] = useState({})
useEffect(() => {
// console.log(modal);
})
async function getPlaylists() {
if (!creds) {
alert('Please Login to Add Problems to Playlist')
return
}
const res = await fetch(`https://api.codedigger.tech/lists/userlist/`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${creds.access}`,
},
})
res
.json()
.then((res) => setPlaylists(res))
.catch((error) => setErrors(true))
}
function toggle(event) {
event.preventDefault()
setModal(!modal)
// console.log(modal);
if (!modal) {
// console.log("ppppppp");
getPlaylists()
// fetchData();
}
// console.log(playlists);
}
function addProblem(slug, prob_id, platform) {
if (!creds) {
return
}
let p
if (platform === 'Codeforces') {
p = 'F'
} else if (platform === 'Codechef') {
p = 'C'
} else if (platform === 'Atcoder') {
p = 'A'
} else if (platform === 'UVA') {
p = 'U'
} else if (platform === 'SPOJ') {
p = 'S'
}
// console.log(slug, prob_id, platform)
const result = fetch(`https://api.codedigger.tech/lists/userlist/add`, {
method: 'POST',
headers: {
'Content-type': 'application/json',
Authorization: `Bearer ${creds.access}`,
},
body: JSON.stringify({
prob_id: prob_id,
slug: slug,
platform: p,
}),
})
.then((data) => data.json())
.then((data) =>
data.status === 'FAILED'
? alert('Problem has already been added!')
: alert('Problem is successfully Added to problem list.')
)
}
// console.log(props);
if (props.type === 'ladder') {
if (props.solvedBtn === props.count) {
return (
<>
<div
className={
props.last ? 'cardLast card unsolvedCard' : 'card unsolvedCard'
}
>
<h3 className="title">{props.ProblemData.name}</h3>
<span>
<OverlayTrigger placement="top" overlay={renderTooltip1}>
<span onClick={toggle}>
<FontAwesomeIcon
style={{ cursor: 'pointer' }}
icon={faFolderPlus}
/>
</span>
</OverlayTrigger>
</span>
<Modal isOpen={modal} toggle={toggle}>
<ModalHeader toggle={toggle}>Add to Problem List</ModalHeader>
<ModalBody></ModalBody>
<ul>
{playlists.map((list) => {
return (
<>
<li style={{ marginBottom: '10px' }}>
<span style={{ color: 'white', fontSize: '19px' }}>
{list.name}
</span>
<Button
onClick={() => {
addProblem(
list.slug,
props.ProblemData.prob_id,
props.ProblemData.platform
)
}}
color="success"
style={{
padding: '5px 7px',
position: 'relative',
float: 'right',
right: '20px',
bottom: '0',
borderRadius: '10%',
}}
>
Add
</Button>
</li>
</>
)
})}
</ul>
<ModalFooter>
<Button color="secondary" onClick={toggle}>
Close
</Button>
</ModalFooter>
</Modal>
<h6 className="ml-3 pl-1" style={{ marginTop: '4rem' }}>
Platform: {props.ProblemData.platform}
</h6>
<div className="bar">
<div className="emptybar" />
<div
className={
props.ProblemData.status === 'solved'
? 'filledbar'
: 'exapmplebar'
}
></div>
</div>
<div className={props.last ? 'circleLast' : 'circle'}>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle className="stroke" cx="60" cy="60" r="50" />
</svg>
</div>
<div className="container_card">
<Button
target="_blank"
className="buttondisp"
href={props.ProblemData.url}
>
Solve
</Button>
</div>
</div>
</>
)
} else {
return (
<>
<div className={props.last ? 'cardLast card' : 'card'}>
<h3
className={
props.count > props.solvedBtn && props.solvedBtn != -1
? 'title_hide'
: 'title'
}
>
{props.ProblemData.name}
</h3>
{props.count > props.solvedBtn && props.solvedBtn != -1 ? (
<></>
) : (
<span>
<OverlayTrigger placement="top" overlay={renderTooltip1}>
<span onClick={toggle}>
<FontAwesomeIcon
style={{ cursor: 'pointer' }}
icon={faFolderPlus}
/>
</span>
</OverlayTrigger>
</span>
)}
{/* {console.log(creds.access)} */}
<Modal isOpen={modal} toggle={creds.access ? toggle : null}>
<ModalHeader toggle={toggle}>Add to Problem List</ModalHeader>
<ModalBody></ModalBody>
<ul>
{playlists.map((list) => {
return (
<>
<li
style={{
marginBottom: '10px',
}}
>
<span style={{ color: 'white', fontSize: '19px' }}>
{list.name}
</span>
<Button
onClick={() => {
addProblem(
list.slug,
props.ProblemData.prob_id,
props.ProblemData.platform
)
}}
color="success"
style={{
padding: '5px 7px',
position: 'relative',
float: 'right',
right: '20px',
bottom: '0',
borderRadius: '10%',
marginBottom: '3px',
}}
>
Add
</Button>
</li>
</>
)
})}
</ul>
<ModalFooter>
<Button color="secondary" onClick={toggle}>
Close
</Button>
</ModalFooter>
</Modal>
<h6
className={
props.count > props.solvedBtn && props.solvedBtn != -1
? 'title_hide'
: 'mt-5 ml-3 pl-1'
}
>
Platform: {props.ProblemData.platform}
</h6>
<h3
className={
props.count > props.solvedBtn && props.solvedBtn != -1
? 'title_locked'
: 'title_hide'
}
>
?
</h3>
<div className="bar">
<div className="emptybar" />
<div
className={
props.ProblemData.status === 'solved' ? 'filledbar' : ''
}
></div>
</div>
<div className={props.last ? 'circleLast' : 'circle'}>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle className="stroke" cx="60" cy="60" r="50" />
</svg>
</div>
<div className="container_card">
<a
target="_blank"
href={
props.count > props.solvedBtn && props.solvedBtn != -1
? ''
: props.ProblemData.url
}
>
<div
className={
props.count > props.solvedBtn && props.solvedBtn != -1
? 'lock'
: 'check'
}
></div>
</a>
</div>
</div>
</>
)
}
} else {
if (props.solvedBtn === props.count) {
return (
<>
<div
className={
props.last ? 'cardLast card unsolvedCard' : 'card unsolvedCard'
}
>
<h3 className="title">{props.ProblemData.name}</h3>
<span>
<OverlayTrigger placement="top" overlay={renderTooltip1}>
<span onClick={toggle}>
<FontAwesomeIcon
style={{ cursor: 'pointer' }}
icon={faFolderPlus}
/>
</span>
</OverlayTrigger>
</span>
<Modal isOpen={modal} toggle={toggle}>
<ModalHeader toggle={toggle}>Add to Problem List</ModalHeader>
<ModalBody></ModalBody>
<ul>
{playlists.map((list) => {
return (
<>
<li
style={{
marginBottom: '10px',
}}
>
<span style={{ color: 'white', fontSize: '19px' }}>
{list.name}
</span>
<Button
onClick={() => {
addProblem(
list.slug,
props.ProblemData.prob_id,
props.ProblemData.platform
)
}}
color="success"
style={{
padding: '5px 7px',
position: 'relative',
float: 'right',
right: '20px',
bottom: '0',
borderRadius: '10%',
}}
>
Add
</Button>
</li>
</>
)
})}
</ul>
<ModalFooter>
<Button color="secondary" onClick={toggle}>
Close
</Button>
</ModalFooter>
</Modal>
<h6 className="mt-5 ml-3 pl-1">
Platform: {props.ProblemData.platform}
</h6>
<div className="bar">
<div className="emptybar" />
<div
className={
props.ProblemData.status === 'solved'
? 'filledbar'
: 'exapmplebar'
}
></div>
</div>
<div className={props.last ? 'circleLast' : 'circle'}>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle className="stroke" cx="60" cy="60" r="50" />
</svg>
</div>
<div className="container_card">
<Button
target="_blank"
className="buttondisp"
href={props.ProblemData.url}
>
Solve
</Button>
</div>
</div>
</>
)
} else {
if (props.ProblemData.solved === false) {
return (
<>
<div className={props.last ? 'cardLast card' : 'card'}>
<h3 className="title">{props.ProblemData.name}</h3>
<span>
<OverlayTrigger placement="top" overlay={renderTooltip1}>
<span onClick={toggle}>
<FontAwesomeIcon
style={{ cursor: 'pointer' }}
icon={faFolderPlus}
/>
</span>
</OverlayTrigger>
</span>
<Modal isOpen={modal} toggle={toggle}>
<ModalHeader toggle={toggle}>Add to Problem List</ModalHeader>
<ModalBody></ModalBody>
<ul>
{playlists.map((list) => {
return (
<>
<li
style={{
marginBottom: '10px',
}}
>
<span style={{ color: 'white', fontSize: '19px' }}>
{list.name}
</span>
<Button
onClick={() => {
addProblem(
list.slug,
props.ProblemData.prob_id,
props.ProblemData.platform
)
}}
color="success"
style={{
padding: '5px 7px',
position: 'relative',
float: 'right',
right: '20px',
bottom: '0',
borderRadius: '10%',
}}
>
Add
</Button>
</li>
</>
)
})}
</ul>
<ModalFooter>
<Button color="secondary" onClick={toggle}>
Close
</Button>
</ModalFooter>
</Modal>
<h6 className="mt-5 ml-3 pl-1">
Platform: {props.ProblemData.platform}
</h6>
<div className="bar">
<div className="emptybar" />
<div className="exapmplebar"></div>
</div>
<div className={props.last ? 'circleLast' : 'circle'}>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle className="stroke" cx="60" cy="60" r="50" />
</svg>
</div>
<div className="container_card">
<Button
target="_blank"
className="buttondisp"
href={props.ProblemData.url}
>
Solve
</Button>
</div>
</div>
</>
)
} else {
return (
<>
<div className={props.last ? 'cardLast card' : 'card'}>
<h3 className="title">{props.ProblemData.name}</h3>
<span>
<OverlayTrigger placement="top" overlay={renderTooltip1}>
<span onClick={toggle}>
<FontAwesomeIcon
style={{ cursor: 'pointer' }}
icon={faFolderPlus}
/>
</span>
</OverlayTrigger>
</span>
<Modal isOpen={modal} toggle={toggle}>
<ModalHeader toggle={toggle}>Add to Problem List</ModalHeader>
<ModalBody></ModalBody>
<ul>
{playlists.map((list) => {
return (
<>
<li
style={{
marginBottom: '10px',
}}
>
<span style={{ color: 'white', fontSize: '19px' }}>
{list.name}
</span>
<Button
onClick={() => {
addProblem(
list.slug,
props.ProblemData.prob_id,
props.ProblemData.platform
)
}}
color="success"
style={{
padding: '5px 7px',
position: 'relative',
float: 'right',
right: '20px',
bottom: '0',
borderRadius: '10%',
}}
>
Add
</Button>
</li>
</>
)
})}
</ul>
<ModalFooter>
<Button color="secondary" onClick={toggle}>
Close
</Button>
</ModalFooter>
</Modal>
<h6 className="mt-5 ml-3 pl-1">
Platform: {props.ProblemData.platform}
</h6>
<h3 className="title_hide">?</h3>
<div className="bar">
<div className="emptybar" />
<div className="filledbar"></div>
</div>
<div className={props.last ? 'circleLast' : 'circle'}>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle className="stroke" cx="60" cy="60" r="50" />
</svg>
</div>
<div className="container_card">
<a target="_blank" href={props.ProblemData.url}>
<div className="check"></div>
</a>
</div>
</div>
</>
)
}
}
}
}
Example #25
| Source File: index.js From DMS_React with GNU Affero General Public License v3.0 | 4 votes |
|
WriteBox = (props) => {
const [commentText, setCommentText] = useState('');
const [previewVisible, setPreviewVisible] = useState(false);
const [previewImage, setPreviewImage] = useState('');
const [fileList, setFileList] = useState([]);
const [isOpen, setIsOpen] = useState(false);
const handleCancel = () => {
setPreviewVisible(false)
};
const onDrop = useCallback(acceptedFiles => {
setFileList(acceptedFiles.map(file => URL.createObjectURL(file)));
}, []);
const handleClickImage = () => {
setIsOpen(!isOpen);
};
const handleAddPost = () => {
console.log("send image list", fileList)
props.addPost(commentText, fileList);
setCommentText('');
setPreviewVisible('');
setPreviewImage('');
setFileList([]);
setIsOpen(false);
};
const onChange = (e) => {
setCommentText(e.target.value);
};
const isEnabled = fileList.length === 0 && commentText === "";
const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop});
return (
<Card className="jr-card">
<div className="media mb-2">
<Avatar className="size-50 mr-3" src={props.user.image}/>
<div className="media-body">
<TextField
id="exampleTextarea"
placeholder="Whats in your mind?"
label="Whats in your mind?"
value={commentText}
onChange={(event) => onChange(event)}
multiline
fullWidth
className="jr-wall-textarea"
margin="none"
variant="outlined"
rows="4"
/>
</div>
</div>
<div className="jr-clearfix">
{isOpen === true ? <div className="d-flex flex-row">
{console.log(fileList)}
<ul className="list-inline mb-3 mr-2">
{fileList.map((file, index) =>
<li className="mb-1 mr-0 list-inline-item align-top" key={index}>
<img alt="..." className="size-60 rounded" src={file}/>
</li>
)
}
</ul>
<div className='pointer' {...getRootProps()}>
<input {...getInputProps()} />
{
isDragActive ?
<i className="zmdi zmdi-collection-image"/> :
<i className="zmdi zmdi-collection-image"/>
}
</div>
</div>
: null}
<Divider/>
<Modal isOpen={previewVisible} toggle={handleCancel}>
<ModalHeader>Slide Show</ModalHeader>
<img alt="example" style={{width: '100%'}} src={previewImage}/>
</Modal>
</div>
<div className="d-flex flex-row align-items-center mt-2">
<div className="pointer" onClick={handleClickImage}>
<i className="zmdi zmdi-camera mr-2 jr-fs-xl d-inline-flex align-middle"/>
<span className="jr-fs-sm"> Add Photos/Album </span>
</div>
<Button color="primary" size='small' className="ml-auto mb-0"
disabled={(isEnabled) ? "disabled" : ""}
onClick={handleAddPost}>SEND
</Button>
</div>
</Card>
)
}
Example #26
| Source File: TrainingBoardEdit.js From GB-GCGC with MIT License | 4 votes |
|
render() {
const {redirect} = this.state;
if(redirect){
return <Redirect to={"/home"}/>
}
return (
<div className="container">
<Card>
<Card.Body>
<div className="row">
<Col>
<Card.Title>
<h5 align="center">
Notice Board-Training
<Tooltip title="Add">
<Link onClick={this.toggleModal}>
<FontAwesomeIcon icon={faPlus} size="xs" className="p-1 fa-lg" style={{backgroundColor:'#2A324B',color:'white',fontSize:'20',borderRadius:'10'}}/>
</Link>
</Tooltip>
</h5>
</Card.Title>
</Col>
</div>
<div>
<Table size="sm" responsive striped>
<thead className="p-3" style={{backgroundColor:'#2A324B',color:'white',fontSize:'24px'}}>
<tr>
<th>From</th>
<th>To</th>
<th>Name of the Programme</th>
<th>Status</th>
<th>Operations</th>
</tr>
</thead>
<tbody className="p-1">
{this.userList()}
</tbody>
</Table>
</div>
</Card.Body>
</Card>
<Modal isOpen={this.state.isModalOpen} toggle={this.toggleModal}>
<ModalHeader toggle={this.toggleModal}>
Add Training Event
</ModalHeader>
<ModalBody>
<Form onSubmit={this.handleSubmit}>
<FormGroup>
<Label htmlfor="username">Year Of Passing</Label>
<Input
type="text"
id="YOP"
value ={this.state.YOP}
name="YOP"
onChange={this.onChangeYOP}
/>
</FormGroup>
<FormGroup>
<Label htmlfor="program">Name Of The Program</Label>
<Input type="text" id="program" value={this.state.program} name="program" onChange={this.onChangeProgram} />
</FormGroup>
<FormGroup>
<Label htmlFor="from-date"> From </Label>
<Input type="date" id="from-date" name="from-date" value={this.state.from_date} onChange={this.onChangeFromDate}/>
</FormGroup>
<FormGroup>
<Label htmlFor="to-date"> To </Label>
<Input type="date" id="to-date" name="to-date" value={this.state.to_date} onChange={this.onChangeToDate}/>
</FormGroup>
<Button type="submit" value="submit" color="primary">
Submit
</Button>
</Form>
</ModalBody>
</Modal>
{/* <Modal isOpen={this.state.isModalOpen1} toggle={this.toggleModal1}>
<ModalHeader toggle={this.toggleModal1}>
Edit Training Event
</ModalHeader>
<ModalBody>
<Form onSubmit={this.handleSubmit}>
<FormGroup>
<Label htmlfor="username">Year Of Passing</Label>
<Input
type="text" id="YOP" value ={item.YOP} name="YOP" onChange={this.onChangeYOP}
/>
{console.log("item.name_of_the_program"), console.log(index+1)}
</FormGroup>
<FormGroup>
<Label htmlfor="program">Name Of The Program</Label>
<Input key={index} type="text" id="program" value={item.name_of_the_program} name="program" onChange={this.onChangeProgram} />
</FormGroup>
<FormGroup>
<Label htmlFor="from-date"> From </Label>
<Input type="date" id="from-date" name="from-date" value={this.state.from_date} onChange={this.onChangeFromDate}/>
</FormGroup>
<FormGroup>
<Label htmlFor="to-date"> To </Label>
<Input type="date" id="to-date" name="to-date" value={this.state.to_date} onChange={this.onChangeToDate}/>
</FormGroup>
<Button type="submit" value="submit" color="primary">
Submit
</Button>
</Form>
</ModalBody>
</Modal>*/}
</div>
);
}
Example #27
| Source File: login.component.js From blogApp with MIT License | 4 votes |
|
render() {
return (
<div>
<div className='p-3 mt-1'>
<Alert
color={this.state.alertCol}
fade={true}
toggle={this.toggleError}
isOpen={this.state.alert}>
{this.state.errMessage}
</Alert>
</div>
<div id='form' className='p-4 my-4'>
<h1 style={{ fontFamily: "Kaushan Script" }}>Login</h1>
<Form onSubmit={this.onSubmit}>
<div className='form-group'>
<Label>Username : </Label>
<input
type='text'
required
className='form-control'
value={this.state.username}
onChange={this.onChangeUsername}
/>
</div>
<div className='form-group'>
<Label>Password : </Label>
<input
type='password'
required
className='form-control'
value={this.state.password}
onChange={this.onChangePassword}
/>
</div>
<div className='form-group'>
New to{" "}
<span
style={{
fontFamily: "Monoton",
}}>
BlogApp ?
</span>{" "}
<Button
className='btn btn-sm'
color='success'
onClick={this.toggleModal}>
Sign Up
</Button>
</div>
<div className='form-group'>
<input
type='submit'
value='Login'
className='btn btn-primary'
/>
</div>
</Form>
</div>
<Modal
isOpen={this.state.isModalOpen}
fade={false}
toggle={this.toggleModal}>
<ModalHeader toggle={this.toggleModal}>
Add a blog
</ModalHeader>
<Form onSubmit={this.addUser}>
<ModalBody>
<FormGroup>
<Label htmlFor='username'>Username</Label>
<Input
type='text'
id='username'
onChange={this.onChangeUsername}
name='username'
/>
</FormGroup>
<FormGroup>
<Label htmlFor='email'>Email</Label>
<Input
type='text'
id='email'
onChange={this.onChangeEmail}
name='email'
/>
</FormGroup>
<FormGroup>
<Label htmlFor='password'>Password</Label>
<Input
type='password'
id='password'
onChange={this.onChangePassword}
name='password'
/>
</FormGroup>
</ModalBody>
<ModalFooter>
<Button
type='submit'
value='submit'
color='primary'>
Sign Up
</Button>
</ModalFooter>
</Form>
</Modal>
</div>
);
}
Example #28
| Source File: myBids.js From ErgoAuctionHouse with MIT License | 4 votes |
|
render() {
return (
<Modal
size="lg"
isOpen={this.props.isOpen}
toggle={this.props.close}
className={this.props.className}
>
<ModalHeader toggle={this.props.close}>
<span className="fsize-1 text-muted">
Bids for{' '}
{friendlyToken(this.props.box.assets[0], false, 5)}.
Statuses will get updated automatically.
</span>
</ModalHeader>
<ModalBody>
<Container>
{this.state.curBids.length === 0 ? (
<strong
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '100px',
}}
>
You have no bids for this auction
</strong>
) : (
<div className="table-responsive">
<table className="align-middle mb-0 table table-borderless table-striped table-hover">
<thead>
<tr>
<th className="text-center">
Amount
</th>
<th className="text-center">
Status
</th>
<th className="text-center">
Transaction
</th>
</tr>
</thead>
<tbody>
{this.state.curBids.map((bid) => {
let status =
bid.amount === this.props.box.curBid &&
bid.status === 'complete'
? this.props.highText
: bid.status;
return (
<tr>
<td className="text-center">
{longToCurrency(bid.amount, -1, this.props.box.currency)} {this.props.box.currency}
</td>
<td className="text-center">
<div
className={
'badge badge-' +
statusToBadge[
status
]
}
>
{status}
</div>
</td>
<td className="text-center">
<Button
onClick={() =>
window.open(
getTxUrl(
bid.txId
),
'_blank'
)
}
outline
className="btn-outline-lin m-2 border-0"
color="primary"
disabled={bid.status === 'rejected'}
>
<span>
See Transaction
</span>
</Button>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
)}
</Container>
</ModalBody>
</Modal>
);
}
Example #29
| Source File: Search.js From hivemind with Apache License 2.0 | 4 votes |
|
export default function Search() {
const { cyWrapper } = useContext(GlobalContext)
const [data, setData] = useState([])
const [modal, setModal] = useState(false)
const { cy, viewApi } = cyWrapper
const toggle = () => {
const { cy } = cyWrapper
setData(
cy.nodes(':visible').map((node) => {
const data = node.data()
const path = getPath(node)
const item = pick(data, 'id', 'title')
item.path = path.join(' ⟶ ')
item.depth = path.length - 1
return item
})
)
setModal(!modal)
}
const columns = [
{
dataField: 'title',
text: 'Title',
sort: true,
filter: textFilter(),
},
{
dataField: 'path',
text: 'Path',
sort: true,
filter: textFilter(),
},
{
dataField: 'depth',
text: 'Depth',
sort: true,
filter: numberFilter(),
},
]
const selectRow = {
mode: 'radio',
clickToSelect: true,
bgColor: '#00BFFF',
onSelect: (row) => {
const node = cy.$id(row.id)
viewApi.zoomToSelected(node)
viewApi.removeHighlights(cy.elements())
viewApi.highlight(node)
toggle()
},
}
return (
<>
<ToolTippedButton
tooltip="Search"
className="ml-1"
outline
color="secondary"
id="search"
onClick={toggle}
>
<SearchIcon size={16} />
</ToolTippedButton>
<Modal
isOpen={modal}
toggle={toggle}
style={{ minWidth: '50vw', maxWidth: '90vw' }}
fade={false}
>
<ModalHeader toggle={toggle}>
Search <small className="text-muted">(Jump to Node)</small>
</ModalHeader>
<ModalBody>
<BootstrapTable
bootstrap4
keyField="id"
data={data}
columns={columns}
hover
condensed
selectRow={selectRow}
filter={filterFactory()}
wrapperClasses="search"
defaultSorted={[{ dataField: 'depth', order: 'asc' }]}
defaultSortDirection={'asc'}
/>
</ModalBody>
</Modal>
</>
)
}
