begin of schedule editor

public/css/contextLoader.min.css

@@ -0,0 +1 @@
+.timeline-item{background: #fff;border: 1px solid;border-color: #e5e6e9 #dfe0e4 #d0d1d5;border-radius: 3px;padding: 2%;margin: 0 auto;width: 100%;height: 100%;}@keyframes placeHolderShimmer{0%{ background-position: -468px 0;}  100%{background-position: 468px 0;}}.animated-background{animation-duration: 1s;animation-fill-mode: forwards;animation-iteration-count: infinite;animation-name: placeHolderShimmer;animation-timing-function: linear;background: #f6f7f8;background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);background-size: 800px 104px;height: 96px;position: relative;}.background-masker{background: #fff;position: absolute;}.background-masker.header-top,.background-masker.header-bottom,.background-masker.subheader-bottom{top: 0;left: 40px;right: 0px;height: 10px;}.background-masker.header-left,.background-masker.subheader-left,.background-masker.header-right,.background-masker.subheader-right{top: 10px;left: 40px;height: 8px;width: 10px;}.background-masker.header-bottom{top: 18px;height: 6px;}.background-masker.subheader-left,.background-masker.subheader-right{top: 24px;height: 6px;}.background-masker.header-right,.background-masker.subheader-right{width: auto;left: 300px;right: 0px;}.background-masker.subheader-right{left: 230px;}.background-masker.subheader-bottom{top: 30px;height: 10px;}.background-masker.content-top,.background-masker.content-second-line,.background-masker.content-third-line,.background-masker.content-second-end,.background-masker.content-third-end,.background-masker.content-first-end{top: 40px;left: 0;right: 0;height: 6px;}.background-masker.content-top{height: 20px;}.background-masker.content-first-end,.background-masker.content-second-end,.background-masker.content-third-end{width: auto;left: 380px;right: 0;top: 60px;height: 8px;}.background-masker.content-second-line{top: 68px;}.background-masker.content-second-end{left: 420px;top: 74px;}.background-masker.content-third-line{top: 82px;}.background-masker.content-third-end{left: 300px;top: 88px;}

public/css/custom.css

@@ -3,6 +3,64 @@
   word-break: break-word;
 }
 
+.lds-ellipsis {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-ellipsis div {
+  position: absolute;
+  top: 33px;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: #dee2e6;
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.lds-ellipsis div:nth-child(1) {
+  left: 8px;
+  animation: lds-ellipsis1 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(2) {
+  left: 8px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(3) {
+  left: 32px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(4) {
+  left: 56px;
+  animation: lds-ellipsis3 0.6s infinite;
+}
+
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+@keyframes lds-ellipsis2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(24px, 0);
+  }
+}
+
+
 .container-fluid {
   padding: 0px;
 }

public/js/plugins/contextLoader.min.js

@@ -0,0 +1,2 @@
+
+contextLoader={};contextLoader.htmlContent='<div class="timeline-item"><div class="animated-background"><div class="background-masker header-top"></div><div class="background-masker header-left"></div><div class="background-masker header-right"></div><div class="background-masker header-bottom"></div><div class="background-masker subheader-left"></div><div class="background-masker subheader-right"></div><div class="background-masker subheader-bottom"></div><div class="background-masker content-top"></div><div class="background-masker content-first-end"></div><div class="background-masker content-second-line"></div><div class="background-masker content-second-end"></div><div class="background-masker content-third-line"></div><div class="background-masker content-third-end"></div></div></div>';contextLoader.addLoader = function(theDiv){document.querySelector(theDiv).innerHTML = contextLoader.htmlContent;}

public/js/plugins/schedule/editor.js

@@ -0,0 +1,38 @@
+function initScheduleEditor(id, periode, niveau)
+{
+    $.ajax({
+        type: 'GET',
+        url: '/api/schedule/editor/init?api_token='+api_token,
+        success: function (template) {
+            $("#"+id).html(template);
+            for (let pniveau = 1; pniveau <= 3; pniveau++) {
+                for (let pperiode = 1; pperiode <= 3; pperiode++) {
+                    loadCourse(pniveau,pperiode);
+                }
+            }
+            initAutoComplete("AutoComplete");
+        },
+        error:  function () {
+            showNotification('error','Impossible d\'initialiser l\'éditeur d\'horaire ...','top', 'center')
+        }
+    })
+}
+
+function loadTemplate(id)
+{
+    $.get('/api/schedule/editor/init?api_token='+api_token, function ( data ) {$("#"+id).html(data);});
+}
+
+function loadCourse(periode,niveau)
+{
+    $.ajax({
+        type: 'GET',
+        url: '/api/schedule/editor/course/'+niveau+'/'+periode+'?api_token='+api_token,
+        success: function (course) {
+            $("#container-"+niveau+"-"+periode).html(course);
+        },
+        error:  function () {
+            showNotification('error','Impossible de charger les cours ...','top', 'center')
+        }
+    })
+}