filtering in job list view
[qcg-portal.git] / qcg / templates / qcg / jobs.html
index c7ae855..58b4998 100644 (file)
@@ -1,9 +1,9 @@
 {% extends 'qcg/base.html' %}
-
-{% load staticfiles %}
+{% load staticfiles bootstrap3 %}
 
 {% block extra_css %}
     <link href="{% static 'qcg/treegrid/css/jquery.treegrid.css' %}" rel="stylesheet">
+    <link href="{% static 'qcg/daterangepicker/daterangepicker-bs3.css' %}" rel="stylesheet" />
 
     <style>
         .treegrid-expander {
@@ -18,6 +18,8 @@
 
 {% block extra_js %}
     <script src="{% static 'qcg/treegrid/js/jquery.treegrid.js' %}"></script>
+    <script src="{% static 'qcg/daterangepicker/moment.min.js' %}"></script>
+    <script src="{% static 'qcg/daterangepicker/daterangepicker.js' %}"></script>
 
     <script>
         $(function() {
                 }
             });
 
+            $('input[name="submission"],input[name="finish"]').daterangepicker({
+                opens: 'center',
+                format: 'DD.MM.YYYY',
+                ranges: {
+                    'Dzisiaj': [moment(), moment()],
+                    'Wczoraj': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+                    'Ostatnie 7 dni': [moment().subtract(6, 'days'), moment()],
+                    'Ostatnie 30 dni': [moment().subtract(29, 'days'), moment()]
+                },
+                locale: {
+                    applyLabel: 'OK',
+                    cancelLabel: 'Anuluj',
+                    fromLabel: 'Od',
+                    toLabel: 'Do',
+                    weekLabel: 'T',
+                    customRangeLabel: 'Zakres',
+                    daysOfWeek: moment.weekdaysMin(),
+                    monthNames: ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Paź', 'Lis', 'Gru'],
+                    firstDay: 1
+                }
+            });
 
+            $('#toggle-advanced').click(function() {
+                if($('#advanced-filters').attr('aria-expanded') == "false")
+                    $(this).text('« mniej');
+                else
+                    $(this).text('więcej »');
+            });
         });
     </script>
 {% endblock %}
         {% block title %}Lista zadań{% endblock %}
     </h1>
 
