@material-ui/icons#Notifications JavaScript Examples
The following examples show how to use
@material-ui/icons#Notifications.
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: App.js From covid-vaccine-notification-system with BSD 3-Clause "New" or "Revised" License | 4 votes |
|
/*
* Author:- Rahul Malhotra
* Description:- This method is used to render the UI
*/
render() {
const { classes } = this.props;
const {
states,
districts,
vaccines,
prices,
ages,
centreIdsToSkip,
searchOptions,
hasSearched,
vaccinesData,
notify,
selectedSearchBy,
pincode,
hasError,
selectedState,
selectedDistrict,
selectedAge,
selectedVaccine,
selectedVaccinePrice,
minDose1,
minDose2,
showBookVaccineConfirmationModal
} = this.state;
let showHiddenVaccineCentersButton, notifyButton, clearNotifyButton;
// * Setting up show hidden vaccination centres button
if (centreIdsToSkip.length) {
showHiddenVaccineCentersButton = (
<FormControl className={classes.formControl}>
<Button
variant="contained"
color="secondary"
onClick={this.clearCentreIdsToSkip.bind(this)}
startIcon={<Visibility />}
>
Show Hidden Vaccination Centres
</Button>
</FormControl>
);
}
// * Setting up notifications button
if (
hasSearched &&
vaccinesData.length === 0 &&
!notify &&
(
(
selectedSearchBy === 'district' &&
this.stateSelected() &&
this.districtSelected()
) ||
(
selectedSearchBy === 'pincode' &&
this.pincodeEntered()
)
)
) {
notifyButton = (
<FormControl className={classes.formControl}>
<Button
variant="contained"
color="primary"
onClick={this.notifyVaccineAvailability.bind(this)}
endIcon={<Notifications />}
>
Notify me when vaccines are available
</Button>
</FormControl>
);
}
// * Setting up stop notifications button
if (notify) {
clearNotifyButton = (
<FormControl className={classes.formControl}>
<Button
variant="contained"
color="secondary"
onClick={this.clearNotificationSearch.bind(this)}
endIcon={<Close />}
>
Stop Notifications
</Button>
</FormControl>
)
}
// * Setting up the UI
return (
<div>
<Card style={{ margin: '1rem' }}>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
COVID-19 Vaccine Notification System
</Typography>
{/* Form Inputs */}
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel id="searchBy-label">Search by</InputLabel>
<Select
labelId="searchBy-label"
id="searchBy-input"
value={selectedSearchBy}
onChange={this.selectSearchBy}
label="Search by"
autoFocus
>
{searchOptions.map((searchOption) => (
<MenuItem key={searchOption.id} value={searchOption.value}>
{searchOption.name}
</MenuItem>
))}
</Select>
</FormControl>
{
(selectedSearchBy === 'pincode') && (
<FormControl required variant="outlined" className={classes.formControl} error={pincode && !this.pincodeEntered()}>
<TextField
required
id="outlined-pincode"
label="Enter pincode"
variant="outlined"
value={pincode}
type="number"
onChange={this.setPincode}
error={hasError && !this.pincodeEntered()}
helperText={
hasError && !this.pincodeEntered() &&
(
"Please enter pincode"
)
}
/>
</FormControl>
)
}
{
(selectedSearchBy === 'district') && (
<span>
<FormControl required variant="outlined" className={classes.formControl} error={hasError && !this.stateSelected()}>
<InputLabel id="state-label">Select state</InputLabel>
<Select
labelId="state-label"
id="state-input"
value={selectedState}
onChange={this.selectState}
label="Select state"
error={hasError && !this.stateSelected()}
>
{states.map((state) => (
<MenuItem key={state.state_id} value={state.state_id}>
{state.state_name}
</MenuItem>
))}
</Select>
{
hasError && !this.stateSelected() &&
(
<FormHelperText>Please select a state</FormHelperText>
)
}
</FormControl>
<FormControl required variant="outlined" className={classes.formControl} error={hasError && !this.districtSelected()}>
<InputLabel id="district-label">Select district</InputLabel>
<Select
labelId="district-label"
id="district-input"
value={selectedDistrict}
onChange={this.selectDistrict}
label="Select district"
error={hasError && !this.districtSelected()}
>
{districts.map((district) => (
<MenuItem
key={district.district_id}
value={district.district_id}
>
{district.district_name}
</MenuItem>
))}
</Select>
{
hasError && !this.districtSelected() &&
(
<FormHelperText>Please select a district</FormHelperText>
)
}
</FormControl>
</span>
)
}
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel id="vaccine-label">Select vaccine</InputLabel>
<Select
labelId="vaccine-label"
id="vaccine-input"
value={selectedVaccine}
onChange={this.selectVaccine}
label="Select vaccine"
>
{vaccines.map((vaccine) => (
<MenuItem key={vaccine.id} value={vaccine.value}>
{vaccine.name}
</MenuItem>
))}
</Select>
</FormControl>
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel id="price-label">Select price</InputLabel>
<Select
labelId="price-label"
id="price-input"
value={selectedVaccinePrice}
onChange={this.selectVaccinePrice}
label="Select price"
>
{prices.map((price) => (
<MenuItem key={price.id} value={price.value}>
{price.name}
</MenuItem>
))}
</Select>
</FormControl>
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel id="age-label">Minimum age</InputLabel>
<Select
labelId="age-label"
id="age-input"
value={selectedAge}
onChange={this.selectAge}
label="Minimum age"
>
{ages.map((age) => (
<MenuItem key={age.id} value={age.value}>
{age.name}
</MenuItem>
))}
</Select>
</FormControl>
<FormControl variant="outlined" className={classes.formControl}>
<TextField
id="outlined-min-vaccine-dose-1"
label="Quantity required - 1st dose"
variant="outlined"
value={minDose1}
type="number"
onChange={this.setMinimumDose1}
onFocus={this.focusMinimumDose1}
/>
</FormControl>
<FormControl variant="outlined" className={classes.formControl}>
<TextField
id="outlined-min-vaccine-dose-2"
label="Quantity required - 2nd dose"
variant="outlined"
value={minDose2}
type="number"
onChange={this.setMinimumDose2}
onFocus={this.focusMinimumDose2}
/>
</FormControl>
<br />
<FormControl className={classes.formControl}>
<Button
variant="contained"
color="primary"
onClick={this.fetchVaccineCentres.bind(this)}
startIcon={<Search />}
>
Search Vaccination Centres
</Button>
</FormControl>
{showHiddenVaccineCentersButton}
{notifyButton}
{clearNotifyButton}
<FormControl className={classes.formControl}>
<Button
variant="contained"
color="primary"
onClick={this.displayBookVaccineModal.bind(this)}
endIcon={<ArrowForward />}
>
Book Vaccination Slot
</Button>
<ConfirmModal open={showBookVaccineConfirmationModal} onConfirm={this.bookVaccineSlot.bind(this)} onReject={this.closeBookVaccineModal.bind(this)} onClose={this.closeBookVaccineModal.bind(this)} heading="Book Vaccination Slot?" description="Please make sure that you take a note of the center details before proceeding" confirmButtonText="Yes" rejectButtonText="No" />
</FormControl>
</CardContent>
</Card>
{/* Data Table */}
<div style={{ maxWidth: "100%", margin: '1rem' }}>
<MaterialTable
icons={tableIcons}
columns={[
{ title: "Date", field: "date" },
{ title: "Center Name", field: "name" },
{ title: "Center Address", field: "address" },
{ title: "Vaccine Name", field: "vaccineName" },
{ title: "Minimum Age Required", field: "minAge" },
{ title: "Price", field: "price" },
{ title: "1st Dose Availability", field: "dose1Availability", type: "numeric" },
{ title: "2nd Dose Availability", field: "dose2Availability", type: "numeric" }
]}
data={vaccinesData}
title="Vaccination Centres"
options={{ selection: true }}
actions={[
{
tooltip: "Remove centres from search results",
icon: () => {
return <VisibilityOff />;
},
onClick: (event, centres) => {
// * Removing selected centres from search results
let currentCentreIdsToSkip = [...centreIdsToSkip];
centres.forEach((centre) =>
currentCentreIdsToSkip.push(centre.center_id)
);
// * Setting up unique centre ids to skip
this.setState({
centreIdsToSkip: currentCentreIdsToSkip.filter(this.getUnique),
});
// * Removing centres from search results
this.setState({
vaccinesData: vaccinesData.filter((vaccine) => !currentCentreIdsToSkip.includes(vaccine.center_id))
});
},
},
]}
/>
</div>
{/* Hit Counter */}
<br />
<center><b>Total Views Worldwide</b></center>
<br />
<center>
<a href="https://www.hitwebcounter.com" target="_blank" rel="noreferrer">
<img src="https://hitwebcounter.com/counter/counter.php?page=7816923&style=0005&nbdigits=9&type=page&initCount=0" title="Free Counter" Alt="web counter" border="0" />
</a>
</center>
<br />
</div>
);
}
