From fbc501bf3c87fb3439331f1ed4062aff369b93fb Mon Sep 17 00:00:00 2001 From: Emmanuel Viennet Date: Tue, 14 Nov 2023 23:16:25 +0100 Subject: [PATCH] EDT: navigation prev/next week --- app/static/css/edt.css | 64 +++++++++++++++++--------- app/templates/formsemestre/edt.j2 | 75 ++++++++++++++++++++++--------- 2 files changed, 98 insertions(+), 41 deletions(-) diff --git a/app/static/css/edt.css b/app/static/css/edt.css index 135be6530..f97c91e85 100644 --- a/app/static/css/edt.css +++ b/app/static/css/edt.css @@ -1,34 +1,58 @@ - .toastui-calendar-template-time { - padding: 4px; - word-break: break-all; - white-space: normal !important; - align-items: normal !important; - font-size: 12pt; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + padding: 4px; + word-break: break-all; + white-space: normal !important; + align-items: normal !important; + font-size: 12pt; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .group-name { - color:rgb(25, 113, 25); + color: rgb(25, 113, 25); } .group-edt { - color: red; - background-color: yellow; + color: red; + background-color: yellow; } +#renderRange { + margin-left: 16px; +} .toastui-calendar-timegrid { - height: 100% !important; - min-height: auto !important; + height: 100% !important; + min-height: auto !important; } -.toastui-calendar-time{ - height: calc(100% - 44px) !important; +.toastui-calendar-time { + height: calc(100% - 44px) !important; } -.toastui-calendar-week-view-day-names, .toastui-calendar-time { - overflow: hidden !important; +.toastui-calendar-week-view-day-names, +.toastui-calendar-time { + overflow: hidden !important; } -.ic-arrow-line-left { - background: url('../icons/ic-arrow-line-left.png') no-repeat; +.btn { + border-radius: 25px; + border-color: #ddd; } -.ic-arrow-line-right { - background: url('../icons/ic-arrow-line-right.png') no-repeat; + +.btn:hover { + border: solid 1px #bbb; + background-color: #fff; +} + +.btn:active { + background-color: #f9f9f9; + border: solid 1px #bbb; + outline: none; +} + +.btn:disabled { + background-color: #f9f9f9; + border: solid 1px #ddd; + color: #bbb; +} + +.btn:focus:active, +.btn:focus, +.btn:active { + outline: none; } diff --git a/app/templates/formsemestre/edt.j2 b/app/templates/formsemestre/edt.j2 index d8c92eb48..267d05e81 100644 --- a/app/templates/formsemestre/edt.j2 +++ b/app/templates/formsemestre/edt.j2 @@ -18,10 +18,10 @@ @@ -41,7 +41,12 @@ let hm_formatter = new Intl.DateTimeFormat('default', { hour12: false }); +function getDataAction(target) { + return target.dataset ? target.dataset.action : target.getAttribute('data-action'); +} + document.addEventListener('DOMContentLoaded', function() { + document.getElementById('menu-navi').addEventListener('click', onClickNavi); const Calendar = tui.Calendar; const container = document.getElementById('calendar'); const options = { @@ -86,25 +91,7 @@ document.addEventListener('DOMContentLoaded', function() { }; const calendar = new Calendar(container, options); - //let events = [ - // { - // id: "12456", - // start:"2023-11-10T09:30", - // end:"2023-11-10T11:30", - // backgroundColor:"lightblue", - // color: "red", // couleur du texte - // location: "quelque part", - // title:'Essai saisir', - // }, - // { - // id: "12457", - // start:"2023-11-10T09:30", - // end:"2023-11-10T11:50", - // backgroundColor:"lightgreen", - // color: "blue", // couleur du texte - // title:'TD groupe 2', - // }, - //]; + fetch(`${SCO_URL}/../api/formsemestre/{{formsemestre.id}}/edt`) .then(r=>{return r.json()}) .then(events=>{ @@ -115,6 +102,52 @@ document.addEventListener('DOMContentLoaded', function() { calendar.createEvents(events); } }); + + function formatDate(date) { + let year = date.getFullYear(); + let month = (date.getMonth() + 1).toString().padStart(2, '0'); // Months are zero-indexed in JavaScript + let day = date.getDate().toString().padStart(2, '0'); + return `${day}/${month}/${year}`; + } + + function setRenderRangeText() { + var renderRange = document.getElementById('renderRange'); + var options = calendar.getOptions(); + var viewName = calendar.getViewName(); + + var html = []; + if (viewName === 'day') { + html.push(currentCalendarDate('YYYY.MM.DD')); + } else if (viewName === 'month' && + (!options.month.visibleWeeksCount || options.month.visibleWeeksCount > 4)) { + html.push(currentCalendarDate('YYYY.MM')); + } else { + html.push(formatDate(calendar.getDateRangeStart())); + html.push(' - '); + html.push(formatDate(calendar.getDateRangeEnd())); + } + renderRange.innerHTML = html.join(''); + } + function onClickNavi(e) { + var action = getDataAction(e.target); + + switch (action) { + case 'move-prev': + calendar.prev(); + break; + case 'move-next': + calendar.next(); + break; + case 'move-today': + calendar.today(); + break; + default: + return; + } + + setRenderRangeText(); + // setSchedules(); + } });