clean up how we create toasts() [no longer try to reuse dom elements, just add new ones each time], support persistent notifications and close button or not [via separate booleans], created a clear message route and use that now in templates/base.html to clear FE messages. This will break for check dups as I am not setting persistence / close buttons correctly for those jobs, that is next. Converted move_files to new format

internal/js/jobs.js

@@ -1,66 +1,56 @@
+// global 
+var next_toast_id=1
+
+function NewToast(data)
+{
+    // make new div, include data.alert as background colour, and data.message as toast body
+    d_id='st' + String(next_toast_id)
+    div='<div id="' + d_id + '"'
+    if( data.persistent === true )
+        div+=' data-bs-autohide="false"'
+    div +=' class="toast hide align-items-center border-0'
+    if( data.alert == "success" || data.alert == "danger" )
+        div += ' text-white'
+    div += ' bg-' + data.alert
+    div += `" role="alert" aria-live="assertive" aria-atomic="true">
+            <div class="d-flex">
+                <div class="toast-body">
+                `
+    div += data.message
+    div += '    </div>'
+    if( data.cant_close !== true )
+    {
+        div += '    <button type="button" class="btn-close me-2 m-auto'
+        if( data.alert === "success" || data.alert === "danger" )
+                div += ' btn-close-white'
+        div += ' " data-bs-dismiss="toast" aria-label="Close"></button>'
+    }
+    div += `
+            </div>
+        </div>
+        `
+    // insert this as the first element in the status_container
+    $('#status_container').prepend(div)
+
+    // make sure we have a new id for next toast
+    next_toast_id++
+
+    return d_id
+}
+
 // create a bs toast in the status_container
 // can reuse any that are hidden, OR, create a new one by appending as needed (so we can have 2+ toasts on screen)
 function StatusMsg(st)
 {
-    console.log( 'StatusMsg() -> ' + st.alert + ': ' + st.message )
-    // look for any '.hide' and '.toast' 
-    if( $('.toast.hide').length !== 0 )
+    el=NewToast(st)
+    $('#' + el ).toast("show")
+    // if there is a job_id, then clear the message for it or it will be picked up again on reload
+    // BUT, we dont want to do this immediately, should hook on close, but for
+    // now, we will do this to get a first pass working
+    if( st.job_id !== undefined )
     {
-        // as there may be more than 1 and as bs toast deals with ordering on screen, so just grab first()
-        tid=$('.toast.hide').first().attr('id')
-        // reset body, and the text-* and bg-* class for success, danger, etc.
-        $('#'+tid ).find( '.toast-body').html(st.message)
-        $('#'+tid ).removeClass( function( index, className ) { return (className.match( /(^|\s)(bg-|text-)\S+/g) || []).join(' ') } )
-        $('#'+tid ).addClass( 'bg-' + st.alert )
-        // get rid of white on button (if its there)
-        $('#'+tid ).find( 'button' ).removeClass('btn-close-white')
-        if( st.alert == "success" || st.alert == "danger" )
-        {
-            $('#'+tid ).addClass( 'text-white' )
-            $('#'+tid ).find( 'button' ).addClass('btn-close-white')
-        }
-        // show the popup (by default it fades)
-        $('#'+tid ).toast("show")
+        $.ajax( { type: 'POST', url: '/clearmsgforjob/'+st.job_id, success: function(data) { } } )
     }
-    else
-    {
-        // find the id of the 'last' toast (either there are none, or they are all visible [note: we are in the else already])
-        tmp=$('.toast').last().attr('id')
-        // if none, there are no toasts at all, so make '#1'
-        if( tmp== '' )
-            tid=1
-        else
-        {
-            // skip 'st' at front of DOM id, and then increment to get id for new one
-            tid=tmp.substr(2)
-            tid++
-        }
-        // make new div, include st.alert as background colour, and st.message as toast body
-        div='<div id="st' + tid + '" class="toast hide align-items-center border-0'
-        if( st.alert == "success" || st.alert == "danger" )
-            div += ' text-white'
-        div += ' bg-' + st.alert
-        div += `" role="alert" aria-live="assertive" aria-atomic="true">
-                <div class="d-flex">
-                    <div class="toast-body">
-                    `
-        div += st.message
-        div += `
-                    </div>
-                    <button type="button" class="btn-close me-2 m-auto
-                `
-        if( st.alert == "success" || st.alert == "danger" )
-                    div =+ ' btn-close-white'
-        div += `
-                    " data-bs-dismiss="toast" aria-label="Close"></button>
-                </div>
-            </div>
-            `
-        // can be appended straight after st1 as the .toast("show") deals with display ordering
-        $('#st1').append(div)
-        // show the popup (by default it fades)
-        $('#st' + tid ).toast("show")
-    } 
 }
 
 // this will make the active jobs badge red with a > 0 value, or navbar colours
@@ -95,7 +85,7 @@ function CheckForJobs()
                 SetActiveJobsBadge(data.num_active_jobs)
                 if( data.num_active_jobs > 0 )
                 {
-                    setTimeout( function() { CheckForJobCompletion() }, 1000 );
+                    setTimeout( function() { CheckForJobs() }, 1000 );
                 }
             }, 
         } )