Serveur

Running

App Files Files Community

Docfile commited on Dec 17, 2024

Commit

7d3fc6f

verified ·

1 Parent(s): 03c61e3

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +97 -187

templates/index.html CHANGED Viewed

@@ -1,198 +1,108 @@
-<!DOCTYPE html>
-<html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Traductions Yipunu</title>
     <style>
-        body {
-            font-family: sans-serif;
-            margin: 20px;
-            background-color: #f4f4f4;
-        }
-        h1 {
-          text-align: center;
-        }
-        .translation-container {
-            background-color: #fff;
-            border: 1px solid #ddd;
-            padding: 15px;
-            margin: 15px 0;
-            border-radius: 8px;
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-start; /* Alignez au début */
-        }
-        .translation-text{
-           flex: 2; /* Prend plus d'espace */
-          padding-right: 20px
-        }
-         .translation-actions {
-            display: flex;
-            flex-direction: column; /* Alignez verticalement */
-        }
-        .translation-actions a, .translation-actions button {
-            display: inline-block;
-            margin: 5px;
-            padding: 8px 12px;
-            background-color: #007bff;
-            color: #fff;
-            text-decoration: none;
-            border-radius: 5px;
-            border: none;
-            cursor: pointer;
-            text-align: center;
-            transition: background-color 0.3s ease;
-        }
-          .translation-actions button {
-            background-color: #28a745;
-        }
-         .translation-actions a:hover, .translation-actions button:hover {
-            background-color: #0056b3;
-        }
-        textarea{
-         margin-top: 10px;
-         border-radius:5px;
-         width: 250px;
-         padding: 8px 12px
-        }
-        .likes-dislikes {
-          font-size: .8em;
-           margin-top: 10px
-        }
-        .feedback-sent{
-           font-size: .8em;
-           margin-top: 10px
-        }
     </style>
 </head>
 <body>
-  <h1>Traductions Yipunu</h1>
-   <div id="translations-container">
-    </div>
-   <script>
-    document.addEventListener('DOMContentLoaded', () => {
-        fetch('/data')
-        .then(response => response.json())
-        .then(data => {
-           const translations = data.translations;
-           const translationsContainer = document.getElementById('translations-container');
-            translations.forEach(translation => {
-                const container = document.createElement('div');
-                container.className = 'translation-container';
-                  const textDiv = document.createElement('div');
-                textDiv.className = 'translation-text'
-                textDiv.innerHTML = `<p><strong>Français:</strong> ${translation.fr}</p>
-                                 <p><strong>Yipunu:</strong> ${translation.yi}</p>
-                                 <p class="likes-dislikes">Likes: <span id="likes-${translation.id}">${translation.likes}</span>  | Dislikes: <span id="dislikes-${translation.id}">${translation.dislikes}</span></p>
-                                `
-                const actionDiv = document.createElement('div');
-                 actionDiv.className = "translation-actions"
-                const likeLink = document.createElement('a');
-                likeLink.href = `/vote/${translation.id}/like`;
-                  likeLink.innerText = 'Like';
-                   likeLink.onclick = async (e) => {
-                         e.preventDefault();
-                       await voteTranslation(translation.id, 'like');
-                    };
-                const dislikeLink = document.createElement('a');
-                dislikeLink.href = `/vote/${translation.id}/dislike`;
-                  dislikeLink.innerText = 'Dislike';
-                   dislikeLink.onclick = async (e) => {
-                      e.preventDefault();
-                     await voteTranslation(translation.id, 'dislike');
-                    };
-                const feedbackForm = document.createElement('form');
-                  feedbackForm.action = `/submit_feedback/${translation.id}`;
-                  feedbackForm.method = 'POST';
-                 const feedbackTextarea = document.createElement('textarea');
-                 feedbackTextarea.name = 'feedback';
-                 feedbackTextarea.placeholder = 'Laisser votre avis';
-                 const feedbackButton = document.createElement('button');
-                  feedbackButton.type = 'submit';
-                   feedbackButton.innerText = 'Envoyer avis';
-                   feedbackForm.appendChild(feedbackTextarea);
-                    feedbackForm.appendChild(feedbackButton);
-                       feedbackForm.addEventListener('submit', async(e)=>{
-                           e.preventDefault();
-                            await submitFeedback(translation.id, feedbackTextarea.value, container);
-                      });
-                    actionDiv.appendChild(likeLink);
-                    actionDiv.appendChild(dislikeLink);
-                    actionDiv.appendChild(feedbackForm);
-                     const feedbackStatus = document.createElement('p');
-                    feedbackStatus.className = 'feedback-sent';
-                    if(translation.feedback_sent){
-                      feedbackStatus.textContent = "Feedback envoyé"
-                    }
-                    actionDiv.appendChild(feedbackStatus);
-                 container.appendChild(textDiv);
-                container.appendChild(actionDiv);
-                translationsContainer.appendChild(container);
-            });
-        })
-           .catch(error => console.error('Error fetching data:', error));
-     });
-    async function voteTranslation(id, action) {
-      try {
-        await fetch(`/vote/${id}/${action}`);
-          const translation = translations.find(t => t.id === id);
-           if(action == "like") {
-              translation.likes += 1
-            document.getElementById(`likes-${id}`).innerText = translation.likes;
-        } else {
-              translation.dislikes += 1
-             document.getElementById(`dislikes-${id}`).innerText = translation.dislikes;
-        }
-      } catch (error) {
-        console.error('Error during vote:', error);
-      }
     }
