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.         <script src="/scripts/autocomplete.js"></script>
  73.         <script>
  74.             jQuery(window).ready(function () {
  75.                 $('#download-search').searchAutocomplete({
  76.                     url: '/search-download-fast',
  77.                     processData: function (data, $input, response) {
  78.                         var $grid = $('#results-grid');
  79.                         $grid.find('.row:not(.header)').remove();
  81.                         var items = (data || []).map(function (row) {
  82.                             var ext = '';
  83.                             if (row.file_name) {
  84.                                 var parts = row.file_name.split('.');
  85.                                 if (parts.length > 1) ext = parts.pop();
  86.                             }
  88.                             // build row
  89.                             var $row = $('<div class="row">');
  90.                             $row.append($('<div>').text(row.description || ""));
  91.                             $row.append($('<div>').text(row.hersteller || ""));
  92.                             $row.append($('<div>').text("")); // Manualtyp empty
  93.                             $row.append($('<div>').text(row.file_id || ""));
  94.                             $row.append($('<div>').text(ext));
  95.                             $grid.append($row);
  97.                             return {
  98.                                 label: row.description,
  99.                                 value: row.description,
  100.                                 category: row.hersteller
  101.                             };
  102.                         });
  104.                         items.sort(function (a, b) {
  105.                             var c = a.category.localeCompare(b.category);
  106.                             return c !== 0 ? c : a.label.localeCompare(b.label);
  107.                         });
  109.                         response(items);
  110.                     }
  111.                 });
  112.             });
  113.         </script>
  114.     </div>
  115. {% endblock %}