f50990dafb
Added Test and Rest API calls, API side will need to be updated. Separated out CSS files for future expansion.
213 lines
11 KiB
HTML
213 lines
11 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>
|
||
<searchdiv>
|
||
<label for="searchbox"></label><input id="searchbox" placeholder="Filter" type="text">
|
||
</searchdiv>
|
||
<img id="settingscog" src="media/settings-cogwheel.svg" height="100%" alt="settingscog">
|
||
</topbar>
|
||
<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>
|
||
|
||
<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> |