<!DOCTYPE html> <html>

<head>

<meta charset="UTF-8">
<title>Dependency Checker for CocoaPods Projects</title>
<style type="text/css">
    #nav a {
      display: block;
    }

    html,
    body {
      height: 100%;
    }

    #nav {
      padding: 10px 30px;
      float: left;
      width: 30%;
      height: 100%;
      overflow: scroll;
    }

    #content {
      padding: 10px 30px;
      float: left;
      width: 60%;
      height: 100%;
      overflow: scroll;
    }        
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<body onload="pageDidLoad()">
<script>

  function loadJSON(fileName, callback) {   
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', fileName, true);
    xobj.onreadystatechange = function () {
      if (xobj.readyState == 4 && xobj.status == "200") {
        callback(xobj.responseText);
      }
    };
    xobj.send(null);
  }

  function pageDidLoad() {
    loadJSON('index.json', response => {
      var actual_JSON = JSON.parse(response);

      let podNames = actual_JSON.links.map(s => s.source);

      renderNavs(podNames)
      renderPods(actual_JSON.links)
    });
  }

  function renderNavs(podNames) {
    let fLeft = document.getElementById('nav')
    podNames.forEach(e => {
      let nav = document.createElement('a')
      nav.href = '#' + e
      nav.innerText = e
      fLeft.appendChild(nav)
    })
  }

  function renderPods(pods) {
    let d = document.getElementById('pods')
    pods.forEach(element => {
      let div = document.createElement('div')
      let header = document.createElement('h3')
      header.innerHTML = element.source
      header.id = element.source

      div.appendChild(header)

      let ul = document.createElement('ul')
      let dependencies = element.dependencies.sort()
      dependencies.forEach(dependency => {
        let li = document.createElement('li')
        let a = document.createElement('a')
        a.innerHTML = dependency
        a.href = '#' + dependency
        ul.appendChild(li)
        li.appendChild(a)
      })

      div.appendChild(ul)      
      d.appendChild(div)
    })
  }

</script>

</head>

<body>

<div id="nav">

</div>
<div id="content">
  <div id="pods"></div>
</div>

</body>

</html>