Commit 0e20f038 authored by Ådne Karstad's avatar Ådne Karstad

feat(T2M): add script logic to transformation

Display only one study program at a time.
parent 8f74cdcc
......@@ -19,13 +19,16 @@
<label for="programs">Choose program:</label>
<select name="programs" id="programs">
[for (program : Program | uni.programs)]
<option value="[program.name/]">[program.name/]</option>
<option value="[nameToId(program.name)/]">[program.name/]</option>
[/for]
</select>
[for (program : Program | uni.programs)]
<div id="[nameToId(program.name)/]" class="spp-table">
<h2>[program.name/]</h2
<p>[program.name/] is taken over [program.numberOfSemesters/] semesters.</p>
[for (semester : Semester | program.semesters)]
<h3>Semester [semester.semester/]</h3>
......@@ -41,12 +44,17 @@
</table>
[/for]
</div>
[/for]
<script src="index.js"></script>
</body>
</html>
[/file]
[/template]
[template public nameToId(name : String)]
[name.trim().toLower().replaceAll(' ', '-')/]
[/template]
......@@ -11,13 +11,16 @@
<label for="programs">Choose program:</label>
<select name="programs" id="programs">
<option value="Bachelor in IT">Bachelor in IT</option>
<option value="Lektor i Realfag">Lektor i Realfag</option>
<option value="bachelor-in-it">Bachelor in IT</option>
<option value="lektor-i-realfag">Lektor i Realfag</option>
</select>
<div id="bachelor-in-it" class="spp-table">
<h2>Bachelor in IT</h2
<p>Bachelor in IT is taken over 6 semesters.</p>
<h3>Semester 1</h3>
<table style="width=80%">
<tr>
......@@ -83,11 +86,14 @@
<table style="width=80%">
</table>
</div>
<div id="lektor-i-realfag" class="spp-table">
<h2>Lektor i Realfag</h2
<p>Lektor i Realfag is taken over 6 semesters.</p>
<h3>Semester 1</h3>
<table style="width=80%">
<tr>
......@@ -407,9 +413,10 @@
</tr>
</table>
</div>
<script src="index.js"></script>
</body>
</html>
const studyPlanSelector = document.querySelector('#programs');
let selectedStudyPlan = studyPlanSelector.value;
const hideAllPrograms = () => {
let programs = document.querySelectorAll('.spp-table');
programs.forEach((program) => {
program.style.display = 'none';
});
};
const hideProgram = (program) => {
program.style.display = 'none';
};
const showProgram = (program) => {
program.style.display = 'block';
};
const getElementFromId = (id) => {
return document.querySelector(`#${id}`);
};
studyPlanSelector.addEventListener('change', () => {
if (selectedStudyPlan.id !== studyPlanSelector.value) {
hideProgram(getElementFromId(selectedStudyPlan));
selectedStudyPlan = studyPlanSelector.value;
showProgram(getElementFromId(selectedStudyPlan));
}
});
hideAllPrograms();
showProgram(getElementFromId(selectedStudyPlan));
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment