Alarm support

ReactNativeClient/lib/components/screens/note.js

@@ -24,6 +24,7 @@ import { NoteBodyViewer } from 'lib/components/note-body-viewer.js';
 import RNFetchBlob from 'react-native-fetch-blob';
 import { DocumentPicker, DocumentPickerUtil } from 'react-native-document-picker';
 import ImageResizer from 'react-native-image-resizer';
+import { SelectDateTimeDialog } from 'lib/components/select-date-time-dialog.js';
 
 class NoteScreenComponent extends BaseScreenComponent {
 	
@@ -43,6 +44,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 			isLoading: true,
 			resources: {},
 			titleTextInputHeight: 20,
+			alarmDialogShown: false,
 		};
 
 		this.saveButtonHasBeenShown_ = false;
@@ -345,10 +347,29 @@ class NoteScreenComponent extends BaseScreenComponent {
 	toggleIsTodo_onPress() {
 		let newNote = Note.toggleIsTodo(this.state.note);
 		let newState = { note: newNote };
-		//if (!newNote.id) newState.lastSavedNote = Object.assign({}, newNote);
 		this.setState(newState);
 	}
 
+	setAlarm_onPress() {
+		this.setState({ alarmDialogShown: true });
+	}
+
+	async onAlarmDialogAccept(date) {
+		let newNote = Object.assign({}, this.state.note);
+		newNote.todo_due = date ? date.getTime() : 0;
+
+		this.setState({
+			alarmDialogShown: false,
+			note: newNote,
+		});
+		//await this.saveOneProperty('todo_due', date ? date.getTime() : 0);
+		//this.forceUpdate();
+	}
+
+	onAlarmDialogReject() {
+		this.setState({ alarmDialogShown: false });
+	}
+
 	showMetadata_onPress() {
 		this.setState({ showNoteMetadata: !this.state.showNoteMetadata });
 		this.refreshNoteMetadata(true);
@@ -474,6 +495,8 @@ class NoteScreenComponent extends BaseScreenComponent {
 			paddingLeft: theme.marginLeft,
 		}
 
+		const dueDate = isTodo && note.todo_due ? new Date(note.todo_due) : null;
+
 		const titleComp = (
 			<View style={titleContainerStyle}>
 				{ isTodo && <Checkbox style={checkboxStyle} checked={!!Number(note.todo_completed)} onChange={(checked) => { this.todoCheckbox_change(checked) }} /> }
@@ -527,6 +550,14 @@ class NoteScreenComponent extends BaseScreenComponent {
 				{ bodyComponent }
 				{ actionButtonComp }
 				{ this.state.showNoteMetadata && <Text style={this.styles().metadata}>{this.state.noteMetadata}</Text> }
+
+				<SelectDateTimeDialog
+					shown={this.state.alarmDialogShown}
+					date={dueDate}
+					onAccept={(date) => this.onAlarmDialogAccept(date) }
+					onReject={() => this.onAlarmDialogReject() }
+				/>
+
 				<DialogBox ref={dialogbox => { this.dialogbox = dialogbox }}/>
 			</View>
 		);

ReactNativeClient/lib/components/select-date-time-dialog.js

@@ -0,0 +1,94 @@
+import React, { Component } from 'react';
+import { Keyboard, View, Button, Text, StyleSheet, Linking, Image } from 'react-native';
+import PopupDialog, { DialogTitle, DialogButton } from 'react-native-popup-dialog';
+import DatePicker from 'react-native-datepicker'
+import moment from 'moment';
+import { _ } from 'lib/locale.js';
+
+class SelectDateTimeDialog extends Component {
+
+	constructor() {
+		super();
+		this.dialog_ = null;
+		this.shown_ = false;
+		this.state = { date: null };
+	}
+
+	componentWillReceiveProps(newProps) {
+		if (newProps.date != this.state.date) {
+			this.setState({ date: newProps.date });
+		}
+
+		if ('shown' in newProps) {
+			this.show(newProps.shown);
+		}
+	}
+
+	show(doShow = true) {
+		if (doShow) {
+			this.dialog_.show();
+		} else {
+			this.dialog_.dismiss();
+		}
+
+		this.shown_ = doShow;
+	}
+
+	dismiss() {
+		this.show(false);
+	}
+
+	dateTimeFormat() {
+		return "MM/DD/YYYY HH:mm";
+	}
+
+	stringToDate(s) {
+		return moment(s, this.dateTimeFormat()).toDate();
+	}
+
+	onAccept() {
+		if (this.props.onAccept) this.props.onAccept(this.state.date);
+	}
+
+	onReject() {
+		if (this.props.onReject) this.props.onReject();
+	}
+
+	onClear() {
+		if (this.props.onAccept) this.props.onAccept(null);
+	}
+
+	render() {
+		const popupActions = [
+			<DialogButton text="Save alarm" align="center" onPress={() => this.onAccept()} key="saveButton" />,
+			<DialogButton text="Clear alarm" align="center" onPress={() => this.onClear()} key="clearButton" />,
+			<DialogButton text="Cancel" align="center" onPress={() => this.onReject()} key="cancelButton" />,
+		];
+
+		return (
+			<PopupDialog
+				ref={(dialog) => { this.dialog_ = dialog; }}
+				dialogTitle={<DialogTitle title={_('Set alarm')} />}
+				actions={popupActions}
+				width={0.9}
+				height={350}
+				>
+				<View style={{flex:1, margin: 20, alignItems:'center'}}>
+					<DatePicker
+						date={this.state.date}
+						mode="datetime"
+						placeholder={_('Select date')}
+						format={this.dateTimeFormat()}
+						confirmBtnText={_('Confirm')}
+						cancelBtnText={_('Cancel')}
+						onDateChange={(date) => { this.setState({ date: this.stringToDate(date) }); }}
+						style={{width:300}}
+					/>
+				</View>
+			</PopupDialog>
+		);
+	}
+
+}
+
+export { SelectDateTimeDialog };

ReactNativeClient/lib/time-utils.js

@@ -10,6 +10,10 @@ let time = {
 		return (new Date()).getTime();
 	},
 
+	unixMsToObject(ms) {
+		return new Date(ms);
+	},
+
 	unixMsToS(ms) {
 		return Math.floor(ms / 1000);
 	},