148af6abaa
Removed textbox in top bar and added filter icon that opens up a box where you can search or select a connector/status and combination to filter by. Appearance and behavior needs to be refined.
239 lines
12 KiB
HTML
239 lines
12 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>
|
||
<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>
|
||
|
||
<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> |