Implemented item editing

rpg-docs/client/views/GeneralCSS/general.css

@@ -112,3 +112,13 @@ paper-button {
 		border-radius: 0;
 	}
 }
+
+.floatyButton {
+	position: absolute;
+	bottom: 24px;
+	right: 24px;
+}
+
+paper-fab-menu /deep/ .container {
+	padding: 24px !important;
+}

rpg-docs/client/views/character/Stats/stats.html

@@ -1,5 +1,5 @@
 <template name="stats">
-	<div class="scroll-y" fit>
+	<div id="stats" class="scroll-y" fit>
 		{{> abilityCards}}
 	</div>
 </template>

rpg-docs/client/views/character/effectEdit/effectEdit.css

@@ -1,7 +1,3 @@
-body /deep/ .featureDialogWidth {
-	width: 560px;
-}
-
 body /deep/ #statGroupDropDown {
 	width: 120px;
 }
@@ -29,4 +25,4 @@ html /deep/ paper-input {
 html /deep/ .featureEffect {
 	display: flex;
 	align-items: flex-end;
-}
+}

rpg-docs/client/views/character/effectEdit/effectEdit.html

@@ -1,10 +1,10 @@
-<template name="featureEffect">
-	<div class="featureEffect">
+<template name="effectEdit">
+	<div class="effectEdit">
 		<paper-dropdown-menu id="statGroupDropDown" label="Stat Group">
 			<paper-dropdown class="dropdown">
 				<core-menu id="statGroupMenu" class="menu" selected={{selectedStatGroup}}>
 					{{#each statGroups}}
-						<paper-item>{{this}}</paper-item>
+						<paper-item class="statGroupSelect">{{this}}</paper-item>
 					{{/each}}
 				</core-menu>
 			</paper-dropdown>

rpg-docs/client/views/character/effectEdit/effectEdit.js

@@ -1,3 +1,4 @@
+//TODO add dexterity armor
 var stats = [
 	{stat: "strength", name: "Strength", group: "Ability Scores"},
 	{stat: "dexterity", name: "Dexterity", group: "Ability Scores"},
@@ -120,14 +121,14 @@ var operationIndex = function(statName, operation){
 	return _.indexOf(_.pluck(opGroup, "operation"), operation);
 }
 
-Template.featureEffect.created = function(){
+Template.effectEdit.created = function(){
 	this.selectedStatGroup = new ReactiveVar();
 	this.selectedStat = new ReactiveVar();
 	this.selectedOperation = new ReactiveVar();
 	this.value = new ReactiveVar();
 };
 
-Template.featureEffect.rendered = function(){
+Template.effectEdit.rendered = function(){
 	var self = this;
 	self.autorun(function(){
 		var data = Template.currentData();
@@ -153,7 +154,7 @@ Template.featureEffect.rendered = function(){
 	})
 };
 
-Template.featureEffect.helpers({
+Template.effectEdit.helpers({
 	selectedStatGroup: function(){
 		var groupName = Template.instance().selectedStatGroup.get();
 		return _.indexOf(statGroupNames, groupName);
@@ -231,7 +232,7 @@ Template.featureEffect.helpers({
 
 });
 
-Template.featureEffect.events({
+Template.effectEdit.events({
 	"tap #commitChanges": function(event){
 		var changedFields = {};
 		var inst = Template.instance();

rpg-docs/client/views/character/features/featureDialog/featureDialog.html

@@ -1,9 +1,3 @@
-<template name="autoFeatureDialog">
-	{{> quickForm schema="Schemas.Feature" id="insertFeatureForm" type="insert"}}
-	<paper-button affirmative>Cancel</paper-button>
-	<paper-button affirmative>Save Item</paper-button>
-</template>
-
 <template name="featureDialog">
 	{{#with feature}}
 		<paper-menu-button>
@@ -24,7 +18,7 @@
 		</paper-input-decorator>
 		<h3>Effects</h3>
 		{{#each effects}}
-			{{>featureEffect}}
+			{{>effectEdit}}
 		{{/each}}
 		<br>
 		<paper-icon-button id="addEffectButton" role="button" tabindex="0" icon="add" aria-label="addEffect"></paper-icon-button>

rpg-docs/client/views/character/features/featureDialog/featuresDialog.css

@@ -0,0 +1,3 @@
+body /deep/ .featureDialogWidth {
+	width: 560px;
+}

rpg-docs/client/views/character/features/features.css

@@ -22,17 +22,3 @@ paper-shadow.featureCard {
 .featureCardBottom {
 	white-space: pre-line;
 }
-
-#addFeature {
-		position: absolute;
-		bottom: 24px;
-		right: 24px;
-	}
-
-@media (max-width: 640px) {
-	#addFeature {
-		bottom: 16px;
-		right: 24px;
-	}
-}
-

rpg-docs/client/views/character/features/features.html

@@ -20,6 +20,6 @@
 			</div>
 			<div class="fab-buffer"></div>
 		</div>
-		<paper-fab id="addFeature" icon="add" title="Add" role="button" tabindex="0" aria-label="Add"></paper-fab>
+		<paper-fab id="addFeature" class="floatyButton" icon="add" title="Add" role="button" tabindex="0" aria-label="Add"></paper-fab>
 	</div>
 </template>

rpg-docs/client/views/character/features/features.js

@@ -8,7 +8,7 @@ Template.features.helpers({
 Template.features.events({
 	"tap #addFeature": function(event){
 		var featureId = Features.insert({name: "New Feature", charId: this._id});
-		GlobalUI.showDialog({
+		GlobalUI.setDialog({
 			heading:      "New Feature",
 			template:     "featureDialog",
 			data:         {featureId: featureId, charId: this._id},

rpg-docs/client/views/character/inventory/inventory.html

@@ -1,27 +1,33 @@
 <template name="inventory">
-	<paper-shadow class="equipment card double">
-		Armor:<br>
-		<paper-item>{{#if armor}}{{armor.name}}{{else}}none{{/if}}</paper-item>
-		Equipment:<br>
-		{{#each equipment}}
-			<paper-item>
-				{{name}}
-			</paper-item>
-		{{/each}}
-	</paper-shadow>
-	<div class="containers">
-		{{#each containers}}
-		<paper-shadow class="card">
-			<h3>{{name}}</h3>
-			{{#each items ../_id _id}}
-				<paper-item>
-					{{#if stackable}}{{quantity}}{{/if}} {{pluralName}}
-				</paper-item>
-			{{/each}}
-		</paper-shadow>
-		{{/each}}
+	<div fit>
+		<div id="inventory" class="scroll-y" fit>
+			<paper-shadow class="equipment card double">
+				Armor:<br>
+				<paper-item>{{#if armor}}{{armor.name}}{{else}}none{{/if}}</paper-item>
+				Equipment:<br>
+				{{#each equipment}}
+					<paper-item class="inventoryItem">
+						{{name}}
+					</paper-item>
+				{{/each}}
+			</paper-shadow>
+			<div class="containers">
+				{{#each containers}}
+					<paper-shadow class="card">
+						<h3>{{name}}</h3>
+						{{#each items ../_id _id}}
+							<paper-item class="inventoryItem">
+								{{#if gt1 quantity}}{{quantity}}{{/if}}&nbsp;{{pluralName}}
+							</paper-item>
+						{{/each}}
+					</paper-shadow>
+				{{/each}}
+			</div>
+		</div>
+		<paper-fab-menu id="inventoryAddMenu" icon="add" closeIcon="close" duration="0.3">
+			<paper-fab-menu-item id="addItem" icon="note-add" color="#d23f31" tooltip="Item"></paper-fab-menu-item>
+			<paper-fab-menu-item id="addContainer" icon="work" color="#d23f31" tooltip="Container"></paper-fab-menu-item>
+		</paper-fab-menu>
+
 	</div>
-	<paper-fab id="add" icon="add" title="Add" role="button" tabindex="0" aria-label="Add"></paper-fab>
-	<paper-fab id="addItem" icon="note-add" title="Add Item" role="button" tabindex="0" aria-label="Add Item"></paper-fab>
-	<paper-fab id="addContainer" icon="work" title="Add Container" role="button" tabindex="0" aria-label="Add Container"></paper-fab>
 </template>

rpg-docs/client/views/character/inventory/inventory.js

@@ -1,3 +1,7 @@
+Template.inventory.created = function(){
+	this.showAddButtons = new ReactiveVar(false);
+}
+
 Template.inventory.helpers({
 	containers: function(){
 		return Containers.find({charId: this._id})
@@ -10,18 +14,44 @@ Template.inventory.helpers({
 	},
 	equipment: function(){
 		return Items.find({ charId: this._id, equipped: true, equipmentSlot: {$ne: "armor"} })
+	},
+	showAddButtons: function(){
+		return Template.instance().showAddButtons.get();
+	},
+	gt1: function(num){
+		return num > 1;
 	}
 });
 
 Template.inventory.events({
-	"tap #addItem": function(){
-		GlobalUI.showDialog({
-			template:     "itemDialog",
-			data:         null,
-			fullOnMobile: true
-		})
+	"tap #addItem": function(event){
+		var charId = this._id;
+		var container = Containers.findOne({charId: charId}, {sort: {name: 1, _id: 1}, fields: {_id: 1}});
+		var containerId;
+		if(container){
+			containerId = container._id;
+		} else{
+			console.log("no container was found for new item, adding a new container");
+			containerId = Containers.insert({name: "New Container", isCarried: true, charId: this._id});
+		}
+		_.defer(function(){
+			var itemId = Items.insert({charId: charId, container: containerId});
+			GlobalUI.showDialog({
+				template:     "itemDialog",
+				data:         {itemId: itemId, charId: charId},
+				fullOnMobile: true
+			});
+		});
 	},
-	"tap #addContainer": function(){
-		Containers.insert({name: "New Container", isCarried: true, charId: this._id});
+	"tap #addContainer": function(event){
+		var containerId = Containers.insert({name: "New Container", isCarried: true, charId: this._id});
+		//TODO show container dialog
+	},
+	"tap .inventoryItem": function(event){
+		GlobalUI.setDialog({
+			template:     "itemDialog",
+			data:         {itemId: this._id, charId: this.charId},
+			fullOnMobile: true
+		});
 	}
 })

rpg-docs/client/views/character/inventory/itemDialog.html

@@ -1,5 +0,0 @@
-<template name="itemDialog">
-	{{> quickForm collection="Items" id="insertItemForm" type="insert"}}
-	<paper-button affirmative>Cancel</paper-button>
-	<paper-button affirmative>Save Item</paper-button>
-</template>

rpg-docs/client/views/character/inventory/itemDialog/itemDialog.css

@@ -0,0 +1,3 @@
+body /deep/ .itemDialogWidth {
+	width: 560px;
+}

rpg-docs/client/views/character/inventory/itemDialog/itemDialog.html

@@ -0,0 +1,77 @@
+<template name="itemDialog">
+	{{#with item}}
+		<!--Delete button-->
+		<paper-menu-button>
+			<paper-icon-button role="button" tabindex="0" icon="delete" aria-label="Delete Item" noink></paper-icon-button>
+			<paper-dropdown class="dropdown">
+				<paper-button id="deleteItem">Delete Item</paper-button>
+				<paper-button>Cancel</paper-button>
+			</paper-dropdown>
+		</paper-menu-button>
+		
+		<div class="itemDialogWidth"></div>
+		<!--Name and plural name-->
+		<paper-input id="itemNameInput" label="Name" floatinglabel value={{name}}></paper-input>
+		{{# if quantity}}<paper-input id="itemPluralInput" label="Plural Name" floatinglabel value={{plural}}></paper-input>{{/if}}
+		<!--Equipped-->
+		{{# if canEquip}}
+			<div center horizontal layout>
+				<div flex>Equipped</div>
+				<paper-toggle-button id="equippedInput"
+									 checked={{equipped}} 
+									 role="button" 
+									 aria-pressed="false" 
+									 tabindex="0" 
+									 touch-action="pan-y">
+				</paper-toggle-button>
+			</div>
+		{{/if}}
+		<!--Quantity-->
+		<paper-input-decorator label="Quantity" floatinglabel>
+			<input id="quantityInput" type="number" value={{quantity}}>
+		</paper-input-decorator>
+		<!--Weight-->
+		<paper-input-decorator label="Weight" floatinglabel>
+			<input id="weightInput" type="number" value={{weight}}>
+		</paper-input-decorator>
+		<!--Value-->
+		<paper-input-decorator label="Value" floatinglabel>
+			<input id="valueInput" type="number" value={{value}}>
+		</paper-input-decorator>
+		<!--Description-->
+		<paper-input-decorator label="Description" floatinglabel layout vertical>
+			<paper-autogrow-textarea>
+				<textarea id="itemDescriptionInput" placeholder aria-label="Description" value={{description}}></textarea>
+			</paper-autogrow-textarea>
+		</paper-input-decorator>
+		<!--Container dropdown-->
+		<paper-dropdown-menu label="Container">
+			<paper-dropdown class="dropdown">
+				<core-menu id="containerDropDown" class="menu"  selected={{containerIndex}}>
+					{{#each containers}}
+						<paper-item class="containerMenuItem">{{name}}</paper-item>
+					{{/each}}
+				</core-menu>
+			</paper-dropdown>
+		</paper-dropdown-menu>
+		<!--Equipment slot dropdown-->
+		<paper-dropdown-menu label="slot">
+			<paper-dropdown class="dropdown">
+				<core-menu id="slotDropDown" class="menu"  selected={{equipmentSlotIndex}}>
+					{{#each equipmentSlots}}
+						<paper-item class="slotMenuItem">{{name}}</paper-item>
+					{{/each}}
+				</core-menu>
+			</paper-dropdown>
+		</paper-dropdown-menu>
+		
+		<!--Effects-->
+		<h3>Effects</h3>
+		{{#each effects}}
+			{{>effectEdit}}
+		{{/each}}
+		<br>
+		<paper-icon-button id="addEffectButton" role="button" tabindex="0" icon="add" aria-label="addEffect"></paper-icon-button>
+	{{/with}}
+	<paper-button affirmative>Done</paper-button>
+</template>

rpg-docs/client/views/character/inventory/itemDialog/itemDialog.js

@@ -0,0 +1,102 @@
+Template.itemDialog.rendered = function(){
+	var self = this;
+	this.autorun(function(){
+		var item = Items.findOne(Template.currentData().itemId, {fields: {name: 1}});
+		if(item) Session.set("global.ui.dialogHeader", item.pluralName());
+	})
+	//after the dialog is built, open it
+	_.defer(function(){GlobalUI.dialog.open()});
+}
+
+Template.itemDialog.events({
+	"tap #deleteItem": function(){
+		Items.remove(this._id);
+		GlobalUI.closeDialog()
+	},
+	"tap #addEffectButton": function(){
+		Effects.insert({
+			charId: Template.currentData().charId,
+			sourceId: this._id,
+			operation: "add",
+			type: "equipment"
+		});
+	},
+	//TODO clean up String -> num here so they don't need casting by Schema.clean
+	//TODO validate input (integer, non-negative, etc) for these inputs and give validation errors
+	"change #itemNameInput, input #itemNameInput": function(event){
+		console.log("changed Nameinput")
+		var name = Template.instance().find("#itemNameInput").value;
+		Items.update(this._id, {$set: {name: name}});
+	},
+	"change #itemPluralInput, input #itemPluralInput": function(event){
+		var plural = Template.instance().find("#itemPluralInput").value;
+		Items.update(this._id, {$set: {plural: plural}});
+	},
+	"change #quantityInput, input #quantityInput": function(event){
+		var quantity = Template.instance().find("#quantityInput").value;
+		Items.update(this._id, {$set: {quantity: quantity}});
+	},
+	"change #weightInput, input #weightInput": function(event){
+		var weight = Template.instance().find("#weightInput").value;
+		Items.update(this._id, {$set: {weight: weight}});
+	},
+	"change #valueInput, input #valueInput": function(event){
+		var value = Template.instance().find("#valueInput").value;
+		Items.update(this._id, {$set: {value: value}});
+	},
+	"change #itemDescriptionInput": function(event){
+		var description = Template.instance().find("#itemDescriptionInput").value;
+		Items.update(this._id, {$set: {description: description}});
+	},
+	"change #equippedInput": function(event){
+		var equipped = Template.instance().find("#equippedInput").checked;
+		Items.update(this._id, {$set: {equipped: equipped}});
+	},
+	"tap .containerMenuItem": function(event){
+		Items.update(Template.currentData().itemId, {$set: {container: this._id}});
+	},
+	"tap .slotMenuItem": function(event){
+		Items.update(Template.currentData().itemId, {$set: {equipmentSlot: this.value}});
+	}
+});
+
+var getContainers = function(charId){
+	return Containers.find({charId: charId}, {sort: {name: 1, _id: 1}, fields: {name: 1}}).fetch();
+};
+
+var equipmentSlots =  [
+	{name: "None", value: "none"},
+	{name: "Held", value: "held"},
+	{name: "Armor", value: "armor"},
+	{name: "Head", value: "head"},
+	{name: "Arms", value: "arms"}, 
+	{name: "Hands", value: "hands"},
+	{name: "Feet", value: "feet"}
+];
+
+Template.itemDialog.helpers({
+	item: function(){
+		return Items.findOne(this.itemId);
+	},
+	effects: function(){
+		var cursor = Effects.find({charId: this.charId, type: "equipment", sourceId: this._id})
+		return cursor;
+	},
+	containers: function(){
+		return getContainers(this.charId);
+	},
+	containerIndex: function(){
+		var containers = getContainers(this.charId);
+		var containerIds = _.pluck(containers, "_id");
+		return _.indexOf(containerIds, this.container);
+	},
+	equipmentSlots: function(){
+		return equipmentSlots;
+	},
+	equipmentSlotIndex: function(){
+		return _.indexOf(_.pluck(equipmentSlots, "value"), this.equipmentSlot);
+	},
+	canEquip: function(){
+		return this.equipmentSlot !== "none";
+	}
+});

rpg-docs/client/views/layout/imports.html

@@ -16,6 +16,7 @@
 <link rel="import" href="/components/paper-dropdown/paper-dropdown.html">
 <link rel="import" href="/components/paper-dropdown-menu/paper-dropdown-menu.html">
 <link rel="import" href="/components/paper-fab/paper-fab.html">
+<link rel="import" href="/components/paper-fab-menu/paper-fab-menu.html">
 <link rel="import" href="/components/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="/components/paper-input/paper-autogrow-textarea.html">
 <link rel="import" href="/components/paper-input/paper-input.html">
@@ -25,6 +26,7 @@
 <link rel="import" href="/components/paper-shadow/paper-shadow.html">
 <link rel="import" href="/components/paper-spinner/paper-spinner.html">
 <link rel="import" href="/components/paper-tabs/paper-tabs.html">
+<link rel="import" href="/components/paper-toggle-button/paper-toggle-button.html">
 
 <!--custom components-->
 <link rel="import" href="/custom_components/swipe-detect/swipe-detect.html">