modification des titres, aperçus et dates des news

9 files changed, 262 insertions, 72 deletions

diff --git a/public/css/main.css b/public/css/main.css
index a75b8cd..50c2173 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -56,22 +56,39 @@ article .logo2
         overflow: hidden;
 }
 
-article .action_icon
+.action_icon
 {
         width: 24px;
-        vertical-align: middle;
+        vertical-align: bottom;
         border: white 2px solid; /* invisible */
 }
-article .action_icon:hover
+button .action_icon
+{
+        border: none;
+}
+.action_icon:hover
 {
         background-color: #ffff00;
         border-radius: 4px;
         border: lightgrey 2px outset;
 }
-.article_title_zone
+button .action_icon:hover
+{
+        border: none;
+}
+
+.button_zone
 {
         display: flex;
-        justify-content: space-between;
+}
+
+.share
+{
+        float: right;
+}
+.article_title_zone
+{
+        padding: 10px;
 }
 .under_an_article
 {
@@ -82,8 +99,8 @@ article .action_icon:hover
 .under_an_article img
 {
         width: 24px;
-        vertical-align: middle;
         margin-right: 5px;
+        vertical-align: middle;
 }
 .article_admin_zone
 {
diff --git a/public/js/main.js b/public/js/main.js
index d985b71..1351fea 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -63,12 +63,93 @@ function switchPositions(articleId, direction)
                                 console.log('Inversion réussie');
                         }
                         else{
-                                console.log('Échec de l\'inversion');
+                                console.error('Échec de l\'inversion');
                         }
         }
         else {
 
-            console.log('Échec de l\'inversion');
+            console.error('Échec de l\'inversion');
+        }
+    })
+    .catch(error => {
+        console.error('Erreur:', error);
+    });
+}
+
+function changeDate(id_date)
+{
+        const real_id = 'i' + id_date.slice(1);
+        const date_span = document.getElementById(id_date); // = <span>
+        var old_date = date_span.innerHTML;
+
+        // changer "le 28-12-2024 à 23h14" en "2024-12-28T23:14"
+        let values = old_date.split(" à "); // 2 parties: date et heure
+        values[1] = values[1].replace('h', ':');
+        values[0] = values[0].replace("le ", "");
+        let date = values[0].split("-"); // tableau jj-mm-aaaa
+    old_date = date[2] + '-' + date[1] + "-" + date[0] + "T" + values[1];
+
+        var label = document.createElement('label');
+        label.textContent = 'Choisir une date: ';
+        label.id = 'label-' + id_date;
+
+        var input = document.createElement('input');
+        input.type = 'datetime-local';
+    input.value = old_date;
+    input.id = 'input-' + id_date;
+
+    var parent = date_span.parentElement;
+    parent.appendChild(label)
+    parent.appendChild(input);
+        
+        date_span.classList.add('hidden');
+    document.querySelector(`#edit-${id_date}`).classList.add('hidden');
+    document.querySelector(`#cancel-${id_date}`).classList.remove('hidden');
+    document.querySelector(`#submit-${id_date}`).classList.remove('hidden');
+}
+
+function closeInput(id)
+{
+    const date_span = document.getElementById(id);
+    const date_input = document.getElementById('input-' + id);
+    const date_label = document.getElementById('label-' + id);
+
+    date_span.classList.remove('hidden');
+    date_input.remove();
+    date_label.remove();
+    document.querySelector(`#edit-${id}`).classList.remove('hidden');
+    document.querySelector(`#cancel-${id}`).classList.add('hidden');
+    document.querySelector(`#submit-${id}`).classList.add('hidden');
+}
+
+function submitDate(id_date)
+{
+        const date_input = document.getElementById('input-' + id_date);
+
+    fetch('index.php?action=date_submit', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({id: id_date, date: date_input.value})
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+                // modifier la date dans le <span> caché
+                const date_span = document.getElementById(id_date);
+                let date = new Date(date_input.value);
+                date_span.innerHTML = 
+                                'le ' + String(date.getDate()).padStart(2, '0') + '-' + 
+                                String(date.getMonth() + 1).padStart(2, '0') + '-' + 
+                                String(date.getFullYear()).padStart(4, '0') + ' à ' + 
+                                String(date.getHours()).padStart(2, '0') + 'h' + 
+                                String(date.getMinutes()).padStart(2, '0');
+            
+            closeInput(id_date);
+        }
+        else {
+            console.error('Erreur lors de la sauvegarde de la date.');
         }
     })
     .catch(error => {
diff --git a/public/js/tinymce.js b/public/js/tinymce.js
index 8aeaac8..d3c9739 100644
--- a/public/js/tinymce.js
+++ b/public/js/tinymce.js
@@ -1,12 +1,14 @@
 let editors = {};
 
-function openEditor(articleId, page = '') {
+function openEditor(id, page = '') {
+    const real_id = 'i' + id.slice(1);
+
     // Récupérer et sauvegarder le contenu d'origine de l'article
-    const articleContent = document.getElementById(articleId).innerHTML;
-    document.getElementById(articleId).setAttribute('data-original-content', articleContent);
+    const articleContent = document.getElementById(id).innerHTML;
+    document.getElementById(id).setAttribute('data-original-content', articleContent);
 
     tinymce.init({
-        selector: `#${articleId}`,
+        selector: `#${id}`,
         language: 'fr_FR', // télécharger des paquets de langue ici: https://www.tiny.cloud/get-tiny/language-packages/
         language_url: 'js/tinymce-langs/fr_FR.js', // ou installer tweeb/tinymce-i18n avec composer
         license_key: 'gpl',
@@ -18,19 +20,18 @@ function openEditor(articleId, page = '') {
         statusbar: false,
         setup: function (editor) {
             editor.on('init', function () {
-                editors[articleId] = editor;
+                editors[id] = editor;
                 
                 // boutons "Modifier", "Supprimer", "déplacer vers le haut", "déplacer vers le bas", "Annuler" et "Soumettre"
-                document.querySelector(`#edit-${articleId}`).classList.add('hidden');
-                document.querySelector(`#delete-${articleId}`).classList.add('hidden');
+                document.querySelector(`#edit-${id}`).classList.add('hidden');
+                document.querySelector(`#cancel-${id}`).classList.remove('hidden');
+                document.querySelector(`#submit-${id}`).classList.remove('hidden');
+                document.querySelector(`#delete-${real_id}`).classList.add('hidden');
                 // boutons absents page article
                 if(page != 'article'){
-                    document.querySelector(`#position_up-${articleId}`).classList.add('hidden');
-                    document.querySelector(`#position_down-${articleId}`).classList.add('hidden');
+                    document.querySelector(`#position_up-${id}`).classList.add('hidden');
+                    document.querySelector(`#position_down-${id}`).classList.add('hidden');
                 }
-                document.querySelector(`#cancel-${articleId}`).classList.remove('hidden');
-                document.querySelector(`#submit-${articleId}`).classList.remove('hidden');
-                
             });
         },
         // upload d'image
@@ -59,10 +60,10 @@ function openEditor(articleId, page = '') {
     });
 
     // Remplacer le contenu de l'article par l'éditeur
-    document.getElementById(articleId).innerHTML = articleContent;
+    document.getElementById(id).innerHTML = articleContent;
 }
 
-function deleteArticle(articleId, page = '') {
+function deleteArticle(id, page = '') {
     if (confirm('Voulez-vous vraiment supprimer cet article ?'))
     {
         // Envoyer une requête au serveur pour supprimer l'article
@@ -71,7 +72,7 @@ function deleteArticle(articleId, page = '') {
             headers: {
             'Content-Type': 'application/json'
             },
-            body: JSON.stringify({ id: articleId })
+            body: JSON.stringify({ id: id })
         })
         .then(response => response.json())
         .then(data => {
@@ -85,7 +86,7 @@ function deleteArticle(articleId, page = '') {
                 }
                 else{
                     // Supprimer l'article du DOM
-                    const articleElement = document.getElementById(articleId);
+                    const articleElement = document.getElementById(id);
                     articleElement.parentElement.parentElement.remove(); // <article> est deux niveau au dessus
                 }
             }
@@ -99,40 +100,42 @@ function deleteArticle(articleId, page = '') {
     }
 }
 
-function closeEditor(articleId, page = '', display_old = true)
+function closeEditor(id, page = '', display_old = true)
 {
+    const real_id = 'i' + id.slice(1);
+
     // Fermer l'éditeur
-    tinymce.remove(`#${articleId}`);
-    delete editors[articleId];
+    tinymce.remove(`#${id}`);
+    delete editors[id];
     
     // Restaurer le contenu d'origine de l'article
     if(display_old){
-        const originalContent = document.getElementById(articleId).getAttribute('data-original-content');
-        document.getElementById(articleId).innerHTML = originalContent;
+        const originalContent = document.getElementById(id).getAttribute('data-original-content');
+        document.getElementById(id).innerHTML = originalContent;
     }
 
     // boutons "Modifier", "Supprimer", "déplacer vers le haut", "déplacer vers le bas", "Annuler" et "Soumettre"
-    document.querySelector(`#edit-${articleId}`).classList.remove('hidden');
-    document.querySelector(`#delete-${articleId}`).classList.remove('hidden');
+    document.querySelector(`#edit-${id}`).classList.remove('hidden');
+    document.querySelector(`#cancel-${id}`).classList.add('hidden');
+    document.querySelector(`#submit-${id}`).classList.add('hidden');
+    document.querySelector(`#delete-${real_id}`).classList.remove('hidden');
     // boutons absents page article
     if(page != 'article'){
-        document.querySelector(`#position_up-${articleId}`).classList.remove('hidden');
-        document.querySelector(`#position_down-${articleId}`).classList.remove('hidden');
-    }
-    document.querySelector(`#cancel-${articleId}`).classList.add('hidden');
-    document.querySelector(`#submit-${articleId}`).classList.add('hidden');
+        document.querySelector(`#position_up-${id}`).classList.remove('hidden');
+        document.querySelector(`#position_down-${id}`).classList.remove('hidden');
+    }    
 }
 
-function submitArticle(articleId, page = '') {
+function submitArticle(id, page = '') {
     // Récupérer l'éditeur correspondant à l'article
-    const editor = editors[articleId];
-    if (!editor) {
-        console.error('Éditeur non trouvé pour l\'article:', articleId);
+    const editor = editors[id];
+    if(!editor) {
+        console.error('Éditeur non trouvé pour l\'article:', id);
         return;
     }
     
     // Récupérer le contenu de l'éditeur
-    const newContent = editor.getContent();
+    const html = editor.getContent();
 
     // Envoi AJAX au serveur
     fetch('index.php?action=editor_submit', {
@@ -140,14 +143,14 @@ function submitArticle(articleId, page = '') {
         headers: {
             'Content-Type': 'application/json'
         },
-        body: JSON.stringify({id: articleId, content: newContent})
+        body: JSON.stringify({id: id, content: html})
     })
     .then(response => response.json())
     .then(data => {
         if (data.success) {
             // Fermer l'éditeur et mettre à jour le contenu de l'article
-            closeEditor(articleId, page, false);
-            document.getElementById(articleId).innerHTML = newContent;
+            closeEditor(id, page, false);
+            document.getElementById(id).innerHTML = html;
         }
         else {
             alert('Erreur lors de la sauvegarde de l\'article.');
diff --git a/src/controller/ajax.php b/src/controller/ajax.php
index bcba3f2..86acd39 100644
--- a/src/controller/ajax.php
+++ b/src/controller/ajax.php
@@ -14,16 +14,32 @@ if($_SERVER['CONTENT_TYPE'] === 'application/json' && isset($_GET['action']))
         {
             if(json_last_error() === JSON_ERROR_NONE)
             {
-                $articleId = $json['id'];
+                $id = $json['id'];
+                $id[0] = 'i';
                 $content = Security::secureString($json['content']);
 
                 $director = new Director($entityManager);
-                if($director->makeArticleNode($articleId)) // une entrée est trouvée
+                if($director->makeArticleNode($id)) // une entrée est trouvée
                 {
                         $node = $director->getRootNode();
-                        $node->getArticle()->setContent($content);
+                        switch($json['id'][0]){
+                                        case 'i':
+                                                $node->getArticle()->setContent($content);
+                                                break;
+                                        case 'p':
+                                                $node->getArticle()->setPreview($content); // html de l'éditeur
+                                                break;
+                                        case 't':
+                                                $node->getArticle()->setTitle($content); // html de l'éditeur
+                                                break;
+                                        case 'd':
+                                                echo json_encode(['success' => false, 'message' => 'l\'action editor_submit ne supporte pas les dates, utiliser date_submit.']);
+                                                die;
+                                        default:
+                                                echo json_encode(['success' => false, 'message' => 'identifiant non utilisable']);
+                                                die;
+                                }
                         $entityManager->flush();
-
                         echo json_encode(['success' => true]);
                 }
                 else{
@@ -37,16 +53,16 @@ if($_SERVER['CONTENT_TYPE'] === 'application/json' && isset($_GET['action']))
         }
         elseif($_GET['action'] === 'delete_article' && isset($json['id']))
         {
-        $articleId = $json['id'];
+        $id = $json['id'];
 
         $director = new Director($entityManager);
-        $director->makeArticleNode($articleId);
+        $director->makeArticleNode($id);
         $node = $director->getRootNode();
         $entityManager->remove($node);
         $entityManager->flush();
 
         // test avec une nouvelle requête qui ne devrait rien trouver
-        if(!$director->makeArticleNode($articleId))
+        if(!$director->makeArticleNode($id))
         {
                 echo json_encode(['success' => true]);
 
@@ -75,6 +91,21 @@ if($_SERVER['CONTENT_TYPE'] === 'application/json' && isset($_GET['action']))
                 echo json_encode(['success' => true]);
                 die;
         }
+        elseif($_GET['action'] === 'date_submit' && isset($json['id']) && isset($json['date']))
+        {
+                $id = $json['id'];
+                $id[0] = 'i';
+                $date = new DateTime($json['date']);
+
+                $director = new Director($entityManager);
+                $director->makeArticleNode($id);
+        $node = $director->getRootNode();
+                $node->getArticle()->setDateTime($date);
+                $entityManager->flush();
+                
+                echo json_encode(['success' => true]);
+                die;
+        }
 }
 
 // détection des requêtes d'upload d'image de tinymce
diff --git a/src/model/entities/Article.php b/src/model/entities/Article.php
index 3b846da..601e573 100644
--- a/src/model/entities/Article.php
+++ b/src/model/entities/Article.php
@@ -49,6 +49,10 @@ class Article
     {
         return $this->date_time;
     }
+    public function setDateTime(\DateTime $date_time): void
+    {
+        $this->date_time = $date_time;
+    }
     public function getTimestamp(): int
     {
         return $this->date_time->getTimestamp();
@@ -57,10 +61,18 @@ class Article
     {
         return $this->title;
     }
+    public function setTitle(string $title): void
+    {
+        $this->title = $title;
+    }
     public function getPreview(): string
     {
         return $this->preview;
     }
+    public function setPreview(string $preview): void
+    {
+        $this->preview = $preview;
+    }
     public function getContent(): string
     {
         return $this->content;
diff --git a/src/view/ArticleBuilder.php b/src/view/ArticleBuilder.php
index 6c2f63c..f86f9bd 100644
--- a/src/view/ArticleBuilder.php
+++ b/src/view/ArticleBuilder.php
@@ -25,7 +25,7 @@ class ArticleBuilder extends AbstractBuilder
             // partage
             $share_link = new URL(['page' => CURRENT_PAGE], $id);
             $share_js = 'onclick="copyInClipBoard(\'' . $share_link . '\')"';
-            $share_button = '<p><a href="' . $share_link . '" ' . $share_js . '><img class="action_icon" src="assets/share.svg"></a></p>' . "\n";
+            $share_button = '<a class="share" href="' . $share_link . '" ' . $share_js . '><img class="action_icon" src="assets/share.svg"></a>' . "\n";
 
             // modifier un article
             $admin_buttons = '';
diff --git a/src/view/NewBuilder.php b/src/view/NewBuilder.php
index 94823bd..acde8b4 100644
--- a/src/view/NewBuilder.php
+++ b/src/view/NewBuilder.php
@@ -20,14 +20,23 @@ class NewBuilder extends AbstractBuilder
             // html, date
             $title = $node->getArticle()->getTitle();
             $preview = $node->getArticle()->getPreview();
+            
+            // lettre au début de l'id: i = article, p = preview, t = title, d = date
             $id = $node->getArticleTimestamp();
+            $id_title = $id;
+            $id_title[0] = 't';
+            $id_preview = $id;
+            $id_preview[0] = 'p';
+            $id_date = $id;
+            $id_date[0] = 'd';
+
             $content = '';
 
             // page article unique
             if(Director::$page_path->getLast()->getEndOfPath() === 'article')
             {
                 $content = $node->getArticle()->getContent();
-                $from_to_button = '<p><a class="link_to_article" href="' . new URL(['page' => 'accueil']) . '"><button>Retour page d\'accueil</button></a></p>';
+                $from_to_button = '<p><a class="link_to_article" href="' . new URL(['page' => 'accueil']) . '"><button>Page<br>d\'accueil</button></a></p>';
             }
             // page d'accueil (avec des news)
             else
@@ -38,32 +47,59 @@ class NewBuilder extends AbstractBuilder
             
             $date_object = $node->getArticle()->getDateTime(); // class DateTime
             $date = 'le ' . str_replace(':', 'h', $date_object->format('d-m-Y à H:i'));
+            //$date = str_replace(':', 'h', $date_object->format('d-m-Y à H:i'));
 
             // partage
             $share_link = new URL(['page' => CURRENT_PAGE], $id);
             isset($_GET['id']) ? $share_link->addParams(['id' => $_GET['id']]) : '';
             $share_js = 'onclick="copyInClipBoard(\'' . $share_link . '\')"';
-            $share_button = '<p><a href="' . $share_link . '" ' . $share_js . '><img class="action_icon" src="assets/share.svg"></a></p>' . "\n";
+            $share_button = '<a class="share" href="' . $share_link . '" ' . $share_js . '><img class="action_icon" src="assets/share.svg"></a>' . "\n";
 
             // modifier un article
+            $title_buttons = '';
+            $preview_buttons = '';
+            $article_buttons = '';
+            $date_buttons = '';
             $admin_buttons = '';
             if($_SESSION['admin'])
             {
                 if(Director::$page_path->getLast()->getEndOfPath() === 'article'){
-                    $modify_js = 'onclick="openEditor(\'' . $id . '\', \'article\')"';
-                    $modify_article = '<p id="edit-' . $id . '"><a href="#"><img class="action_icon" src="assets/edit.svg" ' . $modify_js . '></a></p>' . "\n";
+                    $title_js = 'onclick="openEditor(\'' . $id_title . '\', \'article\')"';
+                    $modify_title = '<p id="edit-' . $id_title . '"><a href="#"><button ' . $title_js . '><img class="action_icon" src="assets/edit.svg">Titre</button></a></p>' . "\n";
+                    $close_js_title = 'onclick="closeEditor(\'' . $id_title . '\', \'article\', \'preview\')"';
+                    $close_editor_title = '<p id="cancel-' . $id_title . '" class="hidden"><a href="#"><button ' . $close_js_title . '>Annuler</button></a></p>';
+                    $submit_js_title = 'onclick="submitArticle(\'' . $id_title . '\', \'article\')"';
+                    $submit_title = '<p id="submit-' . $id_title . '" class="hidden"><a href="#"><button ' . $submit_js_title . '>Valider</button></a></p>';
+                    $title_buttons = '<div class="button_zone">' . $modify_title . $close_editor_title . $submit_title . '</div>';
+
+                    $preview_js = 'onclick="openEditor(\'' . $id_preview . '\', \'article\')"';
+                    $modify_preview = '<p id="edit-' . $id_preview . '"><a href="#"><button ' . $preview_js . '><img class="action_icon" src="assets/edit.svg">Aperçu</button></a></p>' . "\n";
+                    $close_js_preview = 'onclick="closeEditor(\'' . $id_preview . '\', \'article\', \'preview\')"';
+                    $close_editor_preview = '<p id="cancel-' . $id_preview . '" class="hidden"><a href="#"><button ' . $close_js_preview . '>Annuler</button></a></p>';
+                    $submit_js_preview = 'onclick="submitArticle(\'' . $id_preview . '\', \'article\')"';
+                    $submit_preview = '<p id="submit-' . $id_preview . '" class="hidden"><a href="#"><button ' . $submit_js_preview . '>Valider</button></a></p>';
+                    $preview_buttons = '<div class="button_zone">' . $modify_preview . $close_editor_preview . $submit_preview . '</div>';
+
+                    $article_js = 'onclick="openEditor(\'' . $id . '\', \'article\')"';
+                    $modify_article = '<p id="edit-' . $id . '"><a href="#"><button ' . $article_js . '><img class="action_icon" src="assets/edit.svg">Article</button></a></p>' . "\n";
+                    $close_js_article = 'onclick="closeEditor(\'' . $id . '\', \'article\')"';
+                    $close_editor_article = '<p id="cancel-' . $id . '" class="hidden"><a href="#"><button ' . $close_js_article . '>Annuler</button></a></p>';
+                    $submit_js_article = 'onclick="submitArticle(\'' . $id . '\', \'article\')"';
+                    $submit_article = '<p id="submit-' . $id . '" class="hidden"><a href="#"><button ' . $submit_js_article . '>Valider</button></a></p>';
+                    $article_buttons = '<div class="button_zone">' . $modify_article . $close_editor_article . $submit_article . '</div>';
+
+                    $date_js = 'onclick="changeDate(\'' . $id_date . '\', \'article\');';
+                    $modify_date = '<p id="edit-' . $id_date . '"><a href="#"><button ' . $date_js . '"><img class="action_icon" src="assets/edit.svg">Date</button></a></p>' . "\n";
+                    $close_js_date = 'onclick="closeInput(\'' . $id_date . '\')"';
+                    $close_editor_date = '<p id="cancel-' . $id_date . '" class="hidden"><a href="#"><button ' . $close_js_date . '>Annuler</button></a></p>';
+                    $submit_js_date = 'onclick="submitDate(\'' . $id_date . '\')"';
+                    $submit_date = '<p id="submit-' . $id_date . '" class="hidden"><a href="#"><button ' . $submit_js_date . '>Valider</button></a></p>';
+                    $date_buttons = '<div class="button_zone">' . $modify_date . $close_editor_date . $submit_date . '</div>';
 
-                    $up_button = '';
-                    $down_button = '';
-                    
                     $delete_js = 'onclick="deleteArticle(\'' . $id . '\', \'' . CURRENT_PAGE . '\')"';
-                    $delete_article = '<p id="delete-' . $id . '"><a href="#"><img class="action_icon" src="assets/delete-bin.svg" ' . $delete_js . '></a></p>' . "\n";
-                    
-                    $close_js = 'onclick="closeEditor(\'' . $id . '\', \'article\')"';
-                    $close_editor = '<p id="cancel-' . $id . '" class="hidden"><a href="#"><button ' . $close_js . '>Annuler</button></a></p>';
-                    
-                    $submit_js = 'onclick="submitArticle(\'' . $id . '\', \'article\')"';
-                    $submit_article = '<p id="submit-' . $id . '" class="hidden"><a href="#"><button ' . $submit_js . '>Valider</button></a></p>';
+                    $delete_article = '<p id="delete-' . $id . '"><a href="#"><button ' . $delete_js . '"><img class="action_icon" src="assets/delete-bin.svg" ' . $delete_js . '>Retirer<br>la publication</button></a></p>' . "\n";
+
+                    $admin_buttons = $delete_article;
                 }
                 else{
                     $modify_article = '<p id="edit-' . $id . '"></p>' . "\n";
@@ -81,8 +117,10 @@ class NewBuilder extends AbstractBuilder
                     $submit_article = '<p id="submit-' . $id . '" class="hidden"></p>';
 
                     $submit_article = '<p id="submit-' . $id . '" class="hidden"></p>';
+
+                    $admin_buttons = $modify_article . $up_button . $down_button . $delete_article . $close_editor . $submit_article;
                 }
-                $admin_buttons = $modify_article . $up_button . $down_button . $delete_article . $close_editor . $submit_article;
+                
             }
 
             ob_start();
diff --git a/src/view/templates/article.php b/src/view/templates/article.php
index d34697e..f3ab32f 100644
--- a/src/view/templates/article.php
+++ b/src/view/templates/article.php
@@ -1,7 +1,6 @@
 <article>
     <div class="article_content">
         <div class="article_title_zone">
-            <h4><?= $title ?></h4>
             <?= $share_button ?>
         </div>
         <div id="<?= $id ?>" class="html_from_editor">
diff --git a/src/view/templates/new.php b/src/view/templates/new.php
index 9dd8969..9515c70 100644
--- a/src/view/templates/new.php
+++ b/src/view/templates/new.php
@@ -1,20 +1,29 @@
 <article>
     <div class="new_content">
         <div class="article_title_zone">
-            <h4><?= $title ?></h4>
             <?= $share_button ?>
+            <div id="<?= $id_title ?>">
+                <?= $title ?>
+            </div>
+            <?= $title_buttons ?>
         </div>
-        <div class="new_content_text">
+        <div id="<?= $id_preview ?>" class="new_content_text">
             <?= $preview ?>
         </div>
+        <?= $preview_buttons ?>
         <div id="<?= $id ?>" class="article_content_text">
             <?= $content ?>
         </div>
+        <?= $article_buttons ?>
         <div class="under_an_article">
-            <p><img src="assets/calendar.svg"><?= $date ?></p>
-            <?= $from_to_button ?>
+            <p>
+                <img src="assets/calendar.svg">
+                <span id="<?= $id_date ?>"><?= $date ?></span>
+            </p>
         </div>
+        <?= $date_buttons ?>
         <div class="article_admin_zone">
+            <?= $from_to_button ?>
             <?= $admin_buttons ?>
         </div>
     </div>