mirror of
https://github.com/nasa/openmct.git
synced 2024-12-21 22:17:49 +00:00
added button and set up iteratable render of criteria
This commit is contained in:
Joel McKinnon
parent
3cc630d4c2
commit
f9ba46fe85
@ -28,27 +28,37 @@
|
||||
<span class="c-cs-button__label">Add Condition</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="condition-collection">
|
||||
<div v-for="conditionIdentifier in conditionCollection"
|
||||
:key="conditionIdentifier.key"
|
||||
class="conditionArea"
|
||||
>
|
||||
<div v-if="isEditing">
|
||||
<ConditionEdit :condition-identifier="conditionIdentifier"
|
||||
:telemetry="telemetryObjs"
|
||||
<div class="c-c condition-collection">
|
||||
<ul class="c-c__container-holder">
|
||||
<li v-for="(conditionIdentifier, index) in conditionCollection"
|
||||
:key="conditionIdentifier.key"
|
||||
>
|
||||
<div v-if="isEditing">
|
||||
<div class="c-c__drag-ghost"
|
||||
@drop.prevent="dropCondition"
|
||||
@dragenter="dragEnter"
|
||||
@dragleave="dragLeave"
|
||||
@dragover.prevent
|
||||
></div>
|
||||
<ConditionEdit :condition-identifier="conditionIdentifier"
|
||||
:current-condition-identifier="currentConditionIdentifier"
|
||||
:condition-index="index"
|
||||
:telemetry="telemetryObjs"
|
||||
@update-current-condition="updateCurrentCondition"
|
||||
@remove-condition="removeCondition"
|
||||
@clone-condition="cloneCondition"
|
||||
@condition-result-updated="handleConditionResult"
|
||||
@set-move-index="setMoveIndex"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<Condition :condition-identifier="conditionIdentifier"
|
||||
:current-condition-identifier="currentConditionIdentifier"
|
||||
@update-current-condition="updateCurrentCondition"
|
||||
@remove-condition="removeCondition"
|
||||
@condition-result-updated="handleConditionResult"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<Condition :condition-identifier="conditionIdentifier"
|
||||
@condition-result-updated="handleConditionResult"
|
||||
:current-condition-identifier="currentConditionIdentifier"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -59,6 +69,7 @@ import Condition from '../../condition/components/Condition.vue';
|
||||
import ConditionEdit from '../../condition/components/ConditionEdit.vue';
|
||||
import uuid from 'uuid';
|
||||
|
||||
|
||||
export default {
|
||||
inject: ['openmct', 'domainObject'],
|
||||
components: {
|
||||
@ -75,6 +86,7 @@ export default {
|
||||
conditionCollection: [],
|
||||
conditions: [],
|
||||
currentConditionIdentifier: this.currentConditionIdentifier || {},
|
||||
moveIndex: null,
|
||||
telemetryObjs: this.telemetryObjs
|
||||
};
|
||||
},
|
||||
@ -97,6 +109,50 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setMoveIndex(index) {
|
||||
this.moveIndex = index;
|
||||
},
|
||||
dropCondition(e) {
|
||||
let targetIndex = Array.from(document.querySelectorAll('.c-c__drag-ghost')).indexOf(e.target);
|
||||
if (targetIndex > this.moveIndex) { targetIndex-- }
|
||||
const oldIndexArr = Object.keys(this.conditionCollection);
|
||||
const move = function (arr, old_index, new_index) {
|
||||
while (old_index < 0) {
|
||||
old_index += arr.length;
|
||||
}
|
||||
while (new_index < 0) {
|
||||
new_index += arr.length;
|
||||
}
|
||||
if (new_index >= arr.length) {
|
||||
var k = new_index - arr.length;
|
||||
while ((k--) + 1) {
|
||||
arr.push(undefined);
|
||||
}
|
||||
}
|
||||
arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
|
||||
return arr;
|
||||
}
|
||||
const newIndexArr = move(oldIndexArr, this.moveIndex, targetIndex);
|
||||
const reorderPlan = [];
|
||||
|
||||
for (let i = 0; i < oldIndexArr.length; i++) {
|
||||
reorderPlan.push({oldIndex: Number(newIndexArr[i]), newIndex: i});
|
||||
}
|
||||
|
||||
this.reorder(reorderPlan);
|
||||
|
||||
e.target.classList.remove("dragging");
|
||||
},
|
||||
dragEnter(e) {
|
||||
let targetIndex = Array.from(document.querySelectorAll('.c-c__drag-ghost')).indexOf(e.target);
|
||||
|
||||
if (targetIndex > this.moveIndex) { targetIndex-- }
|
||||
if (this.moveIndex === targetIndex) { return }
|
||||
e.target.classList.add("dragging");
|
||||
},
|
||||
dragLeave(e) {
|
||||
e.target.classList.remove("dragging");
|
||||
},
|
||||
handleConditionResult(args) {
|
||||
let idAsString = this.openmct.objects.makeKeyString(args.id);
|
||||
this.conditionResults[idAsString] = args.result;
|
||||
@ -127,34 +183,49 @@ export default {
|
||||
this.telemetryObjs.splice(index, 1);
|
||||
}
|
||||
},
|
||||
addCondition(event, isDefault) {
|
||||
let conditionDO = this.getConditionDomainObject(!!isDefault);
|
||||
/*
|
||||
Adds a condition to list via programatic creation of default for initial list, manual
|
||||
creation via Add Condition button, or duplication via button in title bar of condition.
|
||||
Params:
|
||||
event: always null,
|
||||
isDefault (boolean): true if conditionList is empty
|
||||
isClone (boolean): true if duplicating a condition
|
||||
definition (string): definition property of condition being duplicated with new name
|
||||
index (number): index of condition being duplicated
|
||||
*/
|
||||
addCondition(event, isDefault, isClone, definition, index) {
|
||||
let conditionDO = this.getConditionDomainObject(!!isDefault, isClone, definition);
|
||||
//persist the condition DO so that we can do an openmct.objects.get on it and only persist the identifier in the conditionCollection of conditionSet
|
||||
this.openmct.objects.mutate(conditionDO, 'created', new Date());
|
||||
this.conditionCollection.unshift(conditionDO.identifier);
|
||||
if (!isClone) {
|
||||
this.conditionCollection.unshift(conditionDO.identifier);
|
||||
} else {
|
||||
this.conditionCollection.splice(index + 1, 0, conditionDO.identifier);
|
||||
}
|
||||
this.persist();
|
||||
},
|
||||
updateCurrentCondition(identifier) {
|
||||
this.currentConditionIdentifier = identifier;
|
||||
},
|
||||
getConditionDomainObject(isDefault) {
|
||||
getConditionDomainObject(isDefault, isClone, definition) {
|
||||
const definitionTemplate = {
|
||||
name: isDefault ? 'Default' : 'Unnamed Condition',
|
||||
output: 'false',
|
||||
trigger: 'any',
|
||||
criteria: isDefault ? [] : [{
|
||||
operation: '',
|
||||
input: '',
|
||||
metaDataKey: '',
|
||||
key: ''
|
||||
}]
|
||||
};
|
||||
let conditionObj = {
|
||||
isDefault: isDefault,
|
||||
identifier: {
|
||||
namespace: this.domainObject.identifier.namespace,
|
||||
key: uuid()
|
||||
},
|
||||
definition: {
|
||||
name: isDefault ? 'Default' : 'Unnamed Condition',
|
||||
output: 'false',
|
||||
trigger: 'any',
|
||||
criteria: isDefault ? [] : [{
|
||||
operation: '',
|
||||
input: '',
|
||||
metaDataKey: '',
|
||||
key: ''
|
||||
}]
|
||||
},
|
||||
definition: isClone ? definition: definitionTemplate,
|
||||
summary: 'summary description'
|
||||
};
|
||||
let conditionDOKeyString = this.openmct.objects.makeKeyString(conditionObj.identifier);
|
||||
@ -178,10 +249,17 @@ export default {
|
||||
this.updateCurrentConditionId();
|
||||
},
|
||||
reorder(reorderPlan) {
|
||||
let oldConditions = this.conditionCollection.slice();
|
||||
let oldConditions = Array.from(this.conditionCollection);
|
||||
reorderPlan.forEach((reorderEvent) => {
|
||||
this.$set(this.conditionCollection, reorderEvent.newIndex, oldConditions[reorderEvent.oldIndex]);
|
||||
});
|
||||
this.persist();
|
||||
},
|
||||
cloneCondition(condition) {
|
||||
this.openmct.objects.get(condition.identifier).then((obj) => {
|
||||
obj.definition.name = 'Copy of ' + obj.definition.name;
|
||||
this.addCondition(null, false, true, obj.definition, condition.index);
|
||||
});
|
||||
},
|
||||
persist() {
|
||||
this.openmct.objects.mutate(this.domainObject, 'configuration.conditionCollection', this.conditionCollection);
|
||||
@ -189,3 +267,4 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,18 +1,21 @@
|
||||
<template>
|
||||
<div v-if="condition"
|
||||
class="c-cs-editui__conditions"
|
||||
class="c-c-editui__conditions c-c-container__container c-c__drag-wrapper"
|
||||
:class="['widget-condition', { 'widget-condition--current': currentConditionIdentifier && (currentConditionIdentifier.key === conditionIdentifier.key) }]"
|
||||
:data-condition-index="conditionIndex"
|
||||
:draggable="!condition.isDefault"
|
||||
@dragstart="dragStart"
|
||||
@dragover.stop
|
||||
>
|
||||
<div class="title-bar">
|
||||
<span
|
||||
class="c-c__menu-hamburger"
|
||||
:class="{ 'is-enabled': !condition.isDefault }"
|
||||
@click="expanded = !condition.expanded"
|
||||
></span>
|
||||
<span
|
||||
class="is-enabled flex-elem"
|
||||
:class="['c-c__disclosure-triangle', { 'c-c__disclosure-triangle--expanded': expanded }]"
|
||||
@click="expanded = !condition.expanded"
|
||||
@click="expanded = !expanded"
|
||||
></span>
|
||||
<div class="condition-summary">
|
||||
<span class="condition-name">{{ condition.definition.name }}</span>
|
||||
@ -20,6 +23,7 @@
|
||||
</div>
|
||||
<span v-if="!condition.isDefault"
|
||||
class="is-enabled c-c__duplicate"
|
||||
@click="cloneCondition"
|
||||
></span>
|
||||
<span v-if="!condition.isDefault"
|
||||
class="is-enabled c-c__trash"
|
||||
@ -27,20 +31,20 @@
|
||||
></span>
|
||||
</div>
|
||||
<div v-if="expanded"
|
||||
class="condition-config-edit widget-rule-content c-sw-editui__rules-wrapper holder widget-rules-wrapper flex-elem expanded"
|
||||
class="condition-config-edit widget-condition-content c-sw-editui__conditions-wrapper holder widget-conditions-wrapper flex-elem expanded"
|
||||
>
|
||||
<div id="ruleArea"
|
||||
class="c-sw-editui__rules widget-rules"
|
||||
<div id="conditionArea"
|
||||
class="c-c-editui__condition widget-conditions"
|
||||
>
|
||||
<div class="c-sw-rule">
|
||||
<div class="c-sw-rule__ui l-compact-form l-widget-rule has-local-controls">
|
||||
<div class="c-c-condition">
|
||||
<div class="c-c-condition__ui l-compact-form l-widget-condition has-local-controls">
|
||||
<div>
|
||||
<ul class="t-widget-rule-config">
|
||||
<ul class="t-widget-condition-config">
|
||||
<li>
|
||||
<label>Condition Name</label>
|
||||
<span class="controls">
|
||||
<input v-model="condition.definition.name"
|
||||
class="t-rule-name-input"
|
||||
class="t-condition-name-input"
|
||||
type="text"
|
||||
>
|
||||
</span>
|
||||
@ -61,16 +65,16 @@
|
||||
</select>
|
||||
<input v-if="selectedOutputKey === outputOptions[2].key"
|
||||
v-model="condition.definition.output"
|
||||
class="t-rule-name-input"
|
||||
class="t-condition-name-input"
|
||||
type="text"
|
||||
>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div v-if="!condition.isDefault"
|
||||
class="widget-rule-content expanded"
|
||||
class="widget-condition-content expanded"
|
||||
>
|
||||
<ul class="t-widget-rule-config">
|
||||
<ul class="t-widget-condition-config">
|
||||
<li class="has-local-controls t-condition">
|
||||
<label>Match when</label>
|
||||
<span class="controls">
|
||||
@ -81,11 +85,13 @@
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="t-widget-rule-config">
|
||||
<li v-if="telemetry.length"
|
||||
<ul v-if="telemetry.length"
|
||||
class="t-widget-condition-config">
|
||||
<li v-for="(criteria, index) in condition.definition.criteria"
|
||||
:key="criteria.key.key"
|
||||
class="has-local-controls t-condition"
|
||||
>
|
||||
<label>when</label>
|
||||
<label>{{ index === 0 ? 'when' : 'and when' }}</label>
|
||||
<span class="t-configuration">
|
||||
<span class="controls">
|
||||
<select v-model="selectedTelemetryKey"
|
||||
@ -124,14 +130,23 @@
|
||||
</option>
|
||||
</select>
|
||||
<input v-if="comparisonValueField"
|
||||
class="t-rule-name-input"
|
||||
type="text"
|
||||
v-model="operationValue"
|
||||
class="t-condition-name-input"
|
||||
type="text"
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="holder c-c-button-wrapper align-left">
|
||||
<span class="c-c-label-spacer"></span>
|
||||
<button
|
||||
class="c-c-button c-c-button--minor add-criteria-button"
|
||||
@click="addCriteria"
|
||||
>
|
||||
<span class="c-c-button__label">Add Criteria</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -144,6 +159,7 @@
|
||||
<script>
|
||||
import { OPERATIONS } from '../utils/operations';
|
||||
import ConditionClass from "@/plugins/condition/Condition";
|
||||
import uuid from 'uuid';
|
||||
|
||||
export default {
|
||||
inject: ['openmct', 'domainObject'],
|
||||
@ -156,6 +172,10 @@ export default {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
conditionIndex: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
telemetry: {
|
||||
type: Array,
|
||||
required: true,
|
||||
@ -201,6 +221,8 @@ export default {
|
||||
this.condition = obj;
|
||||
this.initialize();
|
||||
}));
|
||||
|
||||
this.dragGhost = document.getElementById('js-c-drag-ghost');
|
||||
},
|
||||
updated() {
|
||||
//validate telemetry exists, update criteria as needed
|
||||
@ -208,6 +230,22 @@ export default {
|
||||
this.persist();
|
||||
},
|
||||
methods: {
|
||||
addCriteria() {
|
||||
const criteriaObject = {
|
||||
operation: '',
|
||||
input: '',
|
||||
metaDataKey: '',
|
||||
key: {
|
||||
namespace: '',
|
||||
key: uuid()
|
||||
}
|
||||
}
|
||||
this.condition.definition.criteria.push(criteriaObject);
|
||||
console.log('this.condition.definition.criteria', this.condition.definition.criteria);
|
||||
},
|
||||
dragStart(e) {
|
||||
this.$emit('set-move-index', Number(e.target.getAttribute('data-condition-index')));
|
||||
},
|
||||
initialize() {
|
||||
this.setOutput();
|
||||
this.setOperation();
|
||||
@ -246,6 +284,12 @@ export default {
|
||||
removeCondition(ev) {
|
||||
this.$emit('remove-condition', this.conditionIdentifier);
|
||||
},
|
||||
cloneCondition(ev) {
|
||||
this.$emit('clone-condition', {
|
||||
identifier: this.conditionIdentifier,
|
||||
index: Number(ev.target.closest('.widget-condition').getAttribute('data-condition-index'))
|
||||
});
|
||||
},
|
||||
setOutput() {
|
||||
if (this.condition.definition.output !== 'false' && this.condition.definition.output !== 'true') {
|
||||
this.selectedOutputKey = this.outputOptions[2].key;
|
||||
@ -343,3 +387,4 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -29,7 +29,6 @@ section {
|
||||
|
||||
.c-cs-ui__label {
|
||||
color: #333;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.c-cs__ui_content .help {
|
||||
@ -85,7 +84,7 @@ section {
|
||||
.c-cs-button[class*='is-active'],
|
||||
.c-cs-button--menu[class*="--major"],
|
||||
.c-cs-button--menu[class*='is-active'] {
|
||||
border: solid 1.5px #0B427C;
|
||||
border: solid 1px #0B427C;
|
||||
background-color: #4778A3;
|
||||
padding: 0.2em 0.6em;
|
||||
margin: 0.4em;
|
||||
@ -145,3 +144,4 @@ section {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
|
||||
|
||||
.widget-condition {
|
||||
background-color: #eee;
|
||||
margin: 0 0 0.6em;
|
||||
margin: 0 0 5px;
|
||||
border-radius: 3px;
|
||||
|
||||
&--current {
|
||||
@ -11,6 +9,35 @@
|
||||
|
||||
}
|
||||
|
||||
.c-c-editui__conditions.widget-condition {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c-c-button-wrapper {
|
||||
border-top: solid 1px #ccc;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.c-c-label-spacer {
|
||||
display: inline-block;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.c-c-button[class*="--minor"],
|
||||
.c-c-button[class*='is-active'],
|
||||
.c-c-button--menu[class*="--minor"],
|
||||
.c-c-button--menu[class*='is-active'] {
|
||||
border: solid 1px #666;
|
||||
background-color: #eee;
|
||||
padding: 0.1em 0.4em;
|
||||
margin: 0.4em;
|
||||
font-weight: normal;
|
||||
color: #666;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.title-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -53,7 +80,7 @@
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.l-widget-rule {
|
||||
.l-widget-condition {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@ -61,11 +88,11 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.widget-rule-content.expanded {
|
||||
.widget-condition-content.expanded {
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
.widget-rule-content.expanded ul {
|
||||
.widget-condition-content.expanded ul {
|
||||
border-top: solid 1px #ccc;
|
||||
padding: 2px;
|
||||
}
|
||||
@ -152,3 +179,15 @@
|
||||
content: $glyph-icon-trash;
|
||||
}
|
||||
}
|
||||
|
||||
.c-c__drag-ghost {
|
||||
width: 100%;
|
||||
min-height: 5px;
|
||||
&.dragging {
|
||||
min-height: 20px;
|
||||
border: solid 1px blue;
|
||||
background-color: lightblue;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user