diff --git a/ui/src/components/kv-view/kv-view.css.ts b/ui/src/components/kv-view/kv-view.css.ts deleted file mode 100644 index 406d692..0000000 --- a/ui/src/components/kv-view/kv-view.css.ts +++ /dev/null @@ -1,74 +0,0 @@ -import {css} from "lit"; - -export default css` - table { - width: 100%; - border-spacing: 0; - } - - .kv-table > table > thead > tr > th { - font-family: var(--font-stack-paragraph); - background: var(--kv-table-header-background); - text-align: left; - padding: 10px; - color: var(--darker-font-color); - font-weight: normal; - border-bottom: 1px dashed var(--secondary-color-dimmer); - } - - .kv-table > table > thead > tr > th:first-child { - font-weight: bold; - font-size: 0.9em; - font-family: var(--mono-font-stack); - background: var(--kv-table-header-background-reversed); - text-align: right; - color: var(--secondary-color); - padding-right: 10px; - } - - .kv-table > table > tbody > tr > td { - font-family: var(--mono-font-stack); - padding: 10px 0 10px 10px; - font-size: 1em; - border-bottom: 1px dashed var(--secondary-color-dimmer); - } - - .kv-table > table > tbody > tr > td:first-child > code { - color: var(--primary-color); - font-weight: bold; - font-size: 1em; - } - - .kv-table > table > tbody > tr > td:first-child { - width: 180px; - text-align: right; - padding-right: 10px; - border-right: 1px dashed var(--secondary-color-dimmer); - } - - table > tbody > tr > td > a { - text-decoration: underline; - } - - table > tbody > tr > td > code { - color: var(--secondary-color); - font-weight: normal; - font-size: 1em; - } - - - pre { - word-wrap: break-word; - white-space: pre-wrap; - max-width: 760px; - overflow-x: auto; - } - - pre > code { - word-wrap: break-word; - white-space: pre-wrap; - } - - - -` \ No newline at end of file diff --git a/ui/src/components/kv-view/kv-view.ts b/ui/src/components/kv-view/kv-view.ts deleted file mode 100644 index d535279..0000000 --- a/ui/src/components/kv-view/kv-view.ts +++ /dev/null @@ -1,90 +0,0 @@ -import {customElement, state, property} from "lit/decorators.js"; -import {map} from "lit/directives/map.js"; - -import {LitElement, TemplateResult} from "lit"; -import {html} from "lit"; -import kvViewComponentCss from "./kv-view.css"; - -import Prism from 'prismjs'; -import 'prismjs/components/prism-json'; -import 'prismjs/themes/prism-okaidia.css'; -import {unsafeHTML} from "lit/directives/unsafe-html.js"; -import prismCss from "@/components/prism.css"; -import sharedCss from "@/components/shared.css"; - -@customElement('http-kv-view') -export class KVViewComponent extends LitElement { - - static styles = [prismCss, sharedCss, kvViewComponentCss]; - - @property() - keyLabel: string = 'Header'; - - @property() - valueLabel: string = 'Value'; - - @state() - private _data: Map<string, any>; - - constructor() { - super(); - this._data = new Map<string, any>(); - } - - set data(value: Map<string, any>) { - if (value && value.size > 0) { - this._data = value; - } - } - - render() { - let headerData: TemplateResult - if (this._data) { - headerData = html` - ${map(this._data, (i) => { - if (typeof i[1] === 'object') { - return html` - <tr> - <td><code>${i[0]}</code></td> - <td> - <pre style=""><code style="white-space: pre-wrap; word-wrap: break-word;">${unsafeHTML(Prism.highlight(JSON.stringify(i[1], null, 2), Prism.languages['json'], 'json'))}</pre></code> - </td> - </tr>` - } - - return html` - <tr> - <td><code>${i[0]}</code></td> - <td>${i[1]}</td> - </tr>` - })} - ` - } - - const noData: TemplateResult = html` - <div class="empty-data"> - <sl-icon name="mic-mute" class="mute-icon"></sl-icon> - <br/> - No data extracted - </div>`; - - const table: TemplateResult = html` - <div class="kv-table"> - <table> - <thead> - <tr> - <th>${this.keyLabel}</th> - <th>${this.valueLabel}</th> - </tr> - </thead> - <tbody> - ${headerData} - </tbody> - </table> - </div> - `; - - const output = this._data?.size > 0 ? table : noData; - return html`${output}`; - } -} \ No newline at end of file diff --git a/ui/src/components/property-view/property-view.css.ts b/ui/src/components/property-view/property-view.css.ts deleted file mode 100644 index 3bafdd9..0000000 --- a/ui/src/components/property-view/property-view.css.ts +++ /dev/null @@ -1,99 +0,0 @@ -import {css} from "lit"; - -export default css` - .prop-type-table > table > thead > tr > th { - font-family: var(--font-stack-paragraph); - background-color: var(--table-header-background-solid); - text-align: left; - padding: 10px; - color: var(--darker-font-color); - font-weight: normal; - border-bottom: 1px dashed var(--secondary-color-dimmer); - } - - .prop-type-table > table > thead > tr > th:first-child { - background: var(--kv-table-header-background-reversed); - text-align: right; - color: var(--secondary-color); - padding-right: 10px; - } - - .prop-type-table > table > thead > tr > th:nth-child(2) { - text-align: center; - color: var(--font-color); - } - - .prop-type-table > table > thead > tr > th:last-child { - background: var(--kv-table-header-background); - } - - .prop-type-table > table > tbody > tr > td { - font-family: var(--font-stack-paragraph); - color: var(--darker-font-color); - padding: 10px 0 10px 10px; - border-bottom: 1px dashed var(--secondary-color-dimmer); - } - - .prop-type-table > table > tbody > tr > td:first-child > code { - color: var(--primary-color); - font-weight: bold; - font-size: 1em; - } - - .prop-type-table > table > tbody > tr > td:first-child { - width: 120px; - text-align: right; - padding-right: 10px; - border-right: 1px dashed var(--secondary-color-dimmer); - } - - .prop-type-table > table > tbody > tr > td:nth-child(2) { - width: 10px; - color: var(--font-color); - font-family: var(--font-stack); - font-size: 0.9em; - font-style: italic; - text-align: center; - padding-right: 10px; - border-right: 1px dashed var(--secondary-color-dimmer); - } - - table { - width: 100%; - border-spacing: 0; - } - - table > tbody > tr > td > a { - text-decoration: underline; - } - - table > tbody > tr > td > code { - color: var(--secondary-color); - font-weight: normal; - font-size: 1em; - } - - .file-item { - display: block; - } - - .file-name { - font-weight: bold; - display: block; - } - - .file-header { - color: var(--dark-font-color); - display: inline-block; - } - - .file-header > strong { - color: var(--darker-font-color); - - } - - hr { - margin-bottom: 10px; - } - -` \ No newline at end of file diff --git a/ui/src/components/property-view/property-view.ts b/ui/src/components/property-view/property-view.ts deleted file mode 100644 index 8785ee3..0000000 --- a/ui/src/components/property-view/property-view.ts +++ /dev/null @@ -1,112 +0,0 @@ -import {customElement, state, property} from "lit/decorators.js"; -import {map} from "lit/directives/map.js"; - -import {LitElement, TemplateResult} from "lit"; -import {html} from "lit"; - -import Prism from 'prismjs'; -import 'prismjs/components/prism-json'; -import 'prismjs/themes/prism-okaidia.css'; -import {unsafeHTML} from "lit/directives/unsafe-html.js"; -import prismCss from "@/components/prism.css"; -import sharedCss from "@/components/shared.css"; -import propertyViewComponentCss from "./property-view.css"; -import {FormDataEntry, FormPart} from "@/model/extract_content_type"; - -export interface Property { - name: string; - value?: string[]; - headers?: Map<string, string[]> - files?: FormPart[]; - type: string; -} - -@customElement('http-property-view') -export class PropertyViewComponent extends LitElement { - - static styles = [prismCss, sharedCss, propertyViewComponentCss]; - - @property() - propertyLabel: string = 'Property'; - - @property() - typeLabel: string = 'Type'; - - @property() - valueLabel: string = 'Value'; - - @state() - private _data: Property[]; - - constructor() { - super(); - this._data = []; - } - - set data(value: Property[]) { - this._data = value; - } - - render() { - let headerData: TemplateResult - if (this._data) { - headerData = html` - ${map(this._data, (i) => { - if (i.type !== 'field') { - return html` - <tr> - <td><code>${i.name}</code></td> - <td><code>${i.type}</code></td> - <td>${i.files.map((f) => { - return html` - <span class="file-name">${f.name}</span> - <hr/> - ${Object.keys(f.headers).map((key, index) => { - return html` - <span class="file-header">${key} - : <strong>${f.headers[key]}</strong></span>` - })}</td> - </tr>` - })} - </td>` - } - - return html` - <tr> - <td><code>${i.name}</code></td> - <td>${i.type}</td> - <td>${i.value}</td> - </tr>` - })} - ` - } - - const noData: TemplateResult = html` - <div class="empty-data"> - <sl-icon name="mic-mute" class="mute-icon"></sl-icon> - <br/> - No data extracted - </div>`; - - const table: TemplateResult = html` - <div class="prop-type-table"> - <table> - <thead> - <tr> - <th>${this.propertyLabel}</th> - <th>${this.typeLabel}</th> - <th>${this.valueLabel}</th> - </tr> - </thead> - <tbody> - ${headerData} - </tbody> - </table> - </div> - `; - - const output = this._data?.length > 0 ? table : noData; - - return html`${output}`; - } -} \ No newline at end of file diff --git a/ui/src/components/test.ts b/ui/src/components/test.ts deleted file mode 100644 index e69de29..0000000 diff --git a/ui/src/components/timeline/timeline-item.css.ts b/ui/src/components/timeline/timeline-item.css.ts deleted file mode 100644 index 02ecd27..0000000 --- a/ui/src/components/timeline/timeline-item.css.ts +++ /dev/null @@ -1,50 +0,0 @@ -import {css} from "lit"; - -export default css` - :host { - display: flex; - position: relative; - } - - .icon { - width: 100px; - min-height: 80px; - position: relative; - } - - .icon:first-child { - min-height: 20px; - } - .icon > .timeline { - width: 40px; - height: 100%; - border-right: 2px solid var(--secondary-color); - position: absolute; - } - - .timeline-icon { - width: 20px; - height: 20px; - border-radius: 15px; - margin: 0 10px; - text-align: center; - font-size: 20px; - position: absolute; - top: 10px; - } - - .content { - flex-grow: 2; - height: 50px; - } - - .request-time { - font-size: 0.7em; - color: var(--dark-font-color); - position: absolute; - left: 50px; - top: 15px; - display: block; - } - -` diff --git a/ui/src/components/timeline/timeline-item.ts b/ui/src/components/timeline/timeline-item.ts deleted file mode 100644 index 8d52a50..0000000 --- a/ui/src/components/timeline/timeline-item.ts +++ /dev/null @@ -1,28 +0,0 @@ -import {customElement} from "lit/decorators.js"; -import {html, LitElement} from "lit"; -import wiretapTimelineItemCss from "./timeline-item.css"; - -@customElement('wiretap-timeline-item') -export class TimelineItemComponent extends LitElement { - - static styles = wiretapTimelineItemCss - - constructor() { - super(); - } - - render() { - - return html` - <div class="icon"> - <div class="timeline"></div> - <div class="timeline-icon"> - <slot name="icon"></slot> - </div> - </div> - <div class="content"> - <slot name="time" class="request-time"></slot> - <slot name="content" class="timeline-content"></slot> - </div>` - } -} \ No newline at end of file diff --git a/ui/src/components/timeline/timeline.css.ts b/ui/src/components/timeline/timeline.css.ts deleted file mode 100644 index dd18512..0000000 --- a/ui/src/components/timeline/timeline.css.ts +++ /dev/null @@ -1,45 +0,0 @@ -import {css} from "lit"; - -export default css` - - wiretap-timeline-item { - width: 100%; - margin-bottom: 20px; - } - - .start { - position: relative; - width: 100%; - height: 20px; - } - - .ball-start { - width: 15px; - height: 15px; - border-radius: 10px; - background-color: var(--secondary-color); - position: absolute; - left: 33px; - top: 5px; - z-index: 10; - } - - .ball-end { - width: 15px; - height: 15px; - border-radius: 10px; - background-color: var(--secondary-color); - position: absolute; - left: 33px; - top: 0; - z-index: 10; - margin-bottom: 20px; - } - - .end { - position: relative; - width: 100%; - height: 20px; - } - -` \ No newline at end of file diff --git a/ui/src/components/timeline/timeline.ts b/ui/src/components/timeline/timeline.ts deleted file mode 100644 index 31526a7..0000000 --- a/ui/src/components/timeline/timeline.ts +++ /dev/null @@ -1,25 +0,0 @@ -import {customElement} from "lit/decorators.js"; -import {html, LitElement} from "lit"; -import timelineCss from "@/components/timeline/timeline.css"; - -@customElement('wiretap-timeline') -export class TimelineComponent extends LitElement { - - static styles = timelineCss; - - constructor() { - super(); - } - - render() { - return html` - <div class="start"> - <div class="ball-start"></div> - </div> - <slot></slot> - <div class="end"> - <div class="ball-end"></div> - </div> - ` - } -} \ No newline at end of file