Created
June 15, 2020 23:12
-
-
Save ahmetozer/99157e56a2e258ce4857a79779665155 to your computer and use it in GitHub Desktop.
Json to bootsrap list example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <title>Json to bootstrap List</title> | |
| <!-- jquery --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> | |
| <!-- font-awesome fa-icon --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" /> | |
| <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script> --> | |
| <!-- Bootstrap core CSS and Js --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.js" integrity="sha256-i/Jq6Tc8SbPMBrnvq/sOTfH81hW5emVa4OzZPqhcwtI=" crossorigin="anonymous"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css" integrity="sha256-1hm7xPFY4HL/GPfWz595kcNLVmuMC43nPagoQhWTb58=" crossorigin="anonymous" /> | |
| <!-- Custom styles for this template --> | |
| </head> | |
| <body> | |
| <style> | |
| .server-list-group > .list-group > .list-group-item { | |
| padding-left: 30px; | |
| } | |
| .server-list-group > .list-group > .list-group > .list-group-item { | |
| padding-left: 40px; | |
| } | |
| .server-list-group > .list-group > .list-group > .list-group > .list-group-item { | |
| padding-left: 50px; | |
| } | |
| .server-list-group > .list-group > .list-group > .list-group > .list-group > .list-group-item { | |
| padding-left: 60px; | |
| } | |
| .server-list-group > .list-group > .list-group > .list-group > .list-group > .list-group > .list-group-item { | |
| padding-left: 70px; | |
| } | |
| .server-list-group-item .fas { | |
| margin-right: 5px; | |
| }</style> | |
| <script>$(function() { | |
| $('.server-list-group-item').on('click', function() { | |
| $('.collapse').not($(this).parents('')).collapse('hide'); | |
| $('.fa-arrow-alt-circle-down').addClass('fa-arrow-alt-circle-right').removeClass('fa-arrow-alt-circle-down'); | |
| $('.fas', this) | |
| .toggleClass('fa-arrow-alt-circle-right') | |
| .toggleClass('fa-arrow-alt-circle-down'); | |
| }); | |
| });</script> | |
| <script>$(function() { | |
| $('.lgserver').on('click', function() { | |
| $('.lgserver').removeClass('list-group-item-info') | |
| $(this) | |
| .toggleClass('list-group-item-info') | |
| .toggleClass(''); | |
| }); | |
| });</script> | |
| <div class="server-list-group"> | |
| <div class="list-group list-group-root well" id="serverList"> | |
| </div> | |
| </div> | |
| <script> | |
| function lgListLoad(data,depth) { | |
| var curIndex=1 | |
| // Check maximum Depth | |
| if ( depth > 5) { | |
| console.log("You are reach maximum depth of server list. Please keep list depth at maximum 5.") | |
| return | |
| } | |
| for (index in data) { | |
| // Start at no index and recursive increase list count. | |
| if(typeof depth == "undefined") { | |
| curDepth = "" | |
| target = "#serverList" | |
| } else { | |
| curDepth= depth +"-" | |
| target= "#itemLgSv"+depth | |
| } | |
| hrefId = curDepth+ curIndex; | |
| if ( typeof data[index]["Servers"] == "object" ) {// Look is a list or Server, If its list it returns object if not return undefined. | |
| // Do for list items, First create list item after run recursive | |
| //console.log(data[index],target) | |
| // $( target ).append | |
| $( target ).append(`<a href="#itemLgSv`+hrefId+`" class="server-list-group-item list-group-item list-group-item-action" data-toggle="collapse"> | |
| <i class="fas fa-arrow-alt-circle-right"></i>`+data[index]["Name"]+` | |
| </a> | |
| <div class="list-group collapse" id="itemLgSv`+hrefId+`"> ` ); | |
| // Recursive Call | |
| lgListLoad(data[index]["Servers"], hrefId) | |
| $( target ).append(`</div>`); | |
| } else { | |
| // Do for server items | |
| $( target ).append(`<a href="#" class="server-list-group-item list-group-item list-group-item-action lgserver"><i class="fas fa-server"></i>`+data[index]["Name"]+`</a>` ); | |
| //console.log(index, data[index], hrefId, target) | |
| } | |
| // Current index location in for, increase every item in loop | |
| curIndex = curIndex+1 | |
| } | |
| } | |
| $.getJSON( "/list.json", function( data ) { | |
| lgListLoad(data["Servers"]); | |
| }); | |
| </script> | |
| </body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "Config": { | |
| "whois": "enabled", | |
| "nslookup": "enabled", | |
| "ping": { | |
| "": "enabled", | |
| "4": "enabled", | |
| "6": "enabled" | |
| }, | |
| "icmp": { | |
| "": "enabled", | |
| "4": "enabled", | |
| "6": "enabled" | |
| }, | |
| "tracert": { | |
| "": "enabled", | |
| "4": "enabled", | |
| "6": "enabled" | |
| }, | |
| "webcontrol": "enabled", | |
| "tcp": "enabled" | |
| }, | |
| "Servers": { | |
| "Netherland": { | |
| "Name": "Netherland", | |
| "Description": "Servers in Netherland", | |
| "Servers" : { | |
| "Amsterdam1": { | |
| "Name" : "Amsterdam - 1", | |
| "Description": "Amsterdam Scaleway", | |
| "Url" : "http://looking-glass-controller" | |
| } | |
| } | |
| }, | |
| "Turkey": { | |
| "Name": "Turkey", | |
| "Description":"Servers in Turkey", | |
| "Servers":{ | |
| "Istanbul": { | |
| "Name": "Istanbul1", | |
| "Url":"http://looking-glass-controller1" | |
| }, | |
| "Marmaris": { | |
| "Name": "Marmaris", | |
| "Description": "Servers In Marmaris", | |
| "Servers": { | |
| "Marmaris1" : { | |
| "Name": "Marmaris 1", | |
| "Url":"http://looking-glass-controller1" | |
| }, | |
| "Marmaris2" : { | |
| "Name": "Marmaris 2", | |
| "Url":"http://looking-glass-controller2" | |
| }, | |
| "Marmaris3" : { | |
| "Name": "Marmaris 3", | |
| "Url":"http://looking-glass-controller3" | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment