rename /rpg-docs to /app
This commit is contained in:
Andrew Zhu
@@ -0,0 +1,23 @@
|
||||
.item-library-dialog .item.selected {
|
||||
background-color: #e4e4e4;
|
||||
}
|
||||
|
||||
.item-library-dialog .category-header {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.item-library-dialog .category-header iron-icon {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.item-library-dialog .category-header iron-icon.open {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.item-library-dialog table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.item-library-dialog .library-item td {
|
||||
position: relative;
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
<template name="itemLibraryDialog">
|
||||
<div class="fit item-library-dialog layout vertical">
|
||||
<app-toolbar class="app-grey white-text">
|
||||
<paper-icon-button id="backButton"
|
||||
icon="arrow-back">
|
||||
</paper-icon-button>
|
||||
<div main-title>Items</div>
|
||||
<paper-input label="Search" class="search-input">
|
||||
<iron-icon icon="search" prefix></iron-icon>
|
||||
</paper-input>
|
||||
</app-toolbar>
|
||||
<div class="flex scroll-y">
|
||||
<div class="items" style="padding:8px">
|
||||
{{#if searchTerm}}
|
||||
{{#if searchItems.count}}
|
||||
<table style="width: 100%">
|
||||
<tbody>
|
||||
{{#each item in searchItems}}
|
||||
{{>libraryItem item=item selected=(isSelected item)}}
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
{{else}}{{#if searchReady}}
|
||||
No items match "{{searchTerm}}"
|
||||
{{/if}}{{/if}}
|
||||
{{#unless searchReady}}
|
||||
<div class="layout vertical center" style="width: 100%; padding: 16px;">
|
||||
<paper-spinner active></paper-spinner>
|
||||
</div>
|
||||
{{/unless}}
|
||||
{{else}}
|
||||
{{#each categories}}
|
||||
<div class="paper-font-body2 category-header clickable">
|
||||
<iron-icon icon="chevron-right" class="{{#if isOpen key}}open{{/if}}">
|
||||
</iron-icon>
|
||||
{{name}}
|
||||
</div>
|
||||
<iron-collapse opened={{isOpen key}}>
|
||||
<table style="width: 100%">
|
||||
<tbody>
|
||||
{{#each item in (itemsInCategory key)}}
|
||||
{{>libraryItem item=item selected=(isSelected item)}}
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
{{#unless ready key}}
|
||||
<paper-spinner active></paper-spinner>
|
||||
{{/unless}}
|
||||
</iron-collapse>
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout horizontal end-justified">
|
||||
<paper-button class="cancelButton">Cancel</paper-button>
|
||||
<paper-button class="okButton">OK</paper-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template name="libraryItem">
|
||||
<tr class="item library-item {{#if selected}}selected{{/if}}">
|
||||
<td class="itemName">
|
||||
{{itemName}}
|
||||
<paper-ripple></paper-ripple>
|
||||
</td>
|
||||
<td>
|
||||
{{itemWeight}} lb.
|
||||
<paper-ripple></paper-ripple>
|
||||
</td>
|
||||
<td>
|
||||
{{valueString itemValue}}
|
||||
<paper-ripple></paper-ripple>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
@@ -0,0 +1,130 @@
|
||||
const librarySubs = new SubsManager();
|
||||
|
||||
const categories = [
|
||||
{name: "Weapons", key: "weapons"},
|
||||
{name: "Armor", key: "armor"},
|
||||
{name: "Adventuring Gear", key: "adventuringGear"},
|
||||
{name: "Tools", key: "tools"},
|
||||
];
|
||||
|
||||
Template.itemLibraryDialog.onCreated(function(){
|
||||
this.selectedItem = new ReactiveVar();
|
||||
this.searchTerm = new ReactiveVar();
|
||||
this.categoriesOpen = new ReactiveVar([]);
|
||||
this.readyDict = new ReactiveDict();
|
||||
this.searchReady = new ReactiveVar();
|
||||
librarySubs.subscribe("standardLibraries");
|
||||
this.autorun(() => {
|
||||
// Subscribe to all open categories
|
||||
_.each(this.categoriesOpen.get(), (key) => {
|
||||
var handle = librarySubs.subscribe("standardLibraryItems", key);
|
||||
this.autorun(() => {
|
||||
this.readyDict.set(key, handle.ready());
|
||||
});
|
||||
});
|
||||
});
|
||||
this.autorun(() => {
|
||||
// If we are searching, subscibe to all categories
|
||||
if (this.searchTerm.get()){
|
||||
let handles = _.map(categories, category =>
|
||||
librarySubs.subscribe("standardLibraryItems", category.key)
|
||||
);
|
||||
// Ready when all handles are ready
|
||||
this.autorun(() => {
|
||||
this.searchReady.set(_.every(handles, h => h.ready()));
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Template.itemLibraryDialog.helpers({
|
||||
ready(key){
|
||||
return Template.instance().readyDict.get(key);
|
||||
},
|
||||
categories(){
|
||||
return categories;
|
||||
},
|
||||
itemsInCategory(categoryKey){
|
||||
return LibraryItems.find({
|
||||
library: "SRDLibraryGA3XWsd",
|
||||
"settings.category": categoryKey,
|
||||
}, {
|
||||
sort: {name: 1},
|
||||
});
|
||||
},
|
||||
isSelected(item){
|
||||
const selected = Template.instance().selectedItem.get();
|
||||
return selected && selected._id === item._id;
|
||||
},
|
||||
isOpen(key){
|
||||
const cats = Template.instance().categoriesOpen.get();
|
||||
return _.contains(cats, key);
|
||||
},
|
||||
searchTerm(){
|
||||
return Template.instance().searchTerm.get();
|
||||
},
|
||||
searchReady(){
|
||||
return Template.instance().searchReady.get();
|
||||
},
|
||||
searchItems(){
|
||||
const searchTerm = Template.instance().searchTerm.get();
|
||||
if (!searchTerm) return;
|
||||
return LibraryItems.find({
|
||||
library: "SRDLibraryGA3XWsd",
|
||||
name: {
|
||||
$regex: new RegExp(".*" + searchTerm + ".*", "gi")
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
Template.itemLibraryDialog.events({
|
||||
"click .cancelButton": function(event, template){
|
||||
popDialogStack();
|
||||
},
|
||||
"click .okButton": function(event, template){
|
||||
popDialogStack(template.selectedItem.get());
|
||||
},
|
||||
"click .library-item": function(event, template){
|
||||
template.selectedItem.set(this.item);
|
||||
},
|
||||
"click #backButton": function(event, template){
|
||||
popDialogStack();
|
||||
},
|
||||
"click .category-header": function(event, template){
|
||||
let cats = template.categoriesOpen.get();
|
||||
const key = this.key;
|
||||
// Toggle whether this key is in the array or not
|
||||
if (_.contains(cats, key)){
|
||||
cats = _.without(cats, key);
|
||||
} else {
|
||||
cats.push(key);
|
||||
}
|
||||
template.categoriesOpen.set(cats);
|
||||
},
|
||||
"input .search-input, change .search-input": function(event, template){
|
||||
const value = event.currentTarget.value;
|
||||
template.searchTerm.set(value);
|
||||
},
|
||||
});
|
||||
|
||||
Template.libraryItem.helpers({
|
||||
itemName: function(){
|
||||
return this.item.libraryName || this.item.name;
|
||||
},
|
||||
itemWeight: function(){
|
||||
if (this.item.quantity) {
|
||||
return this.item.weight * this.item.quantity;
|
||||
} else {
|
||||
return this.item.weight;
|
||||
}
|
||||
},
|
||||
itemValue: function(){
|
||||
if (this.item.quantity) {
|
||||
return this.item.value * this.item.quantity;
|
||||
} else {
|
||||
return this.item.value;
|
||||
}
|
||||
},
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user