Adding application form WIP

Has to be enhanced, more input types.
Actually sending it.

src/components/SimpleProgressBar.vue

@@ -0,0 +1,61 @@
+<template>
+	<div>
+		<div class="background">
+			<div class="bar" ref="bar"/>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+			}
+		},
+		props: [
+			'count',
+			'max',
+			'steps',
+		],
+		methods: {
+			update: function () {
+				let per = this.count / this.max * 100
+				let bar = this.$refs.bar;
+
+				//Break down into steps.
+				per = Math.floor(per / this.stepsize) * this.stepsize
+
+				bar.style.width = per + '%'
+				bar.style.backgroundColor = per >= 100 ? '#0f0' : '#f00'
+			},
+		},
+		computed: {
+			stepsize() {
+				return 100 / this.steps
+			}
+		},
+		watch: {
+			count: function () {
+				this.update()
+			},
+		}
+	}
+</script>
+
+<style scoped>
+	.bar {
+		height: 3px;
+		min-width: 1%;
+		width: 0%;
+		max-width: 100%;
+		background-color: #f00;
+		transition: width 200ms ease-out;
+	}
+
+	.background {
+		height: 3px;
+		width: 100%;
+		max-width: 60em;
+		background-color: #aaa;
+	}
+</style>

src/components/inputtypes/LimitedTextField.vue

@@ -0,0 +1,64 @@
+<template>
+	<div class="width">
+		<textarea v-bind:class="{ textarea: true, not_enough: highlight && !isEnough, enough: highlight && isEnough }" type="text" v-model="inputText" />
+		<SimpleProgressBar class="progbar" :count="len" max="50" steps="5"/>
+	</div>
+</template>
+
+<script>
+	import SimpleProgressBar from '../SimpleProgressBar.vue'
+
+	export default {
+		data() {
+			return {
+				inputText: '',
+			}
+		},
+
+		props: [
+			'highlight'
+		],
+
+		computed: {
+			isEnough() {
+				return this.inputText.length >= 50
+			},
+			len() {
+				return this.inputText.length
+			}
+		},
+
+		mounted() {
+		},
+
+		components: {
+			SimpleProgressBar,
+		},
+	}
+</script>
+
+<style scoped>
+	.textarea {
+		width: 100%;
+		color: #fff;
+		resize: vertical;
+		min-height: 1.2em;
+		height: 1.2em;
+		border: 1px solid #aaa;
+		margin: auto;
+		background-color: #222;
+	}
+
+	.not_enough {
+		border: 1px solid #f00;
+	}
+
+	.enough {
+		border: 1px solid #0f0;	
+	}
+
+	.width {
+		width: 100%;
+		max-width: 60em;
+	}
+</style>

src/router.js

@@ -19,6 +19,10 @@ export default new Router({
 			path: '/login',
 			component: load('Login'),
 		},
+		{
+			path: '/create',
+			component: load('CreateApplication'),
+		},
 		{
 			path: '/impressum',
 			component: load('Impressum')
@@ -42,5 +46,5 @@ export default new Router({
 			path: '*',
 			component: load('NotFound')
 		},
-	]
+	],
 })

src/views/Applications.vue

@@ -4,7 +4,7 @@
 		<p>This area is basically the first big GOAL of the final product. Creating and Judging apps. The path to get here is quite long though, many other issues have to be solved first.</p>
 
 		<div v-if="getUser && getUser.rank === undefined">
-			<router-link to="/myapp" v-if="getUser.appstate === 0">Create application.</router-link>
+			<router-link to="/create" v-if="getUser.appstate === 0">Create application.</router-link>
 			<router-link to="/myapp" v-else-if="getUser.appstate === 1">Edit application.</router-link>
 		</div>
 

src/views/CreateApplication.vue

@@ -0,0 +1,64 @@
+<template>
+	<div>
+		<h1>Create application</h1>
+		<div v-if="user">
+			<span>{{ instruction }}</span>
+			<div class="question_block" v-for="(element, index) in pattern" :key="index">
+				<span class="question">{{ element.text }}</span>
+				<span v-if="element.optional"> (Optional)</span>
+				<br>
+				<LimitedTextField class="textfield" :highlight="highlight"></LimitedTextField>
+				<span class="hint">{{ element.hint }}</span>
+			</div>
+			<button @click="update">Create/Update</button>
+		</div>
+		<span v-else>You are not logged in.</span>
+	</div>
+</template>
+
+<script>
+	import LimitedTextField from '../components/inputtypes/LimitedTextField.vue'
+
+	export default {
+		data () {
+			return {
+				instruction: '',
+				pattern: null,
+				highlight: false,
+			}
+		},
+		created () {
+			this.core.get('/app-pattern').then((response) => {
+				this.instruction = response.data.instruction;
+				this.pattern = response.data.fields;
+			})
+		},
+		computed: {
+			user() {
+				return this.$store.state.user
+			},
+		},
+		methods: {
+			update() {
+				this.highlight = true
+			},
+		},
+		components: {
+			LimitedTextField,
+		},
+	}
+</script>
+
+<style scoped>
+	.question_block {
+		margin: 1em;
+	}
+
+	.question {
+		font-weight: bold;
+	}
+
+	.hint {
+		font-size: 0.7em;
+	}
+</style>