From ecc398de0debba132888fc5a738a7ebf53afd2d2 Mon Sep 17 00:00:00 2001
From: kishtarn555 <hec_montemoon@hotmail.com>
Date: Sat, 28 Sep 2024 19:24:56 -0600
Subject: [PATCH 1/2] [UI][Feature] Toasts

---
 html/desktop/app.html   |  1 +
 html/toasts.html        | 54 +++++++++++++++++++++++++++++++++++++++++
 resources/css/style.css | 20 ++++++++++++++-
 src/index.ts            |  4 +++
 webapp/css/style.css    | 20 ++++++++++++++-
 webapp/index.html       | 54 +++++++++++++++++++++++++++++++++++++++++
 webapp/js/cindex.js     |  3 +++
 7 files changed, 154 insertions(+), 2 deletions(-)
 create mode 100644 html/toasts.html

diff --git a/html/desktop/app.html b/html/desktop/app.html
index 584b790b..616f6eaf 100644
--- a/html/desktop/app.html
+++ b/html/desktop/app.html
@@ -5,6 +5,7 @@
 
             @@include('./editor.html')
             @@include('./karel.html')
+            @@include('../toasts.html')
 
 
         </div>
diff --git a/html/toasts.html b/html/toasts.html
new file mode 100644
index 00000000..eaba018d
--- /dev/null
+++ b/html/toasts.html
@@ -0,0 +1,54 @@
+<div aria-live="polite" aria-atomic="true" class="position-absolute top-0 start-0 bottom-0 end-0 pe-none"
+  style="z-index: 100;">
+  <div class="position-rel w-100 h-100">
+    <div class="toast-container top-0 end-0  pt-2 pe-4">
+
+      <div id="toast-compilation-success" class="toast toast-success" role="alert" aria-live="assertive"
+        aria-atomic="true" data-bs-delay="3200">
+        <div class="d-flex">
+          <div class="toast-body">
+            ¡Compilación correcta!
+          </div>
+          <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+        </div>
+      </div>
+      <div id="toast-compilation-error" class="toast toast-danger" role="alert" aria-live="assertive" aria-atomic="true"
+        data-bs-delay="3200">
+        <div class="d-flex">
+          <div class="toast-body">
+            ¡Error de compilación!
+          </div>
+          <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+        </div>
+      </div>
+      <div id="toast-runtime-success" class="toast toast-success" role="alert" aria-live="assertive" aria-atomic="true"
+        data-bs-delay="3200">
+        <div class="d-flex">
+          <div class="toast-body">
+            ¡Ejecución terminada correctamente!
+          </div>
+          <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+        </div>
+      </div>
+      <div id="toast-runtime-error" class="toast toast-danger" role="alert" aria-live="assertive" aria-atomic="true"
+        data-bs-delay="3200">
+        <div class="d-flex">
+          <div class="toast-body">
+            ¡Ejecución terminada en error!
+          </div>
+          <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+        </div>
+      </div>
+      <div id="toast-breakpoint" class="toast toast-primary" role="alert" aria-live="assertive" aria-atomic="true"
+        data-bs-delay="3200">
+        <div class="d-flex">
+          <div class="toast-body">
+            ¡Breakpoint!
+          </div>
+          <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/resources/css/style.css b/resources/css/style.css
index 6094a1c2..1635a18c 100644
--- a/resources/css/style.css
+++ b/resources/css/style.css
@@ -298,4 +298,22 @@ pre.error-popup {
     .hidden-mobile {
         display: none;
     }
-}
\ No newline at end of file
+}
+
+
+
+.toast-danger {
+    color: #fff!important;
+    background-color: RGBA(var(--bs-danger-rgb), 0.8)!important;
+}
+
+.toast-success {
+    color: #fff!important;
+    background-color: RGBA(var(--bs-success-rgb), 0.8)!important;
+}
+
+.toast-primary {
+    color: #fff!important;
+    background-color: RGBA(var(--bs-primary-rgb), 0.85)!important;
+}
+
diff --git a/src/index.ts b/src/index.ts
index 34a0dd56..95371f17 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -12,6 +12,7 @@ import { HookSession, RestoreSession } from "./session";
 import { RegisterHighlightListeners } from "./editor/editor.listeners";
 import { editorJava2pascal, editorPascal2Java } from "./editor/transpiler";
 import { MobileUI } from "./mobile/mobile";
+import bootstrap from "bootstrap";
 
 
 let KarelWorld: World = new World(100, 100);
@@ -445,6 +446,9 @@ $(document).ready(() => {
     DesktopUI.Init();
     StartSettings(DesktopUI);
     RestoreSession();
+    $(".toast").each(function( index ) {
+      bootstrap.Toast.getOrCreateInstance($(this)[0]).show()
+    });
 })
 
 export const GetKarelController = KarelController.GetInstance;
diff --git a/webapp/css/style.css b/webapp/css/style.css
index 6094a1c2..1635a18c 100644
--- a/webapp/css/style.css
+++ b/webapp/css/style.css
@@ -298,4 +298,22 @@ pre.error-popup {
     .hidden-mobile {
         display: none;
     }
-}
\ No newline at end of file
+}
+
+
+
+.toast-danger {
+    color: #fff!important;
+    background-color: RGBA(var(--bs-danger-rgb), 0.8)!important;
+}
+
+.toast-success {
+    color: #fff!important;
+    background-color: RGBA(var(--bs-success-rgb), 0.8)!important;
+}
+
+.toast-primary {
+    color: #fff!important;
+    background-color: RGBA(var(--bs-primary-rgb), 0.85)!important;
+}
+
diff --git a/webapp/index.html b/webapp/index.html
index a36eabd6..f74b9b8e 100644
--- a/webapp/index.html
+++ b/webapp/index.html
@@ -905,6 +905,60 @@ <h5 >Procesando</h5>
 </div>
     </div>
 </div>
+            <div aria-live="polite" aria-atomic="true" class="position-absolute top-0 start-0 bottom-0 end-0 pe-none"
+  style="z-index: 100;">
+  <div class="position-rel w-100 h-100">
+    <div class="toast-container top-0 end-0  pt-2 pe-4">
+
+      <div id="toast-compilation-success" class="toast toast-success" role="alert" aria-live="assertive"
+        aria-atomic="true" data-bs-delay="3200">
+        <div class="d-flex">
+          <div class="toast-body">
+            ¡Compilación correcta!
+          </div>
+          <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+        </div>
+      </div>
+      <div id="toast-compilation-error" class="toast toast-danger" role="alert" aria-live="assertive" aria-atomic="true"
+        data-bs-delay="3200">
+        <div class="d-flex">
+          <div class="toast-body">
+            ¡Error de compilación!
+          </div>
+          <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+        </div>
+      </div>
+      <div id="toast-runtime-success" class="toast toast-success" role="alert" aria-live="assertive" aria-atomic="true"
+        data-bs-delay="3200">
+        <div class="d-flex">
+          <div class="toast-body">
+            ¡Ejecución terminada correctamente!
+          </div>
+          <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+        </div>
+      </div>
+      <div id="toast-runtime-error" class="toast toast-danger" role="alert" aria-live="assertive" aria-atomic="true"
+        data-bs-delay="3200">
+        <div class="d-flex">
+          <div class="toast-body">
+            ¡Ejecución terminada en error!
+          </div>
+          <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+        </div>
+      </div>
+      <div id="toast-breakpoint" class="toast toast-primary" role="alert" aria-live="assertive" aria-atomic="true"
+        data-bs-delay="3200">
+        <div class="d-flex">
+          <div class="toast-body">
+            ¡Breakpoint!
+          </div>
+          <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>
 
 
         </div>
