youen/vehicle-simulator
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

using HTML classes instead of ids to allow multiple simulators

Browse Source
This commit is contained in:
Youen Toupin 2021-10-15 21:35:13 +02:00
parent 54a9d49d83
commit 1b39d85cb5
2 changed files with 18 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
simulator/src/simulator-ui.ts
View File

@ -24,22 +24,17 @@ function runSimulation(parameters: SimulationParameters): Simulator.SimulationRe
return simulationResult;
}
document.addEventListener('DOMContentLoaded', function() {
// Load CSS
document.getElementsByTagName('head')[0].innerHTML += (<any>window)['simulator.css'];
let container = document.getElementById('simulator');
function initializeSimulator(container: HTMLElement) {
// Insert HTML code in the container
container.innerHTML += (<any>window)['simulator.html'];
// In order to be able to style SVG elements with CSS, and register events with javascript, we must use inline SVG (we can't use an img tag)
// For this purpose, the SVG file contents are embedded in a javascript file
container.querySelector('#zones-map').innerHTML = (<any>window)['climate-zones-map.svg'];
container.querySelector('.zones-map').innerHTML = (<any>window)['climate-zones-map.svg'];
container.querySelectorAll("[data-activate-modal]").forEach(elt => {
elt.addEventListener('click', e => {
container.querySelector('#'+elt.getAttribute('data-activate-modal')).classList.toggle('is-active', true);
container.querySelector('.'+elt.getAttribute('data-activate-modal')).classList.toggle('is-active', true);
});
});
@ -49,7 +44,7 @@ document.addEventListener('DOMContentLoaded', function() {
});
});
let zoneSelector = <HTMLSelectElement>container.querySelector('#zone-selector');
let zoneSelector = <HTMLSelectElement>container.querySelector('.zone-selector');
container.querySelectorAll('.climate-zone').forEach(elt => {
elt.addEventListener('click', e => {
let zoneName = elt.getAttribute('id');
@ -58,11 +53,11 @@ document.addEventListener('DOMContentLoaded', function() {
});
});
container.querySelector('#simulate-button').addEventListener('click', e => {
container.querySelector('.simulate-button').addEventListener('click', e => {
let parameters: SimulationParameters = {
batteryCapacity: Number((<HTMLInputElement>container.querySelector('[name=battery-capacity]')).value),
additionalWeight: Number((<HTMLInputElement>container.querySelector('[name=additional-weight]')).value),
climateZone: (<HTMLSelectElement>container.querySelector('#zone-selector')).value,
climateZone: (<HTMLSelectElement>container.querySelector('.zone-selector')).value,
dailyDistance: Number((<HTMLInputElement>container.querySelector('[name=daily-distance]')).value),
dailyAscendingElevation: Number((<HTMLInputElement>container.querySelector('[name=daily-elevation]')).value),
};
@ -114,4 +109,12 @@ document.addEventListener('DOMContentLoaded', function() {
resultsContainer.classList.toggle('is-hidden', false);
});
}
document.addEventListener('DOMContentLoaded', function() {
// Load CSS
document.getElementsByTagName('head')[0].innerHTML += (<any>window)['simulator.css'];
let container = document.getElementById('simulator');
initializeSimulator(container);
});

8
simulator/src/simulator.html
View File

@ -42,7 +42,7 @@
<div class="field has-addons">
<div class="control is-expanded">
<div class="select is-fullwidth">
<select id="zone-selector">
<select class="zone-selector">
<option>H1a</option>
<option>H1b</option>
<option>H1c</option>
@ -99,7 +99,7 @@
<div class="field-body">
<div class="field">
<p class="control is-expanded">
<a id="simulate-button" class="button is-primary is-fullwidth">Simuler</a>
<a class="simulate-button button is-primary is-fullwidth">Simuler</a>
</p>
</div>
</div>
@ -126,7 +126,7 @@
</div>
</footer>
<div id="zones-map-modal" class="modal">
<div class="modal zones-map-modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
@ -134,7 +134,7 @@
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<svg id="zones-map" xmlns="http://www.w3.org/2000/svg" width="595" height="564" version="1.0"></svg>
<svg class="zones-map" xmlns="http://www.w3.org/2000/svg" width="595" height="564" version="1.0"></svg>
</section>
</div>
</div>