reactstrap#ModalFooter JavaScript Examples
The following examples show how to use
reactstrap#ModalFooter.
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: index.js From HexactaLabs-NetCore_React-Level1 with Apache License 2.0 | 6 votes |
|
ElementRemove = ({ remove, goBack }) => {
return (
<Modal isOpen>
<ModalHeader>Eliminar tipo de producto</ModalHeader>
<ModalBody>¿Desea eliminar este tipo de producto?</ModalBody>
<ModalFooter>
<Button color="danger" onClick={remove}>
Si
</Button>
<Button color="secondary" onClick={goBack}>
No
</Button>
</ModalFooter>
</Modal>
);
}
Example #3
| 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 #4
| Source File: index.js From HexactaLabs-NetCore_React-Initial with Apache License 2.0 | 6 votes |
|
ElementRemove = ({ remove, goBack }) => {
return (
<Modal isOpen>
<ModalHeader>Eliminar proveedor</ModalHeader>
<ModalBody>¿Desea eliminar este proveedor?</ModalBody>
<ModalFooter>
<Button color="danger" onClick={remove}>
Si
</Button>
<Button color="secondary" onClick={goBack}>
No
</Button>
</ModalFooter>
</Modal>
);
}
Example #5
| 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 #6
| 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 #7
| 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 #8
| 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 #9
| 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 #10
| 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 #11
| Source File: DownloadFileModal.jsx From doc2pen with Creative Commons Zero v1.0 Universal | 5 votes |
|
DownloadFileModal = props => {
const { modal, setModal } = props;
const editContext = React.useContext(EditContext);
const [fileType, setFileType] = React.useState("PNG");
const [value, setValue] = React.useState("");
const [valueError, setValueError] = React.useState(null);
const handleDownloadFile = () => {
if (!value) setValueError("please provide file name");
else {
editContext.setAllPagesVisible(true);
editContext.downloadAction(value, fileType);
setModal(false);
setValue("");
setValueError(null);
}
};
const toggle = () => {
setModal(!modal);
setValue("");
setValueError(null);
};
const files = ["PNG", "PDF"];
return (
<Modal style={{ marginTop: "200px" }} isOpen={modal} toggle={toggle}>
<ModalBody>
<input
placeholder="What would you like to call the file?"
className={styles.modalInput}
type="text"
id="name"
value={value}
onChange={e => setValue(e.target.value)}
/>
<br />
{valueError ? <p style={{ color: "red" }}>{valueError}</p> : null}
<label className={styles.modalLabel}> Export as : </label>
<br />
{files.map(file => {
return (
<button
onClick={() => setFileType(file)}
style={{
backgroundColor: fileType === file ? "#103f5f" : "#add8e6",
color: fileType === file ? "white" : "black",
}}
className={styles.downloadLabelButton}
key={Math.random()}
>
{file} {fileType === file ? "*" : null}
</button>
);
})}
</ModalBody>
<ModalFooter>
<Button className={styles.downloadButton} onClick={handleDownloadFile}>
Download
</Button>
<Button
className={styles.closeModal}
color="secondary"
onClick={toggle}
>
X
</Button>
</ModalFooter>
</Modal>
);
}
Example #12
| Source File: ConfigSaveModal.jsx From watchmo with MIT License | 5 votes |
|
ConfigSaveModal = props => {
const { buttonLabel, className, handleSubmit } = props;
const [modal, setModal] = useState(false);
const toggle = () => setModal(!modal);
const submitToggle = () => {
handleSubmit();
toggle();
// fileSaved();
};
const center = true;
return (
<div>
<Button color="primary" onClick={toggle}>
{buttonLabel}
</Button>
<Modal
centered={center}
isOpen={modal}
toggle={toggle}
className={className}
>
<ModalHeader toggle={toggle}>Confirm Current Configuration</ModalHeader>
<ModalBody>
Saving will overwrite your existing configuration. Are you sure you
want to do this?
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={submitToggle}>
Save
</Button>{' '}
<Button color="secondary" onClick={toggle}>
Cancel
</Button>
</ModalFooter>
</Modal>
</div>
);
}
Example #13
| 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 #14
| 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 #15
| 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 #16
| 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 #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: email-read.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="사용자 프로젝트" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg={12}>
<Card>
<CardBody>
<div>
<Link to="ecommerce-add-product" onClick={() => this.setState({ modal_static: true, isAlertOpen: false })} className="btn btn-success mb-2"><i className="mdi mdi-plus mr-2"></i> 추가</Link>
</div>
<div className="table-responsive mt-3">
<Table className="table-centered datatable dt-responsive nowrap " style={{ borderCollapse: "collapse", borderSpacing: 0, width: "100%" }}>
<thead className="thead-light">
<tr>
<th style={{ width: "20px" }}>
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id="customercheck" />
<Label className="custom-control-label" htmlFor="customercheck"> </Label>
</div>
</th>
<th>이름</th>
<th>상태</th>
<th>워크스페이스</th>
<th>CPU</th>
<th>메모리</th>
<th>파드</th>
<th style={{ width: "120px" }}>Action</th>
</tr>
</thead>
<tbody>
{
this.state.data.map((customerData, key) =>
<tr key={key}>
<td>
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id={"customercheck" + key} />
<Label className="custom-control-label" htmlFor={"customercheck" + key}> </Label>
</div>
</td>
<td>{customerData.customer}<Link to="/dashboard"></Link></td>
<td>{customerData.email}</td>
<td>{customerData.phone}</td>
<td>
{customerData.balance}
</td>
<td>
{customerData.date}
</td>
<td>
{customerData.date}
</td>
<td>
<Link to="/dashboard" className="mr-3 text-primary" id={"edit" + key}><i className="mdi mdi-pencil font-size-18"></i></Link>
<UncontrolledTooltip target={"edit" + key} placement="top">
Edit
</UncontrolledTooltip>
<Link to="#" className="text-danger" id={"delete" + key}><i className="mdi mdi-trash-can font-size-18"></i></Link>
<UncontrolledTooltip target={"delete" + key} placement="top">
Delete
</UncontrolledTooltip>
</td>
</tr>
)
}
</tbody>
</Table>
</div>
</CardBody>
</Card>
</Col>
</Row>
<Modal
isOpen={this.state.modal_static}
toggle={this.tog_static}
backdrop="static"
centered
size="lg"
>
<ModalHeader toggle={() => this.setState({ modal_static: false })}>
Add Customer Details
</ModalHeader>
<ModalBody>
<AvForm onValidSubmit={this.addCustomer}>
<Row>
<Col lg={12}>
<Alert color="success" isOpen={this.state.isAlertOpen} toggle={() => this.setState({ isAlertOpen: false })}>
Data Added Successfully...!
</Alert>
<FormGroup>
<Label htmlFor="name">Customer Name</Label>
<AvField
name="custname"
type="text"
className="form-control"
id="custname"
placeholder="Enter Customer Name"
required
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg={4}>
<FormGroup>
<Label htmlFor="email">Email</Label>
<AvField
name="custemail"
type="email"
className="form-control"
id="custemail"
placeholder="Enter Email"
required
/>
</FormGroup>
</Col>
<Col lg={4}>
<FormGroup>
<Label htmlFor="email">Phone Number</Label>
<AvField
name="phonenumber"
type="number"
className="form-control"
id="phonenumber"
placeholder="Enter Phone Number"
required
/>
</FormGroup>
</Col>
<Col lg={4}>
<FormGroup>
<Label htmlFor="email">Wallet Balance</Label>
<AvField
name="wBalance"
type="number"
className="form-control"
id="wBalance"
placeholder="Wallet Balance"
required
/>
</FormGroup>
</Col>
</Row>
<ModalFooter>
<Button type="button" color="light" onClick={() => this.setState({ modal_static: false })}>Calcel</Button>
<Button type="submit" color="primary">Add</Button>
</ModalFooter>
</AvForm>
</ModalBody>
</Modal>
</Container>
</div>
</React.Fragment>
);
}
Example #19
| 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 #20
| Source File: ListModal.js From Frontend with Apache License 2.0 | 4 votes |
|
ListModal = ({ creds, acc, handle, user }) => {
const { buttonLabel, className } = { creds, acc, handle, user }
const [modal, setModal] = useState(false)
const [nestedModal1, setNestedModal1] = useState(false)
const [nestedModal2, setNestedModal2] = useState(false)
const [nestedModal3, setNestedModal3] = useState(false)
const [closeAll, setCloseAll] = useState(false)
const [friends, setFriends] = useState({})
const [friendReq, setFriendReq] = useState({})
const [sentReq, setSentReq] = useState({})
const [friendsOptions, setFriendsOptions] = useState(true)
const toggle = (e) => {
e.preventDefault()
setFriendsOptions(!friendsOptions)
setModal(!modal)
if (friendsOptions) {
// console.log("true");
$('.popout-right>.popout-menu-right').removeClass('hideOptions')
$('.popout-right>.popout-menu-right').addClass('showOptions')
$('.window-button>.icon-popout-right').removeClass(
'glyphicon-menu-hamburger'
)
$('.window-button>.icon-popout-right').addClass(
'animated rotateIn glyphicon-remove'
)
$('.dropdown-link-right').addClass('animated bounceIn')
} else {
// console.log("false");
$('.popout-right>.popout-menu-right').removeClass('showOptions')
$('.popout-right>.popout-menu-right').addClass('hideOptions')
$('.window-button>.icon-popout-right').removeClass(
'animated rotateIn glyphicon-remove'
)
$('.dropdown-link-right').removeClass('animated bounceIn')
$('.window-button>.icon-popout-right').addClass(
'animated bounceIn glyphicon-menu-hamburger'
)
}
}
const toggleNested1 = (e) => {
e.preventDefault()
setNestedModal1(!nestedModal1)
if (nestedModal1) {
// console.log("pppppp");
}
setCloseAll(false)
}
const toggleNested2 = (e) => {
e.preventDefault()
setNestedModal2(!nestedModal2)
setCloseAll(false)
}
const toggleNested3 = (e) => {
e.preventDefault()
setNestedModal3(!nestedModal3)
setCloseAll(false)
}
const toggleAll = (e) => {
e.preventDefault()
setNestedModal1(!nestedModal1)
setNestedModal2(!nestedModal2)
setNestedModal3(!nestedModal3)
setCloseAll(true)
}
const [formUsername, setFormUsername] = useState('')
const [friendStatus, setFriendStatus] = useState({})
async function submitForm(e) {
e.preventDefault()
// console.log(formUsername);
const res = await fetch(
`https://api.codedigger.tech/auth/user/send-request`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${acc}`,
},
body: JSON.stringify({
to_user: formUsername,
}),
}
)
res.json().then((res) => setFriendStatus(res))
window.location.reload()
}
useEffect(() => {
getFriends(acc).then((res) => setFriends(res))
// console.log(friends);
async function showList() {
// const res= await fetch(`https://api.codedigger.tech/auth/user/friends`,{
// method:"GET",
// headers:{
// "Content-Type":"application/json",
// "Authorization":`Bearer ${acc}`
// }
// });
// res
// .json()
// .then(res => setFriends(res));
// setFriends(getFriends(acc));
const res1 = await fetch(
`https://api.codedigger.tech/auth/user/show-request`,
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${acc}`,
},
}
)
res1.json().then((res1) => setFriendReq(res1))
const res2 = await fetch(
`https://api.codedigger.tech/auth/user/show-send-request`,
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${acc}`,
},
}
)
res2.json().then((res2) => setSentReq(res2))
}
showList()
}, [])
return (
<>
<div
style={{ marginTop: '-15px' }}
class="dropdown popout-right pull-left"
>
<div onClick={toggle}>
<button
style={{ width: '135px', padding: '5px' }}
class="window-button btn-primary dropdown-toggle friendsButton"
type="button"
role="button"
id="dropdownMenu1"
data-toggle="dropdown"
aria-expanded="true"
>
<svg
style={{ width: '28px', marginRight: '9px' }}
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 32 32"
>
<defs>
<linearGradient
id="Live-Events_svg__a"
x1="-55.5"
y1="1295.5"
x2="-55.5"
y2="1301.5"
gradientTransform="translate(64.5 -1283.5)"
gradientUnits="userSpaceOnUse"
>
<stop offset=".001" stop-opacity="0"></stop>
<stop offset=".83"></stop>
</linearGradient>
<linearGradient
id="Live-Events_svg__b"
y1="-41.5"
y2="-35.5"
gradientTransform="matrix(1 0 0 -1 78.5 -23.5)"
xlinkHref="#Live-Events_svg__a"
></linearGradient>
<linearGradient
id="Live-Events_svg__d"
y1="32"
x2="32"
gradientUnits="userSpaceOnUse"
>
<stop offset=".1" stop-color="#be95ff"></stop>
<stop offset=".9" stop-color="#4589ff"></stop>
</linearGradient>
<mask
id="Live-Events_svg__c"
x="0"
y="0"
width="32"
height="32"
maskUnits="userSpaceOnUse"
>
<path
d="M24 4a3 3 0 11-3 3 3 3 0 013-3m0-2a5 5 0 105 5 5 5 0 00-5-5zM8 4a3 3 0 11-3 3 3 3 0 013-3m0-2a5 5 0 105 5 5 5 0 00-5-5zM12 14H6a5.006 5.006 0 00-5 5v4h2v-4a3 3 0 013-3h6zM26 14h-6v2h6a3 3 0 013 3v4h2v-4a5.006 5.006 0 00-5-5z"
fill="#fff"
></path>
<path
transform="rotate(-90 9 15)"
fill="url(#Live-Events_svg__a)"
d="M7 12h4v6H7z"
></path>
<path
transform="rotate(-90 23 15)"
fill="url(#Live-Events_svg__b)"
d="M21 12h4v6h-4z"
></path>
</mask>
</defs>
<g data-name="Layer 2">
<g data-name="Dark theme icons">
<g mask="url(#Live-Events_svg__c)">
<path
fill="url(#Live-Events_svg__d)"
d="M0 0h32v32H0z"
></path>
</g>
<path
d="M23 30h-2v-2a3 3 0 00-3-3h-4a3 3 0 00-3 3v2H9v-2a5.006 5.006 0 015-5h4a5.006 5.006 0 015 5zM16 13a3 3 0 11-3 3 3 3 0 013-3m0-2a5 5 0 105 5 5 5 0 00-5-5z"
fill="#f4f4f4"
></path>
</g>
</g>
</svg>
<span style={{ fontSize: '16px' }}>My Friends</span>
</button>
</div>
<ul
class="dropdown-menu popout-menu-right hideOptions"
role="menu"
aria-labelledby="dropdownMenu1"
>
<li
onClick={toggleNested1}
role="presentation"
class="dropdown-link-right arrow-box-left"
>
<a onClick={toggleNested1} role="menuitem" tabindex="-1" href="#">
Friends
</a>
</li>
<li
onClick={toggleNested3}
role="presentation"
class="dropdown-link-right arrow-box-left"
>
<a role="menuitem" tabindex="-1" href="#">
Sent Friend Requests
</a>
</li>
<li
onClick={toggleNested2}
role="presentation"
class="dropdown-link-right arrow-box-left"
>
<a role="menuitem" tabindex="-1" href="#">
Friend Requests
</a>
</li>
</ul>
</div>
<Modal
isOpen={nestedModal1}
toggle={toggleNested1}
onClosed={closeAll ? toggle : undefined}
>
<ModalHeader>List of Friends</ModalHeader>
<ModalBody>
{friends != undefined ? (
<FriendList friends={friends} i="1" acc={acc} />
) : (
<Loading />
)}
</ModalBody>
<Form onSubmit={submitForm} style={{ marginBottom: '70px' }}>
<Label for="formUsername">Add Friend</Label>
<div style={{ display: 'flex' }}>
<Input
style={{ marginLeft: '11px', width: '73%' }}
type="text"
id="formUsername"
onChange={(e) => setFormUsername(e.target.value)}
placeholder="Enter Username"
/>
<Button
style={{
position: 'relative',
top: '-4px',
left: '0px',
borderRadius: '13px',
}}
onClick={submitForm}
type="submit"
>
Submit
</Button>
</div>
</Form>
<ModalFooter>
<Button color="primary" onClick={toggleNested1}>
Close{' '}
</Button>{' '}
</ModalFooter>
</Modal>
<Modal
isOpen={nestedModal2}
toggle={toggleNested2}
onClosed={closeAll ? toggle : undefined}
>
<ModalHeader>List of Friend Requests</ModalHeader>
<ModalBody>
{friendReq != undefined ? (
<FriendList friends={friendReq} i="2" acc={acc} />
) : (
<Loading />
)}
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={toggleNested2}>
Close{' '}
</Button>{' '}
</ModalFooter>
</Modal>
<Modal
isOpen={nestedModal3}
toggle={toggleNested3}
onClosed={closeAll ? toggle : undefined}
>
<ModalHeader>List of Sent Friend Requests</ModalHeader>
<ModalBody>
{sentReq != undefined ? (
<FriendList friends={sentReq} i="3" acc={acc} />
) : (
<Loading />
)}
</ModalBody>
<br />
<br />
<ModalFooter>
<Button color="primary" onClick={toggleNested3}>
Close{' '}
</Button>{' '}
</ModalFooter>
</Modal>
{/* <Modal isOpen={modal} toggle={toggle}>
<ModalHeader toggle={toggle}>Choose a list</ModalHeader>
<ModalBody>
<br />
<br />
<Button color="success"
onClick={toggleNested2}
style={{
right: '50px',
bottom: '10px',
}}
>Friend Requests List</Button>
<Button color="success"
onClick={toggleNested1}
style={{
right: '310px',
bottom: '10px'
}}
>Friends List</Button>
<Button color="success"
onClick={toggleNested3}
style={{
right: '130px',
bottom: '-60px'
}}
>Show Sent Requests List</Button>
</ModalBody>
<br />
<br />
<br />
<br />
<br />
</Modal> */}
</>
)
}
Example #21
| Source File: MentorModal.js From Frontend with Apache License 2.0 | 4 votes |
|
MentorModal = ({ creds, acc, handle, user, mentors }) => {
const [modal, setModal] = useState(false)
const toggle = (e) => {
e.preventDefault()
setModal(!modal)
}
const [formUsername, setFormUsername] = useState('')
const [friendStatus, setFriendStatus] = useState({})
async function submitForm(e) {
e.preventDefault()
// console.log(formUsername);
const res = await fetch(`https://api.codedigger.tech/codeforces/mentor`, {
method: 'PUT',
headers: {
'Content-type': 'application/json',
Authorization: `Bearer ${acc}`,
},
body: JSON.stringify({
guru: formUsername,
}),
})
res.json().then((res) => setFriendStatus(res))
window.location.reload()
}
return (
<>
<ButtonToggle className="MentorButton" onClick={toggle}>
<svg
style={{ width: '27px' }}
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 32 32"
>
<defs>
<linearGradient
id="WatsonPersonalityInsights_svg__a"
x1="7"
y1="17.5"
x2="13"
y2="17.5"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-opacity="0"></stop>
<stop offset=".8"></stop>
</linearGradient>
<linearGradient
id="WatsonPersonalityInsights_svg__b"
x1="-4263"
y1="-3384.5"
x2="-4257"
y2="-3384.5"
gradientTransform="translate(4282 3402)"
xlinkHref="#WatsonPersonalityInsights_svg__a"
></linearGradient>
<linearGradient
id="WatsonPersonalityInsights_svg__c"
x1="-411.5"
y1="-3817.5"
x2="-402.5"
y2="-3817.5"
gradientTransform="translate(423 3833)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-opacity="0"></stop>
<stop offset=".53"></stop>
</linearGradient>
<linearGradient
id="WatsonPersonalityInsights_svg__e"
y1="32"
x2="32"
gradientUnits="userSpaceOnUse"
>
<stop offset=".1" stop-color="#be95ff"></stop>
<stop offset=".9" stop-color="#4589ff"></stop>
</linearGradient>
<mask
id="WatsonPersonalityInsights_svg__d"
x="0"
y="0"
width="32"
height="32"
maskUnits="userSpaceOnUse"
>
<path
d="M30 6a4 4 0 10-5 3.858V15a2 2 0 01-2 2h-6v-7h3V2h-8v8h3v7H9a2 2 0 01-2-2V9.858a4 4 0 10-2 0V15a4 4 0 004 4h14a4 4 0 004-4V9.858A4 4 0 0030 6zM14 4h4v4h-4zM4 6a2 2 0 112 2 2 2 0 01-2-2zm22 2a2 2 0 112-2 2 2 0 01-2 2z"
fill="#f4f4f4"
></path>
<path
fill="url(#WatsonPersonalityInsights_svg__a)"
d="M7 15h6v5H7z"
></path>
<path
transform="rotate(180 22 17.5)"
fill="url(#WatsonPersonalityInsights_svg__b)"
d="M19 15h6v5h-6z"
></path>
<path
transform="rotate(90 16 15.5)"
fill="url(#WatsonPersonalityInsights_svg__c)"
d="M11.5 11.5h9v8h-9z"
></path>
</mask>
</defs>
<g data-name="Layer 2">
<g data-name="Dark theme icons">
<g mask="url(#WatsonPersonalityInsights_svg__d)">
<path
fill="url(#WatsonPersonalityInsights_svg__e)"
d="M0 0h32v32H0z"
></path>
</g>
<path
d="M13 25h6a3 3 0 013 3v2h-2v-2a1 1 0 00-1-1h-6a1 1 0 00-1 1v2h-2v-2a3 3 0 013-3zM20 20a4 4 0 11-4-4 4 4 0 014 4zm-6 0a2 2 0 102-2 2 2 0 00-2 2z"
fill="#f4f4f4"
></path>
</g>
</g>
</svg>
<span style={{ fontSize: '16px' }}>My Mentors</span>
</ButtonToggle>
<Modal isOpen={modal} toggle={toggle}>
<ModalHeader>List of Mentors</ModalHeader>
<ModalBody>
{mentors ? <MentorList mentors={mentors} acc={acc} /> : <Loading />}
</ModalBody>
<Form onSubmit={submitForm} style={{ marginBottom: '70px' }}>
<Label for="formUsername">Add Mentor</Label>
<div style={{ display: 'flex' }}>
<Input
style={{ marginLeft: '11px', width: '73%' }}
type="text"
id="formUsername"
onChange={(e) => setFormUsername(e.target.value)}
placeholder="Enter Username"
/>
<Button
style={{
position: 'relative',
top: '-4px',
left: '0px',
borderRadius: '13px',
}}
onClick={submitForm}
type="submit"
>
Add
</Button>
</div>
</Form>
<ModalFooter>
<Button color="primary" onClick={toggle}>
Close{' '}
</Button>{' '}
</ModalFooter>
</Modal>
</>
)
}
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: 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 #24
| 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 #25
| Source File: blog.component.js From blogApp with MIT License | 4 votes |
|
render() {
return (
<div className='pt-2 px-3'>
<div className='row mr-auto ml-0 mb-4 mt-0'>
<Button
color='primary'
size='lg'
onClick={() => {
window.location.href = "/";
}}
style={{
width: "60px",
height: "60px",
borderRadius: "50%",
}}>
<FontAwesomeIcon icon={faArrowLeft} />
</Button>
</div>
{!this.state.loaded ? (
<ReactLoading
type={"spin"}
color={"orange"}
height={"100vh"}
width={"40%"}
className='loading'
/>
) : (
<Card id='blog' className='p-2 col-12 singleBlog'>
<CardImg
src={this.state.image}
alt='Card image cap'
className='img-thumbnail'
/>
<CardBody>
<CardTitle className='text-primary'>
<h5>
{this.state.title}
<span className='float-right text-secondary'>
{"-"}
<em>@{this.state.author.username}</em>
</span>
</h5>
</CardTitle>
{this.state.date !== "" && (
<CardSubtitle className='text-dark'>
<FontAwesomeIcon
icon={faCalendar}
className='mr-2'
/>
{new Intl.DateTimeFormat("en-US", {
month: "long",
day: "numeric",
year: "numeric",
hour: "numeric",
minute: "numeric",
}).format(Date.parse(this.state.date))}
<span className='float-right'>
<FontAwesomeIcon
className='text-danger'
icon={faHeart}
/>{" "}
{this.state.likes.length}
</span>
</CardSubtitle>
)}
<CardText>
<br />
{this.state.body}
</CardText>
</CardBody>
<CardFooter>
{this.props.user !== null &&
this.props.user._id ===
this.state.author.id && (
<div
style={{ display: "flex" }}
className='p-1'>
<Button
className='btn btn-danger mr-1'
style={{ width: "48%" }}
onClick={this.deleteBlog}>
Delete
</Button>{" "}
<Button
className='btn btn-warning ml-1'
style={{ width: "48%" }}
onClick={this.toggleModal}>
Edit
</Button>
</div>
)}
</CardFooter>
</Card>
)}
<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}
value={this.state.title}
name='title'
/>
</FormGroup>
<FormGroup>
<Label htmlFor='imageURL'>imageURL</Label>
<Input
type='text'
id='imageURL'
onChange={this.onimgChange}
value={this.state.image}
name='imageURL'
/>
</FormGroup>
<FormGroup>
<Label htmlFor='body'>body</Label>
<Input
type='textarea'
id='body'
onChange={this.onbodyChange}
value={this.state.body}
name='body'
/>
</FormGroup>
</ModalBody>
<ModalFooter>
<Button
type='submit'
value='submit'
color='primary'>
UPDATE BLOG
</Button>
</ModalFooter>
</Form>
</Modal>
</div>
);
}
Example #26
| 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 #27
| Source File: UiModal.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container>
<Breadcrumbs title="Modals" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col xs={12}>
<Card>
<CardBody>
<h4 className="card-title">Modals Examples</h4>
<p className="card-title-desc">
Modals are streamlined, but flexible dialog prompts powered by JavaScript. They support a number of use cases from user notification to completely custom content and feature a handful of helpful subcomponents, sizes, and more.
</p>
<div className="modal bs-example-modal" tabIndex="-1" role="dialog">
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title mt-0">Modal title</h5>
<button type="button" className="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div className="modal-body">
<p>One fine body…</p>
</div>
<div className="modal-footer">
<Button type="button" color="primary" className="waves-effect waves-light">Save changes</Button>
<Button type="button" color="light" className="waves-effect" data-dismiss="modal">Close</Button>
</div>
</div>
</div>
</div>
<Row>
<Col sm={6} md={4} xl={3} className="mt-4">
<div className="text-center">
<p className="text-muted">Standard Modal</p>
<Button
type="button"
onClick={this.tog_standard}
color="primary" className="waves-effect waves-light"
>
Standard Modal
</Button>
</div>
<Modal
isOpen={this.state.modal_standard}
toggle={this.tog_standard}
>
<ModalHeader toggle={() => this.setState({ modal_standard: false })}>
Modal Heading
</ModalHeader>
<ModalBody>
<h5>Overflowing text to show scroll behavior</h5>
<p>
Cras mattis consectetur purus sit amet fermentum.
Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum.
Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
</ModalBody>
<ModalFooter>
<Button
type="button"
onClick={this.tog_standard}
color="light"
className="waves-effect"
>
Close
</Button>
<Button
type="button"
color="primary" className="waves-effect waves-light"
>
Save changes
</Button>
</ModalFooter>
</Modal>
</Col>
<Col sm={6} md={4} xl={3} className="mt-4">
<div className="text-center">
<p className="text-muted">Extra large modal</p>
<Button
type="button"
onClick={this.tog_xlarge}
color="primary" className="waves-effect waves-light"
>
Extra large modal
</Button>
</div>
<Modal
size="xl"
isOpen={this.state.modal_xlarge}
toggle={this.tog_xlarge}
>
<ModalHeader toggle={() => this.setState({ modal_xlarge: false })}>
Extra large modal
</ModalHeader>
<ModalBody>
<p>
Cras mattis consectetur purus sit amet fermentum.
Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.
</p>
<p className="mb-0">
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
</ModalBody>
</Modal>
</Col>
<Col sm={6} md={4} xl={3} className="mt-4">
<div className="text-center">
<p className="text-muted">Large modal</p>
<Button
type="button"
onClick={this.tog_large}
color="primary" className="waves-effect waves-light"
>
Large modal
</Button>
</div>
<Modal
size="lg"
isOpen={this.state.modal_large}
toggle={this.tog_large}
>
<ModalHeader toggle={() => this.setState({ modal_large: false })}>
Large Modal
</ModalHeader>
<ModalBody>
<p>
Cras mattis consectetur purus sit amet fermentum.
Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.
</p>
<p className="mb-0">
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
</ModalBody>
</Modal>
</Col>
<Col sm={6} md={4} xl={3} className="mt-4">
<div className="text-center">
<p className="text-muted">Small modal</p>
<Button
type="button"
onClick={this.tog_small}
color="primary" className="waves-effect waves-light"
data-toggle="modal"
data-target=".bs-example-modal-sm"
>
Small modal
</Button>
</div>
<Modal
size="sm"
isOpen={this.state.modal_small}
toggle={this.tog_small}
>
<ModalHeader toggle={() => this.setState({ modal_small: false })}>
Small Modal
</ModalHeader>
<ModalBody>
<p>
Cras mattis consectetur purus sit amet fermentum.
Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.
</p>
<p className="mb-0">
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
</ModalBody>
</Modal>
</Col>
<Col sm={6} md={4} xl={3} className="mt-4">
<div className="my-4 text-center">
<p className="text-muted">Center modal</p>
<Button
type="button"
color="primary" className="waves-effect waves-light"
onClick={this.tog_center}
>
Center modal
</Button>
</div>
<Modal
isOpen={this.state.modal_center}
toggle={this.tog_center}
centered={true}
>
<ModalHeader toggle={() => this.setState({ modal_center: false })}>
Center Modal
</ModalHeader>
<ModalBody>
<p>
Cras mattis consectetur purus sit amet fermentum.
Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.
</p>
<p className="mb-0">
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
</ModalBody>
</Modal>
</Col>
<Col sm={6} md={4} xl={3} className="mt-4">
<div className="my-4 text-center">
<p className="text-muted">Scrollable modal</p>
<Button
type="button"
color="primary" className="waves-effect waves-light"
onClick={this.tog_scroll}
data-toggle="modal"
>
Scrollable modal
</Button>
</div>
<Modal
isOpen={this.state.modal_scroll}
toggle={this.tog_scroll}
scrollable={true}
>
<ModalHeader toggle={() => this.setState({ modal_scroll: false })}>
Scrollable modal
</ModalHeader>
<ModalBody>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<ModalFooter>
<Button type="button" color="light" onClick={() => this.setState({ modal_scroll: false }) }>Close</Button>
<Button type="button" color="primary">Save changes</Button>
</ModalFooter>
</ModalBody>
</Modal>
</Col>
<Col sm={6} md={4} xl={3} className="mt-4">
<div className="my-4 text-center">
<p className="text-muted">Static backdrop modal</p>
<Button
type="button"
color="primary" className="waves-effect waves-light"
onClick={this.tog_static}
>
Static Backdrop
</Button>
</div>
<Modal
isOpen={this.state.modal_static}
toggle={this.tog_static}
backdrop="static"
>
<ModalHeader toggle={() => this.setState({ modal_static: false })}>
Static Backdrop
</ModalHeader>
<ModalBody>
<p>
I will not close if you click outside me. Don't even try to press escape key.
</p>
<ModalFooter>
<Button type="button" color="light" onClick={() => this.setState({ modal_static: false }) }>Close</Button>
<Button type="button" color="primary">Save</Button>
</ModalFooter>
</ModalBody>
</Modal>
</Col>
</Row>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #28
| Source File: email-sidebar.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
{/* left sidebar start */}
<Card className="email-leftbar">
<Button type="button" color="danger" onClick={this.togglemodal} block className="waves-effect waves-light" >
Compose
</Button>
<div className="mail-list mt-4">
<Link to="#" className="active"><i className="mdi mdi-email-outline mr-2"></i> Inbox <span className="ml-1 float-right">(18)</span></Link>
<Link to="#"><i className="mdi mdi-star-outline mr-2"></i>Starred</Link>
<Link to="#"><i className="mdi mdi-diamond-stone mr-2"></i>Important</Link>
<Link to="#"><i className="mdi mdi-file-outline mr-2"></i>Draft</Link>
<Link to="#"><i className="mdi mdi-email-check-outline mr-2"></i>Sent Mail</Link>
<Link to="#"><i className="mdi mdi-trash-can-outline mr-2"></i>Trash</Link>
</div>
<h6 className="mt-4">Labels</h6>
<div className="mail-list mt-1">
<Link to="#"><span className="mdi mdi-circle-outline text-info float-right"></span>Theme Support</Link>
<Link to="#"><span className="mdi mdi-circle-outline text-warning float-right"></span>Freelance</Link>
<Link to="#"><span className="mdi mdi-circle-outline text-primary float-right"></span>Social</Link>
<Link to="#"><span className="mdi mdi-circle-outline text-danger float-right"></span>Friends</Link>
<Link to="#"><span className="mdi mdi-circle-outline text-success float-right"></span>Family</Link>
</div>
<h6 className="mt-4">Chat</h6>
<div className="mt-2">
<Link to="#" className="media">
<img className="d-flex mr-3 rounded-circle" src={avatar2} alt="Generic placeholder" height="36"/>
<Media body className="chat-user-box overflow-hidden">
<p className="user-title m-0">Scott Median</p>
<p className="text-muted text-truncate">Hello</p>
</Media>
</Link>
<Link to="#" className="media">
<img className="d-flex mr-3 rounded-circle" src={avatar3} alt="Generic placeholder" height="36"/>
<Media body className="chat-user-box overflow-hidden">
<p className="user-title m-0">Julian Rosa</p>
<p className="text-muted text-truncate">What about our next..</p>
</Media>
</Link>
<Link to="#" className="media">
<img className="d-flex mr-3 rounded-circle" src={avatar4} alt="Generic placeholder" height="36"/>
<Media body className="chat-user-box overflow-hidden">
<p className="user-title m-0">David Medina</p>
<p className="text-muted text-truncate">Yeah everything is fine</p>
</Media>
</Link>
<Link to="#" className="media">
<img className="d-flex mr-3 rounded-circle" src={avatar6} alt="Generic placeholder" height="36"/>
<Media body className="chat-user-box overflow-hidden">
<p className="user-title m-0">Jay Baker</p>
<p className="text-muted text-truncate">Wow that's great</p>
</Media>
</Link>
</div>
</Card>
{/* left sidebar over */}
<Modal isOpen={this.state.modal} role="document" autoFocus={true} centered={true} className="composemodal" tabIndex="-1" toggle={this.togglemodal}>
<div className="modal-content">
<ModalHeader toggle={this.togglemodal}>
New Message
</ModalHeader >
<ModalBody>
<Form>
<FormGroup>
<Input type="email" className="form-control" placeholder="To"/>
</FormGroup>
<FormGroup>
<Input type="text" className="form-control" placeholder="Subject"/>
</FormGroup>
<FormGroup>
<Editor
toolbarClassName="toolbarClassName"
wrapperClassName="wrapperClassName"
editorClassName="editorClassName"
/>
</FormGroup>
</Form>
</ModalBody>
<ModalFooter>
<Button coloe="secondary" type="button" onClick={this.togglemodal} >Close</Button>
<Button type="button" color="primary">Send <i className="fab fa-telegram-plane ml-1"></i></Button>
</ModalFooter>
</div>
</Modal>
</React.Fragment>
);
}
Example #29
| Source File: placeBid.js From ErgoAuctionHouse with MIT License | 4 votes |
|
render() {
return (
<span>
<FakeModal bid={this.state.bid} modal={this.state.modal} box={this.state.box}
original={this.state.original} isOpen={this.state.fakeOpen}
close={() => this.setState({fakeOpen: !this.state.fakeOpen})}/>
<Modal
isOpen={this.props.isOpen}
toggle={this.props.close}
className={this.props.className}
>
<ModalHeader toggle={this.props.close}>
<span className="fsize-1 text-muted">
New bid for{' '}
{friendlyToken(this.props.box.assets[0], false, 5)}
</span>
</ModalHeader>
<ModalBody>
<Container>
<Row>
<SyncLoader
css={override}
size={8}
color={'#0086d3'}
loading={this.state.modalLoading}
/>
</Row>
<FormGroup>
<InputGroup>
<Input
type="number"
value={this.state.bidAmount}
invalid={
currencyToLong(this.state.bidAmount, supportedCurrencies[this.props.box.currency].decimal) < this.props.box.nextBid
}
onChange={(e) => {
if (isFloat(e.target.value)) {
this.setState({
bidAmount: e.target.value,
});
}
}}
id="bidAmount"
/>
<InputGroupAddon addonType="append">
<InputGroupText>{this.props.box.currency}</InputGroupText>
</InputGroupAddon>
<FormFeedback invalid>
Minimum bid value for this auction is{' '}
{longToCurrency(this.props.box.nextBid, -1, this.props.box.currency)}{' '}
{this.props.box.currency}
</FormFeedback>
</InputGroup>
<FormText>Specify your bid amount.</FormText>
</FormGroup>
</Container>
</ModalBody>
<ModalFooter>
<Button
className="ml mr-2 btn-transition"
color="secondary"
onClick={this.props.close}
>
Cancel
</Button>
<Button
className="mr-2 btn-transition"
color="secondary"
disabled={
currencyToLong(this.state.bidAmount, supportedCurrencies[this.props.box.currency].decimal) <
this.props.box.nextBid ||
this.state.modalLoading
}
onClick={this.placeBid}
>
Place Bid
</Button>
</ModalFooter>
</Modal>
</span>
);
}
