use reactive timecontext in fixed inputs

src/plugins/timeConductor/ConductorInputsFixed.vue

@@ -20,13 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <TimePopupFixed
+  <TimePopupFixed v-if="readOnly === false" @focus="$event.target.select()" @dismiss="dismiss" />
-    v-if="readOnly === false"
-    :input-bounds="bounds"
-    :input-time-system="timeSystem"
-    @focus="$event.target.select()"
-    @dismiss="dismiss"
-  />
   <div v-else class="c-compact-tc__setting-wrapper">
     <div
       class="c-compact-tc__setting-value u-fade-truncate--lg --no-sep"
@@ -47,29 +41,14 @@
 </template>
 
 <script>
-import _ from 'lodash';
-
-import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
 import TimePopupFixed from './TimePopupFixed.vue';
 
 export default {
   components: {
     TimePopupFixed
   },
-  inject: ['openmct'],
+  inject: ['openmct', 'timeContext', 'bounds', 'timeSystemFormatter'],
   props: {
-    inputBounds: {
-      type: Object,
-      default() {
-        return undefined;
-      }
-    },
-    objectPath: {
-      type: Array,
-      default() {
-        return [];
-      }
-    },
     readOnly: {
       type: Boolean,
       default() {
@@ -83,88 +62,16 @@ export default {
       }
     }
   },
-  emits: ['bounds-updated', 'dismiss-inputs-fixed'],
+  emits: ['dismiss-inputs-fixed'],
-  data() {
+  computed: {
-    const timeSystem = this.openmct.time.getTimeSystem();
+    formattedBounds() {
-    const timeFormatter = this.getFormatter(timeSystem.timeFormat);
-    let bounds = this.inputBounds || this.openmct.time.getBounds();
-
       return {
-      timeSystem,
+        start: this.timeSystemFormatter.format(this.bounds.start),
-      timeFormatter,
+        end: this.timeSystemFormatter.format(this.bounds.end)
-      bounds: {
-        start: bounds.start,
-        end: bounds.end
-      },
-      formattedBounds: {
-        start: timeFormatter.format(bounds.start),
-        end: timeFormatter.format(bounds.end)
-      },
-      isUTCBased: timeSystem.isUTCBased
       };
-  },
-  watch: {
-    objectPath: {
-      handler(newPath, oldPath) {
-        if (newPath === oldPath) {
-          return;
     }
-
-        this.setTimeContext();
-      },
-      deep: true
-    },
-    inputBounds: {
-      handler(newBounds) {
-        this.handleNewBounds(newBounds);
-      },
-      deep: true
-    }
-  },
-  mounted() {
-    this.handleNewBounds = _.throttle(this.handleNewBounds, 300);
-    this.setTimeSystem(JSON.parse(JSON.stringify(this.openmct.time.getTimeSystem())));
-    this.openmct.time.on(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setTimeSystem);
-    this.setTimeContext();
-  },
-  beforeUnmount() {
-    this.openmct.time.off(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setTimeSystem);
-    this.stopFollowingTimeContext();
   },
   methods: {
-    setTimeContext() {
-      this.stopFollowingTimeContext();
-      this.timeContext = this.openmct.time.getContextForView(this.objectPath);
-
-      this.handleNewBounds(this.timeContext.getBounds());
-      this.timeContext.on(TIME_CONTEXT_EVENTS.boundsChanged, this.handleNewBounds);
-    },
-    stopFollowingTimeContext() {
-      if (this.timeContext) {
-        this.timeContext.off(TIME_CONTEXT_EVENTS.boundsChanged, this.handleNewBounds);
-      }
-    },
-    handleNewBounds(bounds) {
-      this.setBounds(bounds);
-      this.setViewFromBounds(bounds);
-    },
-    setBounds(bounds) {
-      this.bounds = bounds;
-    },
-    setViewFromBounds(bounds) {
-      this.formattedBounds.start = this.timeFormatter.format(bounds.start);
-      this.formattedBounds.end = this.timeFormatter.format(bounds.end);
-    },
-    setTimeSystem(timeSystem) {
-      this.timeSystem = timeSystem;
-      this.timeFormatter = this.getFormatter(timeSystem.timeFormat);
-      this.isUTCBased = timeSystem.isUTCBased;
-    },
-    getFormatter(key) {
-      return this.openmct.telemetry.getValueFormatter({
-        format: key
-      }).formatter;
-    },
     dismiss() {
       this.$emit('dismiss-inputs-fixed');
     }

src/plugins/timeConductor/TimePopupFixed.vue

@@ -122,7 +122,14 @@ export default {
   components: {
     DatePicker
   },
-  inject: ['openmct', 'isTimeSystemUTCBased', 'timeSystemFormatter', 'timeSystemDurationFormatter', 'bounds'],
+  inject: [
+    'openmct',
+    'isTimeSystemUTCBased',
+    'timeContext',
+    'timeSystemFormatter',
+    'timeSystemDurationFormatter',
+    'bounds'
+  ],
   emits: ['update', 'dismiss'],
   data() {
     return {
@@ -174,7 +181,7 @@ export default {
           `${this.formattedBounds.end} ${this.formattedBounds.endTime}`
         );
 
-        this.openmct.time.setBounds({
+        this.timeContext.setBounds({
           start: start,
           end: end
         });
@@ -228,7 +235,7 @@ export default {
           }
         } else {
           if (input === currentInput) {
-            validationResult = this.openmct.time.validateBounds(boundsValues);
+            validationResult = this.timeContext.validateBounds(boundsValues);
           }
         }