@material-ui/icons#Warning JavaScript Examples

The following examples show how to use @material-ui/icons#Warning. 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: ResultPage.js    From Quizzie with MIT License 4 votes vote down vote up 
function ResultPage(props) {
	const [quizId, setQuizId] = useState(props.match.params.id);
	const [loading, setLoading] = useState(true);

	const [name, setName] = useState("");
	const [marks, setMarks] = useState(null);
	const [responses, setResponses] = useState([]);


	const resIcon = (response) => {
		if(response.selected === response.correctAnswer) {
			return <Check style={{color: 'green', marginLeft: '3px'}} />
		} else if(response.selected === null) {
			return <Warning style={{color: 'goldenrod', marginLeft: '3px'}} />
		} 
		else {
			return <Close style={{color: 'red', marginLeft: '3px'}} />
		}
	}

	const getDetails = async () => {
		let token = localStorage.getItem("authToken");
		let url = `https://quizzie-api.herokuapp.com/quiz/${quizId}`;

		try {
			await axios.get(url, {
				headers: {
					"auth-token": token
				}
			}).then(res => {
				setName(res.data.result.quizName);
			})
		} catch (error) {
			console.log(error);
		}
	}

	const getResponses = async () => {
		let token = localStorage.getItem("authToken");
		let url = `https://quizzie-api.herokuapp.com/user/studentQuizResult/${quizId}`;

		try {
			await axios.get(url, {
				headers: {
					"auth-token": token
				}
			}).then(res => {
				setMarks(res.data.result.marks);
				setResponses(res.data.result.responses);
				setLoading(false);
			})
		} catch (error) {
			console.log(error);
		}
	}

	useState(() => {
		getDetails();
		getResponses();
	}, [])

	if (loading) {
		return <Loading />
	}

	return (
		<Container className="result-page">
			<div className="result-head">
				<Typography variant="h4" className="result-title">Results</Typography>
			</div>
			<div className="result-quiz-info">
				<Typography variant="h5"><span className="profile-param">Quiz:</span> <strong>{name}</strong></Typography>
				<Typography variant="h5"><span className="profile-param">Scored:</span> <strong>{marks}</strong> out of <strong>{responses.length}</strong></Typography>
			</div>
			<div className="result-responses">
				<div className="result-response-title">
					<Typography variant="h5">Responses</Typography>
				</div>
				<div className="result-responses-list">
					{responses.map((response) => (
						<ExpansionPanel elevation={3} className="expansion" key={response.quesId}>
							<ExpansionPanelSummary
								className="question-response"
								expandIcon={<ExpandMore />}
								aria-controls="question-content"
								aria-label="Expand"
							>
								<Typography className="question-label">{response.description} {resIcon(response)}</Typography>
							</ExpansionPanelSummary>
							<ExpansionPanelDetails>
								<List component="nav" className="options-display">
									{response.options.map((option) => (
										<ListItem button key={option._id}>
											<ListItemIcon><Adjust style={{ color: response.correctAnswer === option.text ? 'green' : (response.selected === option.text? 'red': 'black') }} /></ListItemIcon>
											<ListItemText style={{ color: response.correctAnswer === option.text ? 'green' : (response.selected === option.text? 'red': 'black') }} primary={option.text} />
										</ListItem>
									))}
								</List>
							</ExpansionPanelDetails>
						</ExpansionPanel>
					))}
				</div>
			</div>
		</Container>
	)
}
Example #2
Source File: StudentResponses.js    From Quizzie with MIT License 4 votes vote down vote up 
function StudentResponses(props) {
	const [loading, setLoading] = useState(true);

	const [name, setName] = useState("");
	const [marks, setMarks] = useState(null);
	const [responses, setResponses] = useState([]);
	
	const [redirect, setRedirect] = useState(false);

	let state = null;

	const resIcon = (response) => {
		if(response.selected === response.correctAnswer) {
			return <Check style={{color: 'green', marginLeft: '3px'}} />
		} else if(response.selected === null) {
			return <Warning style={{color: 'goldenrod', marginLeft: '3px'}} />
		} 
		else {
			return <Close style={{color: 'red', marginLeft: '3px'}} />
		}
	}

	const setup = () => {
		setName(state.userId.name);
		setMarks(state.marks);
		setResponses(state.responses);
		setLoading(false);
	}

	
	useState(() => {
		if(props.location.state === undefined) {
			setLoading(false);
			setRedirect(true);
			return;
		}

		state = props.location.state.response;
		setup();
	}, [])

	if (loading) {
		return <Loading />
	} else if(redirect) {
		return <Redirect to="/dashboard" />
	}

	return (
		<Container className="result-page">
			<div className="result-head">
				<Typography variant="h4" className="result-title">Results</Typography>
			</div>
			<div className="result-quiz-info">
				<Typography variant="h5"><span className="profile-param">Quiz:</span> <strong>{name}</strong></Typography>
				<Typography variant="h5"><span className="profile-param">Scored:</span> <strong>{marks}</strong> out of <strong>{responses.length}</strong></Typography>
			</div>
			<div className="result-responses">
				<div className="result-response-title">
					<Typography variant="h5">Responses</Typography>
				</div>
				<div className="result-responses-list">
					{responses.map((response) => (
						<ExpansionPanel elevation={3} className="expansion" key={response.quesId}>
							<ExpansionPanelSummary
								className="question-response"
								expandIcon={<ExpandMore />}
								aria-controls="question-content"
								aria-label="Expand"
							>
								<Typography className="question-label">{response.description} {resIcon(response)}</Typography>
							</ExpansionPanelSummary>
							<ExpansionPanelDetails>
								<List component="nav" className="options-display">
									{response.options.map((option) => (
										<ListItem button key={option._id}>
											<ListItemIcon><Adjust style={{ color: response.correctAnswer === option.text ? 'green' : (response.selected === option.text? 'red': 'black') }} /></ListItemIcon>
											<ListItemText style={{ color: response.correctAnswer === option.text ? 'green' : (response.selected === option.text? 'red': 'black') }} primary={option.text} />
										</ListItem>
									))}
								</List>
							</ExpansionPanelDetails>
						</ExpansionPanel>
					))}
				</div>
			</div>
		</Container>
	)
}
Example #3
Source File: Sidebar.js    From Edlib with GNU General Public License v3.0 4 votes vote down vote up 
Sidebar = ({
    customSetup,
    customComponents,
    onSave,
    intl,
    onSaveCallback,
    componentsOrder,
}) => {
    // eslint-disable-next-line no-undef
    const setup = customSetup || editorSetup;
    const {
        dispatch,
        state,
        initialState: { isDraft: isInitialDraft },
    } = useForm();
    const { locked, lockedProperties, pulseUrl } = setup;
    const [isLocked, setLocked] = useState(locked);

    const onChange = (type, payload) => dispatch({ type: type, payload });
    const toggleLock = () => setLocked(!isLocked);

    const components = useMemo(() => {
        let commonComponents = SidebarCommonComponents(
            setup,
            onChange,
            state,
            intl
        );
        commonComponents = commonComponents
            .concat(customComponents)
            .filter((box) => typeof box !== 'undefined' && box !== null)
            .map((component) => {
                component.order = componentsOrder.indexOf(component.id);
                return component;
            })
            .sort(compare('order'));
        return commonComponents;
    }, [state]);

    return (
        <Box>
            <Paper className="sidebar">
                {isInitialDraft && (
                    <Box
                        style={{
                            backgroundColor: '#FFECB3',
                        }}
                        display="flex"
                        flexDirection="row"
                        padding={1}
                    >
                        <Box pr={1}>
                            <Warning />
                        </Box>
                        <Box>
                            <Box>
                                <strong>
                                    {intl.formatMessage({
                                        id: 'unpublished_changes',
                                    })}
                                </strong>
                            </Box>
                            <Box>
                                {intl.formatMessage({
                                    id: 'unpublished_changes_explain',
                                })}
                            </Box>
                        </Box>
                    </Box>
                )}
                <Box padding={1}>
                    {!isLocked && (
                        <SaveBox
                            onSave={onSave}
                            onSaveCallback={onSaveCallback}
                            pulseUrl={pulseUrl}
                        />
                    )}
                    {isLocked && (
                        <Lock
                            {...lockedProperties}
                            lockReleased={() => toggleLock()}
                        />
                    )}
                    <AlertBox />
                    {setup.userPublishEnabled === true && (
                        <Publish
                            label={intl.formatMessage({
                                id: 'SHARINGCOMPONENT.ISPUBLISHED',
                            })}
                        />
                    )}
                    {components.length > 0 && (
                        <ExpandableBoxList className="expandableList">
                            {components.map((box, index) => {
                                const { title, component, info } = box;
                                return (
                                    <ExpandableBox
                                        key={index}
                                        title={title}
                                        info={info}
                                    >
                                        {component || box}
                                    </ExpandableBox>
                                );
                            })}
                        </ExpandableBoxList>
                    )}
                </Box>
            </Paper>
        </Box>
    );
}
Example #4
Source File: MyActivitiesLoggedin.js    From pwa with MIT License 4 votes vote down vote up 
function MyActivitiesLoggedin(props) {
  let history = useHistory();

  const date =
    props.eventResult !== null
      ? new Intl.DateTimeFormat('fa', {
          month: 'short',
          day: '2-digit',
          year: 'numeric',
          hour: 'numeric',
          minute: 'numeric',
        }).format(new Date(props.createTime))
      : null;

  const firstDate =
    props.firstCreateTime !== null
      ? new Intl.DateTimeFormat('fa', {
          month: 'short',
          day: '2-digit',
          year: 'numeric',
          hour: 'numeric',
          minute: 'numeric',
        }).format(new Date(props.firstCreateTime))
      : null;

  const mySelf =
    props.eventResult !== null
      ? props.eventResult.people.filter((person) => {
          return person.phone_number === props.eventResult.phone_number;
        })
      : null;
  let healthMessageColor = 'rgba(0,0,0,0.75)';
  if (mySelf !== null) {
    if (mySelf[0].health_state == 1) {
      healthMessageColor = '#00ffba';
    } else if (mySelf[0].health_state == 2) {
      healthMessageColor = '#f1e100';
    } else if (mySelf[0].health_state == 3) {
      healthMessageColor = '#ff005c';
    }
  }

  return (
    <>
      <MyActivitiesHelp />
      <AppBar position="static" className="activity-header">
        <Toolbar>
          <img src={logo} className="app-header-logo" />
          <div>
            <IconButton
              color="inherit"
              onClick={() => {
                props.hideNavigation();
                history.push('/qr-scanner');
              }}
            >
              <CameraAlt />
            </IconButton>
            <IconButton
              color="inherit"
              onClick={() => {
                props.hideNavigation();
                history.push('/my-qrcode');
              }}
            >
              <CropFree />
            </IconButton>
            <IconButton
              color="inherit"
              onClick={() => {
                props.hideNavigation();
                history.push('/bluetooth');
              }}
            >
              <Bluetooth />
            </IconButton>
          </div>
        </Toolbar>
      </AppBar>
      <div
        className={`contentWrapper MyActivitiesWrapper`}
        style={
          props.eventResult === null
            ? { justifyContent: 'center' }
            : { justifyContent: 'flex-start' }
        }
      >
        {props.eventResult === null && (
          <>
            <PlaylistAdd
              style={{ fontSize: 80, marginBottom: 22, marginTop: -50 }}
              color="primary"
            />
            <span className="message">
              {PersianLan.myActivitiesTab.noActivityYet}
            </span>
            <span className="message">
              {PersianLan.myActivitiesTab.touchButtonToSetActivity}
            </span>
          </>
        )}

        {props.eventResult !== null && (
          <div>
            <div className="lastUpdateContainer">
              <span>زمان بروزرسانی وضعیت شما:</span>
              <span>{date}</span>
            </div>
            <div className="healthMessageContainer">
              {mySelf[0].health_state === 1 && (
                <Favorite style={{ fontSize: 70, color: healthMessageColor }} />
              )}
              {mySelf[0].health_state === 2 && (
                <Warning style={{ fontSize: 70, color: healthMessageColor }} />
              )}
              {mySelf[0].health_state === 3 && (
                <Warning style={{ fontSize: 70, color: healthMessageColor }} />
              )}
              <div className="healthMessage">
                <p style={{ color: healthMessageColor, fontSize: 14 }}>
                  {props.eventResult.people[0].health_message}
                </p>
              </div>
            </div>
            <div className="healthCount">
              <span>{props.eventCounter} بار ثبت اطلاعات در سلامت روزانه</span>
              {props.eventCounter > 1 && (
                <span className="healthPerod">
                  از {firstDate} تا {date}
                </span>
              )}
            </div>
          </div>
        )}
        <Button
          onClick={() => {
            props.hideNavigation();
            history.push('/add-myactivities');
          }}
          disableElevation
          className={`btn addActivityBtn`}
          color="primary"
          variant="contained"
        >
          {PersianLan.myActivitiesTab.addNewActivity}
        </Button>
      </div>
    </>
  );
}