Reinstate welcome pane in refactored wizard.

webapp/src/components/modalComponents/calibrationWizardComponents/calibrationWizardTask.vue

@@ -1,6 +1,22 @@
+<!-- The base component for a wizard task.
+
+Do not import this directly into CalibrationWizard as the list of steps and props
+will be confusing.
+
+A task should be used for higher level groupings of individual steps in the wizard,
+such as calibrating a Thing.
+
+Tasks can be divided into multiple steps.
+
+-->
 <template>
   <div>
-    <p>{{num}}.{{stepIndex}}</p>
+    <component
+      v-if="currentStep"
+      :is="currentStep.component"
+      :key="stepIndex"
+      v-bind="currentStep.props"
+    />
     <p class="uk-text-right">
       <button
         v-if="showBackButton"
@@ -22,11 +38,11 @@
 </template>
 
 <script>
+
 export default {
   name: "calibrationWizardTask",
 
   props: {
-    num: Number,
     first: Boolean,
     final: Boolean,
     startOnLast: {
@@ -34,23 +50,30 @@ export default {
       default: false
     },
     steps: {
-      type: Number,
-      default: 2
+      type: Array,
+      required: true
     }
   },
 
   data() {
     return {
-      stepIndex: this.startOnLast ? this.steps-1 : 0
+      stepIndex: this.startOnLast ? this.steps.length-1 : 0
     };
   },
 
+  mounted() {
+    console.log("Steps received:", this.steps);
+  },
+
   computed: {
+    currentStep() {
+      return this.steps[this.stepIndex] || null;
+    },
     showBackButton() {
       return !this.first || this.stepIndex > 0;
     },
     nextButtonText() {
-      return this.final && this.stepIndex === this.steps - 1 ? "Finish" : "Next";
+      return this.final && this.stepIndex === this.steps.length - 1 ? "Finish" : "Next";
     }
   },
 
@@ -70,7 +93,7 @@ export default {
      * Move to the next step in this task, or the next task if final step.
      */
     nextStep: function() {
-      if (this.stepIndex < this.steps - 1) {
+      if (this.stepIndex < this.steps.length - 1) {
         this.stepIndex = this.stepIndex + 1;
         return true;
       } else {

webapp/src/components/modalComponents/calibrationWizardComponents/singleStepTask.vue

@@ -0,0 +1,47 @@
+<template>
+  <calibrationWizardTask
+    :first="first"
+    :final="final"
+    :startOnLast="startOnLast"
+    :steps="steps"
+    @next="$emit('next')"
+    @back="$emit('back')"
+  />
+</template>
+
+<script>
+import calibrationWizardTask from "./calibrationWizardTask.vue";
+
+export default {
+  name: "singleStepTask",
+  components: {calibrationWizardTask},
+  props: {
+    // This must be sent
+    stepComponent: Object,
+    // This is optional.
+    stepProps: {
+      type: Object,
+      default: () => ({})
+    },
+    // Standard calibrationWizardTask props below:
+    first: Boolean,
+    final: Boolean,
+    startOnLast: {
+      type: Boolean,
+      default: false
+    },
+  },
+
+  data: function() {
+    return {
+      steps: [
+        {component: this.stepComponent, props: this.stepProps}
+      ]
+    };
+  },
+
+  mounted(){
+    console.log(this.stepComponent);
+  }
+}
+</script>

webapp/src/components/modalComponents/calibrationWizardComponents/welcomeStep.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <p>
+      <b>
+        Some important microscope calibration data is currently missing.
+      </b>
+    </p>
+    <p>
+        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>
+    </p>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "welcomeStep"
+}
+</script>