From d5a6ba74486d0c7a1efb3a0ab9ac9b6880b8e15a Mon Sep 17 00:00:00 2001
From: Emmanuel Viennet <emmanuel.viennet@gmail.com>
Date: Fri, 12 May 2023 10:00:11 +0200
Subject: [PATCH] Fix JS access to css

---
 app/static/js/ref_competences.js  | 23 ---------
 app/static/js/releve-but.js       | 18 ++++----
 app/static/js/scodoc.js           | 24 ++++++++++
 app/templates/but/bulletin.j2     | 77 +++++++++++++++++--------------
 app/templates/but/refcomp_show.j2 |  4 +-
 5 files changed, 77 insertions(+), 69 deletions(-)

diff --git a/app/static/js/ref_competences.js b/app/static/js/ref_competences.js
index 892f51634..32b9f9db3 100644
--- a/app/static/js/ref_competences.js
+++ b/app/static/js/ref_competences.js
@@ -1,27 +1,4 @@
-function getCurrentScriptPath() {
-	// Get all the script elements on the page
-	var scripts = document.getElementsByTagName('script');
 
-	// Find the last script element (which is the currently executing script)
-	var currentScript = scripts[scripts.length - 1];
-
-	// Retrieve the src attribute of the script element
-	var scriptPath = currentScript.src;
-
-	return scriptPath;
-}
-function removeLastTwoComponents(path) {
-	// Split the path into individual components
-	var components = path.split('/');
-
-	// Remove the last two components (filename and enclosing directory)
-	components.splice(-2);
-
-	// Join the remaining components back into a path
-	var newPath = components.join('/');
-
-	return newPath;
-}
 class ref_competences extends HTMLElement {
 	constructor() {
 		super();
diff --git a/app/static/js/releve-but.js b/app/static/js/releve-but.js
index 5304e05d3..c1fac2113 100644
--- a/app/static/js/releve-but.js
+++ b/app/static/js/releve-but.js
@@ -15,8 +15,8 @@ class releveBUT extends HTMLElement {
 		/* Style du module */
 		const styles = document.createElement('link');
 		styles.setAttribute('rel', 'stylesheet');
-		if (location.href.split("/")[3] == "ScoDoc") {
-			styles.setAttribute('href', '/ScoDoc/static/css/releve-but.css');	// Scodoc
+		if (location.href.includes("ScoDoc")) {
+			styles.setAttribute('href', removeLastTwoComponents(getCurrentScriptPath()) + '/css/releve-but.css');	// Scodoc
 		} else {
 			styles.setAttribute('href', '/assets/styles/releve-but.css');		// Passerelle
 		}
@@ -212,8 +212,8 @@ class releveBUT extends HTMLElement {
 		this.shadow.querySelector("#identite_etudiant").innerHTML = ` <a href="${data.etudiant.fiche_url}">${data.etudiant.nomprenom}</a> `;
 		this.shadow.querySelector(".dateInscription").innerHTML += this.ISOToDate(data.semestre.inscription);
 		let output = '';
-		if(!data.options.block_moyenne_generale){
-		    output += `
+		if (!data.options.block_moyenne_generale) {
+			output += `
 			<div>
 				<div class=enteteSemestre>Moyenne</div><div class=enteteSemestre>${data.semestre.notes.value}</div>
 				<div class=rang>Rang :</div><div class=rang>${data.semestre.rang.value} / ${data.semestre.rang.total}</div>
@@ -333,7 +333,7 @@ class releveBUT extends HTMLElement {
 			} else {
 				output += `
 					<div>
-						<div class="ue ${dataUE.date_capitalisation?"capitalisee":""}">
+						<div class="ue ${dataUE.date_capitalisation ? "capitalisee" : ""}">
 							<h3>
 								${ue}${(dataUE.titre) ? " - " + dataUE.titre : ""}
 							</h3>
@@ -341,7 +341,7 @@ class releveBUT extends HTMLElement {
 								<div class=moyenne>Moyenne&nbsp;:&nbsp;${dataUE.moyenne?.value || dataUE.moyenne || "-"}</div>
 								<div class=ue_rang>Rang&nbsp;:&nbsp;${dataUE.moyenne?.rang}&nbsp;/&nbsp;${dataUE.moyenne?.total}</div>
 								<div class=info>`;
-				if(!dataUE.date_capitalisation){		
+				if (!dataUE.date_capitalisation) {
 					output += `		Bonus&nbsp;:&nbsp;${dataUE.bonus || 0}&nbsp;- 
 									Malus&nbsp;:&nbsp;${dataUE.malus || 0}`;
 				} else {
@@ -359,12 +359,12 @@ class releveBUT extends HTMLElement {
 				</div>*/
 				output += "</div>";
 
-				if(!dataUE.date_capitalisation){
-					output += 
+				if (!dataUE.date_capitalisation) {
+					output +=
 						this.synthese(data, dataUE.ressources) +
 						this.synthese(data, dataUE.saes);
 				}
-						
+
 				output += "</div>";
 			}
 		});
diff --git a/app/static/js/scodoc.js b/app/static/js/scodoc.js
index efd6e9436..40ada69dd 100644
--- a/app/static/js/scodoc.js
+++ b/app/static/js/scodoc.js
@@ -256,3 +256,27 @@ class ScoFieldEditor {
     }
 }
 
+function getCurrentScriptPath() {
+    // Get all the script elements on the page
+    var scripts = document.getElementsByTagName('script');
+
+    // Find the last script element (which is the currently executing script)
+    var currentScript = scripts[scripts.length - 1];
+
+    // Retrieve the src attribute of the script element
+    var scriptPath = currentScript.src;
+
+    return scriptPath;
+}
+function removeLastTwoComponents(path) {
+    // Split the path into individual components
+    var components = path.split('/');
+
+    // Remove the last two components (filename and enclosing directory)
+    components.splice(-2);
+
+    // Join the remaining components back into a path
+    var newPath = components.join('/');
+
+    return newPath;
+}
diff --git a/app/templates/but/bulletin.j2 b/app/templates/but/bulletin.j2
index ddf337b3b..221e56fbb 100644
--- a/app/templates/but/bulletin.j2
+++ b/app/templates/but/bulletin.j2
@@ -7,43 +7,50 @@
 
 {% block app_content %}
 
-{% include 'bul_head.j2' %}
+	{% include 'bul_head.j2' %}
 
-<releve-but></releve-but>
-<script src="{{scu.STATIC_DIR}}/js/releve-but.js"></script>
+	<releve-but></releve-but>
 
-{% include 'bul_foot.j2' %}
+	{% include 'bul_foot.j2' %}
 
-<script>
-	let dataSrc = "{{bul_url|safe}}";
-	fetch(dataSrc)
-		.then(r => { return r.json() })
-		.then(json => {
-			let releve = document.querySelector("releve-but");
-			releve.showData = json;
-			// Syle custom à ajouter
-			let style = document.createElement("style");
-			style.textContent = `
-				.module>div, 
-				.dateInscription,
-				.numerosEtudiant,
-				.dateNaissance{
-					display: none;
-				}`;
-			releve.shadowRoot.appendChild(style);
-		});
-	// .catch(error => {
-	// 	let div = document.createElement("div");
-	// 	div.innerText = "Une erreur s'est produite lors du transfert des données.";
-	// 	div.style.fontSize = "24px";
-	// 	div.style.color = "#d93030";
+{% endblock %}
 
-	// 	let releve = document.querySelector("releve-but");
-	// 	releve.after(div);
-	// 	releve.remove();
+{% block scripts %}
+	{{super()}}
 
-	// 	throw 'Fin du script - données invalides';
-	// });
-	document.querySelector("html").style.scrollBehavior = "smooth";
-</script>
-{% endblock %}
\ No newline at end of file
+	<script src="{{scu.STATIC_DIR}}/js/releve-but.js"></script>
+
+	<script>
+		let dataSrc = "{{bul_url|safe}}";
+		fetch(dataSrc)
+			.then(r => { return r.json() })
+			.then(json => {
+				let releve = document.querySelector("releve-but");
+				releve.showData = json;
+				// Syle custom à ajouter
+				let style = document.createElement("style");
+				style.textContent = `
+					.module>div,
+					.dateInscription,
+					.numerosEtudiant,
+					.dateNaissance{
+						display: none;
+					}`;
+				releve.shadowRoot.appendChild(style);
+			});
+		// .catch(error => {
+		// 	let div = document.createElement("div");
+		// 	div.innerText = "Une erreur s'est produite lors du transfert des données.";
+		// 	div.style.fontSize = "24px";
+		// 	div.style.color = "#d93030";
+
+		// 	let releve = document.querySelector("releve-but");
+		// 	releve.after(div);
+		// 	releve.remove();
+
+		// 	throw 'Fin du script - données invalides';
+		// });
+		document.querySelector("html").style.scrollBehavior = "smooth";
+	</script>
+
+{% endblock %}
diff --git a/app/templates/but/refcomp_show.j2 b/app/templates/but/refcomp_show.j2
index 5b69da1f5..7ccc0372c 100644
--- a/app/templates/but/refcomp_show.j2
+++ b/app/templates/but/refcomp_show.j2
@@ -19,8 +19,6 @@
     <ref-competences></ref-competences>
 </div>
 
-<script src="{{scu.STATIC_DIR}}/js/ref_competences.js"></script>
-
 {% include "but/refcomp_parcours_niveaux.j2" %}
 
 
@@ -49,6 +47,8 @@
 {% block scripts %}
 {{super()}}
 
+<script src="{{scu.STATIC_DIR}}/js/ref_competences.js"></script>
+
 <script>
     $(function () {
         let data_url = "{{data_source}}";