make date time only for supporting time systems

src/plugins/timeConductor/ConductorInputsFixed.vue

@@ -20,7 +20,8 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <TimePopupFixed v-if="readOnly === false" @focus="$event.target.select()" @dismiss="dismiss" />
+  <DateTimePopupFixed v-if="delimiter && !readOnly" :delimiter="delimiter" @focus="$event.target.select()" @dismiss="dismiss" />
+  <TimePopupFixed v-else-if="!readOnly" @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"
@@ -42,10 +43,12 @@
 
 <script>
 import TimePopupFixed from './TimePopupFixed.vue';
+import DateTimePopupFixed from './DateTimePopupFixed.vue';
 
 export default {
   components: {
-    TimePopupFixed
+    TimePopupFixed,
+    DateTimePopupFixed
   },
   inject: ['openmct', 'timeContext', 'bounds', 'timeSystemFormatter'],
   props: {
@@ -64,6 +67,9 @@ export default {
   },
   emits: ['dismiss-inputs-fixed'],
   computed: {
+    delimiter() {
+      return this.timeSystemFormatter.getDelimiter?.();
+    },
     formattedBounds() {
       return {
         start: this.timeSystemFormatter.format(this.bounds.start),

src/plugins/timeConductor/DateTimePopupFixed.vue

@@ -122,6 +122,12 @@ export default {
   components: {
     DatePicker
   },
+  props: {
+    delimiter: {
+      type: String,
+      required: true
+    }
+  },
   inject: [
     'openmct',
     'isTimeSystemUTCBased',
@@ -137,14 +143,6 @@ export default {
       isDisabled: false
     };
   },
-  computed: {
-    canSplitDateTime() {
-      return Boolean(
-        this.isTimeSystemUTCBased &&
-        this.timeSystemFormatter?.getDelimiter
-      );
-    }
-  },
   watch: {
     bounds: {
       handler() {
@@ -154,7 +152,6 @@ export default {
     }
   },
   mounted() {
-    this.delimiter = this.timeSystemFormatter.getDelimiter?.();
     this.setViewFromBounds();
   },
   beforeUnmount() {

src/plugins/timeConductor/TimePopupFixed.vue

@@ -0,0 +1,244 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <form ref="fixedDeltaInput">
+    <div class="c-tc-input-popup__input-grid">
+      <div class="pr-time-label pr-time-label-start-date">Start</div>
+      <div class="pr-time-label pr-time-label-start-time"></div>
+      <div class="pr-time-label pr-time-label-end-date">End</div>
+      <div class="pr-time-label pr-time-label-end-time"></div>
+
+      <div class="pr-time-input pr-time-input--time pr-time-input-start-date">
+        <input
+          ref="startTime"
+          v-model="formattedBounds.start"
+          class="c-input--datetime"
+          type="text"
+          autocorrect="off"
+          spellcheck="false"
+          aria-label="Start time"
+          @change="validateAllBounds('startTime')"
+        />
+      </div>
+
+      <div class="pr-time-input pr-time-input__start-end-sep icon-arrows-right-left"></div>
+
+      <div class="pr-time-input pr-time-input--time pr-time-input-end-date">
+        <input
+          ref="endTime"
+          v-model="formattedBounds.end"
+          class="c-input--datetime"
+          type="text"
+          autocorrect="off"
+          spellcheck="false"
+          aria-label="End time"
+          @change="validateAllBounds('endTime')"
+        />
+      </div>
+
+      <div class="pr-time-input pr-time-input--buttons">
+        <button
+          class="c-button c-button--major icon-check"
+          :disabled="isDisabled"
+          aria-label="Submit time bounds"
+          @click.prevent="submit"
+        ></button>
+        <button
+          class="c-button icon-x"
+          aria-label="Discard changes and close time popup"
+          @click.prevent="hide"
+        ></button>
+      </div>
+    </div>
+  </form>
+</template>
+
+<script>
+export default {
+  inject: [
+    'openmct',
+    'isTimeSystemUTCBased',
+    'timeContext',
+    'timeSystemFormatter',
+    'timeSystemDurationFormatter',
+    'bounds'
+  ],
+  emits: ['update', 'dismiss'],
+  data() {
+    return {
+      formattedBounds: {},
+      isDisabled: false
+    };
+  },
+  computed: {
+
+  },
+  watch: {
+    bounds: {
+      handler() {
+        console.log(this.bounds);
+        this.setViewFromBounds();
+      }
+    }
+  },
+  mounted() {
+    this.setViewFromBounds();
+  },
+  beforeUnmount() {
+    this.clearAllValidation();
+  },
+  methods: {
+    clearAllValidation() {
+      [this.$refs.startTime, this.$refs.endTime].forEach(this.clearValidationForInput);
+    },
+    clearValidationForInput(input) {
+      input.setCustomValidity('');
+      input.title = '';
+    },
+    setViewFromBounds() {
+      const start = this.timeSystemFormatter.format(this.bounds.start);
+      const end = this.timeSystemFormatter.format(this.bounds.end);
+
+      this.formattedBounds = {
+        start,
+        end
+      };
+    },
+    setBoundsFromView(dismiss) {
+      if (this.$refs.fixedDeltaInput.checkValidity()) {
+        const start = this.timeSystemFormatter.parse(this.formattedBounds.start);
+        const end = this.timeSystemFormatter.parse(this.formattedBounds.end);
+
+        this.timeContext.setBounds({
+          start,
+          end
+        });
+      }
+
+      if (dismiss) {
+        this.$emit('dismiss');
+
+        return false;
+      }
+    },
+    submit() {
+      this.validateAllBounds('startDate');
+      this.validateAllBounds('endDate');
+      this.submitForm(!this.isDisabled);
+    },
+    submitForm(dismiss) {
+      // Allow Vue model to catch up to user input.
+      // Submitting form will cause validation messages to display (but only if triggered by button click)
+      this.$nextTick(() => this.setBoundsFromView(dismiss));
+    },
+    validateAllBounds(ref) {
+      if (!this.areBoundsFormatsValid()) {
+        return false;
+      }
+
+      let validationResult = {
+        valid: true
+      };
+      const currentInput = this.$refs[ref];
+
+      return [this.$refs.startTime, this.$refs.endTime].every((input) => {
+        const start = this.timeSystemFormatter.parse(this.formattedBounds.start);
+        const end = this.timeSystemFormatter.parse(this.formattedBounds.end);
+
+        const bounds = {
+          start,
+          end
+        };
+
+        //TODO: Do we need limits here? We have conductor limits disabled right now
+        // const limit = this.getBoundsLimit();
+        const limit = false;
+
+        if (this.isTimeSystemUTCBased && limit && bounds.end - bounds.start > limit) {
+          if (input === currentInput) {
+            validationResult = {
+              valid: false,
+              message: 'Start and end difference exceeds allowable limit'
+            };
+          }
+        } else {
+          if (input === currentInput) {
+            validationResult = this.timeContext.validateBounds(bounds);
+          }
+        }
+
+        return this.handleValidationResults(input, validationResult);
+      });
+    },
+    areBoundsFormatsValid() {
+      let validationResult = {
+        valid: true
+      };
+
+      return [this.$refs.startTime, this.$refs.endTime].every((input) => {
+        const formattedBounds =
+          input === this.$refs.startTime
+            ? this.formattedBounds.start
+            : this.formattedBounds.end;
+        if (!this.timeSystemFormatter.validate(formattedBounds)) {
+          validationResult = {
+            valid: false,
+            message: 'Invalid date'
+          };
+        }
+
+        return this.handleValidationResults(input, validationResult);
+      });
+    },
+    getBoundsLimit() {
+      const configuration = this.configuration.menuOptions
+        .filter((option) => option.timeSystem === this.timeSystem.key)
+        .find((option) => option.limit);
+
+      const limit = configuration ? configuration.limit : undefined;
+
+      return limit;
+    },
+    handleValidationResults(input, validationResult) {
+      if (validationResult.valid !== true) {
+        input.setCustomValidity(validationResult.message);
+        input.title = validationResult.message;
+        this.isDisabled = true;
+      } else {
+        input.setCustomValidity('');
+        input.title = '';
+        this.isDisabled = false;
+      }
+
+      this.$refs.fixedDeltaInput.reportValidity();
+
+      return validationResult.valid;
+    },
+    hide($event) {
+      if ($event.target.className.indexOf('c-button icon-x') > -1) {
+        this.$emit('dismiss');
+      }
+    }
+  }
+};
+</script>