From 229a5dddcff7997fbd21a7867efcb48e162d37bb Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Thu, 1 Aug 2019 14:03:51 +0200
Subject: [PATCH] Added attribute property viewer, incomplete

---
 .../ui/library/LibraryContentsContainer.vue   |  2 +-
 app/imports/ui/pages/Library.vue              | 28 +++++++------
 app/imports/ui/properties/PropertyViewer.vue  |  4 ++
 .../ui/properties/viewers/AttributeViewer.vue | 39 +++++++++++++++++++
 .../viewers/shared/propertyViewerIndex.js     | 37 ++++++++++++++++++
 5 files changed, 98 insertions(+), 12 deletions(-)
 create mode 100644 app/imports/ui/properties/viewers/AttributeViewer.vue
 create mode 100644 app/imports/ui/properties/viewers/shared/propertyViewerIndex.js

diff --git a/app/imports/ui/library/LibraryContentsContainer.vue b/app/imports/ui/library/LibraryContentsContainer.vue
index 29bc6a5f..aa02157e 100644
--- a/app/imports/ui/library/LibraryContentsContainer.vue
+++ b/app/imports/ui/library/LibraryContentsContainer.vue
@@ -1,5 +1,5 @@
 <template lang="html">
-	<v-card-text style="width: initial; max-width: 50%; min-width: 320px;">
+	<v-card-text style="width: initial; max-width: 100%; min-width: 320px;">
 		<tree-node-list
 			v-if="libraryChildren"
 			:children="libraryChildren"
diff --git a/app/imports/ui/pages/Library.vue b/app/imports/ui/pages/Library.vue
index 437d5073..cfc0ff64 100644
--- a/app/imports/ui/pages/Library.vue
+++ b/app/imports/ui/pages/Library.vue
@@ -6,25 +6,30 @@
 			</v-btn>
 			{{library && library.name || 'Library'}}
 			<v-spacer/>
-			<v-btn-toggle>
-				<v-btn v-model="organize">
-					<v-icon class="mr-1">reorder</v-icon>
-					Organize
-				</v-btn>
-			</v-btn-toggle>
 		</template>
 		<v-card class="ma-4 layout row">
-			<library-contents-container
+			<div>
+				<v-toolbar>
+					<v-spacer/>
+					<v-btn-toggle>
+						<v-btn v-model="organize">
+							<v-icon class="mr-1">reorder</v-icon>
+							Organize
+						</v-btn>
+					</v-btn-toggle>
+				</v-toolbar>
+				<library-contents-container
 				:library-id="$route.params.id"
 				:organize="organize"
 				@selected="e => selected = e"
 				:selected-node-id="selected"
-			/>
+				/>
+			</div>
 			<v-divider vertical/>
 			<v-card-text
 			style="flex-grow: 1;"
 			>
-				<pre>{{selectedNode}}</pre>
+				<property-viewer :model="selectedNode"/>
 			</v-card-text>
 		</v-card>
 		<v-btn fixed fab bottom right
@@ -40,6 +45,7 @@
 <script>
 	import ToolbarLayout from '/imports/ui/layouts/ToolbarLayout.vue';
 	import LibraryContentsContainer from '/imports/ui/library/LibraryContentsContainer.vue';
+	import PropertyViewer from '/imports/ui/properties/PropertyViewer.vue';
 	import LibraryNodes, { insertNode } from '/imports/api/library/LibraryNodes.js';
 	import Libraries from '/imports/api/library/Libraries.js';
 	import { setDocToLastOrder } from '/imports/api/parenting/order.js';
@@ -48,6 +54,7 @@
 		components: {
 			ToolbarLayout,
 			LibraryContentsContainer,
+			PropertyViewer,
 		},
 		data(){ return {
 			organize: false,
@@ -81,8 +88,7 @@
 				return Libraries.findOne(this.$route.params.id);
 			},
 			selectedNode(){
-				let node = LibraryNodes.findOne(this.selected);
-				return JSON.stringify(node, null, 2);
+				return LibraryNodes.findOne(this.selected);
 			}
 		}
 	};
