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; return simulationResult;
} }
document.addEventListener('DOMContentLoaded', function() { function initializeSimulator(container: HTMLElement) {
// Load CSS
document.getElementsByTagName('head')[0].innerHTML += (<any>window)['simulator.css'];
let container = document.getElementById('simulator');
// Insert HTML code in the container // Insert HTML code in the container
container.innerHTML += (<any>window)['simulator.html']; 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) // 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 // 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 => { container.querySelectorAll("[data-activate-modal]").forEach(elt => {
elt.addEventListener('click', e => { 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 => { container.querySelectorAll('.climate-zone').forEach(elt => {
elt.addEventListener('click', e => { elt.addEventListener('click', e => {
let zoneName = elt.getAttribute('id'); 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 = { let parameters: SimulationParameters = {
batteryCapacity: Number((<HTMLInputElement>container.querySelector('[name=battery-capacity]')).value), batteryCapacity: Number((<HTMLInputElement>container.querySelector('[name=battery-capacity]')).value),
additionalWeight: Number((<HTMLInputElement>container.querySelector('[name=additional-weight]')).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), dailyDistance: Number((<HTMLInputElement>container.querySelector('[name=daily-distance]')).value),
dailyAscendingElevation: Number((<HTMLInputElement>container.querySelector('[name=daily-elevation]')).value), dailyAscendingElevation: Number((<HTMLInputElement>container.querySelector('[name=daily-elevation]')).value),
}; };
@ -114,4 +109,12 @@ document.addEventListener('DOMContentLoaded', function() {
resultsContainer.classList.toggle('is-hidden', false); 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="field has-addons">
<div class="control is-expanded"> <div class="control is-expanded">
<div class="select is-fullwidth"> <div class="select is-fullwidth">
<select id="zone-selector"> <select class="zone-selector">
<option>H1a</option> <option>H1a</option>
<option>H1b</option> <option>H1b</option>
<option>H1c</option> <option>H1c</option>
@ -99,7 +99,7 @@
<div class="field-body"> <div class="field-body">
<div class="field"> <div class="field">
<p class="control is-expanded"> <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> </p>
</div> </div>
</div> </div>
@ -126,7 +126,7 @@
</div> </div>
</footer> </footer>
<div id="zones-map-modal" class="modal"> <div class="modal zones-map-modal">
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-card"> <div class="modal-card">
<header class="modal-card-head"> <header class="modal-card-head">
@ -134,7 +134,7 @@
<button class="delete" aria-label="close"></button> <button class="delete" aria-label="close"></button>
</header> </header>
<section class="modal-card-body"> <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> </section>
</div> </div>
</div> </div>