Backups/Mango
1
0
Fork 0
mirror of https://github.com/hkalexling/Mango.git synced 2025-08-03 11:25:29 -04:00
Code Issues Projects Releases Wiki Activity

Finish subscription manager page

Browse Source
This commit is contained in:
Alex Ling 2021-11-25 12:31:17 +00:00
parent b76d4645cc
commit 031ea7ef16
3 changed files with 175 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/js/plugin-download.js
View File

@ -237,8 +237,10 @@ const component = () => {
console.log("initial size:", ary.length);
for (let filter of this.appliedFilters) {
if (!filter.value || isNaN(filter.value)) continue;
if (!filter.value) continue;
if (filter.type === "array" && filter.value === "all") continue;
if (filter.type.startsWith("number") && isNaN(filter.value))
continue;
console.log("applying filter:", filter);
@ -370,6 +372,7 @@ const component = () => {
$("#filter-form input")
.get()
.forEach((i) => (i.value = ""));
$("#filter-form select").val("all");
this.appliedFilters = [];
this.chapters = this.filteredChapters;
},
@ -439,8 +442,9 @@ const component = () => {
break;
}
let value = ft.value;
if (!value || isNaN(value)) value = "";
else if (ft.type.startsWith("date"))
if (ft.type.startsWith("number") && isNaN(value)) value = "";
else if (ft.type.startsWith("date") && value)
value = moment(Number(value)).format("MMM D, YYYY");
return `<td>${key}</td><td>${type}</td><td>${value}</td>`;

76
public/js/subscription-manager.js
View File

@ -3,6 +3,8 @@ const component = () => {
subscriptions: [],
plugins: [],
pid: undefined,
subscription: undefined, // selected subscription
loading: false,
init() {
fetch(`${base_url}api/admin/plugin`)
@ -53,5 +55,79 @@ const component = () => {
);
});
},
renderStrCell(str) {
const maxLength = 40;
if (str.length > maxLength)
return `<td><span>${str.substring(
0,
maxLength
)}...</span><div uk-dropdown>${str}</div></td>`;
return `<td>${str}</td>`;
},
renderDateCell(timestamp) {
return `<td>${moment
.duration(moment.unix(timestamp).diff(moment()))
.humanize(true)}</td>`;
},
selected(event, modal) {
const id = event.currentTarget.getAttribute("sid");
this.subscription = this.subscriptions.find((s) => s.id === id);
UIkit.modal(modal).show();
},
renderFilterRow(ft) {
const key = ft.key;
let type = ft.type;
switch (type) {
case "number-min":
type = "number (minimum value)";
break;
case "number-max":
type = "number (maximum value)";
break;
case "date-min":
type = "minimum date";
break;
case "date-max":
type = "maximum date";
break;
}
let value = ft.value;
if (ft.type.startsWith("number") && isNaN(value)) value = "";
else if (ft.type.startsWith("date") && value)
value = moment(Number(value)).format("MMM D, YYYY");
return `<td>${key}</td><td>${type}</td><td>${value}</td>`;
},
action(event, type) {
if (this.loading) return;
this.loading = true;
const id = $(event.currentTarget).closest("tr").attr("sid");
fetch(
`${base_url}api/admin/plugin/subscriptions?${new URLSearchParams(
{
plugin: this.pid,
subscription: id,
}
)}`,
{
method: "DELETE",
}
)
.then((response) => response.json())
.then((data) => {
if (!data.success) throw new Error(data.error);
})
.catch((e) => {
alert(
"danger",
`Failed to delete subscription. Error: ${e}`
);
})
.finally(() => {
this.loading = false;
this.list(this.pid);
});
},
};
};

70
src/views/subscription-manager.html.ecr
View File

@ -18,6 +18,76 @@
</select>
</div>
</div>
<p x-show="subscriptions.length === 0" class="uk-text-meta">No subscriptions found.</p>
<div class="uk-overflow-auto" x-show="subscriptions.length > 0">
<table class="uk-table uk-table-striped">
<thead>
<tr>
<th>Name</th>
<th>Plugin ID</th>
<th>Manga ID</th>
<th>Created At</th>
<th>Last Checked</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<template x-for="sub in subscriptions" :key="sub">
<tr :sid="sub.id" @click="selected($event, $refs.modal)">
<td x-html="renderStrCell(sub.name)"></td>
<td x-html="renderStrCell(sub.plugin_id)"></td>
<td x-html="renderStrCell(sub.manga_id)"></td>
<td x-html="renderDateCell(sub.created_at)"></td>
<td x-html="renderDateCell(sub.last_checked)"></td>
<td>
<a @click.prevent.stop="action($event, 'delete')" uk-icon="trash" uk-tooltip="Delete" :disabled="loading"></a>
<a @click.prevent.stop="action($event, 'update')" uk-icon="refresh" uk-tooltip="Check for updates" :disabled="loading"></a>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
</div>
<div uk-modal="container:false" x-ref="modal" class="uk-flex-top">
<div class="uk-modal-dialog uk-margin-auto-vertical uk-overflow-auto">
<div class="uk-modal-header">
<h2 class="uk-modal-title">Subscription Details</h2>
</div>
<div class="uk-modal-body">
<dl>
<dt>Name</dt>
<dd x-html="subscription && subscription.name"></dd>
<dt>Subscription ID</dt>
<dd x-html="subscription && subscription.id"></dd>
<dt>Plugin ID</dt>
<dd x-html="subscription && subscription.plugin_id"></dd>
<dt>Manga ID</dt>
<dd x-html="subscription && subscription.manga_id"></dd>
<dt>Filters</dt>
</dl>
<table class="uk-table uk-table-striped">
<thead>
<tr>
<th>Key</th>
<th>Type</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<template x-for="ft in (subscription && subscription.filters || [])" :key="ft">
<tr x-html="renderFilterRow(ft)"></tr>
</template>
</tbody>
</table>
<p class="uk-text-right">
<button class="uk-button uk-button-default uk-modal-close" type="button">OK</button>
</p>
</div>
</div>
</div>
</div>