Notification design

This commit is contained in:
krateng 2024-01-20 20:12:39 +01:00
parent ed34992d8b
commit c648b25d28
3 changed files with 21 additions and 11 deletions

View File

@ -363,12 +363,14 @@ div#notification_area {
right:20px;
}
div#notification_area div.notification {
background-color:white;
background-color:black;
width:400px;
min-height:50px;
margin-bottom:7px;
padding:9px;
opacity:0.4;
opacity:0.5;
border-left: 8px solid var(--notification-color);
border-radius: 3px;
}
div#notification_area div.notification:hover {
opacity:0.95;

View File

@ -126,7 +126,7 @@ function scrobble(artists,title,albumartists,album,timestamp) {
lastArtists = artists;
lastTrack = title;
lastAlbum = album;
lastAlbumartists = albumartists;
lastAlbumartists = albumartists || [];
var payload = {
"artists":artists,

View File

@ -1,12 +1,14 @@
// JS for feedback to the user whenever any XHTTP action is taken
const colors = {
'warning':'red',
'error': 'red',
'warning':'#8ACC26',
'info':'green'
}
const notification_template = info => `
<div class="notification" style="background-color:${colors[info.notification_type]};">
<div class="notification" style="--notification-color: ${colors[info.notification_type]};">
<b>${info.title}</b><br/>
<span>${info.body}</span>
@ -35,18 +37,24 @@ function notify(title,msg,notification_type='info',reload=false) {
}
function notifyCallback(request) {
var body = request.response;
var response = request.response;
var status = request.status;
if (status == 200) {
var notification_type = 'info';
if (response.hasOwnProperty('warnings') && response.warnings.length > 0) {
var notification_type = 'warning';
}
else {
var notification_type = 'info';
}
var title = "Success!";
var msg = body.desc || body;
var msg = response.desc || response;
}
else {
var notification_type = 'warning';
var title = "Error: " + body.error.type;
var msg = body.error.desc || "";
var notification_type = 'error';
var title = "Error: " + response.error.type;
var msg = response.error.desc || "";
}