wsclock_front/src/Alarms.js

import * as React from 'react';

import util from'./utils';
import Alarm from './Alarm';

import './Alarms.css';

/* An alarm list component : a table with Alarm component instances */
class Alarms extends React.Component {
	constructor(props:{	alarms:list, // List of alarm informations
				ws:WebSocket, // Clock.state.ws reference
				alrmUpd:function // Clock.alrmUpdate() reference
	}) {
		super(props);
		this.state = {	new_alrm:'', // new alarm input value
				add_alrm:false // if true show new alarm input
		}
		this.handleNewAlarm = this.handleNewAlarm.bind(this)
		this.handleNewAlarmChange = this.handleNewAlarmChange.bind(this)
	}

	render() {
		let add_alrm_lbl = 'New alarm'
		let add_alrm = (
			<button
				onClick={this.handleNewAlarm}
			>{add_alrm_lbl}</button>);
		if(this.state.add_alrm) {
			add_alrm = (
				<form onSubmit={this.handleNewAlarm}>
					<input
						type="submit"
						value={add_alrm_lbl}
					/>
					<label
						htmlFor="new-alrm"
					>
						New alarm name
					</label>
					<input
						id="new-alrm"
						onChange={this.handleNewAlarmChange}
						value={this.state.new_alrm}
					/>
				</form>
			);
		}
		return (
			<div className="Alarms">
				<table className="AlrmList">
				<tbody>
				{Object.entries(this.props.alarms).map(alrm => (
					<Alarm
						key={alrm[0]}
						name={alrm[0]}
						time={alrm[1].time}
						on={alrm[1].on}
						ringing={alrm[1].ringing}
						snooze={alrm[1].snooze}
						ws={this.props.ws}
						upd={this.props.alrmUpd}
					/>
				))}
				</tbody>
				</table>
				{add_alrm}
			</div>
		);
	}

	/* New alarm input form submit handler */
	handleNewAlarm(evt) {
		evt.preventDefault();
		if(!this.state.add_alrm) {
			this.setState({add_alrm:true})
			return
		}
		if(this.state.new_alrm.length == 0) {
			this.setState({add_alrm:false})
			return;
		}
		let esc_name = util.escape_arg(this.state.new_alrm)
		this.props.ws.send('alarm add '+esc_name)
		this.setState({new_alrm:'', add_alrm:false})
		this.props.alrmUpd()
	}

	/* New alarm input change handler */
	handleNewAlarmChange(evt) {
		this.setState({new_alrm:evt.target.value})
	}
}

export default Alarms;