Adding sample Applications

Adding Applications list and application view.
Data will be "loaded" after component has been created.

src/router.js

@@ -27,6 +27,12 @@ export default new Router({
 			name: 'applications',
 			component: () => import(/* webpackChunkName: "applications" */ './views/Applications.vue')
 		},
+		{
+			path: '/application/:id',
+			name: 'application',
+			props: true,
+			component: () => import(/* webpackChunkName: "applications" */ './views/Application.vue')
+		},
 		{
 			path: '*',
 			name: 'notFound',

src/views/Application.vue

@@ -0,0 +1,96 @@
+<template>
+	<div>
+		<h1>Application with ID {{ id }}</h1>
+		<span v-if="error !== ''">{{ error }}</span>
+		<div class="appdata" v-else>
+			<p>Username: {{ appdata.username }}</p>
+			<div class="pair" v-for="(value, key) in appdata.fields" :key="key">
+				<h4>{{ key }}</h4>
+				<p>{{ value }}</p>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data () {
+			return {
+				appdata: '',
+				error: '',
+			}
+		},
+		props: [
+			'id'
+		],
+		created () {
+			if(!/^\+?(0|[1-9]\d*)$/.test(this.id)) {
+				this.error = 'Application ID has to be a positive integer.'
+				return
+			}
+
+			let apps = {
+				1: {
+					username: 'Joke',
+					fields: {
+						'Age?': '69',
+						'U like de pancake?': 'Ye I love them so much',
+						'Will Dutch survive?': 'No he lives underwater.',
+						'Op?': 'Yes please, cause I am from P L A N E T M I N E C R A F T',
+					}
+				},
+				2: {
+					username: 'Josh (KingTempest07)',
+					fields: {
+						'Age:': '11',
+						'Why are you insterested in joining this server?': 'I love redstone, and I am not the best, at all, but I am trying to learn, so I thought maybe a server with some good redstone engineers could help! Also, I have no online friends, really, just real life, so I have been looking for servers on many different games, like: Terraria, Minecraft, etc.',
+						'Current redstone knowledge:': 'Let\'s just say, I\'m terrible. I watch tons of Mumbo Jumbo, which is both entertaining and helpful, but I am still better at building than redstone. I know how to do things like: minecart systems, pulse extenders, double piston extenders, monostable circuits, some piston doors, do slab/redstone torch elevators, etc., but I can\'t really find was to compact or combine them easily!',
+						'Past redstone experience:': 'I have made 2x2 piston doors with pressure plates on both sides, and only used around a 8x3 block area with redstone torch elevators, and I can also make some simple things, like item transport systems with water and ice, hoppers, and I\'m not that good with storage systems, but I\'m getting there!',
+						'About how often do you play Minecraft?': '1-5 hours per day',
+						'What kind of creations would you like to build on this server?': 'Maybe some mob farms, storage systems, and minigames, but not so soon for minigames, but I might get there!',
+						'State:': 'Approved',
+					}
+				},
+				3: {
+					username: 'Jack',
+				},
+				4: {
+					username: 'John',
+				},
+				5: {
+					username: 'Jeff',
+				},
+			}
+
+			if(!apps.hasOwnProperty(this.id))
+			{
+				this.error = 'Application does not exist.'
+				return
+			}
+
+			this.appdata = apps[this.id]
+		},
+		methods: {
+		},
+	}
+</script>
+
+<style>
+	.appdata {
+		/width: 63em;
+		/width: 1024px;
+	}
+	.pair {
+		margin: 0.7em 0.3em 0.7em 0.3em;
+	}
+
+	.pair h4 {
+		margin: 0;
+	}
+
+	.pair p {
+		margin: 0;
+		margin-top: 0.2em;
+		margin-left: 0.5em;
+	}
+</style>

src/views/Applications.vue

@@ -1,6 +1,105 @@
 <template>
 	<div>
-		<h1>Application</h1>
-		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.<br>
+		<h1>Applications:</h1>
+		<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 class="app-container">
+			<router-link class="app-entry" :to="{ name: 'application', params: { id: app.id }}" v-for="app in apps" :key="app.id">
+				<p>Name: {{ app.playername }} </p>
+				<p>State: {{ passedChar(app) }}</p>
+				<p>Posted: {{ readableTime(app.date) }}</p>
+			</router-link>
+		</div>
 	</div>
 </template>
+
+<script>
+	export default {
+		data () {
+			return {
+				apps: [
+					{
+						id: 5,
+						playername: 'Jeff',
+						date: 1539202084,
+					},
+					{
+						id: 4,
+						playername: 'John',
+						date: 1539102084,
+						passed: false,
+					},
+					{
+						id: 3,
+						playername: 'Jack',
+						date: 1529202084,
+						passed: true,
+					},
+					{
+						id: 2,
+						playername: 'Josh',
+						date: 1528202084,
+						passed: true,
+					},
+					{
+						id: 1,
+						playername: 'Joke',
+						date: 1439202084,
+						passed: false,
+					},
+				],
+			}
+		},
+		created () {
+		},
+		methods: {
+			readableTime(timestamp) {
+				let date = new Date(timestamp * 1000)
+				return date.getFullYear() + '.' + (date.getMonth()+1) + '.' + date.getDate() + ' ' + date.getHours() + ':' + this.pad(date.getMinutes())
+			},
+			pad(input) {
+				if(input < 10) {
+					return '0' + input
+				} else {
+					return input
+				}
+			},
+			passedChar(app) {
+				if(typeof app.passed === "undefined") {
+					return '...'
+				} else {
+					return app.passed ? '👍' : '👎'
+				}
+			}
+		},
+	}
+</script>
+
+<style>
+	.app-container {
+		display: block;
+	}
+
+	.app-entry {
+		display: inline-block;
+
+		border: 1px solid;
+		margin: 0.5em;
+		padding: 0.5em;
+
+		color: #aaa;
+		text-decoration: none;
+	}
+
+	.app-entry:visited {
+		color: #aaa;
+	}
+
+	.app-entry:hover {
+		color: #ddd;
+	}
+
+	.app-entry p {
+		margin: 0;
+	}
+</style>