using HTML classes instead of ids to allow multiple simulators

simulator/src/simulator-ui.ts

@@ -24,22 +24,17 @@ function runSimulation(parameters: SimulationParameters): Simulator.SimulationRe
 	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
 	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);
 });

simulator/src/simulator.html

@@ -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>