wsclock_front/src/Alarm.js

import * as React from 'react';

import util from './utils';
import Notif from './AlarmNotif';

import './Alarm.css';

/* An alarm component : represent an alarm in the Alarms table */
class Alarm extends React.Component {

	constructor(props:{	name:string, // alarm name
				time:string, // alarm ring time
				on:bool, // on flag
				ringing:bool, // ringing flag
				snooze:bool, // snooze flag
				ws:WebSocket, // Clock.state.ws reference
				upd:function, // Clock.alrmUpdate() reference
	}) {
		super(props)

		this.time_input = null;
		this.state = {	new_time:props.time, // time input value
				prev_new_time:props.time, // previous input value
				set_time:false, // if true show the time input
		}
		
		this.handleChangeSetTime = this.handleChangeSetTime.bind(this)
		this.set_time = this.set_time.bind(this)
		this.on = this.on.bind(this)
		this.off = this.off.bind(this)
		this.snooze = this.snooze.bind(this)
		this.Delete = this.Delete.bind(this)
	}

	render() {
		let alrm_state_btn = <></>;
		let alrm_class = 'Alrm';

		if(this.props.on) {
			alrm_state_btn = (
				<button
					onClick={this.off}
				>
					<abbr
						title="Turn OFF"
					>off</abbr>
				</button>
			);
			if(this.props.ringing) {
				alrm_state_btn = <>{alrm_state_btn}<button onClick={this.snooze}>snooze</button></>
				alrm_class += ' AlrmRinging';
			} else {
				alrm_class += ' AlrmOn';
			}
		} else {
			alrm_class += ' AlrmOff';
			alrm_state_btn = (
				<>
				<button
					onClick={this.on}
				>
					<abbr
						title="Turn ON"
					>on</abbr>
				</button>
				</>
			);
		}

		let snooze = this.props.snooze?<span className="snooze">Snooze</span>:<></>;

		let set_lbl = <abbr title="Set ringtime">Set</abbr>;
		let set_id = 'ringtime'+this.props.name;
		let time_disp = this.state.set_time ? (
			<form
				onSubmit={this.handleSubmitSetTime}
				className="AlrmSetTimeForm"
			>
				<input
					id={set_id}
					onChange={this.handleChangeSetTime}
					value={this.state.new_time}
					style={{width:"5em"}}
					ref={(input  => {this.time_input = input;})}
				/>
				<button
					onClick={this.set_time}
				>{set_lbl}</button>
			</form>
		):(
			<span>
				{this.props.time}&nbsp;
				<button
					onClick={this.set_time}
				>{set_lbl}</button>
			</span>
		);

		return (
			<tr className={alrm_class}>
				<td className="AlrmName">{this.props.name}</td>
				<td>
					{time_disp}
				</td>
				<td className="AlrmStateBtn">
					{alrm_state_btn}
					{snooze}
				</td>
				<td>
					<button
						className="AlrmDeleteBtn"
						onClick={this.Delete}
					>
						<abbr title="Delete alarm">X</abbr>
					</button>
				</td>
			</tr>
		);
	}

	componentDidUpdate() {
		if(this.time_input !== null) {
			// Force focus on the edited alarm on each update
			this.time_input.focus()
		}
	}

	/* Time input form submit handler */
	set_time (evt) {
		evt.preventDefault()
		if(this.state.set_time) {
			this.props.ws.send('alarm set '+util.escape_arg(this.props.name)+' '+this.state.new_time.replace(/:/g, ' '))
			this.props.upd()
		}
		this.setState({new_time:this.props.time,
			       set_time: !this.state.set_time})
	}

	/* Time input change event handler */
	handleChangeSetTime (evt) {
		let val = evt.target.value
		let prev = evt.target.value
		let prevdel = this.state.prev_new_time.length > val.length
		if(val.length > 0) {
			if(!val.match(/.*[0-9:]$/)) {
				val = val.substring(0, val.length-1)
			}
			if(!prevdel && (
				val.match(/^[0-9]{2}$/) ||
				val.match(/^[0-9]{1,2}:[0-9]{2}$/)
			)) {
				val += ':'
				prev = val
			}
			if(val.length > 8 || val.match(/[^0-9:]/) || val.match(/^.*:.*:.*:.*$/)) {
				prev = ''
				val = ''
			}
		}
		this.setState({new_time:val, prev_new_time:prev})
	}

	/* on button click handler  */
	on (evt) {
		Notif.requestPermission()
		this.props.ws.send('alarm on '+util.escape_arg(this.props.name))
		this.props.upd()
	}

	/* off button click handler */
	off (evt) {
		this.props.ws.send('alarm off '+util.escape_arg(this.props.name))
		this.props.upd()
	}

	/* snooze button click handler */
	snooze (evt) {
		this.props.ws.send('alarm snooze '+util.escape_arg(this.props.name)+' 1')
		this.props.upd()
	}

	/* delete button click handler */
	Delete (evt) {
		var todel = true
		if(this.props.ringing || this.props.snooze || this.props.on) {
			todel = confirm('Do your really want to delete "'+this.props.name+'" ?')
		}
		if(todel) {
			this.props.ws.send('alarm del '+util.escape_arg(this.props.name))
			this.props.upd()
		}
	}

}


export default Alarm;