Mercurial > hg > NetworkVis
diff query_builder/index.html @ 26:22be4ea663a7
Trying to work out having json request from neo4j display properly in drop down selectize box
| author | arussell |
|---|---|
| date | Tue, 01 Dec 2015 02:07:13 -0500 |
| parents | f82512502b31 |
| children | ed8b4e3f2a73 |
line wrap: on
line diff
--- a/query_builder/index.html Mon Nov 23 02:03:51 2015 -0500 +++ b/query_builder/index.html Tue Dec 01 02:07:13 2015 -0500 @@ -5,6 +5,9 @@ <title>Query Builder</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="bootstrap/bootstrap-slider/css/bootstrap-slider.css"> + <link rel="stylesheet" href="selectize/dist/css/selectize.default.css"> + <link rel="stylesheet" href="bootstrap-select/dist/css/bootstrap-select.min.css"> + <link rel="stylesheet" href="selectize/dist/css/selectize.bootstrap3.css"> <link rel="stylesheet" href="css/query-builder.default.min.css"> @@ -36,7 +39,7 @@ <div class="panel panel-default"> <div class="panel-heading" id="title">Query Builder</div> - <div id="builder"></div> + <div id="builder-widgets"></div> </div> </div> @@ -47,158 +50,108 @@ <script type="text/javascript" src="js/jquery-1.11.3.js"></script> <script type="text/javascript" src="js/d3.min.js"></script> + <script type="text/javascript" src="moment/min/moment.min.js"></script> <script type="text/javascript" src="bootstrap/bootstrap-datepicker/js/bootstrap-datepicker.js"></script> <script type="text/javascript" src="bootstrap/bootstrap-slider/js/bootstrap-slider.js"></script> + <script type="text/javascript" src="selectize/dist/js/standalone/selectize.min.js"></script> + <script type="text/javascript" src="bootstrap-select/dist/js/bootstrap-select.min.js"></script> <script type="text/javascript" src="js/query-builder.standalone.min.js"></script> - + <script> var rules_widgets = { condition: 'OR', rules: [{ - id: 'date', - operator: 'equal', - value: '1991/11/17' - }, { - id: 'commentaries', + id: 'codex', operator: 'equal', - value: 2 - }, { - id: 'author', - operator: 'equal', - value: 'Šaraf al-Dīn Maḥmūd ibn Muḥammad ibn ʿUmar al-Jaġmīnī al-Ḫwārizmī' - }, { - condition: 'AND', - rules: [{ - id: 'coord', - operator: 'equal', - value: 'B.3' - }] + values: [], }] }; - $('#builder').queryBuilder({ - - filters: [{ - id: 'date', - label: 'Date', - type: 'date', - validation: { - format: 'YYYY/MM/DD' - }, - plugin: 'datepicker', - plugin_config: { - format: 'yyyy/mm/dd', - todayBtn: 'linked', - todayHighlight: true, - autoclose: true - } - }, { - id: 'commentaries', - label: 'Number of Commentaries', - type: 'integer', - validation: { - min: 0, - max: 15 - }, - plugin: 'slider', - plugin_config: { - min: 0, - max: 15, - value: 0 - }, - valueSetter: function(rule, value) { - rule.$el.find('.rule-value-container input').slider('setValue', value); - }, - valueGetter: function(rule) { - return rule.$el.find('.rule-value-container input').slider('getValue'); - } - }, { - id: 'author', - label: 'Author', - alias: 'Witness', - type: 'string', - plugin: 'selectize', - plugin_config: { - valueField: 'id', - labelField: 'name', - searchField: 'name', - sortField: 'name', - create: true, - maxItems: 1, - plugins: ['remove_button'], - onInitialize: function() { - var that = this; + // Fix for Selectize + $('#builder-widgets').on('afterCreateRuleInput.queryBuilder', function(e, rule) { + if (rule.filter.plugin == 'selectize') { + rule.$el.find('.rule-value-container').css('min-width', '200px') + .find('.selectize-control').removeClass('form-control'); + } + }); - if (localStorage.demoData === undefined) { - $.getJSON(baseurl + '/assets/demo-data.json', function(data) { - localStorage.demoData = JSON.stringify(data); - data.forEach(function(item) { - that.addOption(item); - }); - }); - } - else { - JSON.parse(localStorage.demoData).forEach(function(item) { - that.addOption(item); - }); - } - } - }, - valueSetter: function(rule, value) { - rule.$el.find('.rule-value-container input')[0].selectize.setValue(value); - } - }, { - id: 'coord', - label: 'Coordinates', - type: 'string', - validation: { - format: /^[A-C]{1}.[1-6]{1}$/ - }, - input: function(rule, name) { - var $container = rule.$el.find('.rule-value-container'); - - $container.on('change', '[name='+ name +'_1]', function(){ - var h = ''; - - switch ($(this).val()) { - case 'A': - h = '<option value="-1">-</option> <option value="1">1</option> <option value="2">2</option>'; - break; - case 'B': - h = '<option value="-1">-</option> <option value="3">3</option> <option value="4">4</option>'; - break; - case 'C': - h = '<option value="-1">-</option> <option value="5">5</option> <option value="6">6</option>'; - break; - } - - $container.find('[name='+ name +'_2]').html(h).toggle(h!=''); - }); - - return '\ - <select name="'+ name +'_1"> \ - <option value="-1">-</option> \ - <option value="A">A</option> \ - <option value="B">B</option> \ - <option value="C">C</option> \ - </select> \ - <select name="'+ name +'_2" style="display:none;"></select>'; - }, - valueGetter: function(rule) { - return rule.$el.find('.rule-value-container [name$=_1]').val() - +'.'+ rule.$el.find('.rule-value-container [name$=_2]').val(); - }, - valueSetter: function(rule, value) { - if (rule.operator.nb_inputs > 0) { - var val = value.split('.'); - - rule.$el.find('.rule-value-container [name$=_1]').val(val[0]).trigger('change'); - rule.$el.find('.rule-value-container [name$=_2]').val(val[1]).trigger('change'); - } - } - }], + $('#builder-widgets').queryBuilder({ + //plugins: ['bt-tooltip-errors'], + filters: [{ + id: 'name', + label: 'Name', + type: 'string' + }, { + id: 'codex', + label: 'Codex', + type: 'string', + plugin: 'selectize', + plugin_config: { + valueField: 'id', + labelField: 'name', + searchField: 'name', + sortField: 'name', + create: true, + maxItems: 1, + plugins: ['remove_button'], + onInitialize: function() { + var that = this; + function ajax1() { + return $.ajax({ + type: "POST", + url: "https://ismi-dev.mpiwg-berlin.mpg.de/neo4j-ismi/db/data/cypher", + accepts: "application/json", + dataType: "json", + data: { + "query": "match (codex:CODEX) return codex limit 25", + "params": {} + }, + beforeSend: function (xhr) { + xhr.setRequestHeader ("Authorization", "Basic " + btoa('neo4j' + ":" + 'neo5j')); + }, + success: function (res, textStatus, jqXHR) { + console.log("success"); + return res.data; + }, + error: function (jqXHR, textStatus, errorThrown) { + console.log("error"); + return null; + } + }); + } + $.when(ajax1()).done(function(a1){ - rules: rules_widgets + var d = a1.data; + if (localStorage.demoData === undefined) { + console.log(localStorage.demoData); + localStorage.demoData = JSON.stringify(a1); + for (var i= 0; i<d.length; i++) { + //that.clearOptions(); // clear the data + //that.renderCache = {}; + console.log("addOption = " + d[i][0].data.label); + that.addOption(d[i][0].data.label); + } + } + else { + var obj = JSON.parse(localStorage.demoData).data; + for(i=0; i<obj.length; i++) { + //that.clearOptions(); // clear the data + //that.renderCache = {}; + console.log("addOption = " + d[i][0].data.label); + that.addOption(obj[i][0].data.label); + //that.values.push(d[i][0].data.label); + } + } + }); + }, + + }, + valueSetter: function(rule, value) { + console.log('SETTER EXECUTED'); + rule.$el.find('.rule-value-container input')[0].selectize.setValue(value); + }, + }], + rules: rules_widgets }); $('#btn-reset').on('click', function() { @@ -216,94 +169,7 @@ alert(JSON.stringify(result, null, 2)); } }); - </script> -<!-- <script type="text/javascript"> -111 // make panels roll-up -112 $(".panel-heading").on("click", function() { -113 $(this).find(".clickhide").toggle(); -114 $(this).next().slideToggle(); -115 }); -116 // provide search and graph -117 backendApiPrefix = "/netvis-ismi"; -118 searchApi = {}; -119 $(function () { -120 function showText(text_id) { -121 $.get(backendApiPrefix+"/textandcommentaries/" + encodeURIComponent(text_id), -122 function (data) { -123 if (!data) return; -124 $("#title").text("Title: "+data.title); -125 var $list = $("#info").empty(); -126 $list.append($("<li>Author: " + data.author.label + " [" + data.author.ismi_id + "]</li>") -127 .click(function() { -128 search(data.author.ismi_id, true); -129 })); -130 for (var key in data.attrs) { -131 var val = data.attrs[key]; -132 if (key === "link") { -133 val = "<a href=\"" + val + "\" target=\"_blank\">" + val + "</a>"; -134 } -135 $list.append($("<li>" + key + ": " + val + "</li>")); -136 }; -137 // re-set selected -138 $("#graph .selected").each(function(){this.classList.remove("selected")}); -139 $("#graph .ismi-"+data.attrs.ismi_id).each(function(){this.classList.add("selected")}); -140 // add commentaries -141 var $commentaries = $("#commentaries").empty(); -142 for (var key in data.commentaries) { -143 var val = data.commentaries[key]; -144 $commentaries.append($("<li>" + val.title + " [<span class=\"text_id\">" + key + "</span>] by " + val.author + "</li>") -145 .click(function() { showText($(this).find("span.text_id").text());})); -146 } -147 var $commenting = $("#commenting").empty(); -148 for (var key in data.commenting) { -149 var val = data.commenting[key]; -150 $commenting.append($("<li>" + val.title + " [<span class=\"text_id\">" + key + "</span>] by " + val.author + "</li>") -151 .click(function() { showText($(this).find("span.text_id").text());})); -152 } -153 }, "json"); -154 return false; -155 } -156 function search(query, keep_detail_view) { -157 console.log("search query=", typeof query); -158 if (query == null || typeof query === "object") { -159 query=$("#search").find("input[name=search]").val(); -160 } -161 $.get(backendApiPrefix+"/search?q=" + encodeURIComponent(query), -162 function (data) { -163 var t = $("table#results tbody").empty(); -164 if (!data || data.length == 0) return; -165 // clear all marks -166 $("#graph .marked").each(function(){this.classList.remove("marked")}); -167 // fill table of titles -168 data.forEach(function (row) { -169 var text = row.text; -170 var author = row.author; -171 $("#author").text("Titles by Author: "+author.label+" ["+author.ismi_id+"]"); -172 var comm = row.is_commentary || row.has_commentaries; -173 var $row = $("<tr><td>" + text.label + "</td><td>" + text.full_title + "</td><td class='text_id'>" + text.ismi_id + "</td></tr>").appendTo(t) -174 .click(function() { showText($(this).find("td.text_id").text());}); -175 if (comm) { -176 $row.addClass("marked"); -177 } -178 // set mark -179 $("#graph .ismi-"+text.ismi_id).each(function(){this.classList.add("marked")}); -180 }); -181 if (!keep_detail_view) { -182 // show first title -183 showText(data[0].text.ismi_id); -184 } -185 }, "json"); -186 return false; -187 } -188 // export API -189 searchApi.showText = showText; -190 searchApi.search = search; -191 // start search -192 $("#search").submit(search); -193 search(); -194 }); -195 </script> ---> + </script> <script type="text/javascript"> var width = 1400, height = 1400;