Merge pull request 'Partition editor : progress bar' (#678) from lehmann/ScoDoc-Front:master into sco96

Reviewed-on: #678

app/static/css/partition_editor.css

@@ -394,6 +394,7 @@ body.editionActivated .filtres .nonEditable .move {
 	padding: 4px 8px;
 	margin-bottom: 16px;
 	border-radius: 4px;
+	position: relative;
 }
 
 #zoneChoix .autoAffectation>select {
@@ -415,6 +416,23 @@ body.editionActivated .filtres .nonEditable .move {
 	margin-bottom: 4px;
 	width: fit-content;
 }
+#zoneChoix .autoAffectation .progress {
+	position: absolute;
+	top: 100%;
+	left: 0;
+	right: 0;
+	height: 4px;
+	background: #717171;
+}
+
+#zoneChoix .autoAffectation .progress>div {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: calc(100% * var(--nombre) / var(--reference));
+	bottom: 0;
+	background: #0c9;
+}
 
 #zoneChoix .etudiants>div {
 	background: #FFF;

app/templates/scolar/partition_editor.j2

@@ -47,6 +47,10 @@
 				vers le groupe
 				<select name="affectationTo" id="affectationTo"></select>
 				<div class="affectationGo">Valider</div>
+
+				<div class="progress">
+					<div></div>
+				</div>
 			</div>	
 		</details>
 		
@@ -430,6 +434,7 @@
 	/****************************/
 	/* Affectation à un groupe  */
 	/****************************/
+	var progressNb = 0;
 	function affectationGo() {
 		let from = document.querySelector("#affectationFrom").value;
 		let to = document.querySelector("#affectationTo").value;
@@ -450,7 +455,12 @@
 			})
 		}
 
-		console.log(elements);
+		let progress = document.querySelector("#zoneChoix .autoAffectation .progress");
+		if(elements.length > 1){
+			progress.style.setProperty('--reference', elements.length);
+			progress.style.setProperty('--nombre', 0);
+			progressNb = 0;
+		}
 
 		elements.forEach(groupeSelected => {
 			if (to[0] != "n") {
@@ -502,6 +512,8 @@
 					this.classList.remove("saving");
 					this.classList.add("saved");
 					setTimeout(() => { this.classList.remove("saved") }, 800);
+					let progress = document.querySelector("#zoneChoix .autoAffectation .progress");
+					progress.style.setProperty('--nombre', ++progressNb);
 					return;
 				}
 				throw 'Les données retournées ne sont pas valides';