Autoformat modalComponents
This commit is contained in:
parent
958b28aa94
commit
7c0badb1af
13 changed files with 85 additions and 84 deletions
|
|
@ -14,7 +14,6 @@
|
|||
@next="nextTask"
|
||||
@back="previousTask"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -61,10 +60,10 @@ export default {
|
|||
camera_stage_mapping: cameraStageMappingTask
|
||||
};
|
||||
this.availableCalibrationTasks = Object.fromEntries(
|
||||
Object.entries(allCalibrationTasks)
|
||||
.filter(([thing]) => this.thingAvailable(thing))
|
||||
Object.entries(allCalibrationTasks).filter(([thing]) =>
|
||||
this.thingAvailable(thing)
|
||||
)
|
||||
);
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
@ -73,7 +72,7 @@ export default {
|
|||
*
|
||||
* Iterates over `this.availableCalibrationTasks` (set during mounted()) and reads the
|
||||
* `calibration_required` property.
|
||||
*
|
||||
*
|
||||
* Returns a list of thing names that report calibration is required.
|
||||
*/
|
||||
async check_things_needing_calibration() {
|
||||
|
|
@ -82,7 +81,10 @@ export default {
|
|||
|
||||
for (const name of calibrateableThings) {
|
||||
try {
|
||||
const thingNeedsCal = await this.readThingProperty(name, "calibration_required");
|
||||
const thingNeedsCal = await this.readThingProperty(
|
||||
name,
|
||||
"calibration_required"
|
||||
);
|
||||
if (thingNeedsCal) {
|
||||
needsCalibration.push(name);
|
||||
}
|
||||
|
|
@ -100,14 +102,17 @@ export default {
|
|||
},
|
||||
|
||||
/**
|
||||
* Create the calibration wizard task list dynamically.
|
||||
*/
|
||||
create_task_list: function(thingsToCal, includeWelcome=true) {
|
||||
* Create the calibration wizard task list dynamically.
|
||||
*/
|
||||
create_task_list: function(thingsToCal, includeWelcome = true) {
|
||||
const tasks = [];
|
||||
|
||||
// Optionally include the welcome screen
|
||||
if (includeWelcome) {
|
||||
tasks.push({ component: singleStepTask, props: { stepComponent: welcomeStep } });
|
||||
tasks.push({
|
||||
component: singleStepTask,
|
||||
props: { stepComponent: welcomeStep }
|
||||
});
|
||||
}
|
||||
|
||||
// Add calibration task for each thing
|
||||
|
|
@ -117,14 +122,17 @@ export default {
|
|||
}
|
||||
|
||||
// Always include the final step
|
||||
tasks.push({ component: singleStepTask, props: { stepComponent: finalStep } });
|
||||
tasks.push({
|
||||
component: singleStepTask,
|
||||
props: { stepComponent: finalStep }
|
||||
});
|
||||
|
||||
this.tasks = tasks;
|
||||
},
|
||||
|
||||
show_if_needed: async function() {
|
||||
// Check if the calibration modal is needed, and only show it if it is.
|
||||
let thingsToCal = await this. check_things_needing_calibration()
|
||||
let thingsToCal = await this.check_things_needing_calibration();
|
||||
const needed = thingsToCal.length > 0;
|
||||
|
||||
// Check if this calibration wizard can actually do anything useful
|
||||
|
|
@ -141,7 +149,7 @@ export default {
|
|||
// Forces modal to show on button press
|
||||
force_show: function() {
|
||||
const allThings = Object.keys(this.availableCalibrationTasks);
|
||||
|
||||
|
||||
this.resetData();
|
||||
this.create_task_list(allThings, false);
|
||||
this.show();
|
||||
|
|
@ -181,8 +189,7 @@ export default {
|
|||
if (this.taskIndex < this.tasks.length - 1) {
|
||||
this.taskIndex = this.taskIndex + 1;
|
||||
return true;
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
this.hide();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,6 @@ Tasks can be divided into multiple steps.
|
|||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "calibrationWizardTask",
|
||||
|
||||
|
|
@ -62,7 +61,7 @@ export default {
|
|||
|
||||
data() {
|
||||
return {
|
||||
stepIndex: this.startOnLast ? this.steps.length-1 : 0
|
||||
stepIndex: this.startOnLast ? this.steps.length - 1 : 0
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -74,7 +73,9 @@ export default {
|
|||
return !this.first || this.stepIndex > 0;
|
||||
},
|
||||
nextButtonText() {
|
||||
return this.final && this.stepIndex === this.steps.length - 1 ? "Finish" : "Next";
|
||||
return this.final && this.stepIndex === this.steps.length - 1
|
||||
? "Finish"
|
||||
: "Next";
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -102,5 +103,5 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -13,8 +13,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "camCalibrationExplanation"
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import stepTemplateWithStream from "../stepTemplateWithStream.vue"
|
||||
import stepTemplateWithStream from "../stepTemplateWithStream.vue";
|
||||
import cameraCalibrationSettings from "../../../tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue";
|
||||
|
||||
export default {
|
||||
|
|
@ -32,11 +32,10 @@ export default {
|
|||
return `${this.$store.getters.baseUri}/camera/`;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.action-button-container {
|
||||
padding: 4px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ import cameraMainCalibrationStep from "./cameraCalibrationSteps/cameraMainCalibr
|
|||
|
||||
export default {
|
||||
name: "cameraCalibrationTask",
|
||||
components: {calibrationWizardTask},
|
||||
components: { calibrationWizardTask },
|
||||
props: {
|
||||
// Standard calibrationWizardTask props below:
|
||||
first: Boolean,
|
||||
|
|
@ -31,11 +31,10 @@ export default {
|
|||
data: function() {
|
||||
return {
|
||||
steps: [
|
||||
{component: camCalibrationExplanation},
|
||||
{component: cameraMainCalibrationStep},
|
||||
{ component: camCalibrationExplanation },
|
||||
{ component: cameraMainCalibrationStep }
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ import runCsmStep from "./csmSteps/runCsmStep.vue";
|
|||
|
||||
export default {
|
||||
name: "cameraCalibrationTask",
|
||||
components: {calibrationWizardTask},
|
||||
components: { calibrationWizardTask },
|
||||
props: {
|
||||
// Standard calibrationWizardTask props below:
|
||||
first: Boolean,
|
||||
|
|
@ -32,12 +32,11 @@ export default {
|
|||
data: function() {
|
||||
return {
|
||||
steps: [
|
||||
{component: csmExplanation},
|
||||
{component: focusStep},
|
||||
{component: runCsmStep}
|
||||
{ component: csmExplanation },
|
||||
{ component: focusStep },
|
||||
{ component: runCsmStep }
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -18,5 +18,5 @@
|
|||
<script>
|
||||
export default {
|
||||
name: "csmExplanation"
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,29 +4,30 @@
|
|||
Use the buttons below to bring the sample into focus.
|
||||
</p>
|
||||
<p>
|
||||
You may also adjust the z position with <b>page up</b> and <b>page down</b>.
|
||||
You may also adjust the z position with <b>page up</b> and
|
||||
<b>page down</b>.
|
||||
</p>
|
||||
<template #below-stream>
|
||||
<div class="action-button-container">
|
||||
<action-button
|
||||
class="moveZ"
|
||||
thing="stage"
|
||||
action="move_relative"
|
||||
:button-primary="false"
|
||||
:submit-data="{ x: 0, y: 0, z: -100}"
|
||||
:submit-label="' - '"
|
||||
:hideOnRun="false"
|
||||
:can-terminate="false"
|
||||
class="moveZ"
|
||||
thing="stage"
|
||||
action="move_relative"
|
||||
:button-primary="false"
|
||||
:submit-data="{ x: 0, y: 0, z: -100 }"
|
||||
:submit-label="' - '"
|
||||
:hideOnRun="false"
|
||||
:can-terminate="false"
|
||||
/>
|
||||
<action-button
|
||||
class="moveZ"
|
||||
thing="stage"
|
||||
action="move_relative"
|
||||
:button-primary="false"
|
||||
:submit-data="{ x: 0, y: 0, z: 100}"
|
||||
:submit-label="'+'"
|
||||
:can-terminate="false"
|
||||
:hideOnRun="false"
|
||||
class="moveZ"
|
||||
thing="stage"
|
||||
action="move_relative"
|
||||
:button-primary="false"
|
||||
:submit-data="{ x: 0, y: 0, z: 100 }"
|
||||
:submit-label="'+'"
|
||||
:can-terminate="false"
|
||||
:hideOnRun="false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -34,7 +35,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import stepTemplateWithStream from "../stepTemplateWithStream.vue"
|
||||
import stepTemplateWithStream from "../stepTemplateWithStream.vue";
|
||||
import ActionButton from "../../../labThingsComponents/actionButton.vue";
|
||||
export default {
|
||||
name: "cameraMainCalibrationStep",
|
||||
|
|
@ -43,24 +44,23 @@ export default {
|
|||
stepTemplateWithStream,
|
||||
ActionButton
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
.action-button-container {
|
||||
display: flex;
|
||||
flex-direction: row; /* Stack vertically */
|
||||
justify-content: center; /* Left align */
|
||||
gap: 8px; /* Small space between buttons */
|
||||
margin-top: 4px; /* Gap from image */
|
||||
flex-direction: row; /* Stack vertically */
|
||||
justify-content: center; /* Left align */
|
||||
gap: 8px; /* Small space between buttons */
|
||||
margin-top: 4px; /* Gap from image */
|
||||
}
|
||||
.moveZ >>> .uk-button.uk-width-1-1 {
|
||||
line-height: 50px;
|
||||
font-size: 50px !important;
|
||||
height: 60px;
|
||||
height: 60px;
|
||||
padding-bottom: 46px;
|
||||
margin: 0; /* Remove default margin */
|
||||
margin: 0; /* Remove default margin */
|
||||
width: 120px;
|
||||
min-width: 80px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import stepTemplateWithStream from "../stepTemplateWithStream.vue"
|
||||
import stepTemplateWithStream from "../stepTemplateWithStream.vue";
|
||||
import CSMCalibrationSettings from "../../../tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue";
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +28,10 @@ export default {
|
|||
return `${this.$store.getters.baseUri}/camera/`;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.action-button-container {
|
||||
padding: 4px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,16 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>
|
||||
<b>Calibration complete</b>
|
||||
<b>Calibration complete</b>
|
||||
</p>
|
||||
<p>
|
||||
Click Finish to return to your microscope.
|
||||
Click Finish to return to your microscope.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "finalStep"
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -15,10 +15,13 @@ import calibrationWizardTask from "./calibrationWizardTask.vue";
|
|||
|
||||
export default {
|
||||
name: "singleStepTask",
|
||||
components: {calibrationWizardTask},
|
||||
components: { calibrationWizardTask },
|
||||
props: {
|
||||
// This must be sent
|
||||
stepComponent: Object,
|
||||
stepComponent: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
// This is optional.
|
||||
stepProps: {
|
||||
type: Object,
|
||||
|
|
@ -34,15 +37,13 @@ export default {
|
|||
startOnLast: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
data: function() {
|
||||
return {
|
||||
steps: [
|
||||
{component: this.stepComponent, props: this.stepProps}
|
||||
]
|
||||
steps: [{ component: this.stepComponent, props: this.stepProps }]
|
||||
};
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import miniStreamDisplay from "../../genericComponents/miniStreamDisplay.vue";
|
||||
|
||||
export default {
|
||||
|
|
@ -16,7 +15,7 @@ export default {
|
|||
components: {
|
||||
miniStreamDisplay
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@
|
|||
</b>
|
||||
</p>
|
||||
<p>
|
||||
Your microscope will still function, however some functionality will
|
||||
be limited, and image quality will likely suffer.
|
||||
Your microscope will still function, however some functionality will be
|
||||
limited, and image quality will likely suffer.
|
||||
</p>
|
||||
<p>
|
||||
<b>Click Next to begin microscope calibration.</b>
|
||||
|
|
@ -16,8 +16,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "welcomeStep"
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue