From 44c99c3308967bc4edb42c5d23b6106ad9dff0ea Mon Sep 17 00:00:00 2001
From: Rumburaq2 <oliver.hurt@student.gyarab.cz>
Date: Wed, 19 Feb 2025 21:20:11 +0100
Subject: [PATCH 01/31] [ADD] init commit - passing data to svelte

---
 .../pages/alerts/templates/alerts.html        |   1 +
 ui/src/pages/ProgressBar.svelte               | 143 +++++++++++++++
 ui/src/pages/SLA.js                           |  27 +++
 ui/src/pages/SLAbar.svelte                    | 173 ++++++++++++++++++
 ui/src/pages/SLAcontainer.svelte              |  11 ++
 ui/src/pages/alerts.js                        |   7 +
 6 files changed, 362 insertions(+)
 create mode 100644 ui/src/pages/ProgressBar.svelte
 create mode 100644 ui/src/pages/SLA.js
 create mode 100644 ui/src/pages/SLAbar.svelte
 create mode 100644 ui/src/pages/SLAcontainer.svelte

diff --git a/source/app/blueprints/pages/alerts/templates/alerts.html b/source/app/blueprints/pages/alerts/templates/alerts.html
index b2532cf7c..ecb135872 100644
--- a/source/app/blueprints/pages/alerts/templates/alerts.html
+++ b/source/app/blueprints/pages/alerts/templates/alerts.html
@@ -368,6 +368,7 @@ <h5 class="modal-title" id="closeAlertModalLabel"></h5>
     <script src="/static/assets/js/plugin/vis/vis.min.js"></script>
     <script src="/static/assets/js/plugin/vis/vis-network.min.js"></script>
     <script src="/static/assets/js/iris/alerts.js"></script>
+    <script type="module" src="/static/assets/js/iris/SLA.js" defer></script>
     <script src="/static/assets/js/iris/comments.js"></script>
     <script src="/static/assets/js/core/socket.io.js"></script>
 {% endblock javascripts %}
