date filters
This commit is contained in:
parent
0138a74aa9
commit
27990678c2
286
index.html
286
index.html
@ -2,10 +2,12 @@
|
||||
<script type="module">
|
||||
|
||||
import _ from "https://dev.jspm.io/lodash";
|
||||
import styled from "https://dev.jspm.io/styled-components";
|
||||
import React from "https://dev.jspm.io/react/index.js";
|
||||
import ReactDOM from "https://dev.jspm.io/react-dom/index.js";
|
||||
import ReactDOMServer from "https://dev.jspm.io/react-dom/server.js";
|
||||
|
||||
|
||||
let Util = {
|
||||
ParsePassage:inRef=>
|
||||
{
|
||||
@ -17,6 +19,7 @@ let Util = {
|
||||
};
|
||||
|
||||
let h = React.createElement;
|
||||
let s = styled.default;
|
||||
|
||||
let ElemApp = props =>
|
||||
{
|
||||
@ -24,6 +27,7 @@ let ElemApp = props =>
|
||||
[
|
||||
h(ElemTree, {key:"tree1", tree:App.State.Topics}),
|
||||
h(ElemTree, {key:"tree2", tree:App.State.Bible}),
|
||||
h(ElemTree, {key:"tree3", tree:App.State.Date}),
|
||||
h(ElemItems, {key:3})
|
||||
]
|
||||
);
|
||||
@ -46,14 +50,15 @@ let ElemItems = props =>
|
||||
h("div", {key:2}, list),
|
||||
h("div", {key:3}, pages)
|
||||
]);
|
||||
}
|
||||
};
|
||||
let ElemItem = props =>
|
||||
{
|
||||
return h("div", {key:0}, [
|
||||
h("div", {key:1},
|
||||
[
|
||||
h("span", {key:2}, props.title),
|
||||
h("em", {key:3}, props.id)
|
||||
h("em", {key:3}, props.id),
|
||||
h("strong", {key:4}, props.date),
|
||||
]
|
||||
),
|
||||
h("small", {key:4}, props.bible)
|
||||
@ -126,31 +131,17 @@ let ElemPager = ({count, active}) =>
|
||||
return h("div", {}, children);
|
||||
};
|
||||
|
||||
let ElemTopics = props =>
|
||||
{
|
||||
let children = App.State.Topics.All.map( t=>
|
||||
{
|
||||
return h(ElemTopic, {
|
||||
onClick:e=>App.Update.Topic(t),
|
||||
key:t.id,
|
||||
label:t.display,
|
||||
active:t.active
|
||||
});
|
||||
});
|
||||
return h("div", null, children);
|
||||
};
|
||||
let ElemTopic = props =>
|
||||
{
|
||||
let label = props.active? props.label+" !" : props.label;
|
||||
return h("button", {onClick:props.onClick}, label);
|
||||
};
|
||||
let ElemColumn = s.div`
|
||||
display:inline-block;
|
||||
vertical-align:top;
|
||||
`;
|
||||
|
||||
let ElemTree = ({tree}) =>
|
||||
{
|
||||
let activeItems = tree.Active.map( a=>{
|
||||
return h("button", {disabled:a.Parent?false:true, key:a.ID, onClick:e=>App.Update.Select(a, tree)}, a.Display )
|
||||
})
|
||||
return h("div", {},
|
||||
});
|
||||
return h(ElemColumn, {},
|
||||
[
|
||||
h("h3", {key:"title"}, tree.Display),
|
||||
h("div", {key:"filters-active"}, [
|
||||
@ -162,7 +153,7 @@ let ElemTree = ({tree}) =>
|
||||
h(ElemTreeNode, {key:"tree", node:tree.Root, tree:tree})
|
||||
])
|
||||
]);
|
||||
}
|
||||
};
|
||||
let ElemTreeNode = ({node, tree}) =>
|
||||
{
|
||||
let children = [];
|
||||
@ -409,37 +400,129 @@ var App = {
|
||||
Node.Create("1 Thessalonians")
|
||||
])
|
||||
])
|
||||
},
|
||||
Date:
|
||||
{
|
||||
Display:"Date",
|
||||
Results:[],
|
||||
Active:[],
|
||||
Root:
|
||||
Node.Create("all", "All", [
|
||||
Node.Create("", "Unclassified"),
|
||||
Node.Create("8", "1980s"),
|
||||
Node.Create("9", "1990s"),
|
||||
Node.Create("0", "2000s"),
|
||||
Node.Create("1", "2010s"),
|
||||
Node.Create("2", "2020s")
|
||||
])
|
||||
}
|
||||
},
|
||||
|
||||
RootDOM:document.querySelector("#root"),
|
||||
RootComponent:ElemApp,
|
||||
Render:()=>ReactDOM.render( h(App.RootComponent), App.RootDOM ),
|
||||
ApplyFilters:()=>
|
||||
{
|
||||
App.State.Items.Active = _.union(App.State.Topics.Results, App.State.Bible.Results);
|
||||
if(App.State.Items.Active.length == 0)
|
||||
{
|
||||
App.State.Items.Active = App.State.Items.All;
|
||||
}
|
||||
App.State.Pages.All = _.chunk(App.State.Items.Active, 10);
|
||||
App.State.Pages.Active = 0;
|
||||
},
|
||||
LeafStructure:(inTree)=>
|
||||
{
|
||||
let output = {};
|
||||
Node.IterateDown(inTree.Root, n=>
|
||||
{
|
||||
if(!n.Children)
|
||||
{
|
||||
output[n.ID] = n;
|
||||
}
|
||||
});
|
||||
return output;
|
||||
},
|
||||
|
||||
Update:
|
||||
{
|
||||
Load:(file)=>
|
||||
{
|
||||
let leafStructure = inTree=>
|
||||
{
|
||||
let output = [];
|
||||
Node.IterateDown(inTree.Root, n=>
|
||||
{
|
||||
if(!n.Children)
|
||||
{
|
||||
output[n.ID] = n;
|
||||
}
|
||||
});
|
||||
return output;
|
||||
};
|
||||
|
||||
let structTopics = leafStructure(App.State.Topics)
|
||||
let structBible = leafStructure(App.State.Bible);
|
||||
let structDate = leafStructure(App.State.Date);
|
||||
|
||||
fetch(file)
|
||||
.then(inAccept=>inAccept.text())
|
||||
.then(inAccept=>
|
||||
{
|
||||
let itrUp = inLeaf=>
|
||||
{
|
||||
Node.IterateUp(inLeaf, inBranch=>
|
||||
{
|
||||
inBranch.Leaves = _.union(inBranch.Leaves, inLeaf.Leaves)
|
||||
});
|
||||
};
|
||||
|
||||
let columns = inAccept.split("|");
|
||||
|
||||
for(let i=0; i<columns.length; i+=5)
|
||||
{
|
||||
let title = columns[i+0];
|
||||
let id = columns[i+1];
|
||||
let date = columns[i+2];
|
||||
let bible = columns[i+3].split("*");
|
||||
let topics = columns[i+4].split("*");
|
||||
|
||||
let output = { title, id, date, topics, bible };
|
||||
|
||||
|
||||
var matched, match;
|
||||
|
||||
// match topics
|
||||
matched = false;
|
||||
topics.forEach(t=>
|
||||
{
|
||||
match = structTopics[t];
|
||||
if(match)
|
||||
{
|
||||
match.Leaves.push(output);
|
||||
matched = true;
|
||||
}
|
||||
});
|
||||
if(!matched)
|
||||
{
|
||||
structTopics[""].Leaves.push(output);
|
||||
}
|
||||
|
||||
// match bible
|
||||
matched = false;
|
||||
bible.forEach(t=>
|
||||
{
|
||||
match = structBible[ Util.ParsePassage(t)[0] ];
|
||||
if(match)
|
||||
{
|
||||
match.Leaves.push(output);
|
||||
matched = true;
|
||||
}
|
||||
});
|
||||
if(!matched)
|
||||
{
|
||||
structBible[""].Leaves.push(output);
|
||||
}
|
||||
|
||||
// match date
|
||||
matched = false;
|
||||
match = structDate[date[2]];
|
||||
if(match)
|
||||
{
|
||||
match.Leaves.push(output);
|
||||
matched = true;
|
||||
}
|
||||
if(!matched)
|
||||
{
|
||||
structDate[""].Leaves.push(output);
|
||||
}
|
||||
|
||||
App.State.Items.All.push(output);
|
||||
}
|
||||
|
||||
Object.values(structTopics).forEach(itrUp);
|
||||
Object.values(structBible).forEach(itrUp);
|
||||
Object.values(structDate).forEach(itrUp);
|
||||
})
|
||||
.then(inAccept=>
|
||||
{
|
||||
App.ApplyFilters();
|
||||
App.Render();
|
||||
});
|
||||
},
|
||||
Interact:(inNode)=>
|
||||
{
|
||||
if(inNode.Open)
|
||||
@ -493,96 +576,6 @@ var App = {
|
||||
App.ApplyFilters();
|
||||
App.Render();
|
||||
},
|
||||
Load:(file)=>
|
||||
{
|
||||
|
||||
fetch(file)
|
||||
.then(inAccept=>inAccept.text())
|
||||
.then(inAccept=>
|
||||
{
|
||||
let structTopics = App.LeafStructure(App.State.Topics);
|
||||
let structBible = App.LeafStructure(App.State.Bible);
|
||||
|
||||
let itrUp = inLeaf=>
|
||||
{
|
||||
Node.IterateUp(inLeaf, inBranch=>
|
||||
{
|
||||
inBranch.Leaves = _.union(inBranch.Leaves, inLeaf.Leaves)
|
||||
});
|
||||
};
|
||||
|
||||
let columns = inAccept.split("|");
|
||||
|
||||
for(let i=0; i<columns.length; i+=5)
|
||||
{
|
||||
let title = columns[i+0];
|
||||
let id = columns[i+1];
|
||||
let year = columns[i+2];
|
||||
let bible = columns[i+3].split("*");
|
||||
let topics = columns[i+4].split("*");
|
||||
|
||||
let output = { title, id, year, topics, bible };
|
||||
|
||||
let matched = false;
|
||||
topics.forEach(t=>
|
||||
{
|
||||
let match = structTopics[t];
|
||||
if(match)
|
||||
{
|
||||
match.Leaves.push(output);
|
||||
matched = true;
|
||||
}
|
||||
});
|
||||
if(!matched)
|
||||
{
|
||||
structTopics[""].Leaves.push(output);
|
||||
}
|
||||
matched = false;
|
||||
bible.forEach(t=>
|
||||
{
|
||||
let passage = Util.ParsePassage(t);
|
||||
let match = structBible[ passage[0] ];
|
||||
if(match)
|
||||
{
|
||||
match.Leaves.push(output);
|
||||
matched = true;
|
||||
}
|
||||
});
|
||||
if(!matched)
|
||||
{
|
||||
structBible[""].Leaves.push(output);
|
||||
}
|
||||
|
||||
App.State.Items.All.push(output);
|
||||
}
|
||||
|
||||
Object.values(structTopics).forEach(itrUp);
|
||||
Object.values(structBible).forEach(itrUp);
|
||||
console.log(App.State.Items.All.length);
|
||||
})
|
||||
.then(inAccept=>
|
||||
{
|
||||
App.ApplyFilters();
|
||||
App.Render();
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
Topic:(topic)=>
|
||||
{
|
||||
if(topic.active)
|
||||
{
|
||||
topic.active = false;
|
||||
App.State.Topics.Active = App.State.Topics.Active.filter( t=>t.id != topic.id );
|
||||
}
|
||||
else
|
||||
{
|
||||
topic.active = true;
|
||||
App.State.Topics.Active.push(topic);
|
||||
}
|
||||
App.ApplyFilters();
|
||||
App.Render();
|
||||
},
|
||||
Page:(page)=>
|
||||
{
|
||||
if(page !== false)
|
||||
@ -591,6 +584,19 @@ var App = {
|
||||
App.Render();
|
||||
}
|
||||
}
|
||||
},
|
||||
RootDOM:document.querySelector("#root"),
|
||||
RootComponent:ElemApp,
|
||||
Render:()=>ReactDOM.render( h(App.RootComponent), App.RootDOM ),
|
||||
ApplyFilters:()=>
|
||||
{
|
||||
App.State.Items.Active = _.union(App.State.Topics.Results, App.State.Bible.Results, App.State.Date.Results);
|
||||
if(App.State.Items.Active.length == 0)
|
||||
{
|
||||
App.State.Items.Active = App.State.Items.All;
|
||||
}
|
||||
App.State.Pages.All = _.chunk(App.State.Items.Active, 10);
|
||||
App.State.Pages.Active = 0;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user