-{#    <form class="row form-inline">#}
-{#        <div class="col-md-9 col-md-offset-1">#}
-{#            <div class="form-group">#}
-{#                <label class="sr-only" for="search">Szukaj w opisie lub uwagach</label>#}
-{#                <input type="text" class="form-control" id="search" placeholder="Szukaj w opisie lub uwagach">#}
+    <form action=".">
+        <div class="row">
+            <div class="col-lg-10 col-lg-offset-1">
+                <div class="pull-right">
+                    <a id="toggle-advanced" href="#advanced-filters" data-toggle="collapse">
+                        {% if advanced %}
+                            &laquo;&nbsp;mniej
+                        {% else %}
+                            więcej&nbsp;&raquo;
+                        {% endif %}
+                    </a>
+                    &nbsp;
+                    <a href="." class="btn btn-default{% if not filters.data %} disabled{% endif %}">Wyczyść</a>
+                    <button type="submit" class="btn btn-default">Filtruj</button>
+                </div>
+                <div class="btn-toolbar">
+                    <div class="btn-group" data-toggle="buttons">
+                        {% for choice in filters.status %}
+                            <label class="btn btn-default{% if choice.is_checked %} active{% endif %}">
+                                <input type="checkbox" name="{{ choice.name }}" value="{{ choice.choice_value }}"
+                                       {% if choice.is_checked %}checked{% endif %}> {{ choice.choice_label }}
+                            </label>
+                        {% endfor %}
+                    </div>
+                    <div class="btn-group" data-toggle="buttons">
+                        {% for choice in filters.host %}
+                            <label class="btn btn-default{% if choice.is_checked %} active{% endif %}">
+                                <input type="checkbox" name="{{ choice.name }}" value="{{ choice.choice_value }}"
+                                       {% if choice.is_checked %}checked{% endif %}> {{ choice.choice_label }}
+                            </label>
+                        {% endfor %}
+                    </div>
+                </div>
+            </div>
+        </div>
+{#        <div id="advanced-filters" class="form-horizontal collapse in" aria-expanded="true" style="margin-top: 10px">#}
+{#            <div class="row">#}
+{#                {% bootstrap_field filters.keywords layout='horizontal' horizontal_label_class='col-md-5' horizontal_field_class='col-md-4' bound_css_class=' ' %}#}
 {#            </div>#}
-{#            <div class="form-group">#}
-{#                <label class="sr-only" for="status">Status</label>#}
-{#                <select class="form-control" id="status">#}
-{#                  <option>Wybierz stan</option>#}
-{#                  <option>PENDING</option>#}
-{#                  <option>RUNNING</option>#}
-{#                  <option>FAILED</option>#}
-{#                  <option>FINISHED</option>#}
-{#                </select>#}
+{#            <div class="row">#}
+{#                {% bootstrap_field filters.status_exact layout='horizontal' horizontal_label_class='col-md-5' horizontal_field_class='col-md-4' bound_css_class=' ' %}#}
 {#            </div>#}
-{#            <div class="form-group">#}
-{#                <label class="sr-only" for="cluster">Klaster</label>#}
-{#                <select class="form-control" id="cluster">#}
-{#                  <option>Wybierz klaster</option>#}
-{#                  <option>Inula</option>#}
-{#                  <option>Galera</option>#}
-{#                  <option>Hydra</option>#}
-{#                  <option>Zeus</option>#}
-{#                </select>#}
+{#            <div class="row">#}
+{#                {% bootstrap_field filters.submission layout='horizontal' horizontal_label_class='col-md-5' horizontal_field_class='col-md-4' bound_css_class=' ' %}#}
+{#            </div>#}
+{#            <div class="row">#}
+{#                {% bootstrap_field filters.finish layout='horizontal' horizontal_label_class='col-md-5' horizontal_field_class='col-md-4' bound_css_class=' ' %}#}
 {#            </div>#}
 {#        </div>#}
-{#        <div class="col-md-1">#}
-{#            <button type="submit" class="btn btn-default">Filtruj</button>#}
-{#        </div>#}
-{#    </form>#}
-{##}
-{#    <hr />#}
+        <div id="advanced-filters" class="form-horizontal collapse{% if advanced %} in" aria-expanded="true"{% else %}" aria-expanded="false"{% endif %} style="margin-top: 10px">
+            <div class="row">
+                <div class="col-ld-1"></div>
+                {% bootstrap_field filters.keywords layout='horizontal' form_group_class='form-group row col-lg-5 col-md-6' horizontal_label_class='col-md-4' horizontal_field_class='col-md-8' bound_css_class=' ' %}
+                {% bootstrap_field filters.status_exact layout='horizontal' form_group_class='form-group row col-lg-5 col-md-6' horizontal_label_class='col-md-4' horizontal_field_class='col-md-8' bound_css_class=' ' %}
+            </div>
+            <div class="row">
+                <div class="col-ld-1"></div>
+                {% bootstrap_field filters.submission layout='horizontal' form_group_class='form-group row col-lg-5 col-md-6' horizontal_label_class='col-md-4' horizontal_field_class='col-md-8' bound_css_class=' ' %}
+                {% bootstrap_field filters.finish layout='horizontal' form_group_class='form-group row col-lg-5 col-md-6' horizontal_label_class='col-md-4' horizontal_field_class='col-md-8' bound_css_class=' ' %}
+            </div>
+        </div>
+    </form>
+
+    <hr />
 
 
     <nav class="text-center" style="margin-bottom: 15px">
         </tbody>
     </table>
 
+    {% if not page %}
+        <div class="alert alert-info">Brak elementów</div>
+    {% endif %}
+
     <nav class="text-center">
         <ul class="pagination">
             {% if page.has_previous %}