Added basic wizard content (19c4f02f) · Commits · OpenFlexure / openflexure-microscope-server

openflexure_microscope/api/extra_extensions/medscan/static/src/components/VueWebComponent.vue

+108 −23

Original line number	Diff line number	Diff line
		@@ -3,25 +3,55 @@
		<h1>Sample Scan Wizard</h1>
		<div>Base URL: {{ componentBaseURL }}</div>
		<p>Host microscope name: {{ hostDeviceName }}</p>
		<p>{{ message }}</p>
		<br />
		<p>This cheeky little counter has all of its logic contained in a server-side component:</p>
		<button type="button" v-on:click="decrement()">-</button>
		<span>{{ value }}</span>
		<button type="button" v-on:click="increment()">+</button>

		<hr />

		<form v-on:submit.prevent>
		<form v-on:submit.prevent v-on:keyup.enter="increment()">
		<div id="step-user" v-show="stepValue==0">
		<h2>User information</h2>

		<label for="username">Your name:</label>
		<input type="text" id="username" name="username" required />
		<br />
		<label for="patientID">Patient ID:</label>
		<input type="text" id="patientID" name="patientID" required />
		<input type="text" id="username" name="username" v-model="username" required />
		<br />
		<label for="currentTime">Current time (check this is correct):</label>
		<input type="datetime-local" id="currentTime" name="currentTime" v-model="currentTimeForm" />
		</div>

		<div id="step-patient" v-show="stepValue==1">
		<h2>Patient information</h2>

		<label for="patientID">Patient ID:</label>
		<input type="text" id="patientID" name="patientID" v-model="patientID" required />
		<br />
		</div>

		<div id="step-sample" v-show="stepValue==2">
		<h2>Sample information</h2>

		<label>Sample type:</label>
		<br />
		<input type="radio" id="typeThin" value="thin" v-model="sampleType" />
		<label for="typeThin">Thin smear</label>
		<br />
		<input type="radio" id="typeThick" value="thick" v-model="sampleType" />
		<label for="typeThick">Thick smear</label>
		<br />
		</div>

		<div id="step-scan" v-show="stepValue==3">
		<h2>Start scan</h2>
		(Confirm information)
		(Confirm scan parameters, just a radio box for selecting defaults)
		<p>{{this.payload}}</p>(Start button)
		</div>
		</form>

		<div id="form-stepper">
		<p>{{ message }}</p>
		<button v-show="stepValue == 3" type="button" v-on:click="restart()">Restart</button>
		<button v-show="stepValue > 0" type="button" v-on:click="decrement()">Previous</button>
		<button v-show="stepValue < 3" type="button" v-on:click="increment()">Next</button>
		</div>
		</div>
		</template>

		@@ -39,10 +69,13 @@ export default {

		data: function() {
		return {
		value: 0,
		message: "",
		stepValue: 0,
		hostDeviceName: null,
		currentTime: this.getLocalDatetimeString()
		message: null,
		username: "",
		currentTime: this.getLocalDatetimeString(),
		patientID: "",
		sampleType: "thin"
		};
		},

		@@ -66,11 +99,37 @@ export default {

		methods: {
		decrement: function() {
		this.value = this.value - 1;
		if (this.stepValue > 0) {
		this.stepValue = this.stepValue - 1;
		}
		},

		increment: function() {
		this.value = this.value + 1;
		// Validate sections
		if (this.stepValue == 0) {
		if (!this.username) {
		this.message = "Please enter your name";
		return false;
		}
		}
		if (this.stepValue == 1) {
		if (!this.patientID) {
		this.message = "Please enter a patient ID";
		return false;
		}
		}
		// Upper bound on section number
		if (this.stepValue < 3) {
		this.stepValue = this.stepValue + 1;
		this.message = "";
		return true;
		}
		},

		restart: function() {
		this.stepValue = 0;
		this.patientID = "";
		this.currentTime = this.getLocalDatetimeString();
		},

		getLocalDatetimeString: function() {
		@@ -108,7 +167,7 @@ export default {
		return this.currentTime.substr(0, 19);
		},
		set(val) {
		console.log(val)
		console.log(val);
		// Get timezone
		var dt = new Date();
		var tzo = -dt.getTimezoneOffset(),
		@@ -118,8 +177,25 @@ export default {
		return (norm < 10 ? "0" : "") + norm;
		};
		// Stick to the end of the new timestring from the form
		this.currentTime =
		val + dif + pad(tzo / 60) + ":" + pad(tzo % 60);
		this.currentTime = val + dif + pad(tzo / 60) + ":" + pad(tzo % 60);
		}
		},

		payload: {
		get() {
		return {
		filename: `${this.patientID}_${this.sampleType}`,
		temporary: false,
		grid: [20, 20, 5],
		fast_autofocus: true,
		use_video_port: false,
		annotations: {
		patientID: this.patientID,
		username: this.username,
		clientDatetime: this.currentTime
		},
		tags: ["medscan"]
		};
		}
		}
		}
		@@ -130,4 +206,13 @@ export default {
		.medscan-component-class {
		text-align: left;
		}

		input {
		display: block
		}

		button {
		margin: 0 10px 0 0;
		min-width: 100px;
		}
		</style>
		No newline at end of file