Serveur

Runtime error

App Files Files Community

Docfile commited on Dec 17, 2024

Commit

03c61e3

verified ·

1 Parent(s): ef4e324

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +186 -31

templates/index.html CHANGED Viewed

@@ -1,43 +1,198 @@
- <!DOCTYPE html>
-<html>
 <head>
-    <title>Traduction Yipunu</title>
     <style>
         .translation-container {
             border: 1px solid #ddd;
-            padding: 10px;
-            margin: 10px;
             display: flex;
             justify-content: space-between;
-            align-items: center;
         }
     </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>
-                 <a href="{{ url_for('vote', id=translation.id, action='like') }}">Like</a>
-                <a href="{{ url_for('vote', id=translation.id, action='dislike') }}">Dislike</a>
-                 {% if not translation.feedback_sent %}
-                    <form action="{{ url_for('submit_feedback', id=translation.id) }}" method="POST">
-                         <textarea name="feedback" placeholder="Laissez votre avis"></textarea>
-                         <button type="submit">Envoyer avis</button>
-                     </form>
-                    {% else %}
-                      <p>Feedback envoyé</p>
-                    {% endif %}
-             </div>
-        </div>
-    {% endfor %}
 </body>
 </html>

+<!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>