static: add websocket support for messages, move console.log to debug
This commit is contained in:
parent
9c00c86e9b
commit
afcbe24ff5
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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;
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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) => {
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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");
|
||||
})
|
||||
|
|
Reference in New Issue