Timeseries wizard react conversion

web-server/components/ModalContent.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+
+/**
+ * @member closingCallBack callback function for cleanup when closing the modal
+ * @member title test for the top of the modal
+ */
+export interface ModalContentProps {
+  modalId: string,
+  closingCallBack: Function;
+  title: string;
+  body: JSX.Element;
+  footer: JSX.Element[];
+}
+
+/**
+ * not used
+ */
+export interface ModalContentState {}
+
+export default class ModalContent extends React.Component<
+  ModalContentProps,
+  ModalContentState
+> {
+  public constructor(props: ModalContentProps) {
+    super(props);
+    this.state = {};
+  }
+
+  /**
+   *close the modal and call the cleanup function
+   * @memberof ModalContent
+   */
+  closeModal = (e: React.MouseEvent): void => {
+    this.props.closingCallBack();
+    ($("#" + this.props.modalId) as any).modal("hide");
+  };
+
+  render() {
+    return (
+      <div>
+        <div className="modal-header">
+          <h3 className="modal-title">{this.props.title}</h3>
+          <button
+            type="button"
+            className="close"
+            aria-label="Close"
+            onClick={this.closeModal}
+          >
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div className="modal-body" id="slycat-wizard">
+          {this.props.body}
+        </div>
+        <div className="modal-footer">{this.props.footer}</div>
+      </div>
+    );
+  }
+}

web-server/components/SlycatFormDropDown.tsx

@@ -0,0 +1,51 @@
+'use strict';
+import * as React from 'react';
+
+/**
+ */
+export interface SlycatFormDropDownProps {
+  checked: boolean
+  onChange: Function
+  value: string
+  text: string
+  style: any
+  label: string
+}
+
+/**
+ * not used
+ */
+export interface SlycatFormDropDownState {
+}
+/**
+ * class that creates a a form with checkboxes
+ * some other process
+ */
+export default class SlycatFormDropDown extends React.Component<SlycatFormDropDownProps, SlycatFormDropDownState> {
+  /**
+   * not used
+   */
+  public constructor(props:SlycatFormDropDownProps) {
+    super(props)
+    this.state = {}
+  }
+
+  onValueChange = (value) => {
+    // localStorage.setItem("slycat-remote-controls-username", value);
+    this.setState({value: value});
+  };
+
+  public render () {
+    return (
+    <div className='form-group row mb-3'>
+        <label className='col-sm-2 col-form-label'>{this.props.label}</label>
+        <div className='col-sm-9'>
+          <select
+            className='form-control' type='text'
+            value={this.state.value?this.state.value:""}
+            onChange={(e)=>this.onValueChange(e.target.value)} />
+        </div>
+    </div>
+    );
+  }
+}

web-server/components/SlycatFormRadioCheckbox.tsx

@@ -9,7 +9,7 @@ export interface SlycatFormRadioCheckboxProps {
   onChange: Function
   value: string
   text: string
-  style: any
+  style?: any
 }
 
 /**

web-server/components/SlycatNumberInput.tsx

@@ -0,0 +1,63 @@
+'use strict';
+import * as React from 'react';
+
+/**
+ */
+export interface SlycatNumberInputProps {
+  value: number
+  style?: any
+  label: string
+  callBack: Function
+  id?: string
+  warning?: string
+}
+
+/**
+ * not used
+ */
+export interface SlycatNumberInputState {
+  value: number
+}
+/**
+ * class that creates a a form with checkboxes
+ * some other process
+ */
+export default class SlycatNumberInput extends React.Component<SlycatNumberInputProps, SlycatNumberInputState> {
+  /**
+   * not used
+   */
+  public constructor(props:SlycatNumberInputProps) {
+    super(props)
+    this.state = {
+      value: props.value
+    }
+  }
+
+  onValueChange = (value:number) => {
+    // localStorage.setItem("slycat-remote-controls-username", value);
+    if(value === '') {
+      value = 1;
+    }
+    this.setState({value: value});
+    this.props.callBack(value);
+  };
+
+  public render () {
+    return (
+    <div className='form-group row mb-3'>
+        <label className='col-sm-2 col-form-label'>{this.props.label}</label>
+        <div className='col-sm-9'>
+          <input
+            id={this.props.id}
+            className='form-control' type='number' min={1}
+            value={this.state.value}
+            onChange={(e)=>this.onValueChange(e.target.value)}
+          />
+          <div className="invalid-feedback">
+            {this.props.warning}
+          </div>
+        </div>
+    </div>
+    );
+  }
+}

