Added new generic field components (463bec6e) · Commits · OpenFlexure / openflexure-microscope-server

src/components/controlComponents/paneCapture.vue

+13 −63

Original line number	Diff line number	Diff line
		@@ -42,22 +42,7 @@
		<a class="uk-accordion-title" href="#">Metadata</a>
		<div class="uk-accordion-content">

		<form @submit.prevent="handleMetadataSubmit">
		<div class="uk-margin-remove uk-flex uk-flex-middle">
		<div class="uk-margin-remove-top uk-padding-remove uk-grid-small uk-width-expand" uk-grid>
		<div class="uk-margin-remove uk-width-1-2"><input v-model="newMetadata.key" class="uk-input uk-form-width-small uk-form-small" type="text" name="flavor" placeholder="Key"></div>
		<div class="uk-margin-remove uk-width-1-2"><input v-model="newMetadata.value" class="uk-input uk-form-width-small uk-form-small" type="text" name="flavor" placeholder="Value"></div>
		</div>

		<a href="#" v-on:click="handleMetadataSubmit()" class="uk-icon uk-margin-left"><i class="material-icons">add_circle</i></a>

		</div>
		</form>

		<div v-for="(value, key) in customMetadata" :key="key" class="uk-width-1-1 uk-margin-small uk-margin-remove-left uk-margin-remove-right uk-flex uk-flex-middle">
		<div class="uk-margin-remove-top uk-padding-remove uk-width-expand"><b>{{ key }}: </b>{{ value }}</div>
		<a href="#" v-on:click="delMetadataKey(key)" class="uk-icon uk-width-auto"><i class="material-icons">delete</i></a>
		</div>
		<keyvalList v-model="metadata"/>

		</div>
		</li>
		@@ -65,23 +50,7 @@
		<li>
		<a class="uk-accordion-title" href="#">Tags</a>
		<div class="uk-accordion-content">

		<form @submit.prevent="handleTagSubmit">
		<div class="uk-margin-small uk-flex uk-flex-middle">

		<div class="uk-margin-remove-top uk-width-expand">
		<div class="uk-inline uk-width-1-1">
		<span class="uk-form-icon"><i class="material-icons">label</i></span>
		<input v-model="newTag" class="uk-input uk-form-small" type="text" name="flavor" placeholder="Tag">
		</div>
		</div>

		<a href="#" v-on:click="handleTagSubmit()" class="uk-icon uk-margin-left"><i class="material-icons">add_circle</i></a>
		</div>
		</form>

		<span v-for="tag in tags" :key="tag" v-on:click="delTag(tag)" class="uk-label uk-margin-small-right deletable-label"> {{ tag }} </span>

		<tagList v-model="tags"/>
		</div>
		</li>

		@@ -185,10 +154,19 @@
		<script>
		import axios from 'axios'

		import tagList from "../fieldComponents/tagList"
		import keyvalList from "../fieldComponents/keyvalList"

		// Export main app
		export default {
		name: 'paneCapture',

		components: {
		tagList,
		keyvalList
		},


		data: function () {
		return {
		filename: '',
		@@ -212,42 +190,14 @@ export default {
		z: 5
		},
		resizeDims: [640, 480],
		newTag: "",
		tags: [],
		customMetadata: {
		metadata: {
		Client: `${process.env.PACKAGE.name}.${process.env.PACKAGE.version}`
		},
		newMetadata: {
		key: "",
		value: ""
		}
		}
		},

		methods: {
		handleMetadataSubmit: function () {
		console.log("Adding metadata");
		this.customMetadata[this.newMetadata.key] = this.newMetadata.value
		this.newMetadata.key = "";
		this.newMetadata.value = "";
		},

		delMetadataKey: function (key) {
		this.$delete(this.customMetadata, key)
		},

		handleTagSubmit: function () {
		this.tags.push(this.newTag)
		this.newTag = "";
		},

		delTag: function (tag) {
		console.log(tag)
		var index = this.tags.indexOf(tag);
		if (index > -1) {
		this.tags.splice(index, 1);
		}
		},

		handleCapture: function() {
		var payload = this.basePayload
		@@ -345,7 +295,7 @@ export default {
		}

		// Additional metadata
		payload.metadata = this.customMetadata
		payload.metadata = this.metadata
		payload.tags = this.tags

		// Attach notes

src/components/pluginComponents/formComponents/fieldComponents/checkList.vue→src/components/fieldComponents/checkList.vue

+0 −0

File moved.

View file

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

+0 −0

File moved.

View file

src/components/fieldComponents/keyvalList.vue

0 → 100644

+71 −0

Original line number	Diff line number	Diff line
		<template>
		<div>
		<form @submit.prevent="handleMetadataSubmit">
		<div class="uk-margin-remove uk-flex uk-flex-middle">
		<div class="uk-margin-remove-top uk-padding-remove uk-grid-small uk-width-expand" uk-grid>
		<div class="uk-margin-remove uk-width-1-2"><input v-model="newMetadata.key" class="uk-input uk-form-width-small uk-form-small" type="text" name="flavor" placeholder="Key"></div>
		<div class="uk-margin-remove uk-width-1-2"><input v-model="newMetadata.value" class="uk-input uk-form-width-small uk-form-small" type="text" name="flavor" placeholder="Value"></div>
		</div>

		<a href="#" v-on:click="handleMetadataSubmit()" class="uk-icon uk-margin-left"><i class="material-icons">add_circle</i></a>

		</div>
		</form>

		<div v-for="(val, key) in value" :key="key" class="uk-width-1-1 uk-margin-small uk-margin-remove-left uk-margin-remove-right uk-flex uk-flex-middle">
		<div class="uk-margin-remove-top uk-padding-remove uk-width-expand"><b>{{ key }}: </b>{{ val }}</div>
		<a href="#" v-on:click="delMetadataKey(key)" class="uk-icon uk-width-auto"><i class="material-icons">delete</i></a>
		</div>

		</div>
		</template>

		<script>
		export default {
		name: 'keyvalList',

		data: function () {
		return {
		newMetadata: {
		key: "",
		value: ""
		}
		}
		},

		props: [
		'value'
		],

		methods: {
		handleMetadataSubmit: function () {
		var newSelected = {}

		if (this.value != null) {
		Object.assign(newSelected, this.value)
		}

		newSelected[this.newMetadata.key] = this.newMetadata.value
		this.newMetadata.key = "";
		this.newMetadata.value = "";

		this.$emit('input', newSelected)
		},

		delMetadataKey: function (key) {
		var newSelected = {}

		if (this.value != null) {
		Object.assign(newSelected, this.value)
		}

		this.$delete(newSelected, key)

		this.$emit('input', newSelected)
		},

		}
		}
		</script>

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

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

+0 −0

File moved.

View file