rs-frontend/src/views/Applications.vue

<template>
	<div>
		<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 v-if="getUser && getUser.rank === undefined">
			<router-link to="/myapp" v-if="getUser.appstate === 0">Create application.</router-link>
			<router-link to="/myapp" v-else-if="getUser.appstate === 1">Edit application.</router-link>
		</div>

		<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 () {
		},
		computed: {
			getUser() {
				return this.$store.state.user
			},
		},
		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 scoped>
	.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>