Compare commits
3 Commits
master
...
multi-user
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
de5914b82d | ||
|
|
41bbbb136b | ||
|
|
0f199b6aff |
@@ -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();
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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
34
src/utils/throttle.js
Normal 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;
|
||||||
|
};
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user