forked from nfb-onf/hackathon2015-subttl
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
144 lines (124 loc) · 5.32 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hackathon 2015 - SUBTTL</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="http://use.typekit.net/gqr8pyu.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
<link href="public/css/subttl.css" rel="stylesheet" type="text/css" media="all"/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-sanitize.js"></script>
<script>
angular.module('subttlApp', ['ngSanitize'])
.controller('subtitleSearchCtrl', function ($scope, $sce, $http) {
$scope.hits = {};
$scope.sendPost = function() {
console.log($scope)
var data = {query:{match:{"subtitles.en": {"query": $scope.searchText}}}, "highlight": {"fields": {"subtitles.en": {}}}};
$http.post("http://norman-vm1.nfb.ca:9200/nfb_films/films/_search", data ).success(function(data, status) {
$scope.hits = data.hits.hits;
for(var i=0;i<$scope.hits.highlight['subtitles.en'].lenght;i++) {
$scope.hits.highlight['subtitles.en'][i] = $sce.trustAsHtml($scope.hits.highlight['subtitles.en'][i])
}
})
}
})
</script>
<style>
</style>
<!-- TODO: Complete this project :) -->
</head>
<body>
<!-- <div class="navbar-header navbar navbar-inverse navbar-fixed-top">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li ><a href="model.html">Model</a></li>
</ul>
</div>
</div>
</div>
-->
<div class="container">
<div ng-app="subttlApp" ng-controller="subtitleSearchCtrl">
<div class="head">
<h1 class="brand">SUBTTL</h1>
<div class="search-boite big-boite">
<form ng-submit="sendPost()">
<div class="row sfield">
<div class="col-xs-1"><i class="fa fa-quote-left fa-2x"></i></div>
<div class="col-xs-10 col-sm-8"><input ng-model="searchText" type="text" class="form-control input-lg" placeholder="Recherche dans les sous-titres" /> </div>
<div class="col-xs-1"><i class="fa fa-quote-right fa-2x"></i></div>
<div class="col-sm-2"><button type=submit class="btn btn-default btn-lg"> <i class="fa fa-search fa-lg"></i> <span class="hidden-lg hidden-md hidden-sm">Recherche</span></button></div>
</div>
</form>
</div>
</div>
<!--div class="resultats">
<ul class="liste-resultats list-unstyled">
<li class="resultat">
<div class="row">
<div class="col-xs-3"><img src="https://media1.onf.ca/medias/nfb_tube/cache/11/87/11879559ec00edb2e848c212df4197f2.jpg" alt=""></div>
<div class="col-xs-9">
<blockquote>
<p>Lorem is the ipsum of life Lorem is <span class="highlite">the ipsum of</span> life Lorem is the ipsum of <em>life</em>.</p>
<footer><cite><a href="#">Movie title</a></cite> @ timecode <a href="#" class="play-clip" data-toggle="modal" data-target="#myModal"><i class="fa fa-play-circle"></i> jouer l'extrait </a></footer>
</blockquote>
</div>
</div>
</li>
</ul>
</div-->
<div class="resultats">
<ul class="liste-resultats list-unstyled" ng-repeat="x in hits">
<li class="resultat">
<div class="row">
<div class="col-xs-3"><img src={{x._source.thumbnail_url.replace('https:','http:')}} alt=""></div>
<div class="col-xs-9">
<blockquote>
<div ng-repeat="tt in x.highlight['subtitles.en']" >
<p ng-bind-html="tt.substring(14)"></p>
<footer><cite><a href="#">{{ x._source.title }}</a></cite> @ timecode {{ tt.substring(1, 13) }}
<a href="#" class="play-clip" data-toggle="modal" data-target="#myModal">
<i class="fa fa-play-circle"></i> jouer l'extrait </a></footer>
</div>
</blockquote>
</div>
</div>
</li>
</ul>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>