diff --git a/config.yml b/config.yml --- a/config.yml +++ b/config.yml @@ -36,3 +36,4 @@ - "src/assets/js/docker-registry.js" - "src/assets/js/servers-log.js" - "src/assets/js/salt-config.js" + - "src/assets/js/notifications.js" diff --git a/src/assets/js/notifications.js b/src/assets/js/notifications.js new file mode 100644 --- /dev/null +++ b/src/assets/js/notifications.js @@ -0,0 +1,62 @@ +window.addEventListener("load", (event) => { + let notif = new EventSource("http://192.168.1.44:5000"); + console.log(notif); + notif.onmessage = function(received) { + console.log(received) + let notificationRecived = JSON.parse(received.data); + + console.log(notificationRecived) + + let notification = document.createElement("div"); + notification.className = "card"; + notification.style = "width: 400px;"; + + let notificationHeader = document.createElement("div"); + notificationHeader.className = "card-divider" + + let header1 = document.createElement("H5"); + header1.style = "width: 180px;"; + header1.innerHTML = "#" + notificationRecived.service ; + notificationHeader.appendChild(header1); + + let header2 = document.createElement("H5"); + header2.style = "width: 180px;"; + header2.innerHTML = "#" + notificationRecived.project ; + notificationHeader.appendChild(header2); + + let header3 = document.createElement("a"); + header3.innerHTML = "🔗"; + header3.style = "width: 40px; font-size: 1.3em"; + header3.target = "_blank"; + header3.href = notificationRecived.link; + notificationHeader.appendChild(header3); + + + let notificationBody = document.createElement("div"); + notificationBody.className = "card-section"; + + let text = document.createElement("p"); + text.innerHTML = notificationRecived.text; + notificationBody.appendChild(text); + + let otherDatas = document.createElement("div"); + otherDatas.style = "flex: 0 1 auto; display: flex;"; + + + let type = document.createElement("p"); + type.innerHTML = "Type : " + notificationRecived.type; + type.style = "width: 200px;"; + otherDatas.appendChild(type); + + let group = document.createElement("p"); + group.innerHTML = "Group : " + notificationRecived.group; + group.style = "width: 200px;"; + otherDatas.appendChild(group); + + notificationBody.appendChild(otherDatas); + + notification.appendChild(notificationHeader); + notification.appendChild(notificationBody); + document.getElementById("notificationList").appendChild(notification); + } +}) diff --git a/src/assets/scss/_settings.scss b/src/assets/scss/_settings.scss --- a/src/assets/scss/_settings.scss +++ b/src/assets/scss/_settings.scss @@ -335,9 +335,9 @@ // 14. Card // -------- -$card-background: $white; +$card-background: $primary-color; $card-font-color: $body-font-color; -$card-divider-background: $light-gray; +$card-divider-background: darken($primary-color, 20%); $card-border: 1px solid $light-gray; $card-shadow: none; $card-border-radius: $global-radius; diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss --- a/src/assets/scss/app.scss +++ b/src/assets/scss/app.scss @@ -17,6 +17,7 @@ @include foundation-breadcrumbs; @include foundation-button-group; @include foundation-callout; +@include foundation-card; @include foundation-close-button; @include foundation-menu; @include foundation-menu-icon; diff --git a/src/pages/notifications/index.html b/src/pages/notifications/index.html new file mode 100644 --- /dev/null +++ b/src/pages/notifications/index.html @@ -0,0 +1,21 @@ +--- +title: Notifications +app: notifications +--- + + + + + + + Nasqueron infrastructure servers support our budding community of creative people, writers, developers and thinkers. + This page permit to see the notifications from the notification center + + + + + + + + +
Nasqueron infrastructure servers support our budding community of creative people, writers, developers and thinkers.
This page permit to see the notifications from the notification center