Techognito/starter-kit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Datetimepicker refactoring

Browse source
This commit is contained in:
Kyrylo Gliebov 2018-10-02 15:19:36 +02:00
parent adc8159def
commit c51610e22e
1 changed files with 31 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

79
src/recordings.jsx
View file

@ -113,75 +113,51 @@ let parseDate = function(date) {
* A component representing a date & time picker based on bootstrap-datetime-picker. * A component representing a date & time picker based on bootstrap-datetime-picker.
* Requires jQuery, bootstrap-datetime-picker, moment.js * Requires jQuery, bootstrap-datetime-picker, moment.js
* Properties: * Properties:
* - onDateChange: function to call on date change event of datepicker. * - onChange: function to call on date change event of datepicker.
* - date: variable to pass which will be used as initial value. * - value: variable to pass which will be used as initial value.
*/ */
class Datetimepicker extends React.Component { class Datetimepicker extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.handleDateChange = this.handleDateChange.bind(this); this.handleDateChange = this.handleDateChange.bind(this);
this.clearField = this.clearField.bind(this); this.clearField = this.clearField.bind(this);
this.markDateField = this.markDateField.bind(this);
this.state = { this.state = {
invalid: false, invalid: false,
date: this.props.date, date: this.props.value,
dateLastValid: null,
}; };
} }
componentDidMount() { componentDidMount() {
let datepicker = $(this.refs.datepicker).datetimepicker({ $(this.refs.datepicker).datetimepicker({
format: 'yyyy-mm-dd hh:ii:00', format: 'yyyy-mm-dd hh:ii:00',
autoclose: true, autoclose: true,
todayBtn: true, todayBtn: true,
}); })
datepicker.on('changeDate', (e) => { .on('changeDate', this.handleDateChange);
this.handleDateChange(e); // remove datepicker from input, so it only works by button press
});
$(this.refs.datepicker_input).datetimepicker('remove'); $(this.refs.datepicker_input).datetimepicker('remove');
this.markDateField();
} }
componentWillUnmount() { componentWillUnmount() {
$(this.textInput).datetimepicker('remove'); $(this.refs.datepicker).datetimepicker('remove');
} }
handleDateChange(e) { handleDateChange() {
if (e.type === "changeDate") { const date = $(this.refs.datepicker_input).val()
let event = new Event('input', { bubbles: true }); .trim();
e.currentTarget.firstChild.dispatchEvent(event); this.setState({invalid: false, date: date});
} if (!parseDate(date)) {
this.setState({invalid: true});
if (e.type === "input") { } else {
this.setState({date: e.target.value}); this.props.onChange(date);
if (parseDate(e.target.value)) {
this.setState({dateLastValid: e.target.value});
this.setState({invalid: false});
this.props.onDateChange(e.target.value, e.target.value.trim());
} else {
this.setState({invalid: true});
this.props.onDateChange(e.target.value, this.state.dateLastValid.trim());
}
} }
} }
clearField() { clearField() {
const date = "";
this.props.onChange(date);
this.setState({date: date, invalid: false});
$(this.refs.datepicker_input).val(""); $(this.refs.datepicker_input).val("");
let event = new Event('input', { bubbles: true });
this.refs.datepicker_input.dispatchEvent(event);
this.handleDateChange(event);
this.setState({invalid: false});
}
markDateField() {
let date = $(this.refs.datepicker_input).val()
.trim();
if (!parseDate(date)) {
this.setState({invalid: true});
} else {
this.setState({dateLastValid: date});
this.setState({invalid: false});
}
} }
render() { render() {
@ -189,7 +165,7 @@ class Datetimepicker extends React.Component {
<div ref="datepicker" className="input-group date input-append date form_datetime"> <div ref="datepicker" className="input-group date input-append date form_datetime">
<input ref="datepicker_input" type="text" size="16" <input ref="datepicker_input" type="text" size="16"
className={"form-control bootstrap-datepicker " + (this.state.invalid ? "invalid" : "valid")} className={"form-control bootstrap-datepicker " + (this.state.invalid ? "invalid" : "valid")}
readOnly value={this.state.date} onChange={this.handleDateChange} /> value={this.state.date} onChange={this.handleDateChange} />
<span className="input-group-addon add-on"><i className="fa fa-calendar" /></span> <span className="input-group-addon add-on"><i className="fa fa-calendar" /></span>
<span className="input-group-addon add-on" onClick={this.clearField}> <span className="input-group-addon add-on" onClick={this.clearField}>
<i className="fa fa-remove" /></span> <i className="fa fa-remove" /></span>
@ -198,8 +174,6 @@ class Datetimepicker extends React.Component {
} }
} }
console.log(Datetimepicker);
function LogElement(props) { function LogElement(props) {
const entry = props.entry; const entry = props.entry;
const start = props.start; const start = props.start;
@ -659,6 +633,7 @@ class View extends React.Component {
this.handleInputChange = this.handleInputChange.bind(this); this.handleInputChange = this.handleInputChange.bind(this);
this.handleTsChange = this.handleTsChange.bind(this); this.handleTsChange = this.handleTsChange.bind(this);
this.handleLogTsChange = this.handleLogTsChange.bind(this); this.handleLogTsChange = this.handleLogTsChange.bind(this);
this.handleDateSinceChange = this.handleDateSinceChange.bind(this);
/* Journalctl instance */ /* Journalctl instance */
this.journalctl = null; this.journalctl = null;
/* Recording ID journalctl instance is invoked with */ /* Recording ID journalctl instance is invoked with */
@ -868,6 +843,14 @@ class View extends React.Component {
cockpit.location.go([], $.extend(cockpit.location.options, state)); cockpit.location.go([], $.extend(cockpit.location.options, state));
} }
handleDateSinceChange(date) {
cockpit.location.go([], $.extend(cockpit.location.options, {date_since: date}));
}
handleDateUntilChange(date) {
cockpit.location.go([], $.extend(cockpit.location.options, {date_until: date}));
}
handleTsChange(ts) { handleTsChange(ts) {
this.setState({curTs: ts}); this.setState({curTs: ts});
} }
@ -940,13 +923,13 @@ class View extends React.Component {
<label className="control-label" htmlFor="date_since">Since</label> <label className="control-label" htmlFor="date_since">Since</label>
</td> </td>
<td> <td>
<input type="text" className="form-control" name="date_since" value={this.state.date_since} onChange={this.handleInputChange} /> <Datetimepicker value={this.state.date_since} onChange={this.handleDateSinceChange} />
</td> </td>
<td className="top"> <td className="top">
<label className="control-label" htmlFor="date_until">Until</label> <label className="control-label" htmlFor="date_until">Until</label>
</td> </td>
<td> <td>
<input type="text" className="form-control" name="date_until" value={this.state.date_until} onChange={this.handleInputChange} /> <Datetimepicker value={this.state.date_until} onChange={this.handleDateUntilChange} />
</td> </td>
<td className="top"> <td className="top">
<label className="control-label" htmlFor="username">Username</label> <label className="control-label" htmlFor="username">Username</label>