Possibility to submit apps

They will only be submitted, if all conditions are okay.

src/components/ApplicationInputSwitch.vue

@@ -1,8 +1,8 @@
 <template>
 	<div>
-		<LimitedTextField v-if="type === 'text-box-limited'" :highlight="highlight" :options="options"/>
-		<TextField v-else-if="type === 'text-box'" />
-		<LineInput v-else-if="type === 'line'" />
+		<LimitedTextField v-if="type === 'text-box-limited'" :highlight="highlight" :options="options" ref="element"/>
+		<TextField v-else-if="type === 'text-box'" :highlight="highlight" :options="options" ref="element"/>
+		<LineInput v-else-if="type === 'line'" :highlight="highlight" :options="options" ref="element"/>
 
 		<span v-else>= OOPS, this input type '{{ type }}' has to be implemented.</span>
 	</div>
@@ -19,6 +19,17 @@
 			'highlight',
 			'options',
 		],
+		methods: {
+			getContent() {
+				return this.$refs.element === undefined ? '' : this.$refs.element.getContent()
+			},
+		},
+		computed: {
+			isOkay() {
+				//TODO: Get rid of undefined (Implment all input types)
+				return this.$refs.element === undefined || this.$refs.element.isOkay
+			},
+		},
 		components: {
 			LimitedTextField,
 			TextField,

src/components/inputtypes/LimitedTextField.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="width">
-		<textarea v-bind:class="{ textarea: true, not_enough: highlight && !isEnough, enough: highlight && isEnough }" type="text" v-model="inputText" />
+		<textarea class="textarea" :class="{not_enough: highlight && !isOkay, enough: highlight && isOkay}" type="text" v-model="inputText" />
 		<SimpleProgressBar class="progbar" :count="len" :max="options.min" :steps="options.steps"/>
 	</div>
 </template>
@@ -14,21 +14,23 @@
 				inputText: '',
 			}
 		},
-
 		props: [
 			'highlight',
 			'options'
 		],
-
-		computed: {
-			isEnough() {
-				return this.inputText.length >= this.options.min
+		methods: {
+			getContent() {
+				return this.inputText
 			},
+		},
+		computed: {
 			len() {
 				return this.inputText.length
-			}
+			},
+			isOkay() {
+				return this.inputText.length >= this.options.min
+			},
 		},
-
 		components: {
 			SimpleProgressBar,
 		},

src/components/inputtypes/LineInput.vue

@@ -1,9 +1,29 @@
 <template>
 	<div class="width">
-		<input class="textarea" type="text" />
+		<input class="textarea" type="text" v-model="inputText"/>
 	</div>
 </template>
 
+<script>
+	export default {
+		data() {
+			return {
+				inputText: '',
+			}
+		},
+		methods: {
+			getContent() {
+				return this.inputText
+			},
+		},
+		computed: {
+			isOkay() {
+				return true
+			},
+		},
+	}
+</script>
+
 <style scoped>
 	.textarea {
 		width: 50%;

src/components/inputtypes/TextField.vue

@@ -1,9 +1,29 @@
 <template>
 	<div class="width">
-		<textarea class="textarea" type="text" />
+		<textarea class="textarea" type="text" v-model="inputText"/>
 	</div>
 </template>
 
+<script>
+	export default {
+		data() {
+			return {
+				inputText: '',
+			}
+		},
+		methods: {
+			getContent() {
+				return this.inputText
+			},
+		},
+		computed: {
+			isOkay() {
+				return true
+			},
+		},
+	}
+</script>
+
 <style scoped>
 	.textarea {
 		width: 100%;

src/views/CreateApplication.vue

@@ -7,10 +7,11 @@
 				<h3 class="question">- {{ element.text }}</h3>
 				<span v-if="element.optional"> (Optional)</span>
 				<br>
-				<ApplicationInputSwitch class="textfield" :highlight="highlight" :type="element.type" :options="element.options"></ApplicationInputSwitch>
+				<ApplicationInputSwitch class="textfield" :highlight="highlight" :type="element.type" :options="element.options" :ref="index"></ApplicationInputSwitch>
 				<span class="hint">{{ element.hint }}</span>
 			</div>
 			<button @click="update">Create/Update</button>
+			<span class="error"> {{ error }}</span>
 		</div>
 		<span v-else>You are not logged in.</span>
 	</div>
@@ -25,6 +26,7 @@
 				instruction: '',
 				pattern: null,
 				highlight: false,
+				error: '',
 			}
 		},
 		created () {
@@ -39,8 +41,43 @@
 			},
 		},
 		methods: {
+			isReady() {
+				for(let key in this.$refs) {
+					//TBI What is that 0
+					let el = this.$refs[key][0]
+
+					if(!el.isOkay) {
+						return false;
+					}
+				}
+
+				return true
+			},
+			getContent() {
+				let answers = []
+				for(let key in this.$refs) {
+					//TBI What is that 0
+					answers.push(this.$refs[key][0].getContent())
+				}
+
+				return answers
+			},
 			update() {
-				this.highlight = true
+				if(this.isReady()) {
+					this.core.post('/application', {
+						//TODO: Pattern, User-token
+						answers: this.getContent(),
+						creator: this.user.username,
+					}).then((response) => {
+						
+						console.log('Response: ', response.data);
+					});
+
+					this.error = ''
+				} else {
+					this.highlight = true
+					this.error = 'Please fill the required fields'
+				}
 			},
 		},
 		components: {
@@ -62,4 +99,8 @@
 	.hint {
 		font-size: 0.8em;
 	}
+
+	.error {
+		color: red;
+	}
 </style>