-     async function submitFeedback(id, feedback, container) {
-            try {
-               const formData = new FormData();
-              formData.append('feedback', feedback);
-             const response = await fetch(`/submit_feedback/${id}`, {
-                    method: 'POST',
-                    body: formData
-                });
-             if (response.ok) {
-                const feedbackSentElement = container.querySelector('.feedback-sent');
-                 if (feedbackSentElement){
-                    feedbackSentElement.textContent = 'Feedback envoyé';
-                 } else {
-                     const newFeedbackSentElement = document.createElement('p');
-                    newFeedbackSentElement.className = "feedback-sent";
-                     newFeedbackSentElement.textContent = 'Feedback envoyé';
-                     container.querySelector('.translation-actions').appendChild(newFeedbackSentElement);
-                 }
-                const translation = translations.find(t => t.id === id);
-               translation.feedback_sent = true
-               } else {
-                 console.error('Error submitting feedback');
-                }
-            } catch (error) {
-                console.error('Error during submitting feedback:', error);
-             }
-        }
 </script>
 </body>
 </html>

+ <!DOCTYPE html>
+<html lang="fr">
 <head>
     <meta charset="UTF-8">
+    <title>Traduction Yipunu</title>
     <style>
+        body { font-family: sans-serif; margin: 20px;}
+        .translation-container {border: 1px solid #eee; padding: 15px; margin: 15px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center;}
+        .translation-container p { margin-bottom: 5px; }
+        .vote-buttons { display: flex; gap: 10px;}
+        .vote-buttons button { padding: 8px 15px; border: none; border-radius: 5px; cursor: pointer; background-color: #4CAF50; color: white;}
+        .vote-buttons button:hover { opacity: 0.8; }
+        .vote-buttons button.dislike {background-color: #f44336;}
+        .feedback-form { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
+         .feedback-form textarea { padding: 10px; border-radius: 5px; border: 1px solid #ddd; }
+        .feedback-form button { padding: 8px 15px; border: none; border-radius: 5px; cursor: pointer; background-color: #2196F3; color: white;}
+       .feedback-form button:hover {opacity: 0.8;}
+        .feedback-sent { color: green; font-style: italic; }
     </style>
 </head>
 <body>
+    <h1>Traductions Yipunu</h1>
+    {% for translation in translations %}
+        <div class="translation-container">
+            <div>
+                <p><strong>Français:</strong> {{ translation.fr }}</p>
+                <p><strong>Yipunu:</strong> {{ translation.yi }}</p>
+                <p>
+                    Likes: {{ translation.likes }} | Dislikes: {{ translation.dislikes }}
+                </p>
+            </div>
+            <div>
+                 <div class="vote-buttons">
+                    <button onclick="handleVote({{ translation.id }}, 'like')">👍 Like</button>
+                    <button onclick="handleVote({{ translation.id }}, 'dislike')" class="dislike">👎 Dislike</button>
+                 </div>
+                 {% if not translation.feedback_sent %}
+                   <form class="feedback-form" onsubmit="submitFeedback({{ translation.id }}); return false;">
+                     <textarea name="feedback" id="feedback-{{translation.id}}" placeholder="Laissez votre avis"></textarea>
+                     <button type="submit">Envoyer avis</button>
+                     </form>
+                 {% else %}
+                   <p class="feedback-sent">Feedback envoyé</p>
+                 {% endif %}
+            </div>
+        </div>
+    {% endfor %}
+<script>
+    const BOT_TOKEN = "7126991043:AAEzeKswNo6eO7oJA49Hxn_bsbzgzUoJ-6A";
+    const CHAT_ID = "-1002081124539";
+    function handleVote(id, action) {
+        fetch(`/vote/${id}/${action}`)
+          .then(response => {
+            if (response.ok) {
+                  window.location.reload()
+            }
+          });
     }
+    function submitFeedback(id) {
+        const feedbackTextarea = document.getElementById('feedback-' + id);
+        const feedback = feedbackTextarea.value;
+        const url = `/submit_feedback/${id}`;
+         const message = `Feedback sur la traduction #${id}:\n\n` +
+                      `Français: ${document.querySelector('.translation-container:nth-child('+(id+1)+') p:first-child').textContent.replace('Français: ','')}\n\n`+
+                      `Yipunu: ${document.querySelector('.translation-container:nth-child('+(id+1)+') p:nth-child(2)').textContent.replace('Yipunu: ','')}\n\n`+
+                      `Avis de l'utilisateur:\n${feedback}`;
+        fetch(url,{
+        method: "POST",
+        body: new URLSearchParams({
+            "feedback": message
+            })
+        }).then(response => {
+            if (response.ok) {
+                fetch(`/vote/${id}/submit`).then(r=> {
+                   if(r.ok) {
+                    window.location.reload()
+                   }
+                  });
+            }
+        });
+        const telegramApiUrl = `https://api.telegram.org/bot${BOT_TOKEN}/sendMessage`;
+        fetch(telegramApiUrl, {
+            method: "POST",
+             headers: {
+                "Content-Type": "application/json"
+             },
+            body: JSON.stringify({
+              chat_id: CHAT_ID,
+              text: message,
+              parse_mode: "HTML"
+            })
+         })
+         .then(response => {
+            if(!response.ok){
+             console.log('erreur',response);
+            }
+         })
+       feedbackTextarea.value = '';
+    }
 </script>
 </body>
 </html>