forked from ScoDoc/ScoDoc
EDT: front: navigation et dates
This commit is contained in:
parent
6423baa34b
commit
fb62904cc9
@ -1,8 +1,67 @@
|
||||
#show_modules_titles_form {
|
||||
#calendar_control_form {
|
||||
display: inline-block;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
/* Style for the dropdown button */
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.dropbtn {
|
||||
background-color: rgb(233,233,233);
|
||||
color: black;
|
||||
padding: 2px 32px 2px 4px;
|
||||
margin-left: 16px;
|
||||
font-size: 16px;
|
||||
border: 1px solid black;
|
||||
border-radius: 5px; /* Rounded corners */
|
||||
cursor: pointer;
|
||||
/* Add arrow to the button */
|
||||
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%227%22%20viewBox%3D%220%200%2012%207%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M1%201L6%206L11%201%22%20stroke%3D%22black%22%20stroke-width%3D%222%22/%3E%3C/svg%3E');
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 10px center;
|
||||
}
|
||||
|
||||
/* Dropdown content (hidden by default) */
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #f9f9f9;
|
||||
min-width: 210px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
border-radius: 5px; /* Rounded corners */
|
||||
overflow: hidden; /* Ensures rounded corners for dropdown items */
|
||||
}
|
||||
|
||||
/* Style for the dropdown items */
|
||||
.dropdown-content ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dropdown-content ul li {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-content ul li a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-content ul li label {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.toastui-calendar-template-time {
|
||||
padding: 4px;
|
||||
word-break: break-all;
|
||||
|
||||
@ -16,11 +16,29 @@
|
||||
|
||||
{{ form_groups_choice|safe }}
|
||||
|
||||
<form id="show_modules_titles_form" method="GET">
|
||||
<input type="checkbox" name="show_modules_titles" {{
|
||||
'checked' if show_modules_titles else ''}}
|
||||
onchange="this.form.submit()"/> noms complets des modules</input>
|
||||
</form>
|
||||
<div class="dropdown">
|
||||
<button class="dropbtn">Semaine</button>
|
||||
<div class="dropdown-content">
|
||||
<ul>
|
||||
<li><a href="#" data-view="day">Jour</a></li>
|
||||
<li><a href="#" data-view="week">Semaine</a></li>
|
||||
<li><a href="#" data-view="month">Mois</a></li>
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox" id="showModulesTitles"
|
||||
{{ "checked" if show_modules_titles else "" }}
|
||||
>
|
||||
noms des modules
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<form id="calendar_control_form" method="GET">
|
||||
<input type="hidden" name="current_date" value="{{current_date}}">
|
||||
<input type="hidden" name="show_modules_titles" value="{{ 1 if show_modules_titles else 0 }}">
|
||||
<input type="submit" value="Apply Changes" hidden>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span id="menu-navi">
|
||||
@ -35,7 +53,7 @@
|
||||
</span>
|
||||
<span id="renderRange" class="render-range"></span>
|
||||
</div>
|
||||
<div id="calendar" style="height: calc(100vh - 180px);"></div>
|
||||
<div id="formsemestre-calendar" style="height: calc(100vh - 180px);"></div>
|
||||
|
||||
<div class="help">
|
||||
<ul>
|
||||
@ -73,10 +91,23 @@ function getDataAction(target) {
|
||||
return target.dataset ? target.dataset.action : target.getAttribute('data-action');
|
||||
}
|
||||
|
||||
function getNextDayISODate(isoDate) {
|
||||
// Parse the ISO date string into a Date object
|
||||
const date = new Date(isoDate);
|
||||
|
||||
// Add one day
|
||||
date.setDate(date.getDate() + 1);
|
||||
|
||||
// Convert back to ISO date string (YYYY-MM-DD)
|
||||
return date.toISOString().split('T')[0];
|
||||
}
|
||||
|
||||
var calendar;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.getElementById('menu-navi').addEventListener('click', onClickNavi);
|
||||
const Calendar = tui.Calendar;
|
||||
const container = document.getElementById('calendar');
|
||||
const container = document.getElementById('formsemestre-calendar');
|
||||
const options = {
|
||||
defaultView: 'week',
|
||||
calendars: [
|
||||
@ -118,7 +149,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
},
|
||||
};
|
||||
|
||||
const calendar = new Calendar(container, options);
|
||||
calendar = new Calendar(container, options);
|
||||
|
||||
fetch(`${SCO_URL}/../api/formsemestre/{{formsemestre.id}}/edt?{{groups_query_args|safe}}&show_modules_titles={{show_modules_titles}}`)
|
||||
.then(r=>{return r.json()})
|
||||
@ -131,6 +162,12 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
}
|
||||
});
|
||||
|
||||
{% if current_date %}
|
||||
// we need to add one day because our weeks are starting on Monday
|
||||
calendar.setDate( getNextDayISODate("{{current_date}}") );
|
||||
{% endif %}
|
||||
changeCalendarDate();
|
||||
|
||||
function formatDate(date) {
|
||||
let year = date.getFullYear();
|
||||
let month = (date.getMonth() + 1).toString().padStart(2, '0'); // Months are zero-indexed in JavaScript
|
||||
@ -145,10 +182,17 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
var html = [];
|
||||
if (viewName === 'day') {
|
||||
html.push(currentCalendarDate('YYYY.MM.DD'));
|
||||
html.push(calendar.getDate().toDate().toLocaleString('fr-Fr', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'}));
|
||||
} else if (viewName === 'month' &&
|
||||
(!options.month.visibleWeeksCount || options.month.visibleWeeksCount > 4)) {
|
||||
html.push(currentCalendarDate('YYYY.MM'));
|
||||
html.push(
|
||||
calendar.getDate().toDate().toLocaleString('fr-Fr', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
}));
|
||||
} else {
|
||||
html.push(formatDate(calendar.getDateRangeStart()));
|
||||
html.push(' - ');
|
||||
@ -173,9 +217,65 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
return;
|
||||
}
|
||||
|
||||
setRenderRangeText();
|
||||
// setSchedules();
|
||||
changeCalendarDate();
|
||||
}
|
||||
// Update current URL when date change (newDate=ISO string)
|
||||
function updateCurrentDateInUrl(newDate) {
|
||||
// Parse the current URL
|
||||
const currentUrl = new URL(window.location.href);
|
||||
|
||||
// Access and modify the search parameters
|
||||
const searchParams = currentUrl.searchParams;
|
||||
searchParams.set('current_date', newDate); // Set the new date
|
||||
|
||||
// Create the new URL
|
||||
const newUrl = `${currentUrl.origin}${currentUrl.pathname}?${searchParams.toString()}`;
|
||||
|
||||
// Update the URL without reloading the page
|
||||
window.history.pushState({ path: newUrl }, '', newUrl);
|
||||
}
|
||||
// Update "current" date (URL and title)
|
||||
function changeCalendarDate() {
|
||||
setRenderRangeText();
|
||||
// current calendar date, ISO, without time
|
||||
const iso_date = calendar.getDateRangeStart().toDate().toISOString().split('T')[0];
|
||||
updateCurrentDateInUrl(iso_date);
|
||||
calendar_control_form.current_date = iso_date;
|
||||
}
|
||||
// View menu
|
||||
const dropdown = document.querySelector('.dropdown');
|
||||
const dropbtn = document.querySelector('.dropbtn');
|
||||
const dropdownContent = document.querySelector('.dropdown-content');
|
||||
|
||||
dropbtn.addEventListener('click', function(event) {
|
||||
dropdownContent.style.display = dropdownContent.style.display === 'block' ? 'none' : 'block';
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
document.querySelectorAll('.dropdown-content a').forEach(item => {
|
||||
item.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const selectedText = this.textContent;
|
||||
const selectedView = this.getAttribute('data-view');
|
||||
calendar.changeView(selectedView); // Change the calendar view
|
||||
dropbtn.textContent = selectedText; // Update the button text
|
||||
dropdownContent.style.display = 'none';
|
||||
});
|
||||
});
|
||||
|
||||
const showModulesTitlesCheckbox = document.getElementById('showModulesTitles');
|
||||
showModulesTitlesCheckbox.addEventListener('change', function() {
|
||||
calendar_control_form.show_modules_titles.value = (calendar_control_form.show_modules_titles.value=="1") ? "0" : "1";
|
||||
calendar_control_form.submit();
|
||||
});
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
window.addEventListener('click', function() {
|
||||
if (dropdownContent.style.display === 'block') {
|
||||
dropdownContent.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
@ -163,6 +163,7 @@ def formsemestre_edit_modimpls_codes(formsemestre_id: int):
|
||||
@permission_required(Permission.ScoView)
|
||||
def formsemestre_edt(formsemestre_id: int):
|
||||
"""Expérimental: affiche emploi du temps du semestre"""
|
||||
current_date = request.args.get("current_date")
|
||||
show_modules_titles = scu.to_bool(request.args.get("show_modules_titles", False))
|
||||
formsemestre = FormSemestre.get_formsemestre(formsemestre_id)
|
||||
cfg = ScoDocSiteConfig.query.filter_by(name="assi_morning_time").first()
|
||||
@ -177,6 +178,7 @@ def formsemestre_edt(formsemestre_id: int):
|
||||
)
|
||||
return render_template(
|
||||
"formsemestre/edt.j2",
|
||||
current_date=current_date,
|
||||
formsemestre=formsemestre,
|
||||
hour_start=hour_start,
|
||||
hour_end=hour_end,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user