WIP: separating criterion level logic to its own component

This commit is contained in:
Joel McKinnon 2020-02-11 10:28:59 -08:00
parent 8db6f8f633
commit 1f2b5ec5c8
2 changed files with 102 additions and 140 deletions

View File

@ -89,61 +89,14 @@
<ul v-if="telemetry.length"
class="t-widget-condition-config"
>
<Criteria v-for="(criteria, index) in domainObject.configuration.criteria"
:key="criteria.identifier.key"
<Criterion v-for="(criterion, index) in domainObject.configuration.criteria"
:key="index"
:telemetry="telemetry"
:criteria="criteria"
:criterion="criterion"
:condition="domainObject"
:index="index"
/>
</ul>
<!-- <ul v-if="telemetry.length"
class="t-widget-condition-config"
>
<li v-for="(criteria, index) in domainObject.configuration.criteria"
:key="criteria.identifier.key"
class="has-local-controls t-condition"
>
<label>{{ index === 0 ? 'when' : 'and when' }}</label>
<span class="t-configuration">
<span class="controls">
<select v-model="selectedTelemetryObject">
<option value="">- Select Telemetry -</option>
<option v-for="telemetryOption in telemetryObj"
:key="telemetryOption.identifier.key"
:value="telemetryOption.identifier"
>
{{ telemetryOption.name }}
</option>
</select>
</span>
<span class="controls">
<select v-model="selectedFieldObject">
<option value="">- Select Field -</option>
<option v-for="option in telemetryMetadata[currentCriteria.identifier]"
:key="option.key"
:value="option.key"
>
{{ option.name }}
</option>
</select>
</span>
<span class="controls">
<select v-model="selectedOperationObject">
<option value="">- Select Comparison -</option>
<option v-for="option in operations"
:key="option.name"
:value="option.name"
>
{{ option.text }}
</option>
</select>
<input 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
@ -187,13 +140,13 @@
<script>
// import { OPERATIONS } from '../utils/operations';
import ConditionClass from "@/plugins/condition/Condition";
import Criteria from '../../condition/components/Criteria.vue';
import Criterion from '../../condition/components/Criterion.vue';
import uuid from 'uuid';
export default {
inject: ['openmct', 'domainObject'],
components: {
Criteria
Criterion
},
props: {
conditionIdentifier: {
@ -243,6 +196,13 @@ export default {
this.persist();
},
methods: {
initialize() {
if (!this.domainObject.isDefault) {
this.setOutput();
this.conditionClass = new ConditionClass(this.domainObject, this.openmct);
this.conditionClass.on('conditionResultUpdated', this.handleConditionResult.bind(this));
}
},
addCriteria() {
const criteriaObject = {
operation: '',
@ -260,13 +220,6 @@ export default {
dragStart(e) {
this.$emit('set-move-index', Number(e.target.getAttribute('data-condition-index')));
},
initialize() {
if (!this.domainObject.isDefault) {
this.setOutput();
this.conditionClass = new ConditionClass(this.domainObject, this.openmct);
this.conditionClass.on('conditionResultUpdated', this.handleConditionResult.bind(this));
}
},
destroy() {
// this.conditionClass.off('conditionResultUpdated', this.handleConditionResult.bind(this));
// if (this.conditionClass && typeof this.conditionClass.destroy === 'function') {
@ -310,58 +263,38 @@ export default {
}
}
},
// setOperationObject(criteriaId) {
// if (this.selectedFieldObject[criteriaId] !== undefined) {
// if (this.operationValue[criteriaId] !== undefined) {
// for (let i=0, ii=this.operations.length; i < ii; i++) {
// if (this.currentCriteria.operation === this.operations[i].name) {
// this.selectedFieldObject[criteriaId] = this.operations[i].name;
// this.comparisonInputValue[criteriaId] = this.operations[i].inputCount > 0;
// if (this.comparisonInputValue[criteriaId]) {
// this.operationValue[criteriaId] = this.currentCriteria.input[0];
// }
// }
// }
// }
// }
// },
// updateTelemetryObjects(criteriaId) {
// if (this.hasTelemetry(criteriaId)) {
// this.openmct.objects.get(criteriaId).then((obj) => {
// this.telemetryMetadata[criteriaId] = this.openmct.telemetry.getMetadata(obj).values();
// this.selectedFieldObject[criteriaId] = this.getTelemetryMetadataKey(criteriaId);
// this.selectedTelemetryObject[criteriaId] = this.getTelemetryObject(criteriaId);
// // console.log('this.telemetryMetadata[criteriaId]', this.telemetryMetadata[criteriaId])
// // console.log('this.selectedMetadataKey[criteriaId]', this.selectedMetadataKey[criteriaId])
// console.log('this.selectedTelemetryObject[criteriaId]', this.selectedTelemetryObject[criteriaId])
// });
// }
// },
// getTelemetryMetadataKey(criteriaId) {
// let index = -1;
// if (criteriaId) {
// index = _.findIndex(this.telemetryMetadata[criteriaId], (metadata) => {
// return metadata.key === this.currentCriteria.metadataKey;
// });
// }
// return this.telemetryMetadata[criteriaId].length && index > -1 ? this.telemetryMetadata[criteriaId][index].key : '- Select Telemetry -';
// },
// getTelemetryObject(criteriaId) {
// let index = -1;
// if (this.currentCriteria && criteriaId) {
// let conditionKey = this.openmct.objects.makeKeyString(criteriaId);
// index = _.findIndex(this.telemetry, (obj) => {
// let key = this.openmct.objects.makeKeyString(obj.identifier)
// return key === conditionKey
// });
// }
// return this.telemetry.length && index > -1 ? this.telemetry[index] : '';
// },
// hasTelemetry(criteriaId) {
// // TODO: check parent domainObject.composition.hasTelemetry
// return this.currentCriteria && criteriaId;
// },
updateTelemetryObjects(criteriaId) {
if (this.hasTelemetry(criteriaId)) {
this.openmct.objects.get(criteriaId).then((obj) => {
this.telemetryMetadata[criteriaId] = this.openmct.telemetry.getMetadata(obj).values();
this.selectedFieldObject[criteriaId] = this.getTelemetryMetadataKey(criteriaId);
this.selectedTelemetryObject[criteriaId] = this.getTelemetryObject(criteriaId);
// console.log('this.telemetryMetadata[criteriaId]', this.telemetryMetadata[criteriaId])
// console.log('this.selectedMetadataKey[criteriaId]', this.selectedMetadataKey[criteriaId])
console.log('this.selectedTelemetryObject[criteriaId]', this.selectedTelemetryObject[criteriaId])
});
}
},
getTelemetryMetadataKey(criteriaId) {
let index = -1;
if (criteriaId) {
index = _.findIndex(this.telemetryMetadata[criteriaId], (metadata) => {
return metadata.key === this.currentCriteria.metadataKey;
});
}
return this.telemetryMetadata[criteriaId].length && index > -1 ? this.telemetryMetadata[criteriaId][index].key : '- Select Telemetry -';
},
getTelemetryObject(criteriaId) {
let index = -1;
if (this.currentCriteria && criteriaId) {
let conditionKey = this.openmct.objects.makeKeyString(criteriaId);
index = _.findIndex(this.telemetry, (obj) => {
let key = this.openmct.objects.makeKeyString(obj.identifier)
return key === conditionKey
});
}
return this.telemetry.length && index > -1 ? this.telemetry[index] : '';
},
// updateConditionCriteria(criteriaId) {
// if (this.domainObject.configuration.criteria.length) {
// let criterion = this.domainObject.configuration.criteria[0];
@ -427,6 +360,10 @@ export default {
updateCurrentCondition() {
this.$emit('updateCurrentCondition', this.conditionIdentifier);
},
hasTelemetry(identifier) {
// TODO: check parent domainObject.composition.hasTelemetry
return this.currentCriteria && identifier;
}
}
}

View File

@ -5,7 +5,7 @@
<span class="controls">
<select v-model="selectedTelemetryObject">
<option value="">- Select Telemetry -</option>
<option v-for="telemetryOption in telemetryObj"
<option v-for="telemetryOption in telemetry"
:key="telemetryOption.identifier.key"
:value="telemetryOption.identifier"
>
@ -16,7 +16,7 @@
<span class="controls">
<select v-model="selectedFieldObject">
<option value="">- Select Field -</option>
<option v-for="option in telemetryMetadata[currentCriteria.identifier]"
<option v-for="option in telemetryMetadata"
:key="option.key"
:value="option.key"
>
@ -47,17 +47,28 @@
import { OPERATIONS } from '../utils/operations';
export default {
inject: ["openmct", "domainObject"],
inject: ['openmct'],
props: {
criterion: {
type: Object,
required: true
},
telemetry: {
type: Array,
required: true,
default: () => []
},
index: {
type: Number,
required: true
},
condition: {
type: Object,
required: true
}
},
data() {
return {
telemetryObj: this.telemetry,
telemetryMetadata: {},
operations: OPERATIONS,
selectedTelemetryObject: {},
@ -68,51 +79,65 @@ export default {
}
},
mounted() {
this.openmct.objects.get(this.conditionIdentifier).then((domainObject => {
this.domainObject = domainObject;
console.log('criterion', this.criterion);
console.log('condition', this.condition);
this.initialize();
}));
},
updated() {
this.validate();
},
computed: {
// this.validate();
},
methods: {
initialize() {
// 1. need to get values to appear in select menus and determine what should be selected
this.setTelemetrySelects()
// 2. for operation menu, show input unless isDefined, isUndefined are selected
// this.setOperationInput()
},
setOperationObject(identifier) {
if (this.selectedFieldObject[identifier] !== undefined) {
if (this.operationValue[identifier] !== undefined) {
setTelemetrySelects() {
console.log('this.domainObject', this.domainObject);
if (this.criterion.telemetryName) {
this.selectedTelemetryObject.name = this.criterion.telemetryName;
} else {
this.telemetryObj[0].name = '- Select Telemetry -';
this.selectedTelemetryObject.name = '- Select Telemetry -';
}
this.openmct.objects.get(this.domainObject.identifier).then((condition) => {
// this.telemetryMetadata = this.openmct.telemetry.getMetadata(condition).values();
console.log('condition', condition);
});
// this.selectedFieldObject = this.getTelemetryMetadataKey();
// this.selectedTelemetryObject = this.getTelemetryObject();
// console.log('this.telemetryMetadata', this.telemetryMetadata)
// console.log('this.selectedMetadataKey', this.selectedMetadataKey)
// console.log('this.selectedTelemetryObject', this.selectedTelemetryObject)
},
setOperationInput() {
if (this.selectedFieldObject !== undefined) {
if (this.operationValue !== undefined) {
for (let i=0, ii=this.operations.length; i < ii; i++) {
if (this.currentCriteria.operation === this.operations[i].name) {
this.selectedFieldObject[identifier] = this.operations[i].name;
this.selectedFieldObject = this.operations[i].name;
this.comparisonInputValue[identifier] = this.operations[i].inputCount > 0;
if (this.comparisonInputValue[identifier]) {
this.operationValue[identifier] = this.currentCriteria.input[0];
this.comparisonInputValue = this.operations[i].inputCount > 0;
if (this.comparisonInputValue) {
this.operationValue = this.currentCriteria.input[0];
}
}
}
}
}
},
updateConditionCriteria(identifier) {
if (this.domainObject.configuration.criteria.length) {
let criterion = this.domainObject.configuration.criteria[0];
criterion.key = this.selectedTelemetryKey[identifier];
criterion.metadataKey = this.selectedMetadataKey[identifier];
criterion.operation = this.selectedOperationName[identifier];
criterion.input = this.operationValue;
}
},
hasTelemetry(identifier) {
// TODO: check parent domainObject.composition.hasTelemetry
return this.currentCriteria && identifier;
}
// validate(criteriaId) {
// if (this.hasTelemetry(criteriaId) && !this.getTelemetryKey(criteriaId)) {
// this.reset();