Disabling of buttons and doublecheck for actions

2025-11-02 11:17:46 +00:00 · 2021-05-13 20:36:32 -04:00
parent 930c831080
commit fbc1260dec
2 changed files with 79 additions and 48 deletions
--- a/src/components/FirmwareUpgradeModal.js
+++ b/src/components/FirmwareUpgradeModal.js
@@ -24,23 +24,30 @@ const FirmwareUpgradeModal = ({ show, toggleModal }) => {
  const [hadSuccess, setHadSuccess] = useState(false);
  const [hadFailure, setHadFailure] = useState(false);
  const [waiting, setWaiting] = useState(false);
-  const [chosenDate, setChosenDate] = useState(null);
+  const [chosenDate, setChosenDate] = useState(new Date().toString());
  const [firmware, setFirmware] = useState('');
  const [validFirmware, setValidFirmware] = useState(true);
+  const [validDate, setValidDate] = useState(true);
  const [responseBody, setResponseBody] = useState('');
  const [checkingIfSure, setCheckingIfSure] = useState(false);
  const selectedDeviceId = useSelector((state) => state.selectedDeviceId);

  const formValidation = () => {
+    let valid = true;
    if (firmware.trim() === '') {
      setValidFirmware(false);
-      return false;
+      valid = false;
    }
-    return chosenDate !== null;
+
+    if (chosenDate.trim() === ''){
+      setValidDate(false);
+      valid = false
+    }
+    return valid;
  };

  const setDateToNow = () => {
-    const now = new Date().toISOString();
+    const now = new Date().toString();
    setChosenDate(now);
  };

@@ -52,23 +59,24 @@ const FirmwareUpgradeModal = ({ show, toggleModal }) => {
    date.setHours(3);
    date.setMinutes(0);

-    setChosenDate(convertDateFromUtc(date).toISOString());
+    setChosenDate(convertDateFromUtc(date).toString());
  };

  const setDate = (date) => {
    if (date) {
-      setChosenDate(date.toISOString());
+      setChosenDate(date.toString());
    }
  };

  const confirmingIfSure = () => {
    setCheckingIfSure(true);
  };
+
  useEffect(() => {
    setHadSuccess(false);
    setHadFailure(false);
    setWaiting(false);
-    setChosenDate(null);
+    setChosenDate(new Date().toString());
    setFirmware('');
    setValidFirmware(true);
    setResponseBody('');
@@ -77,7 +85,8 @@ const FirmwareUpgradeModal = ({ show, toggleModal }) => {

  useEffect(() => {
    setValidFirmware(true);
-  }, [firmware]);
+    setValidDate(true);
+  }, [firmware, chosenDate]);

  const postUpgrade = () => {
    setHadFailure(false);
@@ -85,6 +94,8 @@ const FirmwareUpgradeModal = ({ show, toggleModal }) => {
    setWaiting(true);

    const token = getToken();
+    const utcDate = new Date(chosenDate);
+    const utcDateString = utcDate.toISOString();

    const headers = {
      Accept: 'application/json',
@@ -94,7 +105,7 @@ const FirmwareUpgradeModal = ({ show, toggleModal }) => {

    const parameters = {
      serialNumber: selectedDeviceId,
-      when: chosenDate,
+     when: utcDateString,
      uri: firmware,
    };
    axiosInstance
@@ -123,23 +134,25 @@ const FirmwareUpgradeModal = ({ show, toggleModal }) => {
        <h6>Choose a time and a firmware version for this device</h6>
        <CRow style={{ marginTop: '20px' }}>
          <CCol>
-            <CButton block color="primary" onClick={() => setDateToNow()}>
+            <CButton disabled={waiting} block color="primary" onClick={() => setDateToNow()}>
              Now
            </CButton>
          </CCol>
          <CCol>
-            <CButton block color="primary" onClick={() => setDateToLate()}>
+            <CButton disabled={waiting} block color="primary" onClick={() => setDateToLate()}>
              Later tonight
            </CButton>
          </CCol>
        </CRow>
        <CRow style={{ marginTop: '20px' }}>
          <CCol md="4" style={{ marginTop: '7px' }}>
-            <p>Local time:</p>
+            <p>Time of upgrade:</p>
          </CCol>
          <CCol xs="12" md="8">
            <DatePicker
-              selected={Date.parse(chosenDate)}
+              selected={chosenDate === '' ? new Date() : new Date(chosenDate)}
+              value={chosenDate === '' ? new Date() : new Date(chosenDate)}
+              className={('form-control', { 'is-invalid': !validDate })}
              includeTime
              selectTime
              placeholder="Select custom date in UTC"
@@ -147,13 +160,11 @@ const FirmwareUpgradeModal = ({ show, toggleModal }) => {
              onChange={(date) => setDate(date)}
              min={new Date()}
            />
+            <CInvalidFeedback>You need a date...</CInvalidFeedback>
          </CCol>
        </CRow>
-
-        <div style={{ marginTop: '25px' }}>
-          <p>
-            Device will upgrade at (UTC): <b>{chosenDate}</b>
-          </p>
+        <div>
+          Firmware URI:
        </div>
        <CInput
          disabled={waiting}
@@ -161,7 +172,7 @@ const FirmwareUpgradeModal = ({ show, toggleModal }) => {
          type="text"
          id="uri"
          name="uri-input"
-          placeholder="https://somelocation.com/file=newversion.bin"
+          placeholder="https://s3-us-west-2.amazonaws.com/ucentral.arilia.com/20210508-linksys_ea8300-uCentral-trunk-43e1a2d-upgrade.bin"
          autoComplete="firmware-uri"
          onChange={(event) => setFirmware(event.target.value)}
          value={firmware}
--- a/src/widgets/ActionModalWidget.js
+++ b/src/widgets/ActionModalWidget.js
@@ -9,6 +9,7 @@ import {
  CBadge,
  CCol,
  CRow,
+  CInvalidFeedback
 } from '@coreui/react';
 import React, { useState, useEffect } from 'react';
 import DatePicker from 'react-widgets/DatePicker';
@@ -23,21 +24,28 @@ const ActionModalWidget = ({
  toggleModal,
  title,
  directions,
-  actionLabel,
  action,
  extraParameters,
 }) => {
  const [hadSuccess, setHadSuccess] = useState(false);
  const [hadFailure, setHadFailure] = useState(false);
  const [waiting, setWaiting] = useState(false);
-  const [chosenDate, setChosenDate] = useState(null);
+  const [validDate, setValidDate] = useState(true);
+  const [chosenDate, setChosenDate] = useState(new Date().toString());
  const [responseBody, setResponseBody] = useState('');
+  const [checkingIfSure, setCheckingIfSure] = useState(false);
  const selectedDeviceId = useSelector((state) => state.selectedDeviceId);

-  const formValidation = () => chosenDate !== null;
+  const formValidation = () => {
+    if(chosenDate === ''){
+      setValidDate(false);
+      return false;
+    }
+    return true;
+  };

  const setDateToNow = () => {
-    const now = new Date().toISOString();
+    const now = new Date().toString();
    setChosenDate(now);
  };

@@ -49,21 +57,27 @@ const ActionModalWidget = ({
    date.setHours(3);
    date.setMinutes(0);

-    setChosenDate(convertDateFromUtc(date).toISOString());
+    setChosenDate(convertDateFromUtc(date).toString());
  };

  const setDate = (date) => {
    if (date) {
-      setChosenDate(convertDateFromUtc(date).toISOString());
+      setChosenDate(date.toString());
    }
  };

+  const confirmingIfSure = () => {
+    setCheckingIfSure(true);
+  };
+
  useEffect(() => {
    setHadSuccess(false);
    setHadFailure(false);
    setWaiting(false);
-    setChosenDate(false);
+    setChosenDate(new Date().toString());
    setResponseBody('');
+    setValidDate(true);
+    setCheckingIfSure(false);
  }, [show]);

  const doAction = () => {
@@ -72,19 +86,18 @@ const ActionModalWidget = ({
    setWaiting(true);

    const token = getToken();
+    const utcDate = new Date(chosenDate);
+    const utcDateString = utcDate.toISOString();
+
+    const parameters = { ...{
+      serialNumber: selectedDeviceId,
+      when: utcDateString
+    }, ...extraParameters}

    const headers = {
      Accept: 'application/json',
-      Authorization: `Bearer ${token}`,
-      serialNumber: selectedDeviceId,
-    };
-
-    const necessaryParameters = {
-      serialNumber: selectedDeviceId,
-      when: chosenDate,
-    };
-
-    const parameters = { ...necessaryParameters, ...extraParameters };
+      Authorization: `Bearer ${token}`
+    }

    axiosInstance
      .post(`/device/${selectedDeviceId}/${action}`, parameters, { headers })
@@ -98,6 +111,7 @@ const ActionModalWidget = ({
        console.log(error.response);
      })
      .finally(() => {
+        setCheckingIfSure(false);
        setWaiting(false);
      });
  };
@@ -111,38 +125,35 @@ const ActionModalWidget = ({
        <h6>{directions}</h6>
        <CRow style={{ marginTop: '20px' }}>
          <CCol>
-            <CButton block color="primary" onClick={() => setDateToNow()}>
+            <CButton disabled={waiting} block color="primary" onClick={() => setDateToNow()}>
              Now
            </CButton>
          </CCol>
          <CCol>
-            <CButton block color="primary" onClick={() => setDateToLate()}>
+            <CButton disabled={waiting} block color="primary" onClick={() => setDateToLate()}>
              Later tonight
            </CButton>
          </CCol>
        </CRow>
        <CRow style={{ marginTop: '20px' }}>
          <CCol md="4" style={{ marginTop: '7px' }}>
-            <p>Custom (UTC):</p>
+            <p>Date:</p>
          </CCol>
          <CCol xs="12" md="8">
            <DatePicker
-              selected={Date.parse(chosenDate)}
+              selected={new Date(chosenDate)}
              includeTime
              selectTime
-              placeholder="Select custom date in UTC"
+              className={('form-control', { 'is-invalid': !validDate })}
+              value={new Date(chosenDate)}
+              placeholder="Select custom date"
              disabled={waiting}
              onChange={(date) => setDate(date)}
              min={convertDateToUtc(new Date())}
            />
          </CCol>
        </CRow>
-
-        <div style={{ marginTop: '25px' }}>
-          <p>
-            Device will {actionLabel} at (UTC): <b>{chosenDate}</b>
-          </p>
-        </div>
+        <CInvalidFeedback>You need a date...</CInvalidFeedback>

        <div hidden={!hadSuccess && !hadFailure}>
          <div>
@@ -151,12 +162,21 @@ const ActionModalWidget = ({
        </div>
      </CModalBody>
      <CModalFooter>
+        <div hidden={!checkingIfSure}>Are you sure?</div>
        <CButton
+          hidden={checkingIfSure}
+          color="primary"
+          onClick={() => (formValidation() ? confirmingIfSure() : null)}
+        >
+          Schedule
+        </CButton>
+        <CButton
+          hidden={!checkingIfSure}
          disabled={waiting}
          color="primary"
          onClick={() => (formValidation() ? doAction() : null)}
        >
-          {waiting ? 'Loading...' : 'Schedule'} {'   '}
+          {waiting ? 'Loading...' : 'Yes'} {'   '}
          <CSpinner hidden={!waiting} component="span" size="sm" />
          <CBadge hidden={waiting || !hadSuccess} color="success" shape="rounded-pill">
            Success