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 vote down vote up
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 vote down vote up
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 &amp; Accessories</li>
              <li>Display &amp; Touch</li>
              <li>Drivers</li>
            </ul>
          </Alert>
        </div>
      </div>
    )
  }
Example #3
Source File: Notification.js    From sofia-react-template with MIT License 6 votes vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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&nbsp;
              <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&nbsp;
              <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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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()} &copy; 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 vote down vote up
//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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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>
          &nbsp;
          <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 vote down vote up
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 vote down vote up
// 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 vote down vote up
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 vote down vote up
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">&nbsp;</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}>&nbsp;</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>
        );
    }