Skip to content

Commit 54fbb9f

Browse files
enriquetomasmbenriquetomasmb
committed
improve notification system
1 parent 329674f commit 54fbb9f

7 files changed

Lines changed: 217 additions & 23 deletions

File tree

‎nebula/frontend/static/css/style.css‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -779,3 +779,155 @@ td {
779779
#form-configurations {
780780
padding: 10px;
781781
}
782+
783+
/* Add new notification styles */
784+
#notification-container {
785+
position: fixed;
786+
top: 6rem;
787+
right: 2rem;
788+
z-index: 999;
789+
display: flex;
790+
flex-direction: column;
791+
gap: 1rem;
792+
max-width: 400px;
793+
pointer-events: none;
794+
}
795+
796+
#notification-container .notification {
797+
pointer-events: auto;
798+
}
799+
800+
.notification {
801+
background: rgba(255, 255, 255, 0.95);
802+
border-radius: 1rem;
803+
padding: 1rem 1.5rem;
804+
display: flex;
805+
align-items: center;
806+
gap: 1rem;
807+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
808+
backdrop-filter: blur(8px);
809+
animation: slideIn 0.3s ease-out;
810+
border-left: 4px solid;
811+
}
812+
813+
.notification.success {
814+
border-color: #198754;
815+
}
816+
817+
.notification.warning {
818+
border-color: #ffc107;
819+
}
820+
821+
.notification.danger {
822+
border-color: #dc3545;
823+
}
824+
825+
.notification.info {
826+
border-color: #0dcaf0;
827+
}
828+
829+
.notification .icon {
830+
font-size: 1.25rem;
831+
}
832+
833+
.notification.success .icon {
834+
color: #198754;
835+
}
836+
837+
.notification.warning .icon {
838+
color: #ffc107;
839+
}
840+
841+
.notification.danger .icon {
842+
color: #dc3545;
843+
}
844+
845+
.notification.info .icon {
846+
color: #0dcaf0;
847+
}
848+
849+
.notification .content {
850+
flex: 1;
851+
}
852+
853+
.notification .title {
854+
font-weight: 600;
855+
margin-bottom: 0.25rem;
856+
}
857+
858+
.notification .message {
859+
font-size: 0.875rem;
860+
color: #6c757d;
861+
}
862+
863+
.notification .close {
864+
background: none;
865+
border: none;
866+
color: #6c757d;
867+
cursor: pointer;
868+
padding: 0.25rem;
869+
font-size: 1rem;
870+
line-height: 1;
871+
opacity: 0.5;
872+
transition: opacity 0.2s;
873+
}
874+
875+
.notification .close:hover {
876+
opacity: 1;
877+
}
878+
879+
@keyframes slideIn {
880+
from {
881+
transform: translateX(100%);
882+
opacity: 0;
883+
}
884+
to {
885+
transform: translateX(0);
886+
opacity: 1;
887+
}
888+
}
889+
890+
@keyframes slideOut {
891+
from {
892+
transform: translateX(0);
893+
opacity: 1;
894+
}
895+
to {
896+
transform: translateX(100%);
897+
opacity: 0;
898+
}
899+
}
900+
901+
.notification.closing {
902+
animation: slideOut 0.3s ease-in forwards;
903+
}
904+
905+
/* Update scenario-running-indicator to use new notification styles */
906+
.scenario-running-indicator {
907+
position: fixed;
908+
top: 6rem;
909+
right: 2rem;
910+
background: rgba(255, 255, 255, 0.95);
911+
border-radius: 1rem;
912+
padding: 1rem 1.5rem;
913+
display: flex;
914+
align-items: center;
915+
gap: 1rem;
916+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
917+
z-index: 1000;
918+
backdrop-filter: blur(8px);
919+
border-left: 4px solid #ffc107;
920+
}
921+
922+
.scenario-running-indicator .spinner {
923+
width: 1.5rem;
924+
height: 1.5rem;
925+
border: 3px solid rgba(255, 193, 7, 0.3);
926+
border-top-color: #ffc107;
927+
border-radius: 50%;
928+
animation: spin 1s linear infinite;
929+
}
930+
931+
@keyframes spin {
932+
to { transform: rotate(360deg); }
933+
}

‎nebula/frontend/static/js/dashboard/dashboard.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const Dashboard = {
1919
},
2020

2121
checkDemoMode() {
22-
showAlert('info', 'Some functionalities are disabled in the demo version. Please, log in to access all functionalities.');
22+
showAlert('info', 'Some functionalities are disabled in the demo version.');
2323
}
2424
};
2525

