static: add websocket support for messages, move console.log to debug

This commit is contained in:
Jens Langhammer 2020-11-26 17:23:29 +01:00
parent 9c00c86e9b
commit afcbe24ff5
9 changed files with 58 additions and 50 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,7 +1,7 @@
export class Application { export class Application {
pk: string; pk?: string;
name: string; name?: string;
slug: string; slug?: string;
provider?: number; provider?: number;
meta_launch_url?: string; meta_launch_url?: string;

View File

@ -1,5 +1,4 @@
import { getCookie } from "../utils"; import { getCookie } from "../utils";
import { updateMessages } from "./Messages";
import { css, customElement, html, LitElement, property } from "lit-element"; import { css, customElement, html, LitElement, property } from "lit-element";
// @ts-ignore // @ts-ignore
import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css"; import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
@ -56,8 +55,6 @@ export class ActionButton extends LitElement {
this.classList.remove(PROGRESS_CLASS); this.classList.remove(PROGRESS_CLASS);
this.classList.replace(PRIMARY_CLASS, statusClass); this.classList.replace(PRIMARY_CLASS, statusClass);
this.requestUpdate(); this.requestUpdate();
// Trigger messages to update
updateMessages();
setTimeout(() => { setTimeout(() => {
this.classList.replace(statusClass, PRIMARY_CLASS); this.classList.replace(statusClass, PRIMARY_CLASS);
this.requestUpdate(); this.requestUpdate();

View File

@ -11,13 +11,9 @@ let ID = function (prefix: string) {
return prefix + Math.random().toString(36).substr(2, 9); return prefix + Math.random().toString(36).substr(2, 9);
}; };
export function updateMessages() {
const messageElement = <Messages>document?.querySelector("pb-messages");
messageElement.fetchMessages();
}
interface Message { interface Message {
level_tag: string; levelTag: string;
tags: string[];
message: string; message: string;
} }
@ -29,38 +25,51 @@ export class Messages extends LitElement {
@property() @property()
messages: string[] = []; messages: string[] = [];
messageSocket?: WebSocket;
createRenderRoot() { createRenderRoot() {
return this; return this;
} }
firstUpdated() { constructor() {
this.fetchMessages(); super();
this.connect();
} }
fetchMessages() { connect() {
return fetch(this.url) const wsUrl = `${window.location.protocol.replace("http", "ws")}//${
.then((r) => r.json()) window.location.host
.then((r) => (this.messages = r)) }/ws/client/`;
.then((r) => { this.messageSocket = new WebSocket(wsUrl);
const container = <HTMLElement>( this.messageSocket.addEventListener("open", (e) => {
this.querySelector(".pf-c-alert-group")! console.debug(`passbook/messages: connected to ${wsUrl}`);
); });
r.forEach((message: Message) => { this.messageSocket.addEventListener("close", (e) => {
const messageElement = this.renderMessage(message); console.debug(`passbook/messages: closed ws connection: ${e}`);
container.appendChild(messageElement); setTimeout(() => {
}); console.debug(`passbook/messages: reconnecting ws`);
}); this.connect();
}, 1000);
});
this.messageSocket.addEventListener("message", (e) => {
const container = <HTMLElement>(
this.querySelector(".pf-c-alert-group")!
);
const data = JSON.parse(e.data);
const messageElement = this.renderMessage(data);
container.appendChild(messageElement);
});
} }
renderMessage(message: Message): ChildNode { renderMessage(message: Message): ChildNode {
const id = ID("pb-message"); const id = ID("pb-message");
const el = document.createElement("template"); const el = document.createElement("template");
el.innerHTML = `<li id=${id} class="pf-c-alert-group__item"> el.innerHTML = `<li id=${id} class="pf-c-alert-group__item">
<div class="pf-c-alert pf-m-${message.level_tag} ${ <div class="pf-c-alert pf-m-${message.levelTag} ${
message.level_tag === "error" ? "pf-m-danger" : "" message.levelTag === "error" ? "pf-m-danger" : ""
}"> }">
<div class="pf-c-alert__icon"> <div class="pf-c-alert__icon">
<i class="${LEVEL_ICON_MAP[message.level_tag]}"></i> <i class="${LEVEL_ICON_MAP[message.levelTag]}"></i>
</div> </div>
<p class="pf-c-alert__title"> <p class="pf-c-alert__title">
${message.message} ${message.message}

View File

@ -10,7 +10,6 @@ import ButtonStyle from "@patternfly/patternfly/components/Button/button.css";
// @ts-ignore // @ts-ignore
import fa from "@fortawesome/fontawesome-free/css/solid.css"; import fa from "@fortawesome/fontawesome-free/css/solid.css";
import { updateMessages } from "../elements/Messages";
import { convertToSlug } from "../utils"; import { convertToSlug } from "../utils";
@customElement("pb-modal-button") @customElement("pb-modal-button")
@ -96,13 +95,13 @@ export class ModalButton extends LitElement {
this.querySelector( this.querySelector(
"[slot=modal]" "[slot=modal]"
)!.innerHTML = data; )!.innerHTML = data;
console.log( console.debug(
`passbook/modalbutton: re-showing form` `passbook/modalbutton: re-showing form`
); );
this.updateHandlers(); this.updateHandlers();
} else { } else {
this.open = false; this.open = false;
console.log( console.debug(
`passbook/modalbutton: successful submit` `passbook/modalbutton: successful submit`
); );
this.dispatchEvent( this.dispatchEvent(
@ -110,7 +109,6 @@ export class ModalButton extends LitElement {
bubbles: true, bubbles: true,
}) })
); );
updateMessages();
} }
}) })
.catch((e) => { .catch((e) => {

View File

@ -1,5 +1,4 @@
import { LitElement, html, customElement, property } from "lit-element"; import { LitElement, html, customElement, property } from "lit-element";
import { updateMessages } from "../elements/Messages";
enum ResponseType { enum ResponseType {
redirect = "redirect", redirect = "redirect",
@ -53,11 +52,10 @@ export class FlowShellCard extends LitElement {
this.flowBody = data.body; this.flowBody = data.body;
await this.requestUpdate(); await this.requestUpdate();
this.checkAutofocus(); this.checkAutofocus();
updateMessages();
this.loadFormCode(); this.loadFormCode();
this.setFormSubmitHandlers(); this.setFormSubmitHandlers();
default: default:
console.log( console.debug(
`passbook/flows: unexpected data type ${data.type}` `passbook/flows: unexpected data type ${data.type}`
); );
break; break;
@ -83,14 +81,16 @@ export class FlowShellCard extends LitElement {
for (let index = 0; index < form.elements.length; index++) { for (let index = 0; index < form.elements.length; index++) {
const element = <HTMLInputElement>form.elements[index]; const element = <HTMLInputElement>form.elements[index];
if (element.value === form.action) { if (element.value === form.action) {
console.log( console.debug(
"passbook/flows: Found Form action URL in form elements, not changing form action." "passbook/flows: Found Form action URL in form elements, not changing form action."
); );
return false; return false;
} }
} }
form.action = this.flowBodyUrl; form.action = this.flowBodyUrl;
console.log(`passbook/flows: updated form.action ${this.flowBodyUrl}`); console.debug(
`passbook/flows: updated form.action ${this.flowBodyUrl}`
);
return true; return true;
} }
@ -102,13 +102,13 @@ export class FlowShellCard extends LitElement {
setFormSubmitHandlers() { setFormSubmitHandlers() {
this.querySelectorAll("form").forEach((form) => { this.querySelectorAll("form").forEach((form) => {
console.log( console.debug(
`passbook/flows: Checking for autosubmit attribute ${form}` `passbook/flows: Checking for autosubmit attribute ${form}`
); );
this.checkAutosubmit(form); this.checkAutosubmit(form);
console.log(`passbook/flows: Setting action for form ${form}`); console.debug(`passbook/flows: Setting action for form ${form}`);
this.updateFormAction(form); this.updateFormAction(form);
console.log(`passbook/flows: Adding handler for form ${form}`); console.debug(`passbook/flows: Adding handler for form ${form}`);
form.addEventListener("submit", (e) => { form.addEventListener("submit", (e) => {
e.preventDefault(); e.preventDefault();
let formData = new FormData(form); let formData = new FormData(form);

View File

@ -26,7 +26,7 @@ export class Route {
redirect(to: string): Route { redirect(to: string): Route {
this.callback = () => { this.callback = () => {
console.log(`passbook/router: redirecting ${to}`); console.debug(`passbook/router: redirecting ${to}`);
window.location.hash = `#${to}`; window.location.hash = `#${to}`;
return html``; return html``;
}; };
@ -116,7 +116,9 @@ export class RouterOutlet extends LitElement {
} }
let matchedRoute: RouteMatch | null = null; let matchedRoute: RouteMatch | null = null;
ROUTES.forEach((route) => { ROUTES.forEach((route) => {
console.debug(`passbook/router: matching ${activeUrl} against ${route.url}`); console.debug(
`passbook/router: matching ${activeUrl} against ${route.url}`
);
const match = route.url.exec(activeUrl); const match = route.url.exec(activeUrl);
if (match != null) { if (match != null) {
matchedRoute = new RouteMatch(route); matchedRoute = new RouteMatch(route);

View File

@ -59,7 +59,9 @@ export class SiteShell extends LitElement {
if (r.ok) { if (r.ok) {
return r; return r;
} }
console.log(`passbook/site-shell: Request failed ${this._url}`); console.debug(
`passbook/site-shell: Request failed ${this._url}`
);
window.location.hash = "#/"; window.location.hash = "#/";
throw new Error("Request failed"); throw new Error("Request failed");
}) })