Mercurial > hg > NetworkVis

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

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
first functional version of commentary visualisation.
author casties
date Thu, 01 Oct 2015 14:39:56 +0200
parents aeef1fedd899
children 0f4846255b20
comparison
equal deleted inserted replaced
6:aeef1fedd899 7:45dad9e38c82
14 <div class="col-sm-6 col-md-6"> 14 <div class="col-sm-6 col-md-6">
15 <ul class="nav navbar-nav"> 15 <ul class="nav navbar-nav">
16 <li> 16 <li>
17 <form role="search" class="navbar-form" id="search"> 17 <form role="search" class="navbar-form" id="search">
18 <div class="form-group"> 18 <div class="form-group">
19 <input type="text" value="Matrix" placeholder="Search for Movie Title" class="form-control" name="search"> 19 <input type="text" value="Qushji" placeholder="Search for Title" class="form-control" name="search">
20 </div> 20 </div>
21 <button class="btn btn-default" type="submit">Search</button> 21 <button class="btn btn-default" type="submit">Search</button>
22 </form> 22 </form>
23 </li> 23 </li>
24 </ul> 24 </ul>
28 <a href="http://neo4j.com/developer-resources"> 28 <a href="http://neo4j.com/developer-resources">
29 <img src="http://neo4j-contrib.github.io/developer-resources/language-guides/assets/img/logo-white.svg" alt="Neo4j World's Leading Graph Database" id="logo"> 29 <img src="http://neo4j-contrib.github.io/developer-resources/language-guides/assets/img/logo-white.svg" alt="Neo4j World's Leading Graph Database" id="logo">
30 </a> 30 </a>
31 </div> 31 </div>
32 <div class="navbar-brand"> 32 <div class="navbar-brand">
33 <div class="brand">ISMI Texts</div> 33 <div class="brand">ISMI Commentary relations between Texts</div>
34 </div> 34 </div>
35 </div> 35 </div>
36 </div> 36 </div>
37 </div> 37 </div>
38 </div> 38 </div>
42 <div class="panel panel-default"> 42 <div class="panel panel-default">
43 <div class="panel-heading">Search Results</div> 43 <div class="panel-heading">Search Results</div>
44 <table id="results" class="table table-striped table-hover"> 44 <table id="results" class="table table-striped table-hover">
45 <thead> 45 <thead>
46 <tr> 46 <tr>
47 <th>Movie</th> 47 <th>Title (translit)</th>
48 <th>Released</th> 48 <th>ismi_id</th>
49 <th>Tagline</th> 49 <th>Title (arabic)</th>
50 </tr> 50 </tr>
51 </thead> 51 </thead>
52 <tbody> 52 <tbody>
53 </tbody> 53 </tbody>
54 </table> 54 </table>
56 </div> 56 </div>
57 <div class="col-md-7"> 57 <div class="col-md-7">
58 <div class="panel panel-default"> 58 <div class="panel panel-default">
59 <div class="panel-heading" id="title">Details</div> 59 <div class="panel-heading" id="title">Details</div>
60 <div class="row"> 60 <div class="row">
61 <div class="col-sm-4 col-md-4"> 61 <!-- <div class="col-sm-4 col-md-4">
62 <img src="" class="well" id="poster"/> 62 <img src="" class="well" id="poster"/>
63 </div> 63 </div> -->
64 <div class="col-md-8 col-sm-8"> 64 <div class="col-md-8 col-sm-8">
65 <h4>Crew</h4> 65 <h4>Details</h4>
66 <ul id="crew"> 66 <ul id="info">
67 </ul> 67 </ul>
68 </div> 68 </div>
69 </div> 69 </div>
70 </div> 70 </div>
71 </div> 71 </div>
72 </div> 72 </div>
73 <style type="text/css"> 73 <style type="text/css">
74 .node { stroke: #222; stroke-width: 1.5px; } 74 .node { stroke: #222; stroke-width: 1.5px; }
75 .node.actor { fill: #888; } 75 .node.TEXT { fill: #888; }
76 .node.movie { fill: #BBB; } 76 .node.movie { fill: #BBB; }
77 .link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; } 77 .link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; }
78 </style> 78 </style>
79 79
80 <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> 80 <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
81 <script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script> 81 <script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script>
82 <script type="text/javascript"> 82 <script type="text/javascript">
83 $(function () { 83 $(function () {
84 function showMovie(title) { 84 function showMovie(text_id) {
85 $.get("/movie/" + encodeURIComponent(title), 85 $.get("/text/" + encodeURIComponent(text_id),
86 function (data) { 86 function (data) {
87 if (!data) return; 87 if (!data) return;
88 $("#title").text(data.title); 88 $("#title").text(data.title);
89 $("#poster").attr("src","http://neo4j-contrib.github.io/developer-resources/language-guides/assets/posters/"+encodeURIComponent(data.title)+".jpg"); 89 // $("#poster").attr("src","http://neo4j-contrib.github.io/developer-resources/language-guides/assets/posters/"+encodeURIComponent(data.title)+".jpg");
90 var $list = $("#crew").empty(); 90 var $list = $("#info").empty();
91 data.cast.forEach(function (cast) { 91 for (key in data.attrs) {
92 $list.append($("<li>" + cast.name + " " +cast.job + (cast.job == "acted"?" as " + cast.role : "") + "</li>")); 92 $list.append($("<li>" + key + ": " + data.attrs[key] + "</li>"));
93 }); 93 };
94 }, "json"); 94 }, "json");
95 return false; 95 return false;
96 } 96 }
97 function search() { 97 function search() {
98 var query=$("#search").find("input[name=search]").val(); 98 var query=$("#search").find("input[name=search]").val();
99 $.get("/search?q=" + encodeURIComponent(query), 99 $.get("/search?q=" + encodeURIComponent(query),
100 function (data) { 100 function (data) {
101 var t = $("table#results tbody").empty(); 101 var t = $("table#results tbody").empty();
102 if (!data || data.length == 0) return; 102 if (!data || data.length == 0) return;
103 data.forEach(function (row) { 103 data.forEach(function (row) {
104 var movie = row.movie; 104 var text = row.text;
105 $("<tr><td class='movie'>" + movie.title + "</td><td>" + movie.released + "</td><td>" + movie.tagline + "</td></tr>").appendTo(t) 105 $("<tr><td>" + text.label + "</td><td>" + text.full_title + "</td><td class='text_id'>" + text.ismi_id + "</td></tr>").appendTo(t)
106 .click(function() { showMovie($(this).find("td.movie").text());}) 106 .click(function() { showMovie($(this).find("td.text_id").text());})
107 }); 107 });
108 showMovie(data[0].movie.title); 108 showMovie(data[0].text.ismi_id);
109 }, "json"); 109 }, "json");
110 return false; 110 return false;
111 } 111 }
112 112
113 $("#search").submit(search); 113 $("#search").submit(search);