mirror of
https://github.com/hkalexling/Mango.git
synced 2025-08-03 11:25:29 -04:00
Finish subscription manager page
This commit is contained in:
Alex Ling
parent
b76d4645cc
commit
031ea7ef16
@ -237,8 +237,10 @@ const component = () => {
|
|||||||
|
|
||||||
console.log("initial size:", ary.length);
|
console.log("initial size:", ary.length);
|
||||||
for (let filter of this.appliedFilters) {
|
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 === "array" && filter.value === "all") continue;
|
||||||
|
if (filter.type.startsWith("number") && isNaN(filter.value))
|
||||||
|
continue;
|
||||||
|
|
||||||
console.log("applying filter:", filter);
|
console.log("applying filter:", filter);
|
||||||
|
|
||||||
@ -370,6 +372,7 @@ const component = () => {
|
|||||||
$("#filter-form input")
|
$("#filter-form input")
|
||||||
.get()
|
.get()
|
||||||
.forEach((i) => (i.value = ""));
|
.forEach((i) => (i.value = ""));
|
||||||
|
$("#filter-form select").val("all");
|
||||||
this.appliedFilters = [];
|
this.appliedFilters = [];
|
||||||
this.chapters = this.filteredChapters;
|
this.chapters = this.filteredChapters;
|
||||||
},
|
},
|
||||||
@ -439,8 +442,9 @@ const component = () => {
|
|||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
let value = ft.value;
|
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");
|
value = moment(Number(value)).format("MMM D, YYYY");
|
||||||
|
|
||||||
return `<td>${key}</td><td>${type}</td><td>${value}</td>`;
|
return `<td>${key}</td><td>${type}</td><td>${value}</td>`;
|
||||||
|
|||||||
@ -3,6 +3,8 @@ const component = () => {
|
|||||||
subscriptions: [],
|
subscriptions: [],
|
||||||
plugins: [],
|
plugins: [],
|
||||||
pid: undefined,
|
pid: undefined,
|
||||||
|
subscription: undefined, // selected subscription
|
||||||
|
loading: false,
|
||||||
|
|
||||||
init() {
|
init() {
|
||||||
fetch(`${base_url}api/admin/plugin`)
|
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);
|
||||||
|
});
|
||||||
|
},
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,29 +1,99 @@
|
|||||||
<h2 class=uk-title>Subscription Manager</h2>
|
<h2 class=uk-title>Subscription Manager</h2>
|
||||||
<div x-data="component()" x-init="init()">
|
<div x-data="component()" x-init="init()">
|
||||||
<div class="uk-grid-small" uk-grid style="margin-bottom:40px;">
|
<div class="uk-grid-small" uk-grid style="margin-bottom:40px;">
|
||||||
<div class="uk-container uk-text-center" x-show="plugins.length === 0" style="width:100%">
|
<div class="uk-container uk-text-center" x-show="plugins.length === 0" style="width:100%">
|
||||||
<h2>No Plugins Found</h2>
|
<h2>No Plugins Found</h2>
|
||||||
<p>We could't find any plugins in the directory <code><%= Config.current.plugin_path %></code>.</p>
|
<p>We could't find any plugins in the directory <code><%= Config.current.plugin_path %></code>.</p>
|
||||||
<p>You can download official plugins from the <a href="https://github.com/hkalexling/mango-plugins">Mango plugins repository</a>.</p>
|
<p>You can download official plugins from the <a href="https://github.com/hkalexling/mango-plugins">Mango plugins repository</a>.</p>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div x-show="plugins.length > 0" style="width:100%">
|
|
||||||
<div class="uk-margin">
|
|
||||||
<label class="uk-form-label">Choose a plugin</label>
|
|
||||||
<div class="uk-form-controls">
|
|
||||||
<select class="uk-select" x-model="pid" @change="pluginChanged()">
|
|
||||||
<template x-for="p in plugins" :key="p">
|
|
||||||
<option :value="p.id" x-text="p.title"></option>
|
|
||||||
</template>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div x-show="plugins.length > 0" style="width:100%">
|
||||||
|
<div class="uk-margin">
|
||||||
|
<label class="uk-form-label">Choose a plugin</label>
|
||||||
|
<div class="uk-form-controls">
|
||||||
|
<select class="uk-select" x-model="pid" @change="pluginChanged()">
|
||||||
|
<template x-for="p in plugins" :key="p">
|
||||||
|
<option :value="p.id" x-text="p.title"></option>
|
||||||
|
</template>
|
||||||
|
</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>
|
</div>
|
||||||
|
|
||||||
<% content_for "script" do %>
|
<% content_for "script" do %>
|
||||||
<%= render_component "moment" %>
|
<%= render_component "moment" %>
|
||||||
<script src="<%= base_url %>js/alert.js"></script>
|
<script src="<%= base_url %>js/alert.js"></script>
|
||||||
<script src="<%= base_url %>js/subscription-manager.js"></script>
|
<script src="<%= base_url %>js/subscription-manager.js"></script>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user