mirror of
https://github.com/hkalexling/Mango.git
synced 2026-05-01 00:00:55 -04:00
Feature/plugin v2 (#284)
* Add "title_title" to slim JSON * WIP * WIP * WIP * WIP * Add plugin subscription types * Revert "Subscription manager" This reverts commita612500b0f. * Use auto overflow tables cherry-picked froma612500b0f* Add endpoint for plugin subscription * WIP * WIP * Simplify subscription JSON parsing * Remove MangaDex files that are no longer needed * Fix linter * Refactor date filtering and use native date picker * Delete unnecessary raise for debugging * Subscription management API endpoints * Store manga ID with subscriptions * Add subscription manager page (WIP) * Finish subscription manager page * WIP * Finish plugin updater * Base64 encode chapter IDs * Fix actions on download manager * Trigger subscription update from manager page * Fix timestamp precision issue in plugin * Show target API version * Update last checked from manager page * Update last checked even when no chapters found * Fix null pid * Clean up * Document the subscription endpoints * Fix BigFloat conversion issue * Confirmation before deleting subscriptions * Reset table sort options * Show manga title on subscription manager
This commit is contained in:
Alex Ling
GitHub
@@ -1,162 +0,0 @@
|
||||
<h2 class=uk-title>Download from MangaDex</h2>
|
||||
<div x-data="downloadComponent()" x-init="init()">
|
||||
<div class="uk-grid-small" uk-grid style="margin-bottom:40px;">
|
||||
<div class="uk-width-expand">
|
||||
<input class="uk-input" type="text" :placeholder="searchAvailable ? 'Search MangaDex or enter a manga ID/URL' : 'MangaDex manga ID or URL'" x-model="searchInput" @keydown.enter.debounce="search()">
|
||||
</div>
|
||||
<div class="uk-width-auto">
|
||||
<div uk-spinner class="uk-align-center" x-show="loading" x-cloak></div>
|
||||
<button class="uk-button uk-button-default" x-show="!loading" @click="search()">Search</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template x-if="mangaAry">
|
||||
<div>
|
||||
<p x-show="mangaAry.length === 0">No matching manga found.</p>
|
||||
|
||||
<div class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
|
||||
<template x-for="manga in mangaAry" :key="manga.id">
|
||||
<div class="item" :data-id="manga.id" @click="chooseManga(manga)">
|
||||
<div class="uk-card uk-card-default">
|
||||
<div class="uk-card-media-top uk-inline">
|
||||
<img uk-img :data-src="manga.mainCover">
|
||||
</div>
|
||||
<div class="uk-card-body">
|
||||
<h3 class="uk-card-title break-word uk-margin-remove-bottom free-height" x-text="manga.title"></h3>
|
||||
<p class="uk-text-meta" x-text="`ID: ${manga.id}`"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div x-show="data && data.chapters" x-cloak>
|
||||
<div class"uk-grid-small" uk-grid>
|
||||
<div class="uk-width-1-4@s">
|
||||
<img :src="data.mainCover">
|
||||
</div>
|
||||
<div class="uk-width-1-4@s">
|
||||
<p>Title: <a :href="`<%= mangadex_base_url %>/manga/${data.id}`" x-text="data.title"></a></p>
|
||||
<p x-text="`Artist: ${data.artist}`"></p>
|
||||
<p x-text="`Author: ${data.author}`"></p>
|
||||
</div>
|
||||
<div class="uk-form-stacked uk-width-1-2@s" id="filters">
|
||||
<p class="uk-text-lead uk-margin-remove-bottom">Filter Chapters</p>
|
||||
<p class="uk-text-meta uk-margin-remove-top" x-text="`${chapters.length} chapters found`"></p>
|
||||
<div class="uk-margin">
|
||||
<label class="uk-form-label">Language</label>
|
||||
<div class="uk-form-controls">
|
||||
<select class="uk-select filter-field" x-model="langChoice" @change="filtersUpdated()">
|
||||
<template x-for="lang in languages" :key="lang">
|
||||
<option x-text="lang"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="uk-margin">
|
||||
<label class="uk-form-label">Group</label>
|
||||
<div class="uk-form-controls">
|
||||
<select class="uk-select filter-field" x-model="groupChoice" @change="filtersUpdated()">
|
||||
<template x-for="group in groups" :key="group">
|
||||
<option x-text="group"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="uk-margin">
|
||||
<label class="uk-form-label">Volume</label>
|
||||
<div class="uk-form-controls">
|
||||
<input class="uk-input filter-field" type="text" placeholder="e.g., 127, 10-14, >30, <=212, or leave it empty." x-model="volumeRange" @keydown.enter="filtersUpdated()">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="uk-margin">
|
||||
<label class="uk-form-label">Chapter</label>
|
||||
<div class="uk-form-controls">
|
||||
<input class="uk-input filter-field" type="text" placeholder="e.g., 127, 10-14, >30, <=212, or leave it empty." x-model="chapterRange" @keydown.enter="filtersUpdated()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="uk-margin">
|
||||
<div class="uk-margin">
|
||||
<button class="uk-button uk-button-default" @click="selectAll()">Select All</button>
|
||||
<button class="uk-button uk-button-default" @click="clearSelection()">Clear Selections</button>
|
||||
<button class="uk-button uk-button-primary" @click="download()" x-show="!addingToDownload">Download Selected</button>
|
||||
<div uk-spinner class="uk-margin-left" x-show="addingToDownload"></div>
|
||||
</div>
|
||||
<p class="uk-text-meta">Click on a table row to select the chapter. Drag your mouse over multiple rows to select them all. Hold Ctrl to make multiple non-adjacent selections.</p>
|
||||
</div>
|
||||
<p x-text="`Mango can only list ${chaptersLimit} chapters, but we found ${chapters.length} chapters. Please use the filter options above to narrow down your search.`" x-show="chapters.length > chaptersLimit"></p>
|
||||
<table class="uk-table uk-table-striped uk-overflow-auto" x-show="chapters.length <= chaptersLimit">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Title</th>
|
||||
<th>Language</th>
|
||||
<th>Group</th>
|
||||
<th>Volume</th>
|
||||
<th>Chapter</th>
|
||||
<th>Timestamp</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<template x-if="chapters.length <= chaptersLimit">
|
||||
<tbody id="selectable">
|
||||
<template x-for="chp in chapters" :key="chp">
|
||||
<tr class="ui-widget-content">
|
||||
<td><a :href="`<%= mangadex_base_url %>/chapter/${chp.id}`" x-text="chp.id"></a></td>
|
||||
<td x-text="chp.title"></td>
|
||||
<td x-text="chp.language"></td>
|
||||
<td>
|
||||
<template x-for="grp in Object.entries(chp.groups)">
|
||||
<div>
|
||||
<a :href="`<%= mangadex_base_url %>/group/${grp[1]}`" x-text="grp[0]"></a>
|
||||
</div>
|
||||
</template>
|
||||
</td>
|
||||
<td x-text="chp.volume"></td>
|
||||
<td x-text="chp.chapter"></td>
|
||||
<td x-text="`${moment.unix(chp.timestamp).fromNow()}`"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</template>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="modal" class="uk-flex-top" uk-modal="container: false">
|
||||
<div class="uk-modal-dialog uk-margin-auto-vertical">
|
||||
<button class="uk-modal-close-default" type="button" uk-close></button>
|
||||
<div class="uk-modal-header">
|
||||
<h3 class="uk-modal-title break-word" x-text="candidateManga.title"></h3>
|
||||
</div>
|
||||
<div class="uk-modal-body">
|
||||
<div class="uk-grid">
|
||||
<div class="uk-width-1-3@s">
|
||||
<img uk-img data-width data-height :src="candidateManga.mainCover" style="width:100%;margin-bottom:10px;">
|
||||
<a :href="`<%= mangadex_base_url %>/manga/${candidateManga.id}`" x-text="`ID: ${candidateManga.id}`" class="uk-link-muted"></a>
|
||||
</div>
|
||||
<div class="uk-width-2-3@s" uk-overflow-auto>
|
||||
<p x-text="candidateManga.description"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-modal-footer">
|
||||
<button class="uk-button uk-button-primary" type="button" @click="confirmManga(candidateManga.id)">Choose</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% content_for "script" do %>
|
||||
<%= render_component "moment" %>
|
||||
<%= render_component "jquery-ui" %>
|
||||
<script src="<%= base_url %>js/alert.js"></script>
|
||||
<script src="<%= base_url %>js/download.js"></script>
|
||||
<% end %>
|
||||
@@ -19,6 +19,7 @@
|
||||
<ul class="uk-nav-sub">
|
||||
<li><a href="<%= base_url %>download/plugins">Plugins</a></li>
|
||||
<li><a href="<%= base_url %>admin/downloads">Download Manager</a></li>
|
||||
<li><a href="<%= base_url %>admin/subscriptions">Subscription Manager</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<% end %>
|
||||
@@ -51,6 +52,7 @@
|
||||
<li><a href="<%= base_url %>download/plugins">Plugins</a></li>
|
||||
<li class="uk-nav-divider"></li>
|
||||
<li><a href="<%= base_url %>admin/downloads">Download Manager</a></li>
|
||||
<li><a href="<%= base_url %>admin/subscriptions">Subscription Manager</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
<div x-data="component()" x-init="init()">
|
||||
<h2 class="uk-title">Connect to MangaDex</h2>
|
||||
<div class"uk-grid-small" uk-grid x-show="!loading" x-cloak>
|
||||
<div class="uk-width-1-2@s" x-show="!expires">
|
||||
<p>This step is optional but highly recommended if you are using the MangaDex downloader. Connecting to MangaDex allows you to:</p>
|
||||
<ul>
|
||||
<li>Search MangaDex by search terms in addition to manga IDs</li>
|
||||
<li>Automatically download new chapters when they are available (coming soon)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="uk-width-1-2@s" x-show="expires">
|
||||
<p>
|
||||
<span x-show="!expired">You have logged in to MangaDex!</span>
|
||||
<span x-show="expired">You have logged in to MangaDex but the token has expired.</span>
|
||||
The expiration date of your token is <code x-text="moment.unix(expires).format('MMMM Do YYYY, HH:mm:ss')"></code>.
|
||||
<span x-show="!expired">If the integration is not working, you</span>
|
||||
<span x-show="expired">You</span>
|
||||
can log in again and the token will be updated.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="uk-width-1-2@s">
|
||||
<div class="uk-margin">
|
||||
<div class="uk-inline uk-width-1-1"><span class="uk-form-icon" uk-icon="icon:user"></span><input class="uk-input uk-form-large" type="text" x-model="username" @keydown.enter.debounce="login()"></div>
|
||||
</div>
|
||||
<div class="uk-margin">
|
||||
<div class="uk-inline uk-width-1-1"><span class="uk-form-icon" uk-icon="icon:lock"></span><input class="uk-input uk-form-large" type="password" x-model="password" @keydown.enter.debounce="login()"></div>
|
||||
</div>
|
||||
<div class="uk-margin"><button class="uk-button uk-button-primary uk-button-large uk-width-1-1" @click="login()" :disabled="loggingIn">Login to MangaDex</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% content_for "script" do %>
|
||||
<%= render_component "moment" %>
|
||||
<script src="<%= base_url %>js/alert.js"></script>
|
||||
<script src="<%= base_url %>js/mangadex.js"></script>
|
||||
<% end %>
|
||||
@@ -1,77 +1,214 @@
|
||||
<% if plugins.empty? %>
|
||||
<div class="uk-container uk-text-center">
|
||||
<h2>No Plugins Found</h2>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<% else %>
|
||||
<h2 class=uk-title>Download with Plugins</h2>
|
||||
|
||||
<div id="controls" class="uk-grid-small" uk-grid hidden>
|
||||
<div class="uk-width-3-4@m uk-child-width-1-1">
|
||||
<div class="uk-margin">
|
||||
<label class="uk-form-label" for="search-input"> </label>
|
||||
<div class="uk-form-controls">
|
||||
<input id="search-input" class="uk-input" type="text" placeholder="<%= plugin.not_nil!.info.placeholder %>">
|
||||
</div>
|
||||
</div>
|
||||
<div x-data="component()" x-init="init()" x-cloak>
|
||||
<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%">
|
||||
<h2>No Plugins Found</h2>
|
||||
<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>
|
||||
</div>
|
||||
<div class="uk-width-expand">
|
||||
<div class="uk-margin">
|
||||
<label class="uk-form-label" for="plugin-select">Choose a plugin</label>
|
||||
<div class="uk-form-controls">
|
||||
<select id="plugin-select" class="uk-select">
|
||||
<% plugins.each do |p| %>
|
||||
<option value="<%= p[:id] %>"><%= p[:title] %></option>
|
||||
<% end %>
|
||||
</select>
|
||||
|
||||
<div x-show="plugins.length > 0" style="width:100%">
|
||||
<h2 class=uk-title>Download with Plugins
|
||||
<span x-show="searching" uk-spinner class="uk-margin-left"></span>
|
||||
</h2>
|
||||
|
||||
<template x-if="info !== undefined">
|
||||
<div>
|
||||
<div class="uk-grid-small" uk-grid>
|
||||
<div class="uk-width-3-4@m uk-child-width-1-1">
|
||||
<div class="uk-margin">
|
||||
<div class="uk-form-controls">
|
||||
<label class="uk-form-label"> </label>
|
||||
<input class="uk-input" type="text" :placeholder="info.placeholder" x-model="query" @keydown.enter="search()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-width-expand">
|
||||
<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 class="uk-width-auto">
|
||||
<div class="uk-margin">
|
||||
<label class="uk-form-label"> </label>
|
||||
<div class="uk-form-controls" style="padding-top: 10px;">
|
||||
<span uk-icon="info" uk-toggle="target: #toggle"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template x-for="entry, idx in Object.entries(info).filter(tp => !['id', 'settings'].includes(tp[0]))" :key="idx">
|
||||
<dl class="uk-description-list" id="toggle" hidden>
|
||||
<dt x-text="entry[0] === 'version' ? 'Target API Version' : entry[0].replace('_', ' ')"></dt>
|
||||
<dd x-text="entry[1]"></dd>
|
||||
</dl>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-width-auto">
|
||||
<div class="uk-margin">
|
||||
<label class="uk-form-label" for="search-input"> </label>
|
||||
<div class="uk-form-controls" style="padding-top: 10px;">
|
||||
<span uk-icon="info" uk-toggle="target: #toggle"></span>
|
||||
</template>
|
||||
|
||||
<template x-if="manga">
|
||||
<div class="uk-margin">
|
||||
<p x-show="manga.length === 0">No matching manga found.</p>
|
||||
<p x-show="manga.length > 0">
|
||||
<span x-text="`${manga.length} manga found`"></span>
|
||||
<span :uk-icon="listManga ? 'chevron-down' : 'chevron-right'" @click="listManga = !listManga"></span>
|
||||
</p>
|
||||
|
||||
<div class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid x-show="listManga">
|
||||
<template x-for="m in manga" :key="m.id">
|
||||
<div class="item" :data-id="m.id" @click="mangaSelected($event)">
|
||||
<div class="uk-card uk-card-default">
|
||||
<div class="uk-card-media-top uk-inline">
|
||||
<img uk-img :data-src="m.cover_url">
|
||||
</div>
|
||||
<div class="uk-card-body">
|
||||
<h3 class="uk-card-title break-word uk-margin-remove-bottom free-height" x-text="m.title"></h3>
|
||||
<p class="uk-text-meta" x-text="`ID: ${m.id}`"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="uk-margin-large-top" x-show="chapters !== undefined">
|
||||
<h3 x-text="mangaTitle"></h3>
|
||||
<p x-text="`${chapters ? chapters.length : 0} chapters found`"></p>
|
||||
|
||||
<div class="uk-margin">
|
||||
<div x-show="chapters && chapters.length > 0 && chapters.length <= chaptersLimit">
|
||||
<button class="uk-button uk-button-default" @click="selectAll()">Select All</button>
|
||||
<button class="uk-button uk-button-default" @click="clearSelection()">Clear Selections</button>
|
||||
<button class="uk-button uk-button-primary" @click="download()">Download Selected</button>
|
||||
<button class="uk-icon-button uk-margin-small-left" uk-icon="settings" @click="showFilters = !showFilters"></button>
|
||||
</div>
|
||||
<div uk-spinner class="uk-margin-left" x-show="adding"></div>
|
||||
</div>
|
||||
|
||||
<form x-show="showFilters || (chapters && chapters.length > chaptersLimit)" class="uk-form-stacked uk-margin-bottom" id="filter-form">
|
||||
<template x-for="field in filters">
|
||||
<div class="uk-margin">
|
||||
<label class="uk-form-label">
|
||||
<span x-text="field.key"></span>
|
||||
<template x-if="field.type === 'number'">
|
||||
<span class="uk-text-meta" x-text="`(between ${Math.min(...field.values)} and ${Math.max(...field.values)})`"></span>
|
||||
</template>
|
||||
</label>
|
||||
|
||||
<div x-show="field.type === 'number'" class="uk-grid-small" uk-grid>
|
||||
<div class="uk-width-1-2@s">
|
||||
<input class="uk-input" placeholder="minimum value" :data-filter-key="field.key" data-filter-type="number-min">
|
||||
</div>
|
||||
<div class="uk-width-1-2@s">
|
||||
<input class="uk-input" placeholder="maximum value" :data-filter-key="field.key" data-filter-type="number-max">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="field.type === 'date'" class="uk-grid-small" uk-grid>
|
||||
<div class="uk-width-1-2@s">
|
||||
<input class="uk-input" type="date" placeholder="minimum date (yyyy-mm-dd)" :data-filter-key="field.key" data-filter-type="date-min">
|
||||
</div>
|
||||
<div class="uk-width-1-2@s">
|
||||
<input class="uk-input" type="date" placeholder="maximum date (yyyy-mm-dd)" :data-filter-key="field.key" data-filter-type="date-max">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input x-show="field.type === 'string'" class="uk-input" placeholder="filter text" :data-filter-key="field.key" data-filter-type="string">
|
||||
|
||||
<select class="uk-select" x-show="field.type === 'array'" :data-filter-key="field.key" data-filter-type="array">
|
||||
<option value="all">All</option>
|
||||
<template x-for="v in field.values" :key="v">
|
||||
<option x-text="v" :value="v"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
</template>
|
||||
<button class="uk-button uk-button-primary" @click.prevent="applyFilters()">Apply</button>
|
||||
<button class="uk-button uk-button-default" @click.prevent="clearFilters()">Clear</button>
|
||||
<span class="uk-divider-vertical uk-margin-left uk-margin-right"></span>
|
||||
<button class="uk-button uk-button-default" @click.prevent="UIkit.modal($refs.modal).show()" :disable="subscribing">Subscribe</button>
|
||||
</form>
|
||||
|
||||
<p class="uk-text-meta" x-show="chapters && chapters.length > chaptersLimit" x-text="`The manga has ${chapters ? chapters.length : 0} chapters, but Mango can only list up to ${chaptersLimit}. Please use the filters to narrow down your search.`"></p>
|
||||
<p x-show="chapters && chapters.length === 0" class="uk-text-meta">No chapters found.</p>
|
||||
|
||||
<div x-show="chapters && chapters.length > 0 && chapters.length <= chaptersLimit">
|
||||
<p class="uk-text-meta">Click on a table row to select the chapter. Drag your mouse over multiple rows to select them all. Hold Ctrl to make multiple non-adjacent selections.</p>
|
||||
<div class="uk-overflow-auto">
|
||||
<table class="uk-table uk-table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<template x-for="(k, idx) in chapterKeys" :key="k">
|
||||
<th :id="`th-${idx}`" @click="thClicked($event)">
|
||||
<span x-text="k"></span>
|
||||
<i class="fas fa-sort" x-show="![1, -1].includes(sortOptions[idx])"></i>
|
||||
<i class="fas fa-sort-up" x-show="sortOptions[idx] === 1"></i>
|
||||
<i class="fas fa-sort-down" x-show="sortOptions[idx] === -1"></i>
|
||||
</th>
|
||||
</template>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="selectable">
|
||||
<template x-if="chapters !== undefined && chapters.length < chaptersLimit">
|
||||
<template x-for="ch in chapters" :key="ch">
|
||||
<tr class="ui-widget-content" :id="ch.id">
|
||||
<template x-for="k in chapterKeys" :key="k">
|
||||
<td x-html="renderCell(ch[k])"></td>
|
||||
</template>
|
||||
</tr>
|
||||
</template>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dl class="uk-description-list" id="toggle" hidden>
|
||||
<% plugin.not_nil!.info.each do |k, v| %>
|
||||
<dt><%= k %></dt>
|
||||
<dd><%= v.to_s %></dd>
|
||||
<% end %>
|
||||
</dl>
|
||||
|
||||
<div id="table" class="uk-margin-large-top" hidden>
|
||||
<h3 id="title-text"></h3>
|
||||
|
||||
<div class="uk-margin">
|
||||
<button class="uk-button uk-button-default" onclick="selectAll()">Select All</button>
|
||||
<button class="uk-button uk-button-default" onclick="unselect()">Clear Selections</button>
|
||||
<button class="uk-button uk-button-primary" id="download-btn" onclick="download()">Download Selected</button>
|
||||
<div id="download-spinner" uk-spinner class="uk-margin-left" hidden></div>
|
||||
</div>
|
||||
<p class="uk-text-meta">Click on a table row to select the chapter. Drag your mouse over multiple rows to select them all. Hold Ctrl to make multiple non-adjacent selections.</p>
|
||||
<div class="uk-overflow-auto">
|
||||
<table class="uk-table uk-table-striped tablesorter">
|
||||
</table>
|
||||
<div uk-modal="container:false" x-ref="modal">
|
||||
<div class="uk-modal-dialog">
|
||||
<div class="uk-modal-header">
|
||||
<h2 class="uk-modal-title">Subscription Confirmation</h2>
|
||||
</div>
|
||||
<div class="uk-modal-body">
|
||||
<p>A subscription with the following filters with be created. All <strong>FUTURE</strong> chapters matching the filters will be automatically downloaded.</p>
|
||||
<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 filterSettings" :key="ft">
|
||||
<tr x-html="renderFilterRow(ft)"></tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Enter a meaningful name for the subscription to continue:</p>
|
||||
<input class="uk-input" type="text" x-model="subscriptionName">
|
||||
</div>
|
||||
<div class="uk-modal-footer uk-text-right">
|
||||
<button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
|
||||
<button class="uk-button uk-button-primary" type="button" :disabled="subscriptionName.trim().length === 0" @click="subscribe($refs.modal)">Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
</div>
|
||||
|
||||
<% content_for "script" do %>
|
||||
<% if plugin %>
|
||||
<script>
|
||||
var pid = "<%= plugin.not_nil!.info.id %>";
|
||||
</script>
|
||||
<% end %>
|
||||
<%= render_component "jquery-ui" %>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.combined.min.js"></script>
|
||||
<%= render_component "moment" %>
|
||||
<script src="<%= base_url %>js/alert.js"></script>
|
||||
<script src="<%= base_url %>js/plugin-download.js"></script>
|
||||
<% end %>
|
||||
|
||||
@@ -0,0 +1,101 @@
|
||||
<h2 class=uk-title>Subscription Manager</h2>
|
||||
<div x-data="component()" x-init="init()">
|
||||
<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%">
|
||||
<h2>No Plugins Found</h2>
|
||||
<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>
|
||||
</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 Title</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_title)"></td>
|
||||
<td x-html="renderDateCell(sub.created_at)"></td>
|
||||
<td x-html="renderDateCell(sub.last_checked)"></td>
|
||||
<td>
|
||||
<a @click.prevent.stop="actionHandler($event, 'delete')" uk-icon="trash" uk-tooltip="Delete" :disabled="loading"></a>
|
||||
<a @click.prevent.stop="actionHandler($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 Title</dt>
|
||||
<dd x-html="subscription && subscription.manga_title"></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>
|
||||
|
||||
<% content_for "script" do %>
|
||||
<%= render_component "moment" %>
|
||||
<script src="<%= base_url %>js/alert.js"></script>
|
||||
<script src="<%= base_url %>js/subscription-manager.js"></script>
|
||||
<% end %>
|
||||
@@ -1,54 +0,0 @@
|
||||
<h2 class="uk-title">MangaDex Subscription Manager</h2>
|
||||
|
||||
<div x-data="component()" x-init="init()">
|
||||
<p x-show="available === false">The subscription manager uses a MangaDex API that requires authentication. Please <a href="<%= base_url %>admin/mangadex">connect to MangaDex</a> before using this feature.</p>
|
||||
|
||||
<p x-show="available && subscriptions.length === 0">No subscription found. Go to the <a href="<%= base_url %>download">MangaDex download page</a> and start subscribing.</p>
|
||||
|
||||
<template x-if="subscriptions.length > 0">
|
||||
<div class="uk-overflow-auto">
|
||||
<table class="uk-table uk-table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Manga ID</th>
|
||||
<th>Language</th>
|
||||
<th>Group ID</th>
|
||||
<th>Volume Range</th>
|
||||
<th>Chapter Range</th>
|
||||
<th>Creator</th>
|
||||
<th>Last Checked</th>
|
||||
<th>Created At</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template x-for="sub in subscriptions" :key="sub">
|
||||
<tr>
|
||||
<td><a :href="`<%= mangadex_base_url %>/manga/${sub.manga_id}`" x-text="sub.manga_id"></a></td>
|
||||
<td x-text="sub.language || 'All'"></td>
|
||||
<td>
|
||||
<a x-show="sub.group_id" :href="`<%= mangadex_base_url %>/group/${sub.group_id}`" x-text="sub.group_id"></a>
|
||||
<span x-show="!sub.group_id">All</span>
|
||||
</td>
|
||||
<td x-text="formatRange(sub.min_volume, sub.max_volume)"></td>
|
||||
<td x-text="formatRange(sub.min_chapter, sub.max_chapter)"></td>
|
||||
<td x-text="sub.username"></td>
|
||||
<td x-text="`${moment.unix(sub.last_checked).fromNow()}`"></td>
|
||||
<td x-text="`${moment.unix(sub.created_at).fromNow()}`"></td>
|
||||
<td :data-id="sub.id">
|
||||
<a @click="check($event)" x-show="sub.username === '<%= username %>'" uk-icon="refresh" uk-tooltip="Check for updates"></a>
|
||||
<a @click="rm($event)" x-show="sub.username === '<%= username %>'" uk-icon="trash" uk-tooltip="Delete"></a>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<% content_for "script" do %>
|
||||
<%= render_component "moment" %>
|
||||
<script src="<%= base_url %>js/alert.js"></script>
|
||||
<script src="<%= base_url %>js/subscription.js"></script>
|
||||
<% end %>
|
||||
Reference in New Issue
Block a user