Implemented item editing

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";
+	}
+});