User Tools

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision		Previous revision
sailing:dashboards [2023/12/06 07:24] – created willysailing:dashboards [2024/02/27 12:39] (current) – removed willy
Line 1: Line 1:
-Prev to: [[sailing:ombi|Ombi: discover new content]] 
----- 
-====== 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 [[https://jquery.com/|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**: 
-<file 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> 
-</file> 
- 
-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: 
-<file html 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> 
-</file> 
- 
-<file css 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; 
-} 
-</file> 
- 
-And the //site.json//: 
-<file 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 
-                } ] ] 
-} 
-</file> 
- 
-This dashboard you can easily configure by modifying the CSS. 
- 
----- 
-Prev to: [[sailing:ombi|Ombi: discover new content]]