CEC-4455: Add GMT conversion (#345)

adds a checkbox to show time/date in GMT+0 regardless of the users timezone.

src/components/CANSelfServe/SelfServe/index.jsx

@@ -1,5 +1,5 @@
 import DateFnsUtils from '@date-io/date-fns';
-import { Button, Checkbox, Chip, CircularProgress, FormControl, Grid, InputLabel, ListItemText, MenuItem, Select } from "@material-ui/core";
+import { Button, Checkbox, Chip, CircularProgress, FormControl, FormControlLabel, Grid, InputLabel, ListItemText, MenuItem, Select } from "@material-ui/core";
 import { KeyboardDatePicker, KeyboardTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
 import React, { useEffect, useState } from "react";
 import { logger } from "../../../services/monitoring";
@@ -17,6 +17,7 @@ const MainForm = ({ id }) => {
   const [selectedEndDate, setSelectedEndDate] = useState(new Date());
   const [selectedCanSignals, setSelectedCanSignals] = useState([]);
   const [selectAllCanSignals, setSelectAllCanSignals] = useState(false);
+  const [gmtTimezone, setGmtTimezone] = useState(false);
 
   const {
     token: {
@@ -86,6 +87,12 @@ const MainForm = ({ id }) => {
     }
   };
 
+  const displayTimeAsGMT = (date) => {
+    return gmtTimezone
+      ? date.toLocaleString("en-US", {timeZone: "Etc/GMT"})
+      : date;
+  }
+
 
   return (
     <div className={classes.paper}>
@@ -102,7 +109,7 @@ const MainForm = ({ id }) => {
                   margin="normal"
                   id="date-picker-inline"
                   label="Date From"
-                  value={selectedStartDate}
+                  value={displayTimeAsGMT(selectedStartDate)}
                   onChange={(value) => handleDateChange(value, "start")}
                   KeyboardButtonProps={{
                     'aria-label': 'change date',
@@ -116,7 +123,7 @@ const MainForm = ({ id }) => {
                   variant="inline"
                   id="time-picker"
                   label="Time From"
-                  value={selectedStartDate}
+                  value={displayTimeAsGMT(selectedStartDate)}
                   onChange={handleTimeFromChange}
                   KeyboardButtonProps={{
                     'aria-label': 'change time',
@@ -132,7 +139,7 @@ const MainForm = ({ id }) => {
                   margin="normal"
                   id="date-picker-inline"
                   label="Date To"
-                  value={selectedEndDate}
+                  value={displayTimeAsGMT(selectedEndDate)}
                   onChange={(value) => handleDateChange(value, "end")}
                   KeyboardButtonProps={{
                     'aria-label': 'change date',
@@ -146,13 +153,24 @@ const MainForm = ({ id }) => {
                   id="time-picker"
                   variant="inline"
                   label="Time To"
-                  value={selectedEndDate}
+                  value={displayTimeAsGMT(selectedEndDate)}
                   onChange={handleTimeToChange}
                   KeyboardButtonProps={{
                     'aria-label': 'change time',
                   }}
                 />
               </Grid>
+              <Grid item xs={6} md={3}>
+                <FormControlLabel
+                  label="GMT"
+                  control={
+                    <Checkbox
+                      checked={gmtTimezone}
+                      onChange={() => setGmtTimezone((current) => !current)}
+                    />
+                  }
+                />
+              </Grid>
             </Grid>
           </MuiPickersUtilsProvider>
         </Grid>