refactoring database setup

This commit is contained in:
Daniel 2018-01-26 13:24:57 -05:00
parent 707e8df333
commit 0680703c5c
6 changed files with 66 additions and 22 deletions

View File

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Chaotic Backup</title> <title>Chaotic Backup</title>
<meta name="description" content="Chaotic Backup"> <meta name="description" content="Chaotic Backup">
<link rel="stylesheet" type="text/css" href="/src/css/legacy.css">
<style> <style>
html, body, div, span, a, p, ul, li, h1, code, nav { html, body, div, span, a, p, ul, li, h1, code, nav {
margin: 0; margin: 0;
@ -85,7 +86,6 @@
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<!-- single page app in bundle.js -->
<script src="/build/bundle.js"></script> <script src="/build/bundle.js"></script>
</body> </body>
</html> </html>

View File

@ -1,6 +1,6 @@
{ {
"name": "chaoticbackup", "name": "chaoticbackup",
"version": "1.0.1", "version": "1.1.0",
"description": "Chaotic Backup", "description": "Chaotic Backup",
"scripts": { "scripts": {
"start": "webpack-dev-server -d --inline --host 0.0.0.0 --history-api-fallback --progress", "start": "webpack-dev-server -d --inline --host 0.0.0.0 --history-api-fallback --progress",
@ -32,6 +32,7 @@
"babel-eslint": "^8.0.0", "babel-eslint": "^8.0.0",
"babel-loader": "^6.2.10", "babel-loader": "^6.2.10",
"babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.18.0", "babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0", "babel-preset-react": "^6.16.0",
"babel-preset-stage-1": "^6.16.0", "babel-preset-stage-1": "^6.16.0",

View File

@ -60,8 +60,8 @@ class API {
setupDB() { setupDB() {
try { try {
this.portal = new CollectionDB(this); this.portal = new CollectionDB(this, 'portal');
this.cards = new CollectionDB(this); this.cards = new CollectionDB(this, 'cards');
} }
catch (err) { catch (err) {
console.log('setting up database failed', err); console.log('setting up database failed', err);
@ -91,20 +91,41 @@ class API {
}; };
} }
// Input format
// [{cards: 'attacks'}, {portal: 'attacks'}]
async buildCollection(input) {
return await Promise.all(input.map((item) => {
return new Promise((resolve, reject) => {
if ('cards' in item) {
// console.log(this.cards[item.cards].data);
return this.cards.setupType(item.cards, resolve);
}
if ('portal' in item) {
// console.log(this.portal[item.portal].data);
return this.portal.setupType(item.portal, resolve);
}
console.log('cards or portal');
return reject();
});
}));
}
} }
export default API.getInstance(); export default API.getInstance();
// export default new API();
class CollectionDB { class CollectionDB {
@observable built = []; // Keeps track of what collections have been populated // Keeps track of what collections have been populated
@observable built = [];
building = [];
constructor(API) { constructor(API, format) {
this.api = API; this.api = API;
// ignoring persistence for now this.format = format;
// this.setupDB(); this.setupDB();
//autorun(() => console.log(this.creatures)); }
setupDB() {
let db = new loki("chaotic_portal.db"); let db = new loki("chaotic_portal.db");
this.attacks = db.addCollection('attacks'); this.attacks = db.addCollection('attacks');
this.battlegear = db.addCollection('battlegear'); this.battlegear = db.addCollection('battlegear');
@ -112,9 +133,10 @@ class CollectionDB {
this.locations = db.addCollection('locations'); this.locations = db.addCollection('locations');
this.mugic = db.addCollection('mugic'); this.mugic = db.addCollection('mugic');
this.db = db; this.db = db;
}
// setupDB() { // ignoring persistence for now
//autorun(() => console.log(this.creatures));
// var self = this; // var self = this;
// let db = new loki("chaotic_portal.db", { autosave: true, autoload: true, autoloadCallback: databaseInitialize, autosaveInterval: 4000, persistenceMethod: 'localStorage' }); // let db = new loki("chaotic_portal.db", { autosave: true, autoload: true, autoloadCallback: databaseInitialize, autosaveInterval: 4000, persistenceMethod: 'localStorage' });
// this.db = db; // this.db = db;
@ -142,7 +164,7 @@ class CollectionDB {
// entries = db.addCollection("mugic"); // entries = db.addCollection("mugic");
// self.mugic = entries; // self.mugic = entries;
// }; // };
// } }
setup(spreadsheet, type, callback) { setup(spreadsheet, type, callback) {
this.api.getSpreadsheet(spreadsheet, (data) => { this.api.getSpreadsheet(spreadsheet, (data) => {
@ -158,6 +180,20 @@ class CollectionDB {
}); });
} }
// example format
// this.setup(this.api.urls.Attacks["portal"], "Attack", (data) => {});
async setupType(type, resolve) {
let uc_type = type.charAt(0).toUpperCase() + type.slice(1);
console.log(type, uc_type, this.format);
// this.setup(this.api.urls[uc_type][this.format], uc_type, (data) => {
// this[type].insert(data);
// this.built.push(type);
// }
resolve();
}
setupAttacks(type="portal") { setupAttacks(type="portal") {
this.setup(this.api.urls.Attacks[type], "Attack", (data) => { this.setup(this.api.urls.Attacks[type], "Attack", (data) => {
this.attacks.insert(data); this.attacks.insert(data);

View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { render } from 'react-dom'; import { render } from 'react-dom';
import { BrowserRouter as Router, Link, Route } from 'react-router-dom'; import { BrowserRouter as Router, Link, Route, withRouter } from 'react-router-dom';
import {observer, inject} from 'mobx-react'; import {observer, inject} from 'mobx-react';
import s from '../styles/app.style'; import s from '../styles/app.style';
@ -11,11 +11,11 @@ import Collection from './collection/index';
import Portal from './portal/index'; import Portal from './portal/index';
import Home from './Home'; import Home from './Home';
const BlockAvoider = withRouter(Base)
render( render(
<Router> <Router>
<div> <BlockAvoider />
<Route path="*" component={Base}/>
</div>
</Router> </Router>
, document.getElementById('root'), , document.getElementById('root'),
); );
@ -42,7 +42,6 @@ function Base(props) {
return ( return (
<div> <div>
<link rel="stylesheet" type="text/css" href="/src/css/legacy.css" />
<div className="fix-pgBkgrnd-repeat-x"> <div className="fix-pgBkgrnd-repeat-x">
<div className={"fix-img-bkgrnd fix-img-bkgrnd_"+bkgrnd}></div> <div className={"fix-img-bkgrnd fix-img-bkgrnd_"+bkgrnd}></div>
</div> </div>

View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import Interactive from 'react-interactive'; import Interactive from 'react-interactive';
import { Link, Route } from 'react-router-dom'; import { Link, Route } from 'react-router-dom';
import {observable} from 'mobx';
import {observer, inject} from 'mobx-react'; import {observer, inject} from 'mobx-react';
import s from '../../../styles/app.style'; import s from '../../../styles/app.style';
import API from '../../SpreadsheetData'; import API from '../../SpreadsheetData';
@ -8,6 +9,7 @@ import Attack from '../Single/Attack';
@inject((stores, props, context) => props) @observer @inject((stores, props, context) => props) @observer
export default class Attacks extends React.Component { export default class Attacks extends React.Component {
@observable loaded = false;
render() { render() {
@ -30,9 +32,15 @@ export default class Attacks extends React.Component {
return (<span>Loading...</span>); return (<span>Loading...</span>);
} }
const attacks = API.portal.attacks.data; if (this.loaded == false) {
API.buildCollection([{'cards': 'attacks'}, {'portal': 'attacks'}])
.then(() => {
this.loaded = true;
});
return (<span>Loading...</span>);
}
const output = attacks.map((attack, i) => { const output = API.portal.attacks.data.map((attack, i) => {
const card_data = API.cards.attacks.findOne({'gsx$name': attack.gsx$name}); const card_data = API.cards.attacks.findOne({'gsx$name': attack.gsx$name});
return ( return (
<div key={i}> <div key={i}>

View File

@ -2,7 +2,7 @@ import webpack from 'webpack';
import path from 'path'; import path from 'path';
export default { export default {
entry: `${__dirname}/src/components/index.js`, entry: ['babel-polyfill', `${__dirname}/src/components/index.js`],
output: { output: {
path: `${__dirname}/build`, path: `${__dirname}/build`,
publicPath: '/build/', publicPath: '/build/',