Без опису

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. {% extends 'header.html' %}
  2. {% block css %}
  3. <link rel='stylesheet' href='/static/css/tienda.css'>
  4. {% endblock %}
  5. {% block body %}
  6. <!--<nav class="navbar navbar-expand-lg navbar-dark text-center sticky-top" id='navbar'>
  7. <a class="navbar-brand mx-auto active" style='color: #000000' href="/home" onclick='saveCart()'>Inicio</a>
  8. <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
  9. aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  10. <span class="navbar-toggler-icon"></span>
  11. </button>
  12. <div class="collapse navbar-collapse" id="navbarNav">
  13. <ul class="navbar-nav mx-auto">
  14. <li class="nav-item">
  15. <a class="nav-link" href="/verBotella" onclick='saveCart()'
  16. style='color: #2671B6;'><strong>Botella</strong></a>
  17. </li>
  18. <li class="nav-item">
  19. <a class="nav-link" style='color: #2671B6;' href="/verCamisa"
  20. onclick='saveCart()'><strong>Camisas</strong></a>
  21. </li>
  22. </ul>
  23. <ul class="nvbar-nav pull-sm-right">
  24. <li class="nav-item dropdown">
  25. <a class="nav-link dropdown-toggle" style = 'color: #2671B6;' href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  26. <strong>Dropdown link</strong>
  27. </a>
  28. <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
  29. <a class="dropdown-item" href="#">Action</a>
  30. <a class="dropdown-item" href="#">Another action</a>
  31. <a class="dropdown-item" href="#">Something else here</a>
  32. </div>
  33. </li>
  34. <button type='button' class='btn btn-success' data-toggle="modal" data-target="Tiendita">Check out</button>
  35. </ul>
  36. </div>
  37. </nav>-->
  38. <div class='container-fluid'>
  39. <div class='row'>
  40. <br>
  41. </div>
  42. <div class='row'>
  43. {% set count = namespace(value=0) %}
  44. {% for item in items %}
  45. <div class='col-auto'>
  46. <div class="card">
  47. <img class="card-img-top" style='height: 18rem;' src="/static/{{item.path_a_imagen}}" alt="Card image">
  48. <div class="card-body">
  49. <p class="card-text"><strong>{{item.nombre}}</strong></p>
  50. <p class="card-text"> {{item.descripcion}}
  51. </p>
  52. <p class='card-text text-muted' style="text-align: end;"><strong>Precio :
  53. ${{item.precio}}</strong></p>
  54. </div>
  55. <div class='card-footer'>
  56. <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#Modal"
  57. onclick="changeInput('{{item.nombre}}', '{{item.descripcion}}',{{item.id}},{{item.precio}},descripcion)">
  58. Editar
  59. </button>
  60. <button type="button" class="btn btn-primary" data-toggle="modal"
  61. data-target="#ModalDelete{{count.value}}">
  62. Borrar
  63. </button>
  64. </div>
  65. </div>
  66. <!-- onclick ='saveCart()' href="#" class="btn btn-primary">See Profile</a>-->
  67. </div>
  68. <div class="modal fade" id="ModalDelete{{count.value}}">
  69. <div class="modal-dialog" role="document">
  70. <div class="modal-content">
  71. <div class="modal-header">
  72. <h5 class="modal-title">¿Seguro que quieres borrar este item '{{item.nombre}}'?</h5>
  73. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  74. <span aria-hidden="true">&times;</span>
  75. </button>
  76. </div>
  77. <div class="modal-body">
  78. Una vez borrado no se podrá recuperar.
  79. </div>
  80. <div class="modal-footer">
  81. <a href='/deleteItem/{{descripcion}}/{{item.id}}' type='button' class='btn btn-primary'>Quiero
  82. Borrar</a>
  83. </div>
  84. </div>
  85. </div>
  86. </div>
  87. {% set count.value = count.value + 1 %}
  88. {% endfor %}
  89. </div>
  90. </div>
  91. <div class="modal fade" id="Modal">
  92. <div class="modal-dialog" role="document">
  93. <div class="modal-content">
  94. <div class="modal-header">
  95. <h5 class="modal-title">Editar</h5>
  96. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  97. <span aria-hidden="true">&times;</span>
  98. </button>
  99. </div>
  100. <div class="modal-body">
  101. <form action='/{{link}}/{{descripcion}}' method='POST' enctype="multipart/form-data">
  102. <input type='hidden' name='idItem' id='idItem'>
  103. Nombre: <input type="text" name='nombre' class="form-control" id='nombre' placeholder="Nombre">
  104. <div class='form-row align-items-center'>
  105. <div class='col-6'>
  106. Categoría:
  107. <select class="form-control" id="selectCat" name='selectCat' onchange='change("selectCat")'>
  108. {% for categoria in categorias %}
  109. <option value={{categoria.categoria}}>{{categoria.categoria}}</option>
  110. {% endfor %}
  111. <option value='0'>Nueva categoría</option>
  112. </select>
  113. </div>
  114. <div class='col-6'>
  115. Precio:
  116. <div class="input-group mb-2 mr-sm-2">
  117. <div class="input-group-prepend">
  118. <div class="input-group-text">$</div>
  119. </div>
  120. <input type="text" class="form-control" id="Precio" name='Precio' placeholder="Precio">
  121. </div>
  122. </div>
  123. </div>
  124. <div id='categoria'>
  125. Nueva Categoría : <input type='text' name='nuevaCategoria' class='form-control'
  126. id='nuevaCategoria'>
  127. </div>
  128. Descripción: <textarea class="form-control" name='descripcion' rows="5" id="descripcion"></textarea>
  129. Imagen:
  130. <div class="custom-file">
  131. <input type="file" class="custom-file-input" name='imagen' id="imagen" lang="en"
  132. onchange='changePlaceHolder()'>
  133. <label class="custom-file-label" id='placeholder' for="customFileLang">Choose other file</label>
  134. </div>
  135. <button type='submit' class='btn btn-primary'>Someter</button>
  136. </div>
  137. </form>
  138. </div>
  139. </div>
  140. </div>
  141. <script>
  142. $(document).ready(function () {
  143. $('#categoria').hide()
  144. });
  145. function change(string) {
  146. if ($('#' + string).val() == 0) {
  147. $('#categoria').show();
  148. }
  149. else {
  150. $('#categoria').hide();
  151. }
  152. }
  153. function changePlaceHolder() {
  154. var val = $('#imagen').val();
  155. $('#placeholder').html(val);
  156. }
  157. function changeInput(nombre, descripcion, id, precio, categoria) {
  158. $("#nombre").val(nombre);
  159. $('#selectCat').val(categoria);
  160. $('#Precio').val(precio);
  161. $('#descripcion').val(descripcion);
  162. $('#idItem').val(id);
  163. }
  164. </script>
  165. {% endblock %}