qcg/templates/qcg/jobs.html

   1 {% extends 'qcg/base.html' %}
   2
   3 {% load staticfiles %}
   4
   5 {% block extra_css %}
   6     <link href="{% static 'qcg/treegrid/css/jquery.treegrid.css' %}" rel="stylesheet">
   7
   8     <style>
   9         .treegrid-expander {
  10             opacity: 0.5;
  11         }
  12
  13         .treegrid-expander:hover {
  14             opacity: 1;
  15         }
  16     </style>
  17 {% endblock %}
  18
  19 {% block extra_js %}
  20     <script src="{% static 'qcg/treegrid/js/jquery.treegrid.js' %}"></script>
  21
  22     <script>
  23         $(function() {
  24             $('.tree').treegrid({
  25                 initialState: 'collapsed',
  26                 expanderExpandedClass: 'glyphicon glyphicon-chevron-down small',
  27                 expanderCollapsedClass: 'glyphicon glyphicon-chevron-right small',
  28                 onChange: function() {
  29                     $(this).find('.glyphicon-folder-open,.glyphicon-folder-close')
  30                             .toggleClass('glyphicon-folder-open').toggleClass('glyphicon-folder-close');
  31                 }
  32             });
  33
  34
  35         });
  36     </script>
  37 {% endblock %}
  38
  39 {% block container %}
  40     <h1 class="page-header">
  41         {% block title %}Lista zadań{% endblock %}
  42     </h1>
  43
  44     <form class="row form-inline">
  45         <div class="col-md-9 col-md-offset-1">
  46             <div class="form-group">
  47                 <label class="sr-only" for="search">Szukaj w opisie lub uwagach</label>
  48                 <input type="text" class="form-control" id="search" placeholder="Szukaj w opisie lub uwagach">
  49             </div>
  50             <div class="form-group">
  51                 <label class="sr-only" for="status">Status</label>
  52                 <select class="form-control" id="status">
  53                   <option>Wybierz stan</option>
  54                   <option>PENDING</option>
  55                   <option>RUNNING</option>
  56                   <option>FAILED</option>
  57                   <option>FINISHED</option>
  58                 </select>
  59             </div>
  60             <div class="form-group">
  61                 <label class="sr-only" for="cluster">Klaster</label>
  62                 <select class="form-control" id="cluster">
  63                   <option>Wybierz klaster</option>
  64                   <option>Inula</option>
  65                   <option>Galera</option>
  66                   <option>Hydra</option>
  67                   <option>Zeus</option>
  68                 </select>
  69             </div>
  70         </div>
  71         <div class="col-md-1">
  72             <button type="submit" class="btn btn-default">Filtruj</button>
  73         </div>
  74     </form>
  75
  76     <hr />
  77
  78     <table class="table table-hover tree">
  79         <thead>
  80             <tr>
  81                 <th style="width: 80px"></th>
  82                 <th>Opis</th>
  83                 <th>Wysłane</th>
  84                 <th>Start</th>
  85                 <th>Koniec</th>
  86                 <th>Status</th>
  87                 <th>Host</th>
  88                 <th>Uwagi</th>
  89             </tr>
  90         </thead>
  91         <tbody>
  92             <tr class="treegrid-1">
  93                 <td>
  94                     <a href="{% url 'job' %}">
  95                         <span class="glyphicon glyphicon-file" aria-hidden="true"></span>
  96                     </a>
  97                 </td>
  98                 <td>urban</td>
  99                 <td>04.07.13 17:03</td>
 100                 <td></td>
 101                 <td></td>
 102                 <td>PENDING</td>
 103                 <td>hydra</td>
 104                 <td></td>
 105             </tr>
 106             <tr class="treegrid-2">
 107                 <td>
 108                     <a href="{% url 'job' %}">
 109                         <span class="glyphicon glyphicon-folder-close" aria-hidden="true"></span>
 110                     </a>
 111                 </td>
 112                 <td>urban</td>
 113                 <td>04.07.13 17:03</td>
 114                 <td></td>
 115                 <td></td>
 116                 <td>RUNNING</td>
 117                 <td>inula</td>
 118                 <td></td>
 119             </tr>
 120             <tr class="treegrid-3 treegrid-parent-2">
 121                 <td>
 122                     <a href="{% url 'job' %}">
 123                         <span class="glyphicon glyphicon-file" aria-hidden="true"></span>
 124                     </a>
 125                 </td>
 126                 <td>urban</td>
 127                 <td>04.07.13 17:03</td>
 128                 <td></td>
 129                 <td></td>
 130                 <td>FINISHED</td>
 131                 <td>inula</td>
 132                 <td></td>
 133             </tr>
 134             <tr class="treegrid-4">
 135                 <td>
 136                     <a href="{% url 'job' %}">
 137                         <span class="glyphicon glyphicon-file" aria-hidden="true"></span>
 138                     </a>
 139                 </td>
 140                 <td>urban</td>
 141                 <td>04.07.13 17:03</td>
 142                 <td></td>
 143                 <td></td>
 144                 <td>CANCELED</td>
 145                 <td>inula</td>
 146                 <td></td>
 147             </tr>
 148         </tbody>
 149     </table>
 150
 151     <nav class="text-center">
 152         <ul class="pagination">
 153             <li>
 154                 <a href="#" aria-label="Previous">
 155                     <span aria-hidden="true">&laquo;</span>
 156                 </a>
 157             </li>
 158             <li><a href="#">1</a></li>
 159             <li><a href="#">2</a></li>
 160             <li><a href="#">3</a></li>
 161             <li><a href="#">4</a></li>
 162             <li><a href="#">5</a></li>
 163             <li>
 164                 <a href="#" aria-label="Next">
 165                     <span aria-hidden="true">&raquo;</span>
 166                 </a>
 167             </li>
 168         </ul>
 169     </nav>
 170
 171 {% endblock container %}