incorporate provided timecontext into independant time conductor components

src/plugins/timeConductor/ConductorInputsRealtime.vue

@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <time-popup-realtime
+  <TimePopupRealtime
     v-if="readOnly === false"
     :offsets="formattedOffsets"
     @focus="$event.target.select()"
@@ -63,14 +63,15 @@ export default {
   components: {
     TimePopupRealtime
   },
-  inject: ['openmct', 'bounds', 'clock', 'offsets', 'timeSystemKey', 'timeSystemFormatter', 'timeSystemDurationFormatter'],
+  inject: [
+    'openmct',
+    'bounds',
+    'clock',
+    'offsets',
+    'timeSystemFormatter',
+    'timeSystemDurationFormatter'
+  ],
   props: {
-    objectPath: {
-      type: Array,
-      default() {
-        return [];
-      }
-    },
     readOnly: {
       type: Boolean,
       default() {
@@ -84,21 +85,13 @@ export default {
       }
     }
   },
-  emits: ['offsets-updated', 'dismiss-inputs-realtime'],
+  emits: ['dismiss-inputs-realtime'],
   data() {
     return {
-      showTCInputStart: false,
-      showTCInputEnd: false,
       currentValue: this.clock.currentValue()
     };
   },
   computed: {
-    formattedBounds() {
-      return {
-        start: this.timeSystemFormatter.format(this.bounds.start),
-        end: this.timeSystemFormatter.format(this.bounds.end)
-      };
-    },
     formattedOffsets() {
       return {
         start: this.timeSystemDurationFormatter.format(Math.abs(this.offsets.start)),
@@ -111,7 +104,6 @@ export default {
   },
   watch: {
     bounds() {
-      console.log(this.formattedOffsets);
       this.updateCurrentValue();
     }
   },
@@ -119,11 +111,6 @@ export default {
     updateCurrentValue() {
       this.currentValue = this.clock.currentValue();
     },
-    timePopUpdate({ start, end }) {
-      this.offsets.start = [start.hours, start.minutes, start.seconds].join(':');
-      this.offsets.end = [end.hours, end.minutes, end.seconds].join(':');
-      this.setOffsetsFromView();
-    },
     dismiss() {
       this.$emit('dismiss-inputs-realtime');
     }

src/plugins/timeConductor/TimePopupRealtime.vue

@@ -163,14 +163,17 @@
 </template>
 
 <script>
+import { nextTick } from 'vue';
+
 export default {
+  inject: ['timeContext', 'timeSystemDurationFormatter'],
   props: {
     offsets: {
       type: Object,
       required: true
     }
   },
-  emits: ['update', 'dismiss'],
+  emits: ['dismiss'],
   data() {
     return {
       startInputHrs: '00',
@@ -185,6 +188,7 @@ export default {
   watch: {
     offsets: {
       handler() {
+        console.log('REMOVE THIS');
         this.setOffsets();
       },
       deep: true
@@ -227,18 +231,23 @@ export default {
       this.isDisabled = disabled;
     },
     submit() {
-      this.$emit('update', {
-        start: {
-          hours: this.startInputHrs,
-          minutes: this.startInputMins,
-          seconds: this.startInputSecs
-        },
-        end: {
-          hours: this.endInputHrs,
-          minutes: this.endInputMins,
-          seconds: this.endInputSecs
-        }
-      });
+      const formattedStartOffset = [
+        this.startInputHrs,
+        this.startInputMins,
+        this.startInputSecs
+      ].join(':');
+      const formattedEndOffset = [this.endInputHrs, this.endInputMins, this.endInputSecs].join(':');
+
+      let startOffset = 0 - this.timeSystemDurationFormatter.parse(formattedStartOffset);
+      let endOffset = this.timeSystemDurationFormatter.parse(formattedEndOffset);
+
+      const offsets = {
+        start: startOffset,
+        end: endOffset
+      };
+
+      this.timeContext.setClockOffsets(offsets);
+
       this.$emit('dismiss');
     },
     hide($event) {
@@ -255,13 +264,13 @@ export default {
       this[ref] = cv.toString().padStart(2, '0');
       this.validate();
     },
-    setOffsets() {
+    async setOffsets() {
       [this.startInputHrs, this.startInputMins, this.startInputSecs] =
         this.offsets.start.split(':');
       [this.endInputHrs, this.endInputMins, this.endInputSecs] = this.offsets.end.split(':');
-      this.$nextTick(() => {
-        this.numberSelect('startInputHrs');
-      });
+
+      await nextTick();
+      this.numberSelect('startInputHrs');
     },
     numberSelect(input) {
       if (this.$refs[input] === undefined || this.$refs[input] === null) {

src/plugins/timeConductor/independent/IndependentMode.vue

@@ -23,7 +23,7 @@
   <div ref="modeMenuButton" class="c-ctrl-wrapper c-ctrl-wrapper--menus-up">
     <div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
       <button
-        class="c-icon-button c-button--menu js-mode-button"
+        class="c-button--menu js-mode-button c-icon-button"
         :class="selectedMode.cssClass"
         aria-label="Independent Time Conductor Mode Menu"
         @click.prevent.stop="showModesMenu"
@@ -35,19 +35,10 @@
 </template>
 
 <script>
-import toggleMixin from '../../../ui/mixins/toggle-mixin.js';
-import modeMixin from '../mode-mixin.js';
 
 export default {
-  mixins: [toggleMixin, modeMixin],
-  inject: ['openmct'],
+  inject: ['openmct', 'timeMode', 'getAllModeMetadata', 'getModeMetadata'],
   props: {
-    mode: {
-      type: String,
-      default() {
-        return undefined;
-      }
-    },
     enabled: {
       type: Boolean,
       default() {
@@ -55,27 +46,25 @@ export default {
       }
     }
   },
-  emits: ['independent-mode-updated'],
   data: function () {
     return {
-      selectedMode: this.getModeMetadata(this.mode),
-      modes: []
+      selectedMode: this.getModeMetadata(this.timeMode)
     };
   },
   watch: {
-    mode: {
-      handler(newMode) {
-        this.setViewFromMode(newMode);
+    timeMode: {
+      handler() {
+        this.setView();
       }
     },
     enabled(newValue, oldValue) {
       if (newValue !== undefined && newValue !== oldValue && newValue === true) {
-        this.setViewFromMode(this.mode);
+        this.setView();
       }
     }
   },
   mounted: function () {
-    this.loadModes();
+    this.modes = this.getAllModeMetadata();
   },
   methods: {
     showModesMenu() {
@@ -89,13 +78,8 @@ export default {
       };
       this.openmct.menus.showSuperMenu(x, y, this.modes, menuOptions);
     },
-    setViewFromMode(mode) {
-      this.selectedMode = this.getModeMetadata(mode);
-    },
-    setMode(mode) {
-      this.setViewFromMode(mode);
-
-      this.$emit('independent-mode-updated', mode);
+    setView() {
+      this.selectedMode = this.getModeMetadata(this.timeMode);
     }
   }
 };

src/plugins/timeConductor/independent/IndependentTimeConductor.vue

@@ -181,11 +181,7 @@ export default {
 
     return {
       independentTCEnabled: this.domainObject.configuration.useIndependentTime === true,
-      timeOptions,
-      viewBounds: {
-        start: this.bounds.start,
-        end: this.bounds.end
-      }
+      timeOptions
     };
   },
   computed: {
@@ -236,10 +232,12 @@ export default {
     //   deep: true
     // }
     clock(newClock) {
-      this.setTimeOptionsClock(newClock);
+      console.log('watchclock');
+      this.saveClock(newClock);
     },
     timeMode(newTimeMode) {
-      this.setTimeOptionsMode(newTimeMode);
+      console.log('watchmode');
+      this.saveMode(newTimeMode);
     }
   },
   created() {
@@ -336,11 +334,12 @@ export default {
           this.isFixedTimeMode ? undefined : this.timeOptions.clock
         );
       } else {
-        if (this.isRealTimeMode) {
-          this.timeContext.setClock(this.timeOptions.clock);
-        }
+        console.log('removed code');
+        // if (this.isRealTimeMode) {
+        //   this.timeContext.setClock(this.timeOptions.clock);
+        // }
 
-        this.timeContext.setMode(this.timeOptions.mode, offsets);
+        // this.timeContext.setMode(this.timeOptions.mode, offsets);
       }
     },
     destroyIndependentTime() {