Add input box for sending messages to the sign

webclient/src/Home.js

@@ -138,6 +138,53 @@ function MemberInfo(props) {
 	);
 };
 
+function SignForm(props) {
+	const { token } = props;
+	const [error, setError] = useState({});
+	const [sign, setSign] = useState('');
+	const [loading, setLoading] = useState(false);
+	const [success, setSuccess] = useState(false);
+
+	const handleValues = (e, v) => setSign(v.value);
+	const handleChange = (e) => handleValues(e, e.currentTarget);
+
+	const handleSubmit = (e) => {
+		if (loading) return;
+		setLoading(true);
+		const data = {sign: sign};
+		requester('/stats/sign/', 'POST', token, data)
+		.then(res => {
+			setLoading(false);
+			setSuccess(true);
+			setError({});
+			setSign('');
+		})
+		.catch(err => {
+			setLoading(false);
+			console.log(err);
+			setError(err.data);
+		});
+	};
+
+	return (
+		<Form onSubmit={handleSubmit}>
+			<p>Send a message to the sign:</p>
+
+			<Form.Input
+				name='sign'
+				onChange={handleChange}
+				value={sign}
+				error={error.sign}
+			/>
+
+			{!!token &&<Form.Button loading={loading} error={error.non_field_errors}>
+				Submit
+			</Form.Button>}
+			{success && <div>Success!</div>}
+		</Form>
+	);
+};
+
 export function Home(props) {
 	const { user, token } = props;
 	const [stats, setStats] = useState(JSON.parse(localStorage.getItem('stats', 'false')));
@@ -213,9 +260,6 @@ export function Home(props) {
 				</Grid.Column>
 				<Grid.Column>
 					<Segment>
-						<Header size='medium'>Home</Header>
-						<p>Welcome to the Protospace member portal! Here you can view member info, join classes, and manage your membership.</p>
-
 						<Header size='medium'>Quick Links</Header>
 						<p><a href='http://protospace.ca/' target='_blank' rel='noopener noreferrer'>Main Website</a></p>
 						<p><a href='http://wiki.protospace.ca/Welcome_to_Protospace' target='_blank' rel='noopener noreferrer'>Protospace Wiki</a> — <Link to='/auth/wiki'>[register]</Link></p>
@@ -306,7 +350,10 @@ export function Home(props) {
 							{user && <p>Alarm status: {alarmStat()}{doorOpenStat()}</p>}
 						</div>
 
+						<SignForm token={token} />
+
 					</Segment>
+
 				</Grid.Column>
 			</Grid>
 		</Container>