diff --git a/src/components/DeviceActions.js b/src/components/DeviceActions.js index 7d57118..b6ae424 100644 --- a/src/components/DeviceActions.js +++ b/src/components/DeviceActions.js @@ -4,6 +4,7 @@ import ActionModalWidget from '../widgets/ActionModalWidget'; import FirmwareUpgradeModal from './FirmwareUpgradeModal'; import TraceModalWidget from '../widgets/TraceModalWidget'; import WifiScanModalWidget from '../widgets/WifiScanModalWidget'; +import BlinkModalWidget from '../widgets/BlinkModalWidget'; const DeviceActions = () => { const [showRebootModal, setShowRebootModal] = useState(false); @@ -77,15 +78,7 @@ const DeviceActions = () => { actionLabel="reboot" action="reboot" /> - + diff --git a/src/widgets/BlinkModalWidget.js b/src/widgets/BlinkModalWidget.js new file mode 100644 index 0000000..4a83a79 --- /dev/null +++ b/src/widgets/BlinkModalWidget.js @@ -0,0 +1,204 @@ +import { + CButton, + CModal, + CModalHeader, + CModalTitle, + CModalBody, + CModalFooter, + CSpinner, + CBadge, + CCol, + CRow, + CForm, + CFormGroup, + CInputRadio, + CLabel +} from '@coreui/react'; +import React, { useState, useEffect } from 'react'; +import DatePicker from 'react-widgets/DatePicker'; +import { useSelector } from 'react-redux'; +import { convertDateFromUtc, convertDateToUtc } from '../utils/helper'; +import 'react-widgets/styles.css'; +import { getToken } from '../utils/authHelper'; +import axiosInstance from '../utils/axiosInstance'; + +const BlinkModalWidget = ({show, toggleModal}) => { + const [hadSuccess, setHadSuccess] = useState(false); + const [hadFailure, setHadFailure] = useState(false); + const [waiting, setWaiting] = useState(false); + const [chosenDate, setChosenDate] = useState(new Date().toString()); + const [chosenPattern, setPattern] = useState('on'); + const [responseBody, setResponseBody] = useState(''); + const [checkingIfSure, setCheckingIfSure] = useState(false); + const selectedDeviceId = useSelector((state) => state.selectedDeviceId); + + const setDateToNow = () => { + const now = new Date().toString(); + setChosenDate(now); + }; + + const setDateToLate = () => { + const date = convertDateToUtc(new Date()); + if (date.getHours() >= 3) { + date.setDate(date.getDate() + 1); + } + date.setHours(3); + date.setMinutes(0); + + setChosenDate(convertDateFromUtc(date).toString()); + }; + + const setDate = (date) => { + if (date) { + setChosenDate(date.toString()); + } + }; + + const confirmingIfSure = () => { + setCheckingIfSure(true); + }; + + useEffect(() => { + setHadSuccess(false); + setHadFailure(false); + setWaiting(false); + setChosenDate(new Date().toString()); + setResponseBody(''); + setPattern('on'); + setCheckingIfSure(false); + }, [show]); + + const doAction = () => { + setHadFailure(false); + setHadSuccess(false); + setWaiting(true); + + const token = getToken(); + const utcDate = new Date(chosenDate); + const utcDateString = utcDate.toISOString(); + + const parameters = { + serialNumber: selectedDeviceId, + when: utcDateString, + pattern: chosenPattern, + duration: 30 + }; + + const headers = { + Accept: 'application/json', + Authorization: `Bearer ${token}`, + }; + + axiosInstance + .post(`/device/${selectedDeviceId}/leds`, parameters, { headers }) + .then((response) => { + setResponseBody(JSON.stringify(response.data, null, 4)); + setHadSuccess(true); + }) + .catch((error) => { + setHadFailure(true); + console.log(error); + console.log(error.response); + }) + .finally(() => { + setCheckingIfSure(false); + setWaiting(false); + }); + }; + + return ( + + + LEDs of Device + + +
When would you like make the LEDs of this device blink?
+ + + setDateToNow()}> + Now + + + + setDateToLate()}> + Later tonight + + + + + +

Date:

+ + + setDate(date)} + min={convertDateToUtc(new Date())} + /> + + + + + Choose a pattern you would like to use: + + + + setPattern('on')}> + + On + + setPattern('off')}> + + Off + + setPattern('blink')}> + + Blink + + + + + + + + + + + + Cancel + + + + ); +} + +export default BlinkModalWidget; \ No newline at end of file