basic collection page + search

src/components/SpreadsheetData.js

@@ -145,7 +145,6 @@ class CollectionDB {
 
   }
 
-  // Portal or Cards
   setupMugic(tribe="Generic") {
     this.setup(this.api.urls.Mugic[tribe], (data) => {
       this.mugic.insert(data);

src/components/collection/Home.js

@@ -1,18 +1,125 @@
 import React from 'react';
+import Interactive from 'react-interactive';
+import { Link } from 'react-router';
+import PageNotFound from '../PageNotFound';
+import API from '../SpreadsheetData';
+import s from '../../styles/app.style';
+import {observable} from "mobx";
+import {observer, inject} from 'mobx-react';
 import UnderConstruction from '../UnderConstruction';
 
+
+@inject((stores, props, context) => props) @observer
 export default class SingleCreature extends React.Component {
+  @observable n = 10;
+  @observable p = 1;
+  @observable content = [];
+
   render() {
+    if (this.props.children) {
+      return (<div>{this.props.children}</div>);
+    }
+
+    const store = API;
+    if (store.urls === null ||
+      store.portal === null ||
+      store.cards === null) {
+      return (<span>Loading...</span>);
+    }
+
+    // Load all the data
+    if (!store.cards.built.includes("creatures_Cards")) {
+      store.cards.setupCreatures("Cards");
+      return (<span>Loading...</span>);
+    }
+
+    if (!store.cards.built.includes("mugic_Cards")) {
+      store.cards.setupMugic("Cards");
+      return (<span>Loading...</span>);
+    }
+
+    if (this.content.length == 0) {
+      // Only use cards with thumb nails for now
+      // TODO add other types
+      this.content = store.cards.creatures.chain().where((obj) => {return (!obj.gsx$thumb == '');}).simplesort('gsx$name').data();  
+    }
+
+    let numpages = Math.ceil(this.content.length / this.n);
+    let elements = this.content.slice(this.n * (this.p-1), this.n * this.p); 
+
+    const output = () => {
+      if (elements.length == 1 && elements[0].text) {
+        return (
+          <div style={{textAlign: 'left'}}>{elements[0].text || 'No Results Found'}</div>
+        );
+      }
+      return elements.map((creature, i) => {
+        const elements = creature.gsx$elements.split(/[ ,]+/).filter(Boolean).map((item, i) => {
+          return <img className="icon" src={"/src/img/icons/elements/"+item.toLowerCase()+".png"} alt={item} key={i}></img>;
+        });
+
+        return(
+          <div key={i} style={{textAlign: 'left'}}>
+              <img className="thumb" src={store.base_image + creature.gsx$thumb}></img>
+              <span style={{verticalAlign: 'text-top'}}>{creature.gsx$name}{elements}</span>
+              <br />
+          </div>
+        );
+      });
+    }
+
+    // TODO advanced filters
+    let searchName = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      let name = new RegExp(this.input.value, 'i');
+      let results = store.cards.creatures.chain().find({'gsx$name': {'$regex': name} }).where((obj) => {return (!obj.gsx$thumb == '');}).simplesort('gsx$name').data();   
+      if (results.length > 0) this.content = results;
+      else this.content = [{'text': 'No Results Found'}];
+      this.p = 1;
+    }
+    const searchBar = (
+      <form onSubmit={searchName}>
+        <input type="text" ref={(input) => this.input = input} />
+        <input type="submit" value="Search" />
+      </form>
+    );
+
+    let next = () => {
+      if (this.p < numpages) return(<button onClick={ () => {this.p++;} }>next</button>);
+      else return(<button disabled>next</button>);
+    }
+    let prev = () => {
+      if (this.p > 1) return(<button onClick={ () => {this.p--;} }>prev</button>);
+      else return(<button disabled>prev</button>);
+    }
+    const navigation = (
+      <div style={{textAlign: 'left'}}>
+        <p>Showing page {this.p} of {numpages} {prev()} {next()}</p>
+        <p>
+          Entries per page:&nbsp;
+          <input type="number" style={{width: '40px'}} value={this.n} onChange={(event)=>{this.n=event.target.value;}} />
+        </p>
+      </div>
+    );
+
     return (
       <div>
-        <UnderConstruction location={this.props.location}/>
         <p>
+          This page is under construction. <br />
           In the meantime, you can check out&nbsp;
           <a style={{textDecoration: "underline"}} href="http://www.tradecardsonline.com/im/editCollection/collection_type/1">Trade Cards Online</a>
           .
         </p>
+        <br />
+        {searchBar}
+        <br />
+        {navigation}
+        <br />
+        {output()}
       </div>
     );
+
   }
 
 }

src/components/portal/Category/Tribes.js

@@ -27,8 +27,8 @@ export default class Tribes extends React.Component {
     return (
       <div>
         <div><i>Tribe Summary Here</i></div><br />
-        <Interactive as="a" {...s.link} href={"/portal/"+tribe+"/Creatures"}>Creatures</Interactive><br />
-        <Interactive as="a" {...s.link} href={"/portal/"+tribe+"/Mugic"}>Mugic</Interactive>
+        <Interactive as={Link} {...s.link} to={"/portal/"+tribe+"/Creatures"}>Creatures</Interactive><br />
+        <Interactive as={Link} {...s.link} to={"/portal/"+tribe+"/Mugic"}>Mugic</Interactive>
       </div>
     );
   }

src/components/portal/Home.js

@@ -29,7 +29,7 @@ export default function PortalHome() {
         >Locations</Interactive>
       </div>
       <div style={s.tribes}>
-        <p>Explore Tribes</p><br />
+        <p>Pick a Tribe</p><br />
         <Interactive as={Link} {...s.link}
           to="/portal/Danian"
         >Danian</Interactive>

src/components/portal/Single/Creature.js

@@ -53,10 +53,11 @@ export default class SingleCreature extends React.Component {
     }
 
     const creature = store.portal.creatures.findOne({'gsx$name': name});
-    const card_data = store.cards.creatures.findOne({'gsx$name': name});
     if (!creature) {
       return(<PageNotFound location={this.props.location}/>);
     }
+    
+    const card_data = store.cards.creatures.findOne({'gsx$name': name});
 
     const locations = creature.gsx$location.split(/[,]+\s*/).map((item, i) => {
       return <p key={i}><Interactive as={Link} {...s.link} to={"/portal/Locations/"+item}><span>{item}</span></Interactive></p>;