Add Expanded view for Time List

src/plugins/timelist/CompactView.vue

@@ -0,0 +1,112 @@
+<!--
+ 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>
+  <compact-view-item
+    v-for="item in sortedItems"
+    :key="item.key"
+    :item="item"
+    :item-properties="itemProperties"
+  >
+  </compact-view-item>
+</template>
+
+<script>
+import _ from 'lodash';
+
+import CompactViewItem from './CompactViewItem.vue';
+
+export default {
+  components: { CompactViewItem },
+  inject: ['domainObject', 'openmct'],
+  props: {
+    headerItems: {
+      type: Array,
+      required: true
+    },
+    items: {
+      type: Array,
+      required: true
+    },
+    defaultSort: {
+      type: Object,
+      default() {
+        return {
+          property: '',
+          defaultDirection: true
+        };
+      }
+    }
+  },
+  data() {
+    let sortBy = this.defaultSort.property;
+    let ascending = this.defaultSort.defaultDirection;
+
+    return {
+      sortBy,
+      ascending
+    };
+  },
+  computed: {
+    sortedItems() {
+      let sortedItems = _.sortBy(this.items, this.sortBy);
+      if (!this.ascending) {
+        sortedItems = sortedItems.reverse();
+      }
+
+      return sortedItems;
+    },
+    itemProperties() {
+      return this.headerItems.map((headerItem) => {
+        return {
+          property: headerItem.property,
+          format: headerItem.format
+        };
+      });
+    }
+  },
+  watch: {
+    defaultSort: {
+      handler() {
+        this.setSort();
+      },
+      deep: true
+    }
+  },
+  methods: {
+    setSort() {
+      this.sortBy = this.defaultSort.property;
+      this.ascending = this.defaultSort.defaultDirection;
+    },
+    sort(data) {
+      const property = data.property;
+      const direction = data.direction;
+
+      if (this.sortBy === property) {
+        this.ascending = !this.ascending;
+      } else {
+        this.sortBy = property;
+        this.ascending = direction;
+      }
+    }
+  }
+};
+</script>

src/plugins/timelist/CompactViewItem.vue

@@ -0,0 +1,134 @@
+<!--
+ 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>
+  <div :class="listItemClass">
+    <div class="c-tli__activity-color">
+      <div class="c-tli__activity-color-swatch" :style="styleClass"></div>
+    </div>
+    <div class="c-tli__title-and-bounds">
+      <div class="c-tli__title">{{ formattedItemValue.title }}</div>
+      <div class="c-tli__bounds">
+        <span class="c-tli__duration">{{ formattedItemValue.duration }}</span>
+        <span class="c-tli__start-time">{{ formattedItemValue.start }}</span>
+        <span class="c-tli__end-time">{{ formattedItemValue.end }}</span>
+      </div>
+    </div>
+    <div class="c-tli__progress-pie">
+      <svg viewBox="0 0 100 100">
+        <circle class="c-svg-progress__bg" r="50" cx="50" cy="50"></circle>
+        <path id="svg-progress-path" class="c-svg-progress__progress"></path>
+        <circle
+          class="c-svg-progress__ticks"
+          r="40"
+          cx="50"
+          cy="50"
+          stroke-dasharray="3 7.472"
+        ></circle>
+      </svg>
+    </div>
+    <div class="c-tli__time-hero">
+      <div class="c-tli__time-hero-context">{{ formattedItemValue.label }}</div>
+      <div class="c-tli__time-hero-time --is-countdown">{{ formattedItemValue.countdown }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+const CURRENT_CSS_SUFFIX = '--is-current';
+const PAST_CSS_SUFFIX = '--is-past';
+const FUTURE_CSS_SUFFIX = '--is-future';
+
+const ITEM_COLORS = {
+  [CURRENT_CSS_SUFFIX]: '#ffcc00',
+  [PAST_CSS_SUFFIX]: '#0088ff',
+  [FUTURE_CSS_SUFFIX]: '#7300ff'
+};
+
+const ITEM_STATES = {
+  notStarted: 'not-started',
+  inProgress: 'in-progress',
+  completed: 'completed',
+  aborted: 'aborted',
+  skipped: 'skipped',
+  incomplete: 'incomplete',
+  overdue: 'overdue',
+  runningLong: 'running-long'
+};
+
+export default {
+  inject: ['openmct'],
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+    itemProperties: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      itemState: ITEM_STATES.notStarted
+    };
+  },
+  computed: {
+    styleClass() {
+      return { backgroundColor: ITEM_COLORS[this.item.cssClass] };
+    },
+    listItemClass() {
+      const timeRelationClass = this.item.cssClass;
+      const itemStateClass = `--is-${this.itemState}`;
+      return `c-tli ${timeRelationClass} ${itemStateClass}`;
+    },
+    formattedItemValue() {
+      let itemValue = {
+        title: this.item.name
+      };
+      this.itemProperties.forEach((itemProperty) => {
+        let value = this.item[itemProperty.property];
+        let formattedValue;
+        if (itemProperty.format) {
+          formattedValue = itemProperty.format(
+            value,
+            this.item,
+            itemProperty.property,
+            this.openmct,
+            {
+              skipPrefix: true
+            }
+          );
+        }
+        itemValue[itemProperty.property] = formattedValue;
+
+        let label;
+        if (itemProperty.property === 'countdown') {
+          label = value > 0 ? 'Starts' : 'Ended';
+        }
+        itemValue.label = itemValue.label ?? label;
+      });
+
+      return itemValue;
+    }
+  }
+};
+</script>

