Quality of life changes

backend/perks/views.py

@@ -6,10 +6,7 @@
 #
 # Distributed under terms of the BSD-3-Clause license.
 
-import json
-
-from os import listdir, environ
-from os.path import isfile, join
+from os import environ
 from rest_framework.views import APIView
 from rest_framework.response import Response
 from rest_framework import authentication  # , permissions
@@ -59,12 +56,6 @@ class Perks(APIView):
 			'links': [],
 		}
 
-		#  link ={
-			#  'source': link_source,
-			#  'target': i,
-			#  'value': 1,
-		#  }
-
 		tree = Tree.objects.get(id=tree_id)
 		perks = list(Perk.objects.filter(trees__name__contains=tree.name))
 		all_perks = list(perks)
@@ -84,8 +75,11 @@ class Perks(APIView):
 				})
 
 		for perk in all_perks:
-			serialized_perk = PerkSerializer(perk)
-			output_data['nodes'].append(serialized_perk.data)
+			serialized_perk = PerkSerializer(perk).data
+			tree_list = perk.trees.all()
+			if tree_list and 'Skill Focus' not in perk.name and 'Ability Focus' not in perk.name and tree not in tree_list:
+				serialized_perk['name'] = f'{serialized_perk["name"]} ({tree_list[0].name})'
+			output_data['nodes'].append(serialized_perk)
 
 		return Response(output_data)
 

frontend/src/components/app.vue

@@ -7,6 +7,11 @@
 			<v-spacer></v-spacer>
 
 			<v-toolbar-items>
+				<v-text-field
+					hide-details
+					prepend-icon="search"
+					single-line
+				></v-text-field>
 				<v-btn
 					flat
 					v-for="item in toolbarItems"

frontend/src/components/perks.component.vue

@@ -13,9 +13,9 @@
 		>
 			<v-card>
 				<v-card-title
-				class="headline grey darken-2"
-				primary-title
-			>{{ perk }}</v-card-title>
+					class="headline grey darken-2"
+					primary-title
+				>{{ perk }}</v-card-title>
 				<v-card-text>{{ effect }}</v-card-text>
 				<v-divider></v-divider>
 				<v-card-actions>
@@ -58,17 +58,17 @@ export default {
 	},
 	methods: {
 		renderGraph(graphData) {
-			for (let i = 0; i < graphData.nodes.length; i++) {
-				graphData.nodes[i].name = `${graphData.nodes[i].name} [${graphData.nodes[i].level}]`;
-			}
-
 			const svg = d3.select('#perktree').append('svg');
 			const chart = new Sankey.Path(svg);
 			const nodes = graphData.nodes;
 
 			chart.nodeWidth(24)
 				.nodePadding(6)
+				.iterations(32)
 				.spread(false)
+				.name((n) => {
+					return `${n.name} [${n.level}]`;
+				})
 				.colorNodes((name, node) => {
 					return this.colorScheme[node.type];
 				})

frontend/src/components/upload-perks.component.vue

@@ -2,9 +2,46 @@
 	<v-layout>
 		<v-flex md12 lg6 offset-lg3>
 			<v-card class="admin-form-card">
-				<upload-button :fileChangedCallback="upload"/>
+				<upload-button
+					:fileChangedCallback="upload"
+					:title="buttonText"
+				>
+					<template
+						v-if="loading"
+						slot="icon-left"
+					>
+						<v-icon left>fas fa-spinner</v-icon>
+					</template>
+					<template
+						v-else
+						slot="icon-left"
+					>
+						<v-icon left>fas fa-upload</v-icon>
+					</template>
+				</upload-button>
 			</v-card>
 		</v-flex>
+		<v-dialog
+			v-model="dialog"
+			width="500"
+		>
+			<v-card>
+				<v-card-title
+					class="headline grey darken-2"
+					error-title
+				>Error while uploading</v-card-title>
+				<v-card-text>{{ error }}</v-card-text>
+				<v-divider></v-divider>
+				<v-card-actions>
+					<v-spacer></v-spacer>
+					<v-btn
+						color="primary"
+						flat
+						@click="dialog = false"
+					>Close</v-btn>
+				</v-card-actions>
+			</v-card>
+		</v-dialog>
 	</v-layout>
 </template>
 
@@ -20,16 +57,27 @@ export default {
 	},
 	data() {
 		return {
-			username: '',
-			password: '',
-			passwordConfirm: '',
-			admin: false,
-			messages: [],
+			loading: false,
+			error: '',
+			dialog: false,
 		};
 	},
+	computed: {
+		buttonText() {
+			return this.loading ? 'Loading...' : 'Upload'
+		},
+	},
 	methods: {
 		upload(file) {
-			PerksController.uploadPerks(file);
+			this.loading = true;
+			PerksController.uploadPerks(file).then(() => {
+				this.loading = false;
+				this.$router.push({ name: 'trees' });
+			}).catch((error) => {
+				this.error = error.response.data;
+				this.dialog = true;
+				this.loading = false;
+			});
 		},
 	},
 };

frontend/src/stylus/app.styl

@@ -1,11 +1,24 @@
-h1, h2, h3, h4, h5, h6, p, span
+*
 	color #ebdbb2
 
-.v-toolbar__title
-	a
+.v-toolbar
+	.v-toolbar__title
+		a
+			color #ebdbb2
+			text-decoration none
+
+	input
+		color #ebdbb2 !important
+		caret-color #fbf1c7
+
+	.v-btn, .v-icon
 		color #ebdbb2
-		text-decoration none
 
-.v-btn
-	color #ebdbb2 !important
+	.v-input__slot
+		&::before
+			border-color #bdae93 !important
+
+		&:hover
+			&::before
+				border-color #ebdbb2 !important
 

frontend/src/stylus/trees.styl

@@ -3,6 +3,7 @@
 		padding-top 3rem
 
 	.v-btn
+		color #ebdbb2 !important
 		height 6rem
 		margin 0.3rem
 		display flex