feat: added page to list, see and add schemas, moved account list to own page, added navbar, and a few small changes

backend/logic/io.js → backend/logic/io/index.js

@@ -2,7 +2,7 @@
 
 // This file contains all the logic for Socket.IO
 
-const coreClass = require("../core");
+const coreClass = require("../../core");
 
 const async = require("async");
 const config = require("config");
@@ -167,6 +167,36 @@ module.exports = class extends coreClass {
 					});
 				},
 
+				"getAccountSchemas": cb => {
+					this.mongo.models.accountSchema.find({}, null, { sort: "-version" }, (err, res) => {
+						if (err || !res)
+							return cb({
+								status: "failure",
+								message: "Something went wrong."
+							});
+						else
+							return cb({
+								status: "success",
+								schemas: res
+							});
+					});
+				},
+
+				"getAccountSchemaById": (cb, schemaId) => {
+					this.mongo.models.accountSchema.findById(schemaId, (err, res) => {
+						if (err || !res)
+							return cb({
+								status: "failure",
+								message: "Something went wrong."
+							});
+						else
+							return cb({
+								status: "success",
+								schema: res
+							});
+					});
+				},
+
 				"importAccountSchema": (cb, name) => {
 					let schema = require(`../schemas/${name}`);
 					this.mongo.models.accountSchema.create(schema, (err) => {

frontend/main.js

@@ -20,11 +20,23 @@ const router = new VueRouter({
 			component: () => import("./vue/pages/NotFound.vue")
 		},
 		{
-			path: "/add",
+			path: "/accounts",
+			component: () => import("./vue/pages/Accounts.vue")
+		},
+		{
+			path: "/schemas",
+			component: () => import("./vue/pages/Schemas.vue")
+		},
+		{
+			path: "/schemas/:schemaId",
+			component: () => import("./vue/pages/ViewSchema.vue")
+		},
+		{
+			path: "/accounts/add",
 			component: () => import("./vue/pages/AddAccount.vue")
 		},
 		{
-			path: "/edit/:accountId",
+			path: "/accounts/edit/:accountId",
 			component: () => import("./vue/pages/EditAccount.vue")
 		},
 	]
@@ -34,6 +46,7 @@ const router = new VueRouter({
 // 	next();
 // });
 
+lofig.folder = "/config/default.json";
 lofig.get("backendUrl").then(url => {
 	io.init(url);
 });

frontend/vue/App.vue

@@ -1,9 +1,15 @@
 <template>
-	<router-view />
+	<div>
+		<navbar/>
+		<router-view />
+	</div>
 </template>
 
 <script>
+import Navbar from './components/Navbar.vue';
+
 export default {
+	components: { Navbar },
 	replace: false,
 	methods: {
 		

frontend/vue/components/AccountForm.vue

@@ -1,5 +1,6 @@
 <template>
 	<form>
+		<p><b>Schema version</b>: {{account.version}}</p>
 		<field
 			v-for="field in fields"
 			:name="field.name"

frontend/vue/components/AccountsList.vue

@@ -3,7 +3,7 @@
 		<div class="account" v-for="(account, accountIndex) in accounts">
 			{{ account.fields.name[0].name }}
 			<router-link
-				:to="`edit/${account._id}`"
+				:to="`/accounts/edit/${account._id}`"
 			>
 				Edit account
 			</router-link>

frontend/vue/components/Navbar.vue

@@ -0,0 +1,28 @@
+<template>
+	<navbar>
+		<router-link to="/">Homepage</router-link>
+		<router-link to="/accounts">Accounts</router-link>
+		<router-link to="/schemas">Schemas</router-link>
+	</navbar>
+</template>
+
+<script>
+export default {
+	components: {},
+	data: () => {
+		return {
+			
+		}
+	},
+	methods: {
+		
+	},
+	mounted() {
+		
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

frontend/vue/pages/Accounts.vue

@@ -0,0 +1,42 @@
+<template>
+	<main>
+		<h1>Accounts</h1>
+		<router-link to="/accounts/add">
+			Add account
+		</router-link>
+		<accounts-list
+			:accounts="accounts"
+		/>
+	</main>
+</template>
+
+<script>
+import io from "../../io.js";
+
+import AccountsList from '../components/AccountsList.vue';
+
+export default {
+	components: { AccountsList },
+	data: () => {
+		return {
+			accounts: [],
+		}
+	},
+	methods: {
+		
+	},
+	mounted() {
+		io.getSocket(socket => {
+			this.socket = socket;
+
+			socket.emit("getAccounts", res => {
+				this.accounts = res.accounts;
+			});
+		});
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

frontend/vue/pages/Homepage.vue

@@ -1,48 +1,25 @@
 <template>
 	<div>
-		<input v-model="importAccountSchemaName"/>
-		<button @click="importAccountSchema()">Import account schema</button>
-		<hr />
-		<h1>Sites</h1>
-		<router-link to="/add">
-			Add account
-		</router-link>
-		<accounts-list
-			:accounts="accounts"
-		/>
+		
 	</div>
 </template>
 
 <script>
-import Field from '../components/Field.vue';
-import AccountsList from '../components/AccountsList.vue';
-
 import io from "../../io.js";
 
 export default {
-	components: { Field, AccountsList },
+	components: {},
 	data: () => {
 		return {
-			accounts: [],
-			importAccountSchemaName: ""
+			
 		}
 	},
 	methods: {
-		importAccountSchema() {
-			this.socket.emit("importAccountSchema", this.importAccountSchemaName, (res) => {
-				console.log(res);
-				alert(res.status);
-			});
-		}
+		
 	},
 	mounted() {
 		io.getSocket(socket => {
 			this.socket = socket;
-
-			socket.emit("getAccounts", res => {
-				this.accounts = res.accounts;
-				//this.accounts = ["test", "test1", "test2"];
-			});
 		});
 	}
 };

frontend/vue/pages/Schemas.vue

@@ -0,0 +1,45 @@
+<template>
+	<main>
+		<input v-model="importAccountSchemaName"/>
+		<button @click="importAccountSchema()">Import account schema</button>
+
+		<router-link v-for="schema in schemas" :to="`/schemas/${schema._id}`" class="schema-item">{{ schema.name }} v{{ schema.version }}</router-link>
+	</main>
+</template>
+
+<script>
+import io from "../../io.js";
+
+export default {
+	components: {},
+	data: () => {
+		return {
+			importAccountSchemaName: "",
+			schemas: []
+		}
+	},
+	methods: {
+		importAccountSchema() {
+			this.socket.emit("importAccountSchema", this.importAccountSchemaName, (res) => {
+				console.log(res);
+				alert(res.status);
+			});
+		}
+	},
+	mounted() {
+		io.getSocket(socket => {
+			this.socket = socket;
+
+			this.socket.emit("getAccountSchemas", res => {
+				this.schemas = res.schemas;
+			});
+		});
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.schema-item {
+	display: block;
+}
+</style>

frontend/vue/pages/ViewSchema.vue

@@ -0,0 +1,71 @@
+<template>
+	<main v-if="schema">
+		<p><b>Name</b>: {{ schema.name }}</p>
+		<p><b>Description</b>: {{ schema.description }}</p>
+		<p><b>Version</b>: v{{ schema.version }}</p>
+		<p><b>Fields</b>: </p>
+		<div class="fields-container">
+			<div v-for="field in schema.fields" class="field-item">
+				<p><b>Field ID</b>: {{ field.fieldId }}</p>
+				<p><b>Name</b>: {{ field.name }}</p>
+				<p><b>Min entries</b>: {{ field.minEntries }}</p>
+				<p><b>Max entries</b>: {{ field.maxEntries }}</p>
+				<p><b>Field types</b>:</p>
+				<div class="field-types-container">
+					<div v-for="fieldType in field.fieldTypes" class="field-type-item">
+						<p><b>Field type ID</b>: {{ fieldType.fieldTypeId }}</p>
+						<p><b>Type</b>: {{ fieldType.type }}</p>
+						<p><b>Fill</b>: {{ fieldType.fill }}</p>
+						<p v-if="fieldType.type === 'select'"><b>Options</b>: </p>
+						<div v-if="fieldType.type === 'select'">
+							<div v-for="option in fieldType.options" class="option-item">
+								<p><b>Text</b>: {{ option.text }}</p>
+								<p><b>Value</b>: {{ option.value }}</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				
+			</div>
+		</div>
+	</main>
+</template>
+
+<script>
+import io from "../../io.js";
+
+export default {
+	components: {},
+	data: () => {
+		return {
+			schema: null
+		}
+	},
+	props: {
+	},
+	methods: {
+		
+	},
+	mounted() {
+		this.schemaId = this.$route.params.schemaId;
+		io.getSocket(socket => {
+			this.socket = socket;
+
+			this.socket.emit("getAccountSchemaById", this.schemaId, res => {
+				if (res.status === "success") {
+					this.schema = res.schema;
+				}
+			});
+		});
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.field-item, .field-type-item, .option-item {
+	padding-left: 25px;
+	border: 1px solid black;
+	margin-right: -1px;
+	margin-bottom: -1px;
+}
+</style>