Merge branch 'master' of https://scodoc.org/git/lehmann/ScoDoc-Front into lehmann-master

app/static/css/releve-but.css

@@ -2,19 +2,6 @@
 /*******************/
 /* Styles généraux */
 /*******************/
-:root{
-    --couleurPrincipale: rgb(240,250,255);
-    --couleurFondTitresUE: rgb(206,255,235);
-    --couleurFondTitresRes: rgb(125, 170, 255);
-    --couleurFondTitresSAE: rgb(255, 190, 69);
-    --couleurSecondaire: #fec;
-    --couleurIntense: #c09;
-    --couleurSurlignage: rgba(232, 255, 132, 0.47);
-}
-body{
-    font-family: arial;
-    background: #f0f0f0;
-}
 .wait{
     width: 60px;
     height: 6px;
@@ -26,6 +13,13 @@ body{
     100%{transform: translateY(40px) rotate(1turn);}
 }
 main{
+	--couleurPrincipale: rgb(240,250,255);
+    --couleurFondTitresUE: rgb(206,255,235);
+    --couleurFondTitresRes: rgb(125, 170, 255);
+    --couleurFondTitresSAE: rgb(255, 190, 69);
+    --couleurSecondaire: #fec;
+    --couleurIntense: #c09;
+    --couleurSurlignage: rgba(232, 255, 132, 0.47);
     max-width: 1000px;
     margin: auto;
     display: none;
@@ -82,9 +76,7 @@ section>div:nth-child(1){
 .hide_coef .synthese em,
 .hide_coef .eval>em,
 .hide_date_inscr .dateInscription,
-.hide_ects .ects
-
-{
+.hide_ects .ects{
     display: none;
 }
 
@@ -167,9 +159,6 @@ section>div:nth-child(1){
     margin: 4px 0 2px 0;
     overflow: auto;
 }
-.sae .module, .sae .module h3 {
-    background: #d3ffff;
-}
 h3{
     display: flex;
     align-items: center;
@@ -180,6 +169,9 @@ h3{
     font-size: 16px;
     background: var(--couleurSecondaire);
 }
+.sae .module, .sae h3{
+	background: var(--couleurFondTitresSAE);
+}
 
 .moyenne{
     font-weight: bold;

app/static/js/bulletin-but.js

@@ -1,242 +0,0 @@
-/* Il manque :
-	- rangs
-	- Synthèse : moyenne UE
-	- Synthèse : min, max, moy classe
-	- Synthèse : absences
-	- Eval : absences
-
-Moi : 
-	"show_codemodules" :true,
-	"show_minmax": true, 
-	"show_minmax_eval": true, 
-	"show_minmax_mod": false, 
-	"show_mod_rangs": false, 
-	"show_moypromo": true, 
-	"show_rangs": true, 
-	"show_ue_cap_current": true, 
-	"show_ue_cap_details": true, 
-	"show_ue_rangs": true, 
-	"show_uevalid": true,
-*/
-/*****************************/
-/* Gestionnaire d'événements */
-/*****************************/
-document.querySelectorAll(".CTA_Liste").forEach(e => {
-	e.addEventListener("click", listeOnOff)
-})
-
-function listeOnOff() {
-	this.parentElement.parentElement.classList.toggle("listeOff")
-}
-/*****************************/
-/* Recupération et affichage */
-/*****************************/
-
-fetch(dataSrc)
-	.then(r => { return r.json() })
-	.then(json => showData(json))
-
-function showData(data) {
-	showInformations(data);
-	showSemestre(data);
-	showSynthese(data);
-	showEvaluations(data);
-
-	setOptions(data.options);
-
-	document.body.classList.add("ready");
-}
-
-/********************************/
-/* Informations sur l'étudiant  */
-/********************************/
-function showInformations(data) {
-	document.querySelector(".studentPic").src = data.etudiant.photo_url || "default_Student.svg";
-
-	let output = `
-        <div class=info_etudiant>
-            <div class=civilite>
-                ${civilite(data.etudiant.civilite)}
-                ${data.etudiant.nom}
-                ${data.etudiant.prenom}`;
-
-	if (data.etudiant.date_naissance) {
-		output += `né${(data.etudiant.civilite == "F") ? "e" : ""} le ${ISOToDate(data.etudiant.date_naissance)}`;
-	}
-
-	output += `
-            </div>
-            <div class=numerosEtudiant>
-                Numéro étudiant : ${data.etudiant.code_nip}
-                Code INE : ${data.etudiant.code_ine}
-            </div>
-            <div>${data.formation.titre}</div>
-
-        </div>
-    `;
-
-	document.querySelector(".infoEtudiant").innerHTML = output;
-}
-
-/*******************************/
-/* Information sur le semestre */
-/*******************************/
-function showSemestre(data) {
-	document.querySelector("h2").innerHTML += data.semestre.numero;
-	document.querySelector(".dateInscription").innerHTML += ISOToDate(data.semestre.inscription);
-	let 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>
-			<div>Max. promo. :</div><div>${data.semestre.notes.max}</div>
-			<div>Moy. promo. :</div><div>${data.semestre.notes.moy}</div>
-			<div>Min. promo. :</div><div>${data.semestre.notes.min}</div>
-		</div>
-		${data.semestre.groupes.map(groupe => {
-		return `
-					<div>
-						<div class=enteteSemestre>Groupe</div><div class=enteteSemestre>${groupe.nom}</div>
-						<div class=rang>Rang :</div><div class=rang>${groupe.rang.value} / ${groupe.rang.total}</div>
-						<div>Max. groupe :</div><div>${groupe.notes.max}</div>
-						<div>Moy. groupe :</div><div>${groupe.notes.min}</div>
-						<div>Min. groupe :</div><div>${groupe.notes.min}</div>
-					</div>
-				`;
-	}).join("")
-		}
-	`;
-	document.querySelector(".infoSemestre").innerHTML = output;
-}
-
-/*******************************/
-/* Synthèse                    */
-/*******************************/
-function showSynthese(data) {
-	let output = ``;
-	Object.entries(data.ues).forEach(([ue, dataUE]) => {
-		output += `
-			<div class=ue>
-				<h3>
-					${(dataUE.competence) ? dataUE.competence + " - " : ""}${ue}
-				</h3>
-				<div>
-					<div class=moyenne>Moyenne&nbsp;:&nbsp;${dataUE.moyenne?.value || "-"}</div>
-					<div class=info>
-						Bonus&nbsp;:&nbsp;${dataUE.bonus || 0}&nbsp;- 
-						Malus&nbsp;:&nbsp;${dataUE.malus || 0}
-						<span class=ects>&nbsp;-
-							ECTS&nbsp;:&nbsp;${dataUE.ECTS.acquis}&nbsp;/&nbsp;${dataUE.ECTS.total}
-						</span>
-					</div>
-				</div>
-				<div class=absences>
-					<div>Abs&nbsp;N.J.</div><div>${dataUE.absences?.injustifie || 0}</div>
-					<div>Total</div><div>${dataUE.absences?.total || 0}</div>
-				</div>
-			</div>
-			${synthese(dataUE.ressources)}
-			${synthese(dataUE.saes)}
-		`;
-	});
-	document.querySelector(".synthese").innerHTML = output;
-
-	function synthese(modules) {
-		let output = "";
-		Object.entries(modules).forEach(([module, dataModule]) => {
-			let titre = data.ressources[module]?.titre || data.saes[module]?.titre;
-			let url = data.ressources[module]?.url || data.saes[module]?.url;
-			output += `
-				<div class=syntheseModule>
-					<div><a href="${url}">${module}&nbsp;- ${titre}</a></div>
-					<div>
-						${dataModule.moyenne}
-						<em>Coef. ${dataModule.coef}</em>
-					</div>
-				</div>
-			`;
-		})
-		return output;
-	}
-}
-/*******************************/
-/* Evaluations                 */
-/*******************************/
-function showEvaluations(data) {
-	document.querySelector(".evaluations").innerHTML = module(data.ressources);
-	document.querySelector(".sae").innerHTML += module(data.saes);
-
-	function module(module) {
-		let output = "";
-		Object.entries(module).forEach(([numero, content]) => {
-			output += `
-				<div>
-					<div class=module>
-						<h3><a href="${content.url}">${numero} - ${content.titre}</a></h3>
-						
-						<div class=absences>
-							<div>Abs&nbsp;inj.</div><div>${content.absences?.injustifie || 0}</div>
-							<div>Total</div><div>${content.absences?.total || 0}</div>
-						</div>
-					</div>
-					${evaluation(content.evaluations)}
-				</div>
-			`;
-		})
-		return output;
-	}
-
-	function evaluation(evaluations) {
-		let output = "";
-		evaluations.forEach(eval => {
-			output += `
-				<div class=eval>
-					<div><a href="${eval.url}">${eval.description}</a></div>
-					<div>
-						${eval.note.value}
-						<em>Coef. ${eval.coef}</em>
-					</div>
-					<div class=complement>
-						<div>Coef</div><div>${eval.coef}</div>
-						<div>Max. promo.</div><div>${eval.note.max}</div>
-						<div>Moy. promo.</div><div>${eval.note.moy}</div>
-						<div>Min. promo.</div><div>${eval.note.min}</div>
-						${Object.entries(eval.poids).map(([UE, poids]) => {
-				return `
-								<div>Poids ${UE}</div>
-								<div>${poids}</div>
-							`;
-			}).join("")}
-					</div>
-				</div>
-			`;
-		})
-		return output;
-	}
-}
-
-/********************/
-/* Options          */
-/********************/
-function setOptions(options) {
-	Object.entries(options).forEach(([option, value]) => {
-		if (value === false) {
-			document.body.classList.add(option.replace("show", "hide"))
-		}
-	})
-}
-
-
-/********************/
-/* Fonctions d'aide */
-/********************/
-function civilite(txt) {
-	switch (txt) {
-		case "M": return "M.";
-		case "F": return "Mme";
-		default: return "";
-	}
-}
-
-function ISOToDate(ISO) {
-	return ISO.split("-").reverse().join("/");
-}

app/static/js/releve-but.js

@@ -0,0 +1,329 @@
+class releveBUT extends HTMLElement {
+	constructor(){
+		super();
+		this.shadow = this.attachShadow({mode: 'open'});
+
+		/* Config par defaut */
+		this.config = {
+			showURL: true
+		};
+		
+		/* Template du module */
+		this.shadow.innerHTML = this.template();
+		
+		/* Style du module */
+		const styles = document.createElement('link');
+		styles.setAttribute('rel', 'stylesheet');
+		styles.setAttribute('href', '/ScoDoc/static/css/releve-but.css');
+		this.shadow.appendChild(styles);	
+
+		this.shadow.querySelectorAll(".CTA_Liste").forEach(e => {
+			e.addEventListener("click", this.listeOnOff)
+		})
+
+		
+	}
+	listeOnOff() {
+		this.parentElement.parentElement.classList.toggle("listeOff")
+	}
+
+	set setConfig(config){
+		this.config.showURL = config.showURL ?? this.config.showURL;
+	}
+
+	set showData(data) {	
+		this.showInformations(data);
+		this.showSemestre(data);
+		this.showSynthese(data);
+		this.showEvaluations(data);
+
+		this.setOptions(data.options);
+
+		this.shadow.children[0].classList.add("ready");
+	}
+
+
+	template(){
+		return `
+<div>	
+	<div class="wait"></div>
+	<main class="releve">
+		<!--------------------------->
+		<!-- Info. étudiant        -->
+		<!--------------------------->
+		<section class=etudiant>
+			<img class=studentPic src="" alt="Photo de l'étudiant" width=100 height=120>
+			<div class=infoEtudiant></div>
+		</section>
+
+		<!--------------------------->
+		<!-- Semestre              -->
+		<!--------------------------->
+		<section>
+			<h2>Semestre </h2>
+			<div class=dateInscription>Inscrit le </div>
+			<em>Les moyennes servent à situer l'étudiant dans la promotion et ne correspondent pas à des validations de
+				compétences ou d'UE.</em>
+			<div class=infoSemestre></div>
+		</section>
+
+		<!--------------------------->
+		<!-- Synthèse              -->
+		<!--------------------------->
+		<section>
+			<div>
+				<div>
+					<h2>Synthèse</h2>
+					<em>La moyenne des ressources dans une UE dépend des poids donnés aux évaluations.</em>
+				</div>
+				<div class=CTA_Liste>
+					Liste <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none"
+						stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<path d="M18 15l-6-6-6 6" />
+					</svg>
+				</div>
+			</div>
+			<div class=synthese></div>
+		</section>
+
+		<!--------------------------->
+		<!-- Evaluations           -->
+		<!--------------------------->
+		<section>
+			<div>
+				<h2>Ressources</h2>
+				<div class=CTA_Liste>
+					Liste <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none"
+						stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<path d="M18 15l-6-6-6 6" />
+					</svg>
+				</div>
+			</div>
+			<div class=evaluations></div>
+		</section>
+
+		<section>
+			<div>
+				<h2>SAÉ</h2>
+				<div class=CTA_Liste>
+					Liste <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none"
+						stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<path d="M18 15l-6-6-6 6" />
+					</svg>
+				</div>
+			</div>
+			<div class=sae></div>
+		</section>
+
+	</main>
+</div>`;
+	}
+
+	/********************************/
+	/* Informations sur l'étudiant  */
+	/********************************/
+	showInformations(data) {
+		this.shadow.querySelector(".studentPic").src = data.etudiant.photo_url || "default_Student.svg";
+
+		let output = `
+			<div class=info_etudiant>
+				<div class=civilite>
+					${this.civilite(data.etudiant.civilite)}
+					${data.etudiant.nom}
+					${data.etudiant.prenom}`;
+
+		if (data.etudiant.date_naissance) {
+			output += ` né${(data.etudiant.civilite == "F") ? "e" : ""} le ${this.ISOToDate(data.etudiant.date_naissance)}`;
+		}
+
+		output += `
+				</div>
+				<div class=numerosEtudiant>
+					Numéro étudiant : ${data.etudiant.code_nip} - 
+					Code INE : ${data.etudiant.code_ine}
+				</div>
+				<div>${data.formation.titre}</div>
+			</div>
+		`;
+
+		this.shadow.querySelector(".infoEtudiant").innerHTML = output;
+	}
+
+	/*******************************/
+	/* Information sur le semestre */
+	/*******************************/
+	showSemestre(data) {
+		this.shadow.querySelector("h2").innerHTML += data.semestre.numero;
+		this.shadow.querySelector(".dateInscription").innerHTML += this.ISOToDate(data.semestre.inscription);
+		let 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>
+				<div>Max. promo. :</div><div>${data.semestre.notes.max}</div>
+				<div>Moy. promo. :</div><div>${data.semestre.notes.moy}</div>
+				<div>Min. promo. :</div><div>${data.semestre.notes.min}</div>
+			</div>
+			${data.semestre.groupes.map(groupe => {
+			return `
+						<div>
+							<div class=enteteSemestre>Groupe</div><div class=enteteSemestre>${groupe.nom}</div>
+							<div class=rang>Rang :</div><div class=rang>${groupe.rang.value} / ${groupe.rang.total}</div>
+							<div>Max. groupe :</div><div>${groupe.notes.max}</div>
+							<div>Moy. groupe :</div><div>${groupe.notes.min}</div>
+							<div>Min. groupe :</div><div>${groupe.notes.min}</div>
+						</div>
+					`;
+		}).join("")
+			}
+		`;
+		this.shadow.querySelector(".infoSemestre").innerHTML = output;
+	}
+
+	/*******************************/
+	/* Synthèse                    */
+	/*******************************/
+	showSynthese(data) {
+		let output = ``;
+		Object.entries(data.ues).forEach(([ue, dataUE]) => {
+			output += `
+				<div class=ue>
+					<h3>
+						${(dataUE.competence) ? dataUE.competence + " - " : ""}${ue}
+					</h3>
+					<div>
+						<div class=moyenne>Moyenne&nbsp;:&nbsp;${dataUE.moyenne?.value || "-"}</div>
+						<div class=info>
+							Bonus&nbsp;:&nbsp;${dataUE.bonus || 0}&nbsp;- 
+							Malus&nbsp;:&nbsp;${dataUE.malus || 0}
+							<span class=ects>&nbsp;-
+								ECTS&nbsp;:&nbsp;${dataUE.ECTS.acquis}&nbsp;/&nbsp;${dataUE.ECTS.total}
+							</span>
+						</div>
+					</div>
+					<div class=absences>
+						<div>Abs&nbsp;N.J.</div><div>${dataUE.absences?.injustifie || 0}</div>
+						<div>Total</div><div>${dataUE.absences?.total || 0}</div>
+					</div>
+				</div>
+				${this.synthese(data, dataUE.ressources)}
+				${this.synthese(data, dataUE.saes)}
+			`;
+		});
+		this.shadow.querySelector(".synthese").innerHTML = output;
+	}
+	synthese(data, modules) {
+		let output = "";
+		Object.entries(modules).forEach(([module, dataModule]) => {
+			let titre = data.ressources[module]?.titre || data.saes[module]?.titre;
+			let url = data.ressources[module]?.url || data.saes[module]?.url;
+			output += `
+				<div class=syntheseModule>
+					<div>${this.URL(url, `${module}&nbsp;- ${titre}`)}</div>
+					<div>
+						${dataModule.moyenne}
+						<em>Coef. ${dataModule.coef}</em>
+					</div>
+				</div>
+			`;
+		})
+		return output;
+	}
+	
+	/*******************************/
+	/* Evaluations                 */
+	/*******************************/
+	showEvaluations(data) {
+		this.shadow.querySelector(".evaluations").innerHTML = this.module(data.ressources);
+		this.shadow.querySelector(".sae").innerHTML += this.module(data.saes);
+	}
+	module(module) {
+		let output = "";
+		Object.entries(module).forEach(([numero, content]) => {
+			output += `
+				<div>
+					<div class=module>
+						<h3>${this.URL(content.url, `${numero} - ${content.titre}`)}</h3>
+						<div>
+							<div class=moyenne>Moyenne&nbsp;indicative&nbsp;:&nbsp;${content.moyenne.value}</div>
+							<div class=info>
+								Classe&nbsp;:&nbsp;${content.moyenne.moy}&nbsp;- 
+								Max&nbsp;:&nbsp;${content.moyenne.max}&nbsp;-
+								Min&nbsp;:&nbsp;${content.moyenne.min} 
+							</div>
+						</div>
+						<div class=absences>
+							<div>Abs&nbsp;inj.</div><div>${content.absences?.injustifie || 0}</div>
+							<div>Total</div><div>${content.absences?.total || 0}</div>
+						</div>
+					</div>
+					${this.evaluation(content.evaluations)}
+				</div>
+			`;
+		})
+		return output;
+	}
+
+	evaluation(evaluations) {
+		let output = "";
+		evaluations.forEach((evaluation) => {
+			output += `
+				<div class=eval>
+					<div>${this.URL(evaluation.url, evaluation.description)}</div>
+					<div>
+						${evaluation.note.value}
+						<em>Coef. ${evaluation.coef}</em>
+					</div>
+					<div class=complement>
+						<div>Coef</div><div>${evaluation.coef}</div>
+						<div>Max. promo.</div><div>${evaluation.note.max}</div>
+						<div>Moy. promo.</div><div>${evaluation.note.moy}</div>
+						<div>Min. promo.</div><div>${evaluation.note.min}</div>
+						${Object.entries(evaluation.poids).map(([UE, poids]) => {
+				return `
+								<div>Poids ${UE}</div>
+								<div>${poids}</div>
+							`;
+			}).join("")}
+					</div>
+				</div>
+			`;
+		})
+		return output;
+	}
+
+	/********************/
+	/* Options          */
+	/********************/
+	setOptions(options) {
+		Object.entries(options).forEach(([option, value]) => {
+			if (value === false) {
+				document.body.classList.add(option.replace("show", "hide"))
+			}
+		})
+	}
+
+
+	/********************/
+	/* Fonctions d'aide */
+	/********************/
+	URL(href, content){
+		if(this.config.showURL){
+			return `<a href=${href}>${content}</a>`;
+		} else {
+			return content;
+		}
+	}
+	civilite(txt) {
+		switch (txt) {
+			case "M": return "M.";
+			case "F": return "Mme";
+			default: return "";
+		}
+	}
+
+	ISOToDate(ISO) {
+		return ISO.split("-").reverse().join("/");
+	}
+
+}
+customElements.define('releve-but', releveBUT);

app/templates/but/bulletin.html

@@ -2,87 +2,32 @@
 
 {% block styles %}
 {{super()}}
-<link rel="stylesheet" href="/ScoDoc/static/css/bulletin-but.css">
 {% endblock %}
 
 {% block app_content %}
 
-<div class="wait"></div>
-<main class="releve">
-    <!--------------------------->
-    <!-- Info. étudiant        -->
-    <!--------------------------->
-    <section class=etudiant>
-        <img class=studentPic src="" alt="Photo de l'étudiant" width=100 height=120>
-        <div class=infoEtudiant></div>
-    </section>
+<releve-but></releve-but>
 
-    <!--------------------------->
-    <!-- Semestre              -->
-    <!--------------------------->
-    <section>
-        <h2>Semestre </h2>
-        <div class=dateInscription>Inscrit le </div>
-        <em>Les moyennes servent à situer l'étudiant dans la promotion et ne correspondent pas à des validations de
-            compétences ou d'UE.</em>
-        <div class=infoSemestre></div>
-    </section>
-
-    <!--------------------------->
-    <!-- Synthèse              -->
-    <!--------------------------->
-    <section>
-        <div>
-            <div>
-                <h2>Synthèse</h2>
-                <em>La moyenne des ressources dans une UE dépend des poids donnés aux évaluations.</em>
-            </div>
-            <div class=CTA_Liste>
-                Liste <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none"
-                    stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M18 15l-6-6-6 6" />
-                </svg>
-            </div>
-        </div>
-        <div class=synthese></div>
-    </section>
-
-    <!--------------------------->
-    <!-- Evaluations           -->
-    <!--------------------------->
-    <section>
-        <div>
-            <h2>Ressources</h2>
-            <div class=CTA_Liste>
-                Liste <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none"
-                    stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M18 15l-6-6-6 6" />
-                </svg>
-            </div>
-        </div>
-        <div class=evaluations></div>
-    </section>
-
-    <section>
-        <div>
-            <h2>SAÉ</h2>
-            <div class=CTA_Liste>
-                Liste <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none"
-                    stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M18 15l-6-6-6 6" />
-                </svg>
-            </div>
-        </div>
-        <div class=sae></div>
-    </section>
-
-</main>
 {% endblock %}
 
 {% block scripts %}
 {{ super() }}
+
+<script src="/ScoDoc/static/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 custome à ajouter
+			releve.shadowRoot.innerHTML += `
+				<style>
+					.module>div, .dateInscription{
+						display: none;
+					}
+				</style>`;
+		})
 </script>
-<script src="/ScoDoc/static/js/bulletin-but.js"></script>
 {% endblock %}