src/Pumukit/WebTVBundle/Resources/views/Search/filtersseries.html.twig line 1

Open in your IDE?
  1. <form id="form_search" name="busqueda" method="get" action="{{ path('pumukit_webtv_search_series') }}">
  2.     <input type="submit" style="display:none" value="submit-hidden" aria-hidden="true"/>
  3.     <div class="form-group col-md-4">
  4.         <label for="search">{% trans %}Search{% endtrans %}:</label>
  5.         <div class="input-group">
  6.             <input type="text" class="form-control" id="search" name="search" value="{{ app.request.query.get('search') }}" placeholder="{% trans %}Search{% endtrans %}">
  7.             <div class="input-group-btn">
  8.                 <button type="submit" class="btn btn-default" aria-label="search">
  9.                     <span class="sr-only">{% trans %}Search{% endtrans %}</span>
  10.                     <span class="glyphicon glyphicon-search"></span>
  11.                 </button>
  12.             </div>
  13.         </div>
  14.     </div>
  17.     <div class="form-group col-md-6 col-sm-10 col-xs-12">
  18.         <div class="row">
  19.             {% set activated = app.request.query.get('start') or app.request.query.get('end') %}
  20.             <div id="advanced-date-search" {{ activated?'':'style="display:none"' }}>
  21.                 <div class="col-xs-6">
  22.                     <span style="white-space: nowrap; overflow: hidden;">
  23.                         <label id="start-date" for="start">{% trans %}Start date{% endtrans %}:</label>
  24.                         <a style="margin-right:-15px;cursor:pointer;" onclick="toggleDateSelect()">{% trans %} Select by year {% endtrans %}</a>
  25.                     </span>
  26.                     <div class="input-group date date-picker" id='start'>
  27.                         <input type='text' class="form-control" dataformat="" name="start" value="{{ app.request.query.get('start') }}" placeholder="{% trans %}From{% endtrans %}" onchange="javascript:submitForm(this);" aria-labelledby="start-date" {{ activated?'':'disabled' }}/>
  28.                         <span class="input-group-addon">
  29.                             <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
  30.                         </span>
  31.                     </div>
  32.                 </div>
  33.                 <div class="col-xs-6">
  34.                     <label id="end-date" for="end">{% trans %}Finish date{% endtrans %}:</label>
  35.                     <div class="input-group date date-picker" id="end">
  36.                         <input type="text" class="form-control" name="end" value="{{ app.request.query.get('end') }}" placeholder="{% trans %}Until{% endtrans %}" onchange="javascript:submitForm(this);" aria-labelledby="end-date" {{ activated?'':'disabled' }}/>
  37.                         <div class="input-group-addon">
  38.                             <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
  39.                         </div>
  40.                     </div>
  41.                 </div>
  42.             </div>
  43.             <div id="simple-date-search" {{ activated?'style="display:none"':'' }}>
  44.                 <div class="col-md-12 col-xs-12">
  45.                     <label for="year">{% trans %}Year{% endtrans %}</label>
  46.                     <a style="padding-left:20px;cursor:pointer;" onclick="toggleDateSelect()">{% trans %}Select by date range {% endtrans %}</a>
  47.                     <select id='year' name='year' class='form-control' onchange="submitForm(this);" {{ activated?'disabled':'' }}>
  48.                         <option value="" {% if app.request.query.get('year') == "" %} selected="selected" {% endif %}>
  49.                             {% trans %}Any{% endtrans %}
  50.                         </option>
  51.                         {% for year in search_years %}
  52.                             <option value="{{ year }}" {% if app.request.query.get('year') == year %} selected="selected" {% endif %}>
  53.                                 {{ year }}
  54.                             </option>
  55.                         {% endfor %}
  56.                     </select>
  57.                 </div>
  58.             </div>
  59.         </div>
  60.     </div>
  61.     <div class="form-group col-md-2 col-sm-2 col-xs-12">
  62.         <label for="reset">{% trans %}Reset filters{% endtrans %}:</label>
  63.         <input id="reset" type="button" class="btn btn-default form-control" id="exampleInputEmail1" placeholder="{% trans %}Email{% endtrans %}" value="{% trans %}Reset filters{% endtrans %}" onclick="window.location.href=window.location.pathname" />
  64.     </div>
  66.     <script type="text/javascript">
  67.         $(function () {
  68.             var isMobile = $(window).width() <= 480 || Modernizr.touchevents;
  69.             if (isMobile) {
  70.                 $('#start input').attr('type', 'date');
  71.                 $('#end input').attr('type', 'date');
  72.                 $('#advanced-date-search .input-group-addon').remove();
  73.                 $('.date').removeClass('input-group');
  74.             }
  75.             else {
  76.                 var language = "{{ app.request.getLocale() }}";
  77.                 $("#start").datetimepicker({
  78.                     useCurrent: false,
  79.                     viewMode: 'years',
  80.                     format: 'YYYY-MM-DD',
  81.                     locale: language
  82.                 });
  83.                 $("#start").on("dp.change", function (e) {
  84.                     $("#form_search").submit();
  85.                 });
  86.                 $("#end").datetimepicker({
  87.                     useCurrent: false,
  88.                     viewMode: 'years',
  89.                     format: 'YYYY-MM-DD',
  90.                     locale: language
  91.                 });
  92.                 $("#end").on("dp.change", function (e) {
  93.                     $("#form_search").submit();
  94.                 });
  95.             }
  96.         });
  98.         function toggleDateSelect() {
  99.             $('#simple-date-search, #advanced-date-search').toggle();
  100.             $('#year').prop('disabled', function (i, v) {
  101.                 return !v;
  102.             });
  103.             $('#start .form-control').prop('disabled', function (i, v) {
  104.                 return !v;
  105.             });
  106.             $('#end .form-control').prop('disabled', function (i, v) {
  107.                 return !v;
  108.             });
  109.         }
  111.         function submitForm(elem) {
  112.             $('#search_spinner').show();
  113.             $('#search_results').hide();
  114.             $('.pagination').hide();
  115.             elem.form.submit();
  116.         }
  118.     </script>
  120. </form>
  122. <div class="col-xs-12">
  123.     <a href="{{ path('pumukit_webtv_search_multimediaobjects') }}">
  124.         {% trans %}Search by multimedia objects{% endtrans %}
  125.     </a>
  126. </div>