diff --git a/webapp/js/cindex.js b/webapp/js/cindex.js
index fc193cfd..90e996c5 100644
--- a/webapp/js/cindex.js
+++ b/webapp/js/cindex.js
@@ -33352,6 +33352,9 @@ var karel = (function (exports, bootstrap) {
         DesktopUI.Init();
         StartSettings(DesktopUI);
         RestoreSession();
+        $(".toast").each(function (index) {
+            bootstrap.Toast.getOrCreateInstance($(this)[0]).show();
+        });
     });
     const GetKarelController = KarelController.GetInstance;
     function MoveEditorCursorToLine(line, column = 0) {

From 2c7c334f8b02f75b2e200be4f0e3a21b33800ad6 Mon Sep 17 00:00:00 2001
From: kishtarn555 <hec_montemoon@hotmail.com>
Date: Sat, 28 Sep 2024 19:50:21 -0600
Subject: [PATCH 2/2] [Toast][UI] Toasts notifications are now event driven

---
 html/toasts.html          |  4 +--
 src/desktop/desktop-ui.ts | 11 +++++----
 src/desktop/toast.ts      | 52 +++++++++++++++++++++++++++++++++++++++
 src/index.ts              | 11 ++++++---
 webapp/index.html         |  4 +--
 webapp/js/cindex.js       | 50 ++++++++++++++++++++++++++++++++++---
 6 files changed, 116 insertions(+), 16 deletions(-)
 create mode 100644 src/desktop/toast.ts

diff --git a/html/toasts.html b/html/toasts.html
index eaba018d..fe20dd58 100644
--- a/html/toasts.html
+++ b/html/toasts.html
@@ -3,7 +3,7 @@
   <div class="position-rel w-100 h-100">
     <div class="toast-container top-0 end-0  pt-2 pe-4">
 
-      <div id="toast-compilation-success" class="toast toast-success" role="alert" aria-live="assertive"
+      <div id="toast-compile-success" class="toast toast-success" role="alert" aria-live="assertive"
         aria-atomic="true" data-bs-delay="3200">
         <div class="d-flex">
           <div class="toast-body">
@@ -12,7 +12,7 @@
           <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
         </div>
       </div>
-      <div id="toast-compilation-error" class="toast toast-danger" role="alert" aria-live="assertive" aria-atomic="true"
+      <div id="toast-compile-error" class="toast toast-danger" role="alert" aria-live="assertive" aria-atomic="true"
         data-bs-delay="3200">
         <div class="d-flex">
           <div class="toast-body">
diff --git a/src/desktop/desktop-ui.ts b/src/desktop/desktop-ui.ts
index c8b12533..242fc68a 100644
--- a/src/desktop/desktop-ui.ts
+++ b/src/desktop/desktop-ui.ts
@@ -15,6 +15,7 @@ import { GetCurrentSetting } from '../settings';
 import { FocusBar, FocusToolbar } from './focusBar';
 import { WorldBar, WorldToolbarData } from './worldToolbar';
 import { EvaluateToolbar } from './evaluate';
+import { ToastController, ToastUI } from './toast';
 
 
 type InputModeToolbar = {
@@ -23,10 +24,6 @@ type InputModeToolbar = {
     drag:JQuery
 }
 
-
-
-
-
 interface DesktopElements {
     desktopEditor: EditorView
     worldContainer: JQuery,
@@ -42,7 +39,8 @@ interface DesktopElements {
     evaluate: EvaluateToolbar,
     context: ContextMenuData,
     console: ConsoleTab,
-    callStack: CallStackUI
+    callStack: CallStackUI,
+    toast: ToastUI
 };
 
 class DesktopController {
@@ -78,6 +76,8 @@ class DesktopController {
     console:KarelConsole
     callStack: CallStack
 
+    toasts: ToastController
+
     private isControlInPlayMode: boolean
     private static _instance: DesktopController
     
@@ -124,6 +124,7 @@ class DesktopController {
         this.isControlInPlayMode = false;
         this.callStack = new CallStack(elements.callStack);
         this.controlbar = new ControlBar(elements.controlBar, this.worldController);
+        this.toasts = new ToastController(elements.toast)
 
         DesktopController._instance = this;
 
diff --git a/src/desktop/toast.ts b/src/desktop/toast.ts
new file mode 100644
index 00000000..30535200
--- /dev/null
+++ b/src/desktop/toast.ts
@@ -0,0 +1,52 @@
+import bootstrap from "bootstrap"
+import { KarelController } from "../KarelController"
+
+
+export type ToastUI = {
+    compileError:JQuery
+    compileSuccess:JQuery
+    breakpoint:JQuery
+    runtimeError:JQuery
+    runtimeSuccess: JQuery
+}
+
+export class ToastController {
+    compileSuccess : bootstrap.Toast
+    compileError : bootstrap.Toast
+    breakpoint : bootstrap.Toast
+    runtimeError : bootstrap.Toast
+    runtimeSuccess : bootstrap.Toast
+    constructor(ui:ToastUI) {
+        this.compileSuccess  = new bootstrap.Toast(ui.compileSuccess[0]);
+        this.compileError = new bootstrap.Toast(ui.compileError[0]);
+        this.breakpoint = new bootstrap.Toast(ui.breakpoint[0]);
+        this.runtimeError = new bootstrap.Toast(ui.runtimeError[0]);
+        this.runtimeSuccess = new bootstrap.Toast(ui.runtimeSuccess[0]);
+        KarelController.GetInstance().RegisterCompileObserver((_, success, __)=> {
+            try {
+                if (success) {
+                    this.compileSuccess.show();
+                } else {
+                    this.compileError.show();
+                }
+            } catch(e) {
+                console.log(e);
+            }
+        });    
+        KarelController.GetInstance().RegisterStateChangeObserver((_, state)=> {
+            try {
+                if (state !== "finished") {
+                    return;
+                }
+                if (KarelController.GetInstance().EndedOnError()) {
+                    this.runtimeError.show();
+                } else {
+                    this.runtimeSuccess.show();
+                }
+            } catch(e) {
+                console.log(e);
+            }
+        });
+    }
+
+}
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
index 95371f17..ba9f5c7d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -12,7 +12,6 @@ import { HookSession, RestoreSession } from "./session";
 import { RegisterHighlightListeners } from "./editor/editor.listeners";
 import { editorJava2pascal, editorPascal2Java } from "./editor/transpiler";
 import { MobileUI } from "./mobile/mobile";
-import bootstrap from "bootstrap";
 
 
 let KarelWorld: World = new World(100, 100);
@@ -218,6 +217,13 @@ let DesktopUI = new DesktopController(
             panel : $("#stackPanel"),
             lastReturn: $("#lastReturn")
         },
+        toast: {
+            breakpoint: $("#toast-breakpoint"),
+            compileError: $("#toast-compile-error"),
+            compileSuccess: $("#toast-compile-success"),
+            runtimeError: $("#toast-runtime-error"),
+            runtimeSuccess: $("#toast-runtime-success"),
+        }
     },
     karelController
 );
@@ -446,9 +452,6 @@ $(document).ready(() => {
     DesktopUI.Init();
     StartSettings(DesktopUI);
     RestoreSession();
-    $(".toast").each(function( index ) {
-      bootstrap.Toast.getOrCreateInstance($(this)[0]).show()
-    });
 })
 
 export const GetKarelController = KarelController.GetInstance;
diff --git a/webapp/index.html b/webapp/index.html
index f74b9b8e..b626aa42 100644
--- a/webapp/index.html
+++ b/webapp/index.html
@@ -910,7 +910,7 @@ <h5 >Procesando</h5>
   <div class="position-rel w-100 h-100">
     <div class="toast-container top-0 end-0  pt-2 pe-4">
 
-      <div id="toast-compilation-success" class="toast toast-success" role="alert" aria-live="assertive"
+      <div id="toast-compile-success" class="toast toast-success" role="alert" aria-live="assertive"
         aria-atomic="true" data-bs-delay="3200">
         <div class="d-flex">
           <div class="toast-body">
@@ -919,7 +919,7 @@ <h5 >Procesando</h5>
           <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
         </div>
       </div>
-      <div id="toast-compilation-error" class="toast toast-danger" role="alert" aria-live="assertive" aria-atomic="true"
+      <div id="toast-compile-error" class="toast toast-danger" role="alert" aria-live="assertive" aria-atomic="true"
         data-bs-delay="3200">
         <div class="d-flex">
           <div class="toast-body">
diff --git a/webapp/js/cindex.js b/webapp/js/cindex.js
index 90e996c5..487b7be4 100644
--- a/webapp/js/cindex.js
+++ b/webapp/js/cindex.js
@@ -31585,6 +31585,45 @@ var karel = (function (exports, bootstrap) {
         }
     }
 
+    class ToastController {
+        constructor(ui) {
+            this.compileSuccess = new bootstrap.Toast(ui.compileSuccess[0]);
+            this.compileError = new bootstrap.Toast(ui.compileError[0]);
+            this.breakpoint = new bootstrap.Toast(ui.breakpoint[0]);
+            this.runtimeError = new bootstrap.Toast(ui.runtimeError[0]);
+            this.runtimeSuccess = new bootstrap.Toast(ui.runtimeSuccess[0]);
+            KarelController.GetInstance().RegisterCompileObserver((_, success, __) => {
+                try {
+                    if (success) {
+                        this.compileSuccess.show();
+                    }
+                    else {
+                        this.compileError.show();
+                    }
+                }
+                catch (e) {
+                    console.log(e);
+                }
+            });
+            KarelController.GetInstance().RegisterStateChangeObserver((_, state) => {
+                try {
+                    if (state !== "finished") {
+                        return;
+                    }
+                    if (KarelController.GetInstance().EndedOnError()) {
+                        this.runtimeError.show();
+                    }
+                    else {
+                        this.runtimeSuccess.show();
+                    }
+                }
+                catch (e) {
+                    console.log(e);
+                }
+            });
+        }
+    }
+
     class DesktopController {
         constructor(elements, karelController) {
             this.editor = elements.desktopEditor;
@@ -31610,6 +31649,7 @@ var karel = (function (exports, bootstrap) {
             this.isControlInPlayMode = false;
             this.callStack = new CallStack(elements.callStack);
             this.controlbar = new ControlBar(elements.controlBar, this.worldController);
+            this.toasts = new ToastController(elements.toast);
             DesktopController._instance = this;
         }
         static GetInstance() {
@@ -33142,6 +33182,13 @@ var karel = (function (exports, bootstrap) {
             panel: $("#stackPanel"),
             lastReturn: $("#lastReturn")
         },
+        toast: {
+            breakpoint: $("#toast-breakpoint"),
+            compileError: $("#toast-compile-error"),
+            compileSuccess: $("#toast-compile-success"),
+            runtimeError: $("#toast-runtime-error"),
+            runtimeSuccess: $("#toast-runtime-success"),
+        }
     }, karelController);
     new MobileUI({
         controls: {
@@ -33352,9 +33399,6 @@ var karel = (function (exports, bootstrap) {
         DesktopUI.Init();
         StartSettings(DesktopUI);
         RestoreSession();
-        $(".toast").each(function (index) {
-            bootstrap.Toast.getOrCreateInstance($(this)[0]).show();
-        });
     });
     const GetKarelController = KarelController.GetInstance;
     function MoveEditorCursorToLine(line, column = 0) {