Tranga-Website/Website/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tranga</title>
  <link id='pagestyle' 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>
          <titlebar>
            <popup-title>Settings</popup-title>
            <popup-close onclick="settingsPopup.style.display = 'none'">&times</popup-close>
          </titlebar>
          <popup-content>
            <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">Komga</span>
              <div>Configured: <span id="komgaConfigured">✅❌</span></div>
              <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>
            <div>
              <span class="title">Kavita</span>
              <div>Configured: <span id="kavitaConfigured">✅❌</span></div>
              <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>
            <div>
              <span class="title">Gotify</span>
              <div>Configured: <span id="gotifyConfigured">✅❌</span></div>
              <label for="gotifyUrl"></label><input placeholder="URL" id="gotifyUrl" type="text">
              <label for="gotifyAppToken"></label><input placeholder="App-Token" id="gotifyAppToken" type="text">
            </div>
            <div>
              <span class="title">LunaSea</span>
              <div>Configured: <span id="lunaseaConfigured">✅❌</span></div>
              <label for="lunaseaWebhook"></label><input placeholder="device/:id or user/:id" id="lunaseaWebhook" type="text">
            </div>
            <div>
              <span class="title">Ntfy</span>
              <div>Configured: <span id="ntfyConfigured">✅❌</span></div>
              <label for="ntfyEndpoint"></label><input placeholder="URL" id="ntfyEndpoint" type="text">
              <label for="ntfyAuth"></label><input placeholder="Auth" id="ntfyAuth" type="text">
            </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>
            <div>
              <input type="submit" value="Refresh Library Metadata" style="width: fit-content;"onclick="RefreshLibraryMetadata()">
            </div>
          </popup-content>
          <titlebar>
              <apply-settings onclick="UpdateSettings()">Apply Settings</apply-settings>
          </titlebar>
        </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>
-												#1 First commit
It do be uglyyyyy

											
										
										
											2023-05-22 22:25:50 +02:00
+								<!DOCTYPE html>
 								<html lang="en">
 								<head>
 								  <meta charset="UTF-8">
 								  <title>Tranga</title>
-												Added api calls for setting css stylesheet

											
										
										
											2023-10-27 05:23:08 +02:00
+								  <link id='pagestyle' rel="stylesheet" href="styles/style_default.css">
-												favicon

											
										
										
											2023-05-31 17:52:47 +02:00
+								  <link rel="icon" type="image/x-icon" href="favicon.ico">
-												#1 First commit
It do be uglyyyyy

											
										
										
											2023-05-22 22:25:50 +02:00
+								</head>
 								<body>
-												resolves #26

											
										
										
											2023-05-25 21:58:45 +02:00
+								  <wrapper>
 								    <topbar>
 								      <titlebox>
-												alt and label

											
										
										
											2023-05-31 22:16:01 +02:00
+								        <img alt="website image is Blahaj" src="media/blahaj.png">
-												resolves #26

											
										
										
											2023-05-25 21:58:45 +02:00
+								        <span>Tranga</span>
 								      </titlebox>
 								      <spacer></spacer>
 								      <searchdiv>
-												alt and label

											
										
										
											2023-05-31 22:16:01 +02:00
+								        <label for="searchbox"></label><input id="searchbox" placeholder="Filter" type="text">
-												resolves #26

											
										
										
											2023-05-25 21:58:45 +02:00
+								      </searchdiv>
 								      <img id="settingscog" src="media/settings-cogwheel.svg" height="100%" alt="settingscog">
 								    </topbar>
 								    <viewport>
-												Added loader-circle

											
										
										
											2023-09-08 16:32:09 +02:00
+								      <div id="loaderdiv">
 								        <blur-background></blur-background>
 								        <div id="loader"></div>
 								        <p id="loaderText">Check your Settings > API-URI</p>
 								      </div>
-												resolves #26

											
										
										
											2023-05-25 21:58:45 +02:00
+								      <content>
 								        <div id="addPublication">
 								          <p>+</p>
-												Removed Sidebar
Moved settings tab to popup
Added footer

											
										
										
											2023-05-25 15:34:10 +02:00
+								        </div>
-												First steps to add new MonitorJobs

											
										
										
											2023-08-31 23:45:13 +02:00
+								        <publication onclick="ShowNewMangaSearch()">
-												Website:
New task-Creation dialog
Redesigned Settings dialog

											
										
										
											2023-06-08 19:25:28 +02:00
+								          <img alt="cover" src="media/cover.jpg">
-												resolves #26

											
										
										
											2023-05-25 21:58:45 +02:00
+								          <publication-information>
-												Sample Manga

											
										
										
											2023-09-02 13:48:23 +02:00
+								            <connector-name class="pill">Sample</connector-name>
 								            <publication-name>Best Manga there is</publication-name>
-												resolves #26

											
										
										
											2023-05-25 21:58:45 +02:00
+								          </publication-information>
 								        </publication>
 								      </content>
-												Website:
New task-Creation dialog
Redesigned Settings dialog

											
										
										
											2023-06-08 19:25:28 +02:00
