121 lines
6.3 KiB
JavaScript
121 lines
6.3 KiB
JavaScript
export default class MonitorListRow extends HTMLTableRowElement {
|
|
constructor() {
|
|
super();
|
|
this.downloadId = this.getAttribute('monitor-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');
|
|
}
|
|
|
|
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);
|
|
this.setPreviewContent();
|
|
}
|
|
}
|
|
|
|
setPreviewContent() {
|
|
this.previewContent = `
|
|
<table class="table-auto flex flex-row">
|
|
<thead>
|
|
<tr class="flex flex-col">
|
|
<th class="px-4 py-2">
|
|
<div class="dark:text-orange-500 text-right whitespace-nowrap ">ID</div>
|
|
</th>
|
|
<th class="px-4 py-2">
|
|
<div class="dark:text-orange-500 text-right whitespace-nowrap ">IMDB ID</div>
|
|
</th>
|
|
<th class="px-4 py-2">
|
|
<div class="dark:text-orange-500 text-right whitespace-nowrap ">Title</div>
|
|
</th>
|
|
<th class="px-4 py-2">
|
|
<div class="dark:text-orange-500 text-right whitespace-nowrap ">Season</div>
|
|
</th>
|
|
<th class="px-4 py-2">
|
|
<div class="dark:text-orange-500 text-right whitespace-nowrap ">Episode</div>
|
|
</th>
|
|
<th class="px-4 py-2">
|
|
<div class="dark:text-orange-500 text-right whitespace-nowrap ">Status</div>
|
|
</th>
|
|
<th class="px-4 py-2">
|
|
<div class="dark:text-orange-500 text-right whitespace-nowrap ">Search Count</div>
|
|
</th>
|
|
<th class="px-4 py-2">
|
|
<div class="dark:text-orange-500 text-right whitespace-nowrap ">Media Type</div>
|
|
</th>
|
|
<th class="px-4 py-2">
|
|
<div class="dark:text-orange-500 text-right whitespace-nowrap ">Episode ID</div>
|
|
</th>
|
|
<th class="px-4 py-2">
|
|
<div class="dark:text-orange-500 text-right whitespace-nowrap ">Created At</div>
|
|
</th>
|
|
<th class="px-4 py-2">
|
|
<div class="dark:text-orange-500 text-right whitespace-nowrap ">Updated At</div>
|
|
</th>
|
|
<th class="px-4 py-2">
|
|
<div class="dark:text-orange-500 text-right whitespace-nowrap ">Downloaded At</div>
|
|
</th>
|
|
<th class="px-4 py-2">
|
|
<div class="dark:text-orange-500 text-right whitespace-nowrap ">Air Date</div>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="flex flex-col">
|
|
<td class="px-4 py-2">
|
|
<div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('monitor-id') ?? "-"}</div>
|
|
</td>
|
|
<td class="px-4 py-2">
|
|
<div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('imdb-id') ?? "-"}</div>
|
|
</td>
|
|
<td class="px-4 py-2">
|
|
<div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('media-title') ?? "-"}</div>
|
|
</td>
|
|
<td class="px-4 py-2">
|
|
<div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('season') ?? "-"}</div>
|
|
</td>
|
|
<td class="px-4 py-2">
|
|
<div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('episode') ?? "-"}</div>
|
|
</td>
|
|
<td class="px-4 py-2">
|
|
<div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('status') ?? "-"}</div>
|
|
</td>
|
|
<td class="px-4 py-2">
|
|
<div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('search-count') ?? "-"}</div>
|
|
</td>
|
|
<td class="px-4 py-2">
|
|
<div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('media-type') ?? "-"}</div>
|
|
</td>
|
|
<td class="px-4 py-2">
|
|
<div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('episode-id') ?? "-"}</div>
|
|
</td>
|
|
<td class="px-4 py-2">
|
|
<div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('created-at') ?? "-"}</div>
|
|
</td>
|
|
<td class="px-4 py-2">
|
|
<div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('last-search') ?? "-"}</div>
|
|
</td>
|
|
<td class="px-4 py-2">
|
|
<div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('downloaded-at') ?? "-"}</div>
|
|
</td>
|
|
<td class="px-4 py-2">
|
|
<div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('air-date') ?? "-"}</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
`;
|
|
}
|
|
} |