ui_migration lint(fix): changes fixed with lint ecmaversion & es2021
This commit is contained in:
Antonio Anaya
parent
0741e3cf7e
commit
ce19ea3fc0
52 changed files with 242 additions and 193 deletions
|
|
@ -1,4 +1,4 @@
|
|||
<template :key="shortcut.shortcut">
|
||||
<template>
|
||||
<div id="app" class="uk-height-1-1 uk-margin-remove uk-padding-remove" :class="handleTheme">
|
||||
<!-- this stops the app loading until setConnected is committed in the store, this means
|
||||
other components will not load until we have Thing Descriptions. -->
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
<button class="uk-modal-close-default" type="button" uk-close></button>
|
||||
<div
|
||||
v-for="shortcut in keyboardManual"
|
||||
:key="shortcut.shortcut"
|
||||
class="uk-margin-small"
|
||||
uk-grid
|
||||
>
|
||||
|
|
@ -25,14 +26,13 @@
|
|||
// Import components
|
||||
import appContent from "./components/appContent.vue";
|
||||
import loadingContent from "./components/loadingContent.vue";
|
||||
import MouseTrap from "mousetrap";
|
||||
import Mousetrap from "mousetrap";
|
||||
// vue3 migration
|
||||
import { markRaw } from "vue";
|
||||
import { eventBus } from "./eventBus.js";
|
||||
|
||||
MouseTrap.prototype.stopCallback = function (e, element) {
|
||||
Mousetrap.prototype.stopCallback = function (e, element) {
|
||||
// if the element has the class "mousetrap" then no need to stop
|
||||
if ((" " + element.className + " ").indexOf(" mousetrap ") > -1) {
|
||||
if ((" " + element.className + " ").indexOf(" Mousetrap ") > -1) {
|
||||
return false;
|
||||
}
|
||||
|
||||
|
|
@ -56,7 +56,7 @@ export default {
|
|||
|
||||
components: {
|
||||
appContent,
|
||||
loadingContent
|
||||
loadingContent,
|
||||
},
|
||||
|
||||
data: function () {
|
||||
|
|
@ -154,10 +154,10 @@ export default {
|
|||
|
||||
// Focus keys
|
||||
Mousetrap.bind("pageup", () => {
|
||||
eventBus.emit("globalMoveStepEvent", {x: 0, y: 0, z: 1});
|
||||
eventBus.emit("globalMoveStepEvent", { x: 0, y: 0, z: 1 });
|
||||
});
|
||||
Mousetrap.bind("pagedown", () => {
|
||||
eventBus.emit("globalMoveStepEvent", {x: 0, y: 0, z: -1});
|
||||
eventBus.emit("globalMoveStepEvent", { x: 0, y: 0, z: -1 });
|
||||
});
|
||||
this.keyboardManual.push({
|
||||
shortcut: "pgup / pgdn",
|
||||
|
|
@ -248,9 +248,14 @@ export default {
|
|||
event.target.parentNode.classList.contains("scrollTarget") ||
|
||||
event.target.classList.contains("scrollTarget")
|
||||
) {
|
||||
var z_rel = event.deltaY / 100;
|
||||
const z_steps = event.deltaY / 100;
|
||||
// Emit a signal to move, acted on by panelControl.vue
|
||||
eventBus.emit("globalMoveStepEvent", {x: 0, y: 0, z: z_rel, absolute: false});
|
||||
eventBus.emit("globalMoveStepEvent", {
|
||||
x_steps: 0,
|
||||
y_steps: 0,
|
||||
z_steps: z_steps,
|
||||
absolute: false,
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -258,7 +263,6 @@ export default {
|
|||
// Calculate movement array
|
||||
var x_rel = 0;
|
||||
var y_rel = 0;
|
||||
var z_rel = 0;
|
||||
// 37 corresponds to the left key
|
||||
if (37 in this.arrowKeysDown) {
|
||||
x_rel = x_rel - 1;
|
||||
|
|
@ -277,7 +281,7 @@ export default {
|
|||
}
|
||||
// Make a position request
|
||||
// Emit a signal to move, acted on by panelControl.vue
|
||||
eventBus.emit("globalMoveStepEvent", {x: x_rel, y: y_rel, z: 0});
|
||||
eventBus.emit("globalMoveStepEvent", { x: x_rel, y: y_rel, z: 0 });
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div id="app-content" class="uk-margin-remove uk-padding-remove uk-height-1-1" uk-grid>
|
||||
<!-- Initialisation modals -->
|
||||
<calibrationWizard ref="calibrationWizard" @onClose="enterApp()"></calibrationWizard>
|
||||
<calibrationWizard ref="calibrationWizard" @on-close="enterApp()"></calibrationWizard>
|
||||
<!-- Vertical tab bar -->
|
||||
<div id="switcher-left-container">
|
||||
<div
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
:require-connection="true"
|
||||
:current-tab="currentTab"
|
||||
>
|
||||
<component :is="item.component" @scrollTop="scrollToTop"></component>
|
||||
<component :is="item.component" @scroll-top="scrollToTop"></component>
|
||||
</tabContent>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -91,7 +91,7 @@ import settingsContent from "./tabContentComponents/settingsContent.vue";
|
|||
import slideScanContent from "./tabContentComponents/slideScanContent.vue";
|
||||
import viewContent from "./tabContentComponents/viewContent.vue";
|
||||
// vue3 migration
|
||||
import { shallowRef, markRaw, ref } from 'vue'
|
||||
import { markRaw } from "vue";
|
||||
import { eventBus } from "../eventBus.js";
|
||||
|
||||
// Import modal components for device initialisation
|
||||
|
|
@ -104,7 +104,7 @@ export default {
|
|||
components: {
|
||||
tabIcon,
|
||||
tabContent,
|
||||
calibrationWizard
|
||||
calibrationWizard,
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
<script>
|
||||
//vue3 migration
|
||||
import { useIntersectionObserver } from '@vueuse/core';
|
||||
import { useIntersectionObserver } from "@vueuse/core";
|
||||
|
||||
// Export main app
|
||||
export default {
|
||||
|
|
@ -42,7 +42,7 @@ export default {
|
|||
},
|
||||
{
|
||||
threshold: 0.0,
|
||||
}
|
||||
},
|
||||
);
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@ export default {
|
|||
|
||||
props: {},
|
||||
|
||||
emits: ["set-tab"],
|
||||
|
||||
computed: {
|
||||
tooltipOptions: function () {
|
||||
var title = this.id.charAt(0).toUpperCase() + this.id.slice(1);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<a
|
||||
href="#"
|
||||
class="uk-link"
|
||||
:class="classObject"
|
||||
:uk-tooltip="tooltipOptions ? tooltipOptions : null"
|
||||
@click="setThisTab"
|
||||
<a
|
||||
href="#"
|
||||
class="uk-link"
|
||||
:class="classObject"
|
||||
:uk-tooltip="tooltipOptions ? tooltipOptions : null"
|
||||
@click="setThisTab"
|
||||
>
|
||||
<slot></slot>
|
||||
<div v-if="showTitle" class="tabtitle">
|
||||
|
|
@ -49,6 +49,8 @@ export default {
|
|||
requireConnection: Boolean,
|
||||
},
|
||||
|
||||
emits: ["set-tab"],
|
||||
|
||||
computed: {
|
||||
computedTitle: function () {
|
||||
if (this.title !== undefined) {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
:task-running="taskRunning"
|
||||
:task-started="taskStarted"
|
||||
:task-status="taskStatus"
|
||||
@terminateTask="terminateTask"
|
||||
@terminate-task="terminateTask"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -29,33 +29,16 @@
|
|||
<script>
|
||||
import ActionProgressBar from "./actionProgressBar.vue";
|
||||
import ActionStatusModal from "./actionStatusModal.vue";
|
||||
//vue3 migration
|
||||
//vue3 migration
|
||||
import { eventBus } from "../../eventBus.js";
|
||||
import { useIntersectionObserver } from "@vueuse/core";
|
||||
|
||||
|
||||
export default {
|
||||
name: "ActionButton",
|
||||
|
||||
emits: [
|
||||
'update:progress',
|
||||
'update:taskStarted',
|
||||
'update:taskRunning',
|
||||
'update:log',
|
||||
'update:taskStatus',
|
||||
'submit',
|
||||
'taskStarted',
|
||||
'taskRunning',
|
||||
'response',
|
||||
'completed',
|
||||
'cancelled',
|
||||
'finished',
|
||||
'error'
|
||||
],
|
||||
|
||||
components: {
|
||||
components: {
|
||||
ActionProgressBar,
|
||||
ActionStatusModal
|
||||
ActionStatusModal,
|
||||
},
|
||||
|
||||
props: {
|
||||
|
|
@ -119,6 +102,22 @@ export default {
|
|||
},
|
||||
},
|
||||
|
||||
emits: [
|
||||
"update:progress",
|
||||
"update:taskStarted",
|
||||
"update:taskRunning",
|
||||
"update:log",
|
||||
"update:taskStatus",
|
||||
"submit",
|
||||
"taskStarted",
|
||||
"taskRunning",
|
||||
"response",
|
||||
"completed",
|
||||
"cancelled",
|
||||
"finished",
|
||||
"error",
|
||||
],
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
taskUrl: null,
|
||||
|
|
@ -173,14 +172,14 @@ export default {
|
|||
handler(newval) {
|
||||
this.$emit("update:log", newval);
|
||||
},
|
||||
deep: true
|
||||
deep: true,
|
||||
},
|
||||
taskStatus: {
|
||||
handler(newval) {
|
||||
this.$emit("update:taskStatus", newval);
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
useIntersectionObserver(
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ export default {
|
|||
taskStatus: {
|
||||
handler() {
|
||||
this.scrollToBottom();
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -33,10 +33,11 @@ import { eventBus } from "../../eventBus.js";
|
|||
|
||||
export default {
|
||||
name: "ActionStatusModal",
|
||||
components: {
|
||||
components: {
|
||||
ActionProgressBar,
|
||||
ActionLogDisplay
|
||||
ActionLogDisplay,
|
||||
},
|
||||
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
|
|
@ -69,6 +70,8 @@ export default {
|
|||
},
|
||||
},
|
||||
|
||||
emits: ["terminateTask"],
|
||||
|
||||
methods: {
|
||||
show() {
|
||||
UIkit.modal(this.$refs.modal).show();
|
||||
|
|
|
|||
|
|
@ -106,10 +106,8 @@ export default {
|
|||
name: "InputFromSchema",
|
||||
|
||||
components: {
|
||||
syncPropertyButton
|
||||
syncPropertyButton,
|
||||
},
|
||||
|
||||
compatConfig: { COMPONENT_V_MODEL: false },
|
||||
props: {
|
||||
dataSchema: {
|
||||
type: Object,
|
||||
|
|
@ -130,6 +128,10 @@ export default {
|
|||
},
|
||||
},
|
||||
|
||||
emits: ["requestUpdate", "sendValue", "animationShown"],
|
||||
|
||||
compatConfig: { COMPONENT_V_MODEL: false },
|
||||
|
||||
data() {
|
||||
return {
|
||||
// Initialise with a copy to try to prevent the this.modelValue prop being mutated if
|
||||
|
|
@ -139,8 +141,8 @@ export default {
|
|||
internalValue: Array.isArray(this.modelValue)
|
||||
? [...this.modelValue]
|
||||
: typeof this.modelValue === "object"
|
||||
? { ...this.modelValue }
|
||||
: this.modelValue,
|
||||
? { ...this.modelValue }
|
||||
: this.modelValue,
|
||||
// Is edited can't be computed as we mutate internalValue
|
||||
isEdited: false,
|
||||
animateUpdate: null,
|
||||
|
|
@ -270,7 +272,8 @@ export default {
|
|||
}
|
||||
},
|
||||
updateIsEdited: function () {
|
||||
this.isEdited = this.deepStringify(this.internalValue) !== this.deepStringify(this.modelValue);
|
||||
this.isEdited =
|
||||
this.deepStringify(this.internalValue) !== this.deepStringify(this.modelValue);
|
||||
},
|
||||
animationEnd: function () {
|
||||
this.animateUpdate = null;
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
:data-schema="propertyDescription"
|
||||
:label="label"
|
||||
:animate="animate"
|
||||
@requestUpdate="readProperty"
|
||||
@sendValue="writeProperty"
|
||||
@animationShown="resetAnimate"
|
||||
@request-update="readProperty"
|
||||
@send-value="writeProperty"
|
||||
@animation-shown="resetAnimate"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
|
@ -15,12 +15,11 @@ import { formatValue } from "@/js_utils/formatter.mjs";
|
|||
import InputFromSchema from "./inputFromSchema.vue";
|
||||
// vue3 migration
|
||||
|
||||
|
||||
export default {
|
||||
name: "PropertyControl",
|
||||
|
||||
components: {
|
||||
InputFromSchema
|
||||
InputFromSchema,
|
||||
},
|
||||
|
||||
props: {
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export default {
|
|||
name: "ServerSpecifiedActionButton",
|
||||
|
||||
components: {
|
||||
ActionButton
|
||||
ActionButton,
|
||||
},
|
||||
|
||||
props: {
|
||||
|
|
@ -34,6 +34,8 @@ export default {
|
|||
},
|
||||
},
|
||||
|
||||
emits: ["response", "finished"],
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Runs when the ActionButton's action completes successfully.
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export default {
|
|||
name: "ServerSpecifiedPropertyControl",
|
||||
|
||||
components: {
|
||||
PropertyControl
|
||||
PropertyControl,
|
||||
},
|
||||
|
||||
props: {
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@
|
|||
<script>
|
||||
export default {
|
||||
name: "SyncPropertyButton",
|
||||
|
||||
emits: ["click"],
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -26,7 +28,9 @@ export default {
|
|||
|
||||
.material-symbols-outlined.sync-icon {
|
||||
color: #888;
|
||||
transition: transform 0.3s ease, color 0.3s ease;
|
||||
transition:
|
||||
transform 0.3s ease,
|
||||
color 0.3s ease;
|
||||
}
|
||||
|
||||
.material-symbols-outlined.sync-icon:hover {
|
||||
|
|
|
|||
|
|
@ -15,14 +15,13 @@
|
|||
<script>
|
||||
import devTools from "./tabContentComponents/aboutComponents/devTools.vue";
|
||||
// vue3 migration
|
||||
import { markRaw } from "vue";
|
||||
|
||||
// Export main app
|
||||
export default {
|
||||
name: "LoadingContent",
|
||||
|
||||
components: {
|
||||
devTools
|
||||
components: {
|
||||
devTools,
|
||||
},
|
||||
|
||||
data: function () {
|
||||
|
|
|
|||
|
|
@ -30,6 +30,8 @@ export default {
|
|||
|
||||
components: {},
|
||||
|
||||
emits: ["onClose"],
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
isNeeded: undefined,
|
||||
|
|
|
|||
|
|
@ -66,6 +66,8 @@ export default {
|
|||
},
|
||||
},
|
||||
|
||||
emits: ["back", "next"],
|
||||
|
||||
data() {
|
||||
return {
|
||||
stepIndex: this.startOnLast ? this.steps.length - 1 : 0,
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<cameraCalibrationSettings
|
||||
:show-extra-settings="false"
|
||||
:camera-uri="cameraUri"
|
||||
@actionFinished="checkCalibrationState"
|
||||
@action-finished="checkCalibrationState"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -26,9 +26,11 @@ export default {
|
|||
|
||||
components: {
|
||||
stepTemplateWithStream,
|
||||
cameraCalibrationSettings
|
||||
cameraCalibrationSettings,
|
||||
},
|
||||
|
||||
emits: ["awaiting-user"],
|
||||
|
||||
computed: {
|
||||
cameraUri: function () {
|
||||
return `${this.$store.getters.baseUri}/camera/`;
|
||||
|
|
|
|||
|
|
@ -19,8 +19,10 @@ import { markRaw } from "vue";
|
|||
|
||||
export default {
|
||||
name: "CameraCalibrationTask",
|
||||
components: {
|
||||
calibrationWizardTask},
|
||||
components: {
|
||||
calibrationWizardTask,
|
||||
},
|
||||
|
||||
props: {
|
||||
// Standard calibrationWizardTask props below:
|
||||
first: Boolean,
|
||||
|
|
@ -31,9 +33,14 @@ export default {
|
|||
},
|
||||
},
|
||||
|
||||
emits: ["next", "back"],
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
steps: [{ component: markRaw(camCalibrationExplanation) }, { component: markRaw(cameraMainCalibrationStep)}],
|
||||
steps: [
|
||||
{ component: markRaw(camCalibrationExplanation) },
|
||||
{ component: markRaw(cameraMainCalibrationStep) },
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ import { markRaw } from "vue";
|
|||
export default {
|
||||
name: "CameraCalibrationTask",
|
||||
components: {
|
||||
calibrationWizardTask
|
||||
calibrationWizardTask,
|
||||
},
|
||||
props: {
|
||||
// Standard calibrationWizardTask props below:
|
||||
|
|
@ -32,10 +32,15 @@ export default {
|
|||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ["next", "back"],
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
steps: [{ component: markRaw(csmExplanation) }, { component: markRaw(focusStep) }, { component: markRaw(runCsmStep) }],
|
||||
steps: [
|
||||
{ component: markRaw(csmExplanation) },
|
||||
{ component: markRaw(focusStep) },
|
||||
{ component: markRaw(runCsmStep) },
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ export default {
|
|||
|
||||
components: {
|
||||
stepTemplateWithStream,
|
||||
ActionButton
|
||||
ActionButton,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<div class="action-button-container">
|
||||
<CSMCalibrationSettings
|
||||
:show-extra-settings="false"
|
||||
@recalibrateResponse="checkCalibrationState"
|
||||
@recalibrate-response="checkCalibrationState"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -28,6 +28,8 @@ export default {
|
|||
CSMCalibrationSettings,
|
||||
},
|
||||
|
||||
emits: ["awaiting-user"],
|
||||
|
||||
mounted() {
|
||||
this.checkCalibrationState();
|
||||
},
|
||||
|
|
|
|||
|
|
@ -29,9 +29,10 @@ import { markRaw } from "vue";
|
|||
|
||||
export default {
|
||||
name: "SingleStepTask",
|
||||
components: {
|
||||
calibrationWizardTask
|
||||
components: {
|
||||
calibrationWizardTask,
|
||||
},
|
||||
|
||||
props: {
|
||||
// This must be sent
|
||||
stepComponent: {
|
||||
|
|
@ -56,6 +57,8 @@ export default {
|
|||
},
|
||||
},
|
||||
|
||||
emits: ["next", "back"],
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
steps: [{ component: markRaw(this.stepComponent), props: this.stepProps }],
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export default {
|
|||
name: "StepTemplateWithStream",
|
||||
|
||||
components: {
|
||||
miniStreamDisplay
|
||||
miniStreamDisplay,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -68,8 +68,8 @@ import ActionButton from "../../labThingsComponents/actionButton.vue";
|
|||
|
||||
export default {
|
||||
name: "StatusPane",
|
||||
components: {
|
||||
ActionButton
|
||||
components: {
|
||||
ActionButton,
|
||||
},
|
||||
|
||||
data: function () {
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export default {
|
|||
|
||||
components: {
|
||||
devTools,
|
||||
statusPane
|
||||
statusPane,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ import { useIntersectionObserver } from "@vueuse/core";
|
|||
export default {
|
||||
components: {
|
||||
ActionButton,
|
||||
ServerSpecifiedPropertyControl
|
||||
ServerSpecifiedPropertyControl,
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
@ -70,10 +70,22 @@ export default {
|
|||
await this.readSettings();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
useIntersectionObserver(
|
||||
this.$refs.backgroundDetectContent,
|
||||
([{ isIntersecting }]) => {
|
||||
this.visibilityChanged(isIntersecting);
|
||||
},
|
||||
{
|
||||
threshold: 0.0,
|
||||
},
|
||||
);
|
||||
},
|
||||
|
||||
methods: {
|
||||
async safeReadSettings() {
|
||||
if (!this.$store.state.connected) return;
|
||||
|
||||
|
||||
try {
|
||||
await this.readSettings();
|
||||
} catch (error) {
|
||||
|
|
@ -111,18 +123,6 @@ export default {
|
|||
}
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
useIntersectionObserver(
|
||||
this.$refs.backgroundDetectContent,
|
||||
([{ isIntersecting }]) => {
|
||||
this.visibilityChanged(isIntersecting);
|
||||
},
|
||||
{
|
||||
threshold: 0.0,
|
||||
},
|
||||
);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
|
||||
components: {
|
||||
paneBackgroundDetect,
|
||||
streamDisplay
|
||||
streamDisplay,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
:submit-label="'Autofocus'"
|
||||
:button-primary="true"
|
||||
:submit-on-event="'globalFastAutofocusEvent'"
|
||||
@taskStarted="onAutofocus"
|
||||
@task-started="onAutofocus"
|
||||
@finished="afterAutofocus"
|
||||
@error="modalError"
|
||||
/>
|
||||
|
|
@ -25,7 +25,7 @@ export default {
|
|||
name: "AutofocusControl",
|
||||
|
||||
components: {
|
||||
ActionButton
|
||||
ActionButton,
|
||||
},
|
||||
|
||||
data: function () {
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ export default {
|
|||
components: {
|
||||
ActionButton,
|
||||
positionControl,
|
||||
autofocusControl
|
||||
autofocusControl,
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ and zero position buttons. It also includes the d-pad.
|
|||
<!-- Text boxes to set and view position -->
|
||||
<div class="input-and-buttons-container">
|
||||
<input
|
||||
:key="`setPosition_${key}`"
|
||||
v-for="(_v, key) in setPosition"
|
||||
:key="`setPosition_${key}`"
|
||||
v-model="setPosition[key]"
|
||||
class="uk-form-small numeric-setting-line-input"
|
||||
type="number"
|
||||
|
|
@ -70,7 +70,7 @@ export default {
|
|||
components: {
|
||||
ActionButton,
|
||||
syncPropertyButton,
|
||||
stageControlButtons
|
||||
stageControlButtons,
|
||||
},
|
||||
|
||||
data: function () {
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ export default {
|
|||
name: "StageControlButtons",
|
||||
methods: {
|
||||
move(x, y, z) {
|
||||
eventBus.emit("globalMoveStepEvent", {x, y, z, absolute: false});
|
||||
eventBus.emit("globalMoveStepEvent", { x, y, z, absolute: false });
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
|
||||
components: {
|
||||
paneControl,
|
||||
streamDisplay
|
||||
streamDisplay,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -91,9 +91,11 @@ export default {
|
|||
|
||||
components: {
|
||||
Paginate,
|
||||
EndpointButton
|
||||
EndpointButton,
|
||||
},
|
||||
|
||||
emits: ["scrollTop"],
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
maxitems: 20,
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ export default {
|
|||
([{ isIntersecting }]) => {
|
||||
this.visibilityChanged(isIntersecting);
|
||||
},
|
||||
{ threshold: 0.0 }
|
||||
{ threshold: 0.0 },
|
||||
);
|
||||
|
||||
if (this.src) {
|
||||
|
|
@ -80,19 +80,17 @@ export default {
|
|||
visibilityChanged(isVisible) {
|
||||
// adding this check to avoid error when the viewer is not yet initialized.
|
||||
if (isVisible) {
|
||||
|
||||
if (!this.osdViewer && this.src) {
|
||||
this.loadOpenSeaDragon(this.src);
|
||||
}
|
||||
} else {
|
||||
|
||||
if (this.osdViewer) {
|
||||
this.osdViewer.destroy();
|
||||
this.osdViewer = null;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
async loadOpenSeaDragon() {
|
||||
if (this.osdViewer) {
|
||||
this.osdViewer.destroy();
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
id="thumbnail-stitched-image"
|
||||
class="thumbnail-fit"
|
||||
:src="thumbnailPath"
|
||||
onerror="this.src='/titleiconpink.svg';"
|
||||
onerror="this.src = '/titleiconpink.svg'"
|
||||
@click="requestViewer"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -87,9 +87,9 @@ import EndpointButton from "../../labThingsComponents/endpointButton.vue";
|
|||
// Export main app
|
||||
export default {
|
||||
name: "ScanCard",
|
||||
components: {
|
||||
components: {
|
||||
actionButton,
|
||||
EndpointButton
|
||||
EndpointButton,
|
||||
},
|
||||
|
||||
props: {
|
||||
|
|
@ -107,6 +107,8 @@ export default {
|
|||
},
|
||||
},
|
||||
|
||||
emits: ["viewer-requested", "update-requested"],
|
||||
|
||||
computed: {
|
||||
downloadStitchFile() {
|
||||
return `${this.$store.getters.baseUri}/smart_scan/get_stitch/${this.scanData.name}`;
|
||||
|
|
|
|||
|
|
@ -59,8 +59,8 @@ import OpenSeadragonViewer from "./openSeadragonViewer.vue";
|
|||
|
||||
export default {
|
||||
name: "ScanViewerModal",
|
||||
components: {
|
||||
OpenSeadragonViewer
|
||||
components: {
|
||||
OpenSeadragonViewer,
|
||||
},
|
||||
props: {
|
||||
selectedScan: {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
<template>
|
||||
<div
|
||||
ref="galleryDisplay"
|
||||
class="galleryDisplay uk-padding uk-padding-remove-top"
|
||||
>
|
||||
<div ref="galleryDisplay" class="galleryDisplay uk-padding uk-padding-remove-top">
|
||||
<!-- Gallery nav bar -->
|
||||
<nav class="gallery-navbar uk-navbar-container uk-navbar-transparent" uk-navbar="mode: click">
|
||||
<!-- Right side buttons -->
|
||||
|
|
@ -107,12 +104,14 @@ import { useIntersectionObserver } from "@vueuse/core";
|
|||
// Export main app
|
||||
export default {
|
||||
name: "ScanListContent",
|
||||
components: {
|
||||
components: {
|
||||
actionButton,
|
||||
scanCard,
|
||||
ScanViewerModal
|
||||
ScanViewerModal,
|
||||
},
|
||||
|
||||
emits: ["scrollTop"],
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
scans: [],
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export default {
|
|||
|
||||
components: {
|
||||
CSMCalibrationSettings,
|
||||
miniStreamDisplay
|
||||
miniStreamDisplay,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ export default {
|
|||
|
||||
components: {
|
||||
ActionButton,
|
||||
matrixDisplay
|
||||
matrixDisplay,
|
||||
},
|
||||
|
||||
props: {
|
||||
|
|
@ -77,6 +77,8 @@ export default {
|
|||
},
|
||||
},
|
||||
|
||||
emits: ["recalibrateResponse"],
|
||||
|
||||
data() {
|
||||
return {
|
||||
csmMatrix: undefined,
|
||||
|
|
@ -101,7 +103,7 @@ export default {
|
|||
([{ isIntersecting }]) => {
|
||||
this.visibilityChanged(isIntersecting);
|
||||
},
|
||||
{ threshold: 0.0 }
|
||||
{ threshold: 0.0 },
|
||||
);
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ export default {
|
|||
components: {
|
||||
cameraCalibrationSettings,
|
||||
miniStreamDisplay,
|
||||
ServerSpecifiedPropertyControl
|
||||
ServerSpecifiedPropertyControl,
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -23,14 +23,13 @@
|
|||
<script>
|
||||
import ServerSpecifiedActionButton from "../../../labThingsComponents/serverSpecifiedActionButton.vue";
|
||||
// vue3 migration
|
||||
import { markRaw } from "vue";
|
||||
|
||||
// Export main app
|
||||
export default {
|
||||
name: "CameraCalibrationSettings",
|
||||
|
||||
components: {
|
||||
ServerSpecifiedActionButton
|
||||
ServerSpecifiedActionButton,
|
||||
},
|
||||
|
||||
props: {
|
||||
|
|
@ -45,6 +44,8 @@ export default {
|
|||
},
|
||||
},
|
||||
|
||||
emits: ["actionFinished"],
|
||||
|
||||
data() {
|
||||
return {
|
||||
primaryCalibrationActions: [],
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export default {
|
|||
|
||||
components: {
|
||||
streamSettings,
|
||||
appSettings
|
||||
appSettings,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ export default {
|
|||
name: "StageSettings",
|
||||
|
||||
components: {
|
||||
ActionButton
|
||||
ActionButton,
|
||||
},
|
||||
|
||||
data: function () {
|
||||
|
|
@ -57,7 +57,7 @@ export default {
|
|||
([{ isIntersecting }]) => {
|
||||
this.visibilityChanged(isIntersecting);
|
||||
},
|
||||
{ threshold: 0.0 }
|
||||
{ threshold: 0.0 },
|
||||
);
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -70,7 +70,6 @@ import tabContent from "../genericComponents/tabContent.vue";
|
|||
// vue3 migration
|
||||
import { markRaw } from "vue";
|
||||
|
||||
|
||||
// Export main app
|
||||
export default {
|
||||
name: "SettingsContent",
|
||||
|
|
@ -78,7 +77,7 @@ export default {
|
|||
components: {
|
||||
tabIcon,
|
||||
tabContent,
|
||||
calibrationWizard
|
||||
calibrationWizard,
|
||||
},
|
||||
|
||||
data: function () {
|
||||
|
|
|
|||
|
|
@ -65,10 +65,10 @@
|
|||
:submit-data="{ scan_name: scan_name }"
|
||||
submit-label="Start Smart Scan"
|
||||
:can-terminate="true"
|
||||
@taskStarted="startScanning"
|
||||
@beforeUpdate:taskStatus="taskStatus = $event"
|
||||
@beforeUpdate:progress="progress = $event"
|
||||
@beforeUpdate:log="log = $event"
|
||||
@task-started="startScanning"
|
||||
@before-update:task-status="taskStatus = $event"
|
||||
@before-update:progress="progress = $event"
|
||||
@before-update:log="log = $event"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -143,7 +143,7 @@ export default {
|
|||
actionProgressBar,
|
||||
MiniStreamDisplay,
|
||||
ActionButton,
|
||||
ServerSpecifiedPropertyControl
|
||||
ServerSpecifiedPropertyControl,
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
@ -176,7 +176,11 @@ export default {
|
|||
|
||||
async created() {
|
||||
this.readSettings();
|
||||
this.workflowOptions = await this.readThingProperty("smart_scan", "workflow_display_names", true);
|
||||
this.workflowOptions = await this.readThingProperty(
|
||||
"smart_scan",
|
||||
"workflow_display_names",
|
||||
true,
|
||||
);
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
|
@ -203,16 +207,21 @@ export default {
|
|||
this.workflowName = await this.readThingProperty("smart_scan", "workflow_name");
|
||||
|
||||
if (!this.workflowName) {
|
||||
console.warn("Could not read workflow_name, using default");
|
||||
this.workflowName = "histo_scan_workflow";
|
||||
}
|
||||
console.warn("Could not read workflow_name, using default");
|
||||
this.workflowName = "histo_scan_workflow";
|
||||
}
|
||||
|
||||
if (this.workflowName) {
|
||||
console.log("Current workflow name: ", this.workflowName);
|
||||
this.ready = await this.readThingProperty(this.workflowName, "ready", true);
|
||||
this.workflowSettings = await this.readThingProperty(this.workflowName, "settings_ui", true) || [];
|
||||
this.workflowSettings =
|
||||
(await this.readThingProperty(this.workflowName, "settings_ui", true)) || [];
|
||||
console.log(this.workflowSettings);
|
||||
this.workflowDisplayName = await this.readThingProperty(this.workflowName, "display_name", true);
|
||||
this.workflowDisplayName = await this.readThingProperty(
|
||||
this.workflowName,
|
||||
"display_name",
|
||||
true,
|
||||
);
|
||||
this.workflowBlurb = await this.readThingProperty(this.workflowName, "ui_blurb", true);
|
||||
}
|
||||
},
|
||||
|
|
@ -256,7 +265,7 @@ export default {
|
|||
this.lastStitchedImage = `${this.$store.getters.baseUri}/smart_scan/latest_preview_stitch.jpg?t=${mtime}`;
|
||||
console.log("Updated preview image URL: ", this.lastStitchedImage);
|
||||
}
|
||||
|
||||
|
||||
this.lastScanName = await this.readThingProperty("smart_scan", "latest_scan_name", true);
|
||||
setTimeout(this.pollScan, 1000); // keep rescheduling until it's stopped
|
||||
}
|
||||
|
|
@ -270,7 +279,13 @@ export default {
|
|||
|
||||
// refresh UI
|
||||
await this.readSettings();
|
||||
console.log("readsettings values: ", this.workflowName, this.workflowSettings, this.workflowDisplayName, this.workflowBlurb);
|
||||
console.log(
|
||||
"readsettings values: ",
|
||||
this.workflowName,
|
||||
this.workflowSettings,
|
||||
this.workflowDisplayName,
|
||||
this.workflowBlurb,
|
||||
);
|
||||
} catch (err) {
|
||||
this.modalError(err);
|
||||
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ export default {
|
|||
resizeTimeoutId: setTimeout(this.doneResizing, 500),
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
computed: {
|
||||
streamEnabled: function () {
|
||||
return this.$store.getters.ready && !this.$store.state.disableStream;
|
||||
|
|
@ -65,7 +65,7 @@ export default {
|
|||
},
|
||||
|
||||
mounted() {
|
||||
//set up an intersection observer
|
||||
//set up an intersection observer
|
||||
useIntersectionObserver(
|
||||
this.$refs.streamDisplay,
|
||||
([{ isIntersecting }]) => {
|
||||
|
|
@ -73,7 +73,7 @@ export default {
|
|||
},
|
||||
{
|
||||
threshold: 0.0,
|
||||
}
|
||||
},
|
||||
);
|
||||
// A global signal listener to flash the stream element
|
||||
this.onFlashStream = () => {
|
||||
|
|
@ -81,7 +81,7 @@ export default {
|
|||
};
|
||||
|
||||
eventBus.on("globalFlashStream", this.onFlashStream);
|
||||
|
||||
|
||||
// Mutation observer
|
||||
this.sizeObserver = new ResizeObserver(() => {
|
||||
this.handleResize(); // For any element attached to the observer, run handleResize() on change
|
||||
|
|
@ -141,8 +141,8 @@ export default {
|
|||
|
||||
// Emit a signal to move, acted on by paneControl.vue
|
||||
eventBus.emit("globalMoveInImageCoordinatesEvent", {
|
||||
x:-xRelative,
|
||||
y:-yRelative
|
||||
x: -xRelative,
|
||||
y: -yRelative,
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
<script>
|
||||
import streamDisplay from "./streamContent.vue";
|
||||
// vue3 migration
|
||||
import { markRaw } from "vue";
|
||||
|
||||
export default {
|
||||
name: "ViewContent",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
// Generic functions for formatting
|
||||
|
||||
|
||||
/**
|
||||
* Format a single number into a human-readable string.
|
||||
* Uses exponential notation for very large/small numbers.
|
||||
|
|
@ -30,7 +29,7 @@ export function formatNumber(num, maxDigits = 4) {
|
|||
*/
|
||||
export function formatValue(value, maxDigits = 4) {
|
||||
if (Array.isArray(value)) {
|
||||
const items = value.map(val => formatValue(val, maxDigits));
|
||||
const items = value.map((val) => formatValue(val, maxDigits));
|
||||
return `[${items.join(", ")}]`;
|
||||
}
|
||||
if (typeof value === "object" && value !== null) {
|
||||
|
|
@ -47,4 +46,4 @@ export function formatValue(value, maxDigits = 4) {
|
|||
}
|
||||
// Only if the string will not coerce to a number do we output the value.
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { createApp } from 'vue';
|
||||
import { createApp } from "vue";
|
||||
import App from "./App.vue";
|
||||
import store from "./store";
|
||||
import UIkit from "uikit";
|
||||
|
|
@ -8,7 +8,7 @@ import "material-symbols/outlined.css";
|
|||
|
||||
//import queryMixin from "@/mixins/labThingsMixins.js";
|
||||
import modalMixin from "@/mixins/modalMixins.js";
|
||||
import labThingsMixins from './mixins/labThingsMixins';
|
||||
import labThingsMixins from "./mixins/labThingsMixins";
|
||||
|
||||
// UIKit overrides
|
||||
UIkit.mixin(
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ export default {
|
|||
// `false` fails because axios somehow eats it!
|
||||
// Other values should not be stringified or pydantic
|
||||
// can't parse them.
|
||||
if ((value === false) || (value === true)) {
|
||||
if (value === false || value === true) {
|
||||
value = JSON.stringify(value);
|
||||
}
|
||||
await axios.put(url, value);
|
||||
|
|
@ -91,7 +91,7 @@ export default {
|
|||
response = await axios.get(taskUrl, { baseURL: this.$store.getters.baseUri });
|
||||
const result = response.data.status;
|
||||
|
||||
if ((result === "running") || (result === "pending")) {
|
||||
if (result === "running" || result === "pending") {
|
||||
ongoingMethod?.(response);
|
||||
this.pollTimers[taskUrl] = setTimeout(() => {
|
||||
this.pollUntilComplete(taskUrl, ongoingMethod, finalMethod, interval);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue