templates/content/downloads.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block main_content %}
  4.     <div>
  5.         <div class="content-header">
  6.             <p>Download suchen</p>
  7.         </div>
  8.         <div class="content-area">
  9.             <form id="register-form" method="post" name="Register" action="/register_user">
  10.                 <div class="content-form">
  11.                     <input id="download-search" type="text" name="manual" size="50"
  12.                            placeholder="Geben Sie einen Modellnamen ein" required>
  13.                 </div>
  14.             </form>
  15.         </div>
  17.         <!-- results grid -->
  18.         <div class="content-results">
  19.             <div id="results-grid" class="results-grid">
  20.                 <div class="row header">
  21.                     <div>Kurzbeschreibung</div>
  22.                     <div>Hersteller</div>
  23.                     <div>Manualtyp</div>
  24.                     <div>Dok.Nr.</div>
  25.                     <div>Typ</div>
  26.                 </div>
  27.                 <!-- rows injected by JS -->
  28.             </div>
  29.         </div>
  31.         <style>
  32.             .content-results {
  33.                 margin-top: 20px;
  34.                 padding: 16px; /* cushion inside container */
  35.                 background: #f9f9f9;
  36.                 border-radius: 8px;
  37.             }
  39.             .results-grid {
  40.                 display: grid;
  41.                 grid-template-columns: repeat(5, 1fr);
  42.                 border: 1px solid #ddd;
  43.                 border-radius: 6px;
  44.                 overflow: hidden;
  45.             }
  47.             .results-grid .row {
  48.                 display: contents; /* lets children align to grid columns */
  49.             }
  51.             .results-grid .row > div {
  52.                 padding: 10px;
  53.                 border-bottom: 1px solid #eee;
  54.             }
  56.             .results-grid .header > div {
  57.                 background: linear-gradient(to bottom, #888 0%, #fff 100%);
  58.                 font-weight: bold;
  59.                 border-bottom: 2px solid #ccc;
  60.             }
  62.             /* zebra striping */
  63.             .results-grid .row:nth-child(even) > div {
  64.                 background-color: #EAECED;
  65.             }
  67.             .results-grid .row:nth-child(odd):not(.header) > div {
  68.                 background-color: #fff;
  69.             }
  70.         </style>
  72.     </div>
  73. {% endblock %}
  75. {% block page_scripts %}
  76. <script src="/scripts/autocomplete.js"></script>
  77. <script>
  78.     jQuery(function () {
  79.         $('#download-search').searchAutocomplete({
  80.             url: '/search-download-fast',
  81.             processData: function (data, $input, response) {
  82.                 var $grid = $('#results-grid');
  83.                 $grid.find('.row:not(.header)').remove();
  85.                 var items = (data || []).map(function (row) {
  86.                     var ext = '';
  87.                     if (row.file_name) {
  88.                         var parts = row.file_name.split('.');
  89.                         if (parts.length > 1) ext = parts.pop();
  90.                     }
  92.                     var $row = $('<div class="row">');
  93.                     $row.append($('<div>').text(row.description || ""));
  94.                     $row.append($('<div>').text(row.hersteller || ""));
  95.                     $row.append($('<div>').text(row.doctype_name || ""));
  96.                     $row.append($('<div>').text(row.Ordner || ""));
  97.                     var $typCell = $('<div>').css('text-align', 'center');
  98.                     if (row.file_id) {
  99.                         var $link = $('<a>').attr('href', '/download/' + row.file_id).attr('target', '_blank');
  100.                         {% if not logged_in %}$link.addClass('dl-link');{% endif %}
  101.                         $link.append($('<img>').attr('src', '/images/pdf_icon_klein.jpg').attr('border', '0'));
  102.                         $typCell.append($link);
  103.                     } else {
  104.                         $typCell.text(ext);
  105.                     }
  106.                     $row.append($typCell);
  107.                     $grid.append($row);
  109.                     return {
  110.                         label: row.description,
  111.                         value: row.description,
  112.                         category: row.hersteller
  113.                     };
  114.                 });
  116.                 items.sort(function (a, b) {
  117.                     var c = a.category.localeCompare(b.category);
  118.                     return c !== 0 ? c : a.label.localeCompare(b.label);
  119.                 });
  121.                 response(items);
  122.             }
  123.         });
  124.     });
  125. </script>
  126. {% endblock %}