Mercurial > hg > NetworkVis

diff query_builder/ismi.html @ 26:22be4ea663a7

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
children ed8b4e3f2a73
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/query_builder/ismi.html	Tue Dec 01 02:07:13 2015 -0500
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
+    <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">
+
+
+</head>
+<body style="background:none;">
+<div role="navigation" class="navbar navbar-default navbar-static-top">
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-6 col-md-6">
+                <ul class="nav navbar-nav">
+                </ul>
+            </div>
+            <div class="navbar-header col-sm-6 col-md-6">
+                <div class="logo-well">
+                    <a href="//neo4j.com/developer-resources">
+                        <img src="//neo4j-contrib.github.io/developer-resources/language-guides/assets/img/logo-white.svg" alt="Neo4j World's Leading Graph Database" id="logo">
+                    </a>
+                </div>
+                <div class="navbar-brand">
+                    <div class="brand">ISMI Query Builder</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="container">
+    <div class="row" style="width: 95%">
+        <div class="col-md-12">
+            <div class="panel panel-default">
+                <div class="panel-heading" id="title">Query Builder</div>
+
+
+
+
+                <div class="sandbox">
+                    <label for="select-codex">Codex:</label>
+                    <select id="select-codex" class="codices selectized" placeholder="Choose a codex" tabindex="-1" style="display: none;"></select>
+                </div>
+
+
+
+
+
+
+
+            </div>
+        </div>
+    </div>
+</div>
+
+
+
+<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 refreshDropdown = function(query, callback) {
+        $.getJSON('url/suppliers', function (results) {
+            if (results) {
+                var selectOptions = [];
+                for (var index = 0, length = results.length; index < length; index++) {
+                    var item = results[index];
+                    selectOptions.push({
+                        text: item.Option,
+                        value: item.Id.toString()
+                    });
+                }
+
+                var selectize = $("#Supplier")[0].selectize;
+                selectize.clear();
+                selectize.clearOptions();
+                selectize.load(function (callback) {
+                    callback(selectOptions);
+                });
+            }
+        })
+    };
+
+    $('#select-codex').selectize({
+        valueField: 'title',
+        labelField: 'title',
+        searchField: 'title',
+        options: [],
+        create: false,
+        render: {
+            option: function(item, escape) {
+                console.log(item[0].data.label);
+                return '<div>' +
+                        '<span class="codex">' + escape(item.label) + '</span>' +
+                        '</div>';
+            }
+        },
+        load: function(query, callback) {
+            //if (!query.length) return callback();
+                $.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");
+                        optionArray=[];
+                        res.data.forEach(function(arr) {
+                            optionArray.push(arr[0].data);
+                        });
+                        console.log(optionArray);
+                        callback(optionArray);
+                    },
+                    error: function (jqXHR, textStatus, errorThrown) {
+                        console.log("error");
+                        callback();
+                    }
+                });
+
+        }
+    });
+
+
+
+
+</script>
+
+</body>
+</html>