calibre-web/cps/templates/search_form.html

{% extends "layout.html" %}
{% block body %}
<div class="col-sm-8">
  <form role="form" action="{{ url_for('advanced_search') }}" method="GET">
    <div class="form-group">
      <label for="book_title">{{_('Book Title')}}</label>
      <input type="text" class="form-control" name="book_title" id="book_title" value="">
    </div>
    <div class="form-group">
      <label for="bookAuthor">{{_('Author')}}</label>
      <input type="text" class="form-control typeahead" name="author_name" id="bookAuthor" value="" autocomplete="off">
    </div>
    <label for="Tags">{{_('Tags')}}</label>
    <div class="form-group">
      <div class="btn-toolbar btn-toolbar-lg" data-toggle="buttons">
        {% for tag in tags %}
          <label id="tag_{{tag.id}}" class="btn btn-primary tags_click">
            <input type="checkbox" autocomplete="off" name="include_tag" value="{{tag.id}}">{{tag.name}}</input>
          </label>
        {% endfor %}
      </div>
    </div>
    <label for="Tags">{{_('Exclude Tags')}}</label>
    <div class="form-group">
      <div class="btn-toolbar btn-toolbar-lg" data-toggle="buttons">
        {% for tag in tags %}
          <label id="tag_{{tag.id}}" class="btn btn-danger tags_click">
            <input type="checkbox" autocomplete="off" name="exclude_tag" value="{{tag.id}}">{{tag.name}}</input>
          </label>
        {% endfor %}
      </div>
    </div>
    <label for="Series">{{_('Series')}}</label>
    <div class="form-group">
      <div class="btn-toolbar btn-toolbar-lg" data-toggle="buttons">
        {% for serie in series %}
          <label id="serie_{{serie.id}}" class="btn btn-primary serie_click">
            <input type="checkbox" autocomplete="off" name="include_serie" value="{{serie.id}}">{{serie.name}}</input>
          </label>
        {% endfor %}
      </div>
    </div>
    <label for="Tags">{{_('Exclude Series')}}</label>
    <div class="form-group">
      <div class="btn-toolbar btn-toolbar-lg" data-toggle="buttons">
        {% for serie in series %}
          <label id="serie_{{serie.id}}" class="btn btn-danger serie_click">
            <input type="checkbox" autocomplete="off" name="exclude_serie" value="{{serie.id}}">{{serie.name}}</input>
          </label>
        {% endfor %}
      </div>
    </div>
   {% if languages %}
      <label for="Languages">{{_('Languages')}}</label>
      <div class="form-group">
        <div class="btn-toolbar btn-toolbar-lg" data-toggle="buttons">
          {% for language in languages %}
            <label id="language_{{language.id}}" class="btn btn-primary serie_click">
              <input type="checkbox" autocomplete="off" name="include_language" value="{{language.id}}">{{language.name}}</input>
            </label>
          {% endfor %}
        </div>
      </div>
      <label for="Languages">{{_('Exclude Languages')}}</label>
      <div class="form-group">
        <div class="btn-toolbar btn-toolbar-lg" data-toggle="buttons">
          {% for language in languages %}
            <label id="language_{{language.id}}" class="btn btn-danger language_click">
              <input type="checkbox" autocomplete="off" name="exclude_language" value="{{language.id}}">{{language.name}}</input>
            </label>
          {% endfor %}
        </div>
      </div>
   {% endif%}
    <button type="submit" class="btn btn-default">{{_('Submit')}}</button>
  </form>
</div>
{% endblock %}

{% block js %}
<script src="{{ url_for('static', filename='js/typeahead.bundle.js') }}"></script>
<script src="{{ url_for('static', filename='js/edit_books.js') }}"></script>
<script>
  $('form')}}.on('change input typeahead:selected', function() {
    form = $('form')}}.serialize();
    $.getJSON( "{{ url_for('get_matching_tags') }}", form, function( data ) {
      $('.tags_click').each(function() {
        if ($.inArray(parseInt($(this).children('input').first().val(), 10), data.tags) == -1 ) {
          if (!($(this).hasClass('active'))) {
            $(this).addClass('disabled');
          }
        }
        else {
          $(this).removeClass('disabled');
        }
      });
    });
  });
</script>
{% endblock %}
{% block header %}
<link href="{{ url_for('static', filename='css/typeahead.css') }}" rel="stylesheet" media="screen">
{% endblock %}