Compare revisions

Louis Becker · Louis Becker · e3b05121 · e3b05121 · e3b05121 · e3b05121
--- a/.replit
+++ b/.replit
+hidden=[".config"]
+modules = ["nodejs-20"]
+
+# hosting is currently hardcoded for this language
+# [hosting]
+# route = "/"
+# directory= "/"
+
+[nix]
+channel = "stable-21_11"
+
+[gitHubImport]
+requiredFiles = [".replit", "replit.nix", ".config"]
+
+[languages]
+
+[languages.javascript]
+pattern = "**/{*.js,*.jsx,*.ts,*.tsx,*.mjs,*.cjs}"
+
+[languages.javascript.languageServer]
+start = "typescript-language-server --stdio"
+
+[languages.css]
+pattern = "**/{*.less,*.scss,*.css}"
+
+[languages.css.languageServer]
+start = "vscode-css-language-server --stdio"
+
+[languages.html]
+pattern = "**/*.html"
+
+[languages.html.languageServer]
+start = "vscode-html-language-server --stdio"
+[languages.html.languageServer.initializationOptions]
+provideFormatter = true
--- a/index.html
+++ b/index.html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>repl.it</title>
+    <link href="style.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <!-- Bandeau de titre -->
+    <header>
+      <h1>Message Board</h1>
+      <button id="toggle-theme">Mode Sombre</button>
+    </header>
+
+    <!-- Configuration du serveur -->
+    <section id="server-config">
+        <h2>Configurer le micro-service</h2>
+        <input type="text" id="server-url" placeholder="Entrez l'URL du micro-service" />
+        <button id="save-server-url">Enregistrer</button>
+        <p id="server-status" class="hidden">URL mise à jour ✔️</p>
+    </section>
+
+    <!-- Liste de 5 messages -->
+    <section id="messages">
+      <h2>Messages</h2>
+      <ul id="message-list">
+        <li>Hello! Welcome to our message board!</li>
+        <li>I'm a message!</li>
+        <li>I'm a message!</li>
+        <li>I'm a message!</li>
+        <li>I'm a message!</li>
+      </ul>
+      <button id="update-button">Mettre à jour</button>
+      <p id="update-status" class="hidden">Mise à jour effectuée </p> 
+    </section>
+    <!-- Formulaire pour nouveaux messages -->
+    <section id="new-message">
+      <h2>Post a new message</h2>
+      <input type="text" id="pseudo-input" placeholder="Your name" />
+      <textarea id="message-input" placeholder="Write your message here...">
+      </textarea>
+      <button id="send-button">Send</button>
+      <p>I am so empty...</p>
+    </section>
+  </body>
+  <script src="script.js"></script>
+</html>
--- a/replit.nix
+++ b/replit.nix
+{ pkgs }: {
+    deps = [
+      pkgs.nodePackages.vscode-langservers-extracted
+      pkgs.nodePackages.typescript-language-server
+    ];
+  }
\ No newline at end of file
--- a/script.js
+++ b/script.js
+// Fonction fact et applique (non modifiées)
+function fact(n) {
+  return (n === 0 || n === 1) ? 1 : n * fact(n - 1);
+}
+
+console.log(fact(6));
+
+function applique(f, tab) {
+  return tab.map(f);
+}
+
+console.log(applique(fact, [1,2,3,4,5,6]));
+console.log(applique(n => n + 1, [1,2,3,4,5,6]));
+
+
+/* ---- Frontend ----  */
+
+// Récupération de l'URL du serveur depuis localStorage ou valeur par défaut
+let serverUrl = localStorage.getItem("serverUrl") || "https://088d31aa-9783-4fb6-beda-384447760bc3-00-2ysjlhn94291i.janeway.replit.dev";
+
+// Met à jour le champ input avec l'URL actuelle
+document.getElementById("server-url").value = serverUrl;
+
+// Fonction pour enregistrer une nouvelle URL du serveur
+document.getElementById("save-server-url").addEventListener("click", function () {
+  let newUrl = document.getElementById("server-url").value.trim();
+  if (newUrl !== "") {
+    serverUrl = newUrl;
+    localStorage.setItem("serverUrl", serverUrl);
+    let status = document.getElementById("server-status");
+    status.classList.add("show");
+    setTimeout(() => {
+      status.classList.remove("show");
+    }, 3000);
+  }
+});
+
+// Fonction pour mettre à jour l'affichage des messages depuis le serveur
+function update() {
+  console.log("Mise à jour des messages demandée depuis :", serverUrl);
+
+  fetch(`${serverUrl}/msg/getAll`)
+    .then(response => response.json())
+    .then(data => {
+      console.log("Messages récupérés :", data);
+      let ul = document.getElementById("message-list");
+      ul.innerHTML = ""; // Efface les anciens messages
+
+      data.forEach((message) => {
+        let li = document.createElement("li");
+        li.innerHTML = `<strong>${message.pseudo}</strong>: ${message.msg} <br><small>${message.date}</small>`;
+        ul.appendChild(li);
+      });
+
+      // Affiche le message de mise à jour
+      let updateStatus = document.getElementById("update-status");
+      updateStatus.textContent = "✔️ Mise à jour effectuée";
+      updateStatus.style.color = "green";
+      updateStatus.classList.add("show");
+
+      // Retire la classe "show" après 3 secondes pour cacher le message
+      setTimeout(() => {
+        updateStatus.classList.remove("show");
+      }, 3000);
+    })
+    .catch(error => {
+      console.error("Erreur lors de la récupération des messages :", error);
+      let updateStatus = document.getElementById("update-status");
+      updateStatus.textContent = "❌ Erreur lors de la mise à jour !";
+      updateStatus.style.color = "red";
+      updateStatus.classList.add("show");
+
+      setTimeout(() => {
+        updateStatus.classList.remove("show");
+      }, 3000);
+    });
+}
+
+// Fonction pour envoyer un nouveau message avec pseudo
+document.getElementById("send-button").addEventListener("click", function() {
+  let pseudoInput = document.getElementById("pseudo-input").value.trim();
+  let messageInput = document.getElementById("message-input").value.trim();
+
+  if (pseudoInput === "" || messageInput === "") {
+    alert("Veuillez remplir tous les champs !");
+    return;
+  }
+
+  let pseudoEncoded = encodeURIComponent(pseudoInput);
+  let messageEncoded = encodeURIComponent(messageInput);
+
+  fetch(`${serverUrl}/msg/post/${pseudoEncoded}/${messageEncoded}`)
+    .then(response => response.json())
+    .then(data => {
+      if (data.code === 1) {
+        console.log("Message ajouté avec succès !");
+        document.getElementById("pseudo-input").value = "";
+        document.getElementById("message-input").value = "";
+        update(); // Mise à jour après ajout
+      } else {
+        console.error("Erreur lors de l'ajout du message !");
+      }
+    })
+    .catch(error => console.error("Erreur lors de l'envoi du message :", error));
+});
+
+// Bouton "Mettre à jour" pour rafraîchir les messages
+document.getElementById("update-button").addEventListener("click", function() {
+  update();
+});
+
+// Fonction pour basculer en mode sombre
+document.getElementById("toggle-theme").addEventListener("click", function() {
+  document.body.classList.toggle("dark-mode");
+  this.textContent = document.body.classList.contains("dark-mode") ? "Mode Clair" : "Mode Sombre";
+});
+
+// Charger les messages au démarrage
+document.addEventListener("DOMContentLoaded", function() {
+  update();
+});
--- a/style.css
+++ b/style.css
+/* Styles généraux */
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f8f9fa;
+  color: #333;
+  text-align: center;
+}
+
+/* Bandeau de titre */
+header {
+  background-color: #3498db; /* Bleu */
+  color: white;
+  text-align: center;
+  padding: 15px 0;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+#toggle-theme {
+  background-color: #34495e;
+  color: white;
+  padding: 10px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+#toggle-theme:hover {
+  background-color: #2c3e50;
+}
+
+/* Configuration du serveur */
+#server-config {
+    width: 80%;
+    margin: 20px auto;
+    padding: 15px;
+    background-color: #ecf0f1;
+    border-radius: 8px;
+    text-align: center;
+}
+
+#server-url {
+    width: 70%;
+    padding: 10px;
+    margin: 10px 0;
+    border: 1px solid #bdc3c7;
+    border-radius: 5px;
+    font-size: 16px;
+}
+
+#save-server-url {
+    background-color: #f39c12;
+    color: white;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+#save-server-url:hover {
+    background-color: #e67e22;
+}
+
+/* Section des messages */
+#messages {
+  width: 80%;
+  margin: 20px auto;
+  padding: 15px;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+#messages h2 {
+  text-align: center;
+  color: #2c3e50;
+}
+
+#messages ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+#messages li {
+  background: #ffffff;
+  margin: 10px 0;
+  padding: 12px;
+  border-radius: 5px;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+#messages li strong {
+  color: #3498db;
+}
+
+#messages li small {
+  display: block;
+  color: #777;
+  margin-top: 5px;
+}
+
+#update-button {
+  background-color: #2ecc71;
+  color: white;
+  padding: 10px;
+  border: none;
+  border-radius: 5px;
+  font-size: 16px;
+  cursor: pointer;
+  margin-top: 15px;
+}
+
+#update-button:hover {
+  background-color: #27ae60;
+}
+
+/* Information sur le statu de mis à jour */
+#update-status {
+  color: green;
+  font-size: 14px;
+  margin-top: 10px;
+  display: none;
+}
+
+#update-status.show {
+  display: block;
+  animation: fadeOut 3s ease-in-out forwards;
+}
+
+@keyframes fadeOut {
+  0% { opacity: 1; }
+  50% { opacity: 0.7; }
+  100% { opacity: 0; }
+}
+
+/* Formulaire d'ajout de message */
+#new-message {
+  width: 80%;
+  margin: 20px auto;
+  padding: 15px;
+  background-color: #ecf0f1;
+  border-radius: 8px;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+#pseudo-input,
+#message-input {
+  width: 90%;
+  padding: 10px;
+  margin: 10px 0;
+  border: 1px solid #bdc3c7;
+  border-radius: 5px;
+  font-size: 16px;
+}
+
+#message-input {
+  height: 100px;
+  resize: none;
+}
+
+#send-button {
+  background-color: #3498db;
+  color: white;
+  padding: 10px 15px;
+  border: none;
+  border-radius: 5px;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+#send-button:hover {
+  background-color: #2980b9;
+}
+
+/* Mode sombre */
+.dark-mode {
+  background-color: #2c3e50;
+  color: white;
+}
+
+.dark-mode header {
+  background-color: #1a252f;
+}
+
+.dark-mode #messages,
+.dark-mode #new-message {
+  background-color: #34495e;
+  color: white;
+}
+
+.dark-mode #messages li {
+  background-color: #2c3e50;
+  color: white;
+}
+
+.dark-mode button {
+  background-color: #555;
+  color: white;
+}
\ No newline at end of file
No results found