129 lines
4.7 KiB
TypeScript
129 lines
4.7 KiB
TypeScript
import { BaseElement } from '../../../shared/_base';
|
|
import { CodeEditorContainer } from '../code-editor-container/code-editor-container';
|
|
import './session-list-item.less';
|
|
import * as sessionApi from '../../../shared/session-api';
|
|
import { formatDate } from '../../../shared/date-helper';
|
|
import { navigateTo } from '../../../shared/navigation';
|
|
import { getSessionDetailsId } from '../../../shared/page';
|
|
|
|
export class SessionListItem extends BaseElement {
|
|
onInit(): void {
|
|
if (this.hasAttribute("sessionId")) {
|
|
var sessionIdEle = document.createElement("div");
|
|
sessionIdEle.classList.add("session-list-item-session-id");
|
|
sessionIdEle.innerHTML = this.getAttribute("sessionId")?.toString() ?? "";
|
|
this.appendChild(sessionIdEle);
|
|
}
|
|
|
|
if (this.hasAttribute("timestamp")) {
|
|
var timestampEle = document.createElement("div");
|
|
timestampEle.classList.add("session-list-item-timestamp");
|
|
timestampEle.innerHTML = formatDate(this.getAttribute("timestamp")?.toString() ?? "");
|
|
this.appendChild(timestampEle);
|
|
}
|
|
|
|
if (this.hasAttribute("numberOfChanges")) {
|
|
var numberOfChangesEle = document.createElement("div");
|
|
numberOfChangesEle.classList.add("session-list-item-number-of-changes");
|
|
numberOfChangesEle.innerHTML = this.getAttribute("numberOfChanges")?.toString() ?? "";
|
|
this.appendChild(numberOfChangesEle);
|
|
}
|
|
|
|
this.addEventListener("click", (evt) => {
|
|
this.itemClicked();
|
|
});
|
|
|
|
if (this.isUrlSelected()) {
|
|
this.itemClicked();
|
|
}
|
|
}
|
|
|
|
private intervalHandle: number | null = null;
|
|
stopUpdate() {
|
|
this.classList.remove("selected");
|
|
|
|
if (this.intervalHandle) {
|
|
window.clearInterval(this.intervalHandle);
|
|
this.intervalHandle = null;
|
|
}
|
|
}
|
|
|
|
isUrlSelected(): boolean {
|
|
var selectedId = getSessionDetailsId();
|
|
return selectedId === this.getAttribute("sessionId")?.toString()?? "";
|
|
}
|
|
|
|
startUpdate() {
|
|
this.stopUpdate();
|
|
|
|
this.classList.add("selected");
|
|
|
|
this.updateInputs();
|
|
this.intervalHandle = window.setInterval(this.updateInputs.bind(this), 1000);
|
|
}
|
|
|
|
updateInputs() {
|
|
var codeEditorHTMLContainer = <CodeEditorContainer>document.querySelector("code-editor-container[language='HTML']");
|
|
var codeEditorCSSContainer = <CodeEditorContainer>document.querySelector("code-editor-container[language='CSS']");
|
|
var codeEditorJavascriptContainer = <CodeEditorContainer>document.querySelector("code-editor-container[language='Javascript']");
|
|
|
|
this.getSessionData((js, html, css) => {
|
|
codeEditorJavascriptContainer.setInput(js?.data ?? "");
|
|
codeEditorHTMLContainer.setInput(html?.data ?? "");
|
|
codeEditorCSSContainer.setInput(css?.data ?? "");
|
|
});
|
|
|
|
}
|
|
|
|
getSessionData(onGet: (javascript: any, html: any, css: any) => void) {
|
|
var lastJavascript: any | null = null;
|
|
var lastHtml: any | null = null;
|
|
var lastCSS: any | null = null;
|
|
|
|
sessionApi.getSessionData(this.getAttribute("sessionId")?.toString()?? "", (data) => {
|
|
for (var i = data.length - 1; i >= 0; i--) {
|
|
var dataPoint = data[i];
|
|
if (!lastJavascript && dataPoint.type == 0) {
|
|
lastJavascript = dataPoint;
|
|
}
|
|
else if (!lastHtml && dataPoint.type == 1) {
|
|
lastHtml = dataPoint;
|
|
}
|
|
else if (!lastCSS && dataPoint.type == 2) {
|
|
lastCSS = dataPoint;
|
|
}
|
|
}
|
|
|
|
onGet(lastJavascript, lastHtml, lastCSS);
|
|
});
|
|
}
|
|
|
|
itemClicked() {
|
|
if (!this.intervalHandle) {
|
|
var containers = <HTMLElement>document.getElementsByClassName("code-editor-containers")[0];
|
|
var outputframe = <HTMLElement>document.getElementsByClassName("output-frame-container")[0];
|
|
|
|
containers.style.display = "block";
|
|
outputframe.style.display = "block";
|
|
|
|
navigateTo("/sessions/" + this.getAttribute("sessionId")?.toString()?? "");
|
|
|
|
var children = this.parentElement?.children;
|
|
|
|
if (children) {
|
|
for (let i = 0; i < children.length; i++) {
|
|
const child = <SessionListItem>children[i];
|
|
if (child != this) {
|
|
child.stopUpdate();
|
|
}
|
|
else {
|
|
child.startUpdate();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
this.stopUpdate();
|
|
}
|
|
}
|
|
} |