First commit

static/js/controllers/add_form_controller.js

@@ -0,0 +1,28 @@
+import { Controller } from "../vendors/stimulus.js"
+import { sendData } from "../webSocketsCli.js"
+
+export default class extends Controller {
+
+  static targets = [ "author", "text" ]
+
+  /**
+   * Send new message
+   * @param {Event} event
+   * @return {void}
+   */
+  add(event) {
+    event.preventDefault();
+    // Prepare the information we will send
+    const newData = {
+          "action": "add message",
+          "data": {
+              "author": this.authorTarget.value,
+              "text": this.textTarget.value
+          }
+      };
+      // Send the data to the server
+      sendData(newData, window.myWebSocket);
+      // Clear message form
+      this.textTarget.value = "";
+    }
+}

static/js/controllers/message_controller.js

@@ -0,0 +1,116 @@
+import { Controller } from "../vendors/stimulus.js"
+import { sendData } from "../webSocketsCli.js"
+
+export default class extends Controller {
+
+  static targets = [ "item", "paginator" ]
+
+  connect() {
+    this.enableInfiniteScroll();
+  }
+
+    /*
+        FUNCTIONS
+    */
+
+    /**
+     * Switches to the next page when the last message is displayed.
+     */
+    enableInfiniteScroll() {
+        const lastMessage = this.itemTargets.at(-1);
+        // Turn the page when the last message is displayed.
+        const observerLastMessage = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    if (!this.isLastPage()) this.goToNextPage();
+                }
+            });
+        });
+
+        observerLastMessage.observe(lastMessage);
+    }
+
+
+    /**
+     * Get current page stored in #paginator as dataset
+     * @returns {number}
+     */
+    getCurrentPage() {
+        return parseInt(this.paginatorTarget.dataset.page);
+    }
+
+    /**
+     * Check if we are on the last page
+     * @returns {boolean}
+     */
+    isLastPage() {
+        return parseInt(this.paginatorTarget.dataset.totalPages) === this.getCurrentPage();
+    }
+
+
+    /**
+     * Switch to the next page
+     * @param {Event} event
+     * @return {void}
+     */
+    goToNextPage(event) {
+        // Prepare the information we will send
+        const newData = {
+            "action": "list messages",
+            "data": {
+                "page": this.getCurrentPage() + 1,
+            }
+        };
+        // Send the data to the server
+        sendData(newData, myWebSocket);
+    }
+
+    /**
+     * Displays the update form
+     * @param {Event} event
+     * @return {void}
+     */
+    displayUpdateForm(event) {
+        const message = {
+            "action": "open edit page",
+            "data": {
+                "id": event.target.dataset.id
+            }
+        };
+        sendData(message, window.myWebSocket);
+    }
+
+
+    /**
+     * Update message
+     * @param {Event} event
+     * @return {void}
+     */
+    updateMessage(event) {
+        event.preventDefault();
+        const message = {
+            "action": "update message",
+            "data": {
+                "id": event.target.dataset.id,
+                "author": event.target.querySelector("#message-form__author--update").value,
+                "text": event.target.querySelector("#message-form__text--update").value
+            }
+        };
+        sendData(message, myWebSocket);
+    }
+
+    /**
+     * Delete message
+     * @param {Event} event
+     * @return {void}
+     */
+    deleteMessage(event) {
+        const message = {
+            "action": "delete message",
+            "data": {
+                "id": event.target.dataset.id
+            }
+        };
+        sendData(message, window.myWebSocket);
+    }
+}

static/js/controllers/navbarController.js

@@ -0,0 +1,28 @@
+import { Controller } from "../vendors/stimulus.js"
+import { sendData } from "../webSocketsCli.js"
+
+export default class extends Controller {
+
+  static targets = [ "page" ]
+
+  /**
+   * Send new message
+   * @param {Event} event
+   * @return {void}
+   */
+  add(event) {
+    event.preventDefault();
+    // Prepare the information we will send
+    const newData = {
+          "action": "add message",
+          "data": {
+              "author": this.authorTarget.value,
+              "text": this.textTarget.value
+          }
+      };
+      // Send the data to the server
+      sendData(newData, window.myWebSocket);
+      // Clear message form
+      this.textTarget.value = "";
+    }
+}

static/js/controllers/update_form_controller.js

@@ -0,0 +1,25 @@
+import { Controller } from "../vendors/stimulus.js"
+import { sendData } from "../webSocketsCli.js"
+
+export default class extends Controller {
+
+    static targets = [ "author", "text" ]
+
+     /**
+     * Update message
+     * @param {Event} event
+     * @return {void}
+     */
+    update(event) {
+        event.preventDefault();
+        const message = {
+            "action": "update message",
+            "data": {
+                "id": event.target.dataset.id,
+                "author": this.authorTarget.value,
+                "text": this.textTarget.value
+            }
+        };
+        sendData(message, myWebSocket);
+    }
+}