templates/blog/index.html.twig line 1

Open in your IDE?
  1. {% extends 'nav.html.twig' %}
  3. {% block content %}
  4.     {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_MODERATOR')%}
  5.         <section style="padding-top: 4.4rem">
  6.             <div id="addCost" style="display: block;" onclick="showAddNewPostModal()" class="d-flex text-body-secondary border-bottom">
  7.                 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-plus-square" viewBox="0 0 16 16">
  8.                     <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"></path>
  9.                     <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"></path>
  10.                 </svg>
  11.             </div>
  12.         </section>
  13.     {% endif %}
  15.     <div class="container" style="padding: 50px 0 0 0">
  16.             {% for post in posts %}
  17.                 {% if loop.first %}
  18.                     <div class="p-4 p-md-5 mb-4 text-white rounded bg-dark">
  19.                         <div class="col-md-6 px-0">
  20.                             <h1 class="display-4 fst-italic">{{ post.title }}</h1>
  21.                             <p class="lead my-3">
  22.                                 {% if post.content | length > 150 %}
  23.                                     {{ post.content | slice (0, 150) ~ '...' }}
  24.                                 {% else %}
  25.                                     {{ post.content }}
  26.                                 {% endif %}
  27.                             </p>
  28.                             <p class="lead mb-0"><a href="/blog/singlePost/{{ post.id }}" class="text-white fw-bold stretched-link">Продолжить чтение...</a></p>
  29.                         </div>
  30.                     </div>
  31.                 {% else %}
  32.                     {% if loop.index == 2 %}
  33.                         <div class="row mb-2">
  34.                     {% endif %}
  35.                     <div class="col-md-6" style="flex: 0 0 auto; width: 50%">
  36.                         <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 h-md-250 position-relative" style="height: 250px; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important; overflow: hidden">
  37.                             <div class="col p-4 d-flex flex-column position-static" style="flex: 1 0 0; margin-top: 0">
  38.                                 <h3 class="mb-0">{{ post.title }}</h3>
  39.                                 <div class="mb-1 text-muted">{{ post.createdAt|date('d.m.y') }}</div>
  40.                                 <p class="card-text mb-auto">
  41.                                     {% if post.content | length > 100 %}
  42.                                         {{ post.content | slice (0, 100) ~ '...' }}
  43.                                     {% else %}
  44.                                         {{ post.content }}
  45.                                     {% endif %}
  46.                                 </p>
  47.                                 <a href="/blog/singlePost/{{ post.id }}" class="stretched-link">Продолжить чтение</a>
  48.                             </div>
  49.                         {% if post.imagePath is not null %}
  50.                             <div class="col-auto d-none d-lg-block" style="flex: 0 0 auto; width: auto; margin-top: 0; padding-right: 0">
  51.                                 <img class="d-block img-fluid" width="200" height="250" style="object-fit: cover; height: 250px" src="/assets/images/{{ post.imagePath }}" alt="image">
  52.                             </div>
  53.                         {% endif %}
  54.                         </div>
  55.                     </div>
  56.                     {% if loop.last %}
  57.                         </div>
  58.                     {% endif %}
  59.                 {% endif %}
  60.             {% endfor %}
  61.     </div>
  63.     <div class="modal fade bd-example-modal-lg" id="addPostModal" tabindex="-1" role="dialog">
  64.         <div class="modal-dialog modal-lg" style="max-width: 1000px">
  65.             <div class="modal-content" id="addPostModalContent" style="top: 100px;">
  67.             </div>
  68.         </div>
  69.     </div>
  71. {% endblock %}
  72. {% block pagescripts %}
  73.     <script>
  75.         /**
  76.          * Отправляет запрос на сервер, получает форму создания нового поста и помещает эту форму в модальное окно
  77.          */
  78.         function showAddNewPostModal() {
  79.             let url = '/blog/addNewPost';
  80.             let modal = document.getElementById('addPostModalContent');
  82.             $('#addPostModal').on('hidden.bs.modal', function () {
  83.                 closeModal();
  84.             });
  86.             sendGetRequest(url)
  87.                 .then(function (response) {
  88.                    modal.innerHTML = response;
  89.                    openModal();
  90.                     checkFilesCountEvent();
  91.                 });
  92.         }
  94.         /**
  95.          * Отправляет заполненную форму на сервер
  96.          */
  97.         function submitAddPostForm() {
  98.             event.preventDefault();
  99.             let form = document.getElementById('blogAddPostForm');
  100.             let formData = new FormData(form);
  101.             let url = '/blog/addNewPost';
  104.             sendPostRequest(url, formData)
  105.                 .then(function () {
  106.                     showSuccessAlert('Пост успешно добавлен');
  107.                     location.reload()
  108.                 });
  109.         }
  111.         /**
  112.          * Проверяет количество файлов загруженных в форму
  113.          */
  114.         function checkFilesCountEvent() {
  115.             let input = document.getElementById('myInput');
  116.             let currentFile = null;
  118.             input.addEventListener('change', function() {
  119.                 if (input.files.length > 0) {
  120.                     if (currentFile) {
  121.                         currentFile = null;
  122.                     }
  123.                     currentFile = input.files[0];
  124.                 }
  125.             });
  126.         }
  128.         /**
  129.          * Открывает модальное окно
  130.          */
  131.         function openModal() {
  132.             $('#addPostModal').modal('show');
  133.         }
  135.         /**
  136.          * Закрывает модальное окно
  137.          */
  138.         function closeModal() {
  139.             $('#addPostModal').modal('hide');
  140.         }
  141.     </script>
  142. {% endblock %}