8bd6ad4c2b
Added the manga sources to the settings page and added a field to set the rate limit, POST api for setting the rate limit awaiting GET api calls to set initial value.
270 lines
14 KiB
HTML
270 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Tranga</title>
|
||
<link id='basestyle' rel="stylesheet" href="styles/base.css">
|
||
<link id='librarystyle' rel="stylesheet" href="styles/style_default.css">
|
||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||
</head>
|
||
<body>
|
||
<wrapper>
|
||
|
||
<topbar>
|
||
<titlebox>
|
||
<img alt="website image is Blahaj" src="media/blahaj.png">
|
||
<span>Tranga</span>
|
||
</titlebox>
|
||
<spacer></spacer>
|
||
<img id="filterFunnel" src="media/filter-funnel.svg" height="50%" alt="filterFunnel">
|
||
<img id="settingscog" src="media/settings-cogwheel.svg" height="100%" alt="settingscog">
|
||
</topbar>
|
||
|
||
<filter-box id="filterBox">
|
||
<border-bar>
|
||
<popup-title>Filter by: </popup-title>
|
||
<popup-close onclick="filterBox.classList.toggle('animate')" >×</popup-close>
|
||
</border-bar>
|
||
<popup-content id="filterContent">
|
||
<div class="popup-section">
|
||
NAME:
|
||
<div class="section-content">
|
||
<label for="searchbox"></label><input id="searchbox" placeholder="Title" type="text">
|
||
</div>
|
||
</div>
|
||
<div class = "popup-section">
|
||
CONNECTOR:
|
||
<div class="section-content" id="connectorFilterBox">
|
||
</div>
|
||
</div>
|
||
<div class = "popup-section">
|
||
STATUS:
|
||
<div class="section-content" id="statusFilterBox">
|
||
</div>
|
||
</div>
|
||
</popup-content>
|
||
<border-bar-button onclick="ClearFilter()" class="clearFilter">Clear Filter</border-bar-button>
|
||
</filter-box>
|
||
|
||
|
||
<viewport>
|
||
<div id="loaderdiv">
|
||
<blur-background></blur-background>
|
||
<div id="loader"></div>
|
||
<p id="loaderText">Check your Settings > API-URI</p>
|
||
</div>
|
||
<content>
|
||
<div id="addPublication">
|
||
<p>+</p>
|
||
</div>
|
||
<publication onclick="ShowNewMangaSearch()">
|
||
<img alt="cover" src="media/cover.jpg">
|
||
<publication-information>
|
||
<connector-name class="pill">Sample</connector-name>
|
||
<publication-name>Best Manga there is</publication-name>
|
||
</publication-information>
|
||
</publication>
|
||
</content>
|
||
|
||
<popup id="newMangaPopup">
|
||
<blur-background id="blurBackgroundNewMangaPopup" onclick="newMangaPopup.style.display = 'none';"></blur-background>
|
||
<div id="newMangaPopupSelector">
|
||
<select id="newMangaConnector" />
|
||
<input type="text" placeholder="Title" id="newMangaTitle" />
|
||
<select id="newMangaTranslatedLanguage">
|
||
<option selected="selected">en</option>
|
||
<option>it</option>
|
||
<option>de</option>
|
||
</select>
|
||
</div>
|
||
<div id="newMangaResult"></div>
|
||
</popup>
|
||
|
||
<popup id="settingsPopup">
|
||
<blur-background id="blurBackgroundSettingsPopup" onclick="settingsPopup.style.display = 'none';"></blur-background>
|
||
<popup-window>
|
||
<border-bar>
|
||
<popup-title>Settings</popup-title>
|
||
<popup-close onclick="settingsPopup.style.display = 'none'">×</popup-close>
|
||
</border-bar>
|
||
<popup-content>
|
||
|
||
<div class="popup-section">
|
||
TRANGA
|
||
</div>
|
||
|
||
<div class="popup-section">
|
||
MANGA SOURCES
|
||
<div class="section-content">
|
||
<div class="section-item manga">
|
||
<span class="title"><img src="connector-icons/manganato.png"><a href="https://manganato.com">MangaNato</a></span>
|
||
<row><label for="manganatoRL">Rate Limit: </label><input placeholder="60 Requests/Minute" id="manganatoRL" type="text"></row>
|
||
</div>
|
||
<div class="section-item manga">
|
||
<span class="title"><img src="connector-icons/mangasee.png"><a href="https://mangasee123.com">MangaSee</a></span>
|
||
<row><label for="mangaseeRL">Rate Limit: </label><input placeholder="60 Requests/Minute" id="mangaseeRL" type="text"></row>
|
||
</div>
|
||
<div class="section-item manga">
|
||
<span class="title"><img src="connector-icons/mangadex-logo.svg"><a href="https://mangadex.org">MangaDex</a></span>
|
||
<row><label for="mDexRL">Rate Limit: </label><input placeholder="60 Requests/Minute" id="mDexRL" type="text"></row>
|
||
</div>
|
||
<div class="section-item manga">
|
||
<span class="title"><img src="connector-icons/mangakatana.png"><a href="https://mangakatana.com">MangaKatana</a></span>
|
||
<row><label for="mKatanaRL">Rate Limit: </label><input placeholder="60 Requests/Minute" id="mKatanaRL" type="text"></row>
|
||
</div>
|
||
<div class="section-item manga">
|
||
<span class="title"><img src="connector-icons/mangaworld.png"><a href="https://www.mangaworld.ac">MangaWorld</a></span>
|
||
<row><label for="mWorldRL">Rate Limit: </label><input placeholder="60 Requests/Minute" id="mWorldRL" type="text"></row>
|
||
</div>
|
||
<div class="section-item manga">
|
||
<span class="title"><img src="connector-icons/bato.ico"><a href="https://bato.to">Bato</a></span>
|
||
<row><label for="batoRL">Rate Limit: </label><input placeholder="60 Requests/Minute" id="batoRL" type="text"></row>
|
||
</div>
|
||
<div class="section-item manga">
|
||
<span class="title"><img src="connector-icons/mangalife.png"><a href="https://www.manga4life.com">MangaLife</a></span>
|
||
<row><label for="mLifeRL">Rate Limit: </label><input placeholder="60 Requests/Minute" id="mLifeRL" type="text"></row>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="popup-section">
|
||
LIBRARY CONNECTORS
|
||
<div class="section-content">
|
||
<div class="section-item">
|
||
<span class="title"><img src='connector-icons/komga.svg'>Komga<connector-configured id="komgaConfigured"></connector-configured></span>
|
||
<label for="komgaUrl"></label><input placeholder="URL" id="komgaUrl" type="text">
|
||
<label for="komgaUsername"></label><input placeholder="Username" id="komgaUsername" type="text">
|
||
<label for="komgaPassword"></label><input placeholder="Password" id="komgaPassword" type="password">
|
||
<div class="section-buttons-container">
|
||
<span onclick="TestKomga(komgaUrl.value, utf8_to_b64(`${komgaUsername.value}:${komgaPassword.value}`))" class='section-button' id="test-connector">Test</span>
|
||
<span onclick="ClearKomga()" class='section-button' id="reset">Reset</span>
|
||
<span onclick="UpdateKomga(komgaUrl.value, utf8_to_b64(`${komgaUsername.value}:${komgaPassword.value}`))" class='section-button'>Apply</span>
|
||
</div>
|
||
</div>
|
||
<div class="section-item">
|
||
<span class="title"><img src='connector-icons/kavita.png'>Kavita<connector-configured id="kavitaConfigured"></connector-configured></span>
|
||
<label for="kavitaUrl"></label><input placeholder="URL" id="kavitaUrl" type="text">
|
||
<label for="kavitaUsername"></label><input placeholder="Username" id="kavitaUsername" type="text">
|
||
<label for="kavitaPassword"></label><input placeholder="Password" id="kavitaPassword" type="password">
|
||
<div class="section-buttons-container">
|
||
<span onclick="TestKavita(kavitaUrl.value, kavitaUsername.value, kavitaPassword.value)" class='section-button' id="test-connector">Test</span>
|
||
<span onclick="ClearKavita()" class='section-button' id="reset">Reset</span>
|
||
<span onclick="UpdateKavita(kavitaUrl.value, kavitaUsername.value, kavitaPassword.value)" class='section-button'>Apply</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="popup-section">
|
||
NOTIFICATION CONNECTORS
|
||
<div class="section-content">
|
||
<div class="section-item">
|
||
<span class="title"><img src='connector-icons/gotify-logo.png'>Gotify<connector-configured id="gotifyConfigured"></connector-configured></span>
|
||
<label for="gotifyUrl"></label><input placeholder="URL" id="gotifyUrl" type="text">
|
||
<label for="gotifyAppToken"></label><input placeholder="App-Token" id="gotifyAppToken" type="text">
|
||
<div class="section-buttons-container">
|
||
<span onclick="TestGotify(gotifyUrl.value, gotifyAppToken.value)" class='section-button' id="test-connector">Test</span>
|
||
<span onclick="ClearGotify()" class='section-button' id="reset">Reset</span>
|
||
<span onclick="UpdateGotify(gotifyUrl.value, gotifyAppToken.value)" class='section-button'>Apply</span>
|
||
</div>
|
||
</div>
|
||
<div class="section-item">
|
||
<span class="title"><img src='connector-icons/lunasea.png'>LunaSea<connector-configured id="lunaseaConfigured"></connector-configured></span>
|
||
<label for="lunaseaWebhook"></label><input placeholder="device/:id or user/:id" id="lunaseaWebhook" type="text">
|
||
<div class="section-buttons-container">
|
||
<span onclick="TestLunaSea(lunaseaWebhook.value);" class='section-button' id="test-connector">Test</span>
|
||
<span onclick="ClearLunasea()" class='section-button' id="reset">Reset</span>
|
||
<span onclick="UpdateLunaSea(lunaseaWebhook.value);" class='section-button'>Apply</span>
|
||
</div>
|
||
</div>
|
||
<div class="section-item">
|
||
<span class="title"><img src='connector-icons/ntfy.svg'>Ntfy<connector-configured id="ntfyConfigured"></connector-configured></span>
|
||
<label for="ntfyEndpoint"></label><input placeholder="URL" id="ntfyEndpoint" type="text">
|
||
<label for="ntfyAuth"></label><input placeholder="Auth" id="ntfyAuth" type="text">
|
||
<div class="section-buttons-container">
|
||
<span onclick="TestNtfy(ntfyEndpoint.value, ntfyAuth.value);" class='section-button' id="test-connector">Test</span>
|
||
<span onclick="ClearNtfy()" class='section-button' id="reset">Reset</span>
|
||
<span onclick="UpdateNtfy(ntfyEndpoint.value, ntfyAuth.value);" class='section-button'>Apply</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<p class="title">Download Location:</p>
|
||
<span id="downloadLocation"></span>
|
||
</div>
|
||
<div>
|
||
<p class="title">API-URI</p>
|
||
<label for="settingApiUri"></label><input placeholder="https://" type="text" id="settingApiUri">
|
||
</div>
|
||
<div>
|
||
<span class="title">UserAgent</span><br />
|
||
<label for="userAgent"></label><input style="width: 400px" placeholder="UserAgent" id="userAgent" type="text">
|
||
</div>
|
||
<div>
|
||
<input type="checkbox" id="mangaHoverCheckbox" name="css-style" value="style_mangahover.css" onclick="updateCSS()">
|
||
<label for="css-style"> Show manga titles and sources on hover</label><br>
|
||
</div>
|
||
</popup-content>
|
||
<border-bar>
|
||
<div class="button-container">
|
||
<border-bar-button onclick="RefreshLibraryMetadata()">Refresh Library Metadata</border-bar-button>
|
||
<border-bar-button class="primary" onclick="UpdateSettings()">Apply Settings</border-bar-button>
|
||
</div>
|
||
</border-bar>
|
||
|
||
</popup-window>
|
||
</popup>
|
||
|
||
<popup id="publicationViewerPopup">
|
||
<blur-background id="blurBackgroundPublicationPopup" onclick="publicationViewerPopup.style.display= 'none';"></blur-background>
|
||
<publication-viewer>
|
||
<img id="pubviewcover" src="media/cover.jpg" alt="cover">
|
||
<publication-details>
|
||
<publication-name id="publicationViewerName">Best Manga there is</publication-name>
|
||
<publication-tags id="publicationViewerTags">A Manga</publication-tags>
|
||
<publication-author id="publicationViewerAuthor">Glax</publication-author>
|
||
<publication-description id="publicationViewerDescription">
|
||
An interesting description. The description is very intriguing, yet wholesome.
|
||
</publication-description>
|
||
<publication-interactions>
|
||
<publication-starttask id="startJobButton">Start Job ▶️</publication-starttask>
|
||
<publication-canceltask id="cancelJobButton">Cancel Job ❌</publication-canceltask>
|
||
<publication-delete id="deleteJobButton">Delete Job 🗑️</publication-delete>
|
||
<publication-add id="createMonitorJobButton">Monitor ➕</publication-add>
|
||
<publication-add id="createDownloadChapterJobButton">Download Chapter 📥</publication-add>
|
||
</publication-interactions>
|
||
</publication-details>
|
||
</publication-viewer>
|
||
</popup>
|
||
|
||
<popup id="jobStatusView">
|
||
<blur-background id="blurBackgroundJobStatus" onclick="jobStatusView.style.display= 'none';"></blur-background>
|
||
<popup-window>
|
||
<div>
|
||
<div id="jobStatusRunning" style="border-right: 1px solid gray;"></div>
|
||
</div>
|
||
<div>
|
||
<div id="jobStatusWaiting" style="border-left: 1px solid gray;"></div>
|
||
</div>
|
||
</popup-window>
|
||
</popup>
|
||
</viewport>
|
||
|
||
<footer>
|
||
<div onclick="ShowJobQueue();">
|
||
<img src="media/running.svg" alt="running"><div id="jobsRunningTag">0</div>
|
||
</div>
|
||
<div onclick="ShowJobQueue();">
|
||
<img src="media/queue.svg" alt="queue"><div id="jobsQueuedTag">0</div>
|
||
</div>
|
||
<p id="madeWith">Made with Blåhaj 🦈</p>
|
||
</footer>
|
||
</wrapper>
|
||
|
||
<script src="apiConnector.js"></script>
|
||
<script src="interaction.js"></script>
|
||
</body>
|
||
</html> |