Added first basic form elements (4a0351f8) · Commits · OpenFlexure / openflexure-microscope-server

src/components/panelLeft.vue

+49 −9

Original line number	Diff line number	Diff line
		@@ -7,7 +7,9 @@
		<tabIcon id="navigate" uk-icon="location" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
		<tabIcon id="capture" uk-icon="camera" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
		<tabIcon id="settings" uk-icon="cog" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab" />

		<tabIcon v-for="plugin in plugins" :key="plugin.id" :id="plugin.id" :uk-icon="plugin.icon" :requireConnection="plugin.requiresConnection" :currentTab="currentTab" @set-tab="setTab" />

		</div>

		<!-- Corresponding vertical tab content -->
		@@ -25,9 +27,11 @@
		<tabContent id="settings" :requireConnection="false" :currentTab="currentTab">
		<paneSettings/>
		</tabContent>

		<tabContent v-for="plugin in plugins" :key="plugin.id" :id="plugin.id" :requireConnection="plugin.requiresConnection" :currentTab="currentTab">
		<p v-html="plugin.content"></p>
		<JsonForm :schema="plugin.schema"/>
		</tabContent>

		</div>
		</div>

		@@ -40,14 +44,17 @@
		import axios from 'axios'

		// Import generic components
		import tabIcon from './genericComponents/tabIcon.vue'
		import tabContent from './genericComponents/tabContent.vue'
		import tabIcon from './genericComponents/tabIcon'
		import tabContent from './genericComponents/tabContent'

		// Import pane components
		import paneConnect from './controlComponents/paneConnect.vue'
		import paneNavigate from './controlComponents/paneNavigate.vue'
		import paneCapture from './controlComponents/paneCapture.vue'
		import paneSettings from './controlComponents/paneSettings.vue'
		import paneConnect from './controlComponents/paneConnect'
		import paneNavigate from './controlComponents/paneNavigate'
		import paneCapture from './controlComponents/paneCapture'
		import paneSettings from './controlComponents/paneSettings'

		// Import plugin components
		import JsonForm from './pluginComponents/formComponents/JsonForm'

		// Export main app
		export default {
		@@ -59,7 +66,8 @@ export default {
		paneConnect,
		paneNavigate,
		paneCapture,
		paneSettings
		paneSettings,
		JsonForm
		},

		data: function () {
		@@ -71,7 +79,39 @@ export default {
		id: 'test-plugin',
		icon: 'code',
		requireConnection: false,
		content: "<b>HELLO WORLD</b>"
		schema: [
		{
		fieldType: "htmlBlock",
		name: "heading",
		content: "<b>This is a cool plugin!</b>"
		},
		{
		fieldType: "selectList",
		name: "title",
		multi: false,
		label: "Title",
		options: ["", "Mr", "Ms", "Mx", "Dr", "Madam", "Lord"]
		},
		{
		fieldType: "textInput",
		placeholder: "First Name",
		label: "First Name",
		name: "firstName"
		},
		{
		fieldType: "textInput",
		placeholder: "Last Name",
		label: "Last Name",
		name: "lastName"
		},
		{
		fieldType: "numberInput",
		placeholder: "Age",
		name: "age",
		label: "Age",
		minValue: 0
		}
		]
		}
		]
		}

src/components/pluginComponents/formComponents/JsonForm.vue

0 → 100644

+50 −0

Original line number	Diff line number	Diff line
		<template>
		<div>
		<component v-for="(field, index) in schema"
		:key="index"
		:is="field.fieldType"
		v-model="formData[field.name]"
		v-bind="field">

		</component>
		</div>
		</template>

		<script>

		import numberInput from "./fieldComponents/numberInput";
		import selectList from "./fieldComponents/selectList";
		import textInput from "./fieldComponents/textInput";
		import htmlBlock from "./fieldComponents/htmlBlock";

		export default {
		name: 'JsonForm',

		components: {
		numberInput,
		selectList,
		textInput,
		htmlBlock
		},

		props: {
		'schema': {
		type: Array,
		required: true
		}
		},

		data: function () {
		return {
		formData: {}
		}
		},

		created: function () {
		// `this` points to the vm instance
		console.log(this.schema)
		}
		}
		</script>

		<style scoped></style>
		No newline at end of file

src/components/pluginComponents/formComponents/fieldComponents/htmlBlock.vue

0 → 100644

+18 −0

Original line number	Diff line number	Diff line
		<template>
		<div>
		<p v-html="content"></p>
		</div>
		</template>

		<script>
		export default {
		name: 'textInput',
		props: [
		'label',
		'name',
		'content'
		]
		}
		</script>

		<style scoped></style>
		No newline at end of file

src/components/pluginComponents/formComponents/fieldComponents/numberInput.vue

0 → 100644

+23 −0

Original line number	Diff line number	Diff line
		<template>
		<div>
		<label>{{label}}</label>

		<input
		type="number"
		:name="name"
		:value="value"
		@input="$emit('input', $event.target.value)"
		:placeholder="placeholder"
		>

		</div>
		</template>

		<script>

		export default {
		name: 'numberInput',
		props: ['placeholder', 'label', 'name', 'value']
		}

		</script>
		No newline at end of file

src/components/pluginComponents/formComponents/fieldComponents/selectList.vue

0 → 100644

+29 −0

Original line number	Diff line number	Diff line
		<template>
		<div>
		<label>{{label}}</label>
		<select :multiple="multi"
		:value="value"
		@input="$emit('input',
		$event.target.value)">
		<option v-for="option in options"
		:key="option">
		{{option}}
		</option>
		</select>
		</div>
		</template>

		<script>
		export default {
		name: 'selectList',
		props: [
		'multi',
		'options',
		'name',
		'label',
		'value'
		]
		}
		</script>

		<style scoped></style>
		No newline at end of file