Implemented detail view for items and containers
This commit is contained in:
Thaum
@@ -1,31 +1,34 @@
|
||||
<template name="containerDialog">
|
||||
{{#with container}}
|
||||
<!--Delete button-->
|
||||
<paper-menu-button>
|
||||
<paper-icon-button role="button" tabindex="0" icon="delete" aria-label="Delete Container" noink></paper-icon-button>
|
||||
<paper-dropdown class="dropdown">
|
||||
<paper-button id="deleteContainer">Delete Container</paper-button>
|
||||
<paper-button>Cancel</paper-button>
|
||||
</paper-dropdown>
|
||||
</paper-menu-button>
|
||||
|
||||
<div class="containerDialogWidth"></div>
|
||||
<!--Name and plural name-->
|
||||
<paper-input id="containerNameInput" label="Name" floatinglabel value={{name}}></paper-input>
|
||||
<!--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="containerDescriptionInput" placeholder aria-label="Description" value={{description}}></textarea>
|
||||
</paper-autogrow-textarea>
|
||||
</paper-input-decorator>
|
||||
<core-header-panel fit>
|
||||
<core-toolbar hero-id="toolbar" hero>
|
||||
<paper-icon-button id="backButton" role="button" tabindex="0" icon="arrow-back" aria-label="close"></paper-icon-button>
|
||||
<div flex>{{name}}</div>
|
||||
<paper-icon-button id="deleteContainer"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
icon="delete"
|
||||
aria-label="Delete Feature"
|
||||
noink></paper-icon-button>
|
||||
</core-toolbar>
|
||||
<div class="detailContent">
|
||||
<!--Name and plural name-->
|
||||
<paper-input id="containerNameInput" label="Name" floatinglabel value={{name}}></paper-input>
|
||||
<!--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="containerDescriptionInput" placeholder aria-label="Description" value={{description}}></textarea>
|
||||
</paper-autogrow-textarea>
|
||||
</paper-input-decorator>
|
||||
</div>
|
||||
</core-header-panel>
|
||||
{{/with}}
|
||||
<paper-button affirmative>Done</paper-button>
|
||||
</template>
|
||||
@@ -1,17 +1,29 @@
|
||||
Template.containerDialog.rendered = function(){
|
||||
var self = this;
|
||||
this.autorun(function(){
|
||||
var container = Containers.findOne(Template.currentData().containerId, {fields: {name: 1}});
|
||||
if(container) Session.set("global.ui.dialogHeader", container.name);
|
||||
//update all autogrows after they've been filled
|
||||
var pata = this.$("paper-autogrow-textarea");
|
||||
pata.each(function(index, el){
|
||||
el.update($(el).children().get(0));
|
||||
})
|
||||
//update all input fields as well
|
||||
var input = this.$("paper-input");
|
||||
input.each(function(index, el){
|
||||
el.valueChanged();
|
||||
})
|
||||
//after the dialog is built, open it
|
||||
_.defer(function(){GlobalUI.dialog.open()});
|
||||
if (!this.alreadyRendered){
|
||||
Session.set("global.ui.detailShow", true);
|
||||
this.alreadyRendered = true;
|
||||
}
|
||||
}
|
||||
|
||||
Template.containerDialog.events({
|
||||
"tap #backButton": function(){
|
||||
GlobalUI.closeDetail();
|
||||
},
|
||||
"tap #deleteContainer": function(){
|
||||
Containers.remove(this._id);
|
||||
GlobalUI.closeDialog()
|
||||
GlobalUI.closeDetail();
|
||||
},
|
||||
//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
|
||||
|
||||
@@ -5,24 +5,24 @@
|
||||
Armor:<br>
|
||||
{{#if armor}}
|
||||
{{#with armor}}
|
||||
<paper-item class="inventoryItem">{{name}}</paper-item>
|
||||
<paper-item class="inventoryItem" hero-id="main">{{name}}</paper-item>
|
||||
{{/with}}
|
||||
{{else}}
|
||||
<paper-item>none</paper-item>
|
||||
{{/if}}
|
||||
Equipment:<br>
|
||||
{{#each equipment}}
|
||||
<paper-item class="inventoryItem">
|
||||
<paper-item class="inventoryItem" hero-id="main">
|
||||
{{name}}
|
||||
</paper-item>
|
||||
{{/each}}
|
||||
</paper-shadow>
|
||||
<div class="containers">
|
||||
{{#each containers}}
|
||||
<paper-shadow class="card">
|
||||
<paper-shadow class="card" hero-id="main">
|
||||
<h2 class="containerName">{{name}}</h2>
|
||||
{{#each items ../_id _id}}
|
||||
<paper-item class="inventoryItem">
|
||||
<paper-item class="inventoryItem" hero-id="main">
|
||||
{{#if gt1 quantity}}{{quantity}}{{/if}} {{pluralName}}
|
||||
</paper-item>
|
||||
{{/each}}
|
||||
|
||||
@@ -36,29 +36,35 @@ Template.inventory.events({
|
||||
}
|
||||
_.defer(function(){
|
||||
var itemId = Items.insert({charId: charId, container: containerId});
|
||||
GlobalUI.showDialog({
|
||||
template: "itemDialog",
|
||||
data: {itemId: itemId, charId: charId},
|
||||
fullOnMobile: true
|
||||
GlobalUI.setDetail({
|
||||
template: "itemDialog",
|
||||
data: {itemId: itemId, charId: charId},
|
||||
hero: $(event.currentTarget)
|
||||
});
|
||||
});
|
||||
},
|
||||
"tap #addContainer": function(event){
|
||||
var containerId = Containers.insert({name: "New Container", isCarried: true, charId: this._id});
|
||||
//TODO show container dialog
|
||||
GlobalUI.setDetail({
|
||||
template: "containerDialog",
|
||||
data: {containerId: this._id, charId: this.charId},
|
||||
hero: $(event.currentTarget)
|
||||
});
|
||||
},
|
||||
"tap .inventoryItem": function(event){
|
||||
GlobalUI.setDialog({
|
||||
template: "itemDialog",
|
||||
data: {itemId: this._id, charId: this.charId},
|
||||
fullOnMobile: true
|
||||
var itemId = this._id;
|
||||
var charId = Template.parentData()._id;
|
||||
GlobalUI.setDetail({
|
||||
template: "itemDialog",
|
||||
data: {itemId: itemId, charId: charId},
|
||||
hero: $(event.currentTarget)
|
||||
});
|
||||
},
|
||||
"tap .containerName": function(event){
|
||||
GlobalUI.setDialog({
|
||||
template: "containerDialog",
|
||||
data: {containerId: this._id, charId: this.charId},
|
||||
fullOnMobile: true
|
||||
GlobalUI.setDetail({
|
||||
template: "containerDialog",
|
||||
data: {containerId: this._id, charId: this.charId},
|
||||
hero: $(event.currentTarget).parent()
|
||||
});
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
@@ -1,77 +1,84 @@
|
||||
<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>
|
||||
<core-header-panel fit>
|
||||
<core-toolbar hero-id="toolbar" hero>
|
||||
<paper-icon-button id="backButton" role="button" tabindex="0" icon="arrow-back" aria-label="close"></paper-icon-button>
|
||||
<div flex>{{name}}</div>
|
||||
<paper-icon-button id="deleteItem"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
icon="delete"
|
||||
aria-label="Delete Feature"
|
||||
noink></paper-icon-button>
|
||||
</core-toolbar>
|
||||
<div class="detailContent">
|
||||
<!--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-->
|
||||
{{#if effects}}
|
||||
<hr style="margin: 16px 0 16px 0;">
|
||||
<div id="effects">
|
||||
<h2>Effects</h2>
|
||||
{{#each effects}}
|
||||
{{>effectEdit}}
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/if}}
|
||||
<paper-button id="addEffectButton" raised>Add Effect</paper-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>
|
||||
</core-header-panel>
|
||||
{{/with}}
|
||||
<paper-button affirmative>Done</paper-button>
|
||||
</template>
|
||||
@@ -1,17 +1,29 @@
|
||||
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());
|
||||
//update all autogrows after they've been filled
|
||||
var pata = this.$("paper-autogrow-textarea");
|
||||
pata.each(function(index, el){
|
||||
el.update($(el).children().get(0));
|
||||
})
|
||||
//update all input fields as well
|
||||
var input = this.$("paper-input");
|
||||
input.each(function(index, el){
|
||||
el.valueChanged();
|
||||
})
|
||||
//after the dialog is built, open it
|
||||
_.defer(function(){GlobalUI.dialog.open()});
|
||||
if (!this.alreadyRendered){
|
||||
Session.set("global.ui.detailShow", true);
|
||||
this.alreadyRendered = true;
|
||||
}
|
||||
}
|
||||
|
||||
Template.itemDialog.events({
|
||||
"tap #backButton": function(){
|
||||
GlobalUI.closeDetail();
|
||||
},
|
||||
"tap #deleteItem": function(){
|
||||
Items.remove(this._id);
|
||||
GlobalUI.closeDialog()
|
||||
GlobalUI.closeDetail();
|
||||
},
|
||||
"tap #addEffectButton": function(){
|
||||
Effects.insert({
|
||||
|
||||
Reference in New Issue
Block a user