refactor(demo): have a single bpmn container in the prediction demo (#…

…558)
process-analytics · Sep 28, 2023 · 871ecc9 · 871ecc9
1 parent 669367d
commit 871ecc9
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 16 deletions.
diff --git a/demo/prediction/index.html b/demo/prediction/index.html
@@ -94,8 +94,7 @@ <h5>Use case</h5>
             </div>
             <div id="use-case-panel" class="bg-gray">
                 <div class="text-center">
-                    <h4 id="late-title">Predicted Late</h4>
-                    <h4 id="onTime-title" class="d-hide">Predicted on Time</h4>
+                    <h4 id="prediction-title"></h4>
                 </div>
                 <div class="columns" style="padding: 0 1rem">
                     <div id="legend" class="column col-2 col-mx-auto state-predicted-late" style="margin: auto; padding-right: 0.7rem">
@@ -109,8 +108,7 @@ <h4 id="onTime-title" class="d-hide">Predicted on Time</h4>
                         </fieldset>
                     </div>
                     <div class="column col-10 col-mx-auto">
-                        <div id="late-bpmn-container" class="col-12 bpmn-container"></div>
-                        <div id="onTime-bpmn-container" class="col-12 bpmn-container d-hide"></div>
+                        <div id="prediction-bpmn-container" class="col-12 bpmn-container"></div>
                     </div>
                 </div>
             </div>

diff --git a/demo/prediction/js/index.js b/demo/prediction/js/index.js
@@ -1,22 +1,32 @@
-// Initialize UseCases
-const predictedLateUseCase = new PredicatedLateUseCase('late');
-const onTimeUseCase = new PredictedOnTimeUseCase('onTime');
+function buildUseCase(type) {
+    switch (type) {
+        case 'late':
+            return new PredicatedLateUseCase('Predicted Late');
+        case 'onTime':
+        default:
+            return new PredictedOnTimeUseCase('Predicted on Time');
+    }
+}
+
+function changeUseCase() {
+    state.useCase = buildUseCase(state.dataType);
+    state.useCase.display(state.dataType);
+}
 
 const state = {
-    useCase: predictedLateUseCase,
+    useCase: undefined,
+    dataType: 'late'
 }
 
 // Update state of radio buttons
-document.getElementById('btn-late').checked = true;
+document.getElementById(`btn-${state.dataType}`).checked = true;
 
 document.addEventListener('DOMContentLoaded', function () {
     // Waiting for the displayed page before to load diagram & display data
-    state.useCase.display(state.dataType);
+    changeUseCase();
 })
 
 document.getElementById('choose-use-case-panel').onchange = () => {
-    const useCaseType = document.querySelector("input[type='radio'][name='use-case-type']:checked").value;
-    state.useCase = useCaseType === 'onTime' ? onTimeUseCase : predictedLateUseCase;
-
-    state.useCase.display(state.dataType);
+    state.dataType = document.querySelector("input[type='radio'][name='use-case-type']:checked").value;
+    changeUseCase();
 }
diff --git a/demo/prediction/js/prediction-use-case.js b/demo/prediction/js/prediction-use-case.js
@@ -3,8 +3,10 @@ class PredicatedLateUseCase extends UseCase {
     _style;
     _executionData;
 
-    constructor(type) {
-        super(type, () => pizzaDiagram(), false, {fit: {type: 'Center', margin: 20}});
+    constructor(title) {
+        document.querySelector(`[id*="prediction-title"]`).textContent = title;
+        document.querySelector(`[id*="prediction-bpmn-container"]`).textContent = undefined;
+        super('prediction', () => pizzaDiagram(), false, {fit: {type: 'Center', margin: 20}});
     }
 
     display(dataType) {