(maint) improve ui readability and ux

tphoney · Mar 14, 2024 · df7ccae · df7ccae
1 parent 3fa4541
commit df7ccae
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/web/index.html b/web/index.html
@@ -83,14 +83,21 @@
 
 <body>
  <h1 class="container">Plex lookup</h1>
- <p class="container">This is a simple tool to look up movies in a Plex library and find them on Amazon or Cinema
- Paradiso.</p>
+ <p class="container">Connect to your Plex library and scan your movies. Then search for Higher quality
+ versions of them (Blu-ray, 4k Blu-ray) on Amazon or CinemaParadiso. </p>
  <form hx-post="/process" class="container">
- <p class="container">Enter the Plex server IP, library ID and token to get a list of all movies in the library.
+ <p class="container">Enter the <em
+ data-tooltip="Find your Plex server IP by going to your server then go to settings, then remote-access. It is the private IP address."><a
+ href="https://plex.tv/web" target="_blank">Plex
+ Server IP</a></em>, <em data-tooltip="Find your X-Plex-Token by following this guide.
+ "><a href="https://support.plex.tv/articles/204059436-finding-an-authentication-token-x-plex-token/"
+ target="_blank">Plex X-Plex-Token </a></em> and <em
+ data-tooltip="Use the same approach as for the X-Plex-Token. Select a Movie, view its XML then look for `librarySectionID` it should be a number.">Plex
+ Movie Library ID</em> and to get started.
  </p>
- <input type="text" placeholder="Plex server IP" name="plexIP">
- <input type="text" placeholder="Plex Library ID" name="plexLibraryID">
- <input type="text" placeholder="Plex Token" name="plexToken">
+ <input type="text" placeholder="Plex Server IP" name="plexIP">
+ <input type="text" placeholder="Plex X-Plex-Token" name="plexToken">
+ <input type="text" placeholder="Plex Library Section ID" name="plexLibraryID">
  <fieldset>
  <legend><strong>Lookup</strong></legend>
  <label for="amazon">
@@ -102,7 +109,7 @@ <h1 class="container">Plex lookup</h1>
  Cinema Paradiso
  </label>
  </fieldset>
- <button type="submit">Submit</button>
+ <button type="submit" data-tooltip="Tooltip">Submit</button>
  </form>
  <div hx-get="/progress" hx-trigger="every 500ms" class="container"></div>
 </body>

diff --git a/web/web.go b/web/web.go
@@ -81,7 +81,7 @@ func StartServer() {
 
 func renderTable(movieCollection []types.MovieSearchResults) (tableRows string) {
  tableRows = `<h2 class="container">Results</h2>`
- tableRows += `<tr><th onclick="sortTable(0,false)"><strong>Plex Title</strong></th><th onclick="sortTable(1,true)"><strong>Blu-ray</strong></th><th onclick="sortTable(2,true)"><strong>4K-ray</strong></th><th><strong>Disc</strong></th></tr>` //nolint: lll
+ tableRows += `<tr><th onclick="sortTable(0,false)"><strong>Plex Title ↕</strong></th><th onclick="sortTable(1,true)"><strong>Blu-ray ↕</strong></th><th onclick="sortTable(2,true)"><strong>4K-ray ↕</strong></th><th><strong>Disc</strong></th></tr>` //nolint: lll
  for _, movie := range movieCollection {
  tableRows += fmt.Sprintf(
  `<tr><td><a href=%q target="_blank">%s [%v]</a></td><td>%d</td><td>%d</td>`,