static: replace server-side alerts with webcomponent
This commit is contained in:
parent
3b9524cdfc
commit
5e2fb6d56e
|
@ -7,7 +7,7 @@
|
|||
{% load passbook_utils %}
|
||||
|
||||
{% block body %}
|
||||
{% include 'partials/messages.html' %}
|
||||
<pb-messages url="{% url 'passbook_api:messages-list' %}"></pb-messages>
|
||||
<div class="pf-c-page" id="page-default-nav-example">
|
||||
<a class="pf-c-skip-to-content pf-c-button pf-m-primary" href="#main-content">{% trans 'Skip to content' %}</a>
|
||||
<header role="banner" class="pf-c-page__header ws-page-header">
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
{% load static %}
|
||||
{% load i18n %}
|
||||
|
||||
{% include 'partials/messages.html' %}
|
||||
<pb-messages url="{% url 'passbook_api:messages-list' %}"></pb-messages>
|
||||
|
||||
<header class="pf-c-login__main-header">
|
||||
<h1 class="pf-c-title pf-m-3xl">
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
</filter>
|
||||
</svg>
|
||||
</div>
|
||||
{% include 'partials/messages.html' %}
|
||||
<pb-messages url="{% url 'passbook_api:messages-list' %}"></pb-messages>
|
||||
<div class="pf-c-login">
|
||||
<div class="pf-c-login__container">
|
||||
<header class="pf-c-login__header">
|
||||
|
|
|
@ -1,22 +0,0 @@
|
|||
<ul class="pf-c-alert-group pf-m-toast">
|
||||
{% for msg in messages %}
|
||||
<li class="pf-c-alert-group__item">
|
||||
<div class="pf-c-alert pf-m-{{ msg.level_tag }} {% if msg.level_tag == 'error' %}pf-m-danger{% endif %}">
|
||||
<div class="pf-c-alert__icon">
|
||||
{% if msg.level_tag == 'error' %}
|
||||
<i class="fas fa-exclamation-circle"></i>
|
||||
{% elif msg.level_tag == 'warning' %}
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
{% elif msg.level_tag == 'success' %}
|
||||
<i class="fas fa-check-circle"></i>
|
||||
{% elif msg.level_tag == 'info' %}
|
||||
<i class="fas fa-info"></i>
|
||||
{% endif %}
|
||||
</div>
|
||||
<h4 class="pf-c-alert__title">
|
||||
{{ msg.message|safe }}
|
||||
</h4>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,57 @@
|
|||
import { LitElement, html } from 'lit-element';
|
||||
|
||||
const LEVEL_ICON_MAP = {
|
||||
"error": "fas fa-exclamation-circle",
|
||||
"warning": "fas fa-exclamation-triangle",
|
||||
"success": "fas fa-check-circle",
|
||||
"info": "fas fa-info",
|
||||
};
|
||||
|
||||
let ID = function () {
|
||||
return '_' + Math.random().toString(36).substr(2, 9);
|
||||
};
|
||||
|
||||
class Messages extends LitElement {
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
url: { type: String },
|
||||
messages: { type: Array },
|
||||
};
|
||||
}
|
||||
|
||||
createRenderRoot() {
|
||||
return this;
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
fetch(this.url).then(r => r.json()).then(r => this.messages = r);
|
||||
}
|
||||
|
||||
renderMessage(message) {
|
||||
const id = `pb-message-${ID()}`;
|
||||
const item = html`<li id=${id} class="pf-c-alert-group__item">
|
||||
<div class="pf-c-alert pf-m-${message.level_tag} ${message.level_tag === 'error' ? 'pf-m-danger': ''}">
|
||||
<div class="pf-c-alert__icon">
|
||||
<i class="${LEVEL_ICON_MAP[message.level_tag]}">
|
||||
</div>
|
||||
<p class="pf-c-alert__title">
|
||||
${message.message}
|
||||
</p>
|
||||
</div>
|
||||
</li>`;
|
||||
setTimeout(() => {
|
||||
this.querySelector(`#${id}`).remove();
|
||||
}, 1500);
|
||||
return item;
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.messages === undefined) {
|
||||
return html`<ul class="pf-c-alert-group pf-m-toast"></ul>`;
|
||||
}
|
||||
return html`<ul class="pf-c-alert-group pf-m-toast">${this.messages.map(item => this.renderMessage(item))}</ul>`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('pb-messages', Messages);
|
|
@ -1,5 +1,6 @@
|
|||
import './FetchFillSlot.js';
|
||||
import './ActionButton.js';
|
||||
import './Messages.js';
|
||||
|
||||
// Button Dropdowns
|
||||
document.querySelectorAll("button.pf-c-dropdown__toggle").forEach((b) => {
|
||||
|
|
Reference in New Issue