Add Expanded view for Time List

src/plugins/plan/inspector/components/PlanActivitiesView.vue

@@ -129,7 +129,7 @@ export default {
       this.selectedActivities = [];
       selection.forEach((selectionItem) => {
         if (selectionItem[0].context.type === 'activity') {
-          const activity = selectionItem[0].context.activity;
+          const activity = { ...selectionItem[0].context.activity };
           if (activity) {
             activity.key = activity.id ?? activity.name;
             this.selectedActivities.push(activity);

src/plugins/timelist/ExpandedViewItem.vue

@@ -122,47 +122,60 @@ const INFERRED_EXECUTION_STATES = {
 export default {
   inject: ['openmct', 'domainObject', 'path'],
   props: {
-    item: {
-      type: Object,
-      required: true
+    name: {
+      type: String,
+      default: ''
+    },
+    start: {
+      type: Number,
+      default: 0
+    },
+    end: {
+      type: Number,
+      default: 0
+    },
+    duration: {
+      type: Number,
+      default: 0
+    },
+    countdown: {
+      type: Number,
+      default: 0
+    },
+    cssClass: {
+      type: String,
+      default: ''
     },
     itemProperties: {
       type: Array,
       required: true
     },
     executionState: {
       type: String,
-      default() {
-        return 'notStarted';
-      }
+      default: 'notStarted'
     }
   },
-  data() {
-    return {
-      timestamp: this.openmct.time.now()
-    };
-  },
   computed: {
     countdownClass() {
       let cssClass = '';
-      if (this.item.countdown < 0) {
+      if (this.countdown < 0) {
         cssClass = '--is-countup';
-      } else if (this.item.countdown > 0) {
+      } else if (this.countdown > 0) {
         cssClass = '--is-countdown';
       }
       return `c-tli__time-hero-time ${cssClass}`;
     },
     styleClass() {
-      return { backgroundColor: ITEM_COLORS[this.item.cssClass] };
+      return { backgroundColor: ITEM_COLORS[this.cssClass] };
     },
     isInProgress() {
       return this.executionState === 'in-progress';
     },
     eventHasDuration() {
-      return this.item.start !== this.item.end;
+      return this.start !== this.end;
     },
     listItemClass() {
-      const timeRelationClass = this.item.cssClass;
+      const timeRelationClass = this.cssClass;
       const executionStateClass = `--is-${this.executionState}`;
       return `c-tli ${timeRelationClass} ${executionStateClass}`;
     },
@@ -177,14 +190,14 @@ export default {
       }
 
       let label;
-      if (this.item.start < this.timestamp) {
+      if (this.start < this.timestamp) {
         // Start time is in the past
-        if (this.item.start === this.item.end) {
+        if (this.start === this.end) {
           // - 'Occurred' : for Events with start < now datetime and 0 duration
           label = INFERRED_EXECUTION_STATES.occurred;
         }
         // end time has not yet passed
-        else if (this.item.cssClass === CURRENT_CSS_SUFFIX) {
+        else if (this.cssClass === CURRENT_CSS_SUFFIX) {
           if (executionStateIndex === 0) {
             // - 'Overdue' : executionState.notStarted && start < now datetime
             label = INFERRED_EXECUTION_STATES.overdue;
@@ -194,7 +207,7 @@ export default {
           }
         }
         // end time is also in the past
-        else if (this.item.cssClass === PAST_CSS_SUFFIX) {
+        else if (this.cssClass === PAST_CSS_SUFFIX) {
           if (executionStateIndex === 0) {
             // - 'Incomplete' : executionState.notStarted && now > end datetime
             label = INFERRED_EXECUTION_STATES.incomplete;
@@ -209,7 +222,7 @@ export default {
       }
       // Start time is in the future
       else {
-        if (this.item.start === this.item.end) {
+        if (this.start === this.end) {
           // - 'Occurs' : for Events with start > now datetime and 0 duration
           label = INFERRED_EXECUTION_STATES.occurs;
         } else {
@@ -222,15 +235,15 @@ export default {
     },
     formattedItem() {
       let itemValue = {
-        title: this.item.name
+        title: this.name
       };
       this.itemProperties.forEach((itemProperty) => {
-        let value = this.item[itemProperty.key];
+        let value = this[itemProperty.key];
         let formattedValue;
         if (itemProperty.format) {
           const itemStartDate = new Date(value).toDateString();
           const timestampDate = new Date(this.timestamp).toDateString();
-          formattedValue = itemProperty.format(value, this.item, itemProperty.key, this.openmct, {
+          formattedValue = itemProperty.format(value, undefined, itemProperty.key, this.openmct, {
             skipPrefix: true,
             skipDateForToday: itemStartDate === timestampDate
           });
@@ -248,7 +261,7 @@ export default {
       );
     }
   },
-  mounted() {
+  created() {
     this.updateTimestamp = _.throttle(this.updateTimestamp, 1000);
     this.setTimeContext();
     this.timestamp = this.timeContext.now();
@@ -271,7 +284,7 @@ export default {
       this.timestamp = time;
       const progressElement = this.$refs.progressElement;
       if (this.isInProgress && progressElement) {
-        updateProgress(this.item.start, this.item.end, this.timestamp, progressElement);
+        updateProgress(this.start, this.end, this.timestamp, progressElement);
       }
     }
   }

src/plugins/timelist/TimelistComponent.vue

@@ -26,7 +26,12 @@
       <expanded-view-item
         v-for="item in sortedItems"
         :key="item.key"
-        :item="item"
+        :name="item.name"
+        :start="item.start"
+        :end="item.end"
+        :duration="item.duration"
+        :countdown="item.countdown"
+        :css-class="item.cssClass"
         :item-properties="itemProperties"
         :execution-state="persistedActivityStates[item.id]"
         @click.stop="setSelectionForActivity(item, $event.currentTarget)"
@@ -202,12 +207,15 @@ export default {
       });
     }
   },
-  mounted() {
-    this.isEditing = this.openmct.editor.isEditing();
+  created() {
     this.updateTimestamp = _.throttle(this.updateTimestamp, 1000);
+    this.deferAutoScroll = _.debounce(this.deferAutoScroll, 500);
 
     this.setTimeContext();
     this.timestamp = this.timeContext.now();
+  },
+  mounted() {
+    this.isEditing = this.openmct.editor.isEditing();
 
     this.getPlanDataAndSetConfig(this.domainObject);
     this.getActivityStates();
@@ -230,7 +238,6 @@ export default {
 
     this.openmct.editor.on('isEditing', this.setEditState);
 
-    this.deferAutoScroll = _.debounce(this.deferAutoScroll, 500);
     this.$el.parentElement.addEventListener('scroll', this.deferAutoScroll, true);
 
     if (this.composition) {
@@ -298,10 +305,10 @@ export default {
       });
     },
     async getActivityStates() {
-      this.activityStatesObject = await this.openmct.objects.get('activity-states');
-      this.setActivityStates(this.activityStatesObject);
+      const activityStatesObject = await this.openmct.objects.get('activity-states');
+      this.setActivityStates(activityStatesObject);
       this.stopObservingActivityStatesObject = this.openmct.objects.observe(
-        this.activityStatesObject,
+        activityStatesObject,
         '*',
         this.setActivityStates
       );
@@ -413,9 +420,7 @@ export default {
           return;
         }
         // Create new objects so Vue 3 can detect any changes
-        this.planActivities = this.planActivities.concat(
-          JSON.parse(JSON.stringify(this.planData[key]))
-        );
+        this.planActivities.push(...this.planData[key]);
       });
     },
 

src/styles/_constants-snow.scss

@@ -174,8 +174,7 @@ $colorTimeFixedBtnBg: pullForward($colorTimeFixed, 5%);
 $colorTimeFixedBtnFg: $colorTimeFixedFgSubtle;
 $colorTimeFixedBtnBgMajor: #a09375;
 $colorTimeFixedBtnFgMajor: #fff;
-
-$colorTimeRealtime: #6179d7;
+$colorTimeRealtime: #445890;
 $colorTimeRealtimeBg: $colorTimeRealtime;
 $colorTimeRealtimeFg: #fff;
 $colorTimeRealtimeFgSubtle: #eee;