This is an old revision of the document!

Dashboard

You got to the end, at last.

At this point all you need is to create a wrap-up page with links to all the services to be used as landing page for your reverse-proxy. You can think of a link dashboard for easy access.

There are literally lots of options at your fingertip, looking for html dashboard or similar queries will find you tons of open-source products that you can explore and try out.

Since i wanted something really simple and easy, i wrote my own dashboard. Some advantages:

It's 100% client-side
Pure HTML+CSS with a drop of Javascript
Easily extensible, based on a site.json file
Only depends on jQuery and nothing else
It's all into three files, including jQuery.

The only simpler approach would be a static HTML page with a link for each service.

Go back to the NGINX page and check the root path i told you to use: root /data/daemons/htdocs;. This is the folder which is used by the reverse-proxy when you open 192.168.0.1 (or the remote address) in your browser. This is the place where you need to put your dashboard.

The single HTML page

This is the simplest possible solution, a static HTML page. Drop the following file into /data/daemons/htdocs and call it index.html:

index.html

<html>
<body>
<p><a href="/prowlarr">Access indexers and manual searches</a></p>
<p><a href="/radarr">Organize movies</a></p>
<p><a href="/sonarr">Organize TV shows</a></p>
<p><a href="/lidarr">Organize music</a></p>
<p><a href="/readarr-books">Organize books (Readarr)</a></p>
<p><a href="/readarr-audiobooks">Organize audiobooks (Readarr)</a></p>
<p><a href="/lazylibrarian">Organize books/audiobooks (LazyLibrarian)</a></p>
<p><a href="/bazarr">Organize subtitles</a></p>
<p><a href="/transmission">Transmission client</a></p>
<p><a href="/deluge">Deluge web client</a></p>
<p><a href="/nzbget">NzbGet client</a></p>
<p><a href="/jellyfin">Media Server</a></p>
<p><a href="/ombi">Discover new content</a></p>
</body>
</html>

You can't go any simpler than this.

The simple Dashboard

This is a very small client-side Javascript app that will fetch a list of links from a json file and generate on-the-fly a nice page for your browser. You need:

One index.html page with little HTML and some Javascript
One CSS file
One site.json file containing the list of links
Optionally, a subfolder called images with icons for the links

So create the following files in your /data/daemons/htdocs folder:

index.html

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="favicon.png" type="image.png" />
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Pragma" content="no-cache">
    <title></title>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="index.css?ver=1"/>
    <script src="js/jquery-3.7.1.min.js" language="javascript"></script>
</head>
<body>
<div id="loading">
    <img src="images/loading.png" />
</div>
<div id="content">
</div>
<script>
$(window).on('load', function(){
 $.get("site.json?"+(new Date().getTime()),
  function(data){
   $(document).prop('title', data.title );
    if ( data.header ){
     var header = $('<div class="header"><span>' + data.header.text + '</span></div>');
     $('#content').append( header );
    }
    for (var row = 0; row < data.content.length; row++ ){
     var box = $('<div class="container"></div>');
     for ( var item = 0; item < data.content[row].length; item++ ){
      if ( data.content[row][item].link != "" ) {
       var container = $('<div class="contained ' + data.content[row][item].style + '"></div>');
       var link = $('<a href="' + data.content[row][item].link + '" target="' + (data.content[row][item].new_page ? '_blank' : '_self') + '"></a>' );
       var img = data.content[row][item].img != "" ? $('<img src="' + data.content[row][item].img + '" />' ) : null;
       var text = data.content[row][item].text != "" ? $('<p>' + data.content[row][item].text + '</p>' ) : null;
       link.append( img );
       link.append( text );
       container.append( link );
       box.append( container );
      }
     }
     $('#content').append( box );
    }
    if ( data.footer ){
     var footer = $('<div class="footer"><span>' + data.footer.text + '</span></div>');
     $('#content').append( footer );
    }
    $('#loading').fadeOut( {
     'duration': 100,
     'complete':
      function() {
       $('#content').fadeIn( { 'duration':100 } );
      }
    });
  }, 'json');
});
</script>
</body>
</html>

