From 1b39d85cb5c6c2fe093ec5e1932336688b73c80e Mon Sep 17 00:00:00 2001 From: Youen Toupin Date: Fri, 15 Oct 2021 21:35:13 +0200 Subject: [PATCH] using HTML classes instead of ids to allow multiple simulators --- simulator/src/simulator-ui.ts | 25 ++++++++++++++----------- simulator/src/simulator.html | 8 ++++---- 2 files changed, 18 insertions(+), 15 deletions(-) diff --git a/simulator/src/simulator-ui.ts b/simulator/src/simulator-ui.ts index ade3d63..5f04ee1 100644 --- a/simulator/src/simulator-ui.ts +++ b/simulator/src/simulator-ui.ts @@ -24,22 +24,17 @@ function runSimulation(parameters: SimulationParameters): Simulator.SimulationRe return simulationResult; } -document.addEventListener('DOMContentLoaded', function() { - // Load CSS - document.getElementsByTagName('head')[0].innerHTML += (window)['simulator.css']; - - let container = document.getElementById('simulator'); - +function initializeSimulator(container: HTMLElement) { // Insert HTML code in the container container.innerHTML += (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 = (window)['climate-zones-map.svg']; + container.querySelector('.zones-map').innerHTML = (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 = container.querySelector('#zone-selector'); + let zoneSelector = 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((container.querySelector('[name=battery-capacity]')).value), additionalWeight: Number((container.querySelector('[name=additional-weight]')).value), - climateZone: (container.querySelector('#zone-selector')).value, + climateZone: (container.querySelector('.zone-selector')).value, dailyDistance: Number((container.querySelector('[name=daily-distance]')).value), dailyAscendingElevation: Number((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 += (window)['simulator.css']; + + let container = document.getElementById('simulator'); + initializeSimulator(container); }); diff --git a/simulator/src/simulator.html b/simulator/src/simulator.html index f80636c..6a13012 100644 --- a/simulator/src/simulator.html +++ b/simulator/src/simulator.html @@ -42,7 +42,7 @@
- @@ -99,7 +99,7 @@ @@ -126,7 +126,7 @@
-