mirror of
https://github.com/nasa/openmct.git
synced 2024-12-19 21:27:52 +00:00
ff3a20e446
* refactor: convert Type API to ES6 module - Another AMD module bites the dust 🧹 * feat: add initial configurable plan type - Name change TBD * feat: add `clipActivityNames` property - refactor: initialize data to `null` * refactor: general code cleanup * feat(WIP): name clipping via clipPath elements * feat: compose a Gantt Chart using a Plan - Allows Plans to be dragged into Gantt Charts (name tentative) to create a configurable Activity View - Clip/Unclip activity names by editing domainObject property * feat: replace Plan if another is dragged in - SImilar to Gauges or Scatter Plots, launch a confirmation dialog to replace the existing Plan with another, if another Plan is dragged into the chart. * test: fix tests, add basic tests for gantt * tes(e2e): fix plan test * docs: add TODO * refactor: clean up more string literals * style: remove `rx`, increase min width - round widths to nearest integer * refactor: extract timeline creation logic - extracts the logic for creating the timeline into its own component, `ActivityTimeline.vue`. This will save us a lot of re-renders, as we were manually creating elements / clearing them on each tick * style: fix text y-pos and don't round * fix: make activities clickable again * docs: add copyright docs * feat: swimlane visibility - configure plan view from inspector fix: update plans when file changes - fix gantt chart display in time strips - code cleanup * fix: gantt chart embed in time strip * remove viewBox for now * fix: make `clipPath` ids more unique * refactor: more code cleanup * refactor: more code cleanup * test: fix existing Plan unit tests * refactor: rename variables * fix: respond to code review comments - Move config manipulation to PlanViewConfiguration.js/.vue - Variable renames, code refactoring * fix: unique, reproducible clipPathIds * fix: only mutate swimlaneVisibility once on init * fix: really make clipPathId unique this time * refactor: use default config * Closes #6113 - Refined CSS class naming and application. - Set cursor to pointer for Activity elements. - Added <title> node to Activity elements. - Styling for selected Activities. - Better Inspector tab name. * fix: make Plan creatability configurable and false by default * test: fix existing tests and add a couple new ones * Closes #6113 - Now uses SVG <symbol> instead of rect within Activity element. - Passes in `rowHeight` as a prop from Plan.vue. - SWIMLANE_PADDING const added and used to create margin at top and bottom edges of swimlanes. - Refined styling for selected activities. - New `$colorGanttSelectedBorder` theme constant. - Smoke tested in Espresso and Snow themes. * fix: default swimlaneWidth to clientWidth * test: fix test * feat: display selected activity name as header * fix: remove redundant listener * refactor: move `examplePlans.js` into `test-data/` * docs: remove copyright header * refactor: move `helper.js` into `helper/` * refactor: `helper.js` -> `planningUtils.js` * fix: update pathing * test: add tests for gantt/plan - add visual tests for gantt / plan - add test for clicking a single activity and verifying its contents in the inspector --------- Co-authored-by: Charles Hacskaylo <charlesh88@gmail.com>
206 lines
8.5 KiB
HTML
206 lines
8.5 KiB
HTML
<!--
|
|
Open MCT, Copyright (c) 2014-2023, 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.
|
|
-->
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<title></title>
|
|
<script src="dist/openmct.js"></script>
|
|
<link rel="icon" type="image/png" href="dist/favicons/favicon-96x96.png" sizes="96x96" type="image/x-icon">
|
|
<link rel="icon" type="image/png" href="dist/favicons/favicon-32x32.png" sizes="32x32" type="image/x-icon">
|
|
<link rel="icon" type="image/png" href="dist/favicons/favicon-16x16.png" sizes="16x16" type="image/x-icon">
|
|
<style type="text/css">
|
|
@keyframes splash-spinner {
|
|
0% {
|
|
transform: translate(-50%, -50%) rotate(0deg); }
|
|
100% {
|
|
transform: translate(-50%, -50%) rotate(360deg); } }
|
|
|
|
#splash-screen {
|
|
background-color: black;
|
|
position: absolute;
|
|
top: 0; right: 0; bottom: 0; left: 0;
|
|
z-index: 10000;
|
|
}
|
|
|
|
#splash-screen:before {
|
|
animation-name: splash-spinner;
|
|
animation-duration: 0.5s;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: linear;
|
|
border-radius: 50%;
|
|
border-color: rgba(255,255,255,0.25);
|
|
border-top-color: white;
|
|
border-style: solid;
|
|
border-width: 10px;
|
|
content: '';
|
|
display: block;
|
|
opacity: 0.25;
|
|
position: absolute;
|
|
left: 50%; top: 50%;
|
|
height: 100px; width: 100px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
</body>
|
|
<script>
|
|
const THIRTY_SECONDS = 30 * 1000;
|
|
const ONE_MINUTE = THIRTY_SECONDS * 2;
|
|
const FIVE_MINUTES = ONE_MINUTE * 5;
|
|
const FIFTEEN_MINUTES = FIVE_MINUTES * 3;
|
|
const THIRTY_MINUTES = FIFTEEN_MINUTES * 2;
|
|
const ONE_HOUR = THIRTY_MINUTES * 2;
|
|
const TWO_HOURS = ONE_HOUR * 2;
|
|
const ONE_DAY = ONE_HOUR * 24;
|
|
|
|
openmct.install(openmct.plugins.LocalStorage());
|
|
|
|
openmct.install(openmct.plugins.example.Generator());
|
|
openmct.install(openmct.plugins.example.EventGeneratorPlugin());
|
|
openmct.install(openmct.plugins.example.ExampleImagery());
|
|
openmct.install(openmct.plugins.example.ExampleTags());
|
|
|
|
openmct.install(openmct.plugins.Espresso());
|
|
openmct.install(openmct.plugins.MyItems());
|
|
openmct.install(openmct.plugins.PlanLayout({
|
|
creatable: true
|
|
}));
|
|
openmct.install(openmct.plugins.Timeline());
|
|
openmct.install(openmct.plugins.Hyperlink());
|
|
openmct.install(openmct.plugins.UTCTimeSystem());
|
|
openmct.install(openmct.plugins.AutoflowView({
|
|
type: "telemetry.panel"
|
|
}));
|
|
openmct.install(openmct.plugins.DisplayLayout({
|
|
showAsView: ['summary-widget', 'example.imagery']
|
|
}));
|
|
openmct.install(openmct.plugins.Conductor({
|
|
menuOptions: [
|
|
{
|
|
name: "Fixed",
|
|
timeSystem: 'utc',
|
|
bounds: {
|
|
start: Date.now() - THIRTY_MINUTES,
|
|
end: Date.now()
|
|
},
|
|
// commonly used bounds can be stored in history
|
|
// bounds (start and end) can accept either a milliseconds number
|
|
// or a callback function returning a milliseconds number
|
|
// a function is useful for invoking Date.now() at exact moment of preset selection
|
|
presets: [
|
|
{
|
|
label: 'Last Day',
|
|
bounds: {
|
|
start: () => Date.now() - ONE_DAY,
|
|
end: () => Date.now()
|
|
}
|
|
},
|
|
{
|
|
label: 'Last 2 hours',
|
|
bounds: {
|
|
start: () => Date.now() - TWO_HOURS,
|
|
end: () => Date.now()
|
|
}
|
|
},
|
|
{
|
|
label: 'Last hour',
|
|
bounds: {
|
|
start: () => Date.now() - ONE_HOUR,
|
|
end: () => Date.now()
|
|
}
|
|
}
|
|
],
|
|
// maximum recent bounds to retain in conductor history
|
|
records: 10
|
|
// maximum duration between start and end bounds
|
|
// for utc-based time systems this is in milliseconds
|
|
// limit: ONE_DAY
|
|
},
|
|
{
|
|
name: "Realtime",
|
|
timeSystem: 'utc',
|
|
clock: 'local',
|
|
clockOffsets: {
|
|
start: - THIRTY_MINUTES,
|
|
end: THIRTY_SECONDS
|
|
},
|
|
presets: [
|
|
{
|
|
label: '1 Hour',
|
|
bounds: {
|
|
start: - ONE_HOUR,
|
|
end: THIRTY_SECONDS
|
|
}
|
|
},
|
|
{
|
|
label: '30 Minutes',
|
|
bounds: {
|
|
start: - THIRTY_MINUTES,
|
|
end: THIRTY_SECONDS
|
|
}
|
|
},
|
|
{
|
|
label: '15 Minutes',
|
|
bounds: {
|
|
start: - FIFTEEN_MINUTES,
|
|
end: THIRTY_SECONDS
|
|
}
|
|
},
|
|
{
|
|
label: '5 Minutes',
|
|
bounds: {
|
|
start: - FIVE_MINUTES,
|
|
end: THIRTY_SECONDS
|
|
}
|
|
},
|
|
{
|
|
label: '1 Minute',
|
|
bounds: {
|
|
start: - ONE_MINUTE,
|
|
end: THIRTY_SECONDS
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}));
|
|
openmct.install(openmct.plugins.SummaryWidget());
|
|
openmct.install(openmct.plugins.Notebook());
|
|
openmct.install(openmct.plugins.LADTable());
|
|
openmct.install(openmct.plugins.Filters(['table', 'telemetry.plot.overlay']));
|
|
openmct.install(openmct.plugins.ObjectMigration());
|
|
openmct.install(openmct.plugins.ClearData(
|
|
['table', 'telemetry.plot.overlay', 'telemetry.plot.stacked', 'example.imagery'],
|
|
{ indicator: true }
|
|
));
|
|
openmct.install(openmct.plugins.Clock({ enableClockIndicator: true }));
|
|
openmct.install(openmct.plugins.Timer());
|
|
openmct.install(openmct.plugins.Timelist());
|
|
openmct.install(openmct.plugins.BarChart());
|
|
openmct.install(openmct.plugins.ScatterPlot());
|
|
openmct.start();
|
|
</script>
|
|
</html>
|