src/scripts/core.js

@@ -3,6 +3,11 @@ import axios from "axios";
 export default class {
 	constructor(vuex) {
 		this.vuex = vuex
+		if(process.env.NODE_ENV !== 'production') {
+			this.api = 'http://localhost:8081'
+		} else {
+			this.api = 'https://live.ecconia.de'
+		}
 	}
 
 	commit(method, data)
@@ -13,7 +18,7 @@ export default class {
 	post(path, data)
 	{
 		return axios
-				.post('https://live.ecconia.de' + path, data)
+				.post(this.api + path, data)
 				.catch((error) => {
 					console.error('Error: ', error)
 				})
@@ -22,7 +27,7 @@ export default class {
 	get(path)
 	{
 		return axios
-				.get('https://live.ecconia.de' + path)
+				.get(this.api + path)
 				.catch((error) => {
 					console.error('Error: ', error)
 				})

src/views/Application.vue

@@ -24,51 +24,9 @@
 			'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]
+			this.core.get('/application/' + this.id).then((response) => {
+				this.appdata = response.data;
+			})
 		},
 		methods: {
 		},

src/views/Applications.vue

@@ -10,9 +10,9 @@
 
 		<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>Name: {{ app.username }} </p>
 				<p>State: {{ passedChar(app) }}</p>
-				<p>Posted: {{ readableTime(app.date) }}</p>
+				<p>Posted: {{ readableTime(app.time) }}</p>
 			</router-link>
 		</div>
 	</div>
@@ -22,40 +22,13 @@
 	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,
-					},
-				],
+				apps: [],
 			}
 		},
 		created () {
+			this.core.get('/applications').then((response) => {
+				this.apps = response.data;
+			})
 		},
 		computed: {
 			getUser() {
@@ -75,10 +48,10 @@
 				}
 			},
 			passedChar(app) {
-				if(typeof app.passed === "undefined") {
+				if(typeof app.state === "undefined") {
 					return '...'
 				} else {
-					return app.passed ? '👍' : '👎'
+					return app.state ? '👍' : '👎'
 				}
 			}
 		},

src/views/Devblog.vue

@@ -20,81 +20,10 @@
 			}
 		},
 		created () {
-			this.parseBlog(`
-				Ecconia's dusty server-machine
-				-	For this project the webserver owned by Ecconia has been started again and a fresh Ubuntu 18.04 has been installed.
-				-	Basic setup has been made, editing bash, setting up ssh and vim.
-
-				Sever software
-				-	Nginx shall be the server for this project, its easy to setup and all config files are at one place.
-
-				Security
-				-	All traffic will be routed over Cloudflare. The connections from and to Cloudflare are encrypted with SSL.
-				-	The connection is as secure as Cloudflare is (lets trust it...). Cloudflare mainly caches files and protects against DDOS.
-
-				Vue-Framework added to website
-				-	Vue is a framework which uses javascript to manipulate the HTML-DOM of the browser. This allows very easy web-developing.
-				-	Nice feature: Updating the website according to JS variables.
-				-	Downside: SEO may fail.
-
-				After reading millions of documentation
-				-	The first simple version of the website has been written, a single HTMl file contains the whole website.
-
-				Vue-Router
-				-	The website is using Vue-Router it allows natural page switching without actually doing so. The content will just be replaced by Vue.
-
-				The small steps
-				-	The start page as well as the application page shall function the same as on the current website. Additional this devblog has been added. An Impressum is a must have as soon as the server is located in germany.
-
-				Finally backend for frontend
-				-	Vue has "components" each mainpage is one, but later other parts of the website may be components (buttons, inputs, pager, posts etc....)
-				-	These components may be bundled and can be loaded on demand, this can be done by the frontend, by loading the components.
-				-	Webpack is a software which analyzes the source code on the server and bundles it as well as processes it. That way components can be bundled and provided. Additional this provides a fancy way to define components in single files. The code to load components will be generated by Webpack. Yay, less programming less mistakes.
-
-				Transfered everything to new backend
-				-	With the new backend a new website structure has been created. The old pages had been transfered to the correct positions in the new backend.
-				-	Now that the backend is working, the frontend may be developed.
-
-				Update for the devblog
-				-	The Development Blog got a new "design" and finally an update to its content.
-				-	One variable holds all the entries and will be parsed into a Vue entries array which are automatically visible when added.
-
-				Update introductions
-				-	Startpage and Devblog have been rewritten
-
-				
-			`)
+			this.core.get('/devblog').then((response) => {
+				this.entries = response.data;
+			})
 		},
-		methods: {
-			parseBlog(blog) {
-				let t = blog.split('\n')
-				let entries = []
-				let currentEntry = {
-					title: t[1],
-					paragraphs: []
-				}
-
-				for (var i = 2; i < t.length - 1; i++) {
-					let line = t[i].trimStart()
-					if(!line) {
-						continue
-					}
-					if (line.startsWith('-') === true) {
-						currentEntry.paragraphs.push(line.substr(1).trimStart())
-					} else {
-						entries.push(currentEntry)
-						currentEntry = {
-							title: line,
-							paragraphs: []
-						}
-					}
-				}
-
-				entries.push(currentEntry)
-
-				this.entries = entries
-			},
-		}
 	}
 </script>