--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/integ/spectacle.html Fri Feb 21 15:03:09 2014 +0100
@@ -0,0 +1,180 @@
+<!doctype html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>SPEL : Recherche dans spectacles</title>
+ <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
+ <link rel="stylesheet" href="lib/bootstrap-multiselect.css" type="text/css"/>
+ <link rel="stylesheet" href="css/spel.css">
+</head>
+<body>
+ <div class="container">
+ <header class="navbar navbar-inverse" role="banner">
+ <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
+ <ul class="nav navbar-nav">
+ <li><a href="index.html">Spectacle en Ligne(s)</a></li>
+ </ul>
+ <ul class="nav navbar-nav navbar-right">
+ <li><a href="#" >Se connecter</a></li>
+ </ul>
+ </nav>
+ </header>
+ <div class="spel-content">
+ <h3>Page Spectacle</h3>
+ <div class="row">
+ <div class="col-md-6 chapters">
+ <h4 class="text-center">CHAPITRES</h4>
+ <div class="row">
+ <div class="col-md-4">
+ <select id="mulsel1" class="multiselect" multiple="multiple" data-title="Types de contenus">
+ </select>
+ </div>
+ <div class="col-md-4">
+ <select id="mulsel2" class="multiselect" multiple="multiple" data-title="Conditions de travail">
+ </select>
+ </div>
+ <div class="col-md-4">
+ <select id="mulsel3" class="multiselect" multiple="multiple" data-title="Personnages">
+ </select>
+ </div>
+ </div>
+ <div class="row">
+
+ </div>
+ <div class="row text-center">
+ <button id="btn-filter-chapters" class="btn btn-success" disabled="disabled">FILTRER</button>
+ </div>
+ </div>
+ <div class="col-md-6 annotations">
+ <h4 class="text-center">ANNOTATIONS</h4>
+ <form class="form-horizontal" role="form">
+ <div class="form-group">
+ <div class="col-md-8 col-md-offset-1">
+ <input type="text" class="form-control" id="search-input">
+ </div>
+ <div class="col-md-3">
+ <button id="btn-search-annotations" class="btn btn-success" disabled="disabled">
+ <span class="glyphicon glyphicon-search form-control-feedback"></span>
+ </button>
+ </div>
+ </div>
+ </form>
+ <div class="col-md-8 col-md-offset-1">
+ <select id="mulsel4" class="multiselect" multiple="multiple" data-title="Catégories d'annotations">
+ </select>
+ </div>
+ <div class="col-md-3">
+ <button id="btn-filter-annotations" class="btn btn-success" disabled="disabled">FILTRER</button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <footer>
+ <div class="row">
+ <div class="footer-img col-md-6">
+ <a href="http://www.iri.centrepompidou.fr" target="_blank"><img src="img/logo_IRI_footer.png" alt="Logo IRI" /></a>
+ </div>
+ <div class="col-md-6 text-right">
+ SPEL - ©2014
+ </div>
+ </div>
+ </footer>
+ </div>
+ <script type="text/javascript" src="lib/jquery-2.1.0.min.js"></script>
+ <script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script>
+ <script type="text/javascript" src="lib/bootstrap-multiselect.js"></script>
+ <script type="text/javascript">
+
+ $(document).ready(function () {
+
+ $('.chapters .multiselect').multiselect({
+ buttonText: function(options, select) {
+ return $(select).attr("data-title") + ' (' + options.length + ') <b class="caret"></b>';
+ },
+ onChange: function(element, checked) {
+ var filter_enabled = false;
+ var chbs = $(".chapters input:checkbox");
+ for (var i = chbs.length - 1; i >= 0; i--) {
+ filter_enabled = filter_enabled || $(chbs[i]).is(":checked");
+ };
+ if(filter_enabled){
+ $("#btn-filter-chapters").removeAttr('disabled');
+ }
+ else{
+ $("#btn-filter-chapters").attr('disabled','disabled');
+ }
+ }
+ });
+ $('.annotations .multiselect').multiselect({
+ buttonText: function(options, select) {
+ return $(select).attr("data-title") + ' (' + options.length + ') <b class="caret"></b>';
+ },
+ buttonContainer: '<div class="btn-group width100percent" />',
+ buttonClass: 'btn btn-default width100percent disabled',
+ onChange: function(element, checked) {
+ var filter_enabled = false;
+ var chbs = $(".annotations input:checkbox");
+ for (var i = chbs.length - 1; i >= 0; i--) {
+ filter_enabled = filter_enabled || $(chbs[i]).is(":checked");
+ };
+ if(filter_enabled){
+ $("#btn-filter-annotations").removeAttr('disabled');
+ }
+ else{
+ $("#btn-filter-annotations").attr('disabled','disabled');
+ }
+ }
+ });
+
+
+ var data1 = [
+ {label: "Performance", value: "Performance"},
+ {label: "Discussion", value: "Discussion"}
+ ];
+ $("#mulsel1").multiselect('dataprovider', data1);
+ var data2 = [
+ {label: "Lumière", value: "Lumière"},
+ {label: "Son", value: "Son"},
+ {label: "Musique", value: "Musique"},
+ {label: "Décor", value: "Décor"}
+ ];
+ $("#mulsel2").multiselect('dataprovider', data2);
+ var data3 = [
+ {label: "PA", value: "Lumière"},
+ {label: "PB", value: "Son"},
+ {label: "PC", value: "Musique"},
+ {label: "PD", value: "Décor"},
+ {label: "PE", value: "Décor"}
+ ];
+ $("#mulsel3").multiselect('dataprovider', data3);
+
+ // Annotations :
+ $("#mulsel4").multiselect('disable');
+ $(document).on('input', "#search-input", function(){
+ if($(this).val()!=""){
+ $("#btn-search-annotations").removeAttr('disabled');
+ }
+ else{
+ $("#btn-search-annotations").attr('disabled','disabled');
+ }
+ });
+
+ $("#btn-search-annotations").click(function(e){
+ e.preventDefault();
+ var data4 = [
+ {label: "Intervention MES", value: "Intervention MES"},
+ {label: "Filage de la scène", value: "Filage de la scène"},
+ {label: "Parole à l'acteur/actrice", value: "Parole à l'acteur/actrice"},
+ {label: "Interprétation du texte", value: "Interprétation du texte"},
+ {label: "Décision", value: "Décision"}
+ ];
+ $("#mulsel4").multiselect('dataprovider', data4);
+ $("#mulsel4").multiselect('enable');
+ });
+
+
+ });
+
+ </script>
+</body>
+</html>
\ No newline at end of file