index.css

body {
        padding: 0px;
        margin: 0px;
        width: 100%;
        height: 100%;
        text-align: center;
        background: black;
}
 
a {
        text-decoration: none;
        color: darkred;
}
 
div#content {
        display: none;
}
 
div#content > div.header {
        margin-top: 1em;
}
 
div#content > div.header > span {
        font-size: 200%;
}
 
div.container {
        margin: 0 auto;
}
 
div.contained {
        display: inline-block;
}
 
div.header > span { 
        color: white;
}
 
.box {
        width: 20em;
        height: 21em;
        background: orange;
        margin: 1em;
        padding: 0.5em;
        text-align: center;
}
 
.box > a > p {
        height: 2em;
        margin: 0px;
        font-size: 150%;
}
 
.box > a > img {
        height: 19em;
        width: 19em;
}
 
.small {
        width: 6em;
        height: 7em;
        background: orange;
        margin: 1em;
        text-align: center;
}
 
.small > a > p {
        height: 1em;
        margin: 0px;
}
 
.small > a > img {
        height: 5em;
        width: 5em;
}

And the site.json:

site.json

{
        "title" : "Homr",
        "header" : {
                "img" : "",
                "text" : "Home Services"
                },
        "content" :
                [ [ {
                        "img" : "images/jellyfin.png",
                        "text" : "Film, Serie TV, etc",
                        "link" : "/jellyfin/",
                        "style" : "box",
                        "new_page" : true
                },{
                        "img" : "images/ombi.png",
                        "text" : "Richieste",
                        "link" : "/ombi/",
                        "style" : "box",
                        "new_page" : true
                }],
                [{
                        "img" : "images/nzbget.png",
                        "text" : "NzbGet",
                        "link" : "/nzbget/",
                        "style" : "small",
                        "new_page" : true
                },{
                        "img" : "images/torrent.png",
                        "text" : "Deluge",
                        "link" : "/deluge/",
                        "style" : "small",
                        "new_page" : true
                },{
                        "img" : "images/torrent.png",
                        "text" : "Transmission",
                        "link" : "/deluge/",
                        "style" : "small",
                        "new_page" : true
                },{
                        "img" : "images/prowlarr.png",
                        "text" : "Indexers",
                        "link" : "/prowlarr/",
                        "style" : "small",
                        "new_page" : true
                },{
                        "img" : "images/bazarr.png",
                        "text" : "Subtitles",
                        "link" : "/bazarr/",
                        "style" : "small",
                        "new_page" : true
                }],
 
                [{
                        "img" : "images/radarr.png",
                        "text" : "Films",
                        "link" : "/radarr/",
                        "style" : "small",
                        "new_page" : true
                },{
                        "img" : "images/lidarr.png",
                        "text" : "Musica",
                        "link" : "/lidarr/",
                        "style" : "small",
                        "new_page" : true
                },{
                        "img" : "images/sonarr.png",
                        "text" : "Tv Shows",
                        "link" : "/sonarr/",
                        "style" : "small",
                        "new_page" : true
                },{
                        "img" : "images/readarr.png",
                        "text" : "Libri",
                        "link" : "/readarr-books/",
                        "style" : "small",
                        "new_page" : true
                },{
                        "img" : "images/audiobooks.png",
                        "text" : "Audiolibri",
                        "link" : "/readarr-audiobooks/",
                        "style" : "small",
                        "new_page" : true
                },{
                        "img" : "images/lazylibrarian.png",
                        "text" : "LazyLibrarian",
                        "link" : "/lazylibrarian/",
                        "style" : "small",
                        "new_page" : true
                } ] ]
}

This dashboard you can easily configure by modifying the CSS.

Prev to: Ombi: discover new content

Willy's Wiki

User Tools

Dashboard

The single HTML page

The simple Dashboard