diff options
Diffstat (limited to 'cmd/web/templates/index.html')
| -rw-r--r-- | cmd/web/templates/index.html | 466 |
1 files changed, 384 insertions, 82 deletions
diff --git a/cmd/web/templates/index.html b/cmd/web/templates/index.html index 74f2298..eaaf722 100644 --- a/cmd/web/templates/index.html +++ b/cmd/web/templates/index.html @@ -2,115 +2,417 @@ <html lang="en"> <head> <meta charset="UTF-8"> - <link id="maincss" rel="stylesheet" href="/static/style.css" defer> + <link href="/static/css/bootstrap.min.css" rel="stylesheet" defer> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Steam Game index</title> </head> <body> -<nav> - <a href="/">Home</a> - {{ if .Local }} - <div style="display: block; float: right;"> - <a href="/quit">Shutdown Server / Quit</a> - </div> - {{ end }} +<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> + <div class="container-fluid"> + <a class="navbar-brand" href="/">Steam Exporter</a> + <button class="navbar-toggler" + type="button" + data-bs-toggle="collapse" + data-bs-target="#navbarsExampleDefault" + aria-controls="navbarsExampleDefault" + aria-expanded="false" + aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + + <div class="collapse navbar-collapse" id="navbarsExampleDefault"> + <ul class="navbar-nav me-auto mb-2 mb-md-0"> + <li class="nav-item"> + <a class="nav-link" aria-current="page" + href="/steam-export-web.exe"> + Download + </a> + </li> + <li class="nav-item"> + <a href="#" + id="shareLink" + data-clipboard-text="http://{{$.HostIP}}:{{$.Port}}/" + class="nav-link"> + Copy Share link + </a> + </li> + {{ if .Local }} + <li class="nav-item"> + <a class="nav-link" aria-current="page" + data-bs-target="#installModal" + data-bs-toggle="modal" + href="#"> + Install Game + </a> + </li> + <li class="nav-item"> + <a class="nav-link" aria-current="page" + data-bs-target="#libraryModal" + data-bs-toggle="modal" + href="#"> + Change Library Path + </a> + </li> + {{ end }} + </ul> + + <ul class="navbar-nav "> + {{ if .Local }} + <li class="nav-item"> + <a class="nav-link" href="#" + data-bs-target="#versionModal" + data-bs-toggle="modal" + > + Version + </a> + </li> + <li class="nav-item"> + <a class="nav-link" href="/quit">Shutdown Server/Quit</a> + </li> + {{ end }} + </ul> + </div> + </div> </nav> -{{ if .Local }} -<script src="/static/main.js"></script> -<h2>Library: {{.Lib.Folder}}</h2> +<div class="container" style="padding-top: 6rem;"> -<div id="status"> - <div id="installBar" class="installBar" style="display: none;">0%</div> +<div class="position-fixed bottom-0 end-0 p-3" > + <div id="notificationCopied" class="toast" role="alert" aria-live="assertive" aria-atomic="true"> + <div class="toast-body" id="notificationCopiedText"></div> + </div> </div> -<pre><code id="message" style="display: none;"> -</code></pre> -<br /> - -<h3>About</h3> -<p> -The steam exporter is designed to let you export your steam games, either to -another local hard drive or another computer on the network. -</p> -<p> -It also allows you to import games from across the network as well if you -provide an HTTP url from which to download the game file as exported -from this application. -</p> -<p> -<a href="/steam-export-web.exe"> - You can download this application from this UI as well here. -</a> -</p> - -<p> -You can give people this link to view the library remotely and download -games from your computer: -<br /><br /> -<a href="http://{{.HostIP}}:{{.Port}}/">http://{{.HostIP}}:{{.Port}}/</a> -</p> +{{ if .Local }} + <script src="/static/main.js"></script> + <h2>Library: {{.Lib.Folder}}</h2> + + <div class="row"> + <div id="installBarContainer" class="progress" style="display: none;"> + <div id="installBar" class="progress-bar progress-bar-striped progress-bar-animated" + role="progressbar" + aria-valuenow="0" + aria-valuemin="0" + aria-valuemax="100" + style="width: 0%;"> + </div> + </div> + </div> + + <div class="row" style="padding-top: 10px;"> + <pre><code id="message" style="display: none;"></code></pre> + </div> + + <h3>About</h3> + <p> + The steam exporter is designed to let you export your steam games, either to + another local hard drive or another computer on the network. + </p> + <p> + It also allows you to import games from across the network as well if you + provide an HTTP url from which to download the game file as exported + from this application. + </p> + <p> + <a href="/steam-export-web.exe"> + You can download this application from this UI as well here. + </a> + </p> + + <p> + You can give people this link to view the library remotely and download + games from your computer: + <br /><br /> + <a href="http://{{.HostIP}}:{{.Port}}/">http://{{.HostIP}}:{{.Port}}/</a> + </p> {{ else }} -<h2>Remote Steam library access</h2> + + <h2>Remote Steam library access</h2> + + <p> + <a href="/steam-export-web.exe"> + If you need this program to install the games click here. + </a> + </p> + +{{ end }} -<a href="/steam-export-web.exe"> - If you need this program to install the games click here. -</a> +<h3>Installed games:</h3> -<p> -Right click and copy the link address to paste into your local machine -if you do not wish to store the archive or have enough space for it on -your drive. -</p> -{{ end }} +<div class="container"> + <div class="row"> + <div class="col-3"> + <input class="form-control" type="text" id="gameTableSearch" onkeyup="gameTableFilter()" placeholder="Filter by name"> + </div> + <div class="col-3"> + <button class="btn btn-secondary" onClick="clearGameTableSearch()">Clear</button> + </div> + </div> + + <table id="gameTable" class="table dark table-sm table-striped text-center"> + <thead> + <tr> + <th scope="col">Name</th> + <th scope="col">Size</th> + <th scope="col" data-sort-method="none">Actions</th> + </tr> + </thead> + <tbody> + {{ range $key, $val := .Lib.Games}} + <tr> -<p> -Installed games: + <td>{{$key}}</td> + <td>{{$val.GetSize}}</td> + <td> + <a href="/download/{{$key}}" class="btn btn-secondary">Download</a> + <button data-clipboard-text="http://{{$.HostIP}}:{{$.Port}}/download/{{$key}}" class="btn btn-primary">Copy link</button> + <button data-bs-target="#delete{{$val.Slug}}Modal" data-bs-toggle="modal" class="btn btn-danger">Delete</button> + </td> + </tr> + {{ end }} + </tbody> + </table> +</div> + +{{ if .Local }} -Tip: You can right click and save link as to specify a save location, e.g. -an external hard drive -</p> -<ul> {{ range $key, $val := .Lib.Games }} -<li> -<a href="/download/{{$key}}">{{$key}} ({{$val.GetSize}})</a> -</li> +<div class="modal fade" id="delete{{$val.Slug}}Modal" tabindex="-1" aria-labelledby="delete{{$val.Slug}}ModalLabel" aria-hidden="true"> + + <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="delete{{$val.Slug}}ModalLabel"> + Delete {{$key}} + </h5> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> + </div> + <div class="modal-body"> + + + <form class="row row-cols-lg-auto g-3 align-items-center" action="/delete" method="POST"> + <div class="col-12"> + <div class="input-group"> + <div class="input-group-text"> + Are you sure you wish to delete '{{$key}}'? + </div> + <input type="hidden" name="name" value= "{{$key}}" /> + </div> + </div> + + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> + Close + </button> + <input type="submit" class="btn btn-danger" value="Delete" /> + </div> + </form> + </div> + </div> +</div> + {{ end }} -</ul> -{{ if .Local }} -Delete a game: ( Type out exact name, case sensitive ) -<form action="/delete" method="POST"> - <input type="text" name="name" /> - <input type="submit" value="Delete"> -</form> +<div class="modal fade" id="installModal" tabindex="-1" aria-labelledby="installModalLabel" aria-hidden="true"> + + <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="installModalLabel"> + Install Game + </h5> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> + </div> + <div class="modal-body"> + -Install a game from a URL or local file path: + <form class="row g-3 align-items-center" action="/install" method="GET"> + <div class="col-12"> + <label class="visually-hidden" for="inlineFormInputInstallModal"> + C:\Program Files (x86)\Steam\Steamapps + </label> + <div class="input-group"> + <div class="input-group-text">URI:</div> + <input name="uri" + type="text" + class="form-control" + id="inlineFormInputInstallModal" + placeholder="https://10.0.0.123:8899/download/Some Game"> + </div> + </div> -<form action="/install" method="GET"> - <input type="text" name="uri" /> - <input type="submit" value="Install"> -</form> + <p> + Enter a URI above, typically this will be another machine on your local network. + </p> -<p> -Note that You can also give someone a URL to install a game if they're running -this program, e.g. <br /> -http://127.0.0.1:8899/install?uri=http://my-server-ip-or-hostname/download/My Game -</p> + <p> + The URI should return a stream with the Game's data, typically this + is provided by running another copy of this program on the computer that has + the game already installed. + </p> + <p> + Simply click "copy link" over there and paste it in here to install. + </p> + + <p> + This will force a reload of the entire steam library when complete. + </p> + + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> + Close + </button> + <input type="submit" class="btn btn-primary" value="Submit" /> + </div> + </form> + </div> + </div> +</div> + +<!-- Modal --> +<div class="modal fade" id="libraryModal" tabindex="-1" aria-labelledby="libraryModalLabel" aria-hidden="true"> + + <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="libraryModalLabel"> + Change Library Path + </h5> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> + </div> + <div class="modal-body"> + + + <form class="row g-3 align-items-center" action="/setLib" method="GET"> + <div class="col-12"> + <label class="visually-hidden" for="inlineFormInputlibraryModal"> + C:\Program Files (x86)\Steam\Steamapps\common + </label> + <div class="input-group"> + <div class="input-group-text">Path:</div> + <input name="path" + type="text" + class="form-control" + id="inlineFormInputlibraryModal" + placeholder="C:\Program Files (x86)\Steam\Steamapps\common"> + </div> + </div> + + <p> + Typically you will not need to change this, however if you have + installed steam games on multiple hard drives you may need to. + </p> + + <p> + This will force a reload of the entire steam library. + </p> + + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> + Close + </button> + <input type="submit" class="btn btn-primary" value="Submit" /> + </div> + </form> + </div> + </div> +</div> -Change library path -<form action="/setLib" method="GET"> - <input type="text" name="path" /> - <input type="submit" value="Update"> -</form> {{ end }} -<h3>Version information</h3> -<pre><code>{{.Version}}</pre></code> +<div class="modal fade" id="versionModal" tabindex="-1" + aria-labelledby="versionModalLabel" aria-hidden="true"> + + <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="versionModalLabel"> + Version Information + </h5> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> + </div> + <div class="modal-body"> + + <pre><code>{{.Version}}</pre></code> + + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> + Close + </button> + </div> + </div> + </div> +</div> + + +</div> <!-- /container --> + +<script src="static/js/bootstrap.min.js"></script> +<script src="static/js/clipboard.min.js"></script> +<script src="static/js/tablesort/tablesort.min.js"></script> +<script src="static/js/tablesort/sorts/tablesort.filesize.min.js"></script> +<script> +function clipboardNotify(e) { +/* +console.log("Action:", e.action) +console.log("Text:", e.text) +console.log("Trigger:", e.trigger) +*/ + +var elem = document.getElementById("notificationCopied") +var toast = new bootstrap.Toast(elem) + +var content = document.getElementById("notificationCopiedText") +content.innerHTML = "Copied: " + e.text + +toast.show() +} +</script> +<script> + clip = new ClipboardJS('.btn'); + clip1 = new ClipboardJS('#shareLink'); + + clip.on('success', clipboardNotify); + clip1.on('success', clipboardNotify); + + new Tablesort(document.getElementById("gameTable"), { + }) +</script> +<script> +</script> +<script> + function clearGameTableSearch() { + document.getElementById("gameTableSearch").value="" + gameTableFilter() + } + function gameTableFilter() { + var input, filter, table, tr, td, i, txtValue; + input = document.getElementById("gameTableSearch"); + filter = input.value.toUpperCase(); + table = document.getElementById("gameTable"); + tr = table.getElementsByTagName("tr"); + for (i = 0; i < tr.length; i++) { + td = tr[i].getElementsByTagName("td")[0]; + if (td) { + txtValue = td.textContent || td.innerText; + if (txtValue.toUpperCase().indexOf(filter) > -1) { + tr[i].style.display = ""; + } else { + tr[i].style.display = "none"; + } + } + } + } +</script> </body> |