diff --git a/app/imports/ui/properties/PropertyViewer.vue b/app/imports/ui/properties/PropertyViewer.vue
index 4a744aef..730b37c0 100644
--- a/app/imports/ui/properties/PropertyViewer.vue
+++ b/app/imports/ui/properties/PropertyViewer.vue
@@ -8,7 +8,11 @@
 </template>
 
 <script>
+import propertyViewerIndex from '/imports/ui/properties/viewers/shared/propertyViewerIndex.js';
 export default {
+	components: {
+		...propertyViewerIndex,
+	},
 	props: {
 		model: {
 			type: Object,
diff --git a/app/imports/ui/properties/viewers/AttributeViewer.vue b/app/imports/ui/properties/viewers/AttributeViewer.vue
new file mode 100644
index 00000000..429ceccb
--- /dev/null
+++ b/app/imports/ui/properties/viewers/AttributeViewer.vue
@@ -0,0 +1,39 @@
+<template lang="html">
+	<div class="attribute-viewer">
+		<div class="title">
+			{{model.name}}
+		</div>
+		<div class="caption">
+			({{model.variableName}})
+		</div>
+		
+	</div>
+</template>
+
+<script>
+import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
+
+	export default {
+		props: {
+			model: Object,
+		},
+		methods: {
+			numberToSignedString,
+		},
+	}
+</script>
+
+<style lang="css" scoped>
+	.ability-value {
+		font-weight: 600;
+		font-size: 24px !important;
+		color: rgba(0, 0, 0, 0.54);
+	}
+	.mod, .ability-value {
+		text-align: center;
+		width: 100%;
+	}
+	.attribute-value {
+		text-align: center;
+	}
+</style>
diff --git a/app/imports/ui/properties/viewers/shared/propertyViewerIndex.js b/app/imports/ui/properties/viewers/shared/propertyViewerIndex.js
new file mode 100644
index 00000000..686e8737
--- /dev/null
+++ b/app/imports/ui/properties/viewers/shared/propertyViewerIndex.js
@@ -0,0 +1,37 @@
+//import ActionViewer from '/imports/ui/properties/viewers/ActionViewer.vue';
+import AttributeViewer from '/imports/ui/properties/viewers/AttributeViewer.vue';
+//import BuffViewer from '/imports/ui/properties/viewers/BuffViewer.vue';
+//import ContainerViewer from '/imports/ui/properties/viewers/ContainerViewer.vue';
+//import ClassLevelViewer from '/imports/ui/properties/viewers/ClassLevelViewer.vue';
+//import DamageMultiplierViewer from '/imports/ui/properties/viewers/DamageMultiplierViewer.vue';
+//import EffectViewer from '/imports/ui/properties/viewers/EffectViewer.vue';
+//import ExperienceViewer from '/imports/ui/properties/viewers/ExperienceViewer.vue';
+//import FeatureViewer from '/imports/ui/properties/viewers/FeatureViewer.vue';
+//import FolderViewer from '/imports/ui/properties/viewers/FolderViewer.vue';
+//import ItemViewer from '/imports/ui/properties/viewers/ItemViewer.vue';
+//import NoteViewer from '/imports/ui/properties/viewers/NoteViewer.vue';
+//import ProficiencyViewer from '/imports/ui/properties/viewers/ProficiencyViewer.vue';
+//import RollViewer from '/imports/ui/properties/viewers/RollViewer.vue';
+//import SkillViewer from '/imports/ui/properties/viewers/SkillViewer.vue';
+//import SpellListViewer from '/imports/ui/properties/viewers/SpellListViewer.vue';
+//import SpellViewer from '/imports/ui/properties/viewers/SpellViewer.vue';
+
+export default {
+//  action: ActionViewer,
+  attribute: AttributeViewer,
+//  buff: BuffViewer,
+//  container: ContainerViewer,
+//  classLevel: ClassLevelViewer,
+//  damageMultiplier: DamageMultiplierViewer,
+//  experience:ExperienceViewer,
+//  effect: EffectViewer,
+//  feature: FeatureViewer,
+//  folder: FolderViewer,
+//  item: ItemViewer,
+//  note: NoteViewer,
+//  proficiency: ProficiencyViewer,
+//  roll: RollViewer,
+//  skill: SkillViewer,
+//  spellList: SpellListViewer,
+//  spell: SpellViewer,
+};