Skip to content
Snippets Groups Projects
Commit db054cf9 authored by Ådne Karstad's avatar Ådne Karstad
Browse files

feat(M2T): include style and script in transformation

parent 1cd1bd34
No related branches found
No related tags found
No related merge requests found
# Project 2: M2T
## Project structure
_tdt4250.spp.html_ is where the transformation code is generated, of interest the project consists of _main_, _source_, _target_ folders. The _main_ folder consists of the transformation logic, including the acceleo code which describes how the model will be transformed into text. Or in other words, it describes how the result of the transformation will look like. The _source_ folder contains an example.xmi file which is the source model for the transformation. The _target_ folder contains the result of the transformation, and is thus an html file.
## Changelog on model from project 1
- Added a bunch of new examples in the model.
......
......@@ -11,6 +11,76 @@
<title>[university.name/]</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css">
<style>
body {
box-sizing: border-box;
font-family: 'Open Sans', Arial, sans-serif;
display: flex;
flex-direction: column;
/* justify-content: center; */
align-items: center;
min-height: 100vh;
}
select {
margin-top: 16px;
padding: 16px;
}
table,
td,
th {
border: 1px solid #000;
border-collapse: collapse;
}
table {
width: 100%;
}
th,
td {
padding: 16px;
}
.main-section {
display: flex;
justify-content: center;
width: 100%;
flex-wrap: wrap;
}
.specialization-container {
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
width: 30%;
padding: 48px;
}
.spp-table {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
width: 30%;
padding: 48px;
}
.spp-table tr:nth-child(odd) {
background-color: #aaaaaa;
}
.spp-table tr:first-child {
background-color: #4a8bf5;
}
</style>
</head>
<body>
......@@ -22,7 +92,41 @@
[generateStudyPlans(program)/]
[/for]
<script src="index.js"></script>
<script>
const studyPlanSelector = document.querySelector('#programs');
let selectedStudyPlan = studyPlanSelector.value;
const hideAllPrograms = () => {
let programs = document.querySelectorAll('.main-section');
programs.forEach((program) => {
program.style.display = 'none';
});
};
const hideProgram = (program) => {
program.style.display = 'none';
};
const showProgram = (program) => {
program.style.display = 'flex';
};
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));
</script>
</body>
</html>
......
......@@ -4,6 +4,76 @@
<title>NTNU</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css">
<style>
body {
box-sizing: border-box;
font-family: 'Open Sans', Arial, sans-serif;
display: flex;
flex-direction: column;
/* justify-content: center; */
align-items: center;
min-height: 100vh;
}
select {
margin-top: 16px;
padding: 16px;
}
table,
td,
th {
border: 1px solid #000;
border-collapse: collapse;
}
table {
width: 100%;
}
th,
td {
padding: 16px;
}
.main-section {
display: flex;
justify-content: center;
width: 100%;
flex-wrap: wrap;
}
.specialization-container {
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
width: 30%;
padding: 48px;
}
.spp-table {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
width: 30%;
padding: 48px;
}
.spp-table tr:nth-child(odd) {
background-color: #aaaaaa;
}
.spp-table tr:first-child {
background-color: #4a8bf5;
}
</style>
</head>
<body>
......@@ -1081,7 +1151,41 @@
</div>
<script src="index.js"></script>
<script>
const studyPlanSelector = document.querySelector('#programs');
let selectedStudyPlan = studyPlanSelector.value;
const hideAllPrograms = () => {
let programs = document.querySelectorAll('.main-section');
programs.forEach((program) => {
program.style.display = 'none';
});
};
const hideProgram = (program) => {
program.style.display = 'none';
};
const showProgram = (program) => {
program.style.display = 'flex';
};
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));
</script>
</body>
</html>
const studyPlanSelector = document.querySelector('#programs');
let selectedStudyPlan = studyPlanSelector.value;
const hideAllPrograms = () => {
let programs = document.querySelectorAll('.main-section');
programs.forEach((program) => {
program.style.display = 'none';
});
};
const hideProgram = (program) => {
program.style.display = 'none';
};
const showProgram = (program) => {
program.style.display = 'flex';
};
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));
body {
box-sizing: border-box;
font-family: 'Open Sans', Arial, sans-serif;
display: flex;
flex-direction: column;
/* justify-content: center; */
align-items: center;
min-height: 100vh;
}
select {
margin-top: 16px;
padding: 16px;
}
table,
td,
th {
border: 1px solid #000;
border-collapse: collapse;
}
table {
width: 100%;
}
th,
td {
padding: 16px;
}
.main-section {
display: flex;
justify-content: center;
width: 100%;
flex-wrap: wrap;
}
/* .main-section > .spp-table {
flex: 0 50%;
} */
.specialization-container {
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
width: 30%;
padding: 48px;
}
.spp-table {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
width: 30%;
padding: 48px;
}
.spp-table tr:nth-child(odd) {
background-color: #aaaaaa;
}
.spp-table tr:first-child {
background-color: #4a8bf5;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment