Skip to content

T
TDT4250
Commit db054cf9 authored by Ådne Karstad's avatar Ådne Karstad
Browse files
Options

feat(M2T): include style and script in transformation

parent 1cd1bd34
Hide whitespace changes
Inline Side-by-side
Showing with 214 additions and 105 deletions
README.md
View file @ db054cf9
# 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.
......
tdt4250.spp.html/src/tdt4250/spp/html/main/studyplan2TextGenerator.mtl
View file @ db054cf9
......@@ -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>
......
tdt4250.spp.html/src/tdt4250/spp/html/target/NTNU.html
View file @ db054cf9
......@@ -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>
tdt4250.spp.html/src/tdt4250/spp/html/target/index.js deleted 100644 → 0
View file @ 1cd1bd34
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));
tdt4250.spp.html/src/tdt4250/spp/html/target/style.css deleted 100644 → 0
View file @ 1cd1bd34
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