reactstrap#Alert JavaScript Examples
The following examples show how to use
reactstrap#Alert.
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: index.js From tunnel-tool with MIT License | 6 votes |
|
DeviceWarning = ({ device }) => {
const {
deviceid,
service: { needRestart, upgradable }
} = device;
return (
<InfoUtils.Modal
title={"Warnings for the device " + deviceid}
icon={<i className="fa fa-exclamation-triangle text-warning"></i>}
>
{needRestart && (
<Alert color="warning" fade={false}>
<IconWarning /> You need to restart the device's local side service.
</Alert>
)}
{upgradable && (
<Alert color="warning" fade={false}>
<IconInfo /> There is an update to the device's local side service.{" "}
<DeviceServiceUpdate device={device} />
</Alert>
)}
</InfoUtils.Modal>
);
}
Example #2
| Source File: index.js From gobench with Apache License 2.0 | 6 votes |
|
render() {
return (
<div className="row">
<div className="col-lg-6">
<h5 className="mb-3">
<strong>Simple</strong>
</h5>
<Alert color="primary">This is a primary alert — check it out!</Alert>
<Alert color="secondary">This is a secondary alert — check it out!</Alert>
<Alert color="success">This is a success alert — check it out!</Alert>
<Alert color="danger">This is a danger alert — check it out!</Alert>
<Alert color="warning">This is a warning alert — check it out!</Alert>
<Alert color="info">This is a info alert — check it out!</Alert>
<Alert color="light">This is a light alert — check it out!</Alert>
<Alert color="dark">This is a dark alert — check it out!</Alert>
</div>
<div className="col-lg-6">
<h5 className="mb-3">
<strong>Alert with List</strong>
</h5>
<Alert color="light">
<p>
<strong>Read documentation and check devices:</strong>
</p>
<ul>
<li>Connections</li>
<li>Cables & Accessories</li>
<li>Display & Touch</li>
<li>Drivers</li>
</ul>
</Alert>
</div>
</div>
)
}
Example #3
| Source File: Notification.js From sofia-react-template with MIT License | 6 votes |
|
export default function Notification({ ...props }) {
const [notificationOpen, setNotificationClose] = useState(true)
const icon = getIconByType(props.type)
const closeNotification = () => {
setNotificationClose(!notificationOpen)
}
return (
<>
<Alert
className={s.notificationContainer}
style={{backgroundColor: colors[props.type]}}
isOpen={notificationOpen}
toggle={() => closeNotification()}
>
<div className={s.notificationIconContainer}>
{props.withIcon && <img src={icon} alt="..."/>}
</div>
<div className={s.messageContainer}>
<span dangerouslySetInnerHTML={{__html: notificationMessages[props.type]}}></span>
</div>
</Alert>
</>
)
}
Example #4
| Source File: AlertProvider.jsx From maps with MIT License | 6 votes |
|
export function AlertProvider(props) {
const [open, setOpen] = useState(false);
const [message, setMessage] = useState();
const handleClose = useCallback(() => {
setOpen(false);
}, [setOpen]);
const handleOpen = useCallback(
(message) => {
setMessage(message);
setOpen(true);
window.setTimeout(() => {
setOpen(false);
}, 10000);
},
[setMessage, setOpen]
);
return (
<AlertContext.Provider value={[handleOpen, handleClose]}>
<Alert
color="info"
isOpen={open}
fade={true}
style={{ marginBottom: "0rem" }}
>
{message}
</Alert>
{props.children}
</AlertContext.Provider>
);
}
Example #5
| Source File: ReindexDokus.jsx From Edlib with GNU General Public License v3.0 | 6 votes |
|
ReindexDokus = () => {
const [{ loading, error, success }, setStatus] = React.useState({
loading: false,
error: false,
});
const onClick = React.useCallback(() => {
setStatus({
loading: true,
error: false,
});
request('/dokus/v1/recommender/index-all', 'POST', { json: false })
.then(() => {
setStatus({
loading: false,
error: false,
success: true,
});
})
.catch((error) => {
setStatus({
loading: false,
error: true,
});
});
}, []);
return (
<>
{error && <Alert color="danger">Noe skjedde</Alert>}
{success && <Alert color="success">Vellykket!</Alert>}
<Button color="primary" onClick={onClick} disabled={loading}>
{loading && <Spinner />}
{!loading && 'Indekser dokus'}
</Button>
</>
);
}
Example #6
| Source File: Section.js From GB-GCGC with MIT License | 6 votes |
|
render(){
return (
<div class="container-fluid">
<Alert color="danger" className="Rounded p-3" >
<CardTitle align="left">{this.state.sect}</CardTitle>
<CardSubtitle align="left">
<Row>
<Col style={{"padding":"0px"}}>Section</Col>
<Col style={{"textAlign":"end"}}><Button onClick={()=>{this.handleModalsection()}}>Edit</Button></Col>
</Row>
</CardSubtitle>
<Modal show={this.state.show} onHide={()=>this.handleModalsection()} >
<Modal.Header closeButton>Edit Section</Modal.Header>
<Modal.Body>
<form onSubmit={this.onSubmitsection}>
<Table className="section" responsive>
<tbody>
<tr>
<td>
<input type="text" name="section" value={this.state.sect}
onChange={this.onChangesection} />
</td>
<td>
<div className={"form-group"}>
<input type={"submit"} value={"Submit"} className={"btn btn-primary"}/>
</div>
</td>
</tr>
</tbody>
</Table>
</form>
</Modal.Body>
</Modal>
</Alert>
</div>
);
}
Example #7
| Source File: FlashAlert.js From nodejs-rest-api-boilerplate with MIT License | 6 votes |
|
render() {
const { errors } = this.props;
return (errors.data !== undefined) & this.state.showAlert ? (
<Alert
color="warning"
style={{
position: "absolute",
top: 100,
right: 50,
paddingRight: 20,
zIndex: 1
}}
>
<span className="alert-inner--text">
<strong>Error!</strong> <a>{errors.data.email}</a>
</span>
</Alert>
) : (
<div />
);
}
Example #8
| Source File: index.js From HexactaLabs-NetCore_React-Final with Apache License 2.0 | 5 votes |
|
Create = ({
create: onSubmit,
goBack: onCancel,
productTypeOptions,
providerOptions,
initialValues
}) => {
return (
<Container fluid>
<Row>
<h2>Nuevo Producto</h2>
</Row>
{!productTypeOptions.length ? (
<Row>
<Col>
<Alert color="warning">
No existen categorías. Click
<Link to="../product-type/create">aquí</Link> para cargar nuevas
categorías.
</Alert>
</Col>
</Row>
) : null}
{!providerOptions.length ? (
<Row>
<Col>
<Alert color="warning">
No existen proveedores. Click
<Link to="../provider/create">aquí</Link> para crear uno nuevo.
</Alert>
</Col>
</Row>
) : null}
<Row>
<Col>
<Form
initialValues={initialValues}
productTypeOptions={productTypeOptions}
providerOptions={providerOptions}
onSubmit={onSubmit}
handleCancel={onCancel}
/>
</Col>
</Row>
</Container>
);
}
Example #9
| Source File: index.js From mern-course-bootcamp with MIT License | 5 votes |
|
export default function Register({ history }) {
const { setIsloggedIn } = useContext(UserContext);
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")
const [firstName, setFirstName] = useState("")
const [lastName, setLastName] = useState("")
const [error, setError] = useState(false);
const [errorMessage, setErrorMessage] = useState("")
const handleSubmit = async evt => {
evt.preventDefault();
if (email !== "" && password !== "" && firstName !== "" && lastName !== "") {
const response = await api.post('/user/register', { email, password, firstName, lastName })
const user = response.data.user || false;
const user_id = response.data.user_id || false;
if (user && user_id) {
localStorage.setItem('user', user)
localStorage.setItem('user_id', user_id)
setIsloggedIn(true)
history.push('/')
} else {
const { message } = response.data
setError(true)
setErrorMessage(message)
setTimeout(() => {
setError(false)
setErrorMessage("")
}, 2000)
}
} else {
setError(true)
setErrorMessage("You need to fill all the Inputs")
setTimeout(() => {
setError(false)
setErrorMessage("")
}, 2000)
}
}
return (
<Container>
<h2>Register:</h2>
<p>Please <strong>Register</strong> for a new account</p>
<Form onSubmit={handleSubmit}>
<div className="input-group">
<FormGroup className="mb-2 mr-sm-2 mb-sm-0">
<Input type="text" name="firstName" id="firstName" placeholder="Your first name" onChange={evt => setFirstName(evt.target.value)} />
</FormGroup>
<FormGroup className="mb-2 mr-sm-2 mb-sm-0">
<Input type="text" name="lastName" id="lastName" placeholder="Your last name" onChange={evt => setLastName(evt.target.value)} />
</FormGroup>
<FormGroup className="mb-2 mr-sm-2 mb-sm-0">
<Input type="email" name="email" id="email" placeholder="Your email" onChange={evt => setEmail(evt.target.value)} />
</FormGroup>
<FormGroup className="mb-2 mr-sm-2 mb-sm-0">
<Input type="password" name="password" id="password" placeholder="Your password" onChange={evt => setPassword(evt.target.value)} />
</FormGroup>
</div>
<FormGroup>
<Button className="submit-btn">Submit</Button>
</FormGroup>
<FormGroup>
<Button className="secondary-btn" onClick={() => history.push("/login")}>Login instead?</Button>
</FormGroup>
</Form>
{error ? (
<Alert className="event-validation" color="danger">{errorMessage}</Alert>
) : ""}
</Container>
);
}
Example #10
| Source File: ErrorMessage.js From study-chain with MIT License | 5 votes |
|
ErrorMessage = ({ message, classes }) => (
<div className={classes.error}>
<Alert color="danger">{message}</Alert>
</div>
)
Example #11
| Source File: index.js From mern-course-bootcamp with MIT License | 5 votes |
|
export default function Login({ history }) {
const { setIsloggedIn } = useContext(UserContext);
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")
const [error, setError] = useState(false)
const [errorMessage, setErrorMessage] = useState("false")
const handleSubmit = async evt => {
evt.preventDefault();
const response = await api.post('/login', { email, password })
const user_id = response.data.user_id || false;
const user = response.data.user || false;
try {
if (user && user_id) {
localStorage.setItem('user', user)
localStorage.setItem('user_id', user_id)
setIsloggedIn(true);
history.push('/')
} else {
const { message } = response.data
setError(true)
setErrorMessage(message)
setTimeout(() => {
setError(false)
setErrorMessage("")
}, 2000)
}
} catch (error) {
setError(true)
setErrorMessage("Error, the server returned an error")
}
}
return (
<Container>
<h2>Login:</h2>
<p>Please <strong>Login</strong> into your account</p>
<Form onSubmit={handleSubmit}>
<div className="input-group">
<FormGroup className="form-group-"></FormGroup>
<FormGroup className="mb-2 mr-sm-2 mb-sm-0">
<Input type="email" name="email" id="email" placeholder="Your email" onChange={evt => setEmail(evt.target.value)} />
</FormGroup>
<FormGroup className="mb-2 mr-sm-2 mb-sm-0">
<Input type="password" name="password" id="password" placeholder="Your password" onChange={evt => setPassword(evt.target.value)} />
</FormGroup>
</div>
<FormGroup>
<Button className="submit-btn">Submit</Button>
</FormGroup>
<FormGroup>
<Button className="secondary-btn" onClick={() => history.push("/register")}>New Account</Button>
</FormGroup>
</Form>
{error ? (
<Alert className="event-validation" color="danger"> {errorMessage}</Alert>
) : ""}
</Container>
);
}
Example #12
| Source File: Branch.js From GB-GCGC with MIT License | 5 votes |
|
render(){
return (
<div class="container-fluid">
<Alert color="success" className="Rounded p-3" >
<CardTitle align="left">{this.state.branch.slice(0,3)}</CardTitle>
<CardSubtitle align="left">
<Row>
<Col style={{"padding":"0px"}}>
Branch
</Col>
<Col style={{"textAlign":"end"}}>
<Button style={{"background-color": "rgb(42, 50, 75)"}} onClick={()=>{this.handleModalbranch()}}>Edit</Button>
</Col>
</Row>
</CardSubtitle>
<Modal show={this.state.show} onHide={()=>this.handleModalbranch()} >
<Modal.Header closeButton>Edit Branch</Modal.Header>
<Modal.Body>
<form onSubmit={this.onSubmitbranch}>
<Table className="branchMarks" responsive>
<tbody>
<tr>
<td>
<input type="text" name="Branch" value={this.state.branch}
onChange={this.onChangebranch} />
</td>
<td>
<div className={"form-group"}>
<input type={"submit"} value={"Submit"} className={"btn btn-primary"}/>
</div>
</td>
</tr>
</tbody>
</Table>
</form>
</Modal.Body>
</Modal>
</Alert>
</div>
);
}
Example #13
| Source File: ForgetPassword.js From gedge-platform with Apache License 2.0 | 5 votes |
|
render() {
return (
<React.Fragment>
<div className="home-btn d-none d-sm-block">
<Link to="/"><i className="mdi mdi-home-variant h2 text-white"></i></Link>
</div>
<div>
<Container fluid className="p-0">
<Row className="no-gutters">
<Col lg={4}>
<div className="authentication-page-content p-4 d-flex align-items-center min-vh-100">
<div className="w-100">
<Row className="justify-content-center">
<Col lg={9}>
<div>
<div className="text-center">
<div>
<Link to="/" className="logo"><img src={logodark} height="50" alt="logo" /></Link>
</div>
<h4 className="font-size-18 mt-4">Reset Password</h4>
<p className="text-muted">Reset your password</p>
</div>
<div className="p-2 mt-5">
{this.props.forgetError && this.props.forgetError ?
<Alert color="danger" className="mb-4">{this.props.forgetError}</Alert> : null}
{
this.props.message ?
<Alert color="success" className="mb-4">{this.props.message}</Alert> : null
}
<AvForm className="form-horizontal" onValidSubmit={this.handleValidSubmit}>
<FormGroup className="auth-form-group-custom mb-4">
<i className="ri-mail-line auti-custom-input-icon"></i>
<Label htmlFor="useremail">Email</Label>
<AvField name="useremail" value={this.state.username} type="email" validate={{ email: true, required: true }} className="form-control" id="useremail" placeholder="Enter email" />
</FormGroup>
<div className="mt-4 text-center">
<Button color="primary" className="w-md waves-effect waves-light" type="submit">{this.props.loading ? "Loading..." : "Reset"}</Button>
</div>
</AvForm>
</div>
<div className="mt-5 text-center">
<p>Don't have an account ? <Link to="/login" className="font-weight-medium text-primary"> Log in </Link> </p>
<p>© 2021 Gedge Platform</p>
</div>
</div>
</Col>
</Row>
</div>
</div>
</Col>
<Col lg={8}>
<div className="authentication-bg">
<div className="bg-overlay"></div>
</div>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #14
| Source File: studentdetails.js From GB-GCGC with MIT License | 5 votes |
|
function studentdetails() {
return (
<div>
<div className='container'>
<Row>
<Col md="4" style={{marginRight:'2rem'}}>
<Card color="success" className="Rounded p-3">
<CardTitle align="left">90%</CardTitle>
<CardSubtitle align="left">Tenth Percentage</CardSubtitle>
</Card>
</Col>
<Col md="4" style={{marginRight:'2rem'}}>
<Card color="warning" className="Rounded p-3">
<CardTitle align="left">90%</CardTitle>
<CardSubtitle align="left">Inter Percentage</CardSubtitle>
</Card>
</Col>
<Col md="4" style={{marginRight:'2rem'}}>
<Card color="danger" className="Rounded p-3">
<CardTitle align="left">90%</CardTitle>
<CardSubtitle align="left">B Tech Percentage</CardSubtitle>
</Card>
</Col>
</Row>
</div>
<br></br>
<Collapsible trigger="More Info">
<br></br>
<Row>
<Col md="4">
<Alert color="success" className="Rounded p-3">
<CardTitle align="left">CSE</CardTitle>
<CardSubtitle align="left">Branch</CardSubtitle>
</Alert>
</Col>
<Col md="4">
<Alert color="warning" className="Rounded p-3">
<CardTitle align="left">A</CardTitle>
<CardSubtitle align="left">Pass Category</CardSubtitle>
</Alert>
</Col>
<Col md="4">
<Alert color="danger" className="Rounded p-3">
<CardTitle align="left">B</CardTitle>
<CardSubtitle align="left">Section</CardSubtitle>
</Alert>
</Col>
</Row>
</Collapsible>
</div>
);
}
Example #15
| Source File: ForgetPassword.js From gedge-platform with Apache License 2.0 | 5 votes |
|
render() {
return (
<React.Fragment>
<div className="home-btn d-none d-sm-block">
<Link to="/"><i className="mdi mdi-home-variant h2 text-white"></i></Link>
</div>
<div>
<Container fluid className="p-0">
<Row className="no-gutters">
<Col lg={4}>
<div className="authentication-page-content p-4 d-flex align-items-center min-vh-100">
<div className="w-100">
<Row className="justify-content-center">
<Col lg={9}>
<div>
<div className="text-center">
<div>
<Link to="/" className="logo"><img src={logodark} height="20" alt="logo" /></Link>
</div>
<h4 className="font-size-18 mt-4">Reset Password</h4>
<p className="text-muted">Reset your password</p>
</div>
<div className="p-2 mt-5">
<Alert color="success" className="mb-4">Enter your Email and instructions will be sent to you!</Alert>
<AvForm className="form-horizontal">
<FormGroup className="auth-form-group-custom mb-4">
<i className="ri-mail-line auti-custom-input-icon"></i>
<Label for="useremail">Email</Label>
<AvField name="username" type="email" className="form-control" id="useremail" placeholder="Enter email" />
</FormGroup>
<div className="mt-4 text-center">
<Button color="primary" className="w-md waves-effect waves-light" type="submit">{this.props.loading ? "Loading..." : "Reset"}</Button>
</div>
</AvForm>
</div>
<div className="mt-5 text-center">
<p>Don't have an account ? <Link to="/auth-login" className="font-weight-medium text-primary"> Log in </Link> </p>
<p>© 2021 Gedge Platform</p>
</div>
</div>
</Col>
</Row>
</div>
</div>
</Col>
<Col lg={8}>
<div className="authentication-bg">
<div className="bg-overlay"></div>
</div>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #16
| Source File: AddRoom.js From react-js-chat-webapp-example with MIT License | 5 votes |
|
function AddRoom() {
const history = useHistory();
const [room, setRoom] = useState({ roomname: '' });
const [showLoading, setShowLoading] = useState(false);
const ref = firebase.database().ref('rooms/');
const save = (e) => {
e.preventDefault();
setShowLoading(true);
ref.orderByChild('roomname').equalTo(room.roomname).once('value', snapshot => {
if (snapshot.exists()) {
return (
<div>
<Alert color="primary">
Room name already exist!
</Alert>
</div>
);
} else {
const newRoom = firebase.database().ref('rooms/').push();
newRoom.set(room);
history.goBack();
setShowLoading(false);
}
});
};
const onChange = (e) => {
e.persist();
setRoom({...room, [e.target.name]: e.target.value});
}
return (
<div>
{showLoading &&
<Spinner color="primary" />
}
<Jumbotron>
<h2>Please enter new Room</h2>
<Form onSubmit={save}>
<FormGroup>
<Label>Room Name</Label>
<Input type="text" name="roomname" id="roomname" placeholder="Enter Room Name" value={room.roomname} onChange={onChange} />
</FormGroup>
<Button variant="primary" type="submit">
Add
</Button>
</Form>
</Jumbotron>
</div>
);
}
Example #17
| Source File: index.js From mern-course-bootcamp with MIT License | 4 votes |
|
export default function Dashboard({ history }) {
const [events, setEvents] = useState([])
const user = localStorage.getItem('user')
const user_id = localStorage.getItem('user_id')
const [rSelected, setRSelected] = useState(null)
const [error, setError] = useState(false);
const [success, setSuccess] = useState(false)
const [messageHandler, setMessageHandler] = useState('')
const [eventsRequest, setEventsRequest] = useState([])
const [dropdownOpen, setDropDownOpen] = useState(false)
const [eventRequestMessage, setEventRequestMessage] = useState('')
const [eventRequestSuccess, setEventRequestSuccess] = useState(false)
const toggle = () => setDropDownOpen(!dropdownOpen);
useEffect(() => {
getEvents()
}, [])
const socket = useMemo(
() =>
socketio.connect('http://localhost:8000/', { query: { user: user_id } }),
[user_id]
);
useEffect(() => {
socket.on('registration_request', data => setEventsRequest([...eventsRequest, data]));
}, [eventsRequest, socket])
const filterHandler = (query) => {
setRSelected(query)
getEvents(query)
}
const myEventsHandler = async () => {
try {
setRSelected('myevents')
const response = await api.get('/user/events', { headers: { user } })
setEvents(response.data.events)
} catch (error) {
history.push('/login');
}
}
const getEvents = async (filter) => {
try {
const url = filter ? `/dashboard/${filter}` : '/dashboard';
const response = await api.get(url, { headers: { user } })
setEvents(response.data.events)
} catch (error) {
history.push('/login');
}
};
const deleteEventHandler = async (eventId) => {
try {
await api.delete(`/event/${eventId}`, { headers: { user: user } });
setSuccess(true)
setMessageHandler('The event was deleted successfully!')
setTimeout(() => {
setSuccess(false)
filterHandler(null)
setMessageHandler('')
}, 2500)
} catch (error) {
setError(true)
setMessageHandler('Error when deleting event!')
setTimeout(() => {
setError(false)
setMessageHandler('')
}, 2000)
}
}
const registrationRequestHandler = async (event) => {
try {
await api.post(`/registration/${event.id}`, {}, { headers: { user } })
setSuccess(true)
setMessageHandler(`The request for the event ${event.title} was successfully!`)
setTimeout(() => {
setSuccess(false)
filterHandler(null)
setMessageHandler('')
}, 2500)
} catch (error) {
setError(true)
setMessageHandler(`The request for the event ${event.title} wasn't successfully!`)
setTimeout(() => {
setError(false)
setMessageHandler('')
}, 2000)
}
}
const acceptEventHandler = async (eventId) => {
try {
await api.post(`/registration/${eventId}/approvals`, {}, { headers: { user } })
setEventRequestSuccess(true)
setEventRequestMessage('Event approved successfully!')
removeNotificationFromDashboard(eventId)
setTimeout(() => {
setEventRequestSuccess(false)
setEventRequestMessage('')
}, 2000)
} catch (err) {
console.log(err)
}
}
const rejectEventHandler = async (eventId) => {
try {
await api.post(`/registration/${eventId}/rejections`, {}, { headers: { user } })
setEventRequestSuccess(true)
setEventRequestMessage('Event rejected successfully!')
removeNotificationFromDashboard(eventId)
setTimeout(() => {
setEventRequestSuccess(false)
setEventRequestMessage('')
}, 2000)
} catch (err) {
console.log(err)
}
}
const removeNotificationFromDashboard = (eventId) => {
const newEvents = eventsRequest.filter((event) => event._id !== eventId)
setEventsRequest(newEvents)
}
return (
<>
<ul className="notifications">
{eventsRequest.map(request => {
return (
<li key={request._id}>
<div>
<strong>{request.user.email} </strong> is requesting to register to your Event <strong>{request.event.title}</strong>
</div>
<ButtonGroup>
<Button color="secondary" onClick={() => acceptEventHandler(request._id)}>Accept</Button>
<Button color="danger" onClick={() => rejectEventHandler(request._id)}>Reject</Button>
</ButtonGroup>
</li>
)
})}
</ul>
{eventRequestSuccess ? <Alert color="success"> {eventRequestMessage}</Alert> : ""}
<div className="filter-panel">
<Dropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle color="primary" caret>
Filter
</DropdownToggle>
<DropdownMenu>
<DropdownItem onClick={() => filterHandler(null)} active={rSelected === null} >All Sports</DropdownItem>
<DropdownItem onClick={myEventsHandler} active={rSelected === 'myevents'} >My Events</DropdownItem>
<DropdownItem onClick={() => filterHandler("running")} active={rSelected === 'running'} >Running</DropdownItem>
<DropdownItem onClick={() => filterHandler("cycling")} active={rSelected === 'cycling'} >Cycling</DropdownItem>
<DropdownItem color="primary" onClick={() => filterHandler('swimming')} active={rSelected === 'swimming'} >Swimming</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<ul className="events-list">
{events.map(event => (
< li key={event._id} >
<header style={{ backgroundImage: `url(${event.thumbnail_url})` }}>
{event.user === user_id ? <div><Button color="danger" size="sm" onClick={() => deleteEventHandler(event._id)}>Delete</Button></div> : ""}
</header>
<strong>{event.title}</strong>
<span>Event Date: {moment(event.date).format('l')}</span>
<span>Event Price: {parseFloat(event.price).toFixed(2)}</span>
<span>Event Description: {event.description}</span>
<Button color="primary" onClick={() => registrationRequestHandler(event)}>Registration Request</Button>
</li>
))}
</ul>
{
error ? (
<Alert className="event-validation" color="danger"> {messageHandler} </Alert>
) : ""
}
{
success ? (
<Alert className="event-validation" color="success"> {messageHandler}</Alert>
) : ""
}
</>
)
}
Example #18
| Source File: Login.js From light-blue-react-template with MIT License | 4 votes |
|
render() {
const { from } = this.props.location.state || { from: { pathname: '/app' } }; // eslint-disable-line
// cant access login page while logged in
if (Login.isAuthenticated(JSON.parse(localStorage.getItem('authenticated')))) {
return (
<Redirect to={from} />
);
}
return (
<div className="auth-page">
<Container>
<Widget className="widget-auth mx-auto" title={<h3 className="mt-0">Login to your Web App</h3>}>
<p className="widget-auth-info">
Use your email to sign in.
</p>
<form onSubmit={this.doLogin}>
{
this.props.errorMessage && (
<Alert className="alert-sm widget-middle-overflow rounded-0" color="danger">
{this.props.errorMessage}
</Alert>
)
}
<FormGroup className="mt">
<Label for="email">Email</Label>
<InputGroup className="input-group-no-border">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="la la-user text-white"/>
</InputGroupText>
</InputGroupAddon>
<Input id="email" className="input-transparent pl-3" value={this.state.email} onChange={this.changeEmail} type="email"
required name="email" placeholder="Email"/>
</InputGroup>
</FormGroup>
<FormGroup>
<Label for="password">Password</Label>
<InputGroup className="input-group-no-border">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="la la-lock text-white"/>
</InputGroupText>
</InputGroupAddon>
<Input id="password" className="input-transparent pl-3" value={this.state.password}
onChange={this.changePassword} type="password"
required name="password" placeholder="Password"/>
</InputGroup>
</FormGroup>
<div className="bg-widget auth-widget-footer">
<Button type="submit" color="danger" className="auth-btn"
size="sm" style={{color: '#fff'}}>
<span className="auth-btn-circle" style={{marginRight: 8}}>
<i className="la la-caret-right"/>
</span>
{this.props.isFetching ? 'Loading...' : 'Login'}
</Button>
<p className="widget-auth-info mt-4">
Don't have an account? Sign up now!
</p>
<Link className="d-block text-center mb-4" to="register">Create an Account</Link>
<div className="social-buttons">
<Button color="primary" className="social-button">
<i className="social-icon social-google"/>
<p className="social-text">GOOGLE</p>
</Button>
<Button color="success" className="social-button">
<i className="social-icon social-microsoft"
style={{backgroundImage: `url(${microsoft})`}}/>
<p className="social-text" style={{color: '#fff'}}>MICROSOFT</p>
</Button>
</div>
</div>
</form>
</Widget>
</Container>
<footer className="auth-footer">
{new Date().getFullYear()} © Light Blue Template - React Admin Dashboard Template Made by <a href="https://flatlogic.com" rel="noopener noreferrer" target="_blank">Flatlogic LLC</a>.
</footer>
</div>
);
}
Example #19
| Source File: index.js From mern-course-bootcamp with MIT License | 4 votes |
|
//Dashboard will show all the events
export default function Dashboard({ history }) {
const [events, setEvents] = useState([]);
const user = localStorage.getItem('user');
const user_id = localStorage.getItem('user_id');
const [rSelected, setRSelected] = useState(null);
const [error, setError] = useState(false);
const [success, setSuccess] = useState(false)
const [messageHandler, setMessageHandler] = useState('');
const [eventsRequest, setEventsRequest] = useState([])
useEffect(() => {
getEvents()
}, [])
const socket = useMemo(
() =>
socketio.connect('http://localhost:8000/', { query: { user: user_id } }),
[user_id]
);
useEffect(() => {
socket.on('registration_request', data => setEventsRequest([...eventsRequest, data]));
}, [eventsRequest, socket])
const filterHandler = (query) => {
setRSelected(query)
getEvents(query)
}
const myEventsHandler = async () => {
try {
setRSelected('myevents')
const response = await api.get('/user/events', { headers: { user } })
setEvents(response.data.events)
} catch (error) {
history.push('/login');
}
}
const getEvents = async (filter) => {
try {
const url = filter ? `/dashboard/${filter}` : '/dashboard';
const response = await api.get(url, { headers: { user } })
setEvents(response.data.events)
} catch (error) {
history.push('/login');
}
};
const deleteEventHandler = async (eventId) => {
try {
await api.delete(`/event/${eventId}`, { headers: { user: user } });
setSuccess(true)
setMessageHandler('The event was deleted successfully!')
setTimeout(() => {
setSuccess(false)
filterHandler(null)
setMessageHandler('')
}, 2500)
} catch (error) {
setError(true)
setMessageHandler('Error when deleting event!')
setTimeout(() => {
setError(false)
setMessageHandler('')
}, 2000)
}
}
const logoutHandler = () => {
localStorage.removeItem('user')
localStorage.removeItem('user_id')
history.push('/login');
}
const registrationRequestHandler = async (event) => {
try {
await api.post(`/registration/${event.id}`, {}, { headers: { user } })
setSuccess(true)
setMessageHandler(`The request for the event ${event.title} was successfully!`)
setTimeout(() => {
setSuccess(false)
filterHandler(null)
setMessageHandler('')
}, 2500)
} catch (error) {
setError(true)
setMessageHandler(`The request for the event ${event.title} wasn't successfully!`)
setTimeout(() => {
setError(false)
setMessageHandler('')
}, 2000)
}
}
return (
<>
<ul className="notifications">
{eventsRequest.map(request => {
console.log(request)
return (
<li key={request.id}>
<div>
<strong>{request.user.email} </strong> is requesting to register to your Event <strong>{request.event.title}</strong>
</div>
<ButtonGroup>
<Button color="secondary" onClick={() => { }}>Accept</Button>
<Button color="danger" onClick={() => { }}>Cancel</Button>
</ButtonGroup>
</li>
)
})}
</ul>
<div className="filter-panel">
<ButtonGroup>
<Button color="primary" onClick={() => filterHandler(null)} active={rSelected === null}>All Sports</Button>
<Button color="primary" onClick={myEventsHandler} active={rSelected === 'myevents'}>My Events</Button>
<Button color="primary" onClick={() => filterHandler("running")} active={rSelected === 'running'}>Running</Button>
<Button color="primary" onClick={() => filterHandler("cycling")} active={rSelected === 'cycling'}>Cycling</Button>
<Button color="primary" onClick={() => filterHandler('swimming')} active={rSelected === 'swimming'}>Swimming</Button>
</ButtonGroup>
<ButtonGroup>
<Button color="secondary" onClick={() => history.push('events')}>Events</Button>
<Button color="danger" onClick={logoutHandler}>Logout</Button>
</ButtonGroup>
</div>
<ul className="events-list">
{events.map(event => (
<li key={event._id}>
<header style={{ backgroundImage: `url(${event.thumbnail_url})` }}>
{event.user === user_id ? <div><Button color="danger" size="sm" onClick={() => deleteEventHandler(event._id)}>Delete</Button></div> : ""}
</header>
<strong>{event.title}</strong>
<span>Event Date: {moment(event.date).format('l')}</span>
<span>Event Price: {parseFloat(event.price).toFixed(2)}</span>
<span>Event Description: {event.description}</span>
<Button color="primary" onClick={() => registrationRequestHandler(event)}>Registration Request</Button>
</li>
))}
</ul>
{
error ? (
<Alert className="event-validation" color="danger"> {messageHandler} </Alert>
) : ""
}
{
success ? (
<Alert className="event-validation" color="success"> {messageHandler}</Alert>
) : ""
}
</>
)
}
Example #20
| Source File: Sidebar.js From light-blue-react-template with MIT License | 4 votes |
|
render() {
return (
<nav
className={cx(s.root)}
ref={(nav) => {
this.element = nav;
}}
>
<header className={s.logo}>
<a href="https://demo.flatlogic.com/light-blue-react/">Light <span
className="fw-bold">Blue</span></a>
</header>
<ul className={s.nav}>
<LinksGroup
onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
activeItem={this.props.activeItem}
header="Dashboard"
isHeader
iconName={<HomeIcon className={s.menuIcon} />}
link="/app/main"
index="main"
/>
<h5 className={[s.navTitle, s.groupTitle].join(' ')}>TEMPLATE</h5>
<LinksGroup
onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
activeItem={this.props.activeItem}
header="Typography"
isHeader
iconName={<TypographyIcon className={s.menuIcon} />}
link="/app/typography"
index="core"
/>
<LinksGroup
onActiveSidebarItemChange={t => this.props.dispatch(changeActiveSidebarItem(t))}
activeItem={this.props.activeItem}
header="Tables Basic"
isHeader
iconName={<TablesIcon className={s.menuIcon} />}
link="/app/tables"
index="tables"
/>
<LinksGroup
onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
activeItem={this.props.activeItem}
header="Notifications"
isHeader
iconName={<NotificationsIcon className={s.menuIcon}/>}
link="/app/notifications"
index="ui"
/>
<LinksGroup
onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
activeItem={this.props.activeItem}
header="Components"
isHeader
iconName={<ComponentsIcon className={s.menuIcon}/>}
link="/app/components"
index="components"
childrenLinks={[
{
header: 'Charts', link: '/app/components/charts',
},
{
header: 'Icons', link: '/app/components/icons',
},
{
header: 'Maps', link: '/app/components/maps',
},
]}
/>
</ul>
<h5 className={s.navTitle}>
LABELS
{/* eslint-disable-next-line */}
</h5>
{/* eslint-disable */}
<ul className={s.sidebarLabels}>
<li>
<a href="#">
<i className="fa fa-circle text-success mr-2"/>
<span className={s.labelName}>My Recent</span>
</a>
</li>
<li>
<a href="#">
<i className="fa fa-circle text-primary mr-2"/>
<span className={s.labelName}>Starred</span>
</a>
</li>
<li>
<a href="#">
<i className="fa fa-circle text-danger mr-2"/>
<span className={s.labelName}>Background</span>
</a>
</li>
</ul>
{/* eslint-enable */}
<h5 className={s.navTitle}>
PROJECTS
</h5>
<div className={s.sidebarAlerts}>
{this.props.alertsList.map(alert => // eslint-disable-line
<Alert
key={alert.id}
className={s.sidebarAlert}
color="transparent"
isOpen={true} // eslint-disable-line
toggle={() => {
this.dismissAlert(alert.id);
}}
>
<span>{alert.title}</span><br/>
<Progress className={`bg-subtle-blue progress-xs mt-1`} color={alert.color}
value={alert.value}/>
<span className={s.alertFooter}>{alert.footer}</span>
</Alert>,
)}
</div>
</nav>
);
}
Example #21
| Source File: index.js From mern-course-bootcamp with MIT License | 4 votes |
|
export default function Dashboard({ history }) {
const [events, setEvents] = useState([])
const user = localStorage.getItem('user')
const user_id = localStorage.getItem('user_id')
const [rSelected, setRSelected] = useState(null)
const [error, setError] = useState(false);
const [success, setSuccess] = useState(false)
const [messageHandler, setMessageHandler] = useState('')
const [eventsRequest, setEventsRequest] = useState([])
const [dropdownOpen, setDropDownOpen] = useState(false)
const [eventRequestMessage, setEventRequestMessage] = useState('')
const [eventRequestSuccess, setEventRequestSuccess] = useState(false)
const toggle = () => setDropDownOpen(!dropdownOpen);
useEffect(() => {
getEvents()
}, [])
const socket = useMemo(
() =>
socketio.connect('http://localhost:8000/', { query: { user: user_id } }),
[user_id]
);
useEffect(() => {
socket.on('registration_request', data => setEventsRequest([...eventsRequest, data]));
}, [eventsRequest, socket])
const filterHandler = (query) => {
setRSelected(query)
getEvents(query)
}
const myEventsHandler = async () => {
try {
setRSelected('myevents')
const response = await api.get('/user/events', { headers: { user } })
setEvents(response.data.events)
} catch (error) {
history.push('/login');
}
}
const getEvents = async (filter) => {
try {
const url = filter ? `/dashboard/${filter}` : '/dashboard';
const response = await api.get(url, { headers: { user } })
setEvents(response.data.events)
} catch (error) {
history.push('/login');
}
};
const deleteEventHandler = async (eventId) => {
try {
await api.delete(`/event/${eventId}`, { headers: { user: user } });
setSuccess(true)
setMessageHandler('The event was deleted successfully!')
setTimeout(() => {
setSuccess(false)
filterHandler(null)
setMessageHandler('')
}, 2500)
} catch (error) {
setError(true)
setMessageHandler('Error when deleting event!')
setTimeout(() => {
setError(false)
setMessageHandler('')
}, 2000)
}
}
const registrationRequestHandler = async (event) => {
try {
await api.post(`/registration/${event.id}`, {}, { headers: { user } })
setSuccess(true)
setMessageHandler(`The request for the event ${event.title} was successfully!`)
setTimeout(() => {
setSuccess(false)
filterHandler(null)
setMessageHandler('')
}, 2500)
} catch (error) {
setError(true)
setMessageHandler(`The request for the event ${event.title} wasn't successfully!`)
setTimeout(() => {
setError(false)
setMessageHandler('')
}, 2000)
}
}
const acceptEventHandler = async (eventId) => {
try {
await api.post(`/registration/${eventId}/approvals`, {}, { headers: { user } })
setEventRequestSuccess(true)
setEventRequestMessage('Event approved successfully!')
removeNotificationFromDashboard(eventId)
setTimeout(() => {
setEventRequestSuccess(false)
setEventRequestMessage('')
}, 2000)
} catch (err) {
console.log(err)
}
}
const rejectEventHandler = async (eventId) => {
try {
await api.post(`/registration/${eventId}/rejections`, {}, { headers: { user } })
setEventRequestSuccess(true)
setEventRequestMessage('Event rejected successfully!')
removeNotificationFromDashboard(eventId)
setTimeout(() => {
setEventRequestSuccess(false)
setEventRequestMessage('')
}, 2000)
} catch (err) {
console.log(err)
}
}
const removeNotificationFromDashboard = (eventId) => {
const newEvents = eventsRequest.filter((event) => event._id !== eventId)
setEventsRequest(newEvents)
}
return (
<>
<ul className="notifications">
{eventsRequest.map(request => {
return (
<li key={request._id}>
<div>
<strong>{request.user.email} </strong> is requesting to register to your Event <strong>{request.event.title}</strong>
</div>
<ButtonGroup>
<Button color="secondary" onClick={() => acceptEventHandler(request._id)}>Accept</Button>
<Button color="danger" onClick={() => rejectEventHandler(request._id)}>Reject</Button>
</ButtonGroup>
</li>
)
})}
</ul>
{eventRequestSuccess ? <Alert color="success"> {eventRequestMessage}</Alert> : ""}
<div className="filter-panel">
<Dropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle color="primary" caret>
Filter
</DropdownToggle>
<DropdownMenu>
<DropdownItem onClick={() => filterHandler(null)} active={rSelected === null} >All Sports</DropdownItem>
<DropdownItem onClick={myEventsHandler} active={rSelected === 'myevents'} >My Events</DropdownItem>
<DropdownItem onClick={() => filterHandler("running")} active={rSelected === 'running'} >Running</DropdownItem>
<DropdownItem onClick={() => filterHandler("cycling")} active={rSelected === 'cycling'} >Cycling</DropdownItem>
<DropdownItem color="primary" onClick={() => filterHandler('swimming')} active={rSelected === 'swimming'} >Swimming</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<ul className="events-list">
{events.map(event => (
< li key={event._id} >
<header style={{ backgroundImage: `url(${event.thumbnail_url})` }}>
{event.user === user_id ? <div><Button color="danger" size="sm" onClick={() => deleteEventHandler(event._id)}>Delete</Button></div> : ""}
</header>
<strong>{event.title}</strong>
<span>Event Date: {moment(event.date).format('l')}</span>
<span>Event Price: {parseFloat(event.price).toFixed(2)}</span>
<span>Event Description: {event.description}</span>
<Button color="primary" onClick={() => registrationRequestHandler(event)}>Registration Request</Button>
</li>
))}
</ul>
{
error ? (
<Alert className="event-validation" color="danger"> {messageHandler} </Alert>
) : ""
}
{
success ? (
<Alert className="event-validation" color="success"> {messageHandler}</Alert>
) : ""
}
</>
)
}
Example #22
| Source File: login.component.js From blogApp with MIT License | 4 votes |
|
render() {
return (
<div>
<div className='p-3 mt-1'>
<Alert
color={this.state.alertCol}
fade={true}
toggle={this.toggleError}
isOpen={this.state.alert}>
{this.state.errMessage}
</Alert>
</div>
<div id='form' className='p-4 my-4'>
<h1 style={{ fontFamily: "Kaushan Script" }}>Login</h1>
<Form onSubmit={this.onSubmit}>
<div className='form-group'>
<Label>Username : </Label>
<input
type='text'
required
className='form-control'
value={this.state.username}
onChange={this.onChangeUsername}
/>
</div>
<div className='form-group'>
<Label>Password : </Label>
<input
type='password'
required
className='form-control'
value={this.state.password}
onChange={this.onChangePassword}
/>
</div>
<div className='form-group'>
New to{" "}
<span
style={{
fontFamily: "Monoton",
}}>
BlogApp ?
</span>{" "}
<Button
className='btn btn-sm'
color='success'
onClick={this.toggleModal}>
Sign Up
</Button>
</div>
<div className='form-group'>
<input
type='submit'
value='Login'
className='btn btn-primary'
/>
</div>
</Form>
</div>
<Modal
isOpen={this.state.isModalOpen}
fade={false}
toggle={this.toggleModal}>
<ModalHeader toggle={this.toggleModal}>
Add a blog
</ModalHeader>
<Form onSubmit={this.addUser}>
<ModalBody>
<FormGroup>
<Label htmlFor='username'>Username</Label>
<Input
type='text'
id='username'
onChange={this.onChangeUsername}
name='username'
/>
</FormGroup>
<FormGroup>
<Label htmlFor='email'>Email</Label>
<Input
type='text'
id='email'
onChange={this.onChangeEmail}
name='email'
/>
</FormGroup>
<FormGroup>
<Label htmlFor='password'>Password</Label>
<Input
type='password'
id='password'
onChange={this.onChangePassword}
name='password'
/>
</FormGroup>
</ModalBody>
<ModalFooter>
<Button
type='submit'
value='submit'
color='primary'>
Sign Up
</Button>
</ModalFooter>
</Form>
</Modal>
</div>
);
}
Example #23
| Source File: index.js From mern-course-bootcamp with MIT License | 4 votes |
|
export default function Dashboard({ history }) {
const [events, setEvents] = useState([])
const user = localStorage.getItem('user')
const user_id = localStorage.getItem('user_id')
const [rSelected, setRSelected] = useState(null)
const [error, setError] = useState(false);
const [success, setSuccess] = useState(false)
const [messageHandler, setMessageHandler] = useState('')
const [eventsRequest, setEventsRequest] = useState([])
const [dropdownOpen, setDropDownOpen] = useState(false)
const [eventRequestMessage, setEventRequestMessage] = useState('')
const [eventRequestSuccess, setEventRequestSuccess] = useState(false)
const toggle = () => setDropDownOpen(!dropdownOpen);
useEffect(() => {
getEvents()
}, [])
const socket = useMemo(
() =>
socketio.connect('http://localhost:8000/', { query: { user: user_id } }),
[user_id]
);
useEffect(() => {
socket.on('registration_request', data => setEventsRequest([...eventsRequest, data]));
}, [eventsRequest, socket])
const filterHandler = (query) => {
setRSelected(query)
getEvents(query)
}
const myEventsHandler = async () => {
try {
setRSelected('myevents')
const response = await api.get('/user/events', { headers: { user } })
setEvents(response.data.events)
} catch (error) {
history.push('/login');
}
}
const getEvents = async (filter) => {
try {
const url = filter ? `/dashboard/${filter}` : '/dashboard';
const response = await api.get(url, { headers: { user } })
setEvents(response.data.events)
} catch (error) {
history.push('/login');
}
};
const deleteEventHandler = async (eventId) => {
try {
await api.delete(`/event/${eventId}`, { headers: { user: user } });
setSuccess(true)
setMessageHandler('The event was deleted successfully!')
setTimeout(() => {
setSuccess(false)
filterHandler(null)
setMessageHandler('')
}, 2500)
} catch (error) {
setError(true)
setMessageHandler('Error when deleting event!')
setTimeout(() => {
setError(false)
setMessageHandler('')
}, 2000)
}
}
const registrationRequestHandler = async (event) => {
try {
await api.post(`/registration/${event.id}`, {}, { headers: { user } })
setSuccess(true)
setMessageHandler(`The request for the event ${event.title} was successfully!`)
setTimeout(() => {
setSuccess(false)
filterHandler(null)
setMessageHandler('')
}, 2500)
} catch (error) {
setError(true)
setMessageHandler(`The request for the event ${event.title} wasn't successfully!`)
setTimeout(() => {
setError(false)
setMessageHandler('')
}, 2000)
}
}
const acceptEventHandler = async (eventId) => {
try {
await api.post(`/registration/${eventId}/approvals`, {}, { headers: { user } })
setEventRequestSuccess(true)
setEventRequestMessage('Event approved successfully!')
removeNotificationFromDashboard(eventId)
setTimeout(() => {
setEventRequestSuccess(false)
setEventRequestMessage('')
}, 2000)
} catch (err) {
console.log(err)
}
}
const rejectEventHandler = async (eventId) => {
try {
await api.post(`/registration/${eventId}/rejections`, {}, { headers: { user } })
setEventRequestSuccess(true)
setEventRequestMessage('Event rejected successfully!')
removeNotificationFromDashboard(eventId)
setTimeout(() => {
setEventRequestSuccess(false)
setEventRequestMessage('')
}, 2000)
} catch (err) {
console.log(err)
}
}
const removeNotificationFromDashboard = (eventId) => {
const newEvents = eventsRequest.filter((event) => event._id !== eventId)
setEventsRequest(newEvents)
}
return (
<>
<ul className="notifications">
{eventsRequest.map(request => {
return (
<li key={request._id}>
<div>
<strong>{request.user.email} </strong> is requesting to register to your Event <strong>{request.event.title}</strong>
</div>
<ButtonGroup>
<Button color="secondary" onClick={() => acceptEventHandler(request._id)}>Accept</Button>
<Button color="danger" onClick={() => rejectEventHandler(request._id)}>Reject</Button>
</ButtonGroup>
</li>
)
})}
</ul>
{eventRequestSuccess ? <Alert color="success"> {eventRequestMessage}</Alert> : ""}
<div className="filter-panel">
<Dropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle color="primary" caret>
Filter
</DropdownToggle>
<DropdownMenu>
<DropdownItem onClick={() => filterHandler(null)} active={rSelected === null} >All Sports</DropdownItem>
<DropdownItem onClick={myEventsHandler} active={rSelected === 'myevents'} >My Events</DropdownItem>
<DropdownItem onClick={() => filterHandler("running")} active={rSelected === 'running'} >Running</DropdownItem>
<DropdownItem onClick={() => filterHandler("cycling")} active={rSelected === 'cycling'} >Cycling</DropdownItem>
<DropdownItem color="primary" onClick={() => filterHandler('swimming')} active={rSelected === 'swimming'} >Swimming</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<ul className="events-list">
{events.map(event => (
< li key={event._id} >
<header style={{ backgroundImage: `url(${event.thumbnail_url})` }}>
{event.user === user_id ? <div><Button color="danger" size="sm" onClick={() => deleteEventHandler(event._id)}>Delete</Button></div> : ""}
</header>
<strong>{event.title}</strong>
<span>Event Date: {moment(event.date).format('l')}</span>
<span>Event Price: {parseFloat(event.price).toFixed(2)}</span>
<span>Event Description: {event.description}</span>
<Button color="primary" onClick={() => registrationRequestHandler(event)}>Registration Request</Button>
</li>
))}
</ul>
{
error ? (
<Alert className="event-validation" color="danger"> {messageHandler} </Alert>
) : ""
}
{
success ? (
<Alert className="event-validation" color="success"> {messageHandler}</Alert>
) : ""
}
</>
)
}
Example #24
| Source File: Alerts.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
return (
<div className="animated fadeIn">
<Row>
<Col xs="12" md="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Alerts</strong>
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/alerts/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<Alert color="primary">
This is a primary alert — check it out!
</Alert>
<Alert color="secondary">
This is a secondary alert — check it out!
</Alert>
<Alert color="success">
This is a success alert — check it out!
</Alert>
<Alert color="danger">
This is a danger alert — check it out!
</Alert>
<Alert color="warning">
This is a warning alert — check it out!
</Alert>
<Alert color="info">
This is a info alert — check it out!
</Alert>
<Alert color="light">
This is a light alert — check it out!
</Alert>
<Alert color="dark">
This is a dark alert — check it out!
</Alert>
</CardBody>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Alerts</strong>
<small> use <code>.alert-link</code> to provide links</small>
</CardHeader>
<CardBody>
<Alert color="primary">
{/*eslint-disable-next-line*/}
This is a primary alert with <a href="#" className="alert-link">an example link</a>. Give it a click if you like.
</Alert>
<Alert color="secondary">
{/*eslint-disable-next-line*/}
This is a secondary alert with <a href="#" className="alert-link">an example link</a>. Give it a click if you like.
</Alert>
<Alert color="success">
{/*eslint-disable-next-line*/}
This is a success alert with <a href="#" className="alert-link">an example link</a>. Give it a click if you like.
</Alert>
<Alert color="danger">
{/*eslint-disable-next-line*/}
This is a danger alert with <a href="#" className="alert-link">an example link</a>. Give it a click if you like.
</Alert>
<Alert color="warning">
{/*eslint-disable-next-line*/}
This is a warning alert with <a href="#" className="alert-link">an example link</a>. Give it a click if you like.
</Alert>
<Alert color="info">
{/*eslint-disable-next-line*/}
This is a info alert with <a href="#" className="alert-link">an example link</a>. Give it a click if you like.
</Alert>
<Alert color="light">
{/*eslint-disable-next-line*/}
This is a light alert with <a href="#" className="alert-link">an example link</a>. Give it a click if you like.
</Alert>
<Alert color="dark">
{/*eslint-disable-next-line*/}
This is a dark alert with <a href="#" className="alert-link">an example link</a>. Give it a click if you like.
</Alert>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" md="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Alerts</strong>
<small>additional content</small>
</CardHeader>
<CardBody>
<Alert color="success">
<h4 className="alert-heading">Well done!</h4>
<p>
Aww yeah, you successfully read this important alert message. This example text is going
to run a bit longer so that you can see how spacing within an alert works with this kind
of content.
</p>
<hr />
<p className="mb-0">
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
</p>
</Alert>
</CardBody>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Alerts</strong>
<small>dismissing</small>
</CardHeader>
<CardBody>
<Alert color="info" isOpen={this.state.visible} toggle={this.onDismiss}>
I am an alert and I can be dismissed!
</Alert>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
}
Example #25
| Source File: Dashboard.js From GB-GCGC with MIT License | 4 votes |
|
render(){
return (
<div className='container-fluid'>
<br></br>
<Card>
<Row style={{textAlign:"initial"}}>
<Col md="4"style={{"padding":"10px"}}>
<img src={this.state.images} style={{"height":"100px","width":"100px","border-radius": "50%"}}/>
Welcome {this.state.fname} {this.state.mname} {this.state.lname}
</Col>
<Col>
<h1 style={{"font-size": "xx-large","text-align": "end","padding": "35px","font-family": "Brush Script MT"}}>Have a Nice Day</h1>
</Col>
</Row>
</Card>
<br/>
<Card>
<Collapsible trigger="PersonalDetails" triggerStyle={{"textAlign":"end"}} style={{"textAlign":"center"}}>
<hr/>
<Personaldetails login={this.props.login}/>
</Collapsible>
</Card>
<br/>
<Card>
<Collapsible trigger="Academic Details">
<hr></hr>
<CardBody>
<br/>
<Row style={{"paddind-left":"25px"}}>
<Col md="4">
<Card color="success" className="Rounded p-3">
<CardTitle align="left">{this.state.SSC}</CardTitle>
<CardSubtitle align="left">Tenth Percentage</CardSubtitle>
</Card>
</Col>
<Col md="4">
<Card color="warning" className="Rounded p-3">
<CardTitle align="left">{this.state.inter}</CardTitle>
<CardSubtitle align="left">Inter Percentage</CardSubtitle>
</Card>
</Col>
<Col md="4">
<Card color="danger" className="Rounded p-3">
<CardTitle align="left">{(this.state.gpa*9.5).toFixed(2)}</CardTitle>
<CardSubtitle align="left">B Tech Percentage</CardSubtitle>
</Card>
</Col>
</Row><br></br>
<Collapsible trigger="More Info"><br></br>
<Row>
<Col md="4">
<Alert color="success" className="Rounded p-3">
<CardTitle align="left">{this.state.branch.slice(0,3)}</CardTitle>
<CardSubtitle align="left">Branch</CardSubtitle>
</Alert>
</Col>
<Col md="4">
<Alert color="warning" className="Rounded p-3">
<CardTitle align="left">{this.state.pass_category}</CardTitle>
<CardSubtitle align="left">Pass Category</CardSubtitle>
</Alert>
</Col>
<Col md="4">
<Alert color="danger" className="Rounded p-3">
<CardTitle align="left">{this.state.branch.slice(3,5)}</CardTitle>
<CardSubtitle align="left">Section</CardSubtitle>
</Alert>
</Col>
</Row>
</Collapsible>
</CardBody>
</Collapsible>
</Card>
<Card>
<Collapsible trigger="Leader Board">
<hr/>
<CardBody>
<br/>
<Leaderboard login={this.props.login}/>
</CardBody>
</Collapsible>
</Card>
<br/>
<Card>
<Collapsible trigger="Job Suitability">
<hr></hr>
<br></br>
<Row>
<Col md="6" className="pr-2 pt-2">
<JobFitment fitid={this.props.login}/>
</Col>
<Col md="6" className="p-2">
<CurrentJob jobid={this.props.login}/>
</Col>
</Row>
</Collapsible>
</Card>
<br></br>
<Card>
<Collapsible trigger="Assessment Report Internal">
<hr></hr>
<br/>
<ARI arii={this.props.login}/>
</Collapsible>
</Card>
<br/>
<Card>
<Collapsible trigger="Assessment Report External">
<hr></hr>
<br/>
<Col className="p-2">
<Cocubes cid={this.props.login}/>
</Col>
<Col className="p-2">
<Amcat aid={this.props.login}/>
</Col>
</Collapsible>
</Card>
<br></br>
<Card>
<Collapsible trigger="Training Attendance Report">
<hr></hr>
<ITA aid={this.props.login}/>
</Collapsible>
</Card>
<br></br>
<Card>
<Collapsible trigger="Placement Analysis">
<br/>
<hr></hr>
<Row>
<Table striped className="placements" bordered responsive>
<tbody>
<tr>
<td md="6">Total Number of Companies: {this.state.noc}</td>
<td md="6">Number of written test cleared: {this.state.wtc}</td>
</tr>
<tr>
<td md="6">Number of Companies Eligible: {this.state.ce}</td>
<td md="6">Number of GD's cleared: {this.state.gdc}</td>
</tr>
<tr>
<td md="6">Number of Companies Attended: {this.state.nca}</td>
<td md="6">Number of technical test cleared: {this.state.ttc}</td>
</tr>
<tr>
<td colSpan="2">Number of Offer Letters: {this.state.olf}</td>
</tr>
</tbody>
</Table>
</Row>
<br></br>
<br></br>
<h6>Placements Analysis of {this.props.login}</h6>
<Placements login={this.props.login}/>
</Collapsible>
</Card>
<br/>
</div>
);
}
Example #26
| Source File: Login.js From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
const { errors } = this.state;
return (
<>
<DemoNavbar />
<main ref="main">
<section className="section section-shaped section-lg">
<div className="shape shape-style-1 bg-gradient-default">
<span />
<span />
<span />
<span />
<span />
<span />
<span />
<span />
</div>
<Container className="pt-lg-md">
<Row className="justify-content-center">
<Col lg="5">
<Card className="bg-secondary shadow border-0">
<CardHeader className="bg-white pb-5">
<div className="text-muted text-center mb-3">
<small>Sign in with</small>
</div>
<div className="btn-wrapper text-center">
<Button
className="btn-neutral btn-icon"
color="default"
href="http://localhost:5000/api/auth/facebook"
>
<span className="btn-inner--icon mr-1">
<img
alt="..."
src={require("../../assets/img/icons/common/facebook.svg")}
/>
</span>
<span className="btn-inner--text">Facebook</span>
</Button>
<Button
className="btn-neutral btn-icon ml-1"
color="default"
href="http://localhost:5000/api/auth/google"
>
<span className="btn-inner--icon mr-1">
<img
alt="..."
src={require("../../assets/img/icons/common/google.svg")}
/>
</span>
<span className="btn-inner--text">Google</span>
</Button>
</div>
</CardHeader>
<CardBody className="px-lg-5 py-lg-5">
{errors && errors.auth ? (
<Alert color="warning">{errors.auth}</Alert>
) : (
<div className="text-center text-muted mb-4">
<small>Or sign in with credentials</small>
</div>
)}
<Form role="form" noValidate onSubmit={this.onSubmit}>
<FormGroup className="mb-3">
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-email-83" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Email"
type="email"
onChange={this.onChange}
value={this.state.email}
id="email"
/>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-lock-circle-open" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Password"
type="password"
autoComplete="off"
onChange={this.onChange}
value={this.state.password}
id="password"
/>
</InputGroup>
</FormGroup>
<div className="custom-control custom-control-alternative custom-checkbox">
<input
className="custom-control-input"
id=" customCheckLogin"
type="checkbox"
/>
<label
className="custom-control-label"
htmlFor=" customCheckLogin"
>
<span>Remember me</span>
</label>
</div>
<div className="text-center">
<Button
className="my-4"
color="primary"
type="submit"
>
Sign in
</Button>
</div>
</Form>
</CardBody>
</Card>
<Row className="mt-3">
<Col xs="6">
<a
className="text-light"
href="#pablo"
onClick={e => e.preventDefault()}
>
<small>Forgot password?</small>
</a>
</Col>
<Col className="text-right" xs="6">
<Link to="/register">
<small>Create new account</small>
</Link>
</Col>
</Row>
</Col>
</Row>
</Container>
</section>
</main>
<SimpleFooter />
</>
);
}
Example #27
| Source File: SectionNotifications.js From Website2020 with MIT License | 4 votes |
|
// core components
function SectionNotifications() {
const [alertSuccess, setAlertSuccess] = React.useState(true);
const [alertWarning, setAlertWarning] = React.useState(true);
const [alertDanger, setAlertDanger] = React.useState(true);
return (
<>
<Container className="tim-container">
<div className="title">
<h3>Notifications</h3>
</div>
</Container>
<div id="notifications">
<Alert color="info">
<Container>
<span>This is a plain notification!</span>
</Container>
</Alert>
<Alert color="success" isOpen={alertSuccess}>
<Container>
<button
type="button"
className="close"
data-dismiss="alert"
aria-label="Close"
onClick={() => setAlertSuccess(false)}
>
<i className="nc-icon nc-simple-remove" />
</button>
<span>This is a notification with close button.</span>
</Container>
</Alert>
<Alert
className="alert-with-icon"
color="warning"
isOpen={alertWarning}
>
<Container>
<div className="alert-wrapper">
<button
type="button"
className="close"
data-dismiss="alert"
aria-label="Close"
onClick={() => setAlertWarning(false)}
>
<i className="nc-icon nc-simple-remove" />
</button>
<div className="message">
<i className="nc-icon nc-bell-55" /> This is a notification with
close button and icon.
</div>
</div>
</Container>
</Alert>
<Alert className="alert-with-icon" color="danger" isOpen={alertDanger}>
<Container>
<div className="alert-wrapper">
<button
type="button"
className="close"
data-dismiss="alert"
aria-label="Close"
onClick={() => setAlertDanger(false)}
>
<i className="nc-icon nc-simple-remove" />
</button>
<div className="message">
<i className="nc-icon nc-bell-55" /> This is a notification with
close button and icon and have many lines. You can see that the
icon and the close button are always vertically aligned. This is
a beautiful notification. So you don't have to worry about the
style.
</div>
</div>
</Container>
</Alert>
</div>
</>
);
}
Example #28
| Source File: index.js From mern-course-bootcamp with MIT License | 4 votes |
|
export default function EventsPage() {
const [title, setTitle] = useState('')
const [description, setDescription] = useState('')
const [price, setPrice] = useState('')
const [thumbnail, setThumbnail] = useState(null)
const [sport, setSport] = useState('')
const [date, setDate] = useState('')
const [errorMessage, setErrorMessage] = useState(false)
const preview = useMemo(() => {
return thumbnail ? URL.createObjectURL(thumbnail) : null;
}, [thumbnail])
console.log(title, description, price, sport)
const submitHandler = async (evt) => {
evt.preventDefault()
const user_id = localStorage.getItem('user');
const eventData = new FormData();
eventData.append("thumbnail", thumbnail)
eventData.append("sport", sport)
eventData.append("title", title)
eventData.append("price", price)
eventData.append("description", description)
eventData.append("date", date)
try {
if (title !== "" &&
description !== "" &&
price !== "" &&
sport !== "" &&
date !== "" &&
thumbnail !== null
) {
console.log("Event has been sent")
await api.post("/event", eventData, { headers: { user_id } })
console.log(eventData)
console.log("Event has been saved")
} else {
setErrorMessage(true)
setTimeout(() => {
setErrorMessage(false)
}, 2000)
console.log("Missing required data")
}
} catch (error) {
Promise.reject(error);
console.log(error);
}
}
return (
<Container>
<h2>Create your Event</h2>
<Form onSubmit={submitHandler}>
<FormGroup>
<Label>Upload Image: </Label>
<Label id='thumbnail' style={{ backgroundImage: `url(${preview})` }} className={thumbnail ? 'has-thumbnail' : ''}>
<Input type="file" onChange={evt => setThumbnail(evt.target.files[0])} />
<img src={cameraIcon} style={{ maxWidth: "50px" }} alt="upload icon image" />
</Label>
</FormGroup>
<FormGroup>
<Label>Sport: </Label>
<Input id="sport" type="text" value={sport} placeholder={'Sport name'} onChange={(evt) => setSport(evt.target.value)} />
</FormGroup>
<FormGroup>
<Label>Title: </Label>
<Input id="title" type="text" value={title} placeholder={'Event Title'} onChange={(evt) => setTitle(evt.target.value)} />
</FormGroup>
<FormGroup>
<Label>Event description: </Label>
<Input id="description" type="text" value={description} placeholder={'Event Description'} onChange={(evt) => setDescription(evt.target.value)} />
</FormGroup>
<FormGroup>
<Label>Event price: </Label>
<Input id="price" type="text" value={price} placeholder={'Event Price £0.00'} onChange={(evt) => setPrice(evt.target.value)} />
</FormGroup>
<FormGroup>
<Label>Event date: </Label>
<Input id="date" type="date" value={date} placeholder={'Event Price £0.00'} onChange={(evt) => setDate(evt.target.value)} />
</FormGroup>
<Button type="submit">
Create Event
</Button>
</Form>
{errorMessage ? (
<Alert className="event-validation" color="danger"> Missing required information</Alert>
) : ""}
</Container>
)
}
Example #29
| Source File: email-inbox.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="시스템 프로젝트" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg={12}>
<Card>
<div>
{/* <h5>Example: onSearchClick </h5> */}
{/* {exampleSnippets.onSearchClickExample} */}
<SearchField
placeholder="Search item"
onSearchClick={this.onSearchClickExample}
/>
<ExampleList
list={this.state.onSearchClickExampleList}
/>
</div>
{/* <CardBody>
<div>
<Link to="ecommerce-add-product" onClick={() => this.setState({ modal_static: true, isAlertOpen: false })} className="btn btn-success mb-2"><i className="mdi mdi-plus mr-2"></i> 추가</Link>
</div>
<div className="table-responsive mt-3">
<Table className="table-centered datatable dt-responsive nowrap " style={{ borderCollapse: "collapse", borderSpacing: 0, width: "100%" }}>
<thead className="thead-light">
<tr>
<th style={{ width: "20px" }}>
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id="customercheck" />
<Label className="custom-control-label" htmlFor="customercheck"> </Label>
</div>
</th>
<th>이름</th>
<th>상태</th>
<th>워크스페이스</th>
<th>CPU</th>
<th>메모리</th>
<th>파드</th>
<th style={{ width: "120px" }}>Action</th>
</tr>
</thead>
<tbody>
{
this.state.exampleList.map((item, index) =>
<tr key={index}>
<td>
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id={"customercheck" + index} />
<Label className="custom-control-label" htmlFor={"customercheck" + index}> </Label>
</div>
</td>
<td>{item.customer}</td>
<td>{item.email}<div className="badge badge-soft-warning font-size-12"></div></td>
<td>{item.phone}</td>
<td>
{item.balance}
</td>
<td>
{item.date}
</td>
<td>
{item.date}
</td>
<td>
<Link to="/dashboard" className="mr-3 text-primary" id={"edit" + index}><i className="mdi mdi-pencil font-size-18"></i></Link>
<UncontrolledTooltip target={"edit" + index} placement="top">
Edit
</UncontrolledTooltip>
<Link to="#" className="text-danger" id={"delete" + index}><i className="mdi mdi-trash-can font-size-18"></i></Link>
<UncontrolledTooltip target={"delete" + index} placement="top">
Delete
</UncontrolledTooltip>
</td>
</tr>
)
}
</tbody>
</Table>
</div>
</CardBody> */}
</Card>
</Col>
</Row>
<Modal
isOpen={this.state.modal_static}
toggle={this.tog_static}
backdrop="static"
centered
size="lg"
>
<ModalHeader toggle={() => this.setState({ modal_static: false })}>
Add Customer Details
</ModalHeader>
<ModalBody>
<AvForm onValidSubmit={this.addCustomer}>
<Row>
<Col lg={12}>
<Alert color="success" isOpen={this.state.isAlertOpen} toggle={() => this.setState({ isAlertOpen: false })}>
Data Added Successfully...!
</Alert>
<FormGroup>
<Label htmlFor="name">Customer Name</Label>
<AvField
name="custname"
type="text"
className="form-control"
id="custname"
placeholder="Enter Customer Name"
required
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg={4}>
<FormGroup>
<Label htmlFor="email">Email</Label>
<AvField
name="custemail"
type="email"
className="form-control"
id="custemail"
placeholder="Enter Email"
required
/>
</FormGroup>
</Col>
<Col lg={4}>
<FormGroup>
<Label htmlFor="email">Phone Number</Label>
<AvField
name="phonenumber"
type="number"
className="form-control"
id="phonenumber"
placeholder="Enter Phone Number"
required
/>
</FormGroup>
</Col>
<Col lg={4}>
<FormGroup>
<Label htmlFor="email">Wallet Balance</Label>
<AvField
name="wBalance"
type="number"
className="form-control"
id="wBalance"
placeholder="Wallet Balance"
required
/>
</FormGroup>
</Col>
</Row>
<ModalFooter>
<Button type="button" color="light" onClick={() => this.setState({ modal_static: false })}>Calcel</Button>
<Button type="submit" color="primary">Add</Button>
</ModalFooter>
</AvForm>
</ModalBody>
</Modal>
</Container>
</div>
</React.Fragment>
);
}