src/plugins/timelist/TimelistComponent.vue

@@ -21,8 +21,15 @@
 -->
 
 <template>
-  <div ref="timelistHolder" class="c-timelist">
+  <div ref="timelistHolder" :class="listTypeClass">
+    <compact-view
+      v-if="isCompact"
+      :items="planActivities"
+      :header-items="headerItems"
+      :default-sort="defaultSort"
+    ></compact-view>
     <list-view
+      v-else
       :items="planActivities"
       :header-items="headerItems"
       :default-sort="defaultSort"
@@ -39,6 +46,7 @@ import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
 import ListView from '../../ui/components/List/ListView.vue';
 import { getPreciseDuration } from '../../utils/duration.js';
 import { getValidatedData, getValidatedGroups } from '../plan/util.js';
+import CompactView from './CompactView.vue';
 import { SORT_ORDER_OPTIONS } from './constants.js';
 
 const SCROLL_TIMEOUT = 10000;
@@ -72,24 +80,37 @@ const headerItems = [
   },
   {
     defaultDirection: false,
-    property: 'duration',
+    property: 'countdown',
     name: 'Time To/From',
-    format: function (value) {
+    format: function (value, object, key, openmct, options = {}) {
       let result;
       if (value < 0) {
-        result = `+${getPreciseDuration(Math.abs(value), {
+        const prefix = options.skipPrefix ? '' : '+';
+        result = `${prefix}${getPreciseDuration(Math.abs(value), {
           excludeMilliSeconds: true,
           useDayFormat: true
         })}`;
       } else if (value > 0) {
-        result = `-${getPreciseDuration(value, { excludeMilliSeconds: true, useDayFormat: true })}`;
+        const prefix = options.skipPrefix ? '' : '+';
+        result = `${prefix}${getPreciseDuration(value, {
+          excludeMilliSeconds: true,
+          useDayFormat: true
+        })}`;
       } else {
         result = 'Now';
       }
 
       return result;
     }
   },
+  {
+    defaultDirection: false,
+    property: 'duration',
+    name: 'Duration',
+    format: function (value, object, key, openmct) {
+      return `${getPreciseDuration(value, { excludeMilliSeconds: true, useDayFormat: true })}`;
+    }
+  },
   {
     defaultDirection: true,
     property: 'name',
@@ -104,6 +125,7 @@ const defaultSort = {
 
 export default {
   components: {
+    CompactView,
     ListView
   },
   inject: ['openmct', 'domainObject', 'path', 'composition'],
@@ -114,9 +136,18 @@ export default {
       height: 0,
       planActivities: [],
       headerItems: headerItems,
-      defaultSort: defaultSort
+      defaultSort: defaultSort,
+      isCompact: false
     };
   },
+  computed: {
+    listTypeClass() {
+      if (this.isCompact) {
+        return 'c-timelist c-timelist--large';
+      }
+      return 'c-timelist';
+    }
+  },
   mounted() {
     this.isEditing = this.openmct.editor.isEditing();
     this.updateTimestamp = _.throttle(this.updateTimestamp, 1000);
@@ -208,15 +239,14 @@ export default {
       this.setViewFromConfig(mutatedObject.configuration);
     },
     setViewFromConfig(configuration) {
+      this.filterValue = configuration.filter;
       if (this.isEditing) {
-        this.filterValue = configuration.filter;
         this.hideAll = false;
-        this.listActivities();
       } else {
-        this.filterValue = configuration.filter;
         this.setSort();
-        this.listActivities();
+        this.isCompact = configuration.isCompact;
       }
+      this.listActivities();
     },
     updateTimestamp(timestamp) {
       //The clock never stops ticking
@@ -379,11 +409,13 @@ export default {
         activity.key = uuid();
       }
 
+      activity.duration = activity.end - activity.start;
+
       if (activity.start < this.timestamp) {
         //if the activity start time has passed, display the time to the end of the activity
-        activity.duration = activity.end - this.timestamp;
+        activity.countdown = activity.end - this.timestamp;
       } else {
-        activity.duration = activity.start - this.timestamp;
+        activity.countdown = activity.start - this.timestamp;
       }
 
       return activity;
@@ -426,7 +458,7 @@ export default {
     },
     setScrollTop() {
       //The view isn't ready yet
-      if (!this.$el.parentElement) {
+      if (!this.$el.parentElement || this.isCompact) {
         return;
       }