Easier access to food details

apps/food/templates/food/food_list.html

@@ -7,7 +7,52 @@ SPDX-License-Identifier: GPL-3.0-or-later
 {% load i18n %}
 
 {% block content %}
-{{ block.super }}
+<div class="card bg-light">
+  <h3 class="card-header text-center">
+      {{ title }}
+  </h3>
+  <div class="card-body">
+    <style>
+      input[type=number]::-webkit-inner-spin-button,
+      input[type=number]::-webkit-outer-spin-button {
+          -webkit-appearance: none;
+          margin: 0;
+      }
+      input[type=number] {
+          appearance: textfield;
+          padding: 6px;
+          border: 1px solid #ccc;
+          border-radius: 4px;
+          width: 100px;
+      }
+    </style>
+    <div class="d-flex align-items-center" style="max-width: 300px;">
+      <form method="get" action="{% url 'food:redirect_view' %}" class="d-flex w-100">
+        <input type="number" name="slug" placeholder="QR-code" required class="form-control form-control-sm" style="max-width: 120px;">
+        <button type="submit" class="btn btn-sm btn-primary">{% trans "View food" %}</button>
+      </form>
+    </div>
+  </div>
+  <div class="card-body">
+      <input id="searchbar" type="text" class="form-control"
+          placeholder="{% trans "Search by attribute such as name..." %}">
+  </div>
+
+  {% block extra_inside_card %}
+  {% endblock %}
+
+  <div id="dynamic-table">
+      {% if table.data %}
+      {% render_table table %}
+      {% else %}
+      <div class="card-body">
+          <div class="alert alert-warning">
+              {% trans "There is no results." %}
+          </div>
+      </div>
+      {% endif %}
+  </div>
+</div>
 <br>
 <div class="card bg-light mb-3">
   <h3 class="card-header text-center">
@@ -68,4 +113,20 @@ SPDX-License-Identifier: GPL-3.0-or-later
   {% endfor %}
   {% endif %}
 </div>
-{% endblock %}
+
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+      document.getElementById('goButton').addEventListener('click', function(event) {
+          event.preventDefault();
+          const slug = document.getElementById('slugInput').value;
+          if (slug && !isNaN(slug)) {
+              window.location.href = `/food/${slug}/`;
+          } else {
+              alert("Veuillez entrer un nombre valide.");
+          }
+      });
+  });
+  </script>
+
+{% endblock %}