Generalize time input naming more

Signed-off-by: Julius Volz <julius.volz@gmail.com>

src/App.css

@@ -87,11 +87,11 @@ button.execute-btn {
     width: 50px;
 }
 
-.graph-controls .endtime-input input {
+.graph-controls .time-input input {
     border-right: none;
 }
 
-div.endtime-input {
+div.time-input {
     width: 240px !important;
 }
 
@@ -103,11 +103,11 @@ div.endtime-input {
     width: 90px;
 }
 
-.graph-controls .endtime-input, .graph-controls .resolution-input, .graph-controls .stacked-input {
+.graph-controls .time-input, .graph-controls .resolution-input, .graph-controls .stacked-input {
     margin-left: 20px;
 }
 
-.graph-controls .clear-endtime-btn {
+.graph-controls .clear-time-btn {
     background: #fff;
     border-left: none;
     border-top: 1px solid #ced4da;

src/GraphControls.tsx

@@ -116,7 +116,12 @@ class GraphControls extends Component<GraphControlsProps> {
           </InputGroupAddon>
         </InputGroup>
 
-        <TimeInput endTime={this.props.endTime} range={this.props.range} onChangeEndTime={this.props.onChangeEndTime} />
+        <TimeInput
+          time={this.props.endTime}
+          range={this.props.range}
+          placeholder="End time"
+          onChangeTime={this.props.onChangeEndTime}
+        />
 
         <Input
           placeholder="Res. (s)"

src/Panel.tsx

@@ -256,7 +256,12 @@ class Panel extends Component<PanelProps, PanelState> {
                 {this.props.options.type === 'table' &&
                   <>
                     <div className="table-controls">
-                      <TimeInput endTime={this.props.options.endTime} range={this.props.options.range} onChangeEndTime={this.handleChangeEndTime} />
+                      <TimeInput
+                        time={this.props.options.endTime}
+                        range={this.props.options.range}
+                        placeholder="Evaluation time"
+                        onChangeTime={this.handleChangeEndTime}
+                      />
                     </div>
                     <DataTable data={this.state.data} />
                   </>

src/TimeInput.tsx

@@ -32,41 +32,42 @@ library.add(
 dom.watch();
 
 interface TimeInputProps {
-  endTime: number | null;
+  time: number | null; // Timestamp in milliseconds.
-  range: number;
+  range: number; // Range in seconds.
+  placeholder: string;
 
-  onChangeEndTime: (endTime: number | null) => void;
+  onChangeTime: (time: number | null) => void;
 }
 
 class TimeInput extends Component<TimeInputProps> {
-  private endTimeRef = React.createRef<HTMLInputElement>();
+  private timeInputRef = React.createRef<HTMLInputElement>();
-  private $endTime: any | null = null;
+  private $time: any | null = null;
 
-  getBaseEndTime = (): number => {
+  getBaseTime = (): number => {
-    return this.props.endTime || moment().valueOf();
+    return this.props.time || moment().valueOf();
   }
 
-  increaseEndTime = (): void => {
+  increaseTime = (): void => {
-    const endTime = this.getBaseEndTime() + this.props.range*1000/2;
+    const time = this.getBaseTime() + this.props.range*1000/2;
-    this.props.onChangeEndTime(endTime);
+    this.props.onChangeTime(time);
-    this.$endTime.datetimepicker('date', moment(endTime));
+    this.$time.datetimepicker('date', moment(time));
   }
 
-  decreaseEndTime = (): void => {
+  decreaseTime = (): void => {
-    const endTime = this.getBaseEndTime() - this.props.range*1000/2;
+    const time = this.getBaseTime() - this.props.range*1000/2;
-    this.props.onChangeEndTime(endTime);
+    this.props.onChangeTime(time);
-    this.$endTime.datetimepicker('date', moment(endTime));
+    this.$time.datetimepicker('date', moment(time));
   }
 
-  clearEndTime = (): void => {
+  clearTime = (): void => {
-    this.props.onChangeEndTime(null);
+    this.props.onChangeTime(null);
-    this.$endTime.datetimepicker('date', null);
+    this.$time.datetimepicker('date', null);
   }
 
   componentDidMount() {
-    this.$endTime = $(this.endTimeRef.current!);
+    this.$time = $(this.timeInputRef.current!);
 
-    this.$endTime.datetimepicker({
+    this.$time.datetimepicker({
       icons: {
         today: 'fas fa-calendar-check',
       },
@@ -79,49 +80,47 @@ class TimeInput extends Component<TimeInputProps> {
       format: 'YYYY-MM-DD HH:mm',
       locale: 'en',
       timeZone: 'UTC',
-      defaultDate: this.props.endTime,
+      defaultDate: this.props.time,
     });
 
-    this.$endTime.on('change.datetimepicker', (e: any) => {
+    this.$time.on('change.datetimepicker', (e: any) => {
       if (e.date) {
-        this.props.onChangeEndTime(e.date);
+        this.props.onChangeTime(e.date);
       } else {
-        this.$endTime.datetimepicker('date', e.target.value);
+        this.$time.datetimepicker('date', e.target.value);
       }
     });
   }
 
   componentWillUnmount() {
-    this.$endTime.datetimepicker('destroy');
+    this.$time.datetimepicker('destroy');
   }
 
   render() {
     return (
-      <InputGroup className="endtime-input" size="sm">
+      <InputGroup className="time-input" size="sm">
         <InputGroupAddon addonType="prepend">
-          <Button title="Decrease end time" onClick={this.decreaseEndTime}><FontAwesomeIcon icon="chevron-left" fixedWidth/></Button>
+          <Button title="Decrease time" onClick={this.decreaseTime}><FontAwesomeIcon icon="chevron-left" fixedWidth/></Button>
         </InputGroupAddon>
 
         <Input
-          placeholder="End time"
+          placeholder={this.props.placeholder}
-          // value={this.props.endTime ? this.props.endTime : ''}
+          innerRef={this.timeInputRef}
-          innerRef={this.endTimeRef}
+          onFocus={() => this.$time.datetimepicker('show')}
-          // onChange={this.props.onChangeEndTime}
+          onBlur={() => this.$time.datetimepicker('hide')}
-          onFocus={() => this.$endTime.datetimepicker('show')}
+          onKeyDown={(e) => ['Escape', 'Enter'].includes(e.key) && this.$time.datetimepicker('hide')}
-          onBlur={() => this.$endTime.datetimepicker('hide')}
-          onKeyDown={(e) => ['Escape', 'Enter'].includes(e.key) && this.$endTime.datetimepicker('hide')}
         />
 
         {/* CAUTION: While the datetimepicker also has an option to show a 'clear' button,
             that functionality is broken, so we create an external solution instead. */}
-        {this.props.endTime &&
+        {this.props.time &&
           <InputGroupAddon addonType="append">
-            <Button className="clear-endtime-btn" title="Clear end time" onClick={this.clearEndTime}><FontAwesomeIcon icon="times" fixedWidth/></Button>
+            <Button className="clear-time-btn" title="Clear time" onClick={this.clearTime}><FontAwesomeIcon icon="times" fixedWidth/></Button>
           </InputGroupAddon>
         }
 
         <InputGroupAddon addonType="append">
-          <Button title="Increase end time" onClick={this.increaseEndTime}><FontAwesomeIcon icon="chevron-right" fixedWidth/></Button>
+          <Button title="Increase time" onClick={this.increaseTime}><FontAwesomeIcon icon="chevron-right" fixedWidth/></Button>
         </InputGroupAddon>
       </InputGroup>
     );