‎nebula/frontend/static/js/dashboard/notes-manager.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ const NotesManager = {
6060
showAlert('success', 'Notes saved successfully');
6161
} else {
6262
if (data.code === 401) {
63-
showAlert('info', 'Some functionalities are disabled in the demo version. Please, log in to access all functionalities.');
63+
showAlert('info', 'Some functionalities are disabled in the demo version.');
6464
} else {
6565
showAlert('error', 'Failed to save notes');
6666
}

‎nebula/frontend/templates/dashboard.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -297,11 +297,11 @@ <h6 class="text-muted mb-2"><i class="fa fa-signal me-2"></i>Status</h6>
297297
<script type="module" src="{{ url_for('static', path='js/dashboard/dashboard.js') }}"></script>
298298

299299
{% if scenario_running %}
300-
<div class="scenario-running-indicator">
301-
<div class="spinner"></div>
302-
<div>
303-
<div class="fw-bold">Scenario Running</div>
304-
<div class="small text-muted">{{ scenario_running[0] }}</div>
300+
<div class="notification warning" style="position: fixed; top: 6rem; right: 2rem; z-index: 1000;">
301+
<div class="spinner" style="width: 1.5rem; height: 1.5rem; border: 3px solid rgba(255, 193, 7, 0.3); border-top-color: #ffc107; border-radius: 50%; animation: spin 1s linear infinite;"></div>
302+
<div class="content">
303+
<div class="title">Scenario Running</div>
304+
<div class="message">{{ scenario_running[0] }}</div>
305305
</div>
306306
</div>
307307
{% endif %}

‎nebula/frontend/templates/deployment.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -721,7 +721,7 @@ <h5 class="step-title">Schema of deployment</h5>
721721

722722
{% if not user_logged_in %}
723723
<script>
724-
showAlert('info', 'Some functionalities are disabled in the demo version. Please, log in to access all functionalities.');
724+
showAlert('info', 'Some functionalities are disabled in the demo version.');
725725
</script>
726726
{% endif %}
727727

‎nebula/frontend/templates/layout.html‎

Lines changed: 56 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -71,19 +71,62 @@
7171

7272
<script async src="https://www.googletagmanager.com/gtag/js?id=G-CJMRTGSHND"></script>
7373
<script>
74-
function showAlert(category, message) {
75-
// Create the alert element
76-
const alert = document.createElement('div');
77-
alert.classList.add('alert', `alert-${category}`, 'alert-dismissible', 'fade', 'show');
78-
alert.setAttribute('role', 'alert');
79-
alert.innerHTML = `
80-
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
81-
${message}
74+
function showAlert(category, message, title = null) {
75+
// Create the notification element
76+
const notification = document.createElement('div');
77+
notification.classList.add('notification', category);
78+
79+
// Set icon based on category
80+
let icon = '';
81+
switch(category) {
82+
case 'success':
83+
icon = 'fa-check-circle';
84+
break;
85+
case 'warning':
86+
icon = 'fa-exclamation-triangle';
87+
break;
88+
case 'danger':
89+
icon = 'fa-times-circle';
90+
break;
91+
case 'info':
92+
icon = 'fa-info-circle';
93+
break;
94+
}
95+
96+
// Create notification content
97+
notification.innerHTML = `
98+
<i class="fa ${icon} icon"></i>
99+
<div class="content">
100+
${title ? `<div class="title">${title}</div>` : ''}
101+
<div class="message">${message}</div>
102+
</div>
103+
<button class="close" aria-label="Close">
104+
<i class="fa fa-times"></i>
105+
</button>
82106
`;
83-
84-
// Append the alert in the top of the page
85-
const container = document.querySelector('.alerts');
86-
container.insertBefore(alert, container.firstChild);
107+
108+
// Add to container
109+
const container = document.getElementById('notification-container');
110+
container.appendChild(notification);
111+
112+
// Add click handler for close button
113+
const closeBtn = notification.querySelector('.close');
114+
closeBtn.addEventListener('click', () => {
115+
notification.classList.add('closing');
116+
setTimeout(() => {
117+
notification.remove();
118+
}, 300);
119+
});
120+
121+
// Auto remove after 5 seconds
122+
setTimeout(() => {
123+
if (notification.parentElement) {
124+
notification.classList.add('closing');
125+
setTimeout(() => {
126+
notification.remove();
127+
}, 300);
128+
}
129+
}, 5000);
87130
}
88131
</script>
89132

@@ -207,8 +250,7 @@ <h1 class="logo">
207250
</header>
208251

209252
<main id="main">
210-
<div class="container alerts"></div>
211-
<!-- <h1 id="page-title">{% block page_title %}{% endblock %}</h1> -->
253+
<div id="notification-container"></div>
212254
{% block body %}{% endblock %}
213255
<button type="button" id="btn-up" class="btn btn-dark" title="Go to top"><i class="fa fa-arrow-up"></i></button>
214256
</main>

‎nebula/frontend/templates/monitor.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -291,7 +291,7 @@ <h5 class="text-muted mb-2">
291291

292292
{% if not user_logged_in %}
293293
<script>
294-
showAlert('info', 'Some functionalities are disabled in the demo version. Please, log in to access all functionalities.');
294+
showAlert('info', 'Some functionalities are disabled in the demo version.');
295295
</script>
296296
{% endif %}
297297

0 commit comments

Comments
 (0)