diff --git a/ui/src/pages/ProgressBar.svelte b/ui/src/pages/ProgressBar.svelte
new file mode 100644
index 000000000..c28cfab31
--- /dev/null
+++ b/ui/src/pages/ProgressBar.svelte
@@ -0,0 +1,143 @@
+<script lang="ts">
+import { onDestroy } from 'svelte';
+  const MyState ={
+		NEW: 0,
+	  	RUNNING: 1,
+	    PAUSED: 2,
+  };
+  let currstate = MyState.RUNNING;
+  //let { startDateTime = "01/02/2025 14:30", endDateTime = "01/02/2025 14:31" } = $props();
+  export let startDateTime = "01/02/2025 14:30";
+  export let endDateTime = "01/02/2025 14:30";
+  let timecomputed = calculateDuration(); //calculate duration betwwen two timestamps in seconds
+  //let elapsed = $state(0);
+  $: elapsed = 0;
+  //let duration = $state(timecomputed);
+  $: duration = timecomputed;
+  let interval: number
+  let oldElapsedTime = 0;
+  let currTimeEpoch = 0;
+  let startTimeEpoch = getSecondsSinceEpoch(startDateTime);
+  //let severity;
+  function start() {
+	  interval = setInterval(() => {
+		  if(currstate === MyState.RUNNING) {
+			  //calculate curr time
+			  currTimeEpoch = Math.floor((Date.now()) / (1000 * 60)) * 60;
+			  //startTimeEpoch = getSecondsSinceEpoch(startDateTime);
+				//console.log(currTimeEpoch);
+				//console.log(Math.floor((Date.now()) / (1000 * 60)) * 60);
+			  elapsed = currTimeEpoch - startTimeEpoch + oldElapsedTime;
+			  if (elapsed > duration) {
+				  elapsed = duration
+				  clearInterval(interval)
+			  }
+		  }
+	  }, 1000)
+  }
+  function getSecondsSinceEpoch(dateString) {
+	  // Split the input string into date and time parts
+	  const [datePart, timePart] = dateString.split(' ');
+	  // Split the date part into day, month, and year
+	  const [day, month, year] = datePart.split('/');
+	  // Split the time part into hours and minutes
+	  const [hours, minutes] = timePart.split(':');
+	  // Create a Date object (note: months are 0-based in JavaScript)
+	  const date = new Date(year, month - 1, day, hours, minutes);
+	  // Get the number of seconds since the Unix epoch
+	  const secondsSinceEpoch = Math.floor(date.getTime() / 1000);
+	  return secondsSinceEpoch;
+  }
+  function complete() {
+	  //elapsed = 0
+	  clearInterval(interval)
+	  currstate = MyState.PAUSED;
+	  //turn the shit green
+  }
+  function pause() {
+	  currstate = MyState.PAUSED;
+	  console.log("Paused!");
+	  oldElapsedTime = elapsed;
+  }
+  function resume() {
+	  currstate = MyState.RUNNING;
+	  startTimeEpoch = (Math.floor((Date.now()) / (1000 * 60)) * 60);
+	  console.log("Runing!");
+  }
+  /*
+  $effect(() => {
+	  if (!duration) return
+	  start()
+	  return () => clearInterval(interval)
+  })
+   */
+  let cleanupEffect;
+  $: {
+    // Call the previous cleanup (if any) before re-running the effect
+    if (cleanupEffect) cleanupEffect();
+    if (!duration) {
+      // No effect is set up if duration is falsy
+      cleanupEffect = null;
+    }
+    else {
+      // Execute your effect
+      start();
+      // Set up the cleanup function
+      cleanupEffect = () => clearInterval(interval);
+    }
+  }
+  onDestroy(() => {
+    if (cleanupEffect) cleanupEffect();
+  });
+  function calculateDuration() {
+	  try {
+		  // Extract date and time components
+		  let [date1, time1] = startDateTime.split(" ");
+		  let [date2, time2] = endDateTime.split(" ");
+		  let [d1, m1, y1] = date1.split("/").map(Number);
+		  let [d2, m2, y2] = date2.split("/").map(Number);
+		  let [h1, min1] = time1 ? time1.split(":").map(Number) : [0, 0];
+		  let [h2, min2] = time2 ? time2.split(":").map(Number) : [0, 0];
+		  // Convert to JS Date objects (JS months are 0-based)
+		  let start = new Date(y1, m1 - 1, d1, h1, min1);
+		  let end = new Date(y2, m2 - 1, d2, h2, min2);
+		  let totalTime = 0;
+		  // Calculate the difference in milliseconds
+		  let diffMs = end - start;
+		  if (diffMs < 0) {
+			  totalTime = 0;
+			  return;
+		  }
+		  // Convert milliseconds to days, hours, minutes, and seconds
+		  let totalSeconds = Math.floor(diffMs / 1000);
+		  //let days = Math.floor(totalSeconds / 86400);
+		  //let hours = Math.floor((totalSeconds % 86400) / 3600);
+            //let minutes = Math.floor((totalSeconds % 3600) / 60);
+            //let seconds = totalSeconds % 60;
+		  totalTime = totalSeconds;
+		  return totalTime;
+	  } catch (error) {
+		  console.error("Invalid date format:", error);
+	  }
+  }
+    console.log(calculateDuration());
+</script>
+
+<div class="grid-gap">
+	<div>
+      <p>{startDateTime} - {endDateTime}</p>
+		<label>
+			<span>Elapsed time:</span>
+			<progress max={duration} value={elapsed}></progress>
+		</label>
+
+		<div>{elapsed.toFixed(1)}s</div>
+	</div>
+
+    {#if duration === elapsed}
+        <p>SLA breached!</p>
+	{/if}
+	<button on:click={pause}>Pause</button>
+	<button on:click={resume}>Resume</button>
+	<button on:click={complete}>Complete</button>
+</div>
\ No newline at end of file
diff --git a/ui/src/pages/SLA.js b/ui/src/pages/SLA.js
new file mode 100644
index 000000000..2703e1e60
--- /dev/null
+++ b/ui/src/pages/SLA.js
@@ -0,0 +1,27 @@
+import App from './SLAcontainer.svelte';
+
+export let app; // Declare at the top level
+
+document.addEventListener('alertRendered', (event) => {
+  console.log('alertRendered event received');
+  const containers = document.querySelectorAll('.SLAcontainer');
+  console.log(containers);
+  if (containers) {
+    containers.forEach((container) => {
+      // Check if the container already has the "mounted" class
+      if (container.classList.contains("mounted")) {
+        console.log('SLA component already mounted on this container');
+        return;
+      }
+      app = new App({
+        target: container,
+        props: {
+          IRIStime: event.detail.IRIStime
+        }
+      });
+      console.log('Svelte component mounted:', app);
+      // Mark the container by adding a "mounted" class so we don't mount again.
+      container.classList.add("mounted");
+    });
+  }
+});
\ No newline at end of file
diff --git a/ui/src/pages/SLAbar.svelte b/ui/src/pages/SLAbar.svelte
new file mode 100644
index 000000000..21aa5ef4b
--- /dev/null
+++ b/ui/src/pages/SLAbar.svelte
@@ -0,0 +1,173 @@
+<script lang="ts">
+    import ProgressBar from "./ProgressBar.svelte";
+	//setting up startDateTime value
+	let startDateTime = "01/02/2025 14:30";//defalut value
+    //calculate timestamp DD/MM/YYYY HH:MM of current time
+    const now = new Date();
+    const day = String(now.getDate()).padStart(2, '0');
+    const month = String(now.getMonth() + 1).padStart(2, '0'); // Months are zero-based
+    const year = now.getFullYear();
+    const hours = String(now.getHours()).padStart(2, '0');
+    const minutes = String(now.getMinutes()).padStart(2, '0');
+	startDateTime = `${day}/${month}/${year} ${hours}:${minutes}`;
+	//startDateTime = "06/02/2025 20:58";
+    export let IRIStime;
+    console.log("IRIStimeFromSvelte: "+IRIStime);
+	//setting up severity
+	const SEVERITY ={
+		LOW: 12,
+	  	INFORMATIONAL: 24,
+		MEDIUM: 6,
+		HIGH: 1
+  	};
+	let severity = SEVERITY.HIGH;
+	//setting up endDateTime value
+	let endDateTime = "01/02/2025 22:31"; //default value
+	endDateTime = calculateEndDateTime(startDateTime, severity);
+	console.log("EndTimeeeee:"+endDateTime);
+	//setting up SLA params
+	const workingHours = {
+    	start: 8, // 8:00 AM
+    	end: 21 // 8:00 PM
+  	};
+	const workingDays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
+	let result;
+	result = getClosestWorkingTime(startDateTime);
+	console.log("startDateTime: "+startDateTime);
+	result = formatDateTime(result);
+	console.log("result: "+result);
+	let computedValue;
+	if(result !== true  ){
+		computedValue = calculateEndDateTime(result, severity);
+		console.log("computed value: "+computedValue)
+	}
+	//input in formated timestamp
+    //returns formated timestamp
+    function calculateEndDateTime(startDateTime, severity) {
+  		let secondsEpoch = getSecondsSinceEpoch(startDateTime);
+  		// Add the appropriate time in seconds based on severity
+  		if (severity === SEVERITY.LOW) {
+    		secondsEpoch += SEVERITY.LOW * 3600;
+  		}
+		else if (severity === SEVERITY.INFORMATIONAL) {
+    		secondsEpoch += 24 * 3600;
+  		}
+		else if (severity === SEVERITY.MEDIUM) {
+    		secondsEpoch += SEVERITY.MEDIUM * 3600;
+  		}
+		else if (severity === SEVERITY.HIGH) {
+    		secondsEpoch = secondsEpoch+1200;
+  		}
+  		// Return the formatted date-time string
+  		return getFormattedDateFromTimestamp(secondsEpoch);
+	}
+    //inputs formated timestamp
+    //returns num of seconds
+    function getSecondsSinceEpoch(dateString) {
+        // Split the input string into date and time parts
+        const [datePart, timePart] = dateString.split(' ');
+        // Split the date part into day, month, and year
+        const [day, month, year] = datePart.split('/');
+        // Split the time part into hours and minutes
+        const [hours, minutes] = timePart.split(':');
+        // Create a Date object (note: months are 0-based in JavaScript)
+        const date = new Date(year, month - 1, day, hours, minutes);
+        // Get the number of seconds since the Unix epoch
+        const secondsSinceEpoch = Math.floor(date.getTime() / 1000);
+        return secondsSinceEpoch;
+    }
+	//input num of seconds
+    //returns formated timestamp
+    function getFormattedDateFromTimestamp(timestamp) {
+    // Create a Date object from the timestamp (multiply by 1000 to convert seconds to milliseconds)
+    const date = new Date(timestamp * 1000);
+    // Extract day, month, year, hours, and minutes
+    const day = String(date.getDate()).padStart(2, '0'); // Ensure 2 digits
+    const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-based
+    const year = date.getFullYear();
+    const hours = String(date.getHours()).padStart(2, '0'); // Ensure 2 digits
+    const minutes = String(date.getMinutes()).padStart(2, '0'); // Ensure 2 digits
+    // Format the date and time as DD/MM/YYYY HH:MM
+    const formattedDate = `${day}/${month}/${year} ${hours}:${minutes}`;
+    return formattedDate;
+}
+    //converts the formated timestamp to Date object - easier to work with
+	function parseDateTime(dateTime) {
+    	const [date, time] = dateTime.split(' ');
+    	const [day, month, year] = date.split('/').map(Number);
+    	const [hours, minutes] = time.split(':').map(Number);
+   	 return new Date(year, month - 1, day, hours, minutes);
+  }
+    //inputs Date object and
+    // returns formated timestamp string
+    //if not Date object inputted return true - indicates we are in current working hours
+    function formatDateTime(date) {
+		if (!(date instanceof Date)) {
+      		return true;
+    	}
+    	const day = String(date.getDate()).padStart(2, '0');
+    	const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are zero-based
+    	const year = date.getFullYear();
+   	 	const hours = String(date.getHours()).padStart(2, '0');
+    	const minutes = String(date.getMinutes()).padStart(2, '0');
+    	return `${day}/${month}/${year} ${hours}:${minutes}`;
+  	}
+    // Check if it's a working day and within working hours - if yes return true else return next working time
+    function getClosestWorkingTime(inputDateTime) {
+    	const inputDate = parseDateTime(inputDateTime);
+    	const currentDayIndex = inputDate.getDay(); // 0 for Sunday, 1 for Monday, etc.
+   	 	const currentHour = inputDate.getHours();
+    	// Convert day index to a string name
+    	const dayName = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+    	// Check if it's a working day and within working hours
+    	if (
+      	workingDays.includes(dayName[currentDayIndex]) &&
+      	currentHour >= workingHours.start &&
+      	currentHour < workingHours.end
+    	) {
+      		return true;
+    	}
+    	// Calculate the closest working time
+    	const closestTime = new Date(inputDate);
+    	// If it's outside working hours but on a working day
+    	if (workingDays.includes(dayName[currentDayIndex])) {
+      		if (currentHour < workingHours.start) {
+        		closestTime.setHours(workingHours.start, 0, 0, 0);
+        		return closestTime;
+      		}
+      		if (currentHour >= workingHours.end) {
+        		let daysToAdd = 1;
+            	while (!workingDays.includes(dayName[(currentDayIndex + daysToAdd) % 7])) {
+          			daysToAdd++;
+        		}
+        		closestTime.setDate(closestTime.getDate() + daysToAdd);
+      		}
+    	}
+        else {
+      		// If it's not a working day, find the next working day
+      		let daysToAdd = 1;
+      		while (!workingDays.includes(dayName[(currentDayIndex + daysToAdd) % 7])) {
+        		daysToAdd++;
+      		}
+      		closestTime.setDate(closestTime.getDate() + daysToAdd);
+    	}
+    	// Set the time to the start of working hours
+    	closestTime.setHours(workingHours.start, 0, 0, 0);
+    	return closestTime;
+  	}
+</script>
+
+<div class="grid-gap">
+	<main>
+  <p>Input Date and Time: {startDateTime}</p>
+  {#if result === true} <!-- if within working hours -->
+    <p>The provided time is within working hours.</p>
+	  <ProgressBar startDateTime={startDateTime} {endDateTime}/>
+  {:else} <!-- if not within working hours - recompute endDateTime-->
+    <p>The closest working time is: {result}</p>
+	  <ProgressBar startDateTime={result} endDateTime={computedValue}/>
+  {/if}
+</main>
+
+
+</div>
\ No newline at end of file
diff --git a/ui/src/pages/SLAcontainer.svelte b/ui/src/pages/SLAcontainer.svelte
new file mode 100644
index 000000000..fbd7a73a4
--- /dev/null
+++ b/ui/src/pages/SLAcontainer.svelte
@@ -0,0 +1,11 @@
+<script>
+	import SLAbar from "./SLAbar.svelte";
+    let isVisible = true;
+	export let IRIStime;
+</script>
+
+<div class="grid-gap">
+		<div style:display={isVisible ? 'block' : 'none'}>
+			<SLAbar {IRIStime}/>
+		</div>
+</div>
\ No newline at end of file
diff --git a/ui/src/pages/alerts.js b/ui/src/pages/alerts.js
index 33dfb5600..96fbd09f1 100644
--- a/ui/src/pages/alerts.js
+++ b/ui/src/pages/alerts.js
@@ -1215,6 +1215,10 @@ function renderAlert(alert, expanded=false, modulesOptionsAlertReq,
                            </div>`
               : ""
       }
+                    <h3 class="title mt-3 mb-3"><strong>SLA</strong></h3>
+                    <div class="container" style="display: flex;justify-content: center;">
+                        <div class="SLAcontainer"></div>
+                    </div>
                     
                     </div>
                   </div>
@@ -1405,6 +1409,9 @@ async function updateAlerts(page, per_page, filters = {}, paging=false){
                                                modulesOptionsIocReq.data);
           alertElement.html(alertHtml);
           alertsContainer.append(alertElement);
+          console.log("alert Tile: "+alert.alert_source_event_time);
+            // Dispatch a custom event when done:
+            document.dispatchEvent(new CustomEvent('alertRendered', { detail: { IRIStime: alert.alert_source_event_time }}));
       });
   }
 

From e2e0ad627464b73fa37837efa3b35fa26261ae4b Mon Sep 17 00:00:00 2001
From: Rumburaq2 <oliver.hurt@student.gyarab.cz>
Date: Wed, 19 Feb 2025 21:56:18 +0100
Subject: [PATCH 02/31] [IMP] passing data - shift due to timezones not yet
 fixed

---
 ui/src/pages/SLAbar.svelte | 22 +++++++++++++++++++++-
 ui/src/pages/alerts.js     |  4 ++--
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/ui/src/pages/SLAbar.svelte b/ui/src/pages/SLAbar.svelte
index 21aa5ef4b..320a7ec90 100644
--- a/ui/src/pages/SLAbar.svelte
+++ b/ui/src/pages/SLAbar.svelte
@@ -3,6 +3,7 @@
 	//setting up startDateTime value
 	let startDateTime = "01/02/2025 14:30";//defalut value
     //calculate timestamp DD/MM/YYYY HH:MM of current time
+    /*
     const now = new Date();
     const day = String(now.getDate()).padStart(2, '0');
     const month = String(now.getMonth() + 1).padStart(2, '0'); // Months are zero-based
@@ -10,9 +11,28 @@
     const hours = String(now.getHours()).padStart(2, '0');
     const minutes = String(now.getMinutes()).padStart(2, '0');
 	startDateTime = `${day}/${month}/${year} ${hours}:${minutes}`;
+     */
+
 	//startDateTime = "06/02/2025 20:58";
     export let IRIStime;
     console.log("IRIStimeFromSvelte: "+IRIStime);
+
+    const date = new Date(IRIStime);
+
+    // Get day, month, year, hours, and minutes with proper padding
+    const day = String(date.getDate()).padStart(2, '0');
+    const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-based
+    const year = date.getFullYear();
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+
+    startDateTime = `${day}/${month}/${year} ${hours}:${minutes}`;
+
+
+
+
+
+
 	//setting up severity
 	const SEVERITY ={
 		LOW: 12,
@@ -56,7 +76,7 @@
     		secondsEpoch += SEVERITY.MEDIUM * 3600;
   		}
 		else if (severity === SEVERITY.HIGH) {
-    		secondsEpoch = secondsEpoch+1200;
+    		secondsEpoch = secondsEpoch+4800;
   		}
   		// Return the formatted date-time string
   		return getFormattedDateFromTimestamp(secondsEpoch);
diff --git a/ui/src/pages/alerts.js b/ui/src/pages/alerts.js
index 96fbd09f1..51cd1a9b6 100644
--- a/ui/src/pages/alerts.js
+++ b/ui/src/pages/alerts.js
@@ -1409,9 +1409,9 @@ async function updateAlerts(page, per_page, filters = {}, paging=false){
                                                modulesOptionsIocReq.data);
           alertElement.html(alertHtml);
           alertsContainer.append(alertElement);
-          console.log("alert Tile: "+alert.alert_source_event_time);
+          console.log("alert Tile: "+formatTime(alert.alert_creation_time));
             // Dispatch a custom event when done:
-            document.dispatchEvent(new CustomEvent('alertRendered', { detail: { IRIStime: alert.alert_source_event_time }}));
+            document.dispatchEvent(new CustomEvent('alertRendered', { detail: { IRIStime: alert.alert_creation_time }}));
       });
   }
 

From d28c2292dd2d635afe4768beb09e669acfc322ea Mon Sep 17 00:00:00 2001
From: Rumburaq2 <oliver.hurt@student.gyarab.cz>
Date: Thu, 20 Feb 2025 00:09:05 +0100
Subject: [PATCH 03/31] debug cosole.logs

---
 ui/src/pages/ProgressBar.svelte | 6 ++++++
 ui/src/pages/SLAbar.svelte      | 6 ++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/ui/src/pages/ProgressBar.svelte b/ui/src/pages/ProgressBar.svelte
index c28cfab31..c9019d7d4 100644
--- a/ui/src/pages/ProgressBar.svelte
+++ b/ui/src/pages/ProgressBar.svelte
@@ -28,6 +28,12 @@ import { onDestroy } from 'svelte';
 				//console.log(currTimeEpoch);
 				//console.log(Math.floor((Date.now()) / (1000 * 60)) * 60);
 			  elapsed = currTimeEpoch - startTimeEpoch + oldElapsedTime;
+			  console.log("-----------");
+			  console.log("startTimeEpoch: "+startTimeEpoch);
+			  console.log("duration: "+duration);
+			  console.log("elapsed: "+elapsed);
+			  console.log("currentTimeEpoch: "+currTimeEpoch);
+			  console.log("-----------");
 			  if (elapsed > duration) {
 				  elapsed = duration
 				  clearInterval(interval)
diff --git a/ui/src/pages/SLAbar.svelte b/ui/src/pages/SLAbar.svelte
index 320a7ec90..b32b2c94a 100644
--- a/ui/src/pages/SLAbar.svelte
+++ b/ui/src/pages/SLAbar.svelte
@@ -19,6 +19,8 @@
 
     const date = new Date(IRIStime);
 
+    date.setHours(date.getHours() + 1);
+
     // Get day, month, year, hours, and minutes with proper padding
     const day = String(date.getDate()).padStart(2, '0');
     const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-based
@@ -48,7 +50,7 @@
 	//setting up SLA params
 	const workingHours = {
     	start: 8, // 8:00 AM
-    	end: 21 // 8:00 PM
+    	end: 23 // 8:00 PM
   	};
 	const workingDays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
 	let result;
@@ -76,7 +78,7 @@
     		secondsEpoch += SEVERITY.MEDIUM * 3600;
   		}
 		else if (severity === SEVERITY.HIGH) {
-    		secondsEpoch = secondsEpoch+4800;
+    		secondsEpoch = secondsEpoch+1200;
   		}
   		// Return the formatted date-time string
   		return getFormattedDateFromTimestamp(secondsEpoch);

From ad9e3eddb74038904afb117261a4d010110c397c Mon Sep 17 00:00:00 2001
From: Rumburaq2 <oliver.hurt@student.gyarab.cz>
Date: Thu, 20 Feb 2025 15:33:22 +0100
Subject: [PATCH 04/31] [ADD] working persistence of SLA elapsed time

---
 ui/src/pages/ProgressBar.svelte | 29 +++++++++++++++++++++++++++--
 ui/src/pages/SLAbar.svelte      |  9 +++++----
 ui/src/pages/persistentStore.js | 15 +++++++++++++++
 3 files changed, 47 insertions(+), 6 deletions(-)
 create mode 100644 ui/src/pages/persistentStore.js

diff --git a/ui/src/pages/ProgressBar.svelte b/ui/src/pages/ProgressBar.svelte
index c9019d7d4..ffff6926d 100644
--- a/ui/src/pages/ProgressBar.svelte
+++ b/ui/src/pages/ProgressBar.svelte
@@ -1,10 +1,16 @@
 <script lang="ts">
 import { onDestroy } from 'svelte';
+
+
+
+  export let myStore;
+
   const MyState ={
 		NEW: 0,
 	  	RUNNING: 1,
 	    PAUSED: 2,
   };
+
   let currstate = MyState.RUNNING;
   //let { startDateTime = "01/02/2025 14:30", endDateTime = "01/02/2025 14:31" } = $props();
   export let startDateTime = "01/02/2025 14:30";
@@ -19,6 +25,7 @@ import { onDestroy } from 'svelte';
   let currTimeEpoch = 0;
   let startTimeEpoch = getSecondsSinceEpoch(startDateTime);
   //let severity;
+
   function start() {
 	  interval = setInterval(() => {
 		  if(currstate === MyState.RUNNING) {
@@ -27,7 +34,13 @@ import { onDestroy } from 'svelte';
 			  //startTimeEpoch = getSecondsSinceEpoch(startDateTime);
 				//console.log(currTimeEpoch);
 				//console.log(Math.floor((Date.now()) / (1000 * 60)) * 60);
-			  elapsed = currTimeEpoch - startTimeEpoch + oldElapsedTime;
+			  if($myStore < 0){
+				  elapsed = currTimeEpoch - startTimeEpoch + oldElapsedTime;
+			  }
+			  else {
+				  elapsed = $myStore;
+			  }
+
 			  console.log("-----------");
 			  console.log("startTimeEpoch: "+startTimeEpoch);
 			  console.log("duration: "+duration);
@@ -41,6 +54,7 @@ import { onDestroy } from 'svelte';
 		  }
 	  }, 1000)
   }
+
   function getSecondsSinceEpoch(dateString) {
 	  // Split the input string into date and time parts
 	  const [datePart, timePart] = dateString.split(' ');
@@ -54,22 +68,31 @@ import { onDestroy } from 'svelte';
 	  const secondsSinceEpoch = Math.floor(date.getTime() / 1000);
 	  return secondsSinceEpoch;
   }
+
+  function changeValue(newValue) {
+	  $myStore = newValue;
+  }
+
   function complete() {
 	  //elapsed = 0
 	  clearInterval(interval)
 	  currstate = MyState.PAUSED;
+	  changeValue(elapsed);
 	  //turn the shit green
   }
+
   function pause() {
 	  currstate = MyState.PAUSED;
 	  console.log("Paused!");
 	  oldElapsedTime = elapsed;
   }
+
   function resume() {
 	  currstate = MyState.RUNNING;
 	  startTimeEpoch = (Math.floor((Date.now()) / (1000 * 60)) * 60);
 	  console.log("Runing!");
   }
+
   /*
   $effect(() => {
 	  if (!duration) return
@@ -146,4 +169,6 @@ import { onDestroy } from 'svelte';
 	<button on:click={pause}>Pause</button>
 	<button on:click={resume}>Resume</button>
 	<button on:click={complete}>Complete</button>
-</div>
\ No newline at end of file
+</div>
+
+<p>Local store: {$myStore}</p>
\ No newline at end of file
diff --git a/ui/src/pages/SLAbar.svelte b/ui/src/pages/SLAbar.svelte
index b32b2c94a..a0d48fcce 100644
--- a/ui/src/pages/SLAbar.svelte
+++ b/ui/src/pages/SLAbar.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
     import ProgressBar from "./ProgressBar.svelte";
+     import { createPersistentStore } from './persistentStore.js';
+
 	//setting up startDateTime value
 	let startDateTime = "01/02/2025 14:30";//defalut value
     //calculate timestamp DD/MM/YYYY HH:MM of current time
@@ -31,8 +33,7 @@
     startDateTime = `${day}/${month}/${year} ${hours}:${minutes}`;
 
 
-
-
+   const myStore = createPersistentStore(startDateTime, -1);
 
 
 	//setting up severity
@@ -184,10 +185,10 @@
   <p>Input Date and Time: {startDateTime}</p>
   {#if result === true} <!-- if within working hours -->
     <p>The provided time is within working hours.</p>
-	  <ProgressBar startDateTime={startDateTime} {endDateTime}/>
+	  <ProgressBar startDateTime={startDateTime} {endDateTime} {myStore}/>
   {:else} <!-- if not within working hours - recompute endDateTime-->
     <p>The closest working time is: {result}</p>
-	  <ProgressBar startDateTime={result} endDateTime={computedValue}/>
+	  <ProgressBar startDateTime={result} endDateTime={computedValue} {myStore}/>
   {/if}
 </main>
 
diff --git a/ui/src/pages/persistentStore.js b/ui/src/pages/persistentStore.js
new file mode 100644
index 000000000..41c85483d
--- /dev/null
+++ b/ui/src/pages/persistentStore.js
@@ -0,0 +1,15 @@
+import { writable } from 'svelte/store';
+
+export function createPersistentStore(key, initialValue) {
+  // Try to read from localStorage; if none exists, use the initial value
+  const storedValue = localStorage.getItem(key);
+  const data = storedValue ? JSON.parse(storedValue) : initialValue;
+  const store = writable(data);
+
+  // Subscribe to store changes and write to localStorage
+  store.subscribe(value => {
+    localStorage.setItem(key, JSON.stringify(value));
+  });
+
+  return store;
+}

From ad612b8b88a2b15adeaf54ce361cb51e85838816 Mon Sep 17 00:00:00 2001
From: Rumburaq2 <oliver.hurt@student.gyarab.cz>
Date: Thu, 20 Feb 2025 20:09:02 +0100
Subject: [PATCH 05/31] [IMP] rerender alert upon alert refresh (not just
 /alets page refresh)

---
 ui/src/pages/ProgressBar.svelte | 13 +++++++++++++
 ui/src/pages/SLAbar.svelte      |  2 +-
 ui/src/pages/alerts.js          |  4 +++-
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/ui/src/pages/ProgressBar.svelte b/ui/src/pages/ProgressBar.svelte
index ffff6926d..c2a94c1c6 100644
--- a/ui/src/pages/ProgressBar.svelte
+++ b/ui/src/pages/ProgressBar.svelte
@@ -41,16 +41,22 @@ import { onDestroy } from 'svelte';
 				  elapsed = $myStore;
 			  }
 
+			  /*
 			  console.log("-----------");
 			  console.log("startTimeEpoch: "+startTimeEpoch);
 			  console.log("duration: "+duration);
 			  console.log("elapsed: "+elapsed);
 			  console.log("currentTimeEpoch: "+currTimeEpoch);
 			  console.log("-----------");
+
+			   */
 			  if (elapsed > duration) {
 				  elapsed = duration
 				  clearInterval(interval)
 			  }
+			  if (elapsed < 0){
+				  currstate = MyState.NEW;
+			  }
 		  }
 	  }, 1000)
   }
@@ -75,9 +81,16 @@ import { onDestroy } from 'svelte';
 
   function complete() {
 	  //elapsed = 0
+
 	  clearInterval(interval)
 	  currstate = MyState.PAUSED;
+	  if (elapsed < 0){
+		  elapsed = 0;
+	  }
 	  changeValue(elapsed);
+
+
+
 	  //turn the shit green
   }
 
diff --git a/ui/src/pages/SLAbar.svelte b/ui/src/pages/SLAbar.svelte
index a0d48fcce..1f87b9f3c 100644
--- a/ui/src/pages/SLAbar.svelte
+++ b/ui/src/pages/SLAbar.svelte
@@ -51,7 +51,7 @@
 	//setting up SLA params
 	const workingHours = {
     	start: 8, // 8:00 AM
-    	end: 23 // 8:00 PM
+    	end: 21 // 8:00 PM
   	};
 	const workingDays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
 	let result;
diff --git a/ui/src/pages/alerts.js b/ui/src/pages/alerts.js
index 51cd1a9b6..d4c0aac37 100644
--- a/ui/src/pages/alerts.js
+++ b/ui/src/pages/alerts.js
@@ -1026,7 +1026,7 @@ function renderAlert(alert, expanded=false, modulesOptionsAlertReq,
                             </button>
                         </div>
                       </div>` : ''}
-                      ${alert.alert_creation_time ? `<div class="row mt-2">
+                      ${alert.alert_creation_time ? `<div class="row mt-2 IRIScreationTime">
                         <div class="col-md-3"><b>IRIS Creation Time:</b></div>
                         <div class="col-md-9 copy-value">
                             ${formatTime(alert.alert_creation_time)} UTC
@@ -1328,6 +1328,8 @@ async function refreshAlert(alertId, alertData, expanded=false) {
     const alertElement = $(`#alertCard-${alertId}`);
     const alertHtml = renderAlert(alertData, expanded, modulesOptionsAlertReq.data, modulesOptionsIocReq.data);
     alertElement.replaceWith(alertHtml);
+    console.log(alertData.alert_creation_time);
+    document.dispatchEvent(new CustomEvent('alertRendered', { detail: { IRIStime: alertData.alert_creation_time }}));
 }
 
 async function fetchModulesOptionsAlert() {

From 35a7ee9f8e44a26762ad200562a27f7c7c86f54e Mon Sep 17 00:00:00 2001
From: Rumburaq2 <oliver.hurt@student.gyarab.cz>
Date: Fri, 21 Feb 2025 15:11:45 +0100
Subject: [PATCH 06/31] [ADD] Styling of SLA plugin

---
 ui/src/pages/ProgressBar.svelte | 71 ++++++++++++++++++++++++++++-----
 ui/src/pages/SLAbar.svelte      |  3 --
 ui/src/pages/alerts.js          | 14 ++++---
 3 files changed, 71 insertions(+), 17 deletions(-)

diff --git a/ui/src/pages/ProgressBar.svelte b/ui/src/pages/ProgressBar.svelte
index c2a94c1c6..c442f8e08 100644
--- a/ui/src/pages/ProgressBar.svelte
+++ b/ui/src/pages/ProgressBar.svelte
@@ -166,14 +166,26 @@ import { onDestroy } from 'svelte';
 </script>
 
 <div class="grid-gap">
-	<div>
-      <p>{startDateTime} - {endDateTime}</p>
-		<label>
-			<span>Elapsed time:</span>
-			<progress max={duration} value={elapsed}></progress>
-		</label>
-
-		<div>{elapsed.toFixed(1)}s</div>
+	<div class="progress-container col-md-12" style="display: flex;justify-content: center;">
+		<div class="col-md-12" style="padding-top: 5px;">
+			<div class="row col-md-12" style="display: flex;justify-content: center;">
+      			<p>{startDateTime} - {endDateTime}</p>
+			</div>
+
+			<div class="row col-md-12" style="display: flex;justify-content: center; padding-bottom: 5px;">
+				<span>Elapsed time:</span>
+			</div>
+
+				<label class="row col-md-12" style="display: flex;justify-content: center;">
+
+					<progress class:completed={currstate === MyState.PAUSED} max={duration} value={elapsed}></progress>
+				</label>
+
+
+			<div class="row col-md-12" style="display: flex;justify-content: center;">
+				<p>{elapsed.toFixed(1)}s</p>
+			</div>
+		</div>
 	</div>
 
     {#if duration === elapsed}
@@ -184,4 +196,45 @@ import { onDestroy } from 'svelte';
 	<button on:click={complete}>Complete</button>
 </div>
 
-<p>Local store: {$myStore}</p>
\ No newline at end of file
+<p>Local store: {$myStore}</p>
+
+<style>
+	.progress-container {
+    width: 100%;
+    padding: 5px;
+    border: 2px solid grey;
+    border-radius: 10px;
+    background-color: #f3f3f3;
+  }
+
+  progress {
+    width: 90%;
+    height: 10px;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  p {
+	   height: 10px;
+  }
+
+  progress::-webkit-progress-bar {
+    background-color: #ffffff;
+    border-radius: 10px;
+  }
+
+  progress::-webkit-progress-value {
+    background-color: #00b5f1;
+    border-radius: 10px;
+  }
+
+  /* When complete, change the progress bar's value color */
+  .completed::-webkit-progress-value {
+    background-color: green;
+  }
+
+  progress::-moz-progress-bar {
+    background-color: lightblue;
+    border-radius: 10px;
+  }
+</style>
\ No newline at end of file
diff --git a/ui/src/pages/SLAbar.svelte b/ui/src/pages/SLAbar.svelte
index 1f87b9f3c..20c788f18 100644
--- a/ui/src/pages/SLAbar.svelte
+++ b/ui/src/pages/SLAbar.svelte
@@ -181,7 +181,6 @@
 </script>
 
 <div class="grid-gap">
-	<main>
   <p>Input Date and Time: {startDateTime}</p>
   {#if result === true} <!-- if within working hours -->
     <p>The provided time is within working hours.</p>
@@ -190,7 +189,5 @@
     <p>The closest working time is: {result}</p>
 	  <ProgressBar startDateTime={result} endDateTime={computedValue} {myStore}/>
   {/if}
-</main>
-
 
 </div>
\ No newline at end of file
diff --git a/ui/src/pages/alerts.js b/ui/src/pages/alerts.js
index d4c0aac37..014b7cf1a 100644
--- a/ui/src/pages/alerts.js
+++ b/ui/src/pages/alerts.js
@@ -1026,7 +1026,7 @@ function renderAlert(alert, expanded=false, modulesOptionsAlertReq,
                             </button>
                         </div>
                       </div>` : ''}
-                      ${alert.alert_creation_time ? `<div class="row mt-2 IRIScreationTime">
+                      ${alert.alert_creation_time ? `<div class="row mt-2">
                         <div class="col-md-3"><b>IRIS Creation Time:</b></div>
                         <div class="col-md-9 copy-value">
                             ${formatTime(alert.alert_creation_time)} UTC
@@ -1037,6 +1037,14 @@ function renderAlert(alert, expanded=false, modulesOptionsAlertReq,
                       </div>` : ''}
                     
                     <div class="separator-solid"></div>
+                    
+                    <h3 class="title mt-3 mb-3"><strong>SLA</strong></h3>
+                    <div class="container">
+                        <div class="SLAcontainer"></div>
+                    </div>
+                    
+                     <div class="separator-solid"></div>
+                    
                     <h3 class="title mb-3"><strong>Alert note</strong></h3>
                     <pre id=alertNote-${alert.alert_id}>${alert.alert_note}</pre>
                     
@@ -1215,10 +1223,6 @@ function renderAlert(alert, expanded=false, modulesOptionsAlertReq,
                            </div>`
               : ""
       }
-                    <h3 class="title mt-3 mb-3"><strong>SLA</strong></h3>
-                    <div class="container" style="display: flex;justify-content: center;">
-                        <div class="SLAcontainer"></div>
-                    </div>
                     
                     </div>
                   </div>

From 5700772ec7ab1113264dccb32b49dc876f5088de Mon Sep 17 00:00:00 2001
From: Rumburaq2 <oliver.hurt@student.gyarab.cz>
Date: Fri, 21 Feb 2025 17:38:51 +0100
Subject: [PATCH 07/31] [IMP] persistence of completed state

---
 ui/src/pages/ProgressBar.svelte | 34 ++++++++++++++++++++++++++-------
 ui/src/pages/SLAbar.svelte      |  7 ++++++-
 2 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/ui/src/pages/ProgressBar.svelte b/ui/src/pages/ProgressBar.svelte
index c442f8e08..5d8a2bdf3 100644
--- a/ui/src/pages/ProgressBar.svelte
+++ b/ui/src/pages/ProgressBar.svelte
@@ -5,19 +5,21 @@ import { onDestroy } from 'svelte';
 
   export let myStore;
 
+  //$: ({ elapsed_saved, state } = $myStore);
+
   const MyState ={
 		NEW: 0,
 	  	RUNNING: 1,
 	    PAUSED: 2,
   };
 
-  let currstate = MyState.RUNNING;
+  let currstate = $myStore.state;
   //let { startDateTime = "01/02/2025 14:30", endDateTime = "01/02/2025 14:31" } = $props();
   export let startDateTime = "01/02/2025 14:30";
   export let endDateTime = "01/02/2025 14:30";
   let timecomputed = calculateDuration(); //calculate duration betwwen two timestamps in seconds
   //let elapsed = $state(0);
-  $: elapsed = 0;
+  $: elapsed = $myStore.elapsed_saved;
   //let duration = $state(timecomputed);
   $: duration = timecomputed;
   let interval: number
@@ -34,11 +36,12 @@ import { onDestroy } from 'svelte';
 			  //startTimeEpoch = getSecondsSinceEpoch(startDateTime);
 				//console.log(currTimeEpoch);
 				//console.log(Math.floor((Date.now()) / (1000 * 60)) * 60);
-			  if($myStore < 0){
+			  if($myStore.elapsed_saved < 0){
 				  elapsed = currTimeEpoch - startTimeEpoch + oldElapsedTime;
+				  console.log("elapsed: "+elapsed);
 			  }
 			  else {
-				  elapsed = $myStore;
+				  elapsed = $myStore.elapsed_saved;
 			  }
 
 			  /*
@@ -55,7 +58,7 @@ import { onDestroy } from 'svelte';
 				  clearInterval(interval)
 			  }
 			  if (elapsed < 0){
-				  currstate = MyState.NEW;
+				  //currstate = MyState.NEW;
 			  }
 		  }
 	  }, 1000)
@@ -79,6 +82,18 @@ import { onDestroy } from 'svelte';
 	  $myStore = newValue;
   }
 
+
+  // Alternatively, if you want to set a property to a new absolute value:
+  function setValue(property, newValue) {
+    myStore.update(current => ({
+      ...current,
+      [property]: newValue
+    }));
+  }
+
+
+
+
   function complete() {
 	  //elapsed = 0
 
@@ -87,7 +102,11 @@ import { onDestroy } from 'svelte';
 	  if (elapsed < 0){
 		  elapsed = 0;
 	  }
-	  changeValue(elapsed);
+	  //changeValue(elapsed);
+	  console.log("elapsedFromComplete "+elapsed);
+	  setValue('elapsed_saved', elapsed);
+	  setValue('state', 2);
+
 
 
 
@@ -196,7 +215,8 @@ import { onDestroy } from 'svelte';
 	<button on:click={complete}>Complete</button>
 </div>
 
-<p>Local store: {$myStore}</p>
+<p>Local store elapsed_saved: {$myStore.elapsed_saved}</p>
+<p>Local store state: {$myStore.state}</p>
 
 <style>
 	.progress-container {
diff --git a/ui/src/pages/SLAbar.svelte b/ui/src/pages/SLAbar.svelte
index 20c788f18..e81664877 100644
--- a/ui/src/pages/SLAbar.svelte
+++ b/ui/src/pages/SLAbar.svelte
@@ -33,7 +33,12 @@
     startDateTime = `${day}/${month}/${year} ${hours}:${minutes}`;
 
 
-   const myStore = createPersistentStore(startDateTime, -1);
+   //const myStore = createPersistentStore(startDateTime, -1);
+
+    const myStore = createPersistentStore(startDateTime, {
+        elapsed_saved: -1,
+        state: 1 //state RUNNING
+    });
 
 
 	//setting up severity

From 958e184b166e0902729491990e8a6ac95f8d398f Mon Sep 17 00:00:00 2001
From: Rumburaq2 <oliver.hurt@student.gyarab.cz>
Date: Fri, 21 Feb 2025 18:32:33 +0100
Subject: [PATCH 08/31] [IMP] turn progress bar red upon SLA breach

---
 ui/src/pages/ProgressBar.svelte | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/ui/src/pages/ProgressBar.svelte b/ui/src/pages/ProgressBar.svelte
index 5d8a2bdf3..493d4f956 100644
--- a/ui/src/pages/ProgressBar.svelte
+++ b/ui/src/pages/ProgressBar.svelte
@@ -26,6 +26,7 @@ import { onDestroy } from 'svelte';
   let oldElapsedTime = 0;
   let currTimeEpoch = 0;
   let startTimeEpoch = getSecondsSinceEpoch(startDateTime);
+  let SLAbreached = false;
   //let severity;
 
   function start() {
@@ -56,6 +57,7 @@ import { onDestroy } from 'svelte';
 			  if (elapsed > duration) {
 				  elapsed = duration
 				  clearInterval(interval)
+				  SLAbreached = true;
 			  }
 			  if (elapsed < 0){
 				  //currstate = MyState.NEW;
@@ -196,8 +198,7 @@ import { onDestroy } from 'svelte';
 			</div>
 
 				<label class="row col-md-12" style="display: flex;justify-content: center;">
-
-					<progress class:completed={currstate === MyState.PAUSED} max={duration} value={elapsed}></progress>
+					<progress class:completed={currstate === MyState.PAUSED} class:breached={SLAbreached} max={duration} value={elapsed}></progress>
 				</label>
 
 
@@ -208,7 +209,7 @@ import { onDestroy } from 'svelte';
 	</div>
 
     {#if duration === elapsed}
-        <p>SLA breached!</p>
+        <p class="row col-md-12" style="display: flex;justify-content: center;"><strong>SLA breached!</strong></p>
 	{/if}
 	<button on:click={pause}>Pause</button>
 	<button on:click={resume}>Resume</button>
@@ -253,6 +254,10 @@ import { onDestroy } from 'svelte';
     background-color: green;
   }
 
+  .breached::-webkit-progress-value {
+    background-color: red;
+  }
+
   progress::-moz-progress-bar {
     background-color: lightblue;
     border-radius: 10px;

From 4939738e8f196ed69e59e1a2399f5d8b8af8feaa Mon Sep 17 00:00:00 2001
From: Rumburaq2 <oliver.hurt@student.gyarab.cz>
Date: Fri, 21 Feb 2025 19:02:55 +0100
Subject: [PATCH 09/31] [IMP] printing alert_status_id

---
 ui/src/pages/SLA.js    | 1 +
 ui/src/pages/alerts.js | 8 +++++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/ui/src/pages/SLA.js b/ui/src/pages/SLA.js
index 2703e1e60..e524386a7 100644
--- a/ui/src/pages/SLA.js
+++ b/ui/src/pages/SLA.js
@@ -4,6 +4,7 @@ export let app; // Declare at the top level
 
 document.addEventListener('alertRendered', (event) => {
   console.log('alertRendered event received');
+  console.log("alertData22 "+event.detail.alertStatusID);
   const containers = document.querySelectorAll('.SLAcontainer');
   console.log(containers);
   if (containers) {
diff --git a/ui/src/pages/alerts.js b/ui/src/pages/alerts.js
index 014b7cf1a..8e2cadaa5 100644
--- a/ui/src/pages/alerts.js
+++ b/ui/src/pages/alerts.js
@@ -1332,8 +1332,8 @@ async function refreshAlert(alertId, alertData, expanded=false) {
     const alertElement = $(`#alertCard-${alertId}`);
     const alertHtml = renderAlert(alertData, expanded, modulesOptionsAlertReq.data, modulesOptionsIocReq.data);
     alertElement.replaceWith(alertHtml);
-    console.log(alertData.alert_creation_time);
-    document.dispatchEvent(new CustomEvent('alertRendered', { detail: { IRIStime: alertData.alert_creation_time }}));
+    //console.log(alertData);
+    document.dispatchEvent(new CustomEvent('alertRendered', { detail: { IRIStime: alertData.alert_creation_time, alertStatusID: alertData.alert_status_id }}));
 }
 
 async function fetchModulesOptionsAlert() {
@@ -1417,7 +1417,9 @@ async function updateAlerts(page, per_page, filters = {}, paging=false){
           alertsContainer.append(alertElement);
           console.log("alert Tile: "+formatTime(alert.alert_creation_time));
             // Dispatch a custom event when done:
-            document.dispatchEvent(new CustomEvent('alertRendered', { detail: { IRIStime: alert.alert_creation_time }}));
+            //document.dispatchEvent(new CustomEvent('alertRendered', { detail: { IRIStime: alert.alert_creation_time }}));
+            document.dispatchEvent(new CustomEvent('alertRendered', { detail: { IRIStime: alert.alert_creation_time, alertStatusID: alert.alert_status_id }}));
+
       });
   }
 

From 8f1e65f4178fdbc0a6cd9d4b8dbbcb260870bda0 Mon Sep 17 00:00:00 2001
From: Rumburaq2 <oliver.hurt@student.gyarab.cz>
Date: Fri, 21 Feb 2025 20:49:40 +0100
Subject: [PATCH 10/31] [IMP] complete SLA when ticket state becomes In
 Progress

---
 ui/src/pages/ProgressBar.svelte  | 11 ++++++++---
 ui/src/pages/SLA.js              |  3 ++-
 ui/src/pages/SLAbar.svelte       |  7 ++++---
 ui/src/pages/SLAcontainer.svelte |  3 ++-
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/ui/src/pages/ProgressBar.svelte b/ui/src/pages/ProgressBar.svelte
index 493d4f956..3c8548db4 100644
--- a/ui/src/pages/ProgressBar.svelte
+++ b/ui/src/pages/ProgressBar.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
-import { onDestroy } from 'svelte';
+	import {onDestroy, tick} from 'svelte';
 
 
 
   export let myStore;
+  export let alertStatusID;
 
   //$: ({ elapsed_saved, state } = $myStore);
 
@@ -26,10 +27,10 @@ import { onDestroy } from 'svelte';
   let oldElapsedTime = 0;
   let currTimeEpoch = 0;
   let startTimeEpoch = getSecondsSinceEpoch(startDateTime);
-  let SLAbreached = false;
+  $: SLAbreached = false;
   //let severity;
 
-  function start() {
+	function start() {
 	  interval = setInterval(() => {
 		  if(currstate === MyState.RUNNING) {
 			  //calculate curr time
@@ -62,6 +63,10 @@ import { onDestroy } from 'svelte';
 			  if (elapsed < 0){
 				  //currstate = MyState.NEW;
 			  }
+			  if (alertStatusID === 4){
+		  		//await tick();
+		  		complete();
+			  }
 		  }
 	  }, 1000)
   }
diff --git a/ui/src/pages/SLA.js b/ui/src/pages/SLA.js
index e524386a7..07428f090 100644
--- a/ui/src/pages/SLA.js
+++ b/ui/src/pages/SLA.js
@@ -17,7 +17,8 @@ document.addEventListener('alertRendered', (event) => {
       app = new App({
         target: container,
         props: {
-          IRIStime: event.detail.IRIStime
+          IRIStime: event.detail.IRIStime,
+          alertStatusID: event.detail.alertStatusID
         }
       });
       console.log('Svelte component mounted:', app);
diff --git a/ui/src/pages/SLAbar.svelte b/ui/src/pages/SLAbar.svelte
index e81664877..10dbcc4d9 100644
--- a/ui/src/pages/SLAbar.svelte
+++ b/ui/src/pages/SLAbar.svelte
@@ -17,7 +17,7 @@
 
 	//startDateTime = "06/02/2025 20:58";
     export let IRIStime;
-    console.log("IRIStimeFromSvelte: "+IRIStime);
+
 
     const date = new Date(IRIStime);
 
@@ -34,6 +34,7 @@
 
 
    //const myStore = createPersistentStore(startDateTime, -1);
+    export let alertStatusID;
 
     const myStore = createPersistentStore(startDateTime, {
         elapsed_saved: -1,
@@ -189,10 +190,10 @@
   <p>Input Date and Time: {startDateTime}</p>
   {#if result === true} <!-- if within working hours -->
     <p>The provided time is within working hours.</p>
-	  <ProgressBar startDateTime={startDateTime} {endDateTime} {myStore}/>
+	  <ProgressBar startDateTime={startDateTime} {endDateTime} {myStore} {alertStatusID}/>
   {:else} <!-- if not within working hours - recompute endDateTime-->
     <p>The closest working time is: {result}</p>
-	  <ProgressBar startDateTime={result} endDateTime={computedValue} {myStore}/>
+	  <ProgressBar startDateTime={result} endDateTime={computedValue} {myStore} {alertStatusID}/>
   {/if}
 
 </div>
\ No newline at end of file
diff --git a/ui/src/pages/SLAcontainer.svelte b/ui/src/pages/SLAcontainer.svelte
index fbd7a73a4..41cc8f85b 100644
--- a/ui/src/pages/SLAcontainer.svelte
+++ b/ui/src/pages/SLAcontainer.svelte
@@ -2,10 +2,11 @@
 	import SLAbar from "./SLAbar.svelte";
     let isVisible = true;
 	export let IRIStime;
+	export let alertStatusID;
 </script>
 
 <div class="grid-gap">
 		<div style:display={isVisible ? 'block' : 'none'}>
-			<SLAbar {IRIStime}/>
+			<SLAbar {IRIStime} {alertStatusID}/>
 		</div>
 </div>
\ No newline at end of file

From 12943f32f7c1e0b972525e26545a0592e1c8db72 Mon Sep 17 00:00:00 2001
From: Rumburaq2 <oliver.hurt@student.gyarab.cz>
Date: Sat, 22 Feb 2025 00:09:01 +0100
Subject: [PATCH 11/31] [IMP] Working SLA severity based on alert sev.

---
 ui/src/pages/SLA.js              |  3 ++-
 ui/src/pages/SLAbar.svelte       | 26 +++++++++++++++++++-------
 ui/src/pages/SLAcontainer.svelte |  4 +++-
 ui/src/pages/alerts.js           | 23 ++++++++++++++++++-----
 4 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/ui/src/pages/SLA.js b/ui/src/pages/SLA.js
index 07428f090..09b4bba5f 100644
--- a/ui/src/pages/SLA.js
+++ b/ui/src/pages/SLA.js
@@ -18,7 +18,8 @@ document.addEventListener('alertRendered', (event) => {
         target: container,
         props: {
           IRIStime: event.detail.IRIStime,
-          alertStatusID: event.detail.alertStatusID
+          alertStatusID: event.detail.alertStatusID,
+          alertSevID: event.detail.alertSevID
         }
       });
       console.log('Svelte component mounted:', app);
diff --git a/ui/src/pages/SLAbar.svelte b/ui/src/pages/SLAbar.svelte
index 10dbcc4d9..514d1b3f9 100644
--- a/ui/src/pages/SLAbar.svelte
+++ b/ui/src/pages/SLAbar.svelte
@@ -35,6 +35,7 @@
 
    //const myStore = createPersistentStore(startDateTime, -1);
     export let alertStatusID;
+    export let alertSevID;
 
     const myStore = createPersistentStore(startDateTime, {
         elapsed_saved: -1,
@@ -42,6 +43,8 @@
     });
 
 
+
+
 	//setting up severity
 	const SEVERITY ={
 		LOW: 12,
@@ -49,10 +52,10 @@
 		MEDIUM: 6,
 		HIGH: 1
   	};
-	let severity = SEVERITY.HIGH;
+
 	//setting up endDateTime value
 	let endDateTime = "01/02/2025 22:31"; //default value
-	endDateTime = calculateEndDateTime(startDateTime, severity);
+	endDateTime = calculateEndDateTime(startDateTime, alertSevID);
 	console.log("EndTimeeeee:"+endDateTime);
 	//setting up SLA params
 	const workingHours = {
@@ -67,7 +70,7 @@
 	console.log("result: "+result);
 	let computedValue;
 	if(result !== true  ){
-		computedValue = calculateEndDateTime(result, severity);
+		computedValue = calculateEndDateTime(result, alertSevID);
 		console.log("computed value: "+computedValue)
 	}
 	//input in formated timestamp
@@ -75,18 +78,27 @@
     function calculateEndDateTime(startDateTime, severity) {
   		let secondsEpoch = getSecondsSinceEpoch(startDateTime);
   		// Add the appropriate time in seconds based on severity
-  		if (severity === SEVERITY.LOW) {
+        //1 - Medium
+        //2 - Unspecified
+        //3 - Informational
+        //4 - Low
+        //5 - High
+        //6 - Critical
+  		if (severity === 4) { //Low
     		secondsEpoch += SEVERITY.LOW * 3600;
   		}
-		else if (severity === SEVERITY.INFORMATIONAL) {
+		else if (severity === 3) {
     		secondsEpoch += 24 * 3600;
   		}
-		else if (severity === SEVERITY.MEDIUM) {
+		else if (severity === 1) { //medium
     		secondsEpoch += SEVERITY.MEDIUM * 3600;
   		}
-		else if (severity === SEVERITY.HIGH) {
+		else if (severity === 5) {
     		secondsEpoch = secondsEpoch+1200;
   		}
+        else {
+            secondsEpoch += 12 * 3600;
+        }
   		// Return the formatted date-time string
   		return getFormattedDateFromTimestamp(secondsEpoch);
 	}
diff --git a/ui/src/pages/SLAcontainer.svelte b/ui/src/pages/SLAcontainer.svelte
index 41cc8f85b..3a84ae264 100644
--- a/ui/src/pages/SLAcontainer.svelte
+++ b/ui/src/pages/SLAcontainer.svelte
@@ -3,10 +3,12 @@
     let isVisible = true;
 	export let IRIStime;
 	export let alertStatusID;
+	export let alertSevID;
+
 </script>
 
 <div class="grid-gap">
 		<div style:display={isVisible ? 'block' : 'none'}>
-			<SLAbar {IRIStime} {alertStatusID}/>
+			<SLAbar {IRIStime} {alertStatusID} {alertSevID}/>
 		</div>
 </div>
\ No newline at end of file
diff --git a/ui/src/pages/alerts.js b/ui/src/pages/alerts.js
index 8e2cadaa5..168520fb0 100644
--- a/ui/src/pages/alerts.js
+++ b/ui/src/pages/alerts.js
@@ -1333,7 +1333,16 @@ async function refreshAlert(alertId, alertData, expanded=false) {
     const alertHtml = renderAlert(alertData, expanded, modulesOptionsAlertReq.data, modulesOptionsIocReq.data);
     alertElement.replaceWith(alertHtml);
     //console.log(alertData);
-    document.dispatchEvent(new CustomEvent('alertRendered', { detail: { IRIStime: alertData.alert_creation_time, alertStatusID: alertData.alert_status_id }}));
+    //document.dispatchEvent(new CustomEvent('alertRendered', { detail: { IRIStime: alertData.alert_creation_time, alertStatusID: alertData.alert_status_id }}));
+
+    document.dispatchEvent(new CustomEvent('alertRendered', {
+                detail: {
+                    IRIStime: alertData.alert_creation_time,
+                    alertStatusID: alertData.alert_status_id,
+                    alertSevID: alertData.severity.severity_id
+                }
+            }));
+
 }
 
 async function fetchModulesOptionsAlert() {
@@ -1415,11 +1424,15 @@ async function updateAlerts(page, per_page, filters = {}, paging=false){
                                                modulesOptionsIocReq.data);
           alertElement.html(alertHtml);
           alertsContainer.append(alertElement);
-          console.log("alert Tile: "+formatTime(alert.alert_creation_time));
+          console.log(alert);
             // Dispatch a custom event when done:
-            //document.dispatchEvent(new CustomEvent('alertRendered', { detail: { IRIStime: alert.alert_creation_time }}));
-            document.dispatchEvent(new CustomEvent('alertRendered', { detail: { IRIStime: alert.alert_creation_time, alertStatusID: alert.alert_status_id }}));
-
+            document.dispatchEvent(new CustomEvent('alertRendered', {
+                detail: {
+                    IRIStime: alert.alert_creation_time,
+                    alertStatusID: alert.alert_status_id,
+                    alertSevID: alert.severity.severity_id
+                }
+            }));
       });
   }
 

From 1e91f03021167c2c30d5fd56b1cc7995f3bfb76a Mon Sep 17 00:00:00 2001
From: Rumburaq2 <oliver.hurt@student.gyarab.cz>
Date: Fri, 28 Feb 2025 17:40:33 +0100
Subject: [PATCH 12/31] [ADD] SLA configured per customer via Customers page

---
 .../blueprints/pages/alerts/alerts_routes.py  |  20 +++
 source/app/datamgmt/client/client_db.py       |   4 +
 ui/src/pages/ProgressBar.svelte               |   4 +
 ui/src/pages/SLA.js                           |   7 +-
 ui/src/pages/SLAbar.svelte                    |  87 +++++++++++-
 ui/src/pages/SLAcontainer.svelte              |   6 +-
 ui/src/pages/alerts.js                        | 128 ++++++++++++++++--
 7 files changed, 240 insertions(+), 16 deletions(-)

diff --git a/source/app/blueprints/pages/alerts/alerts_routes.py b/source/app/blueprints/pages/alerts/alerts_routes.py
index 00d7e1005..51d387a87 100644
--- a/source/app/blueprints/pages/alerts/alerts_routes.py
+++ b/source/app/blueprints/pages/alerts/alerts_routes.py
@@ -31,6 +31,14 @@
 from app.blueprints.responses import response_error
 from app.blueprints.access_controls import ac_requires
 
+from app.datamgmt.client.client_db import get_client, get_client_list
+from app.forms import AddCustomerForm
+
+from app.datamgmt.client.client_db import get_clients_sla
+from app.blueprints.responses import response_success
+
+from app.blueprints.access_controls import ac_api_requires
+
 alerts_blueprint = Blueprint(
     'alerts',
     __name__,
@@ -57,6 +65,18 @@ def alerts_list_view_route(caseid, url_redir) -> Union[str, Response]:
 
     return render_template('alerts.html', caseid=caseid, form=form)
 
+#later move this to source/app/blueprints/rest/alerts_routes.py
+@alerts_blueprint.route('/alerts/api/get_clients_sla_api', methods=['GET'])
+@ac_api_requires()
+def get_clients_sla_api():
+    rows= get_clients_sla()
+    customers = [dict(row._mapping) for row in rows]
+    output = {
+        "customers_sla": customers
+    }
+
+    return response_success(data=output)
+
 
 @alerts_blueprint.route('/alerts/<int:cur_id>/comments/modal', methods=['GET'])
 @ac_requires(Permissions.alerts_read, no_cid_required=True)
diff --git a/source/app/datamgmt/client/client_db.py b/source/app/datamgmt/client/client_db.py
index 42437dbc5..ed9ca8627 100644
--- a/source/app/datamgmt/client/client_db.py
+++ b/source/app/datamgmt/client/client_db.py
@@ -55,6 +55,10 @@ def get_client_list(current_user_id: int = None,
 
     return output
 
+def get_clients_sla():
+    client_data = Client.query.with_entities(Client.sla, Client.client_id).all()
+    return client_data
+
 
 def get_client(client_id: int) -> Client:
     client = Client.query.filter(Client.client_id == client_id).first()
diff --git a/ui/src/pages/ProgressBar.svelte b/ui/src/pages/ProgressBar.svelte
index 3c8548db4..160fc654b 100644
--- a/ui/src/pages/ProgressBar.svelte
+++ b/ui/src/pages/ProgressBar.svelte
@@ -5,6 +5,10 @@
 
   export let myStore;
   export let alertStatusID;
+  //export let SLA;
+  //export let alertCustomerID;
+
+
 
   //$: ({ elapsed_saved, state } = $myStore);
 
diff --git a/ui/src/pages/SLA.js b/ui/src/pages/SLA.js
index 09b4bba5f..56fa28b93 100644
--- a/ui/src/pages/SLA.js
+++ b/ui/src/pages/SLA.js
@@ -4,7 +4,8 @@ export let app; // Declare at the top level
 
 document.addEventListener('alertRendered', (event) => {
   console.log('alertRendered event received');
-  console.log("alertData22 "+event.detail.alertStatusID);
+  console.log("SLA ELEMENT FROM SLA.JS !!! ", event.detail.alertCustomerID);
+  //console.log(event.detail.alertCustomerID);
   const containers = document.querySelectorAll('.SLAcontainer');
   console.log(containers);
   if (containers) {
@@ -19,7 +20,9 @@ document.addEventListener('alertRendered', (event) => {
         props: {
           IRIStime: event.detail.IRIStime,
           alertStatusID: event.detail.alertStatusID,
-          alertSevID: event.detail.alertSevID
+          alertSevID: event.detail.alertSevID,
+          alertCustomerID: event.detail.alertCustomerID,
+          SLA: event.detail.SLA
         }
       });
       console.log('Svelte component mounted:', app);
diff --git a/ui/src/pages/SLAbar.svelte b/ui/src/pages/SLAbar.svelte
index 514d1b3f9..6c84e476a 100644
--- a/ui/src/pages/SLAbar.svelte
+++ b/ui/src/pages/SLAbar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import ProgressBar from "./ProgressBar.svelte";
-     import { createPersistentStore } from './persistentStore.js';
+    import { createPersistentStore } from './persistentStore.js';
 
 	//setting up startDateTime value
 	let startDateTime = "01/02/2025 14:30";//defalut value
@@ -36,12 +36,51 @@
    //const myStore = createPersistentStore(startDateTime, -1);
     export let alertStatusID;
     export let alertSevID;
+    export let SLA;
+    export let alertCustomerID;
 
     const myStore = createPersistentStore(startDateTime, {
         elapsed_saved: -1,
         state: 1 //state RUNNING
     });
 
+    console.log(`MUJ START DATE TIME JE ${startDateTime}\nMUJ SLA IG TYVOLE ${SLA} MUJ CLIENT ID ${alertCustomerID}`);
+    const parts = SLA.split(':');
+
+    //const workingDays2 = SLA;
+   // const workingDays2 = parts[0].split(',').map(day => day.trim());
+
+    const clients = JSON.parse(SLA);
+    const resultIG = clients.find(client => client.client_id === alertCustomerID)?.sla;
+
+    // Split the SLA into components
+	let workingDays2 = [];
+	let startHour = 8;
+    let endHour = 20;
+
+    if (resultIG.includes(':')) {
+  		const [days, startTime, endTime] = resultIG.split(':');
+
+  		// Process working days
+  		workingDays2 = days.split(', ').map(day => day.trim());
+
+  		// Convert times to numbers
+  		startHour = parseInt(startTime, 10);
+  		endHour = parseInt(endTime, 10);
+	} else {
+  		// Handle case with no times (just days)
+  		workingDays2 = resultIG.split(', ').map(day => day.trim());
+	}
+
+
+
+
+
+
+    const start = parseInt(parts[1], 10);
+    const end = parseInt(parts[2], 10);
+    console.log("startTime", startHour);       // 8
+    console.log("endTime", endHour);
 
 
 
@@ -59,10 +98,50 @@
 	console.log("EndTimeeeee:"+endDateTime);
 	//setting up SLA params
 	const workingHours = {
-    	start: 8, // 8:00 AM
-    	end: 21 // 8:00 PM
+    	start: startHour, // 8:00 AM
+    	end: endHour // 8:00 PM
   	};
-	const workingDays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
+
+	//const workingDays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday'];
+    const workingDays = workingDays2;
+
+     console.log("WORKING DAYS", workingDays2);
+     console.log("MY CLIENT ID", alertCustomerID);
+     console.log("MUY ALERT SEV", alertSevID);
+
+
+
+
+     /*
+    const clients = JSON.parse(SLA);
+    const resultIG = clients.find(client => client.client_id === alertCustomerID)?.sla;
+
+    // Split the SLA into components
+	let workingDays = [];
+	let startHour, endHour;
+
+	if (resultIG.includes(':')) {
+  		const [days, startTime, endTime] = resultIG.split(':');
+
+  		// Process working days
+  		workingDays = days.split(', ').map(day => day.trim());
+
+  		// Convert times to numbers
+  		startHour = parseInt(startTime, 10);
+  		endHour = parseInt(endTime, 10);
+	} else {
+  		// Handle case with no times (just days)
+  		workingDays = resultIG.split(', ').map(day => day.trim());
+	}
+¨
+      */
+
+
+
+
+
+
+
 	let result;
 	result = getClosestWorkingTime(startDateTime);
 	console.log("startDateTime: "+startDateTime);
diff --git a/ui/src/pages/SLAcontainer.svelte b/ui/src/pages/SLAcontainer.svelte
index 3a84ae264..dad152160 100644
--- a/ui/src/pages/SLAcontainer.svelte
+++ b/ui/src/pages/SLAcontainer.svelte
@@ -4,11 +4,15 @@
 	export let IRIStime;
 	export let alertStatusID;
 	export let alertSevID;
+	export let alertCustomerID;
+	export let SLA;
+
+	console.log("SLA FROM SLACOntainer", SLA);
 
 </script>
 
 <div class="grid-gap">
 		<div style:display={isVisible ? 'block' : 'none'}>
-			<SLAbar {IRIStime} {alertStatusID} {alertSevID}/>
+			<SLAbar {IRIStime} {alertStatusID} {alertSevID} {SLA} {alertCustomerID}/>
 		</div>
 </div>
\ No newline at end of file
diff --git a/ui/src/pages/alerts.js b/ui/src/pages/alerts.js
index 168520fb0..b4d72ab14 100644
--- a/ui/src/pages/alerts.js
+++ b/ui/src/pages/alerts.js
@@ -1315,6 +1315,7 @@ async function refreshAlert(alertId, alertData, expanded=false) {
         }
         alertData = alertDataReq.data;
     }
+    const SLAdata = await fetchSLAdata();
 
       if (modulesOptionsAlertReq === null) {
     modulesOptionsAlertReq = await fetchModulesOptionsAlert();
@@ -1332,19 +1333,77 @@ async function refreshAlert(alertId, alertData, expanded=false) {
     const alertElement = $(`#alertCard-${alertId}`);
     const alertHtml = renderAlert(alertData, expanded, modulesOptionsAlertReq.data, modulesOptionsIocReq.data);
     alertElement.replaceWith(alertHtml);
-    //console.log(alertData);
+
+    //const SLAelement = $(`#SLAelement`).text();
+    console.log("SLA ELEMENT IS HERE! ");
+    console.log(alertData.alert_customer_id);
     //document.dispatchEvent(new CustomEvent('alertRendered', { detail: { IRIStime: alertData.alert_creation_time, alertStatusID: alertData.alert_status_id }}));
 
+    //const response = get_request_api('/alerts/api/get_clients_sla_api');
+    //const SLAdata = response.responseJSON.data.customers_sla;
+
     document.dispatchEvent(new CustomEvent('alertRendered', {
-                detail: {
-                    IRIStime: alertData.alert_creation_time,
-                    alertStatusID: alertData.alert_status_id,
-                    alertSevID: alertData.severity.severity_id
-                }
-            }));
+        detail: {
+            IRIStime: alertData.alert_creation_time,
+            alertStatusID: alertData.alert_status_id,
+            alertSevID: alertData.severity.severity_id,
+            alertCustomerID: alertData.alert_customer_id,
+            SLA: SLAdata
+        }
+    }));
+
 
 }
 
+async function fetchSLAdata() {
+
+    try {
+        const response = await fetch('alerts/api/get_clients_sla_api');
+        const data = await response.json();
+
+        // Declare the variable properly
+        const customersSla = data.data.customers_sla;
+        console.log('Customers SLA:', customersSla);
+
+        // Convert the entire array to a single JSON string
+        const jsonString = JSON.stringify(customersSla);
+        console.log("JSON string:", jsonString);
+
+        return jsonString;
+    } catch (error) {
+        console.error('Error fetching data:', error);
+        throw error; // Optionally re-throw the error after logging it
+    }
+
+
+
+
+
+
+
+    /*
+    fetch('alerts/api/get_clients_sla_api')
+        .then(response => response.json())
+        .then(data => {
+            // Assuming the API returns an object with a "data" field that contains "customers_sla"
+            customersSla = data.data.customers_sla;
+            console.log('Customers SLA:', customersSla);
+
+            // Option 1: Convert the entire array to a single JSON string
+            const jsonString = JSON.stringify(customersSla);
+            console.log("JSON string:", jsonString);
+
+        })
+        .catch(error => {
+            console.error('Error fetching data:', error);
+        });
+
+        return await jsonString;
+
+     */
+    }
+
+
 async function fetchModulesOptionsAlert() {
     const response = get_request_api('/dim/hooks/options/alert/list');
 
@@ -1398,6 +1457,10 @@ async function updateAlerts(page, per_page, filters = {}, paging=false){
     }
   }
 
+
+  const SLAdata = await fetchSLAdata();
+
+
   // Check if the selection mode is active
    const selectionModeActive = $('body').hasClass('selection-mode');
    selectionModeActive ? $('body').removeClass('selection-mode') : '';
@@ -1425,14 +1488,61 @@ async function updateAlerts(page, per_page, filters = {}, paging=false){
           alertElement.html(alertHtml);
           alertsContainer.append(alertElement);
           console.log(alert);
+          const jsonString = "";
+
+          document.dispatchEvent(new CustomEvent('alertRendered', {
+                detail: {
+                    IRIStime: alert.alert_creation_time,
+                    alertStatusID: alert.alert_status_id,
+                    alertSevID: alert.severity.severity_id,
+                    alertCustomerID: alert.alert_customer_id,
+                    SLA: SLAdata
+                }
+            }));
+
+
+
             // Dispatch a custom event when done:
-            document.dispatchEvent(new CustomEvent('alertRendered', {
+          //const SLAelement = $(`#SLAelement`).text();
+          /*
+
+          let customersSla;
+          let clientString = "";
+          fetch('alerts/api/get_clients_sla_api')
+            .then(response => response.json())
+            .then(data => {
+                customersSla = data.data.customers_sla;
+                console.log('Customers SLA:', customersSla);
+
+                const jsonString = JSON.stringify(customersSla);
+                console.log("JSON string:", jsonString);
+
+                // Option 2: Convert each object to a custom formatted string and print them individually
+
+                customersSla.forEach(client => {
+                    if( client.client_id === alert.alert_customer_id){
+                        clientString = `${client.sla}`;
+                    }
+                });
+                console.log(`cleintString ${clientString} clientID ${alert.alert_customer_id}`);
+
+                document.dispatchEvent(new CustomEvent('alertRendered', {
                 detail: {
                     IRIStime: alert.alert_creation_time,
                     alertStatusID: alert.alert_status_id,
-                    alertSevID: alert.severity.severity_id
+                    alertSevID: alert.severity.severity_id,
+                    alertCustomerID: alert.alert_customer_id,
+                    SLA: jsonString
                 }
             }));
+
+            })
+            .catch(error => {
+                console.error('Error fetching data:', error);
+            });
+
+           */
+
       });
   }
 

From 2c137f99c45d065d0255804569111c24836a6f3f Mon Sep 17 00:00:00 2001
From: Rumburaq2 <oliver.hurt@student.gyarab.cz>
Date: Wed, 5 Mar 2025 16:58:08 +0100
Subject: [PATCH 13/31] [ADD] comments + added alertID to svelte frontend

---
 ui/src/pages/ProgressBar.svelte  | 14 +++++++++-----
 ui/src/pages/SLA.js              |  3 ++-
 ui/src/pages/SLAbar.svelte       |  9 ++++++++-
 ui/src/pages/SLAcontainer.svelte |  3 ++-
 ui/src/pages/alerts.js           |  3 ++-
 5 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/ui/src/pages/ProgressBar.svelte b/ui/src/pages/ProgressBar.svelte
index 160fc654b..ae559f584 100644
--- a/ui/src/pages/ProgressBar.svelte
+++ b/ui/src/pages/ProgressBar.svelte
@@ -18,13 +18,17 @@
 	    PAUSED: 2,
   };
 
+	//TODO
+	//query the db for the current state of "SLAcompletedTime" column
+	//based on the alertID
+	// if NULL set state to running //FR??
   let currstate = $myStore.state;
   //let { startDateTime = "01/02/2025 14:30", endDateTime = "01/02/2025 14:31" } = $props();
   export let startDateTime = "01/02/2025 14:30";
   export let endDateTime = "01/02/2025 14:30";
   let timecomputed = calculateDuration(); //calculate duration betwwen two timestamps in seconds
   //let elapsed = $state(0);
-  $: elapsed = $myStore.elapsed_saved;
+  $: elapsed = $myStore.elapsed_saved; //TODO query the db for the current state of "SLAcompletedTime" column
   //let duration = $state(timecomputed);
   $: duration = timecomputed;
   let interval: number
@@ -42,12 +46,12 @@
 			  //startTimeEpoch = getSecondsSinceEpoch(startDateTime);
 				//console.log(currTimeEpoch);
 				//console.log(Math.floor((Date.now()) / (1000 * 60)) * 60);
-			  if($myStore.elapsed_saved < 0){
+			  if($myStore.elapsed_saved < 0){ //TODO query the db for the current state of "SLAcompletedTime" column
 				  elapsed = currTimeEpoch - startTimeEpoch + oldElapsedTime;
 				  console.log("elapsed: "+elapsed);
 			  }
-			  else {
-				  elapsed = $myStore.elapsed_saved;
+			  else { //ig call the fetch funcitons from here???
+				  elapsed = $myStore.elapsed_saved; //TODO query the db for the current state of "SLAcompletedTime" column
 			  }
 
 			  /*
@@ -115,7 +119,7 @@
 	  }
 	  //changeValue(elapsed);
 	  console.log("elapsedFromComplete "+elapsed);
-	  setValue('elapsed_saved', elapsed);
+	  setValue('elapsed_saved', elapsed);// TODO write into db for current state elapsed to the "SLAcompletedTime" column
 	  setValue('state', 2);
 
 
diff --git a/ui/src/pages/SLA.js b/ui/src/pages/SLA.js
index 56fa28b93..d40cbc791 100644
--- a/ui/src/pages/SLA.js
+++ b/ui/src/pages/SLA.js
@@ -22,7 +22,8 @@ document.addEventListener('alertRendered', (event) => {
           alertStatusID: event.detail.alertStatusID,
           alertSevID: event.detail.alertSevID,
           alertCustomerID: event.detail.alertCustomerID,
-          SLA: event.detail.SLA
+          SLA: event.detail.SLA,
+          alertID: event.detail.alertID
         }
       });
       console.log('Svelte component mounted:', app);
diff --git a/ui/src/pages/SLAbar.svelte b/ui/src/pages/SLAbar.svelte
index 6c84e476a..78d82fef6 100644
--- a/ui/src/pages/SLAbar.svelte
+++ b/ui/src/pages/SLAbar.svelte
@@ -38,13 +38,20 @@
     export let alertSevID;
     export let SLA;
     export let alertCustomerID;
+    export let alertID;
 
+    //TODO
+    //create a new column in table "alerts" called "SLAcompletedTime"
+    // with initial value -1 (or null?)
+    // here query if the alert with alert id alertID is NULL
+    // if yes set state to  1 //FR??
     const myStore = createPersistentStore(startDateTime, {
         elapsed_saved: -1,
         state: 1 //state RUNNING
     });
 
-    console.log(`MUJ START DATE TIME JE ${startDateTime}\nMUJ SLA IG TYVOLE ${SLA} MUJ CLIENT ID ${alertCustomerID}`);
+    console.log(`MUJ START DATE TIME JE ${startDateTime}\nMUJ SLA IG TYVOLE ${SLA} MUJ ALERT ID ${alertID}`);
+    //console.log(alertID);
     const parts = SLA.split(':');
 
     //const workingDays2 = SLA;
diff --git a/ui/src/pages/SLAcontainer.svelte b/ui/src/pages/SLAcontainer.svelte
index dad152160..75a9a282d 100644
--- a/ui/src/pages/SLAcontainer.svelte
+++ b/ui/src/pages/SLAcontainer.svelte
@@ -6,6 +6,7 @@
 	export let alertSevID;
 	export let alertCustomerID;
 	export let SLA;
+	export let alertID;
 
 	console.log("SLA FROM SLACOntainer", SLA);
 
@@ -13,6 +14,6 @@
 
 <div class="grid-gap">
 		<div style:display={isVisible ? 'block' : 'none'}>
-			<SLAbar {IRIStime} {alertStatusID} {alertSevID} {SLA} {alertCustomerID}/>
+			<SLAbar {IRIStime} {alertStatusID} {alertSevID} {SLA} {alertCustomerID} {alertID}/>
 		</div>
 </div>
\ No newline at end of file
diff --git a/ui/src/pages/alerts.js b/ui/src/pages/alerts.js
index b4d72ab14..0642d68e9 100644
--- a/ui/src/pages/alerts.js
+++ b/ui/src/pages/alerts.js
@@ -1348,7 +1348,8 @@ async function refreshAlert(alertId, alertData, expanded=false) {
             alertStatusID: alertData.alert_status_id,
             alertSevID: alertData.severity.severity_id,
             alertCustomerID: alertData.alert_customer_id,
-            SLA: SLAdata
+            SLA: SLAdata,
+            alertID: alertData.alert_id
         }
     }));
 

From dedf5eb20c2aa550dadb8d177035c18a02028ace Mon Sep 17 00:00:00 2001
From: Rumburaq2 <oliver.hurt@student.gyarab.cz>
Date: Wed, 5 Mar 2025 17:24:25 +0100
Subject: [PATCH 14/31] [ADD] fetching the DB from Svelte

---
 ui/src/pages/SLAbar.svelte | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/ui/src/pages/SLAbar.svelte b/ui/src/pages/SLAbar.svelte
index 78d82fef6..d0d348a33 100644
--- a/ui/src/pages/SLAbar.svelte
+++ b/ui/src/pages/SLAbar.svelte
@@ -1,6 +1,15 @@
 <script lang="ts">
     import ProgressBar from "./ProgressBar.svelte";
     import { createPersistentStore } from './persistentStore.js';
+    import { onMount } from 'svelte';
+
+    let dbData;
+
+    onMount(async () => {
+        console.log("I JUST MOUNTED AGAIN MOTHERFUCKER");
+        dbData = await fetchDbData();
+        console.log("DB_Data: ", dbData);
+    });
 
 	//setting up startDateTime value
 	let startDateTime = "01/02/2025 14:30";//defalut value
@@ -52,6 +61,35 @@
 
     console.log(`MUJ START DATE TIME JE ${startDateTime}\nMUJ SLA IG TYVOLE ${SLA} MUJ ALERT ID ${alertID}`);
     //console.log(alertID);
+
+
+    //this sould ectually fetch for column "SLAcompleted"
+    //it will either have -1 or other int value for SLA completed seconds number
+    async function fetchDbData() {
+        try {
+            const response = await fetch('alerts/api/get_clients_sla_api');
+            const data = await response.json();
+
+            // Declare the variable properly
+            const customersSla = data.data.customers_sla;
+            console.log('Customers SLA:', customersSla);
+
+            // Convert the entire array to a single JSON string
+            const jsonString = JSON.stringify(customersSla);
+            console.log("JSON string:", jsonString);
+
+            return jsonString;
+        }
+        catch (error) {
+            console.error('Error fetching data:', error);
+            throw error; // Optionally re-throw the error after logging it
+        }
+    }
+
+    //const dbData = await fetchDbData();
+
+
+
     const parts = SLA.split(':');
 
     //const workingDays2 = SLA;

From a4e18d67d96ffb7df44cc862d4c77c1e6058a1cc Mon Sep 17 00:00:00 2001
From: Rumburaq2 <oliver.hurt@student.gyarab.cz>
Date: Wed, 5 Mar 2025 18:48:50 +0100
Subject: [PATCH 15/31] [ADD] added column alert_elapsed_sla to table Alert

---
 source/app/models/alerts.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/source/app/models/alerts.py b/source/app/models/alerts.py
index 884e56467..859252b0f 100644
--- a/source/app/models/alerts.py
+++ b/source/app/models/alerts.py
@@ -67,6 +67,7 @@ class Alert(db.Model):
     alert_customer_id = Column(ForeignKey('client.client_id'), nullable=False)
     alert_classification_id = Column(ForeignKey('case_classification.id'))
     alert_resolution_status_id = Column(ForeignKey('alert_resolution_status.resolution_status_id'), nullable=True)
+    alert_elapsed_sla = Column(Integer, default=-1)
 
     owner = relationship('User', foreign_keys=[alert_owner_id])
     severity = relationship('Severity')

From 727a5163266dff5f2e6d7b4a0477e9e8ca166ec5 Mon Sep 17 00:00:00 2001
From: Rumburaq2 <oliver.hurt@student.gyarab.cz>
Date: Wed, 5 Mar 2025 20:17:24 +0100
Subject: [PATCH 16/31] [ADD] fetching data from column alert_elapsed_sla from
 Svelte

---
 .../app/blueprints/pages/alerts/alerts_routes.py   | 14 ++++++++++++++
 source/app/datamgmt/alerts/alerts_db.py            |  5 +++++
 ui/src/pages/SLAbar.svelte                         |  7 ++++---
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/source/app/blueprints/pages/alerts/alerts_routes.py b/source/app/blueprints/pages/alerts/alerts_routes.py
index 51d387a87..9aa9978de 100644
--- a/source/app/blueprints/pages/alerts/alerts_routes.py
+++ b/source/app/blueprints/pages/alerts/alerts_routes.py
@@ -39,6 +39,8 @@
 
 from app.blueprints.access_controls import ac_api_requires
 
+from app.datamgmt.alerts.alerts_db import get_elapsed_sla
+
 alerts_blueprint = Blueprint(
     'alerts',
     __name__,
@@ -77,6 +79,18 @@ def get_clients_sla_api():
 
     return response_success(data=output)
 
+#later move this to source/app/blueprints/rest/alerts_routes.py
+@alerts_blueprint.route('/alerts/api/get_elapsed_sla_api/<int:alert_id>', methods=['GET'])
+@ac_api_requires()
+def get_elapsed_sla_api(alert_id: int):
+    elapsed_sla = get_elapsed_sla(alert_id)
+    #output = {
+     #   "elapsed_sla": elapsed_sla
+    #}
+
+    return response_success(data=elapsed_sla)
+
+
 
 @alerts_blueprint.route('/alerts/<int:cur_id>/comments/modal', methods=['GET'])
 @ac_requires(Permissions.alerts_read, no_cid_required=True)
diff --git a/source/app/datamgmt/alerts/alerts_db.py b/source/app/datamgmt/alerts/alerts_db.py
index d78792409..9d301ce84 100644
--- a/source/app/datamgmt/alerts/alerts_db.py
+++ b/source/app/datamgmt/alerts/alerts_db.py
@@ -1566,3 +1566,8 @@ def get_alert_status_by_name(name: str) -> AlertStatus:
     """
     return AlertStatus.query.filter(AlertStatus.status_name == name).first()
 
+
+def get_elapsed_sla(alert_id: int) -> Alert:
+    elapsed_sla = Alert.query.filter(Alert.alert_id == alert_id).first()
+    return elapsed_sla
+
diff --git a/ui/src/pages/SLAbar.svelte b/ui/src/pages/SLAbar.svelte
index d0d348a33..440d83b52 100644
--- a/ui/src/pages/SLAbar.svelte
+++ b/ui/src/pages/SLAbar.svelte
@@ -67,18 +67,19 @@
     //it will either have -1 or other int value for SLA completed seconds number
     async function fetchDbData() {
         try {
-            const response = await fetch('alerts/api/get_clients_sla_api');
+            const response = await fetch(`alerts/api/get_elapsed_sla_api/${alertID}`);
             const data = await response.json();
 
             // Declare the variable properly
-            const customersSla = data.data.customers_sla;
+            const customersSla = data.data.alert_elapsed_sla;
             console.log('Customers SLA:', customersSla);
 
             // Convert the entire array to a single JSON string
             const jsonString = JSON.stringify(customersSla);
             console.log("JSON string:", jsonString);
+            console.log("IDK DATA", data);
 
-            return jsonString;
+            return customersSla;
         }
         catch (error) {
             console.error('Error fetching data:', error);

From 262c24c88fefce09a7fb44f3d2728519e46d2a27 Mon Sep 17 00:00:00 2001
From: Rumburaq2 <oliver.hurt@student.gyarab.cz>
Date: Wed, 5 Mar 2025 20:22:16 +0100
Subject: [PATCH 17/31] [DEL] removing old debug code and comments

---
 ui/src/pages/ProgressBar.svelte | 11 ++-----
 ui/src/pages/SLAbar.svelte      | 55 ++-------------------------------
 2 files changed, 4 insertions(+), 62 deletions(-)

diff --git a/ui/src/pages/ProgressBar.svelte b/ui/src/pages/ProgressBar.svelte
index ae559f584..3e0dc5eaf 100644
--- a/ui/src/pages/ProgressBar.svelte
+++ b/ui/src/pages/ProgressBar.svelte
@@ -1,17 +1,10 @@
 <script lang="ts">
 	import {onDestroy, tick} from 'svelte';
 
+  	export let myStore;
+  	export let alertStatusID;
 
 
-  export let myStore;
-  export let alertStatusID;
-  //export let SLA;
-  //export let alertCustomerID;
-
-
-
-  //$: ({ elapsed_saved, state } = $myStore);
-
   const MyState ={
 		NEW: 0,
 	  	RUNNING: 1,
diff --git a/ui/src/pages/SLAbar.svelte b/ui/src/pages/SLAbar.svelte
index 440d83b52..5b4f25722 100644
--- a/ui/src/pages/SLAbar.svelte
+++ b/ui/src/pages/SLAbar.svelte
@@ -71,15 +71,9 @@
             const data = await response.json();
 
             // Declare the variable properly
-            const customersSla = data.data.alert_elapsed_sla;
-            console.log('Customers SLA:', customersSla);
+            const elapsedSla = data.data.alert_elapsed_sla;
 
-            // Convert the entire array to a single JSON string
-            const jsonString = JSON.stringify(customersSla);
-            console.log("JSON string:", jsonString);
-            console.log("IDK DATA", data);
-
-            return customersSla;
+            return elapsedSla;
         }
         catch (error) {
             console.error('Error fetching data:', error);
@@ -87,9 +81,6 @@
         }
     }
 
-    //const dbData = await fetchDbData();
-
-
 
     const parts = SLA.split(':');
 
@@ -119,12 +110,6 @@
 	}
 
 
-
-
-
-
-    const start = parseInt(parts[1], 10);
-    const end = parseInt(parts[2], 10);
     console.log("startTime", startHour);       // 8
     console.log("endTime", endHour);
 
@@ -151,42 +136,6 @@
 	//const workingDays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday'];
     const workingDays = workingDays2;
 
-     console.log("WORKING DAYS", workingDays2);
-     console.log("MY CLIENT ID", alertCustomerID);
-     console.log("MUY ALERT SEV", alertSevID);
-
-
-
-
-     /*
-    const clients = JSON.parse(SLA);
-    const resultIG = clients.find(client => client.client_id === alertCustomerID)?.sla;
-
-    // Split the SLA into components
-	let workingDays = [];
-	let startHour, endHour;
-
-	if (resultIG.includes(':')) {
-  		const [days, startTime, endTime] = resultIG.split(':');
-
-  		// Process working days
-  		workingDays = days.split(', ').map(day => day.trim());
-
-  		// Convert times to numbers
-  		startHour = parseInt(startTime, 10);
-  		endHour = parseInt(endTime, 10);
-	} else {
-  		// Handle case with no times (just days)
-  		workingDays = resultIG.split(', ').map(day => day.trim());
-	}
-¨
-      */
-
-
-
-
-
-
 
 	let result;
 	result = getClosestWorkingTime(startDateTime);

From d4f66ededea142742419339663059ac30dd6746c Mon Sep 17 00:00:00 2001
From: Rumburaq2 <oliver.hurt@student.gyarab.cz>
Date: Fri, 7 Mar 2025 16:19:18 +0100
Subject: [PATCH 18/31] [IMP] moved fetching of elapsed_sla to
 ProgressBar.svelte

---
 ui/src/pages/ProgressBar.svelte | 31 ++++++++++++++++++++++++++++++-
 ui/src/pages/SLAbar.svelte      | 27 ++-------------------------
 2 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/ui/src/pages/ProgressBar.svelte b/ui/src/pages/ProgressBar.svelte
index 3e0dc5eaf..03f5d1491 100644
--- a/ui/src/pages/ProgressBar.svelte
+++ b/ui/src/pages/ProgressBar.svelte
@@ -1,8 +1,17 @@
 <script lang="ts">
-	import {onDestroy, tick} from 'svelte';
+	import {onDestroy, onMount, tick} from 'svelte';
 
   	export let myStore;
   	export let alertStatusID;
+	export let alertID;
+
+	let dbData;
+
+    onMount(async () => {
+        console.log("I JUST MOUNTED AGAIN MOTHERFUCKER");
+        dbData = await fetchDbData();
+        console.log("DB_Data: ", dbData);
+    });
 
 
   const MyState ={
@@ -100,6 +109,26 @@
   }
 
 
+  //this sould ectually fetch for column "SLAcompleted"
+  // it will either have -1 or other int value for SLA completed seconds number
+  async function fetchDbData() {
+        try {
+            const response = await fetch(`alerts/api/get_elapsed_sla_api/${alertID}`);
+            const data = await response.json();
+
+            // Declare the variable properly
+            const elapsedSla = data.data.alert_elapsed_sla;
+
+            return elapsedSla;
+        }
+        catch (error) {
+            console.error('Error fetching data:', error);
+            throw error; // Optionally re-throw the error after logging it
+        }
+    }
+
+
+
 
 
   function complete() {
diff --git a/ui/src/pages/SLAbar.svelte b/ui/src/pages/SLAbar.svelte
index 5b4f25722..1ea7ad177 100644
--- a/ui/src/pages/SLAbar.svelte
+++ b/ui/src/pages/SLAbar.svelte
@@ -3,13 +3,7 @@
     import { createPersistentStore } from './persistentStore.js';
     import { onMount } from 'svelte';
 
-    let dbData;
 
-    onMount(async () => {
-        console.log("I JUST MOUNTED AGAIN MOTHERFUCKER");
-        dbData = await fetchDbData();
-        console.log("DB_Data: ", dbData);
-    });
 
 	//setting up startDateTime value
 	let startDateTime = "01/02/2025 14:30";//defalut value
@@ -63,23 +57,6 @@
     //console.log(alertID);
 
 
-    //this sould ectually fetch for column "SLAcompleted"
-    //it will either have -1 or other int value for SLA completed seconds number
-    async function fetchDbData() {
-        try {
-            const response = await fetch(`alerts/api/get_elapsed_sla_api/${alertID}`);
-            const data = await response.json();
-
-            // Declare the variable properly
-            const elapsedSla = data.data.alert_elapsed_sla;
-
-            return elapsedSla;
-        }
-        catch (error) {
-            console.error('Error fetching data:', error);
-            throw error; // Optionally re-throw the error after logging it
-        }
-    }
 
 
     const parts = SLA.split(':');
@@ -276,10 +253,10 @@
   <p>Input Date and Time: {startDateTime}</p>
   {#if result === true} <!-- if within working hours -->
     <p>The provided time is within working hours.</p>
-	  <ProgressBar startDateTime={startDateTime} {endDateTime} {myStore} {alertStatusID}/>
+	  <ProgressBar startDateTime={startDateTime} {endDateTime} {myStore} {alertStatusID} {alertID}/>
   {:else} <!-- if not within working hours - recompute endDateTime-->
     <p>The closest working time is: {result}</p>
-	  <ProgressBar startDateTime={result} endDateTime={computedValue} {myStore} {alertStatusID}/>
+	  <ProgressBar startDateTime={result} endDateTime={computedValue} {myStore} {alertStatusID} {alertID}/>
   {/if}
 
 </div>
\ No newline at end of file

From b4e984f6400884392904de2e841e64b9f6996630 Mon Sep 17 00:00:00 2001
From: Rumburaq2 <oliver.hurt@student.gyarab.cz>
Date: Fri, 7 Mar 2025 17:20:06 +0100
Subject: [PATCH 19/31] [IMP] calling start() from onMount funciton not
 retarded Svelte reactive statement

---
 ui/src/pages/ProgressBar.svelte | 47 +++++++++------------------------
 1 file changed, 13 insertions(+), 34 deletions(-)

diff --git a/ui/src/pages/ProgressBar.svelte b/ui/src/pages/ProgressBar.svelte
index 03f5d1491..88a36c392 100644
--- a/ui/src/pages/ProgressBar.svelte
+++ b/ui/src/pages/ProgressBar.svelte
@@ -7,11 +7,16 @@
 
 	let dbData;
 
-    onMount(async () => {
-        console.log("I JUST MOUNTED AGAIN MOTHERFUCKER");
+	onMount(async () => {
+	console.log("I JUST MOUNTED AGAIN MOTHERFUCKER");
         dbData = await fetchDbData();
         console.log("DB_Data: ", dbData);
-    });
+      start();
+
+	   cleanupEffect = () => clearInterval(interval);
+	  });
+
+
 
 
   const MyState ={
@@ -25,6 +30,8 @@
 	//based on the alertID
 	// if NULL set state to running //FR??
   let currstate = $myStore.state;
+  //let currstate2 = await fetchDbData();
+
   //let { startDateTime = "01/02/2025 14:30", endDateTime = "01/02/2025 14:31" } = $props();
   export let startDateTime = "01/02/2025 14:30";
   export let endDateTime = "01/02/2025 14:30";
@@ -42,6 +49,7 @@
 
 	function start() {
 	  interval = setInterval(() => {
+		  console.log("db_data from loop ", dbData);
 		  if(currstate === MyState.RUNNING) {
 			  //calculate curr time
 			  currTimeEpoch = Math.floor((Date.now()) / (1000 * 60)) * 60;
@@ -56,15 +64,6 @@
 				  elapsed = $myStore.elapsed_saved; //TODO query the db for the current state of "SLAcompletedTime" column
 			  }
 
-			  /*
-			  console.log("-----------");
-			  console.log("startTimeEpoch: "+startTimeEpoch);
-			  console.log("duration: "+duration);
-			  console.log("elapsed: "+elapsed);
-			  console.log("currentTimeEpoch: "+currTimeEpoch);
-			  console.log("-----------");
-
-			   */
 			  if (elapsed > duration) {
 				  elapsed = duration
 				  clearInterval(interval)
@@ -79,7 +78,7 @@
 			  }
 		  }
 	  }, 1000)
-  }
+    }
 
   function getSecondsSinceEpoch(dateString) {
 	  // Split the input string into date and time parts
@@ -162,28 +161,8 @@
 	  console.log("Runing!");
   }
 
-  /*
-  $effect(() => {
-	  if (!duration) return
-	  start()
-	  return () => clearInterval(interval)
-  })
-   */
   let cleanupEffect;
-  $: {
-    // Call the previous cleanup (if any) before re-running the effect
-    if (cleanupEffect) cleanupEffect();
-    if (!duration) {
-      // No effect is set up if duration is falsy
-      cleanupEffect = null;
-    }
-    else {
-      // Execute your effect
-      start();
-      // Set up the cleanup function
-      cleanupEffect = () => clearInterval(interval);
-    }
-  }
+
   onDestroy(() => {
     if (cleanupEffect) cleanupEffect();
   });

From 9a41e3464adc875d8dda7c552e88948c35f2e239 Mon Sep 17 00:00:00 2001
From: Rumburaq2 <oliver.hurt@student.gyarab.cz>
Date: Fri, 7 Mar 2025 17:45:16 +0100
Subject: [PATCH 20/31] [ADD] getting elapsed sla from looping interval
 function

---
 ui/src/pages/ProgressBar.svelte | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/ui/src/pages/ProgressBar.svelte b/ui/src/pages/ProgressBar.svelte
index 88a36c392..9d63bd83c 100644
--- a/ui/src/pages/ProgressBar.svelte
+++ b/ui/src/pages/ProgressBar.svelte
@@ -6,11 +6,18 @@
 	export let alertID;
 
 	let dbData;
+	let currstate2;
+	let elapsed2;
 
 	onMount(async () => {
 	console.log("I JUST MOUNTED AGAIN MOTHERFUCKER");
         dbData = await fetchDbData();
         console.log("DB_Data: ", dbData);
+
+		currstate2 = dbData;
+
+		elapsed2 = dbData;
+
       start();
 
 	   cleanupEffect = () => clearInterval(interval);
@@ -30,7 +37,7 @@
 	//based on the alertID
 	// if NULL set state to running //FR??
   let currstate = $myStore.state;
-  //let currstate2 = await fetchDbData();
+
 
   //let { startDateTime = "01/02/2025 14:30", endDateTime = "01/02/2025 14:31" } = $props();
   export let startDateTime = "01/02/2025 14:30";
@@ -50,18 +57,20 @@
 	function start() {
 	  interval = setInterval(() => {
 		  console.log("db_data from loop ", dbData);
+		  console.log("currst2 ", currstate2);
+		  console.log("elapsed2 ", elapsed2);
 		  if(currstate === MyState.RUNNING) {
 			  //calculate curr time
 			  currTimeEpoch = Math.floor((Date.now()) / (1000 * 60)) * 60;
 			  //startTimeEpoch = getSecondsSinceEpoch(startDateTime);
 				//console.log(currTimeEpoch);
 				//console.log(Math.floor((Date.now()) / (1000 * 60)) * 60);
-			  if($myStore.elapsed_saved < 0){ //TODO query the db for the current state of "SLAcompletedTime" column
+			  if(elapsed2 < 0){ //TODO query the db for the current state of "SLAcompletedTime" column
 				  elapsed = currTimeEpoch - startTimeEpoch + oldElapsedTime;
 				  console.log("elapsed: "+elapsed);
 			  }
 			  else { //ig call the fetch funcitons from here???
-				  elapsed = $myStore.elapsed_saved; //TODO query the db for the current state of "SLAcompletedTime" column
+				  elapsed = elapsed2; //TODO query the db for the current state of "SLAcompletedTime" column
 			  }
 
 			  if (elapsed > duration) {
@@ -146,6 +155,7 @@
 
 
 
+
 	  //turn the shit green
   }
 

From 47abef87d2c4b5ccf5ee543d70f2f39ee5581b5e Mon Sep 17 00:00:00 2001
From: Rumburaq2 <oliver.hurt@student.gyarab.cz>
Date: Sat, 8 Mar 2025 16:27:39 +0100
Subject: [PATCH 21/31] [ADD] clicking the complete button will save the SLA in
 the db

---
 .../blueprints/pages/alerts/alerts_routes.py   |  9 +++++++++
 source/app/datamgmt/alerts/alerts_db.py        | 12 ++++++++++++
 ui/src/pages/ProgressBar.svelte                | 18 +++++++++++++++++-
 3 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/source/app/blueprints/pages/alerts/alerts_routes.py b/source/app/blueprints/pages/alerts/alerts_routes.py
index 9aa9978de..e04ff70b1 100644
--- a/source/app/blueprints/pages/alerts/alerts_routes.py
+++ b/source/app/blueprints/pages/alerts/alerts_routes.py
@@ -41,6 +41,8 @@
 
 from app.datamgmt.alerts.alerts_db import get_elapsed_sla
 
+from app.datamgmt.alerts.alerts_db import set_elapsed_sla
+
 alerts_blueprint = Blueprint(
     'alerts',
     __name__,
@@ -91,6 +93,13 @@ def get_elapsed_sla_api(alert_id: int):
     return response_success(data=elapsed_sla)
 
 
+@alerts_blueprint.route('/alerts/api/set_elapsed_sla_api/<int:alert_id>/<int:new_elapsed_sla>', methods=['GET'])
+@ac_api_requires(Permissions.alerts_write)
+def set_elapsed_sla_api(alert_id: int, new_elapsed_sla: int):
+    updated_alert = set_elapsed_sla(alert_id, new_elapsed_sla)
+    return response_success(data=updated_alert)
+
+
 
 @alerts_blueprint.route('/alerts/<int:cur_id>/comments/modal', methods=['GET'])
 @ac_requires(Permissions.alerts_read, no_cid_required=True)
diff --git a/source/app/datamgmt/alerts/alerts_db.py b/source/app/datamgmt/alerts/alerts_db.py
index 9d301ce84..0d4e27a4f 100644
--- a/source/app/datamgmt/alerts/alerts_db.py
+++ b/source/app/datamgmt/alerts/alerts_db.py
@@ -1571,3 +1571,15 @@ def get_elapsed_sla(alert_id: int) -> Alert:
     elapsed_sla = Alert.query.filter(Alert.alert_id == alert_id).first()
     return elapsed_sla
 
+def set_elapsed_sla(alert_id: int, new_elapsed_sla: int):
+    alert = Alert.query.filter(Alert.alert_id == alert_id).first()
+    if alert:
+        # Update the column with the new value
+        alert.alert_elapsed_sla = new_elapsed_sla
+        # Commit the changes to the database
+        db.session.commit()
+        return alert
+    else:
+        # Optionally handle the case where no alert is found
+        return None
+
diff --git a/ui/src/pages/ProgressBar.svelte b/ui/src/pages/ProgressBar.svelte
index 9d63bd83c..5ba38c05e 100644
--- a/ui/src/pages/ProgressBar.svelte
+++ b/ui/src/pages/ProgressBar.svelte
@@ -135,6 +135,19 @@
         }
     }
 
+	async function putDbData() {
+        try {
+            const response = await fetch(`alerts/api/set_elapsed_sla_api/${alertID}/${elapsed}`);
+
+            const result = await response.json();
+        	console.log('Update result:', result);
+        }
+        catch (error) {
+            console.error('Error fetching data:', error);
+            throw error; // Optionally re-throw the error after logging it
+        }
+    }
+
 
 
 
@@ -149,8 +162,11 @@
 	  }
 	  //changeValue(elapsed);
 	  console.log("elapsedFromComplete "+elapsed);
-	  setValue('elapsed_saved', elapsed);// TODO write into db for current state elapsed to the "SLAcompletedTime" column
+	  setValue('elapsed_saved', elapsed);
 	  setValue('state', 2);
+	  // TODO write into db for current state elapsed to the "SLAcompletedTime" column
+	  putDbData();
+
 
 
 

From 8eb4909eb485e5ae76102c09a701fa5edf89c112 Mon Sep 17 00:00:00 2001
From: Rumburaq2 <oliver.hurt@student.gyarab.cz>
Date: Sat, 8 Mar 2025 17:16:50 +0100
Subject: [PATCH 22/31] [DEL] decomission of Local storage code

---
 ui/src/pages/ProgressBar.svelte | 37 ++++++++++-----------------------
 ui/src/pages/SLAbar.svelte      |  9 +++-----
 2 files changed, 14 insertions(+), 32 deletions(-)

diff --git a/ui/src/pages/ProgressBar.svelte b/ui/src/pages/ProgressBar.svelte
index 5ba38c05e..2d56d2004 100644
--- a/ui/src/pages/ProgressBar.svelte
+++ b/ui/src/pages/ProgressBar.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import {onDestroy, onMount, tick} from 'svelte';
 
-  	export let myStore;
+  	//export let myStore;
   	export let alertStatusID;
 	export let alertID;
 
@@ -17,6 +17,12 @@
 		currstate2 = dbData;
 
 		elapsed2 = dbData;
+		//if(dbData < 0){
+			currstate = MyState.RUNNING;
+		//}
+		if(dbData > 0){
+			//currstate = MyState.PAUSED;
+		}
 
       start();
 
@@ -36,7 +42,7 @@
 	//query the db for the current state of "SLAcompletedTime" column
 	//based on the alertID
 	// if NULL set state to running //FR??
-  let currstate = $myStore.state;
+  let currstate;
 
 
   //let { startDateTime = "01/02/2025 14:30", endDateTime = "01/02/2025 14:31" } = $props();
@@ -44,7 +50,7 @@
   export let endDateTime = "01/02/2025 14:30";
   let timecomputed = calculateDuration(); //calculate duration betwwen two timestamps in seconds
   //let elapsed = $state(0);
-  $: elapsed = $myStore.elapsed_saved; //TODO query the db for the current state of "SLAcompletedTime" column
+  $: elapsed = 0; //TODO query the db for the current state of "SLAcompletedTime" column
   //let duration = $state(timecomputed);
   $: duration = timecomputed;
   let interval: number
@@ -103,19 +109,6 @@
 	  return secondsSinceEpoch;
   }
 
-  function changeValue(newValue) {
-	  $myStore = newValue;
-  }
-
-
-  // Alternatively, if you want to set a property to a new absolute value:
-  function setValue(property, newValue) {
-    myStore.update(current => ({
-      ...current,
-      [property]: newValue
-    }));
-  }
-
 
   //this sould ectually fetch for column "SLAcompleted"
   // it will either have -1 or other int value for SLA completed seconds number
@@ -150,8 +143,6 @@
 
 
 
-
-
   function complete() {
 	  //elapsed = 0
 
@@ -162,16 +153,12 @@
 	  }
 	  //changeValue(elapsed);
 	  console.log("elapsedFromComplete "+elapsed);
-	  setValue('elapsed_saved', elapsed);
-	  setValue('state', 2);
+	  //setValue('elapsed_saved', elapsed);
+	  //setValue('state', 2);
 	  // TODO write into db for current state elapsed to the "SLAcompletedTime" column
 	  putDbData();
 
 
-
-
-
-
 	  //turn the shit green
   }
 
@@ -256,8 +243,6 @@
 	<button on:click={complete}>Complete</button>
 </div>
 
-<p>Local store elapsed_saved: {$myStore.elapsed_saved}</p>
-<p>Local store state: {$myStore.state}</p>
 
 <style>
 	.progress-container {
diff --git a/ui/src/pages/SLAbar.svelte b/ui/src/pages/SLAbar.svelte
index 1ea7ad177..7d58866ee 100644
--- a/ui/src/pages/SLAbar.svelte
+++ b/ui/src/pages/SLAbar.svelte
@@ -48,10 +48,7 @@
     // with initial value -1 (or null?)
     // here query if the alert with alert id alertID is NULL
     // if yes set state to  1 //FR??
-    const myStore = createPersistentStore(startDateTime, {
-        elapsed_saved: -1,
-        state: 1 //state RUNNING
-    });
+
 
     console.log(`MUJ START DATE TIME JE ${startDateTime}\nMUJ SLA IG TYVOLE ${SLA} MUJ ALERT ID ${alertID}`);
     //console.log(alertID);
@@ -253,10 +250,10 @@
   <p>Input Date and Time: {startDateTime}</p>
   {#if result === true} <!-- if within working hours -->
     <p>The provided time is within working hours.</p>
-	  <ProgressBar startDateTime={startDateTime} {endDateTime} {myStore} {alertStatusID} {alertID}/>
+	  <ProgressBar startDateTime={startDateTime} {endDateTime} {alertStatusID} {alertID}/>
   {:else} <!-- if not within working hours - recompute endDateTime-->
     <p>The closest working time is: {result}</p>
-	  <ProgressBar startDateTime={result} endDateTime={computedValue} {myStore} {alertStatusID} {alertID}/>
+	  <ProgressBar startDateTime={result} endDateTime={computedValue} {alertStatusID} {alertID}/>
   {/if}
 
 </div>
\ No newline at end of file

From f3b2548ab7d62ecfc3c375979db296003b62c807 Mon Sep 17 00:00:00 2001
From: Rumburaq2 <oliver.hurt@student.gyarab.cz>
Date: Sat, 8 Mar 2025 17:31:26 +0100
Subject: [PATCH 23/31] [ADD] giving alertID info to dispatch event in
 updateAlerts not just refreshAler func

---
 ui/src/pages/alerts.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/ui/src/pages/alerts.js b/ui/src/pages/alerts.js
index 0642d68e9..e1add77d2 100644
--- a/ui/src/pages/alerts.js
+++ b/ui/src/pages/alerts.js
@@ -1497,7 +1497,8 @@ async function updateAlerts(page, per_page, filters = {}, paging=false){
                     alertStatusID: alert.alert_status_id,
                     alertSevID: alert.severity.severity_id,
                     alertCustomerID: alert.alert_customer_id,
-                    SLA: SLAdata
+                    SLA: SLAdata,
+                    alertID: alert.alert_id
                 }
             }));
 

From 229580b8838a6ef8ba57ba3cf5a10c97d4e868d5 Mon Sep 17 00:00:00 2001
From: Rumburaq2 <oliver.hurt@student.gyarab.cz>
Date: Sat, 8 Mar 2025 17:53:27 +0100
Subject: [PATCH 24/31] [DEL] removing old unused code and comments

---
 ui/src/pages/ProgressBar.svelte  | 24 ++++-------
 ui/src/pages/SLA.js              |  2 -
 ui/src/pages/SLAbar.svelte       | 64 +++++++---------------------
 ui/src/pages/SLAcontainer.svelte |  1 -
 ui/src/pages/alerts.js           | 72 +-------------------------------
 5 files changed, 22 insertions(+), 141 deletions(-)

diff --git a/ui/src/pages/ProgressBar.svelte b/ui/src/pages/ProgressBar.svelte
index 2d56d2004..5dfd3dcbc 100644
--- a/ui/src/pages/ProgressBar.svelte
+++ b/ui/src/pages/ProgressBar.svelte
@@ -6,15 +6,13 @@
 	export let alertID;
 
 	let dbData;
-	let currstate2;
 	let elapsed2;
 
 	onMount(async () => {
-	console.log("I JUST MOUNTED AGAIN MOTHERFUCKER");
+		console.log("I JUST MOUNTED AGAIN MOTHERFUCKER");
         dbData = await fetchDbData();
         console.log("DB_Data: ", dbData);
 
-		currstate2 = dbData;
 
 		elapsed2 = dbData;
 		//if(dbData < 0){
@@ -24,25 +22,19 @@
 			//currstate = MyState.PAUSED;
 		}
 
-      start();
+      	start();
 
 	   cleanupEffect = () => clearInterval(interval);
-	  });
+	});
 
-
-
-
-  const MyState ={
+  	const MyState ={
 		NEW: 0,
 	  	RUNNING: 1,
 	    PAUSED: 2,
-  };
+  	};
+
 
-	//TODO
-	//query the db for the current state of "SLAcompletedTime" column
-	//based on the alertID
-	// if NULL set state to running //FR??
-  let currstate;
+  	let currstate;
 
 
   //let { startDateTime = "01/02/2025 14:30", endDateTime = "01/02/2025 14:31" } = $props();
@@ -62,8 +54,6 @@
 
 	function start() {
 	  interval = setInterval(() => {
-		  console.log("db_data from loop ", dbData);
-		  console.log("currst2 ", currstate2);
 		  console.log("elapsed2 ", elapsed2);
 		  if(currstate === MyState.RUNNING) {
 			  //calculate curr time
diff --git a/ui/src/pages/SLA.js b/ui/src/pages/SLA.js
index d40cbc791..e60248a2d 100644
--- a/ui/src/pages/SLA.js
+++ b/ui/src/pages/SLA.js
@@ -4,8 +4,6 @@ export let app; // Declare at the top level
 
 document.addEventListener('alertRendered', (event) => {
   console.log('alertRendered event received');
-  console.log("SLA ELEMENT FROM SLA.JS !!! ", event.detail.alertCustomerID);
-  //console.log(event.detail.alertCustomerID);
   const containers = document.querySelectorAll('.SLAcontainer');
   console.log(containers);
   if (containers) {
diff --git a/ui/src/pages/SLAbar.svelte b/ui/src/pages/SLAbar.svelte
index 7d58866ee..a9e012f9d 100644
--- a/ui/src/pages/SLAbar.svelte
+++ b/ui/src/pages/SLAbar.svelte
@@ -1,27 +1,11 @@
 <script lang="ts">
     import ProgressBar from "./ProgressBar.svelte";
-    import { createPersistentStore } from './persistentStore.js';
-    import { onMount } from 'svelte';
-
 
 
 	//setting up startDateTime value
 	let startDateTime = "01/02/2025 14:30";//defalut value
-    //calculate timestamp DD/MM/YYYY HH:MM of current time
-    /*
-    const now = new Date();
-    const day = String(now.getDate()).padStart(2, '0');
-    const month = String(now.getMonth() + 1).padStart(2, '0'); // Months are zero-based
-    const year = now.getFullYear();
-    const hours = String(now.getHours()).padStart(2, '0');
-    const minutes = String(now.getMinutes()).padStart(2, '0');
-	startDateTime = `${day}/${month}/${year} ${hours}:${minutes}`;
-     */
-
-	//startDateTime = "06/02/2025 20:58";
     export let IRIStime;
 
-
     const date = new Date(IRIStime);
 
     date.setHours(date.getHours() + 1);
@@ -36,30 +20,15 @@
     startDateTime = `${day}/${month}/${year} ${hours}:${minutes}`;
 
 
-   //const myStore = createPersistentStore(startDateTime, -1);
     export let alertStatusID;
     export let alertSevID;
     export let SLA;
     export let alertCustomerID;
     export let alertID;
 
-    //TODO
-    //create a new column in table "alerts" called "SLAcompletedTime"
-    // with initial value -1 (or null?)
-    // here query if the alert with alert id alertID is NULL
-    // if yes set state to  1 //FR??
-
 
     console.log(`MUJ START DATE TIME JE ${startDateTime}\nMUJ SLA IG TYVOLE ${SLA} MUJ ALERT ID ${alertID}`);
-    //console.log(alertID);
-
-
-
-
-    const parts = SLA.split(':');
 
-    //const workingDays2 = SLA;
-   // const workingDays2 = parts[0].split(',').map(day => day.trim());
 
     const clients = JSON.parse(SLA);
     const resultIG = clients.find(client => client.client_id === alertCustomerID)?.sla;
@@ -84,11 +53,6 @@
 	}
 
 
-    console.log("startTime", startHour);       // 8
-    console.log("endTime", endHour);
-
-
-
 	//setting up severity
 	const SEVERITY ={
 		LOW: 12,
@@ -168,25 +132,25 @@
 	//input num of seconds
     //returns formated timestamp
     function getFormattedDateFromTimestamp(timestamp) {
-    // Create a Date object from the timestamp (multiply by 1000 to convert seconds to milliseconds)
-    const date = new Date(timestamp * 1000);
-    // Extract day, month, year, hours, and minutes
-    const day = String(date.getDate()).padStart(2, '0'); // Ensure 2 digits
-    const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-based
-    const year = date.getFullYear();
-    const hours = String(date.getHours()).padStart(2, '0'); // Ensure 2 digits
-    const minutes = String(date.getMinutes()).padStart(2, '0'); // Ensure 2 digits
-    // Format the date and time as DD/MM/YYYY HH:MM
-    const formattedDate = `${day}/${month}/${year} ${hours}:${minutes}`;
-    return formattedDate;
-}
+        // Create a Date object from the timestamp (multiply by 1000 to convert seconds to milliseconds)
+        const date = new Date(timestamp * 1000);
+        // Extract day, month, year, hours, and minutes
+        const day = String(date.getDate()).padStart(2, '0'); // Ensure 2 digits
+        const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-based
+        const year = date.getFullYear();
+        const hours = String(date.getHours()).padStart(2, '0'); // Ensure 2 digits
+        const minutes = String(date.getMinutes()).padStart(2, '0'); // Ensure 2 digits
+        // Format the date and time as DD/MM/YYYY HH:MM
+        const formattedDate = `${day}/${month}/${year} ${hours}:${minutes}`;
+        return formattedDate;
+    }
     //converts the formated timestamp to Date object - easier to work with
 	function parseDateTime(dateTime) {
     	const [date, time] = dateTime.split(' ');
     	const [day, month, year] = date.split('/').map(Number);
     	const [hours, minutes] = time.split(':').map(Number);
-   	 return new Date(year, month - 1, day, hours, minutes);
-  }
+   	    return new Date(year, month - 1, day, hours, minutes);
+    }
     //inputs Date object and
     // returns formated timestamp string
     //if not Date object inputted return true - indicates we are in current working hours
diff --git a/ui/src/pages/SLAcontainer.svelte b/ui/src/pages/SLAcontainer.svelte
index 75a9a282d..e818437a7 100644
--- a/ui/src/pages/SLAcontainer.svelte
+++ b/ui/src/pages/SLAcontainer.svelte
@@ -8,7 +8,6 @@
 	export let SLA;
 	export let alertID;
 
-	console.log("SLA FROM SLACOntainer", SLA);
 
 </script>
 
diff --git a/ui/src/pages/alerts.js b/ui/src/pages/alerts.js
index e1add77d2..01d178ae0 100644
--- a/ui/src/pages/alerts.js
+++ b/ui/src/pages/alerts.js
@@ -1376,32 +1376,6 @@ async function fetchSLAdata() {
         throw error; // Optionally re-throw the error after logging it
     }
 
-
-
-
-
-
-
-    /*
-    fetch('alerts/api/get_clients_sla_api')
-        .then(response => response.json())
-        .then(data => {
-            // Assuming the API returns an object with a "data" field that contains "customers_sla"
-            customersSla = data.data.customers_sla;
-            console.log('Customers SLA:', customersSla);
-
-            // Option 1: Convert the entire array to a single JSON string
-            const jsonString = JSON.stringify(customersSla);
-            console.log("JSON string:", jsonString);
-
-        })
-        .catch(error => {
-            console.error('Error fetching data:', error);
-        });
-
-        return await jsonString;
-
-     */
     }
 
 
@@ -1500,51 +1474,7 @@ async function updateAlerts(page, per_page, filters = {}, paging=false){
                     SLA: SLAdata,
                     alertID: alert.alert_id
                 }
-            }));
-
-
-
-            // Dispatch a custom event when done:
-          //const SLAelement = $(`#SLAelement`).text();
-          /*
-
-          let customersSla;
-          let clientString = "";
-          fetch('alerts/api/get_clients_sla_api')
-            .then(response => response.json())
-            .then(data => {
-                customersSla = data.data.customers_sla;
-                console.log('Customers SLA:', customersSla);
-
-                const jsonString = JSON.stringify(customersSla);
-                console.log("JSON string:", jsonString);
-
-                // Option 2: Convert each object to a custom formatted string and print them individually
-
-                customersSla.forEach(client => {
-                    if( client.client_id === alert.alert_customer_id){
-                        clientString = `${client.sla}`;
-                    }
-                });
-                console.log(`cleintString ${clientString} clientID ${alert.alert_customer_id}`);
-
-                document.dispatchEvent(new CustomEvent('alertRendered', {
-                detail: {
-                    IRIStime: alert.alert_creation_time,
-                    alertStatusID: alert.alert_status_id,
-                    alertSevID: alert.severity.severity_id,
-                    alertCustomerID: alert.alert_customer_id,
-                    SLA: jsonString
-                }
-            }));
-
-            })
-            .catch(error => {
-                console.error('Error fetching data:', error);
-            });
-
-           */
-
+          }));
       });
   }
 

From 91b4097b9928de9583a5ee937b6780e6d4510ab3 Mon Sep 17 00:00:00 2001
From: Rumburaq2 <oliver.hurt@student.gyarab.cz>
Date: Sat, 8 Mar 2025 18:27:31 +0100
Subject: [PATCH 25/31] [IMP] clearInterval after SLA is completed so that loop
 is not called unnecessarily, refactoring variable name

---
 ui/src/pages/ProgressBar.svelte | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/ui/src/pages/ProgressBar.svelte b/ui/src/pages/ProgressBar.svelte
index 5dfd3dcbc..0f4bbd9ab 100644
--- a/ui/src/pages/ProgressBar.svelte
+++ b/ui/src/pages/ProgressBar.svelte
@@ -6,7 +6,7 @@
 	export let alertID;
 
 	let dbData;
-	let elapsed2;
+	let dbElapsedSla;
 
 	onMount(async () => {
 		console.log("I JUST MOUNTED AGAIN MOTHERFUCKER");
@@ -14,7 +14,7 @@
         console.log("DB_Data: ", dbData);
 
 
-		elapsed2 = dbData;
+		dbElapsedSla = dbData;
 		//if(dbData < 0){
 			currstate = MyState.RUNNING;
 		//}
@@ -54,19 +54,21 @@
 
 	function start() {
 	  interval = setInterval(() => {
-		  console.log("elapsed2 ", elapsed2);
+		  console.log("elapsed2 ", dbElapsedSla);
 		  if(currstate === MyState.RUNNING) {
 			  //calculate curr time
 			  currTimeEpoch = Math.floor((Date.now()) / (1000 * 60)) * 60;
 			  //startTimeEpoch = getSecondsSinceEpoch(startDateTime);
 				//console.log(currTimeEpoch);
 				//console.log(Math.floor((Date.now()) / (1000 * 60)) * 60);
-			  if(elapsed2 < 0){ //TODO query the db for the current state of "SLAcompletedTime" column
+			  if(dbElapsedSla < 0){ //
 				  elapsed = currTimeEpoch - startTimeEpoch + oldElapsedTime;
 				  console.log("elapsed: "+elapsed);
 			  }
-			  else { //ig call the fetch funcitons from here???
-				  elapsed = elapsed2; //TODO query the db for the current state of "SLAcompletedTime" column
+			  else { //SLA is not -1 therefore was completed sometime before
+				  elapsed = dbElapsedSla; //
+				  clearInterval(interval)
+				  currstate = MyState.PAUSED;
 			  }
 
 			  if (elapsed > duration) {

From a1a89317b1cd77e6cbf5e33f82bd63ac2b4c12f6 Mon Sep 17 00:00:00 2001
From: Rumburaq2 <oliver.hurt@student.gyarab.cz>
Date: Sat, 8 Mar 2025 18:44:25 +0100
Subject: [PATCH 26/31] [IMP] refactoring code - indetation, removing unused
 code

---
 ui/src/pages/ProgressBar.svelte | 212 ++++++++++++++------------------
 1 file changed, 95 insertions(+), 117 deletions(-)

diff --git a/ui/src/pages/ProgressBar.svelte b/ui/src/pages/ProgressBar.svelte
index 0f4bbd9ab..ec0b718fb 100644
--- a/ui/src/pages/ProgressBar.svelte
+++ b/ui/src/pages/ProgressBar.svelte
@@ -1,26 +1,18 @@
 <script lang="ts">
-	import {onDestroy, onMount, tick} from 'svelte';
+	import {onDestroy, onMount} from 'svelte';
 
-  	//export let myStore;
   	export let alertStatusID;
 	export let alertID;
 
-	let dbData;
 	let dbElapsedSla;
 
 	onMount(async () => {
 		console.log("I JUST MOUNTED AGAIN MOTHERFUCKER");
-        dbData = await fetchDbData();
-        console.log("DB_Data: ", dbData);
+        dbElapsedSla = await fetchAlertSla();
+        console.log("DB_Data: ", dbElapsedSla);
 
-
-		dbElapsedSla = dbData;
-		//if(dbData < 0){
-			currstate = MyState.RUNNING;
-		//}
-		if(dbData > 0){
-			//currstate = MyState.PAUSED;
-		}
+		//dbElapsedSla = dbData;
+		currstate = MyState.RUNNING;
 
       	start();
 
@@ -37,20 +29,19 @@
   	let currstate;
 
 
-  //let { startDateTime = "01/02/2025 14:30", endDateTime = "01/02/2025 14:31" } = $props();
-  export let startDateTime = "01/02/2025 14:30";
-  export let endDateTime = "01/02/2025 14:30";
-  let timecomputed = calculateDuration(); //calculate duration betwwen two timestamps in seconds
-  //let elapsed = $state(0);
-  $: elapsed = 0; //TODO query the db for the current state of "SLAcompletedTime" column
-  //let duration = $state(timecomputed);
-  $: duration = timecomputed;
-  let interval: number
-  let oldElapsedTime = 0;
-  let currTimeEpoch = 0;
-  let startTimeEpoch = getSecondsSinceEpoch(startDateTime);
-  $: SLAbreached = false;
-  //let severity;
+  	//let { startDateTime = "01/02/2025 14:30", endDateTime = "01/02/2025 14:31" } = $props();
+  	export let startDateTime = "01/02/2025 14:30";
+  	export let endDateTime = "01/02/2025 14:30";
+  	let timecomputed = calculateDuration(); //calculate duration betwwen two timestamps in seconds
+  	//let elapsed = $state(0);
+  	$: elapsed = 0;
+  	//let duration = $state(timecomputed);
+  	$: duration = timecomputed;
+  	let interval: number
+  	let oldElapsedTime = 0;
+  	let currTimeEpoch = 0;
+  	let startTimeEpoch = getSecondsSinceEpoch(startDateTime);
+  	$: SLAbreached = false;
 
 	function start() {
 	  interval = setInterval(() => {
@@ -76,35 +67,31 @@
 				  clearInterval(interval)
 				  SLAbreached = true;
 			  }
-			  if (elapsed < 0){
-				  //currstate = MyState.NEW;
-			  }
 			  if (alertStatusID === 4){
-		  		//await tick();
 		  		complete();
 			  }
 		  }
 	  }, 1000)
     }
 
-  function getSecondsSinceEpoch(dateString) {
-	  // Split the input string into date and time parts
-	  const [datePart, timePart] = dateString.split(' ');
-	  // Split the date part into day, month, and year
-	  const [day, month, year] = datePart.split('/');
-	  // Split the time part into hours and minutes
-	  const [hours, minutes] = timePart.split(':');
-	  // Create a Date object (note: months are 0-based in JavaScript)
-	  const date = new Date(year, month - 1, day, hours, minutes);
-	  // Get the number of seconds since the Unix epoch
-	  const secondsSinceEpoch = Math.floor(date.getTime() / 1000);
-	  return secondsSinceEpoch;
-  }
-
-
-  //this sould ectually fetch for column "SLAcompleted"
-  // it will either have -1 or other int value for SLA completed seconds number
-  async function fetchDbData() {
+	function getSecondsSinceEpoch(dateString) {
+		// Split the input string into date and time parts
+		const [datePart, timePart] = dateString.split(' ');
+		// Split the date part into day, month, and year
+		const [day, month, year] = datePart.split('/');
+		// Split the time part into hours and minutes
+		const [hours, minutes] = timePart.split(':');
+		// Create a Date object (note: months are 0-based in JavaScript)
+		const date = new Date(year, month - 1, day, hours, minutes);
+		// Get the number of seconds since the Unix epoch
+		const secondsSinceEpoch = Math.floor(date.getTime() / 1000);
+		return secondsSinceEpoch;
+	}
+
+
+  	//this sould ectually fetch for column "SLAcompleted"
+  	// it will either have -1 or other int value for SLA completed seconds number
+  	async function fetchAlertSla() {
         try {
             const response = await fetch(`alerts/api/get_elapsed_sla_api/${alertID}`);
             const data = await response.json();
@@ -120,7 +107,7 @@
         }
     }
 
-	async function putDbData() {
+	async function writeSlaData() {
         try {
             const response = await fetch(`alerts/api/set_elapsed_sla_api/${alertID}/${elapsed}`);
 
@@ -134,74 +121,65 @@
     }
 
 
+  	function complete() {
+	  	clearInterval(interval)
+	  	currstate = MyState.PAUSED;
+	  	if (elapsed < 0){
+		  	elapsed = 0;
+	  	}
+	  	console.log("elapsedFromComplete "+elapsed);
+	  	writeSlaData();
+  	}
+
+	function pause() {
+		currstate = MyState.PAUSED;
+		console.log("Paused!");
+		oldElapsedTime = elapsed;
+	}
+
+	function resume() {
+		currstate = MyState.RUNNING;
+		startTimeEpoch = (Math.floor((Date.now()) / (1000 * 60)) * 60);
+		console.log("Runing!");
+	}
+
+	let cleanupEffect;
+
+	onDestroy(() => {
+		if (cleanupEffect) cleanupEffect();
+	});
 
-  function complete() {
-	  //elapsed = 0
-
-	  clearInterval(interval)
-	  currstate = MyState.PAUSED;
-	  if (elapsed < 0){
-		  elapsed = 0;
-	  }
-	  //changeValue(elapsed);
-	  console.log("elapsedFromComplete "+elapsed);
-	  //setValue('elapsed_saved', elapsed);
-	  //setValue('state', 2);
-	  // TODO write into db for current state elapsed to the "SLAcompletedTime" column
-	  putDbData();
-
-
-	  //turn the shit green
-  }
-
-  function pause() {
-	  currstate = MyState.PAUSED;
-	  console.log("Paused!");
-	  oldElapsedTime = elapsed;
-  }
-
-  function resume() {
-	  currstate = MyState.RUNNING;
-	  startTimeEpoch = (Math.floor((Date.now()) / (1000 * 60)) * 60);
-	  console.log("Runing!");
-  }
-
-  let cleanupEffect;
-
-  onDestroy(() => {
-    if (cleanupEffect) cleanupEffect();
-  });
-  function calculateDuration() {
-	  try {
-		  // Extract date and time components
-		  let [date1, time1] = startDateTime.split(" ");
-		  let [date2, time2] = endDateTime.split(" ");
-		  let [d1, m1, y1] = date1.split("/").map(Number);
-		  let [d2, m2, y2] = date2.split("/").map(Number);
-		  let [h1, min1] = time1 ? time1.split(":").map(Number) : [0, 0];
-		  let [h2, min2] = time2 ? time2.split(":").map(Number) : [0, 0];
-		  // Convert to JS Date objects (JS months are 0-based)
-		  let start = new Date(y1, m1 - 1, d1, h1, min1);
-		  let end = new Date(y2, m2 - 1, d2, h2, min2);
-		  let totalTime = 0;
-		  // Calculate the difference in milliseconds
-		  let diffMs = end - start;
-		  if (diffMs < 0) {
-			  totalTime = 0;
-			  return;
-		  }
-		  // Convert milliseconds to days, hours, minutes, and seconds
-		  let totalSeconds = Math.floor(diffMs / 1000);
-		  //let days = Math.floor(totalSeconds / 86400);
-		  //let hours = Math.floor((totalSeconds % 86400) / 3600);
-            //let minutes = Math.floor((totalSeconds % 3600) / 60);
-            //let seconds = totalSeconds % 60;
-		  totalTime = totalSeconds;
-		  return totalTime;
-	  } catch (error) {
-		  console.error("Invalid date format:", error);
-	  }
-  }
+	function calculateDuration() {
+		try {
+			// Extract date and time components
+			let [date1, time1] = startDateTime.split(" ");
+			let [date2, time2] = endDateTime.split(" ");
+			let [d1, m1, y1] = date1.split("/").map(Number);
+			let [d2, m2, y2] = date2.split("/").map(Number);
+			let [h1, min1] = time1 ? time1.split(":").map(Number) : [0, 0];
+			let [h2, min2] = time2 ? time2.split(":").map(Number) : [0, 0];
+			// Convert to JS Date objects (JS months are 0-based)
+			let start = new Date(y1, m1 - 1, d1, h1, min1);
+			let end = new Date(y2, m2 - 1, d2, h2, min2);
+			let totalTime = 0;
+			// Calculate the difference in milliseconds
+			let diffMs = end - start;
+			if (diffMs < 0) {
+				totalTime = 0;
+				return;
+			}
+			// Convert milliseconds to days, hours, minutes, and seconds
+			let totalSeconds = Math.floor(diffMs / 1000);
+			//let days = Math.floor(totalSeconds / 86400);
+			//let hours = Math.floor((totalSeconds % 86400) / 3600);
+			//let minutes = Math.floor((totalSeconds % 3600) / 60);
+			//let seconds = totalSeconds % 60;
+			totalTime = totalSeconds;
+			return totalTime;
+		} catch (error) {
+			console.error("Invalid date format:", error);
+		}
+	}
     console.log(calculateDuration());
 </script>
 

From b571e343b074ed89340686b1afd9fe39193cd5d8 Mon Sep 17 00:00:00 2001
From: Rumburaq2 <oliver.hurt@student.gyarab.cz>
Date: Sat, 8 Mar 2025 19:39:27 +0100
Subject: [PATCH 27/31] [IMP] some more code refactoring

---
 .../blueprints/pages/alerts/alerts_routes.py  |  2 +-
 ui/src/pages/ProgressBar.svelte               | 20 ++++------
 ui/src/pages/SLAbar.svelte                    | 39 ++++++++++---------
 ui/src/pages/alerts.js                        |  3 --
 4 files changed, 30 insertions(+), 34 deletions(-)

diff --git a/source/app/blueprints/pages/alerts/alerts_routes.py b/source/app/blueprints/pages/alerts/alerts_routes.py
index e04ff70b1..a32a5ba5c 100644
--- a/source/app/blueprints/pages/alerts/alerts_routes.py
+++ b/source/app/blueprints/pages/alerts/alerts_routes.py
@@ -92,7 +92,7 @@ def get_elapsed_sla_api(alert_id: int):
 
     return response_success(data=elapsed_sla)
 
-
+#later move this to source/app/blueprints/rest/alerts_routes.py
 @alerts_blueprint.route('/alerts/api/set_elapsed_sla_api/<int:alert_id>/<int:new_elapsed_sla>', methods=['GET'])
 @ac_api_requires(Permissions.alerts_write)
 def set_elapsed_sla_api(alert_id: int, new_elapsed_sla: int):
diff --git a/ui/src/pages/ProgressBar.svelte b/ui/src/pages/ProgressBar.svelte
index ec0b718fb..1da714213 100644
--- a/ui/src/pages/ProgressBar.svelte
+++ b/ui/src/pages/ProgressBar.svelte
@@ -5,13 +5,13 @@
 	export let alertID;
 
 	let dbElapsedSla;
+	let currstate;
 
 	onMount(async () => {
 		console.log("I JUST MOUNTED AGAIN MOTHERFUCKER");
         dbElapsedSla = await fetchAlertSla();
         console.log("DB_Data: ", dbElapsedSla);
 
-		//dbElapsedSla = dbData;
 		currstate = MyState.RUNNING;
 
       	start();
@@ -26,9 +26,6 @@
   	};
 
 
-  	let currstate;
-
-
   	//let { startDateTime = "01/02/2025 14:30", endDateTime = "01/02/2025 14:31" } = $props();
   	export let startDateTime = "01/02/2025 14:30";
   	export let endDateTime = "01/02/2025 14:30";
@@ -89,8 +86,8 @@
 	}
 
 
-  	//this sould ectually fetch for column "SLAcompleted"
-  	// it will either have -1 or other int value for SLA completed seconds number
+  	//this should actually fetch for column "alert_elapsed_sla"
+  	// it will either have -1 or other int value for SLA completed seconds
   	async function fetchAlertSla() {
         try {
             const response = await fetch(`alerts/api/get_elapsed_sla_api/${alertID}`);
@@ -103,7 +100,7 @@
         }
         catch (error) {
             console.error('Error fetching data:', error);
-            throw error; // Optionally re-throw the error after logging it
+            throw error;
         }
     }
 
@@ -116,7 +113,7 @@
         }
         catch (error) {
             console.error('Error fetching data:', error);
-            throw error; // Optionally re-throw the error after logging it
+            throw error;
         }
     }
 
@@ -194,10 +191,9 @@
 				<span>Elapsed time:</span>
 			</div>
 
-				<label class="row col-md-12" style="display: flex;justify-content: center;">
-					<progress class:completed={currstate === MyState.PAUSED} class:breached={SLAbreached} max={duration} value={elapsed}></progress>
-				</label>
-
+			<label class="row col-md-12" style="display: flex;justify-content: center;">
+				<progress class:completed={currstate === MyState.PAUSED} class:breached={SLAbreached} max={duration} value={elapsed}></progress>
+			</label>
 
 			<div class="row col-md-12" style="display: flex;justify-content: center;">
 				<p>{elapsed.toFixed(1)}s</p>
diff --git a/ui/src/pages/SLAbar.svelte b/ui/src/pages/SLAbar.svelte
index a9e012f9d..78de3d7ed 100644
--- a/ui/src/pages/SLAbar.svelte
+++ b/ui/src/pages/SLAbar.svelte
@@ -30,28 +30,33 @@
     console.log(`MUJ START DATE TIME JE ${startDateTime}\nMUJ SLA IG TYVOLE ${SLA} MUJ ALERT ID ${alertID}`);
 
 
-    const clients = JSON.parse(SLA);
-    const resultIG = clients.find(client => client.client_id === alertCustomerID)?.sla;
-
-    // Split the SLA into components
-	let workingDays2 = [];
+    let workingDays = [];
 	let startHour = 8;
     let endHour = 20;
 
-    if (resultIG.includes(':')) {
-  		const [days, startTime, endTime] = resultIG.split(':');
+    //parsing SLA string
+    const clients = JSON.parse(SLA);
+    const myClient = clients.find(client => client.client_id === alertCustomerID)?.sla;
+
+    // Split the SLA into components
+    if (myClient.includes(':')) {
+  		const [days, startTime, endTime] = myClient.split(':');
 
   		// Process working days
-  		workingDays2 = days.split(', ').map(day => day.trim());
+  		workingDays = days.split(', ').map(day => day.trim());
 
   		// Convert times to numbers
   		startHour = parseInt(startTime, 10);
   		endHour = parseInt(endTime, 10);
 	} else {
   		// Handle case with no times (just days)
-  		workingDays2 = resultIG.split(', ').map(day => day.trim());
+  		workingDays = myClient.split(', ').map(day => day.trim());
 	}
 
+    const workingHours = {
+    	start: startHour, // 8:00 AM
+    	end: endHour // 8:00 PM
+  	};
 
 	//setting up severity
 	const SEVERITY ={
@@ -65,15 +70,8 @@
 	let endDateTime = "01/02/2025 22:31"; //default value
 	endDateTime = calculateEndDateTime(startDateTime, alertSevID);
 	console.log("EndTimeeeee:"+endDateTime);
-	//setting up SLA params
-	const workingHours = {
-    	start: startHour, // 8:00 AM
-    	end: endHour // 8:00 PM
-  	};
 
 	//const workingDays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday'];
-    const workingDays = workingDays2;
-
 
 	let result;
 	result = getClosestWorkingTime(startDateTime);
@@ -85,6 +83,7 @@
 		computedValue = calculateEndDateTime(result, alertSevID);
 		console.log("computed value: "+computedValue)
 	}
+
 	//input in formated timestamp
     //returns formated timestamp
     function calculateEndDateTime(startDateTime, severity) {
@@ -106,7 +105,7 @@
     		secondsEpoch += SEVERITY.MEDIUM * 3600;
   		}
 		else if (severity === 5) {
-    		secondsEpoch = secondsEpoch+1200;
+    		secondsEpoch = secondsEpoch+600;
   		}
         else {
             secondsEpoch += 12 * 3600;
@@ -114,6 +113,7 @@
   		// Return the formatted date-time string
   		return getFormattedDateFromTimestamp(secondsEpoch);
 	}
+
     //inputs formated timestamp
     //returns num of seconds
     function getSecondsSinceEpoch(dateString) {
@@ -129,6 +129,7 @@
         const secondsSinceEpoch = Math.floor(date.getTime() / 1000);
         return secondsSinceEpoch;
     }
+
 	//input num of seconds
     //returns formated timestamp
     function getFormattedDateFromTimestamp(timestamp) {
@@ -144,6 +145,7 @@
         const formattedDate = `${day}/${month}/${year} ${hours}:${minutes}`;
         return formattedDate;
     }
+
     //converts the formated timestamp to Date object - easier to work with
 	function parseDateTime(dateTime) {
     	const [date, time] = dateTime.split(' ');
@@ -151,6 +153,7 @@
     	const [hours, minutes] = time.split(':').map(Number);
    	    return new Date(year, month - 1, day, hours, minutes);
     }
+
     //inputs Date object and
     // returns formated timestamp string
     //if not Date object inputted return true - indicates we are in current working hours
@@ -165,6 +168,7 @@
     	const minutes = String(date.getMinutes()).padStart(2, '0');
     	return `${day}/${month}/${year} ${hours}:${minutes}`;
   	}
+
     // Check if it's a working day and within working hours - if yes return true else return next working time
     function getClosestWorkingTime(inputDateTime) {
     	const inputDate = parseDateTime(inputDateTime);
@@ -219,5 +223,4 @@
     <p>The closest working time is: {result}</p>
 	  <ProgressBar startDateTime={result} endDateTime={computedValue} {alertStatusID} {alertID}/>
   {/if}
-
 </div>
\ No newline at end of file
diff --git a/ui/src/pages/alerts.js b/ui/src/pages/alerts.js
index 01d178ae0..7d3c1bb5a 100644
--- a/ui/src/pages/alerts.js
+++ b/ui/src/pages/alerts.js
@@ -1339,9 +1339,6 @@ async function refreshAlert(alertId, alertData, expanded=false) {
     console.log(alertData.alert_customer_id);
     //document.dispatchEvent(new CustomEvent('alertRendered', { detail: { IRIStime: alertData.alert_creation_time, alertStatusID: alertData.alert_status_id }}));
 
-    //const response = get_request_api('/alerts/api/get_clients_sla_api');
-    //const SLAdata = response.responseJSON.data.customers_sla;
-
     document.dispatchEvent(new CustomEvent('alertRendered', {
         detail: {
             IRIStime: alertData.alert_creation_time,

From c09012d2001b986ee1bfb2d23f536fb334bd4cd6 Mon Sep 17 00:00:00 2001
From: Rumburaq2 <oliver.hurt@student.gyarab.cz>
Date: Fri, 14 Mar 2025 22:26:56 +0100
Subject: [PATCH 28/31] [DEL] removing debug HTML content

---
 ui/src/pages/ProgressBar.svelte | 3 ---
 ui/src/pages/SLAbar.svelte      | 2 --
 2 files changed, 5 deletions(-)

diff --git a/ui/src/pages/ProgressBar.svelte b/ui/src/pages/ProgressBar.svelte
index 1da714213..0adc3dfa6 100644
--- a/ui/src/pages/ProgressBar.svelte
+++ b/ui/src/pages/ProgressBar.svelte
@@ -204,9 +204,6 @@
     {#if duration === elapsed}
         <p class="row col-md-12" style="display: flex;justify-content: center;"><strong>SLA breached!</strong></p>
 	{/if}
-	<button on:click={pause}>Pause</button>
-	<button on:click={resume}>Resume</button>
-	<button on:click={complete}>Complete</button>
 </div>
 
 
diff --git a/ui/src/pages/SLAbar.svelte b/ui/src/pages/SLAbar.svelte
index 78de3d7ed..8dd2b3485 100644
--- a/ui/src/pages/SLAbar.svelte
+++ b/ui/src/pages/SLAbar.svelte
@@ -215,9 +215,7 @@
 </script>
 
 <div class="grid-gap">
-  <p>Input Date and Time: {startDateTime}</p>
   {#if result === true} <!-- if within working hours -->
-    <p>The provided time is within working hours.</p>
 	  <ProgressBar startDateTime={startDateTime} {endDateTime} {alertStatusID} {alertID}/>
   {:else} <!-- if not within working hours - recompute endDateTime-->
     <p>The closest working time is: {result}</p>

From 5b0a6bc229cdd65bc39aabf2231f45964733bd8a Mon Sep 17 00:00:00 2001
From: Rumburaq2 <oliver.hurt@student.gyarab.cz>
Date: Sat, 15 Mar 2025 11:23:03 +0100
Subject: [PATCH 29/31] [DEL] removing some more debug HTML content

---
 ui/src/pages/SLAbar.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/src/pages/SLAbar.svelte b/ui/src/pages/SLAbar.svelte
index 8dd2b3485..815456aa4 100644
--- a/ui/src/pages/SLAbar.svelte
+++ b/ui/src/pages/SLAbar.svelte
@@ -218,7 +218,6 @@
   {#if result === true} <!-- if within working hours -->
 	  <ProgressBar startDateTime={startDateTime} {endDateTime} {alertStatusID} {alertID}/>
   {:else} <!-- if not within working hours - recompute endDateTime-->
-    <p>The closest working time is: {result}</p>
 	  <ProgressBar startDateTime={result} endDateTime={computedValue} {alertStatusID} {alertID}/>
   {/if}
 </div>
\ No newline at end of file

From ddf9ab9ba22f7ebe5356487346ddad945355df3a Mon Sep 17 00:00:00 2001
From: Rumburaq2 <oliver.hurt@student.gyarab.cz>
Date: Sat, 15 Mar 2025 11:59:45 +0100
Subject: [PATCH 30/31] [DEL] deleting unused code from alerts_routes.py

---
 source/app/blueprints/pages/alerts/alerts_routes.py | 2 --
 1 file changed, 2 deletions(-)

diff --git a/source/app/blueprints/pages/alerts/alerts_routes.py b/source/app/blueprints/pages/alerts/alerts_routes.py
index a32a5ba5c..905e0f2ff 100644
--- a/source/app/blueprints/pages/alerts/alerts_routes.py
+++ b/source/app/blueprints/pages/alerts/alerts_routes.py
@@ -31,8 +31,6 @@
 from app.blueprints.responses import response_error
 from app.blueprints.access_controls import ac_requires
 
-from app.datamgmt.client.client_db import get_client, get_client_list
-from app.forms import AddCustomerForm
 
 from app.datamgmt.client.client_db import get_clients_sla
 from app.blueprints.responses import response_success

From 04fcab9efff068853a20e937fe72d8026829a4a0 Mon Sep 17 00:00:00 2001
From: Rumburaq2 <oliver.hurt@student.gyarab.cz>
Date: Sun, 20 Apr 2025 11:26:35 +0200
Subject: [PATCH 31/31] [IMP] code refactoring - del unused prints, etc

---
 .../blueprints/pages/alerts/alerts_routes.py  | 14 ++++---
 ui/src/pages/ProgressBar.svelte               | 10 +----
 ui/src/pages/SLA.js                           |  7 ++--
 ui/src/pages/SLAbar.svelte                    | 37 ++++++++++++++++++-
 ui/src/pages/alerts.js                        |  2 -
 5 files changed, 49 insertions(+), 21 deletions(-)

diff --git a/source/app/blueprints/pages/alerts/alerts_routes.py b/source/app/blueprints/pages/alerts/alerts_routes.py
index 905e0f2ff..3324b5bc7 100644
--- a/source/app/blueprints/pages/alerts/alerts_routes.py
+++ b/source/app/blueprints/pages/alerts/alerts_routes.py
@@ -68,6 +68,13 @@ def alerts_list_view_route(caseid, url_redir) -> Union[str, Response]:
     return render_template('alerts.html', caseid=caseid, form=form)
 
 #later move this to source/app/blueprints/rest/alerts_routes.py
+@alerts_blueprint.route('/alerts/api/set_elapsed_sla_api/<int:alert_id>/<int:new_elapsed_sla>', methods=['GET'])
+@ac_api_requires(Permissions.alerts_write)
+def set_elapsed_sla_api(alert_id: int, new_elapsed_sla: int):
+    updated_alert = set_elapsed_sla(alert_id, new_elapsed_sla)
+    return response_success(data=updated_alert)
+
+
 @alerts_blueprint.route('/alerts/api/get_clients_sla_api', methods=['GET'])
 @ac_api_requires()
 def get_clients_sla_api():
@@ -90,12 +97,7 @@ def get_elapsed_sla_api(alert_id: int):
 
     return response_success(data=elapsed_sla)
 
-#later move this to source/app/blueprints/rest/alerts_routes.py
-@alerts_blueprint.route('/alerts/api/set_elapsed_sla_api/<int:alert_id>/<int:new_elapsed_sla>', methods=['GET'])
-@ac_api_requires(Permissions.alerts_write)
-def set_elapsed_sla_api(alert_id: int, new_elapsed_sla: int):
-    updated_alert = set_elapsed_sla(alert_id, new_elapsed_sla)
-    return response_success(data=updated_alert)
+
 
 
 
diff --git a/ui/src/pages/ProgressBar.svelte b/ui/src/pages/ProgressBar.svelte
index 0adc3dfa6..e1949ec77 100644
--- a/ui/src/pages/ProgressBar.svelte
+++ b/ui/src/pages/ProgressBar.svelte
@@ -30,9 +30,7 @@
   	export let startDateTime = "01/02/2025 14:30";
   	export let endDateTime = "01/02/2025 14:30";
   	let timecomputed = calculateDuration(); //calculate duration betwwen two timestamps in seconds
-  	//let elapsed = $state(0);
   	$: elapsed = 0;
-  	//let duration = $state(timecomputed);
   	$: duration = timecomputed;
   	let interval: number
   	let oldElapsedTime = 0;
@@ -42,19 +40,15 @@
 
 	function start() {
 	  interval = setInterval(() => {
-		  console.log("elapsed2 ", dbElapsedSla);
 		  if(currstate === MyState.RUNNING) {
 			  //calculate curr time
 			  currTimeEpoch = Math.floor((Date.now()) / (1000 * 60)) * 60;
-			  //startTimeEpoch = getSecondsSinceEpoch(startDateTime);
-				//console.log(currTimeEpoch);
-				//console.log(Math.floor((Date.now()) / (1000 * 60)) * 60);
-			  if(dbElapsedSla < 0){ //
+			  if(dbElapsedSla < 0){ //SLA not yet completed
 				  elapsed = currTimeEpoch - startTimeEpoch + oldElapsedTime;
 				  console.log("elapsed: "+elapsed);
 			  }
 			  else { //SLA is not -1 therefore was completed sometime before
-				  elapsed = dbElapsedSla; //
+				  elapsed = dbElapsedSla;
 				  clearInterval(interval)
 				  currstate = MyState.PAUSED;
 			  }
diff --git a/ui/src/pages/SLA.js b/ui/src/pages/SLA.js
index e60248a2d..0eadaadd1 100644
--- a/ui/src/pages/SLA.js
+++ b/ui/src/pages/SLA.js
@@ -3,9 +3,7 @@ import App from './SLAcontainer.svelte';
 export let app; // Declare at the top level
 
 document.addEventListener('alertRendered', (event) => {
-  console.log('alertRendered event received');
   const containers = document.querySelectorAll('.SLAcontainer');
-  console.log(containers);
   if (containers) {
     containers.forEach((container) => {
       // Check if the container already has the "mounted" class
@@ -29,4 +27,7 @@ document.addEventListener('alertRendered', (event) => {
       container.classList.add("mounted");
     });
   }
-});
\ No newline at end of file
+});
+
+
+
diff --git a/ui/src/pages/SLAbar.svelte b/ui/src/pages/SLAbar.svelte
index 815456aa4..095a0ac9d 100644
--- a/ui/src/pages/SLAbar.svelte
+++ b/ui/src/pages/SLAbar.svelte
@@ -4,11 +4,14 @@
 
 	//setting up startDateTime value
 	let startDateTime = "01/02/2025 14:30";//defalut value
+    let UTCstartDateTime = "01/02/2025 14:30";//defalut value
     export let IRIStime;
 
     const date = new Date(IRIStime);
+    const UTCdate = new Date(IRIStime);
 
-    date.setHours(date.getHours() + 1);
+    date.setHours(date.getHours() + 2); //date.getHours() + current Timezone offset
+    UTCdate.setHours(UTCdate.getHours());
 
     // Get day, month, year, hours, and minutes with proper padding
     const day = String(date.getDate()).padStart(2, '0');
@@ -17,9 +20,21 @@
     const hours = String(date.getHours()).padStart(2, '0');
     const minutes = String(date.getMinutes()).padStart(2, '0');
 
+
+    // Get day, month, year, hours, and minutes with proper padding
+    const UTCday = String(UTCdate.getDate()).padStart(2, '0');
+    const UTCmonth = String(UTCdate.getMonth() + 1).padStart(2, '0'); // Months are 0-based
+    const UTCyear = UTCdate.getFullYear();
+    const UTChours = String(UTCdate.getHours()).padStart(2, '0');
+    const UTCminutes = String(UTCdate.getMinutes()).padStart(2, '0');
+
     startDateTime = `${day}/${month}/${year} ${hours}:${minutes}`;
 
 
+
+    UTCstartDateTime = `${UTCday}/${UTCmonth}/${UTCyear} ${UTChours}:${UTCminutes}`;
+
+
     export let alertStatusID;
     export let alertSevID;
     export let SLA;
@@ -28,6 +43,7 @@
 
 
     console.log(`MUJ START DATE TIME JE ${startDateTime}\nMUJ SLA IG TYVOLE ${SLA} MUJ ALERT ID ${alertID}`);
+    console.log(`MUJ UTC START DATE TIME JE ${UTCstartDateTime}\nMUJ SLA IG TYVOLE`);
 
 
     let workingDays = [];
@@ -69,20 +85,32 @@
 	//setting up endDateTime value
 	let endDateTime = "01/02/2025 22:31"; //default value
 	endDateTime = calculateEndDateTime(startDateTime, alertSevID);
+    let UTCendDateTime = calculateEndDateTime(UTCstartDateTime, alertSevID);
 	console.log("EndTimeeeee:"+endDateTime);
+    console.log("EndTIME UTC VOLE:"+UTCendDateTime);
 
 	//const workingDays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday'];
 
 	let result;
+    let resultUTC;
 	result = getClosestWorkingTime(startDateTime);
+    resultUTC = getClosestWorkingTime(UTCstartDateTime);
 	console.log("startDateTime: "+startDateTime);
+    console.log("UTCstartDateTime: "+UTCstartDateTime);
 	result = formatDateTime(result);
+    result = formatDateTime(resultUTC);
 	console.log("result: "+result);
+    console.log("resultUTC: "+resultUTC);
 	let computedValue;
+    let computedValueUTC;
 	if(result !== true  ){
 		computedValue = calculateEndDateTime(result, alertSevID);
-		console.log("computed value: "+computedValue)
+		console.log("computed value: "+computedValue);
 	}
+    if(resultUTC !== true){
+        computedValueUTC = calculateEndDateTime(resultUTC, alertSevID);
+        console.log("computed value: "+computedValueUTC)
+    }
 
 	//input in formated timestamp
     //returns formated timestamp
@@ -170,6 +198,11 @@
   	}
 
     // Check if it's a working day and within working hours - if yes return true else return next working time
+    //generated by deepSeek (R1) on 7th of March 2025 base on input:
+    // "generate a JS function that will take input date in form
+    // DD/MM/YYYY HH:MM and return true for input is current working time
+    // else return nextWorkingTime based on array WorkingDays and int StartHour
+    // and int EndHour"
     function getClosestWorkingTime(inputDateTime) {
     	const inputDate = parseDateTime(inputDateTime);
     	const currentDayIndex = inputDate.getDay(); // 0 for Sunday, 1 for Monday, etc.
diff --git a/ui/src/pages/alerts.js b/ui/src/pages/alerts.js
index 7d3c1bb5a..682676b4a 100644
--- a/ui/src/pages/alerts.js
+++ b/ui/src/pages/alerts.js
@@ -1349,8 +1349,6 @@ async function refreshAlert(alertId, alertData, expanded=false) {
             alertID: alertData.alert_id
         }
     }));
-
-
 }
 
 async function fetchSLAdata() {