Differences

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

--- sailing:dashboards [2023/12/06 07:24] – created willy
+++ sailing: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]]

Willy's Wiki

User Tools

Differences