JSFiddle - React, Tailwind, and code Playground

by andypotanin

HTML

<script src="http://cdn.udx.io/udx.requires.js"></script>
<div ng-controller="SearchCtrl">
    <div class="container-fluid">
        <div class="row-fluid" style="margin-top:5%">
            <div class="span2 well">
                <ul class="nav nav-list">
                    <li class="nav-header">Shape</li>
                    <li ng-repeat="shape in results.facets.shapeFacet.terms">
                        <label class="checkbox">
                            <input type="checkbox" ng-checked="hasFilter('shape', shape.term)" ng-click="handleFilter('shape', shape.term)">{{shape.term}} <span class="muted">({{shape.count}})</span>

                        </label>
                    </li>
                    <li class="divider"></li>
                    <li class="nav-header">Color</li>
                    <li ng-repeat="color in results.facets.colorFacet.terms">
                        <label class="checkbox">
                            <input type="checkbox" ng-checked="hasFilter('color', color.term)" ng-click="handleFilter('color', color.term)">{{color.term}} <span class="muted">({{color.count}})</span>

                        </label>
                    </li>
                    <li class="divider"></li>
                    <li class="nav-header">Tags</li>
                    <li ng-repeat="tag in results.facets.tagsFacet.terms">
                        <label class="checkbox">
                            <input type="checkbox" ng-checked="hasFilter('tags', tag.term)" ng-click="handleFilter('tags', tag.term)">{{tag.term}} <span class="muted">({{tag.count}})</span>

                        </label>
                    </li>
                    <li class="divider"></li>
                    <li class="nav-header">Keywords</li>
                    <li ng-repeat="kw in results.facets.keywordsFacet.terms">
                        <label class="checkbox">
                            <input type="checkbox" ng-checked="hasFilter('keywords', kw.term)"...

CSS

@import'http://demo.fullscale.co/common/css/normalize.min.css';
 @import'http://demo.fullscale.co/common/css/main.min.css';
 @import'http://demo.fullscale.co/common/css/bootstrap.min.css';
 @import'http://demo.fullscale.co/common/css/bootstrap-responsive.min.css';
 @import'http://demo.fullscale.co/common/css/elasticjs.css';
 @import'http://demo.fullscale.co/common/css/bootstrap.min.css';

JavaScript

require(['elastic.client'], function (Client) {
console.clear();
    var Client = require( 'elastic.client' );
    console.log( Client );
    return;
    var client = Client.Client({host:'http://api.discodonniepresents.com/documents'});

console.dir( client );
return;    
    var request = client.Request({indices: '', types: 'artist'});
    
    request.doSearch(function(results){
      console.log(results);
    })
    
    return;
    console.log( typeof Client.suggest );
    return;

    client.search({
        index: '',
        type: 'artist',
        body: client.Request().query(client.MatchQuery({'body': 'elasticsearch'}))
    }).then(function (resp) {
        var hits = resp.hits.hits;
    }, function (err) {
        console.trace(err.message);
    });

    return;
    
    var request = client.Request({
        types: 'artist'
    });

    return;

    request.filter(
    client.TermFilter('hdp_artist_name', 'Morgan Page'))
        .query(
    client.QueryStringQuery('Morgan Page'))
        .facet(
    client.TermsFacet('Artist')
        .field('hdp_artist_name')
        .size(10))
        .facet(
    client.TermsFacet('Tour')
        .field('hdp_tour_name')
        .size(10))
        .doSearch(function (results) {
        console.log(results);
    });

});