static: replace server-side alerts with webcomponent

This commit is contained in:
Jens Langhammer 2020-10-16 15:26:51 +02:00
parent 3b9524cdfc
commit 5e2fb6d56e
8 changed files with 74 additions and 38 deletions

View file

@ -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">

View file

@ -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">

View file

@ -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">

View file

@ -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

View file

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

View file

@ -1,5 +1,6 @@
import './FetchFillSlot.js';
import './ActionButton.js';
import './Messages.js';
// Button Dropdowns
document.querySelectorAll("button.pf-c-dropdown__toggle").forEach((b) => {