mirror of
https://github.com/nasa/openmct.git
synced 2025-01-18 10:46:42 +00:00
Add Expanded view for Time List (#7378)
* Add activity states domain object and interceptor to auto create one * Add activity state inspector option * Only save status if we have a unique ids for activities * Include the id in the activity properties * Don't show activity state section in the inspector if multiple activities are selected * Display activity properties when an activity row is selected in the timelist * Add compact view for timelist * Add inspector configuration for compact view * Set colors based on time relation of activity * Use activity id as key if it is available * Ensure the correct option is selected for activity states * Closes #7377 - Markup and CSS sanding and polishing. - Still WIP! * Closes #7377 - Markup and CSS sanding and polishing. - Still WIP! * Add status label * Rename to Expanded view and isExpanded as properties. Add display style dropdown configuration in the inspector. * Refactor activity selection. Display activity properties * Closes #7377 - Label formatting Todo notes about states. - Computed values and `v-ifs` added to control display for progress pie and countdown 'hero'. - Still WIP! * Closes #7377 - Add svg icons and some stubbed in logic. - Still WIP! * Remove activity states plugin. Move the activity states interceptor to the plan plugin. * Change activity states interceptor parameters to options * Rename constants * Fix activity states test * Addresses review comments making code more readable. * Closes #7377 - Significant adds for large Time List element styling for activity states. - `$color*` Time List-related theme constants remapped and significantly enhanced. - Code cleanup and removal of stubbed-in SCSS vars. * Closes #7377 - Unit testing and colors in Snow in progress. - Fixed erroneous checkin in ExpandedViewItem.vue. * Remove ExpandedView component and pull the ExpandedViewItem up to the top level. Same for ListView, pulling the ListItem up one level. * Fix sorting for compact view. Hardcode options for switching compact/expanded views. * Closes #7377 - Snow Time List colors finalized and smoke tested. - New graphic SVG for skipped activity. - Added aria labels to SVG graphics. * Closes #7377 - Fixed div with no class. * Add e2e test for activity states feature. * Address review comments. Rename variables, documentation. * No shallow copy * Merge updates to activity-state * Sync with activity states PR * Draft of progress-pie * - Add `s-selected` styling for Expanded Time List elements. * Add 2 new date formats * Look and feel enhancements for pie, zero duration events and start and end time formats * Fix pie show/hide condition * Final touches to the pie and labels * Refactor label logic * Closes #7377 - Added `sweep-hand` animation element to progress pie graphic SVG. * Remove use of ListView - no point passing arrays around since we are already using sortedItems and itemProperties for expandedViewItems * We addded a new column for duration and changed the previous duration to countdown. This required adjustment of the test * Fix expanded view for timelist tests * Closes #7377 - Fixed display logic for inferred execution states. * Closes #7377 - Fixed a bug that threw console errors when a value was undefined. * Optimize rendering of timelist activities * Remove focused test * Address review comments * Remove reactive selection for plan activities * destructure props into individual item properties for render performance benefits * Use local variables and remove JSON utility methods * Change cancelled to skipped * Focus the activity tab when shown * Fix label updates * Add countup to cspell * Remove progress pie due to licensing unknowns --------- Co-authored-by: Charles Hacskaylo <charlesh88@gmail.com> Co-authored-by: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
This commit is contained in:
Shefali Joshi
GitHub
parent
d42aa545bb
commit
18e4b9da65
@ -495,7 +495,8 @@
|
||||
"Andale",
|
||||
"unnnormalized",
|
||||
"checksnapshots",
|
||||
"specced"
|
||||
"specced",
|
||||
"countup"
|
||||
],
|
||||
"dictionaries": ["npm", "softwareTerms", "node", "html", "css", "bash", "en_US"],
|
||||
"ignorePaths": [
|
||||
|
||||
@ -43,7 +43,7 @@ const TIME_TO_FROM_COLUMN = 2;
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const ACTIVITY_COLUMN = 3;
|
||||
const HEADER_ROW = 0;
|
||||
const NUM_COLUMNS = 4;
|
||||
const NUM_COLUMNS = 5;
|
||||
|
||||
test.describe('Time List', () => {
|
||||
test("Create a Time List, add a single Plan to it, verify all the activities are displayed with no milliseconds and selecting an activity shows it's properties", async ({
|
||||
@ -109,6 +109,70 @@ test.describe('Time List', () => {
|
||||
});
|
||||
});
|
||||
|
||||
test("View a timelist in expanded view, verify all the activities are displayed and selecting an activity shows it's properties", async ({
|
||||
page
|
||||
}) => {
|
||||
// Goto baseURL
|
||||
await page.goto('./', { waitUntil: 'domcontentloaded' });
|
||||
|
||||
const timelist = await test.step('Create a Time List', async () => {
|
||||
const createdTimeList = await createDomainObjectWithDefaults(page, { type: 'Time List' });
|
||||
const objectName = await page.locator('.l-browse-bar__object-name').innerText();
|
||||
expect(objectName).toBe(createdTimeList.name);
|
||||
|
||||
return createdTimeList;
|
||||
});
|
||||
|
||||
await test.step('Create a Plan and add it to the timelist', async () => {
|
||||
await createPlanFromJSON(page, {
|
||||
name: 'Test Plan',
|
||||
json: examplePlanSmall1,
|
||||
parent: timelist.uuid
|
||||
});
|
||||
|
||||
// Ensure that all activities are shown in the expanded view
|
||||
const groups = Object.keys(examplePlanSmall1);
|
||||
const firstGroupKey = groups[0];
|
||||
const firstGroupItems = examplePlanSmall1[firstGroupKey];
|
||||
const firstActivity = firstGroupItems[0];
|
||||
const lastActivity = firstGroupItems[firstGroupItems.length - 1];
|
||||
const startBound = firstActivity.start;
|
||||
const endBound = lastActivity.end;
|
||||
|
||||
// Switch to fixed time mode with all plan events within the bounds
|
||||
await page.goto(
|
||||
`${timelist.url}?tc.mode=fixed&tc.startBound=${startBound}&tc.endBound=${endBound}&tc.timeSystem=utc&view=timelist.view`
|
||||
);
|
||||
|
||||
// Change the object to edit mode
|
||||
await page.getByRole('button', { name: 'Edit Object' }).click();
|
||||
|
||||
// Find the display properties section in the inspector
|
||||
await page.getByRole('tab', { name: 'View Properties' }).click();
|
||||
// Switch to expanded view and save the setting
|
||||
await page.getByLabel('Display Style').selectOption({ label: 'Expanded' });
|
||||
|
||||
// Click on the "Save" button
|
||||
await page.getByRole('button', { name: 'Save' }).click();
|
||||
await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
|
||||
|
||||
// Verify all events are displayed
|
||||
const eventCount = await page.getByRole('row').count();
|
||||
await expect(eventCount).toEqual(firstGroupItems.length);
|
||||
});
|
||||
|
||||
await test.step('Shows activity properties when a row is selected', async () => {
|
||||
await page.getByRole('row').nth(2).click();
|
||||
|
||||
// Find the activity state section in the inspector
|
||||
await page.getByRole('tab', { name: 'Activity' }).click();
|
||||
// Check that activity state label is displayed in the inspector.
|
||||
await expect(page.getByLabel('Activity Status').locator("[aria-selected='true']")).toHaveText(
|
||||
'Not started'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* The regular expression used to parse the countdown string.
|
||||
* Some examples of valid Countdown strings:
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -67,8 +67,8 @@ const activityStates = [
|
||||
label: 'Aborted'
|
||||
},
|
||||
{
|
||||
key: 'cancelled',
|
||||
label: 'Cancelled'
|
||||
key: 'skipped',
|
||||
label: 'Skipped'
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
281
src/plugins/timelist/ExpandedViewItem.vue
Normal file
281
src/plugins/timelist/ExpandedViewItem.vue
Normal file
@ -0,0 +1,281 @@
|
||||
<!--
|
||||
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" role="row">
|
||||
<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">{{ formattedItem.title }}</div>
|
||||
<div class="c-tli__bounds" :class="{ '--has-duration': eventHasDuration }">
|
||||
<div v-if="eventHasDuration" class="c-tli__duration">{{ formattedItem.duration }}</div>
|
||||
<div v-else class="c-tli__start-time">Event</div>
|
||||
<div class="c-tli__start-time">
|
||||
{{ formattedItem.start }}
|
||||
</div>
|
||||
<div v-if="eventHasDuration" class="c-tli__end-time">{{ formattedItem.end }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="c-tli__graphic">
|
||||
<svg viewBox="0 0 100 100">
|
||||
<path
|
||||
aria-label="Activity complete"
|
||||
class="c-tli__graphic__check"
|
||||
d="M80 20L42.5 57.5L20 35V57.5L42.5 80L80 42.5V20Z"
|
||||
/>
|
||||
<path
|
||||
aria-label="Activity alert"
|
||||
class="c-tli__graphic__alert-triangle"
|
||||
d="M79.4533 70.3034L54.004 25.7641C51.8962 22.0786 48.4636 22.0786 46.3559 25.7641L20.8946 70.3034C18.7868 73.989 20.5332 77 24.7728 77H75.563C79.8146 77 81.561 73.989 79.4533 70.3034ZM54.028 73.1459H46.3198V65.4376H54.028V73.1459ZM55.3409 50.0211L53.0645 61.5835H47.2833L45.007 50.0211V34.6045H55.3529V50.0211H55.3409Z"
|
||||
/>
|
||||
<g aria-label="Activity aborted" class="c-tli__graphic__circle-slash">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M50 82C67.6731 82 82 67.6731 82 50C82 32.3269 67.6731 18 50 18C32.3269 18 18 32.3269 18 50C18 67.6731 32.3269 82 50 82ZM50 72C62.1503 72 72 62.1503 72 50C72 37.8497 62.1503 28 50 28C37.8497 28 28 37.8497 28 50C28 62.1503 37.8497 72 50 72Z"
|
||||
/>
|
||||
<path
|
||||
d="M63.7886 29.6404L70.8596 36.7114L36.2114 71.3596L29.1404 64.2886L63.7886 29.6404Z"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
aria-label="Activity skipped"
|
||||
class="c-tli__graphic__skipped"
|
||||
d="M31 48C31 42.4772 35.5152 38 41 38H59C64.4848 38 69 42.4772 69 48V55H58L74 72L90 55H79V48C79 36.9543 69.9695 28 59 28H41C30.0305 28 21 36.9543 21 48V53.0294C21 56.8792 17.8232 60 14 60V70C23.308 70 31 62.402 31 53.0294V48Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="c-tli__time-hero">
|
||||
<div class="c-tli__time-hero-context-and-time">
|
||||
<div class="c-tli__time-hero-context">{{ formattedItemLabel }}</div>
|
||||
<div v-if="showTimeHero" :class="countdownClass">
|
||||
{{ formattedItem.countdown }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash';
|
||||
|
||||
import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
|
||||
import { CURRENT_CSS_SUFFIX, FUTURE_CSS_SUFFIX, PAST_CSS_SUFFIX } from './constants.js';
|
||||
|
||||
const ITEM_COLORS = {
|
||||
[CURRENT_CSS_SUFFIX]: '#ffcc00',
|
||||
[PAST_CSS_SUFFIX]: '#0088ff',
|
||||
[FUTURE_CSS_SUFFIX]: '#7300ff'
|
||||
};
|
||||
|
||||
const EXECUTION_STATES = {
|
||||
notStarted: 'Not started',
|
||||
'in-progress': 'In progress',
|
||||
completed: 'Completed',
|
||||
aborted: 'Aborted',
|
||||
skipped: 'Skipped'
|
||||
};
|
||||
|
||||
const INFERRED_EXECUTION_STATES = {
|
||||
incomplete: 'Incomplete',
|
||||
overdue: 'Overdue',
|
||||
runningLong: 'Running Long',
|
||||
starts: 'Starts',
|
||||
occurs: 'Occurs',
|
||||
occurred: 'Occurred',
|
||||
ends: 'Ends',
|
||||
ended: 'Ended'
|
||||
};
|
||||
|
||||
export default {
|
||||
inject: ['openmct', 'domainObject', 'path'],
|
||||
props: {
|
||||
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: 'notStarted'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formattedItemLabel: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
countdownClass() {
|
||||
let cssClass = '';
|
||||
if (this.countdown < 0) {
|
||||
cssClass = '--is-countup';
|
||||
} else if (this.countdown > 0) {
|
||||
cssClass = '--is-countdown';
|
||||
}
|
||||
return `c-tli__time-hero-time ${cssClass}`;
|
||||
},
|
||||
styleClass() {
|
||||
return { backgroundColor: ITEM_COLORS[this.cssClass] };
|
||||
},
|
||||
isInProgress() {
|
||||
return this.executionState === 'in-progress';
|
||||
},
|
||||
eventHasDuration() {
|
||||
return this.start !== this.end;
|
||||
},
|
||||
listItemClass() {
|
||||
const timeRelationClass = this.cssClass;
|
||||
const executionStateClass = `--is-${this.executionState}`;
|
||||
return `c-tli ${timeRelationClass} ${executionStateClass}`;
|
||||
},
|
||||
formattedItem() {
|
||||
let itemValue = {
|
||||
title: this.name
|
||||
};
|
||||
this.itemProperties.forEach((itemProperty) => {
|
||||
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, undefined, itemProperty.key, this.openmct, {
|
||||
skipPrefix: true,
|
||||
skipDateForToday: itemStartDate === timestampDate
|
||||
});
|
||||
}
|
||||
itemValue[itemProperty.key] = formattedValue;
|
||||
});
|
||||
|
||||
return itemValue;
|
||||
},
|
||||
showTimeHero() {
|
||||
return !(
|
||||
this.executionState === EXECUTION_STATES.completed ||
|
||||
this.executionState === EXECUTION_STATES.aborted ||
|
||||
this.executionState === EXECUTION_STATES.skipped
|
||||
);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.updateTimestamp = _.throttle(this.updateTimestamp, 1000);
|
||||
this.setTimeContext();
|
||||
this.timestamp = this.timeContext.now();
|
||||
},
|
||||
methods: {
|
||||
setTimeContext() {
|
||||
this.stopFollowingTimeContext();
|
||||
this.timeContext = this.openmct.time.getContextForView(this.path);
|
||||
this.followTimeContext();
|
||||
},
|
||||
followTimeContext() {
|
||||
this.timeContext.on(TIME_CONTEXT_EVENTS.tick, this.updateTimestamp);
|
||||
},
|
||||
stopFollowingTimeContext() {
|
||||
if (this.timeContext) {
|
||||
this.timeContext.off(TIME_CONTEXT_EVENTS.tick, this.updateTimestamp);
|
||||
}
|
||||
},
|
||||
updateTimestamp(time) {
|
||||
this.timestamp = time;
|
||||
this.formatItemLabel();
|
||||
},
|
||||
formatItemLabel() {
|
||||
let executionStateLabel;
|
||||
const executionStateKeys = Object.keys(EXECUTION_STATES);
|
||||
const executionStateIndex = executionStateKeys.findIndex(
|
||||
(key) => key === this.executionState
|
||||
);
|
||||
if (executionStateIndex > -1) {
|
||||
executionStateLabel = EXECUTION_STATES[executionStateIndex];
|
||||
}
|
||||
|
||||
let label;
|
||||
if (this.start < this.timestamp) {
|
||||
// Start time is in the past
|
||||
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.cssClass === CURRENT_CSS_SUFFIX) {
|
||||
if (executionStateIndex === 0) {
|
||||
// - 'Overdue' : executionState.notStarted && start < now datetime
|
||||
label = INFERRED_EXECUTION_STATES.overdue;
|
||||
} else {
|
||||
// - 'Ends' : executionState.inProgress && now > start datetime && now < end datetime
|
||||
label = INFERRED_EXECUTION_STATES.ends;
|
||||
}
|
||||
}
|
||||
// end time is also in the past
|
||||
else if (this.cssClass === PAST_CSS_SUFFIX) {
|
||||
if (executionStateIndex === 0) {
|
||||
// - 'Incomplete' : executionState.notStarted && now > end datetime
|
||||
label = INFERRED_EXECUTION_STATES.incomplete;
|
||||
} else if (executionStateIndex === 1) {
|
||||
// - 'Running Long' : executionState.inProgress && now > end datetime
|
||||
label = INFERRED_EXECUTION_STATES.runningLong;
|
||||
} else {
|
||||
// - 'Ended' :now > start datetime && now > end datetime
|
||||
label = INFERRED_EXECUTION_STATES.ended;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Start time is in the future
|
||||
else {
|
||||
if (this.start === this.end) {
|
||||
// - 'Occurs' : for Events with start > now datetime and 0 duration
|
||||
label = INFERRED_EXECUTION_STATES.occurs;
|
||||
} else {
|
||||
// - 'Starts' : for Activities with now > start datetime
|
||||
label = INFERRED_EXECUTION_STATES.starts;
|
||||
}
|
||||
}
|
||||
|
||||
this.formattedItemLabel = label || executionStateLabel;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -21,14 +21,55 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div ref="timelistHolder" class="c-timelist">
|
||||
<list-view
|
||||
:items="planActivities"
|
||||
:header-items="headerItems"
|
||||
:default-sort="defaultSort"
|
||||
class="sticky"
|
||||
@item-selection-changed="setSelectionForActivity"
|
||||
/>
|
||||
<div ref="timelistHolder" :class="listTypeClass">
|
||||
<template v-if="isExpanded">
|
||||
<expanded-view-item
|
||||
v-for="item in sortedItems"
|
||||
:key="item.key"
|
||||
: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)"
|
||||
>
|
||||
</expanded-view-item>
|
||||
</template>
|
||||
<div v-else class="c-table c-table--sortable c-list-view c-list-view--sticky-header sticky">
|
||||
<table class="c-table__body js-table__body">
|
||||
<thead class="c-table__header">
|
||||
<tr>
|
||||
<list-header
|
||||
v-for="headerItem in headerItems"
|
||||
:key="headerItem.property"
|
||||
:direction="
|
||||
defaultSort.property === headerItem.property
|
||||
? defaultSort.defaultDirection
|
||||
: headerItem.defaultDirection
|
||||
"
|
||||
:is-sortable="headerItem.isSortable"
|
||||
:aria-label="headerItem.name"
|
||||
:title="headerItem.name"
|
||||
:property="headerItem.property"
|
||||
:current-sort="defaultSort.property"
|
||||
@sort="sort"
|
||||
/>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<list-item
|
||||
v-for="item in sortedItems"
|
||||
:key="item.key"
|
||||
:item="item"
|
||||
:item-properties="itemProperties"
|
||||
@click.stop="setSelectionForActivity(item, $event.currentTarget)"
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -37,27 +78,36 @@ import _ from 'lodash';
|
||||
import { v4 as uuid } from 'uuid';
|
||||
|
||||
import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
|
||||
import ListView from '../../ui/components/List/ListView.vue';
|
||||
import ListHeader from '../../ui/components/List/ListHeader.vue';
|
||||
import ListItem from '../../ui/components/List/ListItem.vue';
|
||||
import { getPreciseDuration } from '../../utils/duration.js';
|
||||
import { getFilteredValues, getValidatedData, getValidatedGroups } from '../plan/util.js';
|
||||
import { SORT_ORDER_OPTIONS } from './constants.js';
|
||||
import ExpandedViewItem from './ExpandedViewItem.vue';
|
||||
|
||||
const SCROLL_TIMEOUT = 10000;
|
||||
|
||||
const TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
|
||||
const SAME_DAY_PRECISION_SECONDS = 'HH:mm:ss';
|
||||
|
||||
const CURRENT_CSS_SUFFIX = '--is-current';
|
||||
const PAST_CSS_SUFFIX = '--is-past';
|
||||
const FUTURE_CSS_SUFFIX = '--is-future';
|
||||
|
||||
const headerItems = [
|
||||
{
|
||||
defaultDirection: true,
|
||||
isSortable: true,
|
||||
property: 'start',
|
||||
name: 'Start Time',
|
||||
format: function (value, object, key, openmct) {
|
||||
format: function (value, object, key, openmct, options = {}) {
|
||||
const timeFormat = openmct.time.timeSystem().timeFormat;
|
||||
const timeFormatter = openmct.telemetry.getValueFormatter({ format: timeFormat }).formatter;
|
||||
return timeFormatter.format(value, TIME_FORMAT);
|
||||
if (options.skipDateForToday) {
|
||||
return timeFormatter.format(value, SAME_DAY_PRECISION_SECONDS);
|
||||
} else {
|
||||
return timeFormatter.format(value, TIME_FORMAT);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -65,25 +115,34 @@ const headerItems = [
|
||||
isSortable: true,
|
||||
property: 'end',
|
||||
name: 'End Time',
|
||||
format: function (value, object, key, openmct) {
|
||||
format: function (value, object, key, openmct, options = {}) {
|
||||
const timeFormat = openmct.time.timeSystem().timeFormat;
|
||||
const timeFormatter = openmct.telemetry.getValueFormatter({ format: timeFormat }).formatter;
|
||||
return timeFormatter.format(value, TIME_FORMAT);
|
||||
if (options.skipDateForToday) {
|
||||
return timeFormatter.format(value, SAME_DAY_PRECISION_SECONDS);
|
||||
} else {
|
||||
return timeFormatter.format(value, TIME_FORMAT);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
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';
|
||||
}
|
||||
@ -91,6 +150,14 @@ const headerItems = [
|
||||
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',
|
||||
@ -105,7 +172,9 @@ const defaultSort = {
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ListView
|
||||
ExpandedViewItem,
|
||||
ListHeader,
|
||||
ListItem
|
||||
},
|
||||
inject: ['openmct', 'domainObject', 'path', 'composition'],
|
||||
data() {
|
||||
@ -114,18 +183,42 @@ export default {
|
||||
viewBounds: undefined,
|
||||
height: 0,
|
||||
planActivities: [],
|
||||
groups: [],
|
||||
headerItems: headerItems,
|
||||
defaultSort: defaultSort
|
||||
defaultSort: defaultSort,
|
||||
isExpanded: false,
|
||||
persistedActivityStates: {},
|
||||
sortedItems: []
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.isEditing = this.openmct.editor.isEditing();
|
||||
computed: {
|
||||
listTypeClass() {
|
||||
if (this.isExpanded) {
|
||||
return 'c-timelist c-timelist--large';
|
||||
}
|
||||
return 'c-timelist';
|
||||
},
|
||||
itemProperties() {
|
||||
return this.headerItems.map((headerItem) => {
|
||||
return {
|
||||
key: headerItem.property,
|
||||
format: headerItem.format
|
||||
};
|
||||
});
|
||||
}
|
||||
},
|
||||
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();
|
||||
|
||||
this.unlisten = this.openmct.objects.observe(
|
||||
this.domainObject,
|
||||
@ -145,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) {
|
||||
@ -165,6 +257,14 @@ export default {
|
||||
this.unlistenConfig();
|
||||
}
|
||||
|
||||
if (this.stopObservingPlan) {
|
||||
this.stopObservingPlan();
|
||||
}
|
||||
|
||||
if (this.stopObservingActivityStatesObject) {
|
||||
this.stopObservingActivityStatesObject();
|
||||
}
|
||||
|
||||
if (this.removeStatusListener) {
|
||||
this.removeStatusListener();
|
||||
}
|
||||
@ -204,6 +304,18 @@ export default {
|
||||
sourceMap: this.domainObject.sourceMap
|
||||
});
|
||||
},
|
||||
async getActivityStates() {
|
||||
const activityStatesObject = await this.openmct.objects.get('activity-states');
|
||||
this.setActivityStates(activityStatesObject);
|
||||
this.stopObservingActivityStatesObject = this.openmct.objects.observe(
|
||||
activityStatesObject,
|
||||
'*',
|
||||
this.setActivityStates
|
||||
);
|
||||
},
|
||||
setActivityStates(activityStatesObject) {
|
||||
this.persistedActivityStates = activityStatesObject.activities;
|
||||
},
|
||||
getPlanDataAndSetConfig(mutatedObject) {
|
||||
this.getPlanData(mutatedObject);
|
||||
this.setViewFromConfig(mutatedObject.configuration);
|
||||
@ -215,6 +327,7 @@ export default {
|
||||
this.hideAll = false;
|
||||
} else {
|
||||
this.setSort();
|
||||
this.isExpanded = configuration.isExpanded;
|
||||
}
|
||||
this.listActivities();
|
||||
},
|
||||
@ -232,7 +345,6 @@ export default {
|
||||
},
|
||||
addItem(domainObject) {
|
||||
this.planObjects = [domainObject];
|
||||
this.resetPlanData();
|
||||
if (domainObject.type === 'plan') {
|
||||
this.getPlanDataAndSetConfig({
|
||||
...this.domainObject,
|
||||
@ -240,15 +352,28 @@ export default {
|
||||
sourceMap: domainObject.sourceMap
|
||||
});
|
||||
}
|
||||
//listen for changes to the plan
|
||||
if (this.stopObservingPlan) {
|
||||
this.stopObservingPlan();
|
||||
}
|
||||
this.stopObservingPlan = this.openmct.objects.observe(
|
||||
this.planObjects[0],
|
||||
'*',
|
||||
this.handlePlanChange
|
||||
);
|
||||
},
|
||||
addToComposition(telemetryObject) {
|
||||
handlePlanChange(planObject) {
|
||||
this.getPlanData(planObject);
|
||||
this.listActivities();
|
||||
},
|
||||
addToComposition(planObject) {
|
||||
if (this.planObjects.length > 0) {
|
||||
this.confirmReplacePlan(telemetryObject);
|
||||
this.confirmReplacePlan(planObject);
|
||||
} else {
|
||||
this.addItem(telemetryObject);
|
||||
this.addItem(planObject);
|
||||
}
|
||||
},
|
||||
confirmReplacePlan(telemetryObject) {
|
||||
confirmReplacePlan(planObject) {
|
||||
const dialog = this.openmct.overlays.dialog({
|
||||
iconClass: 'alert',
|
||||
message: 'This action will replace the current plan. Do you want to continue?',
|
||||
@ -259,22 +384,22 @@ export default {
|
||||
callback: () => {
|
||||
const oldTelemetryObject = this.planObjects[0];
|
||||
this.removeFromComposition(oldTelemetryObject);
|
||||
this.addItem(telemetryObject);
|
||||
this.addItem(planObject);
|
||||
dialog.dismiss();
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Cancel',
|
||||
callback: () => {
|
||||
this.removeFromComposition(telemetryObject);
|
||||
this.removeFromComposition(planObject);
|
||||
dialog.dismiss();
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
},
|
||||
removeFromComposition(telemetryObject) {
|
||||
this.composition.remove(telemetryObject);
|
||||
removeFromComposition(planObject) {
|
||||
this.composition.remove(planObject);
|
||||
},
|
||||
removeItem() {
|
||||
this.planObjects = [];
|
||||
@ -282,25 +407,28 @@ export default {
|
||||
},
|
||||
resetPlanData() {
|
||||
this.planData = {};
|
||||
this.groups = [];
|
||||
this.planActivities = [];
|
||||
this.sortedItems = [];
|
||||
},
|
||||
getPlanData(domainObject) {
|
||||
this.resetPlanData();
|
||||
this.planData = getValidatedData(domainObject);
|
||||
},
|
||||
listActivities() {
|
||||
let groups = getValidatedGroups(this.domainObject, this.planData);
|
||||
let activities = [];
|
||||
|
||||
groups.forEach((key) => {
|
||||
this.groups = getValidatedGroups(this.domainObject, this.planData);
|
||||
this.groups.forEach((key) => {
|
||||
if (this.planData[key] === undefined) {
|
||||
return;
|
||||
}
|
||||
// Create new objects so Vue 3 can detect any changes
|
||||
activities = activities.concat(JSON.parse(JSON.stringify(this.planData[key])));
|
||||
this.planActivities.push(...this.planData[key]);
|
||||
});
|
||||
// filter activities first, then sort by start time
|
||||
activities = activities.filter(this.filterActivities).sort(this.sortByStartTime);
|
||||
activities = this.applyStyles(activities);
|
||||
this.planActivities = [...activities];
|
||||
},
|
||||
|
||||
listActivities() {
|
||||
// filter activities first, then sort
|
||||
const filteredItems = this.planActivities.filter(this.filterActivities);
|
||||
const sortedItems = this.sortItems(filteredItems);
|
||||
this.sortedItems = this.applyStyles(sortedItems);
|
||||
//We need to wait for the next tick since we need the height of the row from the DOM
|
||||
this.$nextTick(this.setScrollTop);
|
||||
},
|
||||
@ -405,11 +533,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;
|
||||
@ -452,7 +582,7 @@ export default {
|
||||
},
|
||||
setScrollTop() {
|
||||
//The view isn't ready yet
|
||||
if (!this.$el.parentElement) {
|
||||
if (!this.$el.parentElement || this.isExpanded) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -530,11 +660,12 @@ export default {
|
||||
defaultDirection: direction
|
||||
};
|
||||
},
|
||||
sortByStartTime(a, b) {
|
||||
const numA = parseInt(a.start, 10);
|
||||
const numB = parseInt(b.start, 10);
|
||||
|
||||
return numA - numB;
|
||||
sortItems(activities) {
|
||||
let sortedItems = _.sortBy(activities, this.defaultSort.property);
|
||||
if (!this.defaultSort.defaultDirection) {
|
||||
sortedItems = sortedItems.reverse();
|
||||
}
|
||||
return sortedItems;
|
||||
},
|
||||
setStatus(status) {
|
||||
this.status = status;
|
||||
@ -543,6 +674,17 @@ export default {
|
||||
this.isEditing = isEditing;
|
||||
this.setViewFromConfig(this.domainObject.configuration);
|
||||
},
|
||||
sort(data) {
|
||||
const property = data.property;
|
||||
const direction = data.direction;
|
||||
|
||||
if (this.defaultSort.property === property) {
|
||||
this.defaultSort.defaultDirection = !this.defaultSort.defaultDirection;
|
||||
} else {
|
||||
this.defaultSort.property = property;
|
||||
this.defaultSort.defaultDirection = direction;
|
||||
}
|
||||
},
|
||||
setSelectionForActivity(activity, element) {
|
||||
const multiSelect = false;
|
||||
|
||||
|
||||
@ -22,3 +22,7 @@ export const SORT_ORDER_OPTIONS = [
|
||||
];
|
||||
|
||||
export const TIMELIST_TYPE = 'timelist';
|
||||
|
||||
export const CURRENT_CSS_SUFFIX = '--is-current';
|
||||
export const PAST_CSS_SUFFIX = '--is-past';
|
||||
export const FUTURE_CSS_SUFFIX = '--is-future';
|
||||
|
||||
@ -22,8 +22,8 @@
|
||||
<template>
|
||||
<li class="c-inspect-properties__row">
|
||||
<div class="c-inspect-properties__label" title="Options for future events.">{{ label }}</div>
|
||||
<div v-if="canEdit" class="c-inspect-properties__value">
|
||||
<select v-model="index" @change="updateForm('index')">
|
||||
<div class="c-inspect-properties__value">
|
||||
<select v-if="canEdit" v-model="index" @change="updateForm('index')">
|
||||
<option
|
||||
v-for="(activityOption, activityKey) in activitiesOptions"
|
||||
:key="activityKey"
|
||||
@ -32,9 +32,7 @@
|
||||
{{ activityOption }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div v-else class="c-inspect-properties__value">
|
||||
{{ activitiesOptions[index] }}
|
||||
<span v-else>{{ activitiesOptions[index] }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
></textarea>
|
||||
</div>
|
||||
<div v-else class="c-inspect-properties__value">
|
||||
<template v-if="filterValue.length > 0">
|
||||
<template v-if="filterValue && filterValue.length > 0">
|
||||
{{ filterValue }}
|
||||
</template>
|
||||
<template v-else> No filters applied </template>
|
||||
@ -69,7 +69,7 @@
|
||||
></textarea>
|
||||
</div>
|
||||
<div v-else class="c-inspect-properties__value">
|
||||
<template v-if="filterMetadataValue.length > 0">
|
||||
<template v-if="filterMetadataValue && filterMetadataValue.length > 0">
|
||||
{{ filterMetadataValue }}
|
||||
</template>
|
||||
<template v-else> No filters applied </template>
|
||||
|
||||
@ -28,7 +28,7 @@ import TimelistPropertiesView from './TimelistPropertiesView.vue';
|
||||
export default function TimeListInspectorViewProvider(openmct) {
|
||||
return {
|
||||
key: 'timelist-inspector',
|
||||
name: 'Config',
|
||||
name: 'View Properties',
|
||||
canView: function (selection) {
|
||||
if (selection.length === 0 || selection[0].length === 0) {
|
||||
return false;
|
||||
|
||||
@ -30,11 +30,26 @@
|
||||
These settings don't affect the view while editing, but will be applied after editing is
|
||||
finished.
|
||||
</div>
|
||||
<div class="c-inspect-properties__label" title="Display Style">Display Style</div>
|
||||
<div class="c-inspect-properties__value">
|
||||
<select
|
||||
v-if="canEdit"
|
||||
v-model="isExpanded"
|
||||
aria-label="Display Style"
|
||||
@change="updateExpandedView"
|
||||
>
|
||||
<option :key="'expanded-view-option-enabled'" :value="true">Expanded</option>
|
||||
<option :key="'expanded-view-option-disabled'" :value="false">Compact</option>
|
||||
</select>
|
||||
<span v-else>{{ isExpanded ? 'Expanded' : 'Compact' }}</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="c-inspect-properties__row">
|
||||
<div class="c-inspect-properties__label" title="Sort order of the timelist.">
|
||||
Sort Order
|
||||
</div>
|
||||
<div v-if="canEdit" class="c-inspect-properties__value">
|
||||
<select v-model="sortOrderIndex" @change="updateSortOrder()">
|
||||
<div class="c-inspect-properties__value">
|
||||
<select v-if="canEdit" v-model="sortOrderIndex" @change="updateSortOrder()">
|
||||
<option
|
||||
v-for="(sortOrderOption, index) in sortOrderOptions"
|
||||
:key="index"
|
||||
@ -43,9 +58,7 @@
|
||||
{{ sortOrderOption.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div v-else class="c-inspect-properties__value">
|
||||
{{ sortOrderOptions[sortOrderIndex].label }}
|
||||
<span v-else>{{ sortOrderOptions[sortOrderIndex].label }}</span>
|
||||
</div>
|
||||
</li>
|
||||
<event-properties
|
||||
@ -89,7 +102,8 @@ export default {
|
||||
sortOrderIndex: this.domainObject.configuration.sortOrderIndex,
|
||||
sortOrderOptions: SORT_ORDER_OPTIONS,
|
||||
eventTypes: EVENT_TYPES,
|
||||
isEditing: this.openmct.editor.isEditing()
|
||||
isEditing: this.openmct.editor.isEditing(),
|
||||
isExpanded: this.domainObject.configuration.isExpanded || false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -117,6 +131,9 @@ export default {
|
||||
const key = data.property;
|
||||
const value = data.value;
|
||||
this.updateProperty(key, value);
|
||||
},
|
||||
updateExpandedView() {
|
||||
this.updateProperty('isExpanded', this.isExpanded);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -235,7 +235,7 @@ describe('the plugin', function () {
|
||||
|
||||
it('displays the activity headers', () => {
|
||||
const headers = element.querySelectorAll(LIST_ITEM_BODY_CLASS);
|
||||
expect(headers.length).toEqual(4);
|
||||
expect(headers.length).toEqual(5);
|
||||
});
|
||||
|
||||
it('displays activity details', (done) => {
|
||||
@ -244,8 +244,8 @@ describe('the plugin', function () {
|
||||
nextTick(() => {
|
||||
const itemEls = element.querySelectorAll(LIST_ITEM_CLASS);
|
||||
const itemValues = itemEls[0].querySelectorAll(LIST_ITEM_VALUE_CLASS);
|
||||
expect(itemValues.length).toEqual(4);
|
||||
expect(itemValues[3].innerHTML.trim()).toEqual('Sed ut perspiciatis');
|
||||
expect(itemValues.length).toEqual(5);
|
||||
expect(itemValues[4].innerHTML.trim()).toEqual('Sed ut perspiciatis');
|
||||
expect(itemValues[0].innerHTML.trim()).toEqual(timeFormatter.format(now, TIME_FORMAT));
|
||||
expect(itemValues[1].innerHTML.trim()).toEqual(
|
||||
timeFormatter.format(twoHoursFuture, TIME_FORMAT)
|
||||
@ -380,7 +380,7 @@ describe('the plugin', function () {
|
||||
expect(itemValues[1].innerHTML.trim()).toEqual(
|
||||
timeFormatter.format(threeHoursFuture, TIME_FORMAT)
|
||||
);
|
||||
expect(itemValues[3].innerHTML.trim()).toEqual('Sed ut perspiciatis two');
|
||||
expect(itemValues[4].innerHTML.trim()).toEqual('Sed ut perspiciatis two');
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -446,7 +446,7 @@ describe('the plugin', function () {
|
||||
expect(itemValues[1].innerHTML.trim()).toEqual(
|
||||
timeFormatter.format(threeHoursFuture, TIME_FORMAT)
|
||||
);
|
||||
expect(itemValues[3].innerHTML.trim()).toEqual('Sed ut perspiciatis two');
|
||||
expect(itemValues[4].innerHTML.trim()).toEqual('Sed ut perspiciatis two');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -19,41 +19,312 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
.c-timelist {
|
||||
& .nowMarker.hasCurrent {
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
background: cyan;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.c-list-item {
|
||||
/* Time Lists */
|
||||
|
||||
td {
|
||||
$p: $interiorMarginSm;
|
||||
padding-top: $p;
|
||||
padding-bottom: $p;
|
||||
& .nowMarker.hasCurrent {
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
background: cyan;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.--is-current {
|
||||
background-color: $colorCurrentBg;
|
||||
border-top: 1px solid $colorCurrentBorder !important;
|
||||
color: $colorCurrentFg;
|
||||
}
|
||||
.c-list-item {
|
||||
/* Time Lists */
|
||||
|
||||
&.--is-future {
|
||||
background-color: $colorFutureBg;
|
||||
border-top-color: $colorFutureBorder !important;
|
||||
color: $colorFutureFg;
|
||||
}
|
||||
td {
|
||||
$p: $interiorMarginSm;
|
||||
padding-top: $p;
|
||||
padding-bottom: $p;
|
||||
}
|
||||
|
||||
&__value {
|
||||
&.--duration {
|
||||
width: 5%;
|
||||
}
|
||||
&.--is-current {
|
||||
background-color: $colorCurrentBg;
|
||||
border-top: 1px solid $colorCurrentBorder !important;
|
||||
color: $colorCurrentFgEm;
|
||||
}
|
||||
|
||||
&.--is-future {
|
||||
background-color: $colorFutureBg;
|
||||
border-top-color: $colorFutureBorder !important;
|
||||
color: $colorFutureFgEm;
|
||||
}
|
||||
|
||||
&.--is-in-progress {
|
||||
background-color: $colorInProgressBg;
|
||||
}
|
||||
|
||||
&__value {
|
||||
&.--duration {
|
||||
width: 5%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**************************************************** LARGE TIME LIST */
|
||||
@mixin styleTliEm($colorEm) {
|
||||
// Styles emphasized elements within c-tli.
|
||||
.c-tli {
|
||||
&__duration,
|
||||
&__title,
|
||||
&__time-hero-time {
|
||||
color: $colorEm;
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin showTliGraphic($wGraphic) {
|
||||
.c-tli__graphic {
|
||||
&__#{$wGraphic} {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-timelist--large {
|
||||
$textSm: 0.8em;
|
||||
$textLg: 1.3em;
|
||||
|
||||
margin-right: $interiorMargin; // fend off from scrollbar
|
||||
|
||||
> * + * {
|
||||
margin-top: $interiorMarginSm;
|
||||
}
|
||||
|
||||
.c-tli {
|
||||
// TODO: add styles for various activity statuses
|
||||
$baseBg: $colorPastBg;
|
||||
$baseFg: $colorPastFg;
|
||||
$baseFgEm: $colorPastFgEm;
|
||||
|
||||
background: $baseBg;
|
||||
color: $baseFg;
|
||||
border-radius: $basicCr;
|
||||
display: grid;
|
||||
padding: $interiorMargin;
|
||||
grid-template-columns: min-content 3fr 40px 1fr;
|
||||
grid-column-gap: $interiorMargin;
|
||||
|
||||
&[s-selected] {
|
||||
background: $colorSelectedBg !important;
|
||||
box-shadow: inset rgba($colorSelectedFg, 0.1) 0 0 0 1px;
|
||||
color: $colorSelectedFg !important;
|
||||
}
|
||||
|
||||
@include styleTliEm($baseFgEm);
|
||||
|
||||
&__activity-color {
|
||||
align-items: start;
|
||||
display: flex;
|
||||
padding-top: 1px;
|
||||
}
|
||||
|
||||
&__activity-color-swatch {
|
||||
$d: 16px;
|
||||
border-radius: 50%;
|
||||
box-shadow: rgba(black, 0.3) 0 0 2px 1px;
|
||||
width: $d;
|
||||
height: $d;
|
||||
}
|
||||
|
||||
&__title-and-bounds {
|
||||
> * + * {
|
||||
margin-top: $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
&__bounds {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
|
||||
> * {
|
||||
margin-right: $interiorMargin;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&.--has-duration {
|
||||
.c-tli__start-time {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
|
||||
&:after {
|
||||
content: $glyph-icon-play;
|
||||
font-family: symbolsfont;
|
||||
font-size: 0.7em;
|
||||
display: block;
|
||||
margin-left: $interiorMargin;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $textLg;
|
||||
}
|
||||
|
||||
&__time-hero {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
&__time-hero-context-and-time {
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
text-align: right;
|
||||
|
||||
> * + * {
|
||||
margin-left: $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
&__time-hero-context {
|
||||
font-size: $textSm;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&__time-hero-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: $textLg;
|
||||
white-space: nowrap;
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
font-family: symbolsfont;
|
||||
font-size: 0.7em;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
&.--is-countdown {
|
||||
&:before {
|
||||
content: $glyph-icon-minus;
|
||||
}
|
||||
}
|
||||
|
||||
&.--is-countup {
|
||||
&:before {
|
||||
content: $glyph-icon-plus;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__graphic {
|
||||
display: flex;
|
||||
fill: $baseFg;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
> * {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.--is-current {
|
||||
background-color: $colorCurrentBg;
|
||||
color: $colorCurrentFg;
|
||||
@include styleTliEm($colorCurrentFgEm);
|
||||
}
|
||||
|
||||
&.--is-future {
|
||||
background-color: $colorFutureBg;
|
||||
color: $colorFutureFg;
|
||||
@include styleTliEm($colorFutureFgEm);
|
||||
}
|
||||
|
||||
/************************************ ACTIVITY STATE STYLES */
|
||||
/*
|
||||
- 'In Progress' : itemState.inProgress
|
||||
- 'Running Long' : itemState.inProgress && now > end datetime
|
||||
- 'Overdue' : itemState.notStarted && now > start datetime
|
||||
- 'Incomplete' : itemState.notStarted && now > end datetime
|
||||
- 'Starts' : for Activities with now > start datetime
|
||||
- 'Occurs' : for Events with now > start datetime
|
||||
- 'Ends' : itemState.inProgress && now > start datetime && now < end datetime
|
||||
- 'Completed', 'Aborted', 'Skipped' : itemState.<that state>
|
||||
*/
|
||||
&.--is-not-started {
|
||||
|
||||
}
|
||||
|
||||
&.--is-in-progress {
|
||||
@include showTliGraphic('pie');
|
||||
background-color: $colorInProgressBg;
|
||||
color: $colorInProgressFg;
|
||||
}
|
||||
|
||||
&.--is-running-long {
|
||||
@include showTliGraphic('alert-triangle');
|
||||
background-color: $colorInProgressBg;
|
||||
color: $colorInProgressFg;
|
||||
}
|
||||
|
||||
&.--is-overdue,
|
||||
&.--is-incomplete {
|
||||
@include showTliGraphic('alert-triangle');
|
||||
|
||||
}
|
||||
|
||||
&.--is-completed {
|
||||
@include showTliGraphic('check');
|
||||
}
|
||||
|
||||
&.--is-aborted {
|
||||
@include showTliGraphic('circle-slash');
|
||||
}
|
||||
|
||||
&.--is-skipped {
|
||||
@include showTliGraphic('skipped');
|
||||
}
|
||||
|
||||
&__check {
|
||||
// Overrides?
|
||||
}
|
||||
|
||||
&__alert-triangle {
|
||||
// Overrides?
|
||||
}
|
||||
|
||||
&__circle-slash {
|
||||
// Overrides?
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-svg-progress {
|
||||
&__bg {
|
||||
fill: rgba(black, 0.2);
|
||||
}
|
||||
|
||||
&__ticks {
|
||||
fill: none;
|
||||
stroke: $colorInProgressFg;
|
||||
stroke-width: 6;
|
||||
}
|
||||
|
||||
&__progress {
|
||||
fill: $colorInProgressFgEm;
|
||||
}
|
||||
|
||||
&__sweep-hand {
|
||||
animation-name: sweep-hand;
|
||||
animation-duration: 10s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: steps(12);
|
||||
fill: $colorInProgressFg;
|
||||
transform-origin: center;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sweep-hand {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -39,7 +39,9 @@ export default class UTCTimeFormat {
|
||||
PRECISION_DEFAULT_WITH_ZULU: this.DATE_FORMAT + 'Z',
|
||||
PRECISION_SECONDS: 'YYYY-MM-DD HH:mm:ss',
|
||||
PRECISION_MINUTES: 'YYYY-MM-DD HH:mm',
|
||||
PRECISION_DAYS: 'YYYY-MM-DD'
|
||||
PRECISION_DAYS: 'YYYY-MM-DD',
|
||||
PRECISION_SECONDS_TIME_ONLY: 'HH:mm:ss',
|
||||
PRECISION_MINUTES_TIME_ONLY: 'HH:mm'
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@ -437,13 +437,22 @@ $colorGaugeLimitHigh: rgba($colorLimitRedBg, 0.4);
|
||||
$colorGaugeLimitLow: $colorGaugeLimitHigh;
|
||||
$transitionTimeGauge: 150ms; // CSS transition time used to smooth needle gauge and meter value transitions
|
||||
$marginGaugeMeterValue: 10%; // Margin between meter value bar and bounds edges
|
||||
|
||||
// Time Strip and Lists
|
||||
$colorCurrentBg: $colorTimeRealtimeBg;
|
||||
$colorCurrentFg: $colorTimeRealtimeFg;
|
||||
$colorPastBg: #444;
|
||||
$colorPastFg: pushBack($colorBodyFg, 10%);
|
||||
$colorPastFgEm: $colorBodyFg;
|
||||
$colorCurrentBg: #666;
|
||||
$colorCurrentFg: $colorBodyFg;
|
||||
$colorCurrentFgEm: $colorBodyFgEm;
|
||||
$colorCurrentBorder: $colorBodyBg;
|
||||
$colorFutureBg: #1b5263;
|
||||
$colorFutureBg: $colorPastBg;
|
||||
$colorFutureFg: $colorCurrentFg;
|
||||
$colorFutureFgEm: $colorCurrentFgEm;
|
||||
$colorFutureBorder: $colorCurrentBorder;
|
||||
$colorInProgressBg: $colorTimeRealtimeBg;
|
||||
$colorInProgressFg: $colorTimeRealtimeFgSubtle;
|
||||
$colorInProgressFgEm: $colorTimeRealtimeFg;
|
||||
$colorGanttSelectedBorder: rgba(#fff, 0.3);
|
||||
|
||||
// Tree
|
||||
|
||||
@ -454,14 +454,23 @@ $colorGaugeLimitHigh: rgba($colorLimitRedBg, 0.4);
|
||||
$colorGaugeLimitLow: $colorGaugeLimitHigh;
|
||||
$transitionTimeGauge: 150ms; // CSS transition time used to smooth needle gauge and meter value transitions
|
||||
$marginGaugeMeterValue: 10%; // Margin between meter value bar and bounds edges
|
||||
|
||||
// Time Strip and Lists
|
||||
$colorCurrentBg: $colorTimeRealtimeBg;
|
||||
$colorCurrentFg: $colorTimeRealtimeFg;
|
||||
$colorPastBg: #444;
|
||||
$colorPastFg: pushBack($colorBodyFg, 10%);
|
||||
$colorPastFgEm: $colorBodyFg;
|
||||
$colorCurrentBg: #666;
|
||||
$colorCurrentFg: $colorBodyFgEm;
|
||||
$colorCurrentFgEm: $colorBodyFgEm;
|
||||
$colorCurrentBorder: $colorBodyBg;
|
||||
$colorFutureBg: #1b5263;
|
||||
$colorFutureBg: $colorPastBg;
|
||||
$colorFutureFg: $colorCurrentFg;
|
||||
$colorFutureFgEm: $colorCurrentFgEm;
|
||||
$colorFutureBorder: $colorCurrentBorder;
|
||||
$colorGanttSelectedBorder: #fff;
|
||||
$colorInProgressBg: $colorTimeRealtimeBg;
|
||||
$colorInProgressFg: $colorTimeRealtimeFgSubtle;
|
||||
$colorInProgressFgEm: $colorTimeRealtimeFg;
|
||||
$colorGanttSelectedBorder: rgba(#fff, 0.3);
|
||||
|
||||
// Tree
|
||||
$colorTreeBg: transparent;
|
||||
|
||||
@ -176,8 +176,8 @@ $colorTimeFixedBtnBgMajor: #a09375;
|
||||
$colorTimeFixedBtnFgMajor: #fff;
|
||||
$colorTimeRealtime: #445890;
|
||||
$colorTimeRealtimeBg: $colorTimeRealtime;
|
||||
$colorTimeRealtimeFg: #eee;
|
||||
$colorTimeRealtimeFgSubtle: #88b0ff;
|
||||
$colorTimeRealtimeFg: #fff;
|
||||
$colorTimeRealtimeFgSubtle: #eee;
|
||||
$colorTimeRealtimeHov: pullForward($colorTimeRealtime, 10%);
|
||||
$colorTimeRealtimeSubtle: pushBack($colorTimeRealtime, 20%);
|
||||
$colorTimeRealtimeBtnBg: pullForward($colorTimeRealtime, 5%);
|
||||
@ -437,13 +437,22 @@ $colorGaugeLimitHigh: rgba($colorLimitRedBg, 0.2);
|
||||
$colorGaugeLimitLow: $colorGaugeLimitHigh;
|
||||
$transitionTimeGauge: 150ms; // CSS transition time used to smooth needle gauge and meter value transitions
|
||||
$marginGaugeMeterValue: 10%; // Margin between meter value bar and bounds edges
|
||||
|
||||
// Time Strip and Lists
|
||||
$colorCurrentBg: #5872bd;
|
||||
$colorCurrentFg: #eee;
|
||||
$colorCurrentBorder: #fff;
|
||||
$colorFutureBg: #c6f0ff;
|
||||
$colorFutureFg: $colorBodyFg;
|
||||
$colorPastBg: #f0f0f0;
|
||||
$colorPastFg: #999;
|
||||
$colorPastFgEm: #666;
|
||||
$colorCurrentBg: #ddd;
|
||||
$colorCurrentFg: #666;
|
||||
$colorCurrentFgEm: #000;
|
||||
$colorCurrentBorder: $colorBodyBg;
|
||||
$colorFutureBg: #eaeaea;
|
||||
$colorFutureFg: $colorCurrentFg;
|
||||
$colorFutureFgEm: $colorCurrentFgEm;
|
||||
$colorFutureBorder: $colorCurrentBorder;
|
||||
$colorInProgressBg: #b1e8ff;
|
||||
$colorInProgressFg: $colorCurrentFg;
|
||||
$colorInProgressFgEm: $colorCurrentFgEm;
|
||||
$colorGanttSelectedBorder: #fff;
|
||||
|
||||
// Tree
|
||||
|
||||
Loading…
Reference in New Issue
Block a user