templates/article/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Hello ArticleController!
  4. {% endblock %}
  6. {% block body %}
  8.     <div class="container">
  9.         {% for category in categories %}
  10.             <a href="{{path('app_category', {'id':category.id})}}">{{category.name}}</a>
  11.             <p></p>
  12.             {% set i=0 %}
  13.             <div class="row">
  14.                 {% for article in articles %}
  15.                     {% if article.category.name is same as category.name %}
  16.                         {% set i=i+1 %}
  17.                         <div class="col-3">
  18.                             <div class="card" style="width: 16rem;">
  19.                                 <img class="card-img-top" src="{{asset('uploads/') ~ article.image}}" alt="Card image cap" height="200px">
  20.                                 <div class="card-body">
  21.                                     <a href="{{path('app_detail', {'id':article.id})}}">
  22.                                         <h5 class="card-title">{{article.name}}</h5>
  23.                                     </a>
  24.                                     <p class="card-text">{{article.category}}</p>
  25.                                 </div>
  26.                                 {% if article.quantity < article.warnining %}
  27.                                     <div class="card-footer bg-danger">
  28.                                     {% else %}
  29.                                         <div class="card-footer">
  30.                                         {% endif %}
  31.                                         <small class="text-muted">
  32.                                             <div class="input-group js-count">
  33.                                                 <span class="input-group-btn">
  34.                                                     <a href="{{path('article_minus', {'id':article.id})}}" class="btn btn-link js-count js-count {{article.id}}">
  35.                                                         <button type="button" class="btn btn-danger btn-number" data-type="minus" data-field="quant[2]">
  36.                                                             <span class="fa fa-minus"></span>
  37.                                                         </button>
  38.                                                     </a>
  39.                                                 </span>
  40.                                                 <h5>
  41.                                                     <span class="js-count" id="js{{article.id}}" min="0">{{article.quantity}}</span>
  42.                                                 </h5>
  43.                                                 <span class="input-group-btn">
  44.                                                     <a href="{{ path('article_add', {'id':article.id})}}" class="btn btn-link js-count {{article.id}}">
  45.                                                         <button type="button" class="btn btn-success " data-type="plus" data-field="quant[2]">
  46.                                                             <span class="fa fa-plus"></span>
  47.                                                         </button>
  48.                                                     </a>
  49.                                                 </span>
  50.                                             </div>
  51.                                         </small>
  52.                                     </div>
  53.                                 </div>
  54.                             </div>
  55.                             {% if i % 4 == 0 %}
  56.                             </div>
  57.                             <br><br>
  58.                             <div class="row">
  59.                             {% endif %}
  60.                             {# <img class="img-fluid" alt="Responsive image" src="{{asset('uploads/') ~ article.image}}"> #}
  61.                         {% endif %}
  62.                     {% endfor %}
  63.                     <hr>
  64.                 {% endfor %}
  65.             </div>
  66.         </div>
  69.         <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  70.         <script>
  71.             function onClickBtnCount(event) {
  72. event.preventDefault();
  73. const url = this.href;
  74. console.log(url);
  75. axios.get(url).then(function (response) {
  76. console.log(response);
  77. const spanCount = document.querySelector("#js" + response.data.id);
  78. spanCount.textContent = response.data.quantity;
  79. }).catch(function (error) {
  80. console.log(error);
  81. });
  82. }
  83. document.querySelectorAll('span.input-group-btn > a.js-count').forEach(function (link) {
  84. link.addEventListener('click', onClickBtnCount);
  85. })
  86.         </script>
  87.     {% endblock %}