Add changing the end of a shift to now instead of the end time of the shift

src/ShiftSelector.tsx

@@ -28,6 +28,7 @@ const ShiftSelector: React.FC<PanelProps<TPropOptions>> = (props) => {
     isShowDayLabel,
     isShowTimeLabel,
     isAutoSelectShift,
+    isAutoChangeEndToNow,
     dayLabel,
     rangeLabelType,
     shiftOptionsLabelType,
@@ -193,6 +194,7 @@ const ShiftSelector: React.FC<PanelProps<TPropOptions>> = (props) => {
               setShiftParams={setManualShiftParams}
               shiftSelectHandler={shiftSelectHandler}
               isAutoSelectShift={isAutoSelectShift}
+              isAutoChangeEndToNow={isAutoChangeEndToNow}
               isOptionGroupLabelTrimmed={isOptionGroupLabelTrimmed}
               autoSelectShiftGroup={autoSelectShiftGroup}
               mappings={var_label_mapping}

src/components/inputWrappers.tsx

@@ -14,6 +14,7 @@ type TPropInputWrapperOptions = Omit<
   | 'isDataSourceShifts'
   | 'isOptionGroupLabelTrimmed'
   | 'isAutoSelectShift'
+  | 'isAutoChangeEndToNow'
   | 'autoSelectShiftGroup'
   | 'isShowTimeLabel'
   | 'shiftOptionsLabelType'

src/components/options.tsx

@@ -52,6 +52,7 @@ export const ShiftOptions = ({
   setShiftParams: (shift: ShiftI, isManualUpdate?: any) => void;
   shiftSelectHandler: typeof utilShiftSelectHandler;
   isAutoSelectShift: boolean;
+  isAutoChangeEndToNow: boolean;
   isShowTimeLabel: boolean;
   autoSelectShiftGroup: string | undefined;
   mappings: string;

src/hooks/core.ts

@@ -38,6 +38,7 @@ export const useShiftSelectorHook = (props: PanelProps<TPropOptions>) => {
   const { data: _data, width, height, timeRange, eventBus } = props;
   const {
     isAutoSelectShift,
+    isAutoChangeEndToNow,
     isDataSourceShifts,
     isOptionGroupLabelTrimmed,
     var_query_map_dynamic,
@@ -140,7 +141,7 @@ export const useShiftSelectorHook = (props: PanelProps<TPropOptions>) => {
       const { startDate, endDate } = shift || {};
 
       const from = startDate.unix() * 1000;
-      const to = endDate.unix() * 1000;
+      const to = isAutoChangeEndToNow ? 'now' : endDate.unix() * 1000;
 
       if (isAutoSelectShift && isManualUpdate) {
         return setAlertHandler({
@@ -157,8 +158,9 @@ export const useShiftSelectorHook = (props: PanelProps<TPropOptions>) => {
           uuid: shift.uuid,
         }));
       }
+      locationSrv.partial({[vars.varEndDate]: endDate.toISOString()}, false);
     },
-    [isAutoSelectShift, setAlertHandler, setCustomTimeRange]
+    [isAutoSelectShift, setAlertHandler, setCustomTimeRange, isAutoChangeEndToNow, locationSrv]
   );
   const setManualShiftParams = useCallback(
     (shift: TExtendedShift, productionDate: number) => {
@@ -357,15 +359,15 @@ ORDER by ??, ??
 
       const query = {
         from: isSwapDates ? to : from,
-        to: isSwapDates ? from : to,
+        to: isSwapDates ? from : (isAutoChangeEndToNow ? 'now' : to),
         [vars.queryShiftsGroup]: autoSelectShiftGroup,
         [vars.queryShiftsOptions]: uuid,
         refresh: _refresh,
       };
 
       locationSrv.partial(query, false);
     }
-  }, [locationSrv, customTimeRange, timeRange.to, timeRange.from, getRefreshRate, setInitDateRange, autoSelectShiftGroup, isAutoSelectShift]);
+  }, [locationSrv, customTimeRange, timeRange.to, timeRange.from, getRefreshRate, setInitDateRange, autoSelectShiftGroup, isAutoSelectShift, isAutoChangeEndToNow]);
 
   useEffect(() => {
     if (width < 400) {
@@ -460,6 +462,7 @@ ORDER by ??, ??
         setShiftParams,
         autoSelectShiftGroup,
         isAutoSelectShift,
+        isAutoChangeEndToNow,
         isOptionGroupLabelTrimmed,
         shifts: {
           options: shiftOptions.options,
@@ -477,6 +480,7 @@ ORDER by ??, ??
           setShiftParams,
           autoSelectShiftGroup,
           isAutoSelectShift,
+          isAutoChangeEndToNow,
           isOptionGroupLabelTrimmed,
           shifts: {
             options: shiftOptions.options,
@@ -499,6 +503,7 @@ ORDER by ??, ??
     setShiftParams,
     autoSelectShiftGroup,
     isAutoSelectShift,
+    isAutoChangeEndToNow,
     isOptionGroupLabelTrimmed,
     shiftOptions,
     shiftValues,

src/module.ts

@@ -115,6 +115,14 @@ export const plugin = new PanelPlugin(ShiftSelector).setPanelOptions((builder) =
       description: 'This gives you the ability to track the shifts in real-time',
       defaultValue: false,
     })
+    .addBooleanSwitch({
+      category: ['Behavior'],
+      path: 'isAutoChangeEndToNow',
+      showIf: (c: any) => c.isAutoSelectShift,
+      name: 'Change the end of time-range to now',
+      description: 'This will seek the current end of the time-range to now instead of ending shift time',
+      defaultValue: true,
+    })
     .addTextInput({
       category: ['Behavior'],
       path: 'autoSelectShiftGroup',

src/types.ts

@@ -25,6 +25,7 @@ export type TPropOptions = {
   isDataSourceShifts: boolean;
   isOptionGroupLabelTrimmed: boolean;
   isAutoSelectShift: boolean;
+  isAutoChangeEndToNow: boolean;
   autoSelectShiftGroup: string;
   isShowDayLabel: boolean;
   isShowTimeLabel: boolean;
@@ -136,6 +137,7 @@ export enum vars {
   varQueryMapper = 'var_query_map',
   varDataModel = 'var_shifts_dataModel',
   varShiftsValuesName = 'shifts_values',
+  varEndDate = 'var-end_date',
 }
 
 export type TMappings = {
@@ -146,6 +148,7 @@ export type TUpdateActiveShiftProps = {
   setShiftParams: (shift: TExtendedShift, isManualUpdate?: any) => void;
   autoSelectShiftGroup: string;
   isAutoSelectShift: boolean;
+  isAutoChangeEndToNow: boolean;
   isOptionGroupLabelTrimmed: boolean;
   setProductionDate: React.Dispatch<number>;
   productionDate: number;