Commit db054cf9 authored by Ådne Karstad's avatar Ådne Karstad

feat(M2T): include style and script in transformation

parent 1cd1bd34
# 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;
}
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