diff --git a/sprints/04.md b/sprints/04.md
index 71c1efef7a40f3448fc6ac57a15bb9c06d913d32..ff8e0b40b9688ea8b2ad07393b9b0b2c9ccd89e0 100644
--- a/sprints/04.md
+++ b/sprints/04.md
@@ -10,4 +10,26 @@
- Internationalisation
- Ergonomie
- Factorisation du code
-- Réorganiser les vues
\ No newline at end of file
+- Réorganiser les vues
+
+## Revue
+
+- Réglage de bugs
+- Suppression d'occurences d'événements récurrents
+- Amélioration du comportement de la recherche
+- Internationalisation (Français/Anglais)
+- Retravaille de l'ergonomie
+- Factorisation du code
+- Réorganiser les vues
+
+### Ce qui a fonctionné
+
+- Tous les objectifs du sprint ont été atteints
+
+### Ce qui n'a pas fonctionné
+
+- Toujours des problèmes d'ergonomie
+
+### Ce qui sera amélioré
+
+- Rien. La dynamique de l'équipe est bonne
diff --git a/src/package.json b/src/package.json
index 29e0ed2c03cdf3d80c90e67bdcab6b76525bc24f..1da6ec4892b45e360d52279a62d01d714ebae431 100644
--- a/src/package.json
+++ b/src/package.json
@@ -17,6 +17,7 @@
"express": "^4.21.1",
"jsonwebtoken": "^9.0.2",
"morgan": "^1.10.0",
+ "node-polyglot": "^2.6.0",
"uuid": "^10.0.0"
}
}
diff --git a/src/public/css/eventAddMenu.css b/src/public/css/eventAddMenu.css
index 4211ba4812df8dfbe4ef4912d5b4919654b972f6..12d964d7271fb8ca96f491b1b7d571c256ef0ca8 100644
--- a/src/public/css/eventAddMenu.css
+++ b/src/public/css/eventAddMenu.css
@@ -54,12 +54,6 @@
width: 100%;
}
-}
-
-#weekDays input[type="checkbox"] {
- display: none;
-}
-
.day-label {
width: 30px;
height: 30px;
@@ -67,7 +61,7 @@
display: flex;
justify-content: space-between;
align-items: center;
- font-size: 18px;
+ font-size: 13px;
font-weight: bold;
cursor: pointer;
background-color: #f0f0f0;
diff --git a/src/public/css/styles.css b/src/public/css/styles.css
index c6fd9bf724720209c2c65a708b25815782ec79f1..84f67d07b50541f9e76c50119bbd1d39bbdccb91 100644
--- a/src/public/css/styles.css
+++ b/src/public/css/styles.css
@@ -687,3 +687,66 @@ header {
border-radius: 6px;
font-weight: bold;
}
+
+.logo-menu {
+ display: flex;
+ align-items: center;
+}
+
+.language-selector {
+ margin-left: 25px;
+ position: relative;
+ display: inline-block;
+ width: 100px;
+ height: 40px;
+ border-radius: 15px;
+ background-color: #ddd;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ overflow: hidden;
+ cursor: pointer;
+}
+
+.language-label {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ position: relative;
+ width: 100%;
+ height: 100%;
+ cursor: pointer;
+}
+
+.language-selector input {
+ opacity: 0;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ z-index: -1;
+}
+
+.language-toggle {
+ position: absolute;
+ top: 0;
+ width: 50%;
+ height: 100%;
+ border-radius: 15px;
+ transition: all 0.3s ease-in-out;
+}
+
+.language-flag {
+ position: relative;
+ width: 24px;
+ height: 24px;
+ background-size: cover;
+ pointer-events: none;
+}
+
+.language-flag.fr {
+ left: 10px;;
+ background-image: url('/images/fr_flag.png');
+}
+
+.language-flag.en {
+ right: 10px;
+ background-image: url('/images/en_flag.png');
+}
\ No newline at end of file
diff --git a/src/public/images/en_flag.png b/src/public/images/en_flag.png
new file mode 100644
index 0000000000000000000000000000000000000000..d52670f5e8a24c891aec2ca562e0fa6c9f8eda38
Binary files /dev/null and b/src/public/images/en_flag.png differ
diff --git a/src/public/images/fr_flag.png b/src/public/images/fr_flag.png
new file mode 100644
index 0000000000000000000000000000000000000000..28a7721e366446a4f8abcf56032f263b0d6e9117
Binary files /dev/null and b/src/public/images/fr_flag.png differ
diff --git a/src/public/js/agenda.js b/src/public/js/agenda.js
index 2749f818ea9723bc68fbabc482e865bbae9db3c2..6c2a78b94e84b1374ac47cc4fe108716f86f6dc1 100644
--- a/src/public/js/agenda.js
+++ b/src/public/js/agenda.js
@@ -343,13 +343,23 @@ async function importAgenda() {
// Add each event to the newly created agenda
for (const event of events) {
- await fetch(`/agendas/${newAgenda.id}/addEvent`, {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify(event)
+ if(event.rrule !== undefined){
+ await fetch(`/agendas/${newAgenda.id}/addRecurringEvent`, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json"
+ },
+ body: JSON.stringify(event)
+ });
+ } else {
+ await fetch(`/agendas/${newAgenda.id}/addEvent`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(event)
});
+ }
}
await refreshAgendas();
@@ -549,7 +559,6 @@ async function refreshEvents() {
const visibleAgendas = agendas.filter(agenda => agendaVisibility[agenda.id]);
if (visibleAgendas.length === 0) {
- console.log("No visible agendas to display.");
return;
}
diff --git a/src/public/js/calendar.js b/src/public/js/calendar.js
index 83254e05ff197f35eee1fb78187dc6ddc9373342..15eed793cb5e8c9b585508e7f4e90f128dbfbfa7 100644
--- a/src/public/js/calendar.js
+++ b/src/public/js/calendar.js
@@ -1,16 +1,21 @@
let calendarEl = document.getElementById('calendar');
let calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
- locale: 'en',
+ locale: 'fr',
headerToolbar: {
left: 'prev,next today',
center: 'title',
- right: 'dayGridMonth,timeGridWeek,timeGridDay'
+ right: 'timeGridDay,timeGridWeek,dayGridMonth'
+ },
+ buttonText: {
+ year: 'Année',
+ month: 'Mois',
+ week: 'Semaine',
+ day: 'Jour'
},
events: [],
eventClick: function(info) {
let event = info.event;
- console.log(event);
if (event._def.recurringDef !== null){
document.getElementById('editRecurringEventId').value = event.id;
document.getElementById('editRecurringEventName').value = event.title;
@@ -47,7 +52,7 @@ let calendar = new FullCalendar.Calendar(calendarEl, {
},
dateClick: function(info) {
// Vérifier si on est connecte pour ajouter l'event
- if(document.querySelector('.login-btn').innerHTML === "Log out"){
+ if(document.querySelector('.login-btn').innerHTML === "Log out" || document.querySelector('.login-btn').innerHTML === "Déconnexion" ){
openAddAppointmentModal(info.dateStr); // Passe la date au format YYYY-MM-DD
}
},
@@ -91,7 +96,7 @@ document.addEventListener('DOMContentLoaded', function() {
});
refreshAgendas();
refreshEvents();
- if(document.querySelector('.login-btn').innerHTML === "Log out"){
+ if(document.querySelector('.login-btn').innerHTML === "Log out" || document.querySelector('.login-btn').innerHTML === "Déconnexion"){
document.getElementById('calendarButton').addEventListener('click', openAgendaAddMenu);
document.getElementById('addButton').addEventListener('click', openEventAddMenu);
document.querySelector('.menu-icon').addEventListener('click', openSideMenu);
@@ -404,3 +409,29 @@ document.getElementById("createEventForm").addEventListener("submit", function(e
closeAddAppointmentModal();
});
+// Function to update the format depending on the selected language
+function setCalendarFormat(languageCode) {
+ calendar.setOption('locale', languageCode);
+
+ const frenchButtons = {
+ today: 'Aujourd\'hui',
+ year: 'Année',
+ month: 'Mois',
+ week: 'Semaine',
+ day: 'Jour'
+ };
+
+ const englishButtons = {
+ today: 'Today',
+ year: 'Year',
+ month: 'Month',
+ week: 'Week',
+ day: 'Day'
+ };
+
+ if (languageCode === 'fr') {
+ calendar.setOption('buttonText', frenchButtons);
+ } else if (languageCode === 'en') {
+ calendar.setOption('buttonText', englishButtons);
+ }
+}
\ No newline at end of file
diff --git a/src/public/js/internationalization.js b/src/public/js/internationalization.js
new file mode 100644
index 0000000000000000000000000000000000000000..a1346c0f139bcae4fe1a8f839e4ff78b06ace91a
--- /dev/null
+++ b/src/public/js/internationalization.js
@@ -0,0 +1,214 @@
+var translations = {
+ en: {
+ menu_button: '☰',
+ logo_text: '4genda',
+ search_placeholder: 'Search for an event',
+ username_placeholder: 'Username',
+ password_placeholder: 'Password',
+ confirm_password_placeholder: 'Confirm password',
+ agenda_name_placeholder: 'Name of the agenda',
+ agenda_description_placeholder: 'Description of the agenda',
+ add_user_placeholder: 'Username',
+ event_title_placeholder: 'Title',
+ event_description_placeholder: 'Description',
+ event_name_placeholder: 'Name',
+ search_name: 'Name',
+ search_description: 'Description',
+ search_date: 'Date interval',
+ logout: 'Log out',
+ login_button: 'Log in',
+ agendas: 'Agendas',
+ register: 'Register',
+ login: 'Log in',
+ agenda_name: 'Name:',
+ agenda_description: 'Description:',
+ users: 'Users:',
+ add_user_button: 'Add user',
+ show_agenda: 'Show the agenda',
+ modify_agenda: 'Modify the agenda',
+ agenda_select: 'Agenda',
+ cancel_button: 'Cancel',
+ delete_agenda_button: 'Delete the agenda',
+ export_button: 'Export',
+ save_button: 'Save',
+ add_event: 'Add an event',
+ event_title: 'Title',
+ description: 'Description',
+ start_date: 'Start',
+ end_date: 'End',
+ select_agenda: 'Select an agenda',
+ submit_button: 'Submit',
+ modify_event: 'Modify an event',
+ event_name: 'Name',
+ event_description: 'Description',
+ event_start_date: 'Start',
+ event_end_date: 'End',
+ delete_event: 'Delete',
+ dates_first_occurrence_of_event: 'Dates of the first occurrence of the event:',
+ first_day_of_event: 'First day of the event:',
+ last_day_of_event: 'Last day of the event:',
+ starting_time: 'Starting time',
+ ending_time: 'Ending time',
+ weekly_repeat: 'Repeat on',
+ sunday_abbr: 'Sun.',
+ monday_abbr: 'Mon.',
+ tuesday_abbr: 'Tue.',
+ wednesday_abbr: 'Wed.',
+ thursday_abbr: 'Thu.',
+ friday_abbr: 'Fri.',
+ saturday_abbr: 'Sat.',
+ from_date: 'From',
+ to_date: 'To',
+ monthly_repeat: 'Repeat in',
+ january_abbr: 'Jan.',
+ february_abbr: 'Feb.',
+ march_abbr: 'Mar.',
+ april_abbr: 'Apr.',
+ may_abbr: 'May',
+ june_abbr: 'June',
+ july_abbr: 'July',
+ august_abbr: 'Aug.',
+ september_abbr: 'Sept.',
+ october_abbr: 'Oct.',
+ november_abbr: 'Nov.',
+ december_abbr: 'Dec.',
+ import_agenda: 'Import an agenda',
+ import_button: 'Import',
+ exceptional_event_button: 'Exceptional event',
+ recurring_event_button: 'Recurring event',
+ delete_occurrence_button: 'Delete occurrence',
+ delete_event_button: 'Delete event',
+ add_recurring_event: 'Add a recurrent event',
+ event_type: 'Event type',
+ daily_event: 'Daily',
+ weekly_event: 'Weekly',
+ monthly_event: 'Monthly',
+ yearly_event: 'Yearly',
+ create_agenda: 'Create an agenda',
+ create_agenda_button: 'Create an agenda',
+ create_button: 'Create',
+ recurrence: 'Recurrence'
+ },
+ fr: {
+ menu_button: '☰',
+ logo_text: '4genda',
+ search_placeholder: 'Rechercher un événement',
+ username_placeholder: 'Utilisateur',
+ password_placeholder: 'Mot de passe',
+ confirm_password_placeholder: 'Confirmation du mot de passe',
+ agenda_name_placeholder: 'Nom de l\'agenda',
+ agenda_description_placeholder: 'Description de l\'agenda',
+ add_user_placeholder: 'Ajouter un utilisateur',
+ event_title_placeholder: 'Intitulé',
+ event_description_placeholder: 'Description',
+ event_name_placeholder: 'Nom',
+ search_name: 'Nom',
+ search_description: 'Description',
+ search_date: 'Intervalle de temps',
+ logout: 'Déconnexion',
+ login_button: 'Se connecter',
+ agendas: 'Agendas',
+ register: 'S\'inscrire',
+ login: 'Se connecter',
+ agenda_name: 'Nom :',
+ agenda_description: 'Description :',
+ users: 'Utilisateurs :',
+ add_user_button: 'Ajouter',
+ show_agenda: 'Afficher l\'agenda',
+ modify_agenda: 'Modifier l\'agenda',
+ agenda_select: 'Agenda',
+ cancel_button: 'Annuler',
+ delete_agenda_button: 'Supprimer l\'agenda',
+ export_button: 'Exporter',
+ save_button: 'Sauvegarder',
+ add_event: 'Ajouter un événement',
+ event_title: 'Intitulé',
+ description: 'Description',
+ start_date: 'Date de début',
+ end_date: 'Date de fin',
+ select_agenda: 'Sélectionner un agenda',
+ submit_button: 'Soumettre',
+ modify_event: 'Modifier un événement',
+ event_name: 'Nom',
+ event_description: 'Description',
+ event_start_date: 'Début',
+ event_end_date: 'Fin',
+ delete_event: 'Supprimer',
+ dates_first_occurrence_of_event: 'Dates de la première occurrence de l\'événement :',
+ first_day_of_event: 'Premier jour de l\'événement :',
+ last_day_of_event: 'Dernier jour de l\'événement :',
+ starting_time: 'Heure de début',
+ ending_time: 'Heure de fin',
+ weekly_repeat: 'Répéter les',
+ sunday_abbr: 'Dim.',
+ monday_abbr: 'Lun.',
+ tuesday_abbr: 'Mar.',
+ wednesday_abbr: 'Mer.',
+ thursday_abbr: 'Jeu.',
+ friday_abbr: 'Ven.',
+ saturday_abbr: 'Sam.',
+ from_date: 'De',
+ to_date: 'À',
+ monthly_repeat: 'Répéter en',
+ january_abbr: 'Janv.',
+ february_abbr: 'Févr.',
+ march_abbr: 'Mars',
+ april_abbr: 'Avril',
+ may_abbr: 'Mai',
+ june_abbr: 'Juin',
+ july_abbr: 'Juil.',
+ august_abbr: 'Août',
+ september_abbr: 'Sept.',
+ october_abbr: 'Oct.',
+ november_abbr: 'Nov.',
+ december_abbr: 'Déc.',
+ import_agenda: 'Importer un agenda',
+ import_button: 'Importer',
+ exceptional_event_button: 'Événement exceptionnel',
+ recurring_event_button: 'Événement récurrent',
+ delete_occurrence_button: 'Supprimer l\'occurrence',
+ delete_event_button: 'Supprimer l\'événement',
+ add_recurring_event: 'Ajouter un événement récurrent',
+ event_type: 'Type de l\'événement',
+ daily_event: 'Quotidien',
+ weekly_event: 'Hebdomadaire',
+ monthly_event: 'Mensuel',
+ yearly_event: 'Annuel',
+ create_agenda: 'Créer un agenda',
+ create_agenda_button: 'Créer un agenda',
+ create_button: 'Créer',
+ recurrence: 'Récurrence'
+ }
+};
+
+// Initialize Polyglot with default language (French)
+var polyglot = new Polyglot({ phrases: translations['fr'] });
+
+// Set the language dynamically based on user selection
+function setLanguage(language) {
+ localStorage.setItem('selectedLanguage', language);
+ updateLanguageToggle(language);
+ document.getElementById('language-toggle-checkbox').checked = (language === 'en');
+ polyglot.replace(translations[language]);
+
+ document.querySelectorAll('[data-translate]').forEach(function(element) {
+ var key = element.getAttribute('data-translate');
+ if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
+ element.placeholder = polyglot.t(key);
+ } else {
+ element.textContent = polyglot.t(key);
+ }
+ });
+}
+
+// Update the position of the language toggle based on selected language
+function updateLanguageToggle(language) {
+ const toggle = document.querySelector('.language-toggle');
+ if (language === 'en') {
+ toggle.style.left = '50%';
+ toggle.style.backgroundColor = '#00a015';
+ } else {
+ toggle.style.left = '0';
+ toggle.style.backgroundColor = '#00a015';
+ }
+}
\ No newline at end of file
diff --git a/src/public/js/search.js b/src/public/js/search.js
index 46a03a5816c679283ba5d501f6afa6d52e682e83..366a02b77ef5f9b11c1f2674ce3332f780387fbc 100644
--- a/src/public/js/search.js
+++ b/src/public/js/search.js
@@ -53,7 +53,7 @@ function search() {
if (!searchIntervalStart.value) return;
const startDate = new Date(searchIntervalStart.value);
const endDate = searchIntervalEnd.value ? new Date(searchIntervalEnd.value) : null;
- matchingEvents = getEventsInInterval(startDate, endDate);
+ matchingEvents = getEventsInInterval(loadedEvents, startDate, endDate);
break;
}
matchingEvents.sort((a, b) => new Date(a.startDate) - new Date(b.startDate));
@@ -61,10 +61,19 @@ function search() {
matchingEvents.forEach((event) => {
addEventInSearchResults(event);
});
+
+ const eventsFromToday = getEventsInInterval(matchingEvents, new Date(), null);
+ if (eventsFromToday.length > 0) {
+ const firstEventFromToday = eventsFromToday[0]
+ // Scroll to the first event from today and align to top
+ const eventElement = document.getElementById("search-result-" + firstEventFromToday.id);
+ eventElement.style.backgroundColor = '#fffadf';
+ eventElement.scrollIntoView({behavior: "instant", block: "center"});
+ }
}
-function getEventsInInterval(startDate, endDate) {
- return loadedEvents.filter((event) => {
+function getEventsInInterval(events, startDate, endDate) {
+ return events.filter((event) => {
const eventStartDate = new Date(event.startDate);
if (!endDate) return eventStartDate >= startDate;
return eventStartDate >= startDate && eventStartDate <= endDate;
@@ -77,6 +86,7 @@ function addEventInSearchResults(event) {
function createSearchResult(event) {
let eventResult = document.createElement('div');
+ eventResult.id = "search-result-" + event.id;
eventResult.classList.add('search-result');
eventResult.style.width = searchResults.offsetWidth + "px";
let eventName = document.createElement('span');
diff --git a/src/views/index.ejs b/src/views/index.ejs
index 4dcb1d3019821830e1b62c35d48ef3427163cf23..476f4e1b2ad37f49e5e68d7eff44192117242899 100644
--- a/src/views/index.ejs
+++ b/src/views/index.ejs
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="fr">
+
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -10,54 +11,70 @@
<link rel="stylesheet" href="css/eventAddMenu.css">
<!-- Recurring event -->
<link rel="stylesheet" href="css/recurringEvent.css">
+ <link rel="stylesheet" href="css/recurringEvent.css">
<!-- Agenda add menu -->
<link rel="stylesheet" href="css/agendaAddMenu.css">
<!-- FullCalendar JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.9/index.global.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.9/locales/all.global.min.js"></script>
<!-- rrule lib -->
<script src='https://cdn.jsdelivr.net/npm/rrule@2.6.4/dist/es5/rrule.min.js'></script>
<!-- rrule-to-fullcalendar connector -->
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/rrule@6.1.9/index.global.min.js'></script>
+ <!-- Polyglot library -->
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/polyglot.js/2.0.0/polyglot.min.js"></script>
</head>
+
<body>
<header>
<div class="logo-menu">
- <button class="menu-icon">☰</button>
+ <button class="menu-icon" data-translate="menu_button">☰</button>
<img src="/images/logo.png" alt="Logo" class="logo-image">
- <span class="logo-text">4genda</span>
+ <span class="logo-text" data-translate="logo_text">4genda</span>
+
+ <!-- Language Selector -->
+ <div class="language-selector">
+ <label for="language-toggle-checkbox" class="language-label">
+ <input type="checkbox" id="language-toggle-checkbox"
+ onchange="setLanguage(this.checked ? 'en' : 'fr'); setCalendarFormat(this.checked ? 'en' : 'fr')">
+ <div class="language-toggle"></div>
+ <div class="language-flag fr"></div>
+ <div class="language-flag en"></div>
+ </label>
+ </div>
</div>
<% if(locals.user) { %>
<div class="search-menu">
<div class="search-menu-form">
- <input type="text" id="search-input" placeholder="Rechercher un événement">
+ <input type="text" id="search-input" placeholder="" data-translate="search_placeholder">
<input type="datetime-local" class="search-interval-input" id="search-start-date" style="display: none;">
<input type="datetime-local" class="search-interval-input" id="search-end-date" style="display: none;">
<select id="search-type">
- <option value="name" selected>Nom</option>
- <option value="description">Description</option>
- <option value="date">Intervalle de temps</option>
+ <option value="name" selected data-translate="search_name">Nom</option>
+ <option value="description" data-translate="search_description">Description</option>
+ <option value="date" data-translate="search_date">Intervalle de temps</option>
</select>
</div>
<div class="search-results" id="search-results"></div>
</div>
- <% } %>
-
- <div class="login-menu">
- <% if(locals.user) { %>
- <p id="username">Hello <%= locals.user.name ?? '' %></p>
- <button class="login-btn" onclick="logout()">Log out</button>
- <% } else { %>
- <button class="login-btn" onclick="openLoginModal()">Log in</button>
<% } %>
- </div>
+
+ <div class="login-menu">
+ <% if(locals.user) { %>
+ <button class="login-btn" onclick="logout()" data-translate="logout">Log out</button>
+ <% } else { %>
+ <button class="login-btn" onclick="openLoginModal()" data-translate="login_button">Log in</button>
+ <% } %>
+ </div>
+
</header>
- <!-- Bouton de Menu et Side Menu -->
+ <!-- Side Menu -->
<div id="sideMenuOverlay" class="modal-overlay" style="display: none;" onclick="closeSideMenu()"></div>
<div id="sideMenu" class="side-menu" style="display: none;">
<div class="side-menu-content">
- <h3 style="font-size: 2em;">Agendas</h3>
+ <h3 style="font-size: 2em;" data-translate="agendas">Agendas</h3>
<ul class="menu-list">
</ul>
</div>
@@ -65,169 +82,173 @@
<div id="calendar"></div>
- <!-- Connexion -->
+ <!-- Login Modal -->
<div id="loginModalOverlay" class="modal-overlay" style="display: none;" onclick="closeLoginModal()">
<div id="loginModal" class="modal login-modal" style="display: block;">
<div class="modal-content">
<div class="modal-header-container">
- <button class="tab-btn" onclick="showForm('registerForm')">Register</button>
- <button class="tab-btn active" onclick="showForm('loginForm')">Log in</button>
+ <button class="tab-btn" onclick="showForm('registerForm')" data-translate="register">Register</button>
+ <button class="tab-btn active" onclick="showForm('loginForm')" data-translate="login">Log in</button>
</div>
<div id="loginForm" class="modal-body active">
<form id="formLogin" action="/users/login" method="post">
- <input type="text" id="login-name" name="name" placeholder="Username" required>
- <input type="password" id="login-password" name="password" placeholder="Password" required>
+ <input type="text" id="login-name" name="name" placeholder="Username" data-translate="username_placeholder" autocomplete="username" required>
+ <input type="password" id="login-password" name="password" placeholder="Password" data-translate="password_placeholder" autocomplete="current-password" required>
<p id="login-message"></p>
- <button type="submit" class="submit-btn">Log in</button>
+ <button type="submit" class="submit-btn" data-translate="login_button">Log in</button>
</form>
</div>
<div id="registerForm" class="modal-body" style="display:none;">
<form id="formRegister" action="/users/register" method="post">
- <input type="text" id="register-name" name="name" placeholder="Username" required>
- <input type="password" id="register-password" name="password" placeholder="Password" required>
- <input type="password" id="confirm-password" placeholder="Confirm" required>
+ <input type="text" id="register-name" name="name" placeholder="Username" data-translate="username_placeholder" autocomplete="username" required>
+ <input type="password" id="register-password" name="password" placeholder="Password" data-translate="password_placeholder" autocomplete="new-password" required>
+ <input type="password" id="confirm-password" placeholder="Confirm" data-translate="confirm_password_placeholder" autocomplete="new-password" required>
<p id="register-message"></p>
- <button type="submit" class="submit-btn">Submit</button>
+ <button type="submit" class="submit-btn" data-translate="submit_button">Submit</button>
</form>
</div>
</div>
</div>
</div>
-
- <!-- Modal pour modifier un agenda -->
+ <!-- Modal for modifying agenda -->
<div id="editAgendaOverlay" class="modal-overlay edit-agenda-overlay" style="display: none;" onclick="closeEditAgendaModal()"></div>
<div id="editAgendaModal" class="modal edit-agenda-modal" style="display: none;">
<div class="modal-content">
- <h3>Modify the agenda</h3>
+ <h3 data-translate="modify_agenda">Modify the agenda</h3>
<form id="editAgendaForm">
<input type="hidden" id="edit-agenda-id">
- <label for="edit-agenda-name">Name:</label>
- <input type="text" id="edit-agenda-name" placeholder="Name of the agenda" required>
+ <label for="edit-agenda-name" data-translate="agenda_name">Name:</label>
+ <input type="text" id="edit-agenda-name" placeholder="Name of the agenda" data-translate="agenda_name_placeholder" required>
<br>
- <label for="edit-agenda-description">Description:</label>
- <input type="text" id="edit-agenda-description" placeholder="Description of the agenda">
+ <label for="edit-agenda-description" data-translate="agenda_description">Description:</label>
+ <input type="text" id="edit-agenda-description" placeholder="Description of the agenda" data-translate="agenda_description_placeholder">
<br>
- <label>Users :</label>
+ <label data-translate="users">Users :</label>
<div id="edit-agenda-users" class="edit-agenda-users">
</div>
<div class="add-user-div">
- <input type="text" id="add-user-input" placeholder="Add a user">
- <button type="button" id="add-user-button">Add</button>
+ <input type="text" id="add-user-input" placeholder="Username" data-translate="add_user_placeholder">
+ <button type="button" id="add-user-button" data-translate="add_user_button">Add user</button>
</div>
<p id="add-user-message"></p>
<div style="display: flex; align-items: center;">
<label style="margin-right: 10px;">
<input type="checkbox" id="edit-agenda-visible" checked>
- Show the agenda
+ <span data-translate="show_agenda">Show the agenda</span>
</label>
</div>
<br>
<div class="modal-buttons" style="display: flex; justify-content: space-between;">
- <button type="button" onclick="closeEditAgendaModal()">Cancel</button>
- <button type="button" class="delete-button" onclick="deleteAgenda()">Delete the agenda</button>
- <button type="button" onclick="exportAgenda()">Export</button>
- <button type="submit">Save</button>
+ <button type="button" onclick="closeEditAgendaModal()"
+ data-translate="cancel_button">Cancel</button>
+ <button type="button" class="delete-button" onclick="deleteAgenda()"
+ data-translate="delete_agenda_button">Delete the agenda</button>
+ <button type="button" onclick="exportAgenda()" data-translate="export_button">Export</button>
+ <button type="submit" data-translate="save_button">Save</button>
</div>
</form>
</div>
</div>
-
- <!-- Bouton calendrier -->
+ <!-- Calendar button -->
<div class="calendar-button" id="calendarButton">
<img src="/images/calend.png" alt="Calendrier" class="calendar-icon">
</div>
- <!-- Créer agenda -->
- <div id="createAgendaOverlay" class="modal-overlay" style="display: none;" onclick="closeCreateAgendaModal()"></div>
- <%- include('partials/createAgendaModal.ejs') %>
-
- <!-- Bouton + -->
- <div class="add-button" id="addButton">
- <span class="add-button-icon">+</span>
+ <!-- Create agenda -->
+ <div id="createAgendaOverlay" class="modal-overlay" style="display: none;" onclick="closeCreateAgendaModal()">
</div>
-
- <!-- Event creation menu -->
- <%- include('partials/eventAddMenu.ejs') %>
-
- <!-- Créer évènement -->
- <div id="addAppointmentOverlay" class="modal-overlay" style="display: none;" onclick="closeAddAppointmentModal()"></div>
- <%- include('partials/createRecurringEvent.ejs') %>
-
- <!-- Ajouter RDV -->
- <div id="addAppointmentModal" class="modal appointment-modal" style="display:none;">
- <div class="modal-content">
- <form id="createEventForm">
- <div class="modal-body">
- <h3>Add an event</h3>
-
- <label for="event-name-input">Title</label>
- <input type="text" id="event-name-input" name="name" placeholder="Title" required>
-
- <label for="event-description-input">Description</label>
- <input type="text" id="event-description-input" name="description" placeholder="Description">
-
- <label for="event-start-date">Start</label>
- <input type="datetime-local" id="event-start-date" name="startDate" required>
-
- <label for="event-end-date">End</label>
- <input type="datetime-local" id="event-end-date" name="endDate" required>
-
- <label for="agenda-select">Agenda</label>
- <br>
- <select id="agenda-select">
- <option value="" selected>Select an agenda</option>
- </select>
- <p id="create-event-message"></p>
-
- <div class="modal-buttons">
- <button type="button" onclick="closeAddAppointmentModal()">Cancel</button>
- <button type="submit">Submit</button>
+ <%- include('partials/createAgendaModal.ejs') %>
+ <!-- Add button -->
+ <div class="add-button" id="addButton">
+ <span class="add-button-icon">+</span>
+ </div>
+ <!-- Event creation menu -->
+ <%- include('partials/eventAddMenu.ejs') %>
+ <!-- Create event -->
+ <div id="addAppointmentOverlay" class="modal-overlay" style="display: none;" onclick="closeAddAppointmentModal()"></div>
+ <%- include('partials/createRecurringEvent.ejs') %>
+ <!-- Add appointment -->
+ <div id="addAppointmentModal" class="modal appointment-modal" style="display: none;">
+ <div class="modal-content">
+ <form id="createEventForm">
+ <div class="modal-body">
+ <h3 data-translate="add_event">Add an event</h3>
+
+ <label for="event-name-input" data-translate="event_title">Title</label>
+ <input type="text" id="event-name-input" name="name" placeholder="Title" data-translate="event_title_placeholder" required>
+
+ <label for="event-description-input" data-translate="description">Description</label>
+ <input type="text" id="event-description-input" name="description" placeholder="Description" data-translate="event_description_placeholder">
+
+ <label for="event-start-date" data-translate="start_date">Start</label>
+ <input type="datetime-local" id="event-start-date" name="startDate" required>
+
+ <label for="event-end-date" data-translate="end_date">End</label>
+ <input type="datetime-local" id="event-end-date" name="endDate" required>
+
+ <label for="agenda-select" data-translate="agenda_select">Agenda</label>
+ <br>
+ <select id="agenda-select">
+ <option value="" selected data-translate="select_agenda">Select an agenda</option>
+ </select>
+ <p id="create-event-message"></p>
+
+ <div class="modal-buttons">
+ <button type="button" onclick="closeAddAppointmentModal()" data-translate="cancel_button">Cancel</button>
+ <button type="submit" data-translate="submit_button">Submit</button>
+ </div>
+ </div>
+ </form>
</div>
</div>
- </form>
- </div>
- </div>
-
- <!-- Modifier RDV -->
- <div id="editAppointmentOverlay" class="modal-overlay" style="display: none;" onclick="closeEditAppointmentModal()"></div>
- <div id="editAppointmentModal" class="edit-appointment-modal" style="display: none;">
- <div class="modal-content">
- <button class="delete-event-button" onclick="deleteEvent()">Delete</button>
- <h3>Modify an event</h3>
- <form id="editEventForm">
- <input type="hidden" id="edit-event-id-input">
- <label for="edit-event-name-input">Name</label>
- <br>
- <input type="text" id="edit-event-name-input" placeholder="Name" required>
- <br>
- <label for="edit-event-description-input">Description</label>
- <br>
- <input type="text" id="edit-event-description-input" placeholder="Description">
- <br>
- <label for="edit-event-startDate-input">Start</label>
- <br>
- <input type="datetime-local" id="edit-event-startDate-input" required>
- <br>
- <label for="edit-event-endDate-input">End</label>
- <br>
- <input type="datetime-local" id="edit-event-endDate-input" required>
- <p id="edit-event-message"></p>
- <div class="modal-buttons">
- <button type="button" onclick="closeEditAppointmentModal()">Cancel</button>
- <button type="submit">Submit</button>
+ <!-- Modify appointment -->
+ <div id="editAppointmentOverlay" class="modal-overlay" style="display: none;" onclick="closeEditAppointmentModal()"></div>
+ <div id="editAppointmentModal" class="edit-appointment-modal" style="display: none;">
+ <div class="modal-content">
+ <button class="delete-event-button" onclick="deleteEvent()" data-translate="delete_event">Delete</button>
+ <h3 data-translate="modify_event">Modify an event</h3>
+ <form id="editEventForm">
+ <input type="hidden" id="edit-event-id-input">
+ <label for="edit-event-name-input" data-translate="event_name">Name</label>
+ <br>
+ <input type="text" id="edit-event-name-input" placeholder="Name" data-translate="event_name_placeholder" required>
+ <br>
+ <label for="edit-event-description-input" data-translate="event_description">Description</label>
+ <br>
+ <input type="text" id="edit-event-description-input" placeholder="Description" data-translate="event_description_placeholder">
+ <br>
+ <label for="edit-event-startDate-input" data-translate="event_start_date">Start</label>
+ <br>
+ <input type="datetime-local" id="edit-event-startDate-input" required>
+ <br>
+ <label for="edit-event-endDate-input" data-translate="event_end_date">End</label>
+ <br>
+ <input type="datetime-local" id="edit-event-endDate-input" required>
+ <p id="edit-event-message"></p>
+ <div class="modal-buttons">
+ <button type="button" onclick="closeEditAppointmentModal()" data-translate="cancel_button">Cancel</button>
+ <button type="submit" data-translate="submit_button">Submit</button>
+ </div>
+ </form>
+ </div>
</div>
- </form>
- </div>
- </div>
- <%- include('partials/editRecurringEventModal.ejs') %>
-
-<script src="/js/calendar.js"></script>
-<script src="/js/auth.js"></script>
-<script src="/js/agenda.js"></script>
-<script src="/js/search.js"></script>
+ <%- include('partials/editRecurringEventModal.ejs') %>
+
+ <script src="/js/calendar.js"></script>
+ <script src="/js/auth.js"></script>
+ <script src="/js/agenda.js"></script>
+ <script src="/js/search.js"></script>
+ <script src="/js/internationalization.js"></script>
+
+ <script>
+ var savedLanguage = localStorage.getItem('selectedLanguage') || 'fr';
+ setLanguage(savedLanguage);
+ setCalendarFormat(savedLanguage);
+ </script>
</body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/src/views/partials/createAgendaModal.ejs b/src/views/partials/createAgendaModal.ejs
index 7d98ed66bf2102c365935911ca8c3b6d6b7d7650..f20c3a580a76ebd3464cd04e1b40d10e2bf9525b 100644
--- a/src/views/partials/createAgendaModal.ejs
+++ b/src/views/partials/createAgendaModal.ejs
@@ -1,14 +1,14 @@
<!-- Create an agenda -->
<div id="createAgendaModal" class="modal agenda-modal" style="display:none;">
<div class="modal-content">
- <h3>Create an agenda</h3>
+ <h3 data-translate="create_agenda">Create an agenda</h3>
<form id="createAgendaForm">
- <input type="text" id="agenda-name" name="name" placeholder="Title" required>
- <textarea id="agenda-description" name="description" placeholder="Description"></textarea>
+ <input type="text" id="agenda-name" name="name" placeholder="Title" data-translate="event_title_placeholder" required>
+ <textarea id="agenda-description" name="description" placeholder="Description" data-translate="event_description_placeholder"></textarea>
<p id="create-agenda-message"></p>
<div class="modal-buttons">
- <button type="button" onclick="closeCreateAgendaModal()">Cancel</button>
- <button type="submit">Create</button>
+ <button type="button" onclick="closeCreateAgendaModal()" data-translate="cancel_button">Cancel</button>
+ <button type="submit" data-translate="create_button">Create</button>
</div>
</form>
</div>
@@ -17,13 +17,13 @@
<!-- Import an agenda -->
<div id="importAgendaModal" class="modal agenda-modal" style="display:none;">
<div class="modal-content">
- <h3 class="import-agenda-title">Import an agenda</h3>
+ <h3 class="import-agenda-title" data-translate="import_agenda">Import an agenda</h3>
<form id="importAgendaForm">
<input type="file" id="import-agenda-file">
<p id="import-agenda-message"></p>
<div class="modal-buttons">
- <button type="button" onclick="closeImportAgendaModal()">Cancel</button>
- <button type="submit">Import</button>
+ <button type="button" onclick="closeImportAgendaModal()" data-translate="cancel_button">Cancel</button>
+ <button type="submit" data-translate="import_button">Import</button>
</div>
</form>
</div>
@@ -37,10 +37,10 @@
<div id="agendaAddMenu" class="div-menu">
<div class="agenda-add-menu-internal-div">
<div for="agenda-create-button" class="div-create">
- <button id="agenda-create-button" type="button" name="button" class="button-style button-agenda-create">Create an agenda</button>
+ <button id="agenda-create-button" type="button" name="button" class="button-style button-agenda-create" data-translate="create_agenda_button">Create an agenda</button>
</div>
<div for="agenda-import-button" class="div-import">
- <button id="agenda-import-button" type="button" name="button" class="button-style button-agenda-import">Import an agenda</button>
+ <button id="agenda-import-button" type="button" name="button" class="button-style button-agenda-import" data-translate="import_button">Import an agenda</button>
</div>
</div>
</div>
diff --git a/src/views/partials/createRecurringEvent.ejs b/src/views/partials/createRecurringEvent.ejs
index 47f75b240bdc60bd2e86399ae6f81ddb7e2f6504..499a74bc5d44d7746b569216fd3de96fcae4d639 100644
--- a/src/views/partials/createRecurringEvent.ejs
+++ b/src/views/partials/createRecurringEvent.ejs
@@ -1,227 +1,224 @@
-<div id="addRecurringAppointmentModal" class="modal appointment-modal recurring-modal" style="display:none;">
- <div class="modal-content">
- <form id="createRecurringEventForm">
- <div class="modal-body" style="float:left;margin-right:25px">
- <h3>Add a recurring event</h3>
-
- <label for="recurringEventNameInput">Title</label>
- <input type="text" id="recurringEventNameInput" name="name" placeholder="title" required>
-
- <label for="recurringEventDescriptionInput">Description</label>
- <input type="text" id="recurringEventDescriptionInput" name="description" placeholder="description">
-
- <label>Event frequency</label>
- <div class="recurringEventType" style="display:block;justify-content:space-between;">
- <div style="margin-right:15px;">
- <div class="eventFrequencyChoice">
- <input type="radio" id="dailyEvent" name="eventFrequency" onclick="displayEventFrequencySetting(0)" required/>
- <label>Daily</label>
- </div>
- <div class="eventFrequencyChoice">
- <input type="radio" id="weeklyEvent" name="eventFrequency" onclick="displayEventFrequencySetting(1)"/>
- <label>Weekly</label>
- </div>
- </div>
- <div>
- <div class="eventFrequencyChoice">
- <input type="radio" id="monthlyEvent" name="eventFrequency" onclick="displayEventFrequencySetting(2)"/>
- <label>Monthly</label>
- </div>
- <div class="eventFrequencyChoice">
- <input type="radio" id="yearlyEvent" name="eventFrequency" onclick="displayEventFrequencySetting(3)"/>
- <label>Yearly</label>
- </div>
- </div>
- </div>
- <label for="reAgendaSelect">Agenda</label>
- <br>
- <select id="reAgendaSelect">
- <option value="" selected>Select an agenda</option>
- </select>
- <p id="reMessage"></p>
- </div>
- <div class="modal-body" style="float:right">
- <h3>Recurrence settings</h3>
- <div class="recurringEventSetting" >
-
- <!-- Daily Event -->
-
- <div id="dailyEvent" style="display:none;" name="eventFrequencySetting">
- <div>
- <label for="dailyEventStartDate">First day</label>
- <input type="date" id="dailyEventStartDate" >
- </div>
- <div>
- <label for="dailyEventStartTime">From</label>
- <input type="time" id="dailyEventStartTime" />
- </div>
- <div>
- <label for="dailyEventEndTime">To</label>
- <br>
- <input type="time" id="dailyEventEndTime" />
- </div>
- </div>
-
- <!-- Weekly Event -->
-
- <div id="weeklyEvent" style="display:none;" name="eventFrequencySetting">
- <div>
- <label for="weeklyEventStartDate">Event first day</label>
- <input type="date" id="weeklyEventStartDate" />
- </div>
- <div>
- <label for="weeklyEventStartTime">From</label>
- <input type="time" id="weeklyEventStartTime" />
- </div>
- <div>
- <label for="weeklyEventEndTime">To</label><br>
- <input type="time" id="weeklyEventEndTime" />
- </div>
- <label for="weekDays">Repeat on :</label>
- <br>
- <div id="weekDays" style="display:inline-flex;justify-content:space-evenly;margin-top:15px;">
- <div>
- <div style="display:flex;justify-content:space-between;width:100%">
- <label class="day-label">Mon.
- <input type="checkbox" id="Monday" name ="mo">
- <span></span>
- </label>
-
- <label class="day-label">Tue.
- <input type="checkbox" id="Tuesday" name="tu">
- <span></span>
- </label>
-
- <label class="day-label">Wen.
- <input type="checkbox" id="Wednesday" name="we">
- <span></span>
- </label>
-
- <label class="day-label">Thu.
- <input type="checkbox" id="Thursday" name="th">
- <span></span>
- </label>
- </div class="day-label">
-
- <div style="display:flex;justify-content:space-between;padding-top:10px;">
- <label class="day-label">Fri.
- <input type="checkbox" id="Friday" name="fr">
- <span></span>
- </label>
- <br>
- <label class="day-label">Sat.
- <input type="checkbox" id="Saturday" name="sa">
- <span></span>
- </label>
- <br>
- <label class="day-label">Sun.
- <input type="checkbox" id="Sunday" name="su">
- <span></span>
- </label>
-
-
- </div>
- </div>
- </div>
- </div>
-
- <!-- Monthly event -->
-
- <div id="monthlyEvent" style="display:none;" name="eventFrequencySetting">
- <div>
- <label for="monthlyEventStart">From</label>
- <input type="number" id="monthlyEventStart" min=1 max=31 />
- <br>
- <label for="monthlyEventEnd">to</label>
- <br>
- <input type="number" id="monthlyEventEnd" min=1 max=31 />
- </div>
- <br>
- <label for="Months">Repeat on :</label>
- <br>
- <div id="months" style="display:block;margin-top:5px;">
- <div style="display:flex;justify-content:space-between;">
- <label class="day-label">Jan.
- <input type="checkbox" id="january" name="1">
- <span></span>
- </label>
- <label class="day-label">Feb.
- <input type="checkbox" id="february" name="2">
- <span></span>
- </label>
- <label class="day-label">Mar.
- <input type="checkbox" id="march" name="3">
- <span></span>
- </label>
- <label class="day-label">Apr.
- <input type="checkbox" id="april" name="4">
- <span></span>
- </label>
- </div>
- <div style="display:flex;justify-content:space-between;">
- <label class="day-label">May.
- <input type="checkbox" id="may" name="5">
- <span></span>
- </label>
- <label class="day-label">Jun.
- <input type="checkbox" id="june" name="6">
- <span></span>
- </label>
- <label class="day-label">Jul.
- <input type="checkbox" id="july" name="7">
- <span></span>
- </label class="day-label">
- <label>Aug.
- <input type="checkbox" id="august" name="8">
- <span></span>
- </label>
- </div>
- <div style="display:flex;justify-content:space-between;">
- <label class="day-label">Sep.
- <input type="checkbox" id="september" name="9">
- <span></span>
- </label>
- <label class="day-label">Oct.
- <input type="checkbox" id="october" name="10">
- <span></span>
- </label>
- <label class="day-label">Nov.
- <input type="checkbox" id="november" name="11">
- <span></span>
- </label>
- <label class="day-label">Dec.
- <input type="checkbox" id="decembre" name="12">
- <span></span>
- </label>
- </div>
- </div>
- </div>
-
- <!-- Yearly Event -->
-
- <div id="yearlyEvent" style="display:none;" name="eventFrequencySetting">
- <div>
- <label>Date of first occurence</label>
- </div>
- <br>
- <div>
- <label for="yearlyEventStart">From</label>
- <input type="date" id="yearlyEventStart" >
- </div>
- <div>
- <label for="yearlyEventEnd">To</label>
- <br>
- <input type="date" id="yearlyEventEnd">
- </div>
- </div>
- </div>
- <br>
-
- <div class="modal-buttons">
- <button type="button" onclick="closeRecurringEventModal()">Cancel</button>
- <button type="submit">Submit</button>
- </div>
- </div>
- </form>
- </div>
- </div>
\ No newline at end of file
+<div id="addRecurringAppointmentModal" class="modal appointment-modal recurring-modal" style="display: none;">
+ <div class="modal-content">
+ <form id="createRecurringEventForm">
+ <div class="modal-body" style="float: left; margin-right: 25px">
+ <h3 data-translate="add_recurring_event">Add a recurring event</h3>
+
+ <label for="recurringEventNameInput" data-translate="event_title">Intitulé</label>
+ <input type="text" id="recurringEventNameInput" name="name" placeholder="Intitulé" data-translate="event_title_placeholder" required>
+
+ <label for="recurringEventDescriptionInput" data-translate="event_description">Description</label>
+ <input type="text" id="recurringEventDescriptionInput" name="description" placeholder="Description" data-translate="event_description_placeholder">
+
+ <label for="recurringEventType" data-translate="event_type">Type d'événement</label>
+ <div class="recurringEventType">
+ <div style="margin-right: 15px;">
+ <div class="eventFrequencyChoice">
+ <input type="radio" id="dailyEvent" name="eventFrequency" onclick="displayEventFrequencySetting(0)" required/>
+ <label for="scales" data-translate="daily_event">Quotidien</label>
+ </div>
+ <div class="eventFrequencyChoice">
+ <input type="radio" id="weeklyEvent" name="eventFrequency" onclick="displayEventFrequencySetting(1)"/>
+ <label for="scales" data-translate="weekly_event">Hebdomadaire</label>
+ </div>
+ </div>
+ <div>
+ <div class="eventFrequencyChoice">
+ <input type="radio" id="monthlyEvent" name="eventFrequency" onclick="displayEventFrequencySetting(2)"/>
+ <label for="scales" data-translate="monthly_event">Mensuel</label>
+ </div>
+ <div class="eventFrequencyChoice">
+ <input type="radio" id="yearlyEvent" name="eventFrequency" onclick="displayEventFrequencySetting(3)"/>
+ <label for="scales" data-translate="yearly_event">Annuel</label>
+ </div>
+ </div>
+ </div>
+ <label for="reAgendaSelect" data-translate="agenda_select">Agenda</label>
+ <br>
+ <select id="reAgendaSelect">
+ <option value="" selected data-translate="select_agenda">Select an agenda</option>
+ </select>
+ <p id="reMessage"></p>
+ </div>
+ <div class="modal-body" style="float: right">
+ <h3 data-translate="recurrence">Recurrence settings</h3>
+ <div class="recurringEventSetting">
+
+ <!-- Daily Event -->
+ <div id="dailyEvent" style="display:none;" name="eventFrequencySetting">
+ <div>
+ <label for="dailyEventStartDate" data-translate="start_date">First day</label>
+ <input type="date" id="dailyEventStartDate">
+ </div>
+ <div>
+ <label for="dailyEventStartTime" data-translate="starting_time">From</label>
+ <input type="time" id="dailyEventStartTime" />
+ </div>
+ <div>
+ <label for="dailyEventEndTime" data-translate="ending_time">To</label>
+ <br>
+ <input type="time" id="dailyEventEndTime" />
+ </div>
+ </div>
+
+ <!-- Weekly Event -->
+
+ <div id="weeklyEvent" style="display: none;" name="eventFrequencySetting">
+ <div>
+ <label for="weeklyEventStartDate" data-translate="start_date">Event first day</label>
+ <input type="date" id="weeklyEventStartDate" />
+ </div>
+ <div>
+ <label for="weeklyEventStartTime" data-translate="starting_time">From</label>
+ <input type="time" id="weeklyEventStartTime" />
+ </div>
+ <div>
+ <label for="weeklyEventEndTime" data-translate="ending_time">To</label><br>
+ <input type="time" id="weeklyEventEndTime" />
+ </div>
+ <label for="weekDays" data-translate="weekly_repeat">Repeat on :</label>
+ <br>
+ <div id="weekDays" style="display: inline-flex; justify-content: space-evenly; margin-top: 15px;">
+ <div>
+ <div style="display: flex; justify-content: space-between; width: 100%">
+ <label class="day-label">
+ <input type="checkbox" id="Monday" name="mo">
+ <span data-translate="monday_abbr"></span>
+ </label>
+
+ <label class="day-label">
+ <input type="checkbox" id="Tuesday" name="tu">
+ <span data-translate="tuesday_abbr"></span>
+ </label>
+
+ <label class="day-label">
+ <input type="checkbox" id="Wednesday" name="we">
+ <span data-translate="wednesday_abbr"></span>
+ </label>
+
+ <label class="day-label">
+ <input type="checkbox" id="Thursday" name="th">
+ <span data-translate="thursday_abbr"></span>
+ </label>
+ </div class="day-label">
+
+ <div style="display: flex; justify-content: space-between; padding-top: 10px;">
+ <label class="day-label">
+ <input type="checkbox" id="Friday" name="fr">
+ <span data-translate="friday_abbr"></span>
+ </label>
+ <br>
+ <label class="day-label">
+ <input type="checkbox" id="Saturday" name="sa">
+ <span data-translate="saturday_abbr"></span>
+ </label>
+ <br>
+ <label class="day-label">
+ <input type="checkbox" id="Sunday" name="su">
+ <span data-translate="sunday_abbr"></span>
+ </label>
+
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Monthly event -->
+ <div id="monthlyEvent" style="display: none;" name="eventFrequencySetting">
+ <div>
+ <label for="monthlyEventStart" data-translate="from_date">From</label>
+ <br>
+ <input type="number" id="monthlyEventStart" min=1 max=31 />
+ <br>
+ <label for="monthlyEventEnd" data-translate="to_date">To</label>
+ <br>
+ <input type="number" id="monthlyEventEnd" min=1 max=31 />
+ </div>
+ <br>
+ <label for="Months" data-translate="monthly_repeat">Repeat on :</label>
+ <br>
+ <div id="months" style="display: block; margin-top: 5px;">
+ <div style="display: flex; justify-content: space-between;">
+ <label class="day-label">
+ <input type="checkbox" id="january" name="1">
+ <span data-translate="january_abbr"></span>
+ </label>
+ <label class="day-label">
+ <input type="checkbox" id="february" name="2">
+ <span data-translate="february_abbr"></span>
+ </label>
+ <label class="day-label">
+ <input type="checkbox" id="march" name="3">
+ <span data-translate="march_abbr"></span>
+ </label>
+ <label class="day-label">
+ <input type="checkbox" id="april" name="4">
+ <span data-translate="april_abbr"></span>
+ </label>
+ </div>
+ <div style="display:flex;justify-content:space-between;">
+ <label class="day-label">
+ <input type="checkbox" id="may" name="5">
+ <span data-translate="may_abbr"></span>
+ </label>
+ <label class="day-label">
+ <input type="checkbox" id="june" name="6">
+ <span data-translate="june_abbr"></span>
+ </label>
+ <label class="day-label">
+ <input type="checkbox" id="july" name="7">
+ <span data-translate="july_abbr"></span>
+ </label>
+ <label class="day-label">
+ <input type="checkbox" id="august" name="8">
+ <span data-translate="august_abbr"></span>
+ </label>
+ </div>
+ <div style="display: flex; justify-content: space-between;">
+ <label class="day-label">
+ <input type="checkbox" id="september" name="9">
+ <span data-translate="september_abbr"></span>
+ </label>
+ <label class="day-label">
+ <input type="checkbox" id="october" name="10">
+ <span data-translate="october_abbr"></span>
+ </label>
+ <label class="day-label">
+ <input type="checkbox" id="november" name="11">
+ <span data-translate="november_abbr"></span>
+ </label>
+ <label class="day-label">
+ <input type="checkbox" id="decembre" name="12">
+ <span data-translate="december_abbr"></span>
+ </label>
+ </div>
+ </div>
+ </div>
+
+ <!-- Yearly Event -->
+ <div id="yearlyEvent" style="display: none;" name="eventFrequencySetting">
+ <div>
+ <label data-translate="dates_first_occurrence_of_event">Date of first occurence</label>
+ </div>
+ <br>
+ <div>
+ <label for="yearlyEventStart" data-translate="from_date">From</label>
+ <br>
+ <input type="date" id="yearlyEventStart">
+ </div>
+ <div>
+ <label for="yearlyEventEnd" data-translate="to_date">To</label>
+ <br>
+ <input type="date" id="yearlyEventEnd">
+ </div>
+ </div>
+ </div>
+ <br>
+ <div class="modal-buttons">
+ <button type="button" onclick="closeRecurringEventModal()" data-translate="cancel_button">Cancel</button>
+ <button type="submit" data-translate="submit_button">Valider</button>
+ </div>
+ </div>
+ </form>
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/views/partials/editRecurringEventModal.ejs b/src/views/partials/editRecurringEventModal.ejs
index c5b9c0532e54079b5ba0c88a4fe9b8721c7aa163..43521527a1186acd96c42443580cfc71c1d2a398 100644
--- a/src/views/partials/editRecurringEventModal.ejs
+++ b/src/views/partials/editRecurringEventModal.ejs
@@ -1,23 +1,24 @@
-<div id="editRecurringEventModal" class="edit-appointment-modal" style="display:none;">
- <div class="modal-content">
- <div style="display:inline-block;">
- <button class="delete-event-button" onclick="deleteRecurringEventOccurrence()">Remove occurence</button>
- <button class="delete-event-button" onclick="deleteRecurringEvent()">Delete event</button>
- </div>
- <h3>Event Informations</h3>
- <form id="editRecurringEventForm">
- <input type="hidden" id="editRecurringEventId">
- <label for="editRecurringEventName">Title</label>
- <br>
- <input type="text" id="editRecurringEventName" placeholder="Intitulé" readonly>
- <br>
- <label for="editRecurringEventDescription">Description</label>
- <br>
- <input type="text" id="editRecurringEventDescription" placeholder="Description" readonly>
- <br>
- <p id="editRecurringEventMessage"></p>
- <div class="modal-buttons">
- <button type="button" onclick="closeEditRecurringEventModal()">Close</button>
- </div>
- </form>
+<div id="editRecurringEventModal" class="edit-appointment-modal" style="display:none;">
+ <div class="modal-content">
+ <div style="display:inline-block;">
+ <button class="delete-event-button" onclick="deleteRecurringEventOccurrence()" data-translate="delete_occurrence_button">Supprimer l'occurrence</button>
+ <button class="delete-event-button" onclick="deleteRecurringEvent()" data-translate="delete_event_button">Supprimer l'événement</button>
+ </div>
+ <h3 data-translate="modify_event">Modifier un événement</h3>
+ <form id="editRecurringEventForm">
+ <input type="hidden" id="editRecurringEventId">
+ <label for="editRecurringEventName" data-translate="event_title">Title</label>
+ <br>
+ <input type="text" id="editRecurringEventName" placeholder="Intitulé" data-translate="event_title_placeholder" readonly>
+ <br>
+ <label for="editRecurringEventDescription" data-translate="event_description">Description</label>
+ <br>
+ <input type="text" id="editRecurringEventDescription" placeholder="Description" data-translate="event_description_placeholder" readonly>
+ <br>
+ <p id="editRecurringEventMessage"></p>
+ <div class="modal-buttons">
+ <button type="button" onclick="closeEditRecurringEventModal()" data-translate="cancel_button">Annuler</button>
+ <button type="submit" onclick="closeEditRecurringEventModal" data-translate="submit_button" style="display:none;">Valider</button>
+ </div>
+ </form>
</div>
\ No newline at end of file
diff --git a/src/views/partials/eventAddMenu.ejs b/src/views/partials/eventAddMenu.ejs
index 18aacee2f86a300acc13a4cc90c1816296559bb3..148117281cd9718a80852caa633989b437f96f99 100644
--- a/src/views/partials/eventAddMenu.ejs
+++ b/src/views/partials/eventAddMenu.ejs
@@ -1,11 +1,11 @@
-<div id="eventAddMenuOverlay" class="modal-overlay" style="display: none;" onclick="closeEventAddMenu()"></div>
-<div id="eventAddMenu" class="event-menu" >
- <div class="event-add-menu-internal-div">
- <div for="exceptionalEventButton">
- <button id="exceptionalEventButton" type="button" name="button" class="button-style button-exceptionnal-event">Évènement exceptionnel</button>
- </div>
- <div for="recurringEventButton">
- <button id="recurringEventButton" type="button" name="button" class="button-style button-recurring-event">Évènement récurrent</button>
- </div>
- </div>
+<div id="eventAddMenuOverlay" class="modal-overlay" style="display: none;" onclick="closeEventAddMenu()"></div>
+<div id="eventAddMenu" class="event-menu" >
+ <div class="event-add-menu-internal-div">
+ <div for="exceptionalEventButton">
+ <button id="exceptionalEventButton" type="button" name="button" class="button-style button-exceptionnal-event" data-translate="exceptional_event_button">Événement exceptionnel</button>
+ </div>
+ <div for="recurringEventButton">
+ <button id="recurringEventButton" type="button" name="button" class="button-style button-recurring-event" data-translate="recurring_event_button">Événement récurrent</button>
+ </div>
+ </div>
</div>
\ No newline at end of file