Compare commits

...

3 Commits

Author SHA1 Message Date
Jesse Mazzella
de5914b82d almost there!!! 2023-08-02 14:39:46 -07:00
Jesse Mazzella
41bbbb136b 🤷‍♂️ 2023-08-02 13:19:34 -07:00
Jamie V
0f199b6aff created a throttle util and using it in timer plugin to throttle refreshing the timer domain object 2023-08-02 12:29:26 -04:00
3 changed files with 58 additions and 12 deletions

View File

@@ -22,6 +22,7 @@
import Timer from './components/Timer.vue'; import Timer from './components/Timer.vue';
import mount from 'utils/mount'; import mount from 'utils/mount';
import { markRaw, toRaw } from 'vue';
export default function TimerViewProvider(openmct) { export default function TimerViewProvider(openmct) {
return { return {
@@ -32,11 +33,12 @@ export default function TimerViewProvider(openmct) {
return domainObject.type === 'timer'; return domainObject.type === 'timer';
}, },
view: function (domainObject, objectPath) { view(domainObject, objectPath) {
let _destroy = null; let _destroy = null;
return { return {
show: function (element) { show(element) {
const rawDomainObject = markRaw(toRaw(domainObject));
const { destroy } = mount( const { destroy } = mount(
{ {
el: element, el: element,
@@ -45,11 +47,11 @@ export default function TimerViewProvider(openmct) {
}, },
provide: { provide: {
openmct, openmct,
domainObject: rawDomainObject,
currentView: this currentView: this
}, },
data() { data() {
return { return {
domainObject,
objectPath objectPath
}; };
}, },
@@ -62,7 +64,7 @@ export default function TimerViewProvider(openmct) {
); );
_destroy = destroy; _destroy = destroy;
}, },
destroy: function () { destroy() {
if (_destroy) { if (_destroy) {
_destroy(); _destroy();
} }

View File

@@ -43,19 +43,17 @@
<script> <script>
import raf from 'utils/raf'; import raf from 'utils/raf';
import throttle from '../../../utils/throttle';
const moment = require('moment-timezone'); const moment = require('moment-timezone');
const momentDurationFormatSetup = require('moment-duration-format'); const momentDurationFormatSetup = require('moment-duration-format');
const refreshRateSeconds = 2;
momentDurationFormatSetup(moment); momentDurationFormatSetup(moment);
export default { export default {
inject: ['openmct', 'currentView'], inject: ['openmct', 'currentView', 'domainObject'],
props: { props: {
domainObject: {
type: Object,
required: true
},
objectPath: { objectPath: {
type: Array, type: Array,
required: true required: true
@@ -82,6 +80,10 @@ export default {
return this.lastTimestamp - this.relativeTimestamp; return this.lastTimestamp - this.relativeTimestamp;
}, },
timeTextValue() { timeTextValue() {
if(this.timerState !== 'started') {
// THIS IS NOT RIGHT!!!
return moment.duration(this.lastTimestamp - this.configuration.pausedTime, 'ms').format(this.format, { trim: false });
}
if (isNaN(this.timeDelta)) { if (isNaN(this.timeDelta)) {
return null; return null;
} }
@@ -178,12 +180,15 @@ export default {
this.showOrHideAvailableActions(); this.showOrHideAvailableActions();
} }
}, },
created() {
this.refreshTimerObject = throttle(this.refreshTimerObject, refreshRateSeconds * 1000);
},
mounted() { mounted() {
this.unobserve = this.openmct.objects.observe( this.unobserve = this.openmct.objects.observe(
this.domainObject, this.domainObject,
'configuration', '*',
(configuration) => { (domainObject) => {
this.configuration = configuration; this.configuration = domainObject.configuration;
} }
); );
this.$nextTick(() => { this.$nextTick(() => {
@@ -219,6 +224,11 @@ export default {
if (this.timerState === 'paused' && !this.lastTimestamp) { if (this.timerState === 'paused' && !this.lastTimestamp) {
this.lastTimestamp = this.pausedTime; this.lastTimestamp = this.pausedTime;
} }
this.refreshTimerObject();
},
refreshTimerObject() {
this.openmct.objects.refresh(this.domainObject);
}, },
restartTimer() { restartTimer() {
this.triggerAction('timer.restart'); this.triggerAction('timer.restart');

34
src/utils/throttle.js Normal file
View File

@@ -0,0 +1,34 @@
/**
* Creates a throttled function that only invokes the provided function at most once every
* specified number of milliseconds. Subsequent calls within the waiting period will be ignored.
* @param {Function} func The function to throttle.
* @param {number} wait The number of milliseconds to wait between successive calls to the function.
* @return {Function} Returns the new throttled function.
*/
export default function throttle(func, wait) {
let timeout;
let result;
let previous = 0;
return function (...args) {
const now = new Date().getTime();
const remaining = wait - (now - previous);
if (remaining <= 0 || remaining > wait) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
result = func(...args);
} else if (!timeout) {
timeout = setTimeout(() => {
previous = new Date().getTime();
timeout = null;
result = func(...args);
}, remaining);
}
return result;
};
}