diff ismi-python-neo4jrestclient/static/index.html @ 7:45dad9e38c82

first functional version of commentary visualisation.
author casties
date Thu, 01 Oct 2015 14:39:56 +0200
parents aeef1fedd899
children 0f4846255b20
line wrap: on
line diff
--- a/ismi-python-neo4jrestclient/static/index.html	Mon Sep 28 18:15:35 2015 +0200
+++ b/ismi-python-neo4jrestclient/static/index.html	Thu Oct 01 14:39:56 2015 +0200
@@ -16,7 +16,7 @@
                     <li>
                         <form role="search" class="navbar-form" id="search">
                             <div class="form-group">
-                                <input type="text" value="Matrix" placeholder="Search for Movie Title" class="form-control" name="search">
+                                <input type="text" value="Qushji" placeholder="Search for Title" class="form-control" name="search">
                             </div>
                             <button class="btn btn-default" type="submit">Search</button>
                         </form>
@@ -30,7 +30,7 @@
                     </a>
                 </div>
                 <div class="navbar-brand">
-                    <div class="brand">ISMI Texts</div>
+                    <div class="brand">ISMI Commentary relations between Texts</div>
                 </div>
             </div>
         </div>
@@ -44,9 +44,9 @@
             <table id="results" class="table table-striped table-hover">
                 <thead>
                 <tr>
-                    <th>Movie</th>
-                    <th>Released</th>
-                    <th>Tagline</th>
+                    <th>Title (translit)</th>
+                    <th>ismi_id</th>
+                    <th>Title (arabic)</th>
                 </tr>
                 </thead>
                 <tbody>
@@ -58,12 +58,12 @@
         <div class="panel panel-default">
             <div class="panel-heading" id="title">Details</div>
             <div class="row">
-                <div class="col-sm-4 col-md-4">
+                <!-- <div class="col-sm-4 col-md-4">
                     <img src="" class="well" id="poster"/>
-                </div>
+                </div> -->
                 <div class="col-md-8 col-sm-8">
-                    <h4>Crew</h4>
-                    <ul id="crew">
+                    <h4>Details</h4>
+                    <ul id="info">
                     </ul>
                 </div>
             </div>
@@ -72,7 +72,7 @@
 </div>
 <style type="text/css">
     .node { stroke: #222; stroke-width: 1.5px; }
-    .node.actor { fill: #888; }
+    .node.TEXT { fill: #888; }
     .node.movie { fill: #BBB; }
     .link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; }
 </style>
@@ -81,16 +81,16 @@
 <script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script>
 <script type="text/javascript">
     $(function () {
-        function showMovie(title) {
-            $.get("/movie/" + encodeURIComponent(title),
+        function showMovie(text_id) {
+            $.get("/text/" + encodeURIComponent(text_id),
                     function (data) {
                         if (!data) return;
                         $("#title").text(data.title);
-                        $("#poster").attr("src","http://neo4j-contrib.github.io/developer-resources/language-guides/assets/posters/"+encodeURIComponent(data.title)+".jpg");
-                        var $list = $("#crew").empty();
-                        data.cast.forEach(function (cast) {
-                            $list.append($("<li>" + cast.name + " " +cast.job + (cast.job == "acted"?" as " + cast.role : "") + "</li>"));
-                        });
+                        // $("#poster").attr("src","http://neo4j-contrib.github.io/developer-resources/language-guides/assets/posters/"+encodeURIComponent(data.title)+".jpg");
+                        var $list = $("#info").empty();
+                        for (key in data.attrs) {
+                            $list.append($("<li>" + key + ": " + data.attrs[key] + "</li>"));
+                        };
                     }, "json");
             return false;
         }
@@ -101,11 +101,11 @@
                         var t = $("table#results tbody").empty();
                         if (!data || data.length == 0) return;
                         data.forEach(function (row) {
-                            var movie = row.movie;
-                            $("<tr><td class='movie'>" + movie.title + "</td><td>" + movie.released + "</td><td>" + movie.tagline + "</td></tr>").appendTo(t)
-                                    .click(function() { showMovie($(this).find("td.movie").text());})
+                            var text = row.text;
+                            $("<tr><td>" + text.label + "</td><td>" + text.full_title + "</td><td class='text_id'>" + text.ismi_id + "</td></tr>").appendTo(t)
+                                    .click(function() { showMovie($(this).find("td.text_id").text());})
                         });
-                        showMovie(data[0].movie.title);
+                        showMovie(data[0].text.ismi_id);
                     }, "json");
             return false;
         }