ddp/photoassistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Damien De Paoli
2023-01-09 13:13:51 +11:00
parent 1ba9bf4312
commit 56c2d586b6
6 changed files with 89 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
internal/js/files_support.js
View File

@@ -64,7 +64,7 @@ function MoveSubmit()
// reorder the images via ecnt again, so highlighting can work
document.mf_id=0; $('.figure').each( function() { $(this).attr('ecnt', document.mf_id ); document.mf_id++ } )
$('#dbox').modal('hide')
$.ajax({ type: 'POST', data: $('#mv_fm').serialize(), url: '/move_files', success: function(data){ st=Object; st.message="Created&nbsp;<a class='link-light' href=/job/" + data.job_id + ">Job #" + data.job_id + "</a>&nbsp;to move selected file(s)"; st.alert="success"; StatusMsg(st); CheckForJobs(); return false; } })
$.ajax({ type: 'POST', data: $('#mv_fm').serialize(), url: '/move_files', success: function(data){ console.log(data); StatusMsg(data); CheckForJobs(); return false; } })
}
// show the DBox for a move file, includes all thumbnails of selected files to move

106
internal/js/jobs.js
View File

@@ -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 );
}
},
} )