Mercurial > hg > NetworkVis
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; }