diff options
| author | cglatot <[email protected]> | 2019-11-28 18:53:01 +0000 |
|---|---|---|
| committer | GitHub <[email protected]> | 2019-11-28 18:53:01 +0000 |
| commit | 71ede15fbfb90f4daa8881484a626e6c8b447e7d (patch) | |
| tree | 691e8cbfade8b6ca24605f9e598b6171c839affd /index.html | |
| parent | 8557f5a491ce7562ebf675950d5440591e0387c7 (diff) | |
| download | pasta-71ede15fbfb90f4daa8881484a626e6c8b447e7d.tar.gz pasta-71ede15fbfb90f4daa8881484a626e6c8b447e7d.zip | |
Change to tabs
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 346 |
1 files changed, 175 insertions, 171 deletions
@@ -84,193 +84,197 @@ <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a> </li> </ul> - <div class="tab-content" id="myTabContent"> - <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div> - <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div> - <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div> - </div> + <!-- / TABS --> - <!-- PLEX LOGIN FORM --> - <div class="row"> - <div class="col"> - <div class="form-group"> - <label for="plexUrl">Plex URL</label> - <input type="email" class="form-control" id="plexUrl" aria-describedby="emailHelp" placeholder="http://192.168.0.1:32400"> - <small id="emailHelp" class="form-text text-muted">This must be a local server, or a server addressable by IP.</small> + <!-- TAB CONTENT --> + <div class="tab-content" id="myTabContent"> + <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"> + <!-- PLEX LOGIN FORM --> + <div class="row"> + <div class="col"> + <div class="form-group"> + <label for="plexUrl">Plex URL</label> + <input type="email" class="form-control" id="plexUrl" aria-describedby="emailHelp" placeholder="http://192.168.0.1:32400"> + <small id="emailHelp" class="form-text text-muted">This must be a local server, or a server addressable by IP.</small> + </div> + <div class="form-group"> + <label for="plexToken">Plex Token</label> + <input type="text" class="form-control" id="plexToken" placeholder="X-Plex-Token"> + <small id="emailHelp" class="form-text text-muted"> + <a target="_blank" href="https://support.plex.tv/articles/204059436-finding-an-authentication-token-x-plex-token/">You can learn more here.</a> + </small> + </div> + <button class="btn btn-secondary" onclick="connectToPlex()">Connect to Plex</button> + </div> </div> - <div class="form-group"> - <label for="plexToken">Plex Token</label> - <input type="text" class="form-control" id="plexToken" placeholder="X-Plex-Token"> - <small id="emailHelp" class="form-text text-muted"> - <a target="_blank" href="https://support.plex.tv/articles/204059436-finding-an-authentication-token-x-plex-token/">You can learn more here.</a> - </small> + <!-- / PLEX LOGIN FORM --> + + <!-- LIBRARIES TABLE --> + <div class="row mt-5"> + <div class="col"> + <table id="libraryTable" class="table table-hover"> + <thead> + <tr> + <th scope="col">UID</th> + <th scope="col">Name</th> + </tr> + </thead> + <tbody> + + </tbody> + </table> + </div> </div> - <button class="btn btn-secondary" onclick="connectToPlex()">Connect to Plex</button> + <!-- / LIBRARIES TABLE --> </div> - </div> - <!-- / PLEX LOGIN FORM --> + <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"> + <!-- ALPHABET LIBRARY --> + <div class="row mt-5"> + <div class="col text-center"> + <div id="alphabetGroup" class="btn-group flex-wrap" role="group" aria-label="TV Library First Letter"> + <!-- set class "disabled" for buttons which are not active --> + <button id="btnHash" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">#</button> + <button id="btnA" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">A</button> + <button id="btnB" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">B</button> + <button id="btnC" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">C</button> + <button id="btnD" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">D</button> + <button id="btnE" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">E</button> + <button id="btnF" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">F</button> + <button id="btnG" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">G</button> + <button id="btnH" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">H</button> + <button id="btnI" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">I</button> + <button id="btnJ" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">J</button> + <button id="btnK" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">K</button> + <button id="btnL" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">L</button> + <button id="btnM" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">M</button> + <button id="btnN" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">N</button> + <button id="btnO" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">O</button> + <button id="btnP" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">P</button> + <button id="btnQ" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">Q</button> + <button id="btnR" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">R</button> + <button id="btnS" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">S</button> + <button id="btnT" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">T</button> + <button id="btnU" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">U</button> + <button id="btnV" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">V</button> + <button id="btnW" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">W</button> + <button id="btnX" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">X</button> + <button id="btnY" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">Y</button> + <button id="btnZ" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">Z</button> + </div> + </div> + </div> + <!-- / ALPHABET LIBRARY --> - <!-- LIBRARIES TABLE --> - <div class="row mt-5"> - <div class="col"> - <table id="libraryTable" class="table table-hover"> - <thead> - <tr> - <th scope="col">UID</th> - <th scope="col">Name</th> - </tr> - </thead> - <tbody> - - </tbody> - </table> - </div> - </div> - <!-- / LIBRARIES TABLE --> + <!-- SHOWS TABLE --> + <div class="row mt-5"> + <div class="col"> + <table id="tvShowsTable" class="table table-hover"> + <thead> + <tr> + <th scope="col">UID</th> + <th scope="col">Title</th> + <th scope="col">Year</th> + </tr> + </thead> + <tbody> - <!-- ALPHABET LIBRARY --> - <div class="row mt-5"> - <div class="col text-center"> - <div id="alphabetGroup" class="btn-group flex-wrap" role="group" aria-label="TV Library First Letter"> - <!-- set class "disabled" for buttons which are not active --> - <button id="btnHash" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">#</button> - <button id="btnA" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">A</button> - <button id="btnB" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">B</button> - <button id="btnC" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">C</button> - <button id="btnD" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">D</button> - <button id="btnE" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">E</button> - <button id="btnF" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">F</button> - <button id="btnG" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">G</button> - <button id="btnH" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">H</button> - <button id="btnI" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">I</button> - <button id="btnJ" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">J</button> - <button id="btnK" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">K</button> - <button id="btnL" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">L</button> - <button id="btnM" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">M</button> - <button id="btnN" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">N</button> - <button id="btnO" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">O</button> - <button id="btnP" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">P</button> - <button id="btnQ" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">Q</button> - <button id="btnR" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">R</button> - <button id="btnS" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">S</button> - <button id="btnT" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">T</button> - <button id="btnU" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">U</button> - <button id="btnV" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">V</button> - <button id="btnW" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">W</button> - <button id="btnX" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">X</button> - <button id="btnY" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">Y</button> - <button id="btnZ" disabled type="button" class="btn btn-outline-dark" onclick="getLibraryByLetter(this)">Z</button> + </tbody> + </table> + </div> </div> + <!-- / SHOWS TABLE --> </div> - </div> - <!-- / ALPHABET LIBRARY --> + <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab"> + <!-- SEASONS TABLE --> + <div class="row mt-5"> + <div class="col"> + <table id="seasonsTable" class="table table-hover"> + <thead> + <tr> + <th scope="col">UID</th> + <th scope="col">Title</th> + </tr> + </thead> + <tbody> - <!-- SHOWS TABLE --> - <div class="row mt-5"> - <div class="col"> - <table id="tvShowsTable" class="table table-hover"> - <thead> - <tr> - <th scope="col">UID</th> - <th scope="col">Title</th> - <th scope="col">Year</th> - </tr> - </thead> - <tbody> - - </tbody> - </table> - </div> - </div> - <!-- / SHOWS TABLE --> + </tbody> + </table> + </div> + </div> + <!-- / SHOWS TABLE --> - <!-- SEASONS TABLE --> - <div class="row mt-5"> - <div class="col"> - <table id="seasonsTable" class="table table-hover"> - <thead> - <tr> - <th scope="col">UID</th> - <th scope="col">Title</th> - </tr> - </thead> - <tbody> - - </tbody> - </table> - </div> - </div> - <!-- / SHOWS TABLE --> + <!-- EPISODES TABLE --> + <div class="row mt-5"> + <div class="col"> + <table id="episodesTable" class="table table-hover"> + <thead> + <tr> + <th scope="col">UID</th> + <th scope="col">Title</th> + </tr> + </thead> + <tbody> - <!-- EPISODES TABLE --> - <div class="row mt-5"> - <div class="col"> - <table id="episodesTable" class="table table-hover"> - <thead> - <tr> - <th scope="col">UID</th> - <th scope="col">Title</th> - </tr> - </thead> - <tbody> - - </tbody> - </table> - </div> - </div> - <!-- / EPISODES TABLE --> + </tbody> + </table> + </div> + </div> + <!-- / EPISODES TABLE --> - <!-- SWITCH TOGGLE --> - <div class="row mt-5"> - <div class="col text-center"> - <div id="episodeOrSeriesBtns" class="btn-group btn-group-toggle" data-toggle="buttons"> - <label class="btn btn-secondary active"> - <input type="radio" name="episodeOrSeries" id="singleEpisode" autocomplete="off" checked> Single Episode - </label> - <label class="btn btn-secondary"> - <input type="radio" name="episodeOrSeries" id="entireSeries" autocomplete="off"> Entire Series - </label> + <!-- SWITCH TOGGLE --> + <div class="row mt-5"> + <div class="col text-center"> + <div id="episodeOrSeriesBtns" class="btn-group btn-group-toggle" data-toggle="buttons"> + <label class="btn btn-secondary active"> + <input type="radio" name="episodeOrSeries" id="singleEpisode" autocomplete="off" checked> Single Episode + </label> + <label class="btn btn-secondary"> + <input type="radio" name="episodeOrSeries" id="entireSeries" autocomplete="off"> Entire Series + </label> + </div> + </div> </div> - </div> - </div> - <!-- / SWITCH TOGGLE --> + <!-- / SWITCH TOGGLE --> - <!-- STREAMS TABLES --> - <div class="row mt-5"> - <div class="col"> - <table id="audioTable" class="table table-hover table-sm"> - <thead> - <tr> - <th scope="col">UID</th> - <th scope="col">Name</th> - <th scope="col">Title</th> - <th scope="col">Language</th> - <th scope="col">Code</th> - </tr> - </thead> - <tbody> - - </tbody> - </table> - </div> - <div class="col"> - <table id="subtitleTable" class="table table-hover table-sm"> - <thead> - <tr> - <th scope="col">UID</th> - <th scope="col">Name</th> - <th scope="col">Title</th> - <th scope="col">Language</th> - <th scope="col">Code</th> - </tr> - </thead> - <tbody> - - </tbody> - </table> + <!-- STREAMS TABLES --> + <div class="row mt-5"> + <div class="col"> + <table id="audioTable" class="table table-hover table-sm"> + <thead> + <tr> + <th scope="col">UID</th> + <th scope="col">Name</th> + <th scope="col">Title</th> + <th scope="col">Language</th> + <th scope="col">Code</th> + </tr> + </thead> + <tbody> + + </tbody> + </table> + </div> + <div class="col"> + <table id="subtitleTable" class="table table-hover table-sm"> + <thead> + <tr> + <th scope="col">UID</th> + <th scope="col">Name</th> + <th scope="col">Title</th> + <th scope="col">Language</th> + <th scope="col">Code</th> + </tr> + </thead> + <tbody> + + </tbody> + </table> + </div> + </div> + <!-- / STREAMS TABLES --> </div> </div> - <!-- / STREAMS TABLES --> + <!-- / TAB CONTENT --> </div> </div> </div> |