Skip to content
GitLab
Commit db054cf9 authored by Ådne Karstad's avatar Ådne Karstad
Browse files

feat(M2T): include style and script in transformation

parent 1cd1bd34
Hide whitespace changes
Inline Side-by-side
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;
}
Supports Markdown
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