From 2bf274849c89c6e3e1577b46bc73cb7a54802b3e Mon Sep 17 00:00:00 2001
From: ahenao <afortin@mitre.org>
Date: Tue, 4 Nov 2025 14:20:02 -0500
Subject: [PATCH 1/2] fixed state of training selection when moving to
 different tabs within caldera

---
 gui/views/training.vue | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/gui/views/training.vue b/gui/views/training.vue
index 83480fd..cc680ec 100644
--- a/gui/views/training.vue
+++ b/gui/views/training.vue
@@ -25,20 +25,48 @@ onBeforeUnmount(() => {
 });
 
 onMounted(async () => {
+  // ✅ Restore previous state before loading data
+  const savedState = localStorage.getItem("trainingState");
+  if (savedState) {
+    try {
+      const parsed = JSON.parse(savedState);
+      selectedCert.value = parsed.selectedCert || "";
+      selectedBadge.value = parsed.selectedBadge || "";
+    } catch (err) {
+      console.warn("Failed to parse saved training state:", err);
+    }
+  }
+
+  // ✅ Existing functionality (keep this intact)
   const res = await $api.get("/plugin/training/certs");
   certificates.value = res.data.certificates;
+
   let confettiScript = document.createElement("script");
   confettiScript.setAttribute(
     "src",
     "https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/dist/confetti.browser.min.js"
   );
   document.head.appendChild(confettiScript);
+
   if (updateInterval) clearInterval(updateInterval);
   updateInterval = setInterval(async () => {
     getTraining();
-  }, "3000");
+  }, 3000); // <-- you can also remove the quotes, should be a number not a string
 });
 
+// ✅ New: persist user selections when they change
+watch(
+  [selectedCert, selectedBadge],
+  () => {
+    const state = {
+      selectedCert: selectedCert.value,
+      selectedBadge: selectedBadge.value,
+    };
+    localStorage.setItem("trainingState", JSON.stringify(state));
+  },
+  { deep: true }
+);
+
 watch(selectedCert, (newValue) => {
   getTraining();
 });

From bd268d246376df450a5757668628797ed962de96 Mon Sep 17 00:00:00 2001
From: Chris Lenk <402940+clenk@users.noreply.github.com>
Date: Fri, 19 Dec 2025 15:22:19 +0000
Subject: [PATCH 2/2] Refactor into functions, remove unneeded comments

---
 gui/views/training.vue | 44 ++++++++++++++++++++++++------------------
 1 file changed, 25 insertions(+), 19 deletions(-)

diff --git a/gui/views/training.vue b/gui/views/training.vue
index cc680ec..70c6236 100644
--- a/gui/views/training.vue
+++ b/gui/views/training.vue
@@ -25,19 +25,8 @@ onBeforeUnmount(() => {
 });
 
 onMounted(async () => {
-  // ✅ Restore previous state before loading data
-  const savedState = localStorage.getItem("trainingState");
-  if (savedState) {
-    try {
-      const parsed = JSON.parse(savedState);
-      selectedCert.value = parsed.selectedCert || "";
-      selectedBadge.value = parsed.selectedBadge || "";
-    } catch (err) {
-      console.warn("Failed to parse saved training state:", err);
-    }
-  }
+  restoreSelections();
 
-  // ✅ Existing functionality (keep this intact)
   const res = await $api.get("/plugin/training/certs");
   certificates.value = res.data.certificates;
 
@@ -51,18 +40,13 @@ onMounted(async () => {
   if (updateInterval) clearInterval(updateInterval);
   updateInterval = setInterval(async () => {
     getTraining();
-  }, 3000); // <-- you can also remove the quotes, should be a number not a string
+  }, 3000);
 });
 
-// ✅ New: persist user selections when they change
 watch(
   [selectedCert, selectedBadge],
   () => {
-    const state = {
-      selectedCert: selectedCert.value,
-      selectedBadge: selectedBadge.value,
-    };
-    localStorage.setItem("trainingState", JSON.stringify(state));
+    persistSelections();
   },
   { deep: true }
 );
@@ -75,6 +59,28 @@ watch(selectedBadge, (newValue) => {
   updateVisibleFlags(newValue);
 });
 
+const restoreSelections = () => {
+  const savedState = localStorage.getItem("trainingState");
+  if (savedState) {
+    try {
+      const parsed = JSON.parse(savedState);
+      selectedCert.value = parsed.selectedCert || "";
+      selectedBadge.value = parsed.selectedBadge || "";
+    } catch (err) {
+      console.warn("Failed to parse saved training state:", err);
+    }
+  }
+};
+
+const persistSelections = () => {
+  if (!selectedCert.value || !selectedBadge.value) return;
+  const state = {
+    selectedCert: selectedCert.value,
+    selectedBadge: selectedBadge.value,
+  };
+  localStorage.setItem("trainingState", JSON.stringify(state));
+};
+
 const getTraining = () => {
   if (!selectedCert.value) return;
   $api