reactstrap#ModalBody JavaScript Examples
The following examples show how to use
reactstrap#ModalBody.
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: 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 #2
| 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 #3
| Source File: MediaList.js From DMS_React with GNU Affero General Public License v3.0 | 6 votes |
|
MediaList = (props) => {
const [previewVisible, setPreviewVisible] = useState();
const handleToggle = () => {
setPreviewVisible(!previewVisible);
};
return (
<Auxiliary>
<GreedImage mediaList={props.mediaList} handleToggle={handleToggle}/>
<Modal isOpen={previewVisible} toggle={handleToggle}>
<ModalHeader toggle={handleToggle}>Slide Show</ModalHeader>
<ModalBody>
<Carousel mediaList={props.mediaList}/>
</ModalBody>
</Modal>
</Auxiliary>
);
}
Example #4
| 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 #5
| 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 #6
| 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 #7
| 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 #8
| 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 #9
| Source File: index.js From schematic-capture-fe with MIT License | 5 votes |
|
MBody = (cov_1mfbilmftm().s[15]++, styled(ModalBody)`
height: 20rem;
overflow-y: scroll;
`)
Example #10
| Source File: Footer.js From covid19 with MIT License | 5 votes |
|
render() {
const { lang, fullMap, fullPlot, fullTree } = this.props
if (fullMap || fullPlot || fullTree) return <div />
return (
<Fragment>
<div className="footer">
<span>
<a href="https://yliu.io">Steven Liu</a> 2020
</span>
<FaInfoCircle
data-tip={!(isMobile || isIPad13) ? i18n.ABOUT[lang] : null}
size={18}
onClick={() => this.setState({ modal: true })}
/>
<FaGithub
data-tip={!(isMobile || isIPad13) ? i18n.SOURCE_CODE[lang] : null}
size={18}
onClick={() => window.open('https://github.com/stevenliuyi/covid19')}
/>
</div>
<Modal isOpen={this.state.modal} centered={true} toggle={this.toggle}>
<ModalHeader toggle={this.toggle}>{i18n.ABOUT[lang]}</ModalHeader>
<ModalBody className="footer-about">
<div dangerouslySetInnerHTML={{ __html: i18n.ABOUT_TEXT[lang] }} />
<a
className="bmc-button"
target="_blank"
href="https://www.buymeacoffee.com/stevenliuyi"
rel="noopener noreferrer"
>
<img
src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg"
alt="Buy me a coffee"
/>
<span style={{ marginLeft: 15, fontSize: 19 }}>Buy me a coffee</span>
</a>
</ModalBody>
</Modal>
</Fragment>
)
}
Example #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: index.js From schematic-capture-fe with MIT License | 5 votes |
|
MBody = styled(ModalBody)`
height: 50rem;
overflow-y: scroll;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`
Example #13
| Source File: PlacementEditBoard.js From GB-GCGC with MIT License | 5 votes |
|
render() {
const {redirect} = this.state;
if(redirect){
return <Redirect to={"/home"}/>
}
return (
<div className="container">
<Card>
<Card.Body>
<div className="inline">
<Card.Title>
<h5 align="center">
Notice Board-Placements
<Tooltip title="Add">
<Link onClick={this.toggleModal}>
<FontAwesomeIcon icon={faPlus} size="xs" className="p-1 fa-lg" style={{backgroundColor:'#2A324B',color:'white',fontSize:'20',borderRadius:'10'}}/>
</Link>
</Tooltip>
</h5>
</Card.Title>
</div>
<div>
<Table size="sm" responsive striped>
<thead className="p-3" style={{backgroundColor:'#2A324B',color:'white',fontSize:'24px'}}>
<tr>
<th>S.No</th>
<th>Name of the Company</th>
<th>Date</th>
<th>CTC</th>
<th colspan="2">Operations</th>
</tr>
</thead>
<tbody>
{this.userList()}
</tbody>
</Table>
</div>
</Card.Body>
</Card>
<Modal isOpen={this.state.isModalOpen} toggle={this.toggleModal}>
<ModalHeader toggle={this.toggleModal}>
Add Placement Event
</ModalHeader>
<ModalBody>
<Form onSubmit={this.handleSubmit}>
<FormGroup>
<Label htmlfor="company">Name Of The Company</Label>
<Input type="text" id="company" name="company" value={this.state.company} onChange={this.onChangeCompany} />
</FormGroup>
<FormGroup>
<Label htmlFor="date"> From </Label>
<Input type="date" id="date" name="date" value={this.state.date} onChange={this.onChangeDate} />
</FormGroup>
<FormGroup>
<Label htmlFor="CTC"> CTC </Label>
<Input type="text" id="ctc" name="ctc" value={this.state.CTC} onChange={this.onChangeCTC}/>
</FormGroup>
<Button type="submit" value="submit" color="primary">
Submit
</Button>
</Form>
</ModalBody>
</Modal>
</div>
);
}
Example #14
| 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 #15
| 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 #16
| 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 #17
| 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 #18
| 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 #19
| 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 #20
| 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 #21
| 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 #22
| Source File: Widget.js From light-blue-react-template with MIT License | 4 votes |
|
render() {
const {
title,
className,
children,
close,
fullscreen,
collapse,
refresh,
settings,
settingsInverse,
tooltipPlacement,
showTooltip,
bodyClass,
customControls,
customClose,
customExpand,
customCollapse,
customFullscreen,
customReload,
fetchingData,
customDropDown,
customBody,
prompt,
collapsed,
widgetType,
updateWidgetData,
options, //eslint-disable-line
...attributes
} = this.props;
const mainControls = !!(close || fullscreen || collapse || refresh || settings || settingsInverse);
const {
reloading,
fullscreened,
randomId,
height,
hideWidget,
collapseWidget,
modal,
} = this.state;
return (
<React.Fragment>
<section
style={{display: hideWidget ? 'none' : ''}}
className={
classNames('widget', {'fullscreened' : !!fullscreened, 'collapsed' : !!collapseWidget}, s.widget, className, (reloading || fetchingData) ? s.reloading : '')
} {...attributes}
>
{
title && (
typeof title === 'string'
? <h5 className={s.title}>{title}</h5>
: <header className={s.title}>{title}</header>
)
}
{
!customControls && mainControls && (
<div className={`${s.widgetControls} widget-controls`}>
{settings && (
<button><i className="la la-cog" /></button>
)}
{settingsInverse && (
<button className={`bg-gray-transparent ${s.inverse}`}><i
className="la la-cog text-white"
/></button>
)}
{refresh && (
<button onClick={this.handleReload} id={`reloadId-${randomId}`}>
{typeof refresh === 'string' ?
<strong className="text-gray-light">{refresh}</strong> :
<i className="la la-refresh" />}
{showTooltip && (
<UncontrolledTooltip
placement={tooltipPlacement}
target={`reloadId-${randomId}`}
>Reload</UncontrolledTooltip>
)}
</button>
)}
{fullscreen && (
<button onClick={this.handleFullscreen} id={`fullscreenId-${randomId}`}>
<i className={`glyphicon glyphicon-resize-${fullscreened ? 'small' : 'full'}`} />
{showTooltip && (
<UncontrolledTooltip
placement={tooltipPlacement}
target={`fullscreenId-${randomId}`}
>Fullscreen</UncontrolledTooltip>
)}
</button>
)}
{!fullscreened &&
collapse && (
<span>
<button onClick={this.handleCollapse} id={`collapseId-${randomId}`}>
<i className={`la la-angle-${!collapseWidget ? 'down' : 'up'}`} />
{showTooltip && (
<UncontrolledTooltip
placement={tooltipPlacement}
target={`collapseId-${randomId}`}
>Collapse</UncontrolledTooltip>
)}
</button>
</span>
)
}
{!fullscreened && (
(close && !prompt) ? (
<button onClick={this.handleClose} id={`closeId-${randomId}`}>
{typeof close === 'string' ?
<strong className="text-gray-light">{close}</strong> :
<i className="la la-remove" />}
{showTooltip && (
<UncontrolledTooltip
placement={tooltipPlacement}
target={`closeId-${randomId}`}
>Close</UncontrolledTooltip>
)}
</button>
) : (
<button onClick={this.toggleModal} id={`closeId-${randomId}`}>
{typeof close === 'string' ?
<strong className="text-gray-light">{close}</strong> :
<i className="la la-remove" />}
{showTooltip && (
<UncontrolledTooltip
placement={tooltipPlacement}
target={`closeId-${randomId}`}
>Modal</UncontrolledTooltip>
)}
</button>
))}
</div>
)}
{customDropDown && (
<div className={`${s.widgetControls} widget-controls`}>
<UncontrolledDropdown>
<DropdownToggle
tag="span"
data-toggle="dropdown"
>
<i className="glyphicon glyphicon-cog" />
</DropdownToggle>
<DropdownMenu className="bg-widget-transparent" right>
<DropdownItem onClick={this.handleReload} title="Reload">
Reload
<span className="badge badge-pill badge-success animate__animated animate__bounceIn">
<strong>9</strong>
</span>
</DropdownItem>
<DropdownItem onClick={this.handleFullscreen} title={!fullscreened ? "Full Screen" : "Restore"}>{!fullscreened ? "Fullscreen" : "Restore"} </DropdownItem>
<DropdownItem divider />
{!fullscreened && (!prompt ? <DropdownItem onClick={this.handleClose} title="Close">Close</DropdownItem>
: <DropdownItem onClick={this.toggleModal} title="Close">Close</DropdownItem>)}
</DropdownMenu>
</UncontrolledDropdown>
</div>
)}
{
customControls && (
<div className={`${s.widgetControls} widget-controls`}>
{!fullscreened && ((customClose && !prompt) ? (
<button onClick={this.handleClose} id={`closeId-${randomId}`} className={s.customControlItem}><i title="Close" className="glyphicon glyphicon-remove"/></button>
) : (
<button onClick={this.toggleModal} id={`closeId-${randomId}`} className={s.customControlItem}><i title="Close" className="glyphicon glyphicon-remove"/></button>
))}
{!fullscreened && (customCollapse && (
<button onClick={this.handleCollapse} id={`closeId-${randomId}`} className={s.customControlItem}><i title="Collapse" className={`glyphicon glyphicon-chevron-${!collapseWidget ? 'down' : 'up'}`}/></button>
))}
{customFullscreen && (
<button onClick={this.handleFullscreen} id={`closeId-${randomId}`} className={s.customControlItem}><i title="Fullscreen" className={`glyphicon glyphicon-resize-${fullscreened ? 'small' : 'full'}`} /></button>
)}
{customReload && (
<button onClick={this.handleReload} id={`closeId-${randomId}`} className={s.customControlItem}><i title="I am spinning!" className="fa fa-refresh" /></button>
)}
</div>
)
}
<AnimateHeight
duration={ 500 }
height={ height }
>
<div className={`${s.widgetBody} widget-body ${bodyClass}`}>
{reloading || fetchingData ? <Loader className={s.widgetLoader} size={40}/> : customBody ? (
<div className="jumbotron handle bg-default text-white mb-0">
<div className="container">
<h1>Draggable story!</h1>
<p className="lead">
<em>Build</em> your own
interfaces! Sit back and relax.
</p>
<p className="text-center">
<button onClick={this.handleFullscreen} className="btn btn-danger btn-lg">
{!fullscreened ?
<React.Fragment>Fullscreen me!
<i className="fa fa-check" />
</React.Fragment>
: 'Go Back'
}
</button>
</p>
</div>
</div>
) : children}
</div>
</AnimateHeight>
</section>
{prompt && (
<Modal isOpen={modal} toggle={this.toggleModal} id="news-close-modal">
<ModalHeader toggle={this.toggleModal} id="news-close-modal-label">Sure?</ModalHeader>
<ModalBody className="bg-white">
Do you really want to unrevertably remove this super news widget?
</ModalBody>
<ModalFooter>
<Button color="default" onClick={this.toggleModal} data-dismiss="modal">No</Button>{' '}
<Button color="danger" onClick={this.closeWithModal} id="news-widget-remove">Yes,
remove widget</Button>
</ModalFooter>
</Modal>
)}
<div style={{display: fullscreened ? 'block' : 'none'}} className={s.widgetBackground}></div>
</React.Fragment>
);
}
Example #23
| Source File: WorkspaceDetail.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
const projectType = this.state.projectType;
const { params } = this.props.match;
// let link = "namespaces/" + params.namespace + "/services/" + params.name
// // console.log(params.namespace, params.name)
// // console.log(this.state.apiList, "serviceDetail")
// let apitoData = []
// let labels = []
// let selectors = []
// let updateTime = []
// let loadBalancer = []
// let annotations = [];
// let dataFromApi = apiList.map(list => {
// if (list.metadata.annotations == undefined) {
// annotations = "-"
// } else {
// annotations = list.metadata.annotations;
// }
// // labels.push(list.metadata.labels);
// if (list.metadata.managedFields.length > 1) {
// list.metadata.managedFields.map(time => {
// updateTime = time.time
// })
// } else {
// updateTime = list.metadata.managedFields[0].time;
// }
// labels = list.metadata.labels;
// if (list.spec.selector === undefined) {
// selectors = "-"
// } else {
// selectors = list.spec.selector
// }
// if (Object.keys(list.status.loadBalancer).length < 1) {
// loadBalancer = "-"
// } else {
// loadBalancer = list.status.loadBalancer;
// }
// return {
// name: list.metadata.name,
// namespace: list.metadata.namespace,
// createTime: list.metadata.creationTimestamp,
// label: labels,
// ip: list.spec.clusterIP,
// uid: list.metadata.uid,
// selector: selectors,
// port: list.spec.ports,
// sessionAffinity: list.spec.sessionAffinity,
// loadBalancer: loadBalancer,
// type: list.spec.type,
// updateTime: updateTime,
// annotations: annotations
// }
// })
// apitoData = dataFromApi;
// console.log(apitoData, "apitoData");
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Project Detail" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg={4}>
<Card className="checkout-order-summary">
<CardBody>
{/* <div className="p-3 bg-light mb-4"> */}
<h5 className="text-dark font-weight-bold">{params.name}</h5>
<Card>
</Card>
<Row>
<div>
<Link
onClick={() =>
this.setState({ isModal: !this.state.modal })
}
to="#"
className="popup-form btn btn-primary"
>
정보수정
</Link>
</div>
<Modal
size="xl"
isOpen={this.state.isModal}
centered={true}
toggle={() =>
this.setState({ isModal: !this.state.isModal })
}
>
<ModalHeader
toggle={() =>
this.setState({ isModal: !this.state.isModal })
}
>
Form
</ModalHeader>
<ModalBody>
<Form>
<Row>
<Col lg={4}>
<FormGroup>
<Label htmlFor="name">Name</Label>
<Input
type="text"
className="form-control"
id="name"
placeholder="Enter Name"
required
/>
</FormGroup>
</Col>
<Col lg={4}>
<FormGroup>
<Label htmlFor="email">Email</Label>
<Input
type="email"
className="form-control"
id="email"
placeholder="Enter Email"
required
/>
</FormGroup>
</Col>
<Col lg={4}>
<FormGroup>
<Label htmlFor="password">Password</Label>
<Input
type="text"
className="form-control"
id="password"
placeholder="Enter Password"
required
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg={12}>
<FormGroup>
<Label htmlFor="subject">Subject</Label>
<textarea
className="form-control"
id="subject"
rows="3"
></textarea>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg={12}>
<div className="text-right">
<Button
type="submit"
color="primary"
>
Submit
</Button>
</div>
</Col>
</Row>
</Form>
</ModalBody>
</Modal>
<Col sm={3}>
{/* 정보 수정 */}
{/* 더보기 */}
<Dropdown
isOpen={this.state.singlebtn}
toggle={() =>
this.setState({ singlebtn: !this.state.singlebtn })
}
>
<DropdownToggle color="primary" caret>
더보기{" "}
<i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>서비스 수정</DropdownItem>
<DropdownItem>인터넷 접근 수정</DropdownItem>
<DropdownItem>수정(YAML)</DropdownItem>
<DropdownItem>삭제</DropdownItem>
</DropdownMenu>
</Dropdown>
</Col>
</Row>
{/* </div> */}
<div className="table-responsive">
{/* project detail info table */}
<ProjectDetail_detail params={params} projectType={projectType} />
</div>
</CardBody>
</Card>
</Col>
<Col lg={8}>
<Card>
<CardBody>
<Nav pills className="navtab-bg nav-justified">
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "5"
})}
onClick={() => {
this.toggle1("5");
}}
>
리소스 상태
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "6"
})}
onClick={() => {
this.toggle1("6");
}}
>
메타 데이터
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "7"
})}
onClick={() => {
this.toggle1("7");
}}
>
이벤트
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab1}>
<TabPane tabId="5" className="p-3">
<Row>
<Col sm="12">
{/* <ServicePorts params={params} apitoData={apitoData} />
<ServiceDeploy params={params} apitoData={apitoData} />
<ServicePodState params={params} apitoData={apitoData} /> */}
</Col>
</Row>
</TabPane>
<TabPane tabId="6" className="p-3">
<Row>
<Col sm="12">
{/* <DeploymentMeta apitoData={apitoData} /> */}
</Col>
</Row>
</TabPane>
<TabPane tabId="7" className="p-3">
<Row>
<Col sm="12">
{/* <CardText> */}
<div className="table-responsive">
{/* <Table className=" table-centered mb-0 table-nowrap"> */}
<Table hover className=" mb-0 table-centered table-nowrap">
<thead>
<tr>
<th className="border-top-0" style={{ width: "110px" }} scope="col">이벤트</th>
</tr>
</thead>
<tbody>
<tr>
<Alert color="primary" >
A simple primary alert—check it out!
</Alert>
<Alert color="secondary" role="alert">
A simple secondary alert—check it out!
</Alert>
<Alert color="success" role="alert">
A simple success alert—check it out!
</Alert>
<Alert ccolor="danger" role="alert">
A simple danger alert—check it out!
</Alert>
<Alert color="warning" role="alert">
A simple warning alert—check it out!
</Alert>
<Alert color="info" className="mb-0" role="alert">
A simple info alert—check it out!
</Alert>
</tr>
</tbody>
</Table>
</div>
{/* </CardText> */}
</Col>
</Row>
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #24
| Source File: MainCard.js From Frontend with Apache License 2.0 | 4 votes |
|
MainCard = (props) => {
const creds = JSON.parse(localStorage.getItem('creds'))
const uu = props.handle
const [modal, setModal] = useState(false)
const [playlists, setPlaylists] = useState([])
const [error, setErrors] = useState(false)
const [problemAdd, setProblemAdd] = useState({})
useEffect(() => {
// console.log(modal);
})
async function getPlaylists() {
if (!creds) {
alert('Please Login to Add Problems to Playlist')
return
}
const res = await fetch(`https://api.codedigger.tech/lists/userlist/`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${creds.access}`,
},
})
res
.json()
.then((res) => setPlaylists(res))
.catch((error) => setErrors(true))
}
function toggle(event) {
event.preventDefault()
setModal(!modal)
// console.log(modal);
if (!modal) {
// console.log("ppppppp");
getPlaylists()
// fetchData();
}
// console.log(playlists);
}
function addProblem(slug, prob_id, platform) {
if (!creds) {
return
}
let p
if (platform === 'Codeforces') {
p = 'F'
} else if (platform === 'Codechef') {
p = 'C'
} else if (platform === 'Atcoder') {
p = 'A'
} else if (platform === 'UVA') {
p = 'U'
} else if (platform === 'SPOJ') {
p = 'S'
}
// console.log(slug, prob_id, platform)
const result = fetch(`https://api.codedigger.tech/lists/userlist/add`, {
method: 'POST',
headers: {
'Content-type': 'application/json',
Authorization: `Bearer ${creds.access}`,
},
body: JSON.stringify({
prob_id: prob_id,
slug: slug,
platform: p,
}),
})
.then((data) => data.json())
.then((data) =>
data.status === 'FAILED'
? alert('Problem has already been added!')
: alert('Problem is successfully Added to problem list.')
)
}
// console.log(props);
if (props.type === 'ladder') {
if (props.solvedBtn === props.count) {
return (
<>
<div
className={
props.last ? 'cardLast card unsolvedCard' : 'card unsolvedCard'
}
>
<h3 className="title">{props.ProblemData.name}</h3>
<span>
<OverlayTrigger placement="top" overlay={renderTooltip1}>
<span onClick={toggle}>
<FontAwesomeIcon
style={{ cursor: 'pointer' }}
icon={faFolderPlus}
/>
</span>
</OverlayTrigger>
</span>
<Modal isOpen={modal} toggle={toggle}>
<ModalHeader toggle={toggle}>Add to Problem List</ModalHeader>
<ModalBody></ModalBody>
<ul>
{playlists.map((list) => {
return (
<>
<li style={{ marginBottom: '10px' }}>
<span style={{ color: 'white', fontSize: '19px' }}>
{list.name}
</span>
<Button
onClick={() => {
addProblem(
list.slug,
props.ProblemData.prob_id,
props.ProblemData.platform
)
}}
color="success"
style={{
padding: '5px 7px',
position: 'relative',
float: 'right',
right: '20px',
bottom: '0',
borderRadius: '10%',
}}
>
Add
</Button>
</li>
</>
)
})}
</ul>
<ModalFooter>
<Button color="secondary" onClick={toggle}>
Close
</Button>
</ModalFooter>
</Modal>
<h6 className="ml-3 pl-1" style={{ marginTop: '4rem' }}>
Platform: {props.ProblemData.platform}
</h6>
<div className="bar">
<div className="emptybar" />
<div
className={
props.ProblemData.status === 'solved'
? 'filledbar'
: 'exapmplebar'
}
></div>
</div>
<div className={props.last ? 'circleLast' : 'circle'}>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle className="stroke" cx="60" cy="60" r="50" />
</svg>
</div>
<div className="container_card">
<Button
target="_blank"
className="buttondisp"
href={props.ProblemData.url}
>
Solve
</Button>
</div>
</div>
</>
)
} else {
return (
<>
<div className={props.last ? 'cardLast card' : 'card'}>
<h3
className={
props.count > props.solvedBtn && props.solvedBtn != -1
? 'title_hide'
: 'title'
}
>
{props.ProblemData.name}
</h3>
{props.count > props.solvedBtn && props.solvedBtn != -1 ? (
<></>
) : (
<span>
<OverlayTrigger placement="top" overlay={renderTooltip1}>
<span onClick={toggle}>
<FontAwesomeIcon
style={{ cursor: 'pointer' }}
icon={faFolderPlus}
/>
</span>
</OverlayTrigger>
</span>
)}
{/* {console.log(creds.access)} */}
<Modal isOpen={modal} toggle={creds.access ? toggle : null}>
<ModalHeader toggle={toggle}>Add to Problem List</ModalHeader>
<ModalBody></ModalBody>
<ul>
{playlists.map((list) => {
return (
<>
<li
style={{
marginBottom: '10px',
}}
>
<span style={{ color: 'white', fontSize: '19px' }}>
{list.name}
</span>
<Button
onClick={() => {
addProblem(
list.slug,
props.ProblemData.prob_id,
props.ProblemData.platform
)
}}
color="success"
style={{
padding: '5px 7px',
position: 'relative',
float: 'right',
right: '20px',
bottom: '0',
borderRadius: '10%',
marginBottom: '3px',
}}
>
Add
</Button>
</li>
</>
)
})}
</ul>
<ModalFooter>
<Button color="secondary" onClick={toggle}>
Close
</Button>
</ModalFooter>
</Modal>
<h6
className={
props.count > props.solvedBtn && props.solvedBtn != -1
? 'title_hide'
: 'mt-5 ml-3 pl-1'
}
>
Platform: {props.ProblemData.platform}
</h6>
<h3
className={
props.count > props.solvedBtn && props.solvedBtn != -1
? 'title_locked'
: 'title_hide'
}
>
?
</h3>
<div className="bar">
<div className="emptybar" />
<div
className={
props.ProblemData.status === 'solved' ? 'filledbar' : ''
}
></div>
</div>
<div className={props.last ? 'circleLast' : 'circle'}>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle className="stroke" cx="60" cy="60" r="50" />
</svg>
</div>
<div className="container_card">
<a
target="_blank"
href={
props.count > props.solvedBtn && props.solvedBtn != -1
? ''
: props.ProblemData.url
}
>
<div
className={
props.count > props.solvedBtn && props.solvedBtn != -1
? 'lock'
: 'check'
}
></div>
</a>
</div>
</div>
</>
)
}
} else {
if (props.solvedBtn === props.count) {
return (
<>
<div
className={
props.last ? 'cardLast card unsolvedCard' : 'card unsolvedCard'
}
>
<h3 className="title">{props.ProblemData.name}</h3>
<span>
<OverlayTrigger placement="top" overlay={renderTooltip1}>
<span onClick={toggle}>
<FontAwesomeIcon
style={{ cursor: 'pointer' }}
icon={faFolderPlus}
/>
</span>
</OverlayTrigger>
</span>
<Modal isOpen={modal} toggle={toggle}>
<ModalHeader toggle={toggle}>Add to Problem List</ModalHeader>
<ModalBody></ModalBody>
<ul>
{playlists.map((list) => {
return (
<>
<li
style={{
marginBottom: '10px',
}}
>
<span style={{ color: 'white', fontSize: '19px' }}>
{list.name}
</span>
<Button
onClick={() => {
addProblem(
list.slug,
props.ProblemData.prob_id,
props.ProblemData.platform
)
}}
color="success"
style={{
padding: '5px 7px',
position: 'relative',
float: 'right',
right: '20px',
bottom: '0',
borderRadius: '10%',
}}
>
Add
</Button>
</li>
</>
)
})}
</ul>
<ModalFooter>
<Button color="secondary" onClick={toggle}>
Close
</Button>
</ModalFooter>
</Modal>
<h6 className="mt-5 ml-3 pl-1">
Platform: {props.ProblemData.platform}
</h6>
<div className="bar">
<div className="emptybar" />
<div
className={
props.ProblemData.status === 'solved'
? 'filledbar'
: 'exapmplebar'
}
></div>
</div>
<div className={props.last ? 'circleLast' : 'circle'}>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle className="stroke" cx="60" cy="60" r="50" />
</svg>
</div>
<div className="container_card">
<Button
target="_blank"
className="buttondisp"
href={props.ProblemData.url}
>
Solve
</Button>
</div>
</div>
</>
)
} else {
if (props.ProblemData.solved === false) {
return (
<>
<div className={props.last ? 'cardLast card' : 'card'}>
<h3 className="title">{props.ProblemData.name}</h3>
<span>
<OverlayTrigger placement="top" overlay={renderTooltip1}>
<span onClick={toggle}>
<FontAwesomeIcon
style={{ cursor: 'pointer' }}
icon={faFolderPlus}
/>
</span>
</OverlayTrigger>
</span>
<Modal isOpen={modal} toggle={toggle}>
<ModalHeader toggle={toggle}>Add to Problem List</ModalHeader>
<ModalBody></ModalBody>
<ul>
{playlists.map((list) => {
return (
<>
<li
style={{
marginBottom: '10px',
}}
>
<span style={{ color: 'white', fontSize: '19px' }}>
{list.name}
</span>
<Button
onClick={() => {
addProblem(
list.slug,
props.ProblemData.prob_id,
props.ProblemData.platform
)
}}
color="success"
style={{
padding: '5px 7px',
position: 'relative',
float: 'right',
right: '20px',
bottom: '0',
borderRadius: '10%',
}}
>
Add
</Button>
</li>
</>
)
})}
</ul>
<ModalFooter>
<Button color="secondary" onClick={toggle}>
Close
</Button>
</ModalFooter>
</Modal>
<h6 className="mt-5 ml-3 pl-1">
Platform: {props.ProblemData.platform}
</h6>
<div className="bar">
<div className="emptybar" />
<div className="exapmplebar"></div>
</div>
<div className={props.last ? 'circleLast' : 'circle'}>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle className="stroke" cx="60" cy="60" r="50" />
</svg>
</div>
<div className="container_card">
<Button
target="_blank"
className="buttondisp"
href={props.ProblemData.url}
>
Solve
</Button>
</div>
</div>
</>
)
} else {
return (
<>
<div className={props.last ? 'cardLast card' : 'card'}>
<h3 className="title">{props.ProblemData.name}</h3>
<span>
<OverlayTrigger placement="top" overlay={renderTooltip1}>
<span onClick={toggle}>
<FontAwesomeIcon
style={{ cursor: 'pointer' }}
icon={faFolderPlus}
/>
</span>
</OverlayTrigger>
</span>
<Modal isOpen={modal} toggle={toggle}>
<ModalHeader toggle={toggle}>Add to Problem List</ModalHeader>
<ModalBody></ModalBody>
<ul>
{playlists.map((list) => {
return (
<>
<li
style={{
marginBottom: '10px',
}}
>
<span style={{ color: 'white', fontSize: '19px' }}>
{list.name}
</span>
<Button
onClick={() => {
addProblem(
list.slug,
props.ProblemData.prob_id,
props.ProblemData.platform
)
}}
color="success"
style={{
padding: '5px 7px',
position: 'relative',
float: 'right',
right: '20px',
bottom: '0',
borderRadius: '10%',
}}
>
Add
</Button>
</li>
</>
)
})}
</ul>
<ModalFooter>
<Button color="secondary" onClick={toggle}>
Close
</Button>
</ModalFooter>
</Modal>
<h6 className="mt-5 ml-3 pl-1">
Platform: {props.ProblemData.platform}
</h6>
<h3 className="title_hide">?</h3>
<div className="bar">
<div className="emptybar" />
<div className="filledbar"></div>
</div>
<div className={props.last ? 'circleLast' : 'circle'}>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle className="stroke" cx="60" cy="60" r="50" />
</svg>
</div>
<div className="container_card">
<a target="_blank" href={props.ProblemData.url}>
<div className="check"></div>
</a>
</div>
</div>
</>
)
}
}
}
}
Example #25
| Source File: TrainingBoardEdit.js From GB-GCGC with MIT License | 4 votes |
|
render() {
const {redirect} = this.state;
if(redirect){
return <Redirect to={"/home"}/>
}
return (
<div className="container">
<Card>
<Card.Body>
<div className="row">
<Col>
<Card.Title>
<h5 align="center">
Notice Board-Training
<Tooltip title="Add">
<Link onClick={this.toggleModal}>
<FontAwesomeIcon icon={faPlus} size="xs" className="p-1 fa-lg" style={{backgroundColor:'#2A324B',color:'white',fontSize:'20',borderRadius:'10'}}/>
</Link>
</Tooltip>
</h5>
</Card.Title>
</Col>
</div>
<div>
<Table size="sm" responsive striped>
<thead className="p-3" style={{backgroundColor:'#2A324B',color:'white',fontSize:'24px'}}>
<tr>
<th>From</th>
<th>To</th>
<th>Name of the Programme</th>
<th>Status</th>
<th>Operations</th>
</tr>
</thead>
<tbody className="p-1">
{this.userList()}
</tbody>
</Table>
</div>
</Card.Body>
</Card>
<Modal isOpen={this.state.isModalOpen} toggle={this.toggleModal}>
<ModalHeader toggle={this.toggleModal}>
Add Training Event
</ModalHeader>
<ModalBody>
<Form onSubmit={this.handleSubmit}>
<FormGroup>
<Label htmlfor="username">Year Of Passing</Label>
<Input
type="text"
id="YOP"
value ={this.state.YOP}
name="YOP"
onChange={this.onChangeYOP}
/>
</FormGroup>
<FormGroup>
<Label htmlfor="program">Name Of The Program</Label>
<Input type="text" id="program" value={this.state.program} name="program" onChange={this.onChangeProgram} />
</FormGroup>
<FormGroup>
<Label htmlFor="from-date"> From </Label>
<Input type="date" id="from-date" name="from-date" value={this.state.from_date} onChange={this.onChangeFromDate}/>
</FormGroup>
<FormGroup>
<Label htmlFor="to-date"> To </Label>
<Input type="date" id="to-date" name="to-date" value={this.state.to_date} onChange={this.onChangeToDate}/>
</FormGroup>
<Button type="submit" value="submit" color="primary">
Submit
</Button>
</Form>
</ModalBody>
</Modal>
{/* <Modal isOpen={this.state.isModalOpen1} toggle={this.toggleModal1}>
<ModalHeader toggle={this.toggleModal1}>
Edit Training Event
</ModalHeader>
<ModalBody>
<Form onSubmit={this.handleSubmit}>
<FormGroup>
<Label htmlfor="username">Year Of Passing</Label>
<Input
type="text" id="YOP" value ={item.YOP} name="YOP" onChange={this.onChangeYOP}
/>
{console.log("item.name_of_the_program"), console.log(index+1)}
</FormGroup>
<FormGroup>
<Label htmlfor="program">Name Of The Program</Label>
<Input key={index} type="text" id="program" value={item.name_of_the_program} name="program" onChange={this.onChangeProgram} />
</FormGroup>
<FormGroup>
<Label htmlFor="from-date"> From </Label>
<Input type="date" id="from-date" name="from-date" value={this.state.from_date} onChange={this.onChangeFromDate}/>
</FormGroup>
<FormGroup>
<Label htmlFor="to-date"> To </Label>
<Input type="date" id="to-date" name="to-date" value={this.state.to_date} onChange={this.onChangeToDate}/>
</FormGroup>
<Button type="submit" value="submit" color="primary">
Submit
</Button>
</Form>
</ModalBody>
</Modal>*/}
</div>
);
}
Example #26
| 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 #27
| Source File: bidHistory.js From ErgoAuctionHouse with MIT License | 4 votes |
|
render() {
let data = {
labels: this.state.data.labels,
datasets: [
{
label: `Bid Amount in ${this.props.box.currency}`,
backgroundColor: 'rgba(35, 67, 123, 1)',
borderWidth: 1,
hoverBackgroundColor: 'rgba(53, 102, 187, 1)',
data: this.state.data.bids,
},
],
};
return (
<Modal
size="lg"
isOpen={this.props.isOpen}
toggle={this.props.close}
className={this.props.className}
>
<ModalHeader toggle={this.props.close}>
<ReactTooltip/>
<span className="fsize-1 text-muted">
Bid history of{' '}
{friendlyToken(this.props.box.assets[0], false, 5)}.
Click on bars to see transaction.
</span>
</ModalHeader>
<ModalBody>
<div>
<Bar
onElementsClick={(e) => {
if (e.length > 0 && e[0]._index !== undefined)
this.showTx(
this.state.data.txIds[e[0]._index]
);
}}
data={data}
width={100}
height={50}
options={{
maintainAspectRatio: true,
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
callback: this.callbackFn,
},
},
],
},
}}
/>
</div>
<hr/>
<ResponsiveContainer height={40}>
<div
className="mt-1"
style={{
display: 'flex',
justifyContent: 'center',
}}
>
{this.state.remains && !this.state.loading && (
<div>
<ReactTooltip
effect="solid"
place="right"
/>
<div
data-tip={`load ${maxLoad} more bids`}
id="loadMoreIcn"
style={{
display: 'flex',
justifyContent: 'center',
}}
className="widget-subheading m-1"
>
<span>
Latest{' '}
{this.state.data.txIds.length} Bids
Are Loaded
</span>
<i
onClick={() => {
this.setState({
loading: true,
});
this.loadBids(
this.state.nextTx,
maxLoad
);
}}
style={{
fontSize: '1.5rem',
marginLeft: '5px',
}}
className="pe-7s-plus icon-gradient bg-night-sky"
/>
</div>
</div>
)}
{!this.state.remains && (
<span>
{this.state.data.txIds.length === 1 && (
<span>All Bids Are Loaded</span>
)}
{this.state.data.txIds.length > 1 && (
<span>
All {this.state.data.txIds.length}{' '}
Bids Are Loaded
</span>
)}
</span>
)}
<br/>
<Row>
<SyncLoader
css={override}
size={8}
color={'#0086d3'}
loading={this.state.loading}
/>
</Row>
</div>
</ResponsiveContainer>
</ModalBody>
</Modal>
);
}
Example #28
| 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 #29
| Source File: BuyButtonContainer.jsx From defizap-frontend with GNU General Public License v2.0 | 4 votes |
|
renderModal() {
const { open, value } = this.state;
const {
name,
ensAddress,
gasLimitRequirement,
hasReturnsChart,
tokenInfo,
tokenAddress,
paused,
type,
stats,
minValue
} = this.props;
return (
<Modal isOpen={open} toggle={this.toggle} centered>
<ModalBody>
<form onSubmit={this.handleSubmit}>
<div className={`${styles.buycontainer}`}>
<h1>{name}</h1>
{paused ? (
'Temporarily Paused'
) : (
<div className={`${styles.buycontents}`}>
<p className={`${styles.buytext} pt-4 mr-2`}>INPUT</p>
<input
min={minValue || 0.01}
type="number"
step={0.001}
value={value}
onChange={this.handleChange}
placeholder="0.0"
required
style={
value && value.length > 3
? {
width: `${90 + value.length * 20}px`
}
: {
width: '90px'
}
}
/>
<p className={`${styles.buytext} pt-4 ml-2`}>ETH</p>
</div>
)
}
{hasReturnsChart ? (
<Simulator
value={this.state.value}
tokenInfo={tokenInfo}
tokenAddress={tokenAddress}
type={type}
name={name}
stats={stats}
/>
) : null}
{/* <div className='justify-content-center pl-4'>Slippage</div> */}
{/* {hasReturnsChart ?
<Row className="justify-content-center pe-4 pt-2">
<div className='justify-content-center pl-4'>
Slippage{' '}
<OverlayTrigger
overlay={<Tooltip>Our zaps are designed to reject any transaction that registers over 5% slippage. We do not control the slippage that eventually gets executed (under 5%) on UniSwap.</Tooltip>}
placement="right"
>
<FontAwesomeIcon icon={faQuestionCircle} />
</OverlayTrigger>
</div>
</Row>
: null} */}
{paused ? null : (
<div>
<Row className="justify-content-center py-3">
Select Transaction Speed:{' '}
</Row>
<Row className="justify-content-center">
<ToggleButtonGroup
type="radio"
name="gasOptions"
value={this.state.gasMode}
onChange={this.setGasMode}
>
<ToggleButton
variant="outline-success"
size="lg"
value="average"
>
Slow
</ToggleButton>
<ToggleButton
variant="outline-success"
size="lg"
value="fast"
>
Average
</ToggleButton>
<ToggleButton
size="lg"
value="fastest"
variant="outline-success"
>
Fast
</ToggleButton>
</ToggleButtonGroup>
</Row>
</div>
)}
{/* <Row className='justify-content-center py-2'>1.3 Gwei ($0.28)</Row> */}
{paused ? null : (
<Row>
<Column sm={12} mb={8}>
<p className="pt-2" style={{ fontSize: '0.75em' }}>
Alternatively send ETH directly to {ensAddress} using
<i> minimum </i>
<span onCopy={gasLimitRequirement} />
{gasLimitRequirement} gas.
</p>
</Column>
</Row>
)}
</div>
<div className="my-4 row justify-content-center">
{paused ? null : (
<input
type="submit"
className="font20 mx-3 btn btn-outline-success btn-large shadow px-4 py-2"
value="Confirm"
/>
)}
<div
className="font20 btn btn-outline-dark btn-large shadow px-4 py-2 mx-3"
onClick={this.toggle}
>
Cancel
</div>
{this.state.showLoader ? <Loading /> : null}
{this.state.showCross ? <Rejected /> : null}
{this.state.showCheck ? (
<Confirmed txId={this.state.txId} />
) : null}
</div>
</form>
</ModalBody>
</Modal>
);
}
