offline-search/index.html

<div id="root"></div>
<script type="module">
import _ from "https://dev.jspm.io/lodash";
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 h = React.createElement;

let ElemApp = props =>
{
    return h("div", null,
    [
        h("h4", {key:0}, "topics"),
        h(ElemTopics, {key:1}),
        h("h4", {key:2}, "results"),
        h(ElemItems, {key:3})
    ]
    );
};

let ElemItems = props =>
{
    let children = App.State.Items.Active.map( i=>h(ElemItem, {...i, key:i.id} ) );
    return h("div", null, children);
}
let ElemItem = props =>
{
    return h("div", {key:0}, [
        h("h3", {key:1}, props.title),
        h("p", {key:2}, props.id),
        h("small", {key:3}, props.bible)
    ])
};

let ElemTopics = props =>
{
    let children = App.State.Topics.All.map( t=>
    {
        return h(ElemTopic, {
            onClick:e=>App.Update("topic-toggle", 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);
};

var App = {
    State:
    {
        Items:
        {
            All:[],
            Active:[]
        },
        Topics:
        {
            All:
            [
                {
                    id:"gospel-the",
                    display:"The Gospel",
                    active:false
                },
                {
                    id:"jesus-christ",
                    display:"Jesus Christ",
                    active:false
                },
                {
                    id:"biblical-figures",
                    display:"Biblical Figures",
                    active:false
                },
                {
                    id:"free-will",
                    display:"Free Will",
                    active:false
                },
                {
                    id:"secular-culture",
                    display:"Secular Culture",
                    active:false
                }
            ],
            Active:[]
        },
        Scripture:
        {
            All:{},
            Active:[]
        }
    },
    RootDOM:document.querySelector("#root"),
    RootComponent:ElemApp,
    Render:()=>ReactDOM.render( h(App.RootComponent), App.RootDOM ),
    ApplyFilters:()=>
    {
        if(App.State.Topics.Active.length == 0)
        {
            App.State.Items.Active = [...App.State.Items.All];
        }
        else
        {
            App.State.Items.Active = App.State.Items.All.filter( item =>
            {
                for(let i=0; i<item.topics.length; i++)
                {
                    for(let j=0; j<App.State.Topics.Active.length; j++)
                    {
                        if(item.topics[i] == App.State.Topics.Active[j].id)
                        {
                            return true;
                        }
                    }
                }
                return false;
            });
        }
    },
    Update:(...action)=>
    {
        if(action)
        {
            switch(action[0])
            {
                case "load":
                    fetch(action[1])
                    .then(inAccept=>inAccept.text())
                    .then(inAccept=>
                    {
                        let columns = inAccept.split("|");
                        App.State.Items.All = [];
                        for(let i=0; i<columns.length; i+=4)
                        {
                            let row = Math.floor(i/4);
                            App.State.Items.All[row] = {
                                title:columns[i+0],
                                id:columns[i+1],
                                bible:columns[i+2].split("*"),
                                topics:columns[i+3].split("*")
                            };
                        }
                        App.ApplyFilters();
                        App.Render();
                    }
                    );
                    break;

                case "topic-toggle" :
                    let topic = action[1];
                    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();
                    break;
            }
        }
    }
};


App.Update("load", "data-flat.csv");


</script>