web-server/components/SlycatSelector.tsx

@@ -10,6 +10,7 @@ export interface SlycatSelectorProps {
   onSelectCallBack: Function
   options: Option[]
   label: string
+  disabled?: boolean
 }
 
 /**
@@ -56,9 +57,14 @@ export default class SlycatSelector extends React.Component<SlycatSelectorProps,
           {this.props.label}
         </label>
         <div className='col-sm-9'>
-          <select className="form-control" onChange={(e)=>this.props.onSelectCallBack(e.target.value)}>
+          {this.props.disabled === true ?          
+          <select className="form-control" onChange={(e)=>this.props.onSelectCallBack(e.target.value)} disabled>
             {this.getOptions()}
           </select>
+          :
+          <select className="form-control" onChange={(e)=>this.props.onSelectCallBack(e.target.value)} >
+          {this.getOptions()}
+        </select> }          
         </div>
       </div>
     )

web-server/components/SlycatTextInput.tsx

@@ -0,0 +1,62 @@
+'use strict';
+import * as React from 'react';
+
+/**
+ */
+export interface SlycatTextInputProps {
+  onChange?: Function
+  value: string
+  style?: any
+  label: string
+  callBack: Function
+  id?: string
+  warning?: string
+}
+
+/**
+ * not used
+ */
+export interface SlycatTextInputState {
+  value: string
+}
+/**
+ * class that creates a a form with checkboxes
+ * some other process
+ */
+export default class SlycatTextInput extends React.Component<SlycatTextInputProps, SlycatTextInputState> {
+  /**
+   * not used
+   */
+  public constructor(props:SlycatTextInputProps) {
+    super(props)
+    this.state = {
+      value: props.value
+    }
+  }
+
+  onValueChange = (value:string) => {
+    // localStorage.setItem("slycat-remote-controls-username", value);
+    // this.setState({value: value});
+    this.setState({value:value});
+    this.props.callBack(value);
+  };
+
+  public render () {
+    return (
+    <div className='form-group row mb-3'>
+        <label className='col-sm-2 col-form-label'>{this.props.label}</label>
+        <div className='col-sm-9'>
+          <input
+            id={this.props.id}
+            className='form-control' type='text'
+            value={this.state.value}
+            onChange={(e)=>this.onValueChange(e.target.value)}
+            />
+            <div className="invalid-feedback">
+              {this.props.warning}
+            </div>
+        </div>
+    </div>
+    );
+  }
+}

web-server/components/SlycatTimeInput.tsx

@@ -0,0 +1,77 @@
+'use strict';
+import * as React from 'react';
+
+/**
+ */
+export interface SlycatTimeInputProps {
+  hours: number
+  minutes: number
+  minCallBack: Function
+  hourCallBack: Function
+  label: string
+}
+
+/**
+ * not used
+ */
+export interface SlycatTimeInputState {
+  hours: number
+  minutes: number
+}
+/**
+ * class that creates a a form with checkboxes
+ * some other process
+ */
+export default class SlycatTimeInput extends React.Component<SlycatTimeInputProps, SlycatTimeInputState> {
+  /**
+   * not used
+   */
+  public constructor(props:SlycatTimeInputProps) {
+    super(props)
+    this.state = {
+      hours: props.hours,
+      minutes: props.minutes
+    }
+  }
+
+  onHourChange = (value) => {
+    // localStorage.setItem("slycat-remote-controls-username", value);
+    // this.setState({value: value});
+    if (value === '') {
+      value = 0;
+    }
+    this.setState({hours:value});
+    this.props.hourCallBack(value);
+  };
+
+  onMinuteChange = (value) => {
+    if (value === '') {
+      value = 0;
+    }
+    this.setState({minutes:value});
+    this.props.minCallBack(value);
+  }
+
+  public render () {
+    return (
+    <div className='form-group row mb-3'>
+        <label className='col-sm-2 col-form-label'>{this.props.label}</label>
+        <div className='col-sm-2'>
+          <input
+            className='form-control' type='number' min={0}
+            value={this.state.hours}
+            onChange={(e)=>this.onHourChange(e.target.value)}
+            />
+            Hours
+        </div>
+        <div className='col-sm-2'>
+          <input className='form-control' type='number' min={0}
+            value={this.state.minutes}
+            onChange={(e)=>this.onMinuteChange(e.target.value)}
+            />
+            Minutes
+        </div>
+    </div>
+    );
+  }
+}