home/torsearch
1
0
Fork 0
Code Issues 22 Pull Requests 1 Actions 3 Packages Projects 4 Releases Wiki Activity

feat: download data preview modal

Browse Source
This commit is contained in:
brock
2025-08-02 22:46:21 -05:00
parent 0430dba6a9
commit 2becc98d61
19 changed files with 2058 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
assets/components/download-list-row.js Normal file
View File

@@ -0,0 +1,110 @@
export default class DownloadListRow extends HTMLTableRowElement {
constructor() {
super();
this.downloadId = this.getAttribute('download-id');
this.imdbId = this.getAttribute('imdb-id');
this.mediaTitle = this.getAttribute('media-title');
this.url = this.getAttribute('url');
this.filename = this.getAttribute('filename');
this.status = this.getAttribute('status');
this.progress = this.getAttribute('progress');
this.mediaType = this.getAttribute('media-type');
this.episodeId = this.getAttribute('episode-id');
this.createdAt = this.getAttribute('created-at');
this.updatedAt = this.getAttribute('updated-at');
// this.previewContent = this.previewContent.bind(this);
}
static get observedAttributes() {
return ['download-id', 'imdb-id', 'media-title', 'url', 'filename', 'status', 'progress', 'media-type', 'episode-id', 'created-at', 'updated-at'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue !== newValue) {
this[name] = newValue;
this.setAttribute(name, newValue);
}
}
previewContent() {
return `
<table class="table-auto flex flex-row">
<thead>
<tr class="flex flex-col">
<th class="px-4 py-2">
<div class="text-right whitespace-nowrap ">ID</div>
</th>
<th class="px-4 py-2">
<div class="text-right whitespace-nowrap ">IMDB ID</div>
</th>
<th class="px-4 py-2">
<div class="text-right whitespace-nowrap ">Title</div>
</th>
<th class="px-4 py-2">
<div class="text-right whitespace-nowrap ">URL</div>
</th>
<th class="px-4 py-2">
<div class="text-right whitespace-nowrap ">Filename</div>
</th>
<th class="px-4 py-2">
<div class="text-right whitespace-nowrap ">Status</div>
</th>
<th class="px-4 py-2">
<div class="text-right whitespace-nowrap ">Progress</div>
</th>
<th class="px-4 py-2">
<div class="text-right whitespace-nowrap ">Media Type</div>
</th>
<th class="px-4 py-2">
<div class="text-right whitespace-nowrap ">Episode ID</div>
</th>
<th class="px-4 py-2">
<div class="text-right whitespace-nowrap ">Created At</div>
</th>
<th class="px-4 py-2">
<div class="text-right whitespace-nowrap ">Updated At</div>
</th>
</tr>
</thead>
<tbody>
<tr class="flex flex-col">
<th class="px-4 py-2">
<div class="text-left whitespace-nowrap font-normal">${this.getAttribute('download-id') ?? "-"}</div>
</th>
<th class="px-4 py-2">
<div class="text-left whitespace-nowrap font-normal">${this.getAttribute('imdb-id') ?? "-"}</div>
</th>
<th class="px-4 py-2">
<div class="text-left whitespace-nowrap font-normal">${this.getAttribute('media-title') ?? "-"}</div>
</th>
<th class="px-4 py-2">
<div class="text-left whitespace-nowrap font-normal">${this.getAttribute('url') ?? "-"}</div>
</th>
<th class="px-4 py-2">
<div class="text-left whitespace-nowrap font-normal">${this.getAttribute('filename') ?? "-"}</div>
</th>
<th class="px-4 py-2">
<div class="text-left whitespace-nowrap font-normal">${this.getAttribute('status') ?? "-"}</div>
</th>
<th class="px-4 py-2">
<div class="text-left whitespace-nowrap font-normal">${this.getAttribute('progress') ?? "-"}</div>
</th>
<th class="px-4 py-2">
<div class="text-left whitespace-nowrap font-normal">${this.getAttribute('media-type') ?? "-"}</div>
</th>
<th class="px-4 py-2">
<div class="text-left whitespace-nowrap font-normal">${this.getAttribute('episode-id') ?? "-"}</div>
</th>
<th class="px-4 py-2">
<div class="text-left whitespace-nowrap font-normal">${this.getAttribute('created-at') ?? "-"}</div>
</th>
<th class="px-4 py-2">
<div class="text-left whitespace-nowrap font-normal">${this.getAttribute('updated-at') ?? "-"}</div>
</th>
</tr>
</tbody>
</table>
`;
}
}

35
assets/components/preview-content-dialog.js Normal file
View File

@@ -0,0 +1,35 @@
export default class PreviewContentDialog extends HTMLDialogElement {
#headingEl;
#contentEl;
#closeBtnEl;
constructor() {
super();
this.#headingEl = this.querySelector('.modal-heading');
this.#contentEl = this.querySelector('.modal-content');
this.#closeBtnEl = this.querySelector('.modal-close');
this.setHeading = this.setHeading.bind(this);
this.setContent = this.setContent.bind(this);
document.addEventListener('showPreviewContentModal', (event) => {
this.display(event.detail);
});
document.addEventListener('hidePreviewContentModal', (e) => this.close());
this.#closeBtnEl.addEventListener('click', () => this.close());
}
setHeading(heading) {
this.#headingEl.innerHTML = heading;
}
setContent(content) {
this.#contentEl.innerHTML = content;
}
display({ heading, content }) {
this.setHeading(heading);
this.setContent(content);
this.showModal();
}
}