diff --git a/.gitignore b/.gitignore index 8186e8d..0a305ea 100644 --- a/.gitignore +++ b/.gitignore @@ -39,3 +39,6 @@ build/ ### Database files ### *.db *.mv.db + +### Log files ### +data/maradona/dbfile.mv.db diff --git a/src/main/resources/config/application.yaml b/src/main/resources/config/application.yaml index ae2e076..1c11ed0 100644 --- a/src/main/resources/config/application.yaml +++ b/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 diff --git a/src/main/resources/static/css/core/alerts.css b/src/main/resources/static/css/core/alerts.css new file mode 100644 index 0000000..86992c9 --- /dev/null +++ b/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; +} diff --git a/src/main/resources/static/css/skills/skills.css b/src/main/resources/static/css/skills/skills.css index 4ff712b..1ef0b6b 100644 --- a/src/main/resources/static/css/skills/skills.css +++ b/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; -} diff --git a/src/main/resources/static/css/skills/starRating.css b/src/main/resources/static/css/skills/starRating.css new file mode 100644 index 0000000..c6d23c5 --- /dev/null +++ b/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; + } +} diff --git a/src/main/resources/static/js/skills/fetchSecondarySkills.js b/src/main/resources/static/js/skills/fetchSecondarySkills.js index 57d786d..2b30f59 100644 --- a/src/main/resources/static/js/skills/fetchSecondarySkills.js +++ b/src/main/resources/static/js/skills/fetchSecondarySkills.js @@ -1,18 +1,175 @@ -document.getElementById("primarySkill").addEventListener("change", function () { - var primarySkillId = this.value; - fetch("/skills/secondary-skills?primarySkillId=" + primarySkillId) - .then((response) => response.json()) - .then((data) => { - console.log("Fetch response data:", data); - var secondarySkillSelect = document.getElementById("secondarySkill"); - secondarySkillSelect.innerHTML = - ''; - data.forEach(function (secondarySkill) { - var option = document.createElement("option"); - option.value = secondarySkill.ssid; - option.text = secondarySkill.description; - secondarySkillSelect.add(option); - }); - }) - .catch((error) => console.error("Error fetching secondary skills:", error)); -}); +/** + * @fileoverview Handles the dynamic population of secondary skills dropdown based on primary skill selection + * @version 4.1.0 + */ + +/** + * @typedef {Object} SecondarySkill + * @property {number} ssid - The secondary skill ID + * @property {string} description - The description of the secondary skill + */ + +/** + * Creates and returns an option element for the select dropdown + * @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 + * @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); diff --git a/src/main/resources/static/js/skills/starRating.js b/src/main/resources/static/js/skills/starRating.js new file mode 100644 index 0000000..f847bed --- /dev/null +++ b/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"); + } +}); diff --git a/src/main/resources/templates/pages/skills/add.html b/src/main/resources/templates/pages/skills/add.html index cd08989..1b4088b 100644 --- a/src/main/resources/templates/pages/skills/add.html +++ b/src/main/resources/templates/pages/skills/add.html @@ -1,16 +1,22 @@ -
+ Add Skill + + +
-
+

Add Skill

-
@@ -54,25 +59,52 @@
- - +
- - - - - + value="1" + />
-
@@ -81,5 +113,6 @@
+ diff --git a/src/main/resources/templates/pages/skills/create.html b/src/main/resources/templates/pages/skills/create.html index 13a5716..62ebf2a 100644 --- a/src/main/resources/templates/pages/skills/create.html +++ b/src/main/resources/templates/pages/skills/create.html @@ -1,7 +1,7 @@ -
+ Create Skill