archivalo-oss/replayweb.page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix missed rename, and improve types (#276)

Browse Source 
Fixes a missed rename, in `src/item-index.ts`: I'd renamed `coll` to
`item` but missed updating it in the `update` method's
`changedProperties` map.

This PR fixes that, and adds better typing to all of the instances of
`changedProperties` by using
[`PropertyValues<this>`](https://lit.dev/docs/components/lifecycle/#typescript-types-for-changedproperties),
and implementing class properties for missing Lit properties.
This commit is contained in:
Emma Segal-Grossman
2024-01-05 18:32:22 -08:00
committed by GitHub
parent 3bee02bd89
commit a40471128f
15 changed files with 229 additions and 396 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/appmain.ts
+8 -2
View File
@@ -1,4 +1,10 @@
import { LitElement, html, css, type TemplateResult } from "lit";
import {
LitElement,
html,
css,
type TemplateResult,
type PropertyValues,
} from "lit";
import { customElement, property } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import {
@@ -467,7 +473,7 @@ export class ReplayWebApp extends LitElement {
});
}
updated(changedProperties) {
updated(changedProperties: PropertyValues<this>) {
if (changedProperties.has("sourceUrl")) {
this.collTitle = null;
}
src/chooser.ts
+2 -2
View File
@@ -1,4 +1,4 @@
import { LitElement, html, css } from "lit";
import { LitElement, html, css, type PropertyValues } from "lit";
import { IS_APP, wrapCss } from "./misc";
import fasUpload from "@fortawesome/fontawesome-free/svgs/solid/upload.svg";
@@ -47,7 +47,7 @@ export class Chooser extends LitElement {
fileHandle?: FileSystemFileHandle;
updated(changedProperties) {
updated(changedProperties: PropertyValues<this>) {
if (changedProperties.has("droppedFile") && this.droppedFile) {
this.onDropFile();
}
src/embed-receipt.ts
+4 -1
View File
@@ -14,7 +14,10 @@ import type { Item as ItemType } from "./types";
// ===========================================================================
export class RWPEmbedReceipt extends LitElement {
@property({ type: Object }) collInfo: ItemType | null = null;
@property({ type: Object }) collInfo:
| ItemType
| null
| Record<string, never> = null;
@property({ type: Object }) appLogo = null;
@property({ type: String }) ts: string | null = null;
@property({ type: String }) url: string | null = null;
src/embed.ts
+8 -2
View File
@@ -1,4 +1,10 @@
import { LitElement, html, css, TemplateResult } from "lit";
import {
LitElement,
html,
css,
TemplateResult,
type PropertyValues,
} from "lit";
import { ifDefined } from "lit/directives/if-defined.js";
import { wrapCss, rwpLogo } from "./misc";
@@ -197,7 +203,7 @@ class Embed extends LitElement {
}
}
updated(changedProperties) {
updated(changedProperties: PropertyValues<this>) {
if (
changedProperties.has("url") ||
changedProperties.has("ts") ||
src/gdrive.ts
+37 -64
View File
@@ -1,19 +1,20 @@
import { LitElement, html, css } from "lit";
import { LitElement, html, css, type PropertyValues } from "lit";
import { wrapCss } from "./misc";
import fabGoogleDrive from "@fortawesome/fontawesome-free/svgs/brands/google-drive.svg";
// ===========================================================================
class GDrive extends LitElement {
state: string;
sourceUrl: string;
scriptLoaded: boolean;
error: boolean;
reauth?: boolean;
constructor() {
super();
// @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'.
this.state = "trypublic";
// @ts-expect-error - TS2339 - Property 'sourceUrl' does not exist on type 'GDrive'.
this.sourceUrl = "";
// @ts-expect-error - TS2339 - Property 'scriptLoaded' does not exist on type 'GDrive'.
this.scriptLoaded = false;
// @ts-expect-error - TS2339 - Property 'error' does not exist on type 'GDrive'.
this.error = false;
}
@@ -26,15 +27,12 @@ class GDrive extends LitElement {
};
}
updated(changedProperties) {
updated(changedProperties: PropertyValues<this>) {
if (changedProperties.has("sourceUrl")) {
// @ts-expect-error - TS2339 - Property 'error' does not exist on type 'GDrive'.
this.error = false;
// @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'.
this.state = "trypublic";
this.tryPublicAccess().then((result) => {
if (!result) {
// @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'.
this.state = "tryauto";
this.requestUpdate();
}
@@ -44,19 +42,16 @@ class GDrive extends LitElement {
async tryPublicAccess() {
try {
// @ts-expect-error - TS2339 - Property 'sourceUrl' does not exist on type 'GDrive'.
const sourceUrl = this.sourceUrl;
const fileId = sourceUrl.slice("googledrive://".length);
const publicCheckUrl = `${__HELPER_PROXY__}/g/${fileId}`;
let resp = null;
let resp: Response | null = null;
try {
// @ts-expect-error - TS2322 - Type 'Response' is not assignable to type 'null'.
resp = await fetch(publicCheckUrl);
} catch (e) {
return false;
}
// @ts-expect-error - TS2531 - Object is possibly 'null'.
const json = await resp.json();
if (!json.url || !json.name || !json.size) {
return false;
@@ -72,10 +67,8 @@ class GDrive extends LitElement {
try {
const abort = new AbortController();
const signal = abort.signal;
// @ts-expect-error - TS2322 - Type 'Response' is not assignable to type 'null'.
resp = await fetch(publicUrl, { signal });
abort.abort();
// @ts-expect-error - TS2531 - Object is possibly 'null'.
if (resp.status != 200) {
return false;
}
@@ -99,13 +92,10 @@ class GDrive extends LitElement {
}
onLoad() {
// @ts-expect-error - TS2339 - Property 'scriptLoaded' does not exist on type 'GDrive'.
this.scriptLoaded = true;
this.gauth("none", (response) => {
if (response.error) {
// @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'.
if (this.state !== "implicitonly") {
// @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'.
this.state = "trymanual";
}
} else {
@@ -123,7 +113,6 @@ class GDrive extends LitElement {
}
async authed(response) {
// @ts-expect-error - TS2339 - Property 'sourceUrl' does not exist on type 'GDrive'.
const sourceUrl = this.sourceUrl;
const fileId = sourceUrl.slice("googledrive://".length);
const metadataUrl = `https://www.googleapis.com/drive/v3/files/${fileId}`;
@@ -136,17 +125,13 @@ class GDrive extends LitElement {
);
if (resp.status === 404 || resp.status == 403) {
// @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'.
if (this.state !== "implicitonly") {
// @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'.
this.state = "trymanual";
}
// @ts-expect-error - TS2339 - Property 'error' does not exist on type 'GDrive'.
this.error = true;
return;
}
// @ts-expect-error - TS2339 - Property 'error' does not exist on type 'GDrive'.
this.error = false;
const metadata = await resp.json();
@@ -166,48 +151,38 @@ class GDrive extends LitElement {
render() {
return html` ${this.script()}
${
// @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'.
this.state !== "trymanual"
? html` <p>Connecting to Google Drive...</p> `
: html`
${
// @ts-expect-error - TS2339 - Property 'error' does not exist on type 'GDrive'.
this.error
? html`
<div class="error has-text-danger">
<p>
${
// @ts-expect-error - TS2339 - Property 'reauth' does not exist on type 'GDrive'.
this.reauth
? "Some resources are loaded on demand from Google Drive, which requires reauthorization."
: "Could not access this file with the current Google Drive account."
}
</p>
<p>
If you have multiple Google Drive accounts, be sure to
select the correct one.
</p>
</div>
<br />
`
: ""
}
<button
class="button is-warning is-rounded"
@click="${this.onClickAuth}"
>
<span class="icon"
><fa-icon .svg="${fabGoogleDrive}"></fa-icon
></span>
<span>Authorize Google Drive</span>
</button>
`
}`;
${this.state !== "trymanual"
? html` <p>Connecting to Google Drive...</p> `
: html`
${this.error
? html`
<div class="error has-text-danger">
<p>
${this.reauth
? "Some resources are loaded on demand from Google Drive, which requires reauthorization."
: "Could not access this file with the current Google Drive account."}
</p>
<p>
If you have multiple Google Drive accounts, be sure to
select the correct one.
</p>
</div>
<br />
`
: ""}
<button
class="button is-warning is-rounded"
@click="${this.onClickAuth}"
>
<span class="icon"
><fa-icon .svg="${fabGoogleDrive}"></fa-icon
></span>
<span>Authorize Google Drive</span>
</button>
`}`;
}
script() {
// @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'. | TS2339 - Property 'scriptLoaded' does not exist on type 'GDrive'.
if (this.state === "trypublic" || this.scriptLoaded) {
return html``;
}
@@ -218,9 +193,7 @@ class GDrive extends LitElement {
}
gauth(prompt, callback) {
// @ts-expect-error - TS2339 - Property 'gapi' does not exist on type 'Window & typeof globalThis'.
self.gapi.load("auth2", () => {
// @ts-expect-error - TS2339 - Property 'gapi' does not exist on type 'Window & typeof globalThis'.
self.gapi.auth2.authorize(
{
client_id: __GDRIVE_CLIENT_ID__,
src/index.d.ts
Vendored
+7
View File
@@ -5,6 +5,9 @@ declare const __HELPER_PROXY__: string;
declare const __GDRIVE_CLIENT_ID__: string;
declare const __VERSION__: string;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
type TODOFixMe = any;
// showOpenFilePicker doesn't yet exist in Typescript's DOM lib
// see https://developer.mozilla.org/en-US/docs/Web/API/Window/showOpenFilePicker for details
interface Window {
@@ -12,3 +15,7 @@ interface Window {
types: { description: string; accept: Record<string, string[]> }[];
}) => Promise<[FileSystemFileHandle]>;
}
interface Window {
gapi: TODOFixMe;
}
src/item-index.ts
+6 -9
View File
@@ -1,4 +1,4 @@
import { LitElement, html, css } from "lit";
import { LitElement, html, css, type PropertyValues } from "lit";
import { property, state } from "lit/decorators.js";
import { wrapCss, apiPrefix } from "./misc";
@@ -20,16 +20,13 @@ class ItemIndex extends LitElement {
query = "";
@property({ type: Array })
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- TODO fixme
filteredItems: any[] = [];
filteredItems: Item[] = [];
@property({ type: Array })
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- TODO fixme
sortedItems: any[] | null = null;
sortedItems: Item[] = [];
@property({ type: Boolean })
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- TODO fixme
hideHeader: any = null;
hideHeader: boolean = false;
@property({ type: String })
dateName = "Date Loaded";
@@ -66,11 +63,11 @@ class ItemIndex extends LitElement {
this.loadItems();
}
updated(changedProperties) {
updated(changedProperties: PropertyValues<this>) {
if (changedProperties.has("hideHeader")) {
localStorage.setItem("index:hideHeader", this.hideHeader ? "1" : "0");
}
if (changedProperties.has("colls") || changedProperties.has("query")) {
if (changedProperties.has("items") || changedProperties.has("query")) {
this.filter();
}
}
src/item.ts
+4 -4
View File
@@ -1,4 +1,4 @@
import { LitElement, html, css } from "lit";
import { LitElement, html, css, type PropertyValues } from "lit";
import { property } from "lit/decorators.js";
import { ref, createRef, type Ref } from "lit/directives/ref.js";
import type {
@@ -51,7 +51,7 @@ import fasCaretDown from "@fortawesome/fontawesome-free/svgs/solid/caret-down.sv
import { RWPEmbedReceipt } from "./embed-receipt";
import Split from "split.js";
import type { Item as ItemInfo } from "./types";
import type { Item as ItemType } from "./types";
import type { Replay } from "./replay";
import { ifDefined } from "lit/directives/if-defined.js";
@@ -93,7 +93,7 @@ class Item extends LitElement {
showSidebar: boolean | null = null;
@property({ type: Object, attribute: false })
itemInfo: ItemInfo | Record<string, never> | null = null;
itemInfo: ItemType | Record<string, never> | null = null;
@property({ type: String })
item = "";
@@ -265,7 +265,7 @@ class Item extends LitElement {
}
}
updated(changedProperties) {
updated(changedProperties: PropertyValues<this>) {
// if (changedProperties.has("url") || changedProperties.has("ts")) {
// if (this.url.startsWith("rwp?")) {
// this.tabData = Object.fromEntries(new URLSearchParams(this.url.slice(4)).entries());
src/loader.ts
+2 -2
View File
@@ -1,4 +1,4 @@
import { LitElement, html, css } from "lit";
import { LitElement, html, css, type PropertyValues } from "lit";
import { wrapCss } from "./misc";
import prettyBytes from "pretty-bytes";
@@ -258,7 +258,7 @@ You can select a file to upload from the main page by clicking the 'Choose File.
}
}
updated(changedProperties) {
updated(changedProperties: PropertyValues<this>) {
if (
(this.sourceUrl && changedProperties.has("sourceUrl")) ||
changedProperties.has("tryFileHandle")
src/pageentry.ts
+2 -2
View File
@@ -1,6 +1,6 @@
import prettyBytes from "pretty-bytes";
import { LitElement, html, css, unsafeCSS } from "lit";
import { LitElement, html, css, unsafeCSS, type PropertyValues } from "lit";
import { property, state } from "lit/decorators.js";
import "keyword-mark-element/lib/keyword-mark.js";
@@ -183,7 +183,7 @@ class PageEntry extends LitElement {
`;
}
updated(changedProperties) {
updated(changedProperties: PropertyValues<this>) {
if (changedProperties.has("page") || changedProperties.has("query")) {
this.updateSnippet();
this.deleting = false;
src/pages.ts
-2
View File
@@ -165,9 +165,7 @@ class Pages extends LitElement {
}
const sorter = this.renderRoot.querySelector("wr-sorter") as Sorter;
if (sorter) {
// @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
sorter.sortKey = this.sortKey;
// @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
sorter.sortDesc = this.sortDesc;
}
}
src/replay.ts
+2 -2
View File
@@ -1,4 +1,4 @@
import { LitElement, html, css } from "lit";
import { LitElement, html, css, type PropertyValues } from "lit";
import { property } from "lit/decorators.js";
import { wrapCss, rwpLogo } from "./misc";
@@ -95,7 +95,7 @@ class Replay extends LitElement {
: "";
}
updated(changedProperties) {
updated(changedProperties: PropertyValues<this>) {
if (
changedProperties.has("sourceUrl") ||
changedProperties.has("collInfo")
src/sorter.ts
+23 -55
View File
@@ -1,26 +1,28 @@
import { LitElement, html, css } from "lit";
import { LitElement, html, css, type PropertyValues } from "lit";
import { wrapCss } from "./misc";
import fasSortDown from "@fortawesome/fontawesome-free/svgs/solid/sort-down.svg";
import fasSortUp from "@fortawesome/fontawesome-free/svgs/solid/sort-up.svg";
// ===========================================================================
class Sorter extends LitElement {
class Sorter<T = unknown> extends LitElement {
sortedData: T[];
data: T[];
pageResults: number;
numResults: number;
sortKey: string | null;
sortDesc: boolean | null;
sortKeys: { key: string; name: string }[] = [];
constructor() {
super();
// @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'?
this.sortedData = [];
// @ts-expect-error - TS2339 - Property 'data' does not exist on type 'Sorter'.
this.data = [];
// @ts-expect-error - TS2339 - Property 'pageResults' does not exist on type 'Sorter'.
this.pageResults = 0;
// @ts-expect-error - TS2339 - Property 'numResults' does not exist on type 'Sorter'.
this.numResults = 0;
// @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
this.sortKey = null;
// @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
this.sortDesc = null;
}
@@ -42,31 +44,25 @@ class Sorter extends LitElement {
if (this.id) {
const sortKey = localStorage.getItem(`${this.id}:sortKey`);
if (sortKey !== null) {
// @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
this.sortKey = sortKey;
}
const sortDesc = localStorage.getItem(`${this.id}:sortDesc`);
if (sortDesc !== null) {
// @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
this.sortDesc = sortDesc === "1";
}
}
}
updated(changedProperties) {
updated(changedProperties: PropertyValues<this>) {
const keyChanged = changedProperties.has("sortKey");
const descChanged = changedProperties.has("sortDesc");
const dataChanged = changedProperties.has("data");
// @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
if (keyChanged && this.sortKey !== null) {
// @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
localStorage.setItem(`${this.id}:sortKey`, this.sortKey);
}
// @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
if (descChanged && this.sortDesc !== null) {
// @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
localStorage.setItem(`${this.id}:sortDesc`, this.sortDesc ? "1" : "0");
}
@@ -76,28 +72,20 @@ class Sorter extends LitElement {
}
sortData() {
// @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'? | TS2339 - Property 'data' does not exist on type 'Sorter'.
this.sortedData = [...this.data];
// @ts-expect-error - TS2339 - Property 'numResults' does not exist on type 'Sorter'. | TS2339 - Property 'pageResults' does not exist on type 'Sorter'.
this.numResults = this.pageResults;
// @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
if (this.sortKey === "") {
// @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
if ((this.sortKey == null || this.sortKey) === "") {
if (this.sortDesc) {
// @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'?
this.sortedData.reverse();
}
} else {
// @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'?
this.sortedData.sort((first, second) => {
// @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'. | TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
if (first[this.sortKey] === second[this.sortKey]) {
if (first[this.sortKey!] === second[this.sortKey!]) {
return 0;
}
// @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'. | TS2339 - Property 'sortKey' does not exist on type 'Sorter'. | TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
return this.sortDesc == first[this.sortKey] < second[this.sortKey]
return this.sortDesc == first[this.sortKey!] < second[this.sortKey!]
? 1
: -1;
});
@@ -108,27 +96,20 @@ class Sorter extends LitElement {
sendSortChanged() {
const detail = {
// @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
sortKey: this.sortKey,
// @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
sortDesc: this.sortDesc,
// @ts-expect-error - TS2339 - Property 'numResults' does not exist on type 'Sorter'.
sortedData: this.numResults
? // @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'? | TS2339 - Property 'numResults' does not exist on type 'Sorter'.
this.sortedData.slice(0, this.numResults)
: // @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'?
this.sortedData,
? this.sortedData.slice(0, this.numResults)
: this.sortedData,
};
this.dispatchEvent(new CustomEvent("sort-changed", { detail }));
}
getMore(more = 100) {
// @ts-expect-error - TS2339 - Property 'pageResults' does not exist on type 'Sorter'. | TS2339 - Property 'numResults' does not exist on type 'Sorter'. | TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'?
if (this.pageResults && this.numResults >= this.sortedData.length) {
return;
}
// @ts-expect-error - TS2339 - Property 'numResults' does not exist on type 'Sorter'.
this.numResults += more;
this.sendSortChanged();
}
@@ -149,37 +130,24 @@ class Sorter extends LitElement {
return html`
<div class="select is-small">
<select id="sort-select" @change=${(e) =>
// @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
(this.sortKey = e.currentTarget.value)}>
${
// @ts-expect-error - TS2339 - Property 'sortKeys' does not exist on type 'Sorter'.
this.sortKeys.map(
(sort) => html`
<option
value="${sort.key}"
?selected="${
// @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
sort.key === this.sortKey
}"
>
Sort By: ${sort.name}
</option>
`,
)
}
${this.sortKeys.map(
(sort) => html`
<option value="${sort.key}" ?selected="${sort.key === this.sortKey}">
Sort By: ${sort.name}
</option>
`,
)}
</select>
</div>
<button @click=${() =>
// @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'. | TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
(this.sortDesc = !this.sortDesc)} class="button is-small">
<span>Order:</span>
<span class="is-sr-only">${
// @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
this.sortDesc ? "Ascending" : "Descending"
}</span>
<span class="icon"><fa-icon aria-hidden="true" .svg=${
// @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
this.sortDesc ? fasSortUp : fasSortDown
}></span>
</button>`;
src/story.ts
+16 -44
View File
@@ -1,4 +1,4 @@
import { LitElement, html, css, unsafeCSS } from "lit";
import { LitElement, html, css, unsafeCSS, type PropertyValues } from "lit";
import { wrapCss } from "./misc";
import { unsafeHTML } from "lit/directives/unsafe-html.js";
@@ -7,32 +7,33 @@ import { marked } from "marked";
import { getTS, getReplayLink } from "./pageutils";
import Split from "split.js";
import { ItemInfo } from "./item-info";
// ===========================================================================
class Story extends LitElement {
collInfo: ItemInfo | Record<string, never> | null;
curatedPageMap: Record<string, unknown[]>;
currList: number;
active: boolean;
lastST: number;
clickTime: number;
isSidebar: boolean;
splitDirection: boolean | "vertical" | "horizontal";
constructor() {
super();
// @ts-expect-error - TS2339 - Property 'collInfo' does not exist on type 'Story'.
this.collInfo = null;
// @ts-expect-error - TS2339 - Property 'curatedPageMap' does not exist on type 'Story'.
this.curatedPageMap = {};
// @ts-expect-error - TS2339 - Property 'currList' does not exist on type 'Story'.
this.currList = 0;
// @ts-expect-error - TS2339 - Property 'active' does not exist on type 'Story'.
this.active = false;
// @ts-expect-error - TS2339 - Property 'lastST' does not exist on type 'Story'.
this.lastST = 0;
// @ts-expect-error - TS2339 - Property 'clickTime' does not exist on type 'Story'.
this.clickTime = 0;
// @ts-expect-error - TS2339 - Property 'isSidebar' does not exist on type 'Story'.
this.isSidebar = false;
// @ts-expect-error - TS2339 - Property 'splitDirection' does not exist on type 'Story'.
this.splitDirection = false;
}
@@ -52,9 +53,7 @@ class Story extends LitElement {
}
recalcSplitter(width) {
// @ts-expect-error - TS2339 - Property 'splitDirection' does not exist on type 'Story'.
this.splitDirection =
// @ts-expect-error - TS2339 - Property 'isSidebar' does not exist on type 'Story'.
this.isSidebar || width < 769 ? "vertical" : "horizontal";
}
@@ -70,7 +69,7 @@ class Story extends LitElement {
this.obs.observe(this);
}
updated(changedProperties) {
updated(changedProperties: PropertyValues<this>) {
if (changedProperties.has("collInfo")) {
this.doLoadCurated();
}
@@ -86,10 +85,8 @@ class Story extends LitElement {
this.configureSplitter();
}
// @ts-expect-error - TS2339 - Property 'active' does not exist on type 'Story'.
if (changedProperties.has("currList") && this.active) {
this.sendChangeEvent({
// @ts-expect-error - TS2339 - Property 'currList' does not exist on type 'Story'.
currList: this.currList,
});
}
@@ -118,7 +115,6 @@ class Story extends LitElement {
gutterSize: 4,
// @ts-expect-error - TS2339 - Property 'splitDirection' does not exist on type 'Story'.
direction: this.splitDirection,
};
@@ -128,7 +124,6 @@ class Story extends LitElement {
}
async doLoadCurated() {
// @ts-expect-error - TS2339 - Property 'curatedPageMap' does not exist on type 'Story'.
this.curatedPageMap = {};
const pageMap = {};
@@ -140,9 +135,7 @@ class Story extends LitElement {
// @ts-expect-error - TS2339 - Property 'collInfo' does not exist on type 'Story'.
for (const curated of this.collInfo.curatedPages) {
// @ts-expect-error - TS2339 - Property 'curatedPageMap' does not exist on type 'Story'.
if (!this.curatedPageMap[curated.list]) {
// @ts-expect-error - TS2339 - Property 'curatedPageMap' does not exist on type 'Story'.
this.curatedPageMap[curated.list] = [];
}
const page = curated;
@@ -160,7 +153,6 @@ class Story extends LitElement {
const title = page.title || page.url;
const desc = curated.desc;
// @ts-expect-error - TS2339 - Property 'curatedPageMap' does not exist on type 'Story'.
this.curatedPageMap[curated.list].push({ url, ts, title, desc });
}
@@ -275,23 +267,15 @@ class Story extends LitElement {
}
render() {
// @ts-expect-error - TS2339 - Property 'currList' does not exist on type 'Story'.
const currListNum = this.currList;
return html`
<div
class="is-sr-only"
role="heading"
aria-level="${
// @ts-expect-error - TS2339 - Property 'isSidebar' does not exist on type 'Story'.
this.isSidebar ? "2" : "1"
}"
aria-level="${this.isSidebar ? "2" : "1"}"
>
Story for
${
// @ts-expect-error - TS2339 - Property 'collInfo' does not exist on type 'Story'.
this.collInfo.title
}
Story for ${this.collInfo!.title}
</div>
<div class="columns">
<div class="column sidebar is-one-fifth">
@@ -363,13 +347,9 @@ class Story extends LitElement {
<h3>${list.title}</h3>
<p>${list.desc}</p>
<ol>
${
// @ts-expect-error - TS2339 - Property 'curatedPageMap' does not exist on type 'Story'.
this.curatedPageMap[list.id]
? // @ts-expect-error - TS2339 - Property 'curatedPageMap' does not exist on type 'Story'.
this.curatedPageMap[list.id].map((p) => this.renderCPage(p))
: html``
}
${this.curatedPageMap[list.id]
? this.curatedPageMap[list.id].map((p) => this.renderCPage(p))
: html``}
</ol>
</div>
</article>
@@ -417,7 +397,6 @@ class Story extends LitElement {
onClickScroll(event) {
event.preventDefault();
//this.pageView = false;
// @ts-expect-error - TS2339 - Property 'currList' does not exist on type 'Story'.
this.currList = Number(event.currentTarget.getAttribute("data-list"));
this.scrollToList();
return false;
@@ -427,12 +406,10 @@ class Story extends LitElement {
// lists are 1 based, 0 is header, 1 is first list
// @ts-expect-error - TS2339 - Property 'currList' does not exist on type 'Story'. | TS2339 - Property 'collInfo' does not exist on type 'Story'.
if (this.currList > this.collInfo.lists.length) {
// @ts-expect-error - TS2339 - Property 'currList' does not exist on type 'Story'.
this.currList = 0;
}
const opts = { behavior: "smooth", block: "nearest", inline: "nearest" };
// @ts-expect-error - TS2339 - Property 'clickTime' does not exist on type 'Story'.
this.clickTime = new Date().getTime();
// @ts-expect-error - TS2339 - Property 'getElementById' does not exist on type 'HTMLElement | ShadowRoot'. | TS2339 - Property 'currList' does not exist on type 'Story'.
const curr = this.renderRoot.getElementById("list-" + this.currList);
@@ -454,7 +431,6 @@ class Story extends LitElement {
const target = scrollable.offsetTop;
const currST = scrollable.scrollTop;
// @ts-expect-error - TS2339 - Property 'lastST' does not exist on type 'Story'.
if (currST > this.lastST) {
while (
next.nextElementSibling &&
@@ -470,22 +446,18 @@ class Story extends LitElement {
next = next.previousElementSibling;
}
}
// @ts-expect-error - TS2339 - Property 'lastST' does not exist on type 'Story'.
this.lastST = currST;
if (next && next != curr) {
if (next.id.startsWith("list-")) {
// @ts-expect-error - TS2339 - Property 'currList' does not exist on type 'Story'.
this.currList = Number(next.id.slice(5));
}
}
// @ts-expect-error - TS2339 - Property 'clickTime' does not exist on type 'Story'.
if (new Date().getTime() - this.clickTime < 1000) {
return;
}
const sel = this.renderRoot.querySelector(
// @ts-expect-error - TS2339 - Property 'currList' does not exist on type 'Story'.
`a[data-list="${this.currList}"]`,
);
if (sel) {
src/url-resources.ts
+108 -205
View File
@@ -1,4 +1,4 @@
import { LitElement, html, css } from "lit";
import { LitElement, html, css, type PropertyValues } from "lit";
import { wrapCss, clickOnSpacebarPress } from "./misc";
import { getReplayLink } from "./pageutils";
@@ -6,12 +6,35 @@ import { getReplayLink } from "./pageutils";
import fasSearch from "@fortawesome/fontawesome-free/svgs/solid/search.svg";
import "keyword-mark-element/lib/keyword-mark.js";
import { type Item as ItemType } from "./types";
type URLResource = {
url: string;
mime: string;
status: string;
date: string;
ts: string;
};
// ===========================================================================
/**
* @prop {boolean | undefined} active
*/
class URLResources extends LitElement {
collInfo: ItemType | Record<string, never> | null = null;
isSidebar: boolean;
currMime: string;
query: string;
urlSearchType: string;
filteredResults: URLResource[];
sortedResults: URLResource[];
results: URLResource[];
newQuery: null;
tryMore: boolean;
loading: boolean;
sortKey: string;
sortDesc: boolean;
private _ival?: number;
static get filters() {
return [
{ name: "HTML", filter: "text/html,text/xhtml" },
@@ -58,37 +81,23 @@ class URLResources extends LitElement {
constructor() {
super();
// @ts-expect-error - TS2339 - Property 'collInfo' does not exist on type 'URLResources'.
this.collInfo = null;
// @ts-expect-error - TS2339 - Property 'isSidebar' does not exist on type 'URLResources'.
this.isSidebar = false;
// @ts-expect-error - TS2339 - Property 'currMime' does not exist on type 'URLResources'.
this.currMime = "";
// @ts-expect-error - TS2339 - Property 'query' does not exist on type 'URLResources'.
this.query = "";
// @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'.
this.urlSearchType = "";
// @ts-expect-error - TS2339 - Property 'filteredResults' does not exist on type 'URLResources'.
this.filteredResults = [];
// @ts-expect-error - TS2339 - Property 'sortedResults' does not exist on type 'URLResources'.
this.sortedResults = [];
// @ts-expect-error - TS2339 - Property 'results' does not exist on type 'URLResources'.
this.results = [];
// @ts-expect-error - TS2339 - Property 'newQuery' does not exist on type 'URLResources'.
this.newQuery = null;
// @ts-expect-error - TS2339 - Property 'tryMore' does not exist on type 'URLResources'.
this.tryMore = false;
// @ts-expect-error - TS2339 - Property 'loading' does not exist on type 'URLResources'.
this.loading = false;
// @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'.
this.sortKey = "url";
// @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'.
this.sortDesc = false;
}
@@ -109,24 +118,19 @@ class URLResources extends LitElement {
firstUpdated() {
//this.doLoadResources();
// @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'.
if (this.urlSearchType === "") {
// @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'.
this.urlSearchType = "prefix";
}
}
_timedUpdate() {
// @ts-expect-error - TS2339 - Property 'newQuery' does not exist on type 'URLResources'.
if (this.newQuery !== null) {
// @ts-expect-error - TS2339 - Property 'query' does not exist on type 'URLResources'. | TS2339 - Property 'newQuery' does not exist on type 'URLResources'.
this.query = this.newQuery;
// @ts-expect-error - TS2339 - Property 'newQuery' does not exist on type 'URLResources'.
this.newQuery = null;
}
}
updated(changedProperties) {
updated(changedProperties: PropertyValues<this>) {
if (
changedProperties.has("query") ||
changedProperties.has("urlSearchType") ||
@@ -134,11 +138,8 @@ class URLResources extends LitElement {
) {
this.doLoadResources();
const data = {
// @ts-expect-error - TS2339 - Property 'query' does not exist on type 'URLResources'.
query: this.query,
// @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'.
urlSearchType: this.urlSearchType,
// @ts-expect-error - TS2339 - Property 'currMime' does not exist on type 'URLResources'.
currMime: this.currMime,
};
const replaceLoc =
@@ -156,22 +157,16 @@ class URLResources extends LitElement {
async doLoadResources(isMore = false) {
const count = 100;
// @ts-expect-error - TS2339 - Property 'tryMore' does not exist on type 'URLResources'. | TS2339 - Property 'results' does not exist on type 'URLResources'.
if (isMore && (!this.tryMore || !this.results.length)) {
return;
}
// @ts-expect-error - TS2339 - Property 'loading' does not exist on type 'URLResources'.
if (this.loading) {
return;
}
// @ts-expect-error - TS2339 - Property 'loading' does not exist on type 'URLResources'.
this.loading = true;
// @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'. | TS2339 - Property 'query' does not exist on type 'URLResources'.
let url = this.urlSearchType !== "contains" ? this.query : "";
// @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'.
const prefix = url && this.urlSearchType === "prefix" ? 1 : 0;
// optimization: if not starting with http, likely won't have a match here, so just add https://
@@ -179,78 +174,60 @@ class URLResources extends LitElement {
url = "https://" + url;
}
// @ts-expect-error - TS2339 - Property 'currMime' does not exist on type 'URLResources'.
const mime = this.currMime;
// @ts-expect-error - TS2345 - Argument of type '{ mime: any; url: any; prefix: number; count: number; }' is not assignable to parameter of type 'string | Record<string, string> | URLSearchParams | string[][] | undefined'.
const params = new URLSearchParams({
mime,
url,
prefix,
count,
prefix: String(prefix),
count: String(count),
});
if (isMore) {
// @ts-expect-error - TS2339 - Property 'results' does not exist on type 'URLResources'. | TS2339 - Property 'results' does not exist on type 'URLResources'.
const last = this.results[this.results.length - 1];
params.set("fromMime", last.mime);
params.set("fromUrl", last.url);
params.set("fromStatus", last.status);
// @ts-expect-error - TS2345 - Argument of type 'number' is not assignable to parameter of type 'string'.
params.set("fromTs", new Date(last.date).getTime());
params.set("fromTs", String(new Date(last.date).getTime()));
}
let resp = await fetch(
// @ts-expect-error - TS2339 - Property 'collInfo' does not exist on type 'URLResources'.
`${this.collInfo.apiPrefix}/urls?${params.toString()}`,
const resp = await fetch(
`${this.collInfo!.apiPrefix}/urls?${params.toString()}`,
);
resp = await resp.json();
// @ts-expect-error - TS2339 - Property 'results' does not exist on type 'URLResources'. | TS2339 - Property 'results' does not exist on type 'URLResources'. | TS2551 - Property 'urls' does not exist on type 'Response'. Did you mean 'url'? | TS2551 - Property 'urls' does not exist on type 'Response'. Did you mean 'url'?
this.results = isMore ? this.results.concat(resp.urls) : resp.urls;
const data = await resp.json();
this.results = isMore ? this.results.concat(data.urls) : data.urls;
// can be more than count if multiple mimes
// @ts-expect-error - TS2339 - Property 'tryMore' does not exist on type 'URLResources'. | TS2551 - Property 'urls' does not exist on type 'Response'. Did you mean 'url'?
this.tryMore = resp.urls.length >= count;
this.tryMore = data.urls.length >= count;
this.filter();
// @ts-expect-error - TS2339 - Property 'loading' does not exist on type 'URLResources'.
this.loading = false;
}
onChangeTypeSearch(event) {
// @ts-expect-error - TS2339 - Property 'currMime' does not exist on type 'URLResources'.
this.currMime = event.currentTarget.value;
}
onChangeQuery(event) {
// @ts-expect-error - TS2339 - Property 'newQuery' does not exist on type 'URLResources'.
this.newQuery = event.currentTarget.value;
// @ts-expect-error - TS2339 - Property '_ival' does not exist on type 'URLResources'.
if (this._ival) {
// @ts-expect-error - TS2339 - Property '_ival' does not exist on type 'URLResources'.
window.clearTimeout(this._ival);
}
// @ts-expect-error - TS2339 - Property '_ival' does not exist on type 'URLResources'.
this._ival = window.setTimeout(() => this._timedUpdate(), 250);
}
onClickUrlType(event) {
// @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'.
this.urlSearchType = event.currentTarget.value;
}
filter() {
const filteredResults = [];
// @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'. | TS2339 - Property 'query' does not exist on type 'URLResources'.
const filteredResults: URLResource[] = [];
const filterText = this.urlSearchType === "contains" ? this.query : "";
// @ts-expect-error - TS2339 - Property 'results' does not exist on type 'URLResources'.
for (const result of this.results) {
if (!filterText || result.url.indexOf(filterText) >= 0) {
// @ts-expect-error - TS2345 - Argument of type 'any' is not assignable to parameter of type 'never'.
filteredResults.push(result);
}
}
// @ts-expect-error - TS2339 - Property 'filteredResults' does not exist on type 'URLResources'.
this.filteredResults = filteredResults;
}
@@ -258,7 +235,6 @@ class URLResources extends LitElement {
const element = event.currentTarget;
const diff =
element.scrollHeight - element.scrollTop - element.clientHeight;
// @ts-expect-error - TS2339 - Property 'tryMore' does not exist on type 'URLResources'.
if (this.tryMore && diff < 40) {
this.doLoadResources(true);
}
@@ -365,25 +341,15 @@ class URLResources extends LitElement {
return html`
<div
role="heading"
aria-level="${
// @ts-expect-error - TS2339 - Property 'isSidebar' does not exist on type 'URLResources'.
this.isSidebar ? "2" : "1"
}"
aria-level="${this.isSidebar ? "2" : "1"}"
class="is-sr-only"
>
URLs in
${
// @ts-expect-error - TS2339 - Property 'collInfo' does not exist on type 'URLResources'.
this.collInfo.title
}
URLs in ${this.collInfo!.title}
</div>
<div
role="heading"
aria-level="${
// @ts-expect-error - TS2339 - Property 'isSidebar' does not exist on type 'URLResources'.
this.isSidebar ? "3" : "2"
}"
aria-level="${this.isSidebar ? "3" : "2"}"
class="is-sr-only"
>
Search and Filter
@@ -398,10 +364,7 @@ class URLResources extends LitElement {
(filter) => html`
<option
value="${filter.filter}"
?selected="${
// @ts-expect-error - TS2339 - Property 'currMime' does not exist on type 'URLResources'.
filter.filter === this.currMime
}"
?selected="${filter.filter === this.currMime}"
>
${filter.name}
</option>
@@ -411,19 +374,15 @@ class URLResources extends LitElement {
</div>
<div class="field flex-auto">
<div
class="control has-icons-left ${
// @ts-expect-error - TS2339 - Property 'loading' does not exist on type 'URLResources'.
this.loading ? "is-loading" : ""
}"
class="control has-icons-left ${this.loading
? "is-loading"
: ""}"
>
<input
type="text"
class="input"
@input="${this.onChangeQuery}"
.value="${
// @ts-expect-error - TS2339 - Property 'query' does not exist on type 'URLResources'.
this.query
}"
.value="${this.query}"
placeholder="Enter URL to Search"
/>
<span class="icon is-left"
@@ -440,10 +399,7 @@ class URLResources extends LitElement {
type="radio"
name="urltype"
value="contains"
?checked="${
// @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'.
this.urlSearchType === "contains"
}"
?checked="${this.urlSearchType === "contains"}"
@click="${this.onClickUrlType}"
/>&nbsp;Contains</label
>
@@ -452,10 +408,7 @@ class URLResources extends LitElement {
type="radio"
name="urltype"
value="prefix"
?checked="${
// @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'.
this.urlSearchType === "prefix"
}"
?checked="${this.urlSearchType === "prefix"}"
@click="${this.onClickUrlType}"
/>&nbsp;Prefix</label
>
@@ -464,10 +417,7 @@ class URLResources extends LitElement {
type="radio"
name="urltype"
value="exact"
?checked="${
// @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'.
this.urlSearchType === "exact"
}"
?checked="${this.urlSearchType === "exact"}"
@click="${this.onClickUrlType}"
/>&nbsp;Exact</label
>
@@ -477,11 +427,7 @@ class URLResources extends LitElement {
is-pulled-right
aria-live="polite"
aria-atomic="true"
>${
// @ts-expect-error - TS2339 - Property 'filteredResults' does not exist on type 'URLResources'.
this.filteredResults.length
}
Result(s)</span
>${this.filteredResults.length} Result(s)</span
>
</div>
</div>
@@ -490,19 +436,10 @@ class URLResources extends LitElement {
<div class="sort-header is-hidden-tablet">
<wr-sorter
id="urls"
.sortKey="${
// @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'.
this.sortKey
}"
.sortDesc="${
// @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'.
this.sortDesc
}"
.sortKey="${this.sortKey}"
.sortDesc="${this.sortDesc}"
.sortKeys="${URLResources.sortKeys}"
.data="${
// @ts-expect-error - TS2339 - Property 'filteredResults' does not exist on type 'URLResources'.
this.filteredResults
}"
.data="${this.filteredResults}"
@sort-changed="${this.onSortChanged}"
>
</wr-sorter>
@@ -510,10 +447,7 @@ class URLResources extends LitElement {
<div
role="heading"
aria-level="${
// @ts-expect-error - TS2339 - Property 'isSidebar' does not exist on type 'URLResources'.
this.isSidebar ? "3" : "2"
}"
aria-level="${this.isSidebar ? "3" : "2"}"
id="results-heading"
class="is-sr-only"
>
@@ -530,15 +464,11 @@ class URLResources extends LitElement {
@click="${this.onSort}"
@keyup="${clickOnSpacebarPress}"
data-key="url"
class="${
// @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'.
this.sortKey === "url"
? // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'.
this.sortDesc
? "desc"
: "asc"
: ""
}"
class="${this.sortKey === "url"
? this.sortDesc
? "desc"
: "asc"
: ""}"
>URL</a
>
</th>
@@ -549,15 +479,11 @@ class URLResources extends LitElement {
@click="${this.onSort}"
@keyup="${clickOnSpacebarPress}"
data-key="ts"
class="${
// @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'.
this.sortKey === "ts"
? // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'.
this.sortDesc
? "desc"
: "asc"
: ""
}"
class="${this.sortKey === "ts"
? this.sortDesc
? "desc"
: "asc"
: ""}"
>Date</a
>
</th>
@@ -568,15 +494,11 @@ class URLResources extends LitElement {
@click="${this.onSort}"
@keyup="${clickOnSpacebarPress}"
data-key="mime"
class="${
// @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'.
this.sortKey === "mime"
? // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'.
this.sortDesc
? "desc"
: "asc"
: ""
}"
class="${this.sortKey === "mime"
? this.sortDesc
? "desc"
: "asc"
: ""}"
>Mime Type</a
>
</th>
@@ -587,15 +509,11 @@ class URLResources extends LitElement {
@click="${this.onSort}"
@keyup="${clickOnSpacebarPress}"
data-key="status"
class="${
// @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'.
this.sortKey === "status"
? // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'.
this.sortDesc
? "desc"
: "asc"
: ""
}"
class="${this.sortKey === "status"
? this.sortDesc
? "desc"
: "asc"
: ""}"
>Status</a
>
</th>
@@ -603,53 +521,45 @@ class URLResources extends LitElement {
</thead>
<tbody class="main-scroll" @scroll="${this.onScroll}">
${
// @ts-expect-error - TS2339 - Property 'sortedResults' does not exist on type 'URLResources'.
this.sortedResults.length
? // @ts-expect-error - TS2339 - Property 'sortedResults' does not exist on type 'URLResources'.
this.sortedResults.map(
(result) => html`
<tr class="columns result">
<td class="column col-url is-6">
<p class="minihead is-hidden-tablet">URL</p>
<a
@click="${this.onReplay}"
data-url="${result.url}"
data-ts="${result.ts}"
href="${getReplayLink(
"resources",
result.url,
result.ts,
)}"
${this.sortedResults.length
? this.sortedResults.map(
(result) => html`
<tr class="columns result">
<td class="column col-url is-6">
<p class="minihead is-hidden-tablet">URL</p>
<a
@click="${this.onReplay}"
data-url="${result.url}"
data-ts="${result.ts}"
href="${getReplayLink(
"resources",
result.url,
result.ts,
)}"
>
<keyword-mark keywords="${this.query}"
>${result.url}</keyword-mark
>
<keyword-mark
keywords="${
// @ts-expect-error - TS2339 - Property 'query' does not exist on type 'URLResources'.
this.query
}"
>${result.url}</keyword-mark
>
</a>
</td>
<td class="column col-ts is-2">
<p class="minihead is-hidden-tablet">Date</p>
${new Date(result.date).toLocaleString()}
</td>
<td class="column col-mime is-3">
<p class="minihead is-hidden-tablet">Mime Type</p>
${result.mime}
</td>
<td class="column col-status is-1">
<p class="minihead is-hidden-tablet">Status</p>
${result.status}
</td>
</tr>
`,
)
: html`<tr class="section">
<td colspan="4"><i>No Results Found.</i></td>
</tr>`
}
</a>
</td>
<td class="column col-ts is-2">
<p class="minihead is-hidden-tablet">Date</p>
${new Date(result.date).toLocaleString()}
</td>
<td class="column col-mime is-3">
<p class="minihead is-hidden-tablet">Mime Type</p>
${result.mime}
</td>
<td class="column col-status is-1">
<p class="minihead is-hidden-tablet">Status</p>
${result.status}
</td>
</tr>
`,
)
: html`<tr class="section">
<td colspan="4"><i>No Results Found.</i></td>
</tr>`}
</tbody>
</table>
`;
@@ -659,24 +569,17 @@ class URLResources extends LitElement {
event.preventDefault();
const key = event.currentTarget.getAttribute("data-key");
// @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'.
if (key === this.sortKey) {
// @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'. | TS2339 - Property 'sortDesc' does not exist on type 'URLResources'.
this.sortDesc = !this.sortDesc;
} else {
// @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'.
this.sortDesc = false;
// @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'.
this.sortKey = key;
}
}
onSortChanged(event) {
// @ts-expect-error - TS2339 - Property 'sortedResults' does not exist on type 'URLResources'.
this.sortedResults = event.detail.sortedData;
// @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'.
this.sortKey = event.detail.sortKey;
// @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'.
this.sortDesc = event.detail.sortDesc;
}