-												First steps to add new MonitorJobs

											
										
										
											2023-08-31 23:45:13 +02:00
+								      <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" />
-												c9glax/tranga#50

Added ability to select translated language

											
										
										
											2023-09-13 14:30:13 +02:00
+								          <select id="newMangaTranslatedLanguage">
 								            <option selected="selected">en</option>
 								            <option>it</option>
 								            <option>de</option>
 								          </select>
-												First steps to add new MonitorJobs

											
										
										
											2023-08-31 23:45:13 +02:00
+								        </div>
 								        <div id="newMangaResult"></div>
 								      </popup>
-												resolves #26

											
										
										
											2023-05-25 21:58:45 +02:00
+								      <popup id="settingsPopup">
-												working settings Popup

											
										
										
											2023-08-31 16:45:33 +02:00
+								        <blur-background id="blurBackgroundSettingsPopup" onclick="
 								    settingsPopup.style.display = 'none';"></blur-background>
-												Website:
New task-Creation dialog
Redesigned Settings dialog

											
										
										
											2023-06-08 19:25:28 +02:00
+								        <popup-window>
-												Initial commit

Resized settings pop-up and fixed scrollable behavior, broke everything inside pop-up (on purpose)

											
										
										
											2024-02-03 06:41:12 +01:00
+								          <titlebar>
 								            <popup-title>Settings</popup-title>
 								            <popup-close onclick="settingsPopup.style.display = 'none'">&times</popup-close>
 								          </titlebar>
-												Website:
New task-Creation dialog
Redesigned Settings dialog

											
										
										
											2023-06-08 19:25:28 +02:00
+								          <popup-content>
 								            <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">Komga</span>
 								              <div>Configured: <span id="komgaConfigured">✅❌</span></div>
 								              <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>
 								            <div>
 								              <span class="title">Kavita</span>
 								              <div>Configured: <span id="kavitaConfigured">✅❌</span></div>
 								              <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>
-												Website: Added gotify config

											
										
										
											2023-06-15 18:38:47 +02:00
+								            <div>
 								              <span class="title">Gotify</span>
 								              <div>Configured: <span id="gotifyConfigured">✅❌</span></div>
 								              <label for="gotifyUrl"></label><input placeholder="URL" id="gotifyUrl" type="text">
 								              <label for="gotifyAppToken"></label><input placeholder="App-Token" id="gotifyAppToken" type="text">
 								            </div>
-												Website: Added connector NotificationManager LunaSea
Added Update Method for TrangaSettings for LunaSea
#21

											
										
										
											2023-06-15 18:57:21 +02:00
+								            <div>
 								              <span class="title">LunaSea</span>
 								              <div>Configured: <span id="lunaseaConfigured">✅❌</span></div>
-												LunaSea changed to id device/id or user/id instead of full url

											
										
										
											2023-06-21 18:03:48 +02:00
+								              <label for="lunaseaWebhook"></label><input placeholder="device/:id or user/:id" id="lunaseaWebhook" type="text">
-												Added empty <div> and set stylesheet on Setup(),

Added an empty <div> to mitigate merge conflicts. Running GetSettings in Setup so that the webpage CSS is set up whenever the website runs for the first time and not just when the settings get opened. This shouldn't cause any issues even though setup is called a few times throughout the code.

											
										
										
											2023-10-27 16:48:08 +02:00
+								            </div>
-												https://github.com/C9Glax/tranga/issues/73 Website untested

											
										
										
											2023-10-27 13:55:42 +02:00
+								            <div>
 								              <span class="title">Ntfy</span>
 								              <div>Configured: <span id="ntfyConfigured">✅❌</span></div>
 								              <label for="ntfyEndpoint"></label><input placeholder="URL" id="ntfyEndpoint" type="text">
 								              <label for="ntfyAuth"></label><input placeholder="Auth" id="ntfyAuth" type="text">
-												Website: Added connector NotificationManager LunaSea
Added Update Method for TrangaSettings for LunaSea
#21

											
										
										
											2023-06-15 18:57:21 +02:00
+								            </div>
-												https://github.com/C9Glax/tranga/issues/109

											
										
										
											2024-01-31 19:12:05 +01:00
+								            <div>
 								              <span class="title">UserAgent</span><br />
 								              <label for="userAgent"></label><input style="width: 400px" placeholder="UserAgent" id="userAgent" type="text">
 								            </div>
-												Added api calls for setting css stylesheet

											
										
										
											2023-10-27 05:23:08 +02:00
+								            <div>
-												Feature

											
										
										
											2023-11-02 18:31:48 +01:00
+								              <input type="checkbox" id="mangaHoverCheckbox" name="css-style" value="style_mangahover.css" onclick="updateCSS()">
-												Added api calls for setting css stylesheet

											
										
										
											2023-10-27 05:23:08 +02:00
+								              <label for="css-style"> Show manga titles and sources on hover</label><br>
 								            </div>
-												Added button to settings pop-up to refresh library metadata through POST request

											
										
										
											2023-11-02 19:28:28 +01:00
+								            <div>
 								              <input type="submit" value="Refresh Library Metadata" style="width: fit-content;"onclick="RefreshLibraryMetadata()">
 								            </div>
-												Website:
New task-Creation dialog
Redesigned Settings dialog

											
										
										
											2023-06-08 19:25:28 +02:00
+								          </popup-content>
-												Initial commit

Resized settings pop-up and fixed scrollable behavior, broke everything inside pop-up (on purpose)

											
										
										
											2024-02-03 06:41:12 +01:00
+								          <titlebar>
 								              <apply-settings onclick="UpdateSettings()">Apply Settings</apply-settings>
 								          </titlebar>
-												Website:
New task-Creation dialog
Redesigned Settings dialog

											
										
										
											2023-06-08 19:25:28 +02:00
+								        </popup-window>
-												resolves #26

											
										
										
											2023-05-25 21:58:45 +02:00
+								      </popup>
-												working settings Popup

											
										
										
											2023-08-31 16:45:33 +02:00
 									  <popup id="publicationViewerPopup">
-												Added onclick to hide PublicationViewer

											
										
										
											2023-09-01 23:42:52 +02:00
+								        <blur-background id="blurBackgroundPublicationPopup" onclick="publicationViewerPopup.style.display= 'none';"></blur-background>
-												working settings Popup

											
										
										
											2023-08-31 16:45:33 +02:00
+								        <publication-viewer>
 								          <img id="pubviewcover" src="media/cover.jpg" alt="cover">
-												Fixed publication-details pop-up

Renamed the pop-up for the publication details and then added CSS so it shows up on both style sheets.

											
										
										
											2023-10-26 15:24:50 +02:00
+								          <publication-details>
-												Changed SampleManga in preview and Task -> Job

											
										
										
											2023-09-02 14:13:58 +02:00
+								            <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.
-												working settings Popup

											
										
										
											2023-08-31 16:45:33 +02:00
+								            </publication-description>
 								            <publication-interactions>
-												Changed SampleManga in preview and Task -> Job

											
										
										
											2023-09-02 14:13:58 +02:00
+								              <publication-starttask id="startJobButton">Start Job ▶️</publication-starttask>
-												Added CancelJob

											
										
										
											2023-09-02 15:05:45 +02:00
+								              <publication-canceltask id="cancelJobButton">Cancel Job ❌</publication-canceltask>
 								              <publication-delete id="deleteJobButton">Delete Job 🗑️</publication-delete>
-												Changed SampleManga in preview and Task -> Job

											
										
										
											2023-09-02 14:13:58 +02:00
+								              <publication-add id="createMonitorJobButton">Monitor ➕</publication-add>
-												Added CancelJob

											
										
										
											2023-09-02 15:05:45 +02:00
+								              <publication-add id="createDownloadChapterJobButton">Download Chapter 📥</publication-add>
-												working settings Popup

											
										
										
											2023-08-31 16:45:33 +02:00
+								            </publication-interactions>
-												Fixed publication-details pop-up

Renamed the pop-up for the publication details and then added CSS so it shows up on both style sheets.

											
										
										
											2023-10-26 15:24:50 +02:00
+								          </publication-details>
-												working settings Popup

											
										
										
											2023-08-31 16:45:33 +02:00
+								        </publication-viewer>
-												Replaced Task-Progress-Tracking Window with more fancy one

											
										
										
											2023-06-09 23:46:10 +02:00
+								      </popup>
-												Added JobStatusView

Individual Jobs can now be cancelled

											
										
										
											2023-09-08 19:59:12 +02:00
 								      <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>
-												resolves #26

											
										
										
											2023-05-25 21:58:45 +02:00
+								    </viewport>
-												working settings Popup

											
										
										
											2023-08-31 16:45:33 +02:00
-												resolves #26

											
										
										
											2023-05-25 21:58:45 +02:00
+								    <footer>
-												Added updated to running and waiting jobs

											
										
										
											2023-09-02 16:16:29 +02:00
+								      <div onclick="ShowJobQueue();">
 								        <img src="media/running.svg" alt="running"><div id="jobsRunningTag">0</div>
-												resolves #26

											
										
										
											2023-05-25 21:58:45 +02:00
+								      </div>
-												Added updated to running and waiting jobs

											
										
										
											2023-09-02 16:16:29 +02:00
+								      <div onclick="ShowJobQueue();">
 								        <img src="media/queue.svg" alt="queue"><div id="jobsQueuedTag">0</div>
-												resolves #26

											
										
										
											2023-05-25 21:58:45 +02:00
+								      </div>
 								      <p id="madeWith">Made with Blåhaj 🦈</p>
 								    </footer>
 								  </wrapper>
-												CORS Error

											
										
										
											2023-05-23 12:51:21 +02:00
+								  <script src="apiConnector.js"></script>
-												#1 Basic layout and colors

											
										
										
											2023-05-22 23:52:35 +02:00
+								  <script src="interaction.js"></script>
-												#1 First commit
It do be uglyyyyy

											
										
										
											2023-05-22 22:25:50 +02:00
+								</body>
 								</html>