Merge pull request 'gui: Add star-rating & alerts, meta tag, change fetchSeconarySkills.js, correct thymeleaf template' (#84) from 2021323/Backend:restfull into restfull

Reviewed-on: Maradona/Backend#84

.gitignore

@@ -39,3 +39,6 @@ build/
 ### Database files ###
 *.db
 *.mv.db
+
+### Log files ###
+data/maradona/dbfile.mv.db

src/main/resources/config/application.yaml

@@ -26,7 +26,7 @@ spring:
     prefix: "classpath:/templates/" # Path where Thymeleaf templates are stored
     suffix: ".html" # File extension for Thymeleaf templates
     cache: false # Disable caching for development (set to true in production)
-    mode: "HTML5" # Template mode; Thymeleaf parses the templates as HTML5
+    mode: "HTML" # Template mode; Thymeleaf parses the templates as HTML5
     encoding: "UTF-8" # Character encoding for the templates
     servlet:
       content-type: "text/html" # Content type for the Thymeleaf-rendered HTML responses

src/main/resources/static/css/core/alerts.css

@@ -0,0 +1,57 @@
+.alert {
+  padding: 15px;
+  margin-top: 10px;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--cosmic-dark-darker);
+  display: inline-block;
+  max-width: 100%;
+  animation: fadeInOut 5s ease-in-out;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.alert.show {
+  opacity: 1;
+}
+
+/* Alert types */
+.alert-info {
+  background-color: #17a2b8;
+  border: 1px solid #17a2b8;
+}
+
+.alert-error {
+  background-color: var(--aurora-yellowgreen-lighter);
+  border: 1px solid var(--aurora-yellowgreen-lighter);
+}
+
+.alert-success {
+  background-color: #28a745;
+  border: 1px solid #28a745;
+}
+
+/* Fade animation */
+@keyframes fadeInOut {
+  0%,
+  100% {
+    opacity: 0;
+  }
+  10%,
+  90% {
+    opacity: 1;
+  }
+}
+
+/* Additional styling for improved visibility */
+.alert-icon {
+  margin-right: 8px;
+  font-size: 16px;
+  vertical-align: middle;
+}
+
+/* Additional spacing */
+.mt-2 {
+  margin-top: 10px;
+}

src/main/resources/static/css/skills/skills.css

@@ -65,11 +65,3 @@
 .form-control::placeholder {
   color: var(--cosmic-dark-dark);
 }
-
-.star-filled {
-  color: var(--aurora-yellowgreen-lighter);
-}
-
-.star-empty {
-  color: var(--cosmic-dark-light) !important;
-}

src/main/resources/static/css/skills/starRating.css

@@ -0,0 +1,85 @@
+.star-rating-container {
+  display: inline-block;
+  position: relative;
+  min-width: 300px;
+}
+
+.star-rating {
+  display: inline-block;
+}
+
+.star {
+  font-size: 24px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.star i {
+  color: transparent;
+  -webkit-text-stroke: 1.5px var(--aurora-yellowgreen-lighter);
+}
+
+.star.active i {
+  color: var(--aurora-yellowgreen-lighter);
+  -webkit-text-stroke: 1px var(--aurora-yellowgreen-lighter);
+}
+
+.star:hover i {
+  color: var(--aurora-yellowgreen-lighter);
+  -webkit-text-stroke: 1px var(--aurora-yellowgreen-lighter);
+}
+
+.rating-description {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: 300px;
+  width: max-content;
+  max-width: 400px;
+  margin-top: 8px;
+  padding: 10px 15px;
+  background-color: var(--starlight-white-lighter);
+  border: 1px solid var(--starlight-white-dark);
+  border-radius: 4px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--cosmic-dark-medium);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s, visibility 0.2s;
+  z-index: 1000;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.rating-description.visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+.star + .star {
+  margin-left: 4px;
+}
+
+.form-group label + .star-rating-container {
+  margin-left: 8px;
+  margin-bottom: 40px;
+}
+
+.form-group input[type="hidden"] {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .rating-description {
+    position: relative;
+    width: 100%;
+    max-width: none;
+    margin-top: 8px;
+  }
+
+  .form-group label + .star-rating-container {
+    margin-left: 0;
+    display: block;
+    margin-top: 8px;
+  }
+}

src/main/resources/static/js/skills/fetchSecondarySkills.js

@@ -1,18 +1,175 @@
-document.getElementById("primarySkill").addEventListener("change", function () {
+/**
-  var primarySkillId = this.value;
+ * @fileoverview Handles the dynamic population of secondary skills dropdown based on primary skill selection
-  fetch("/skills/secondary-skills?primarySkillId=" + primarySkillId)
+ * @version 4.1.0
-    .then((response) => response.json())
+ */
-    .then((data) => {
+
-      console.log("Fetch response data:", data);
+/**
-      var secondarySkillSelect = document.getElementById("secondarySkill");
+ * @typedef {Object} SecondarySkill
-      secondarySkillSelect.innerHTML =
+ * @property {number} ssid - The secondary skill ID
-        '<option value="" disabled selected>Select a secondary skill</option>';
+ * @property {string} description - The description of the secondary skill
-      data.forEach(function (secondarySkill) {
+ */
-        var option = document.createElement("option");
+
-        option.value = secondarySkill.ssid;
+/**
-        option.text = secondarySkill.description;
+ * Creates and returns an option element for the select dropdown
-        secondarySkillSelect.add(option);
+ * @param {string} text - The text to display in the option
-      });
+ * @param {boolean} [disabled=false] - Whether the option should be disabled
-    })
+ * @param {boolean} [selected=false] - Whether the option should be selected
-    .catch((error) => console.error("Error fetching secondary skills:", error));
+ * @param {string|number} [value=""] - The value for the option
-});
+ * @returns {HTMLOptionElement} The created option element
+ */
+function createOption(text, disabled = false, selected = false, value = "") {
+  const option = document.createElement("option");
+  option.textContent = text;
+  option.disabled = disabled;
+  option.selected = selected;
+  option.value = value;
+  return option;
+}
+
+/**
+ * Shows a temporary message below the secondary skills dropdown
+ * @param {string} message - The message to display
+ * @param {string} type - The type of alert (info, error, success, etc.)
+ * @param {number} [duration=5000] - How long to show the message in milliseconds
+ * @param {HTMLElement} container - The element to append the message to
+ */
+function showTemporaryMessage(message, type, duration = 5000, container) {
+  const messageElement = document.createElement("div");
+  messageElement.className = `alert alert-${type} mt-2`;
+  messageElement.textContent = message;
+  container.appendChild(messageElement);
+
+  setTimeout(() => {
+    messageElement.classList.add("show");
+  }, 10);
+
+  setTimeout(() => {
+    messageElement.classList.remove("show");
+    setTimeout(() => {
+      if (messageElement.parentNode) {
+        messageElement.parentNode.removeChild(messageElement);
+      }
+    });
+  }, duration);
+}
+
+/**
+ * Updates the secondary skills dropdown based on the API response
+ * @param {SecondarySkill[]} secondarySkills - Array of secondary skills from the API
+ * @param {HTMLSelectElement} selectElement - The secondary skills select element
+ */
+function updateSecondarySkillsDropdown(secondarySkills, selectElement) {
+  selectElement.innerHTML = ""; // Clear existing options
+
+  if (!secondarySkills || secondarySkills.length === 0) {
+    selectElement.appendChild(
+      createOption("No secondary skills available", true, true)
+    );
+    selectElement.disabled = true;
+
+    showTemporaryMessage(
+      "There are no secondary skills available for this primary skill. Please contact an administrator to add some.",
+      "info",
+      5000,
+      selectElement.parentNode
+    );
+    return;
+  }
+
+  selectElement.appendChild(
+    createOption("Select a secondary skill", true, true)
+  );
+
+  secondarySkills.forEach((skill) => {
+    selectElement.appendChild(
+      createOption(skill.description, false, false, skill.ssid)
+    );
+  });
+
+  selectElement.disabled = false;
+}
+
+/**
+ * Initializes the event listeners and handlers for the skills dropdowns
+ * This is the main function that sets up all the functionality
+ */
+function initializeSkillsDropdowns() {
+  const primarySkillSelect = document.getElementById("primarySkill");
+  const secondarySkillSelect = document.getElementById("secondarySkill");
+
+  if (!primarySkillSelect || !secondarySkillSelect) {
+    console.error("Required select elements not found");
+    return;
+  }
+
+  secondarySkillSelect.disabled = true;
+
+  primarySkillSelect.addEventListener("change", async function () {
+    const selectedPrimarySkillId = this.value;
+    secondarySkillSelect.innerHTML = "";
+    secondarySkillSelect.appendChild(
+      createOption("Select a secondary skill", true, true)
+    );
+
+    if (!selectedPrimarySkillId) {
+      secondarySkillSelect.disabled = true;
+      return;
+    }
+
+    secondarySkillSelect.innerHTML = "";
+    secondarySkillSelect.appendChild(createOption("Loading...", true, true));
+
+    try {
+      const response = await fetch(
+        `/api/skills/secondary/${selectedPrimarySkillId}`,
+        {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      );
+
+      if (!response.ok) {
+        const errorMessage = `Server returned ${response.status}: ${response.statusText}`;
+        throw new Error(errorMessage);
+      }
+
+      const secondarySkills = await response.json();
+      updateSecondarySkillsDropdown(secondarySkills, secondarySkillSelect);
+    } catch (error) {
+      console.error("Error fetching secondary skills:", error);
+      secondarySkillSelect.innerHTML = "";
+      secondarySkillSelect.appendChild(
+        createOption("Error loading secondary skills", true, true)
+      );
+      secondarySkillSelect.disabled = true;
+
+      let userMessage = "";
+      if (error.name === "TypeError" && !window.navigator.onLine) {
+        userMessage =
+          "No internet connection. Please check your network and try again.";
+      } else if (error.message.includes("Server returned 404")) {
+        userMessage =
+          "The selected primary skill was not found. Please refresh and try again.";
+      } else if (error.message.includes("Server returned 500")) {
+        userMessage =
+          "Server error occurred. Please try again in a few minutes.";
+      } else if (error.message.includes("Server returned 403")) {
+        userMessage =
+          "You don't have permission to access these skills. Please contact support.";
+      } else {
+        userMessage = `Failed to load secondary skills: ${error.message}`;
+      }
+
+      showTemporaryMessage(
+        userMessage,
+        "error",
+        5000,
+        secondarySkillSelect.parentNode
+      );
+    }
+  });
+}
+
+document.addEventListener("DOMContentLoaded", initializeSkillsDropdowns);

src/main/resources/static/js/skills/starRating.js

@@ -0,0 +1,103 @@
+/***
+ * @fileoverview Star Rating Component - Initializes and manages an interactive star rating system
+ *               with hover effects, click handling, and dynamic descriptions.
+ * @version 2.2.0
+ */
+document.addEventListener("DOMContentLoaded", function () {
+  const stars = document.querySelectorAll(".star");
+  const ratingInput = document.getElementById("level");
+  const descriptionElement = document.querySelector(".rating-description");
+  const initialValue = parseInt(ratingInput.value) || 0;
+  updateStars(initialValue);
+
+  stars.forEach((star) => {
+    /**
+     * Handle click events on stars
+     * Updates the rating value and displays the corresponding description
+     */
+    star.addEventListener("click", function () {
+      const value = parseInt(this.dataset.value);
+      ratingInput.value = value;
+      updateStars(value);
+      showDescription(this.dataset.description);
+    });
+
+    /**
+     * Handle mouseenter events on stars
+     * Temporarily highlights stars and shows description on hover
+     */
+    star.addEventListener("mouseenter", function () {
+      const value = parseInt(this.dataset.value);
+      highlightStars(value);
+      showDescription(this.dataset.description);
+    });
+  });
+
+  /**
+   * Handle mouseleave events on the entire star rating container
+   * Resets the display to the current selected rating
+   */
+  document
+    .querySelector(".star-rating")
+    .addEventListener("mouseleave", function () {
+      const currentValue = parseInt(ratingInput.value) || 0;
+      updateStars(currentValue);
+      if (currentValue > 0) {
+        const selectedStar = document.querySelector(
+          `.star[data-value="${currentValue}"]`
+        );
+        showDescription(selectedStar.dataset.description);
+      } else {
+        hideDescription();
+      }
+    });
+
+  /**
+   * Updates the visual state of stars based on a value
+   * @param {number} value - The rating value to display (1-5)
+   */
+  function updateStars(value) {
+    stars.forEach((star) => {
+      const starValue = parseInt(star.dataset.value);
+      if (starValue <= value) {
+        star.classList.add("active");
+      } else {
+        star.classList.remove("active");
+      }
+    });
+  }
+
+  /**
+   * Temporarily highlights stars up to a specific value
+   * Used for hover effects
+   * @param {number} value - The rating value to highlight (1-5)
+   */
+  function highlightStars(value) {
+    stars.forEach((star) => {
+      const starValue = parseInt(star.dataset.value);
+      if (starValue <= value) {
+        star.classList.add("active");
+      } else {
+        star.classList.remove("active");
+      }
+    });
+  }
+
+  /**
+   * Displays a description for the current rating
+   * @param {string} description - The description text to display
+   */
+  function showDescription(description) {
+    if (description) {
+      descriptionElement.textContent = description;
+      descriptionElement.classList.add("visible");
+    }
+  }
+
+  /**
+   * Hides the rating description
+   */
+  function hideDescription() {
+    descriptionElement.classList.remove("visible");
+  }
+});

src/main/resources/templates/pages/skills/add.html

@@ -1,16 +1,22 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
   <head>
-    <div th:replace="~{/core/_metadata :: metadata}"></div>
+    <meta th:replace="~{/core/_metadata :: metadata}" />
     <title>Add Skill</title>
     <link rel="stylesheet" href="/css/skills/skills.css" />
     <link rel="stylesheet" href="/css/core/style.css" />
     <link rel="stylesheet" href="/css/core/header.css" />
     <link rel="stylesheet" href="/css/core/footer.css" />
+    <link rel="stylesheet" href="/css/skills/starRating.css" />
+    <link rel="stylesheet" href="/css/core/alerts.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
+    />
   </head>
   <body>
     <div class="wrapper">
-      <div th:replace="~{/core/_header :: header(activePage=${skills})}"></div>
+      <div th:replace="~{/core/_header :: header(activePage='skills')}"></div>
       <div class="content container mt-4">
         <h2 class="mb-4">Add Skill</h2>
         <form
@@ -39,7 +45,6 @@
                 ></option>
               </select>
             </div>
-
             <!-- Secondary Skill Dropdown -->
             <div class="form-group">
               <label for="secondarySkill">Secondary Skill</label>
@@ -54,25 +59,52 @@
                 </option>
               </select>
             </div>
-
+            <!-- Star Rating System -->
-            <!-- Skill Level Dropdown -->
             <div class="form-group">
-              <label for="level">Level</label>
+              <label for="level">Skill Level</label>
-              <select
+              <div class="star-rating-container">
+                <div class="star-rating">
+                  <span
+                    class="star"
+                    data-value="1"
+                    data-description="Beginner - Basic knowledge and limited experience"
+                    ><i class="fas fa-star"></i
+                  ></span>
+                  <span
+                    class="star"
+                    data-value="2"
+                    data-description="Elementary - Can handle simple tasks with guidance"
+                    ><i class="fas fa-star"></i
+                  ></span>
+                  <span
+                    class="star"
+                    data-value="3"
+                    data-description="Intermediate - Independent work on most tasks"
+                    ><i class="fas fa-star"></i
+                  ></span>
+                  <span
+                    class="star"
+                    data-value="4"
+                    data-description="Advanced - Deep knowledge and extensive experience"
+                    ><i class="fas fa-star"></i
+                  ></span>
+                  <span
+                    class="star"
+                    data-value="5"
+                    data-description="Expert - Master level with ability to teach others"
+                    ><i class="fas fa-star"></i
+                  ></span>
+                </div>
+                <div class="rating-description"></div>
+              </div>
+              <input
+                type="hidden"
                 id="level"
                 name="level"
-                class="form-control"
                 th:field="*{level}"
-              >
+                value="1"
-                <option value="" disabled selected>Select skill level</option>
+              />
-                <option
-                  th:each="level : ${#numbers.sequence(1, 5)}"
-                  th:value="${level}"
-                  th:text="${level}"
-                ></option>
-              </select>
             </div>
-
             <!-- Submit Button -->
             <button type="submit" class="btn-create-project">Add Skill</button>
           </div>
@@ -81,5 +113,6 @@
       <div th:replace="~{/core/_footer :: footer}"></div>
     </div>
     <script src="/js/skills/fetchSecondarySkills.js"></script>
+    <script src="/js/skills/starRating.js"></script>
   </body>
 </html>

src/main/resources/templates/pages/skills/create.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
   <head>
-    <div th:replace="~{/core/_metadata :: metadata}"></div>
+    <meta th:replace="~{/core/_metadata :: metadata}"></meta>
     <title>Create Skill</title>
     <link rel="stylesheet" href="/css/skills/skills.css" />
     <link rel="stylesheet" href="/css/core/style.css" />