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 {
pk: string;
name: string;
slug: string;
pk?: string;
name?: string;
slug?: string;
provider?: number;
meta_launch_url?: string;

View File

@ -1,5 +1,4 @@
import { getCookie } from "../utils";
import { updateMessages } from "./Messages";
import { css, customElement, html, LitElement, property } from "lit-element";
// @ts-ignore
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.replace(PRIMARY_CLASS, statusClass);
this.requestUpdate();
// Trigger messages to update
updateMessages();
setTimeout(() => {
this.classList.replace(statusClass, PRIMARY_CLASS);
this.requestUpdate();

View File

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

View File

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

View File

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

View File

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

View File

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