whos_got_dirt-demo/index.html at gh-pages · influencemapping/whos_got_dirt-demo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Search for entities across 5 influence data APIs - Who's Got Dirt API Demo</title>
<meta name="description" content="A demo client of the Who's Got Dirt API">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker.standalone.min.css">
<link rel="stylesheet" href="build/build.css">
</head>
<body>

<div class="container-fluid">
  <h1>Search for entities across 5 influence data APIs</h1>

  <p>This is a demonstration of the <a href="https://influencemapping.github.io/whos_got_dirt-server/"><i>Who's got dirt?</i> API</a>. The <i>Who's got dirt?</i> API provides a single access point to multiple APIs of influence data on the web. It proxies requests to the supported APIs, so that users only need to learn a single request format and a single response format. <a href="https://influencemapping.github.io/whos_got_dirt-server/">Read the documentation</a> to learn more about the API and how you can use it in your own projects.</p>

  <p>This demo queries only <strong>entities</strong> (people and organizations) and exposes only 5 filters for entities, not all 25 implemented by the <i>Who's got dirt?</i> API and its supported APIs. In addition to entities, the <i>Who's got dirt?</i> API supports <strong>relations</strong> between entities (for example, a person holding an office in an organization) and <strong>lists</strong> of entities (for example, a corporate grouping).</p>

  <form action="https://whosgotdirt-proxy.herokuapp.com/entities.csv" method="post" id="form">
    <h2>Select your filters to search for entities</h2>

    <div id="filters">
    </div>

    <div class="form-group">
      <button type="button" class="btn btn-default" id="add">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add another filter
      </button>
    </div>

    <input type="hidden" name="page" value="1">

    <h2>Select the APIs to query</h2>

    <div class="form-group">
      <div class="row">
        <div class="col-sm-3 col-lg-2">
          <div class="checkbox">
            <label>
              <input type="checkbox" name="endpoints" checked="checked" value="CorpWatch">
              <span data-toggle="tooltip" title="800,000+ companies in 200+ countries">
                CorpWatch
              </span>
            </label>
          </div>
        </div>

        <div class="col-sm-3 col-lg-2">
          <div class="checkbox">
            <label>
              <input type="checkbox" name="endpoints" checked="checked" value="OpenCorporates">
              <span data-toggle="tooltip" title="90,000,000+ companies, 120,000,000+ officers and 800+ corporate groupings in 50+ countries">
                OpenCorporates
              </span>
            </label>
          </div>
        </div>

        <div class="col-sm-3 col-lg-2">
          <div class="checkbox">
            <label>
              <input type="checkbox" name="endpoints" value="LittleSis">
              <span data-toggle="tooltip" title="200,000+ entities and 700+ lists in the United States">
                LittleSis
              </span>
              <span data-toggle="tooltip" title="API key required">
                <a href="https://api.littlesis.org/register"><span class="glyphicon glyphicon-lock" aria-hidden="true" aria-label="Register for an API key"></span></a>
              </span>
            </label>
          </div>
        </div>

        <div class="col-sm-3 col-lg-2">
          <div class="checkbox">
            <label>
              <input type="checkbox" name="endpoints" value="OpenDuka">
              <span data-toggle="tooltip" title="40,000+ entities in Kenya">
                OpenDuka
              </span>
              <span data-toggle="tooltip" title="API key required">
                <a href="http://www.openduka.org/index.php/api"><span class="glyphicon glyphicon-lock" aria-hidden="true" aria-label="Register for an API key"></span></a>
              </span>
            </label>
          </div>
        </div>

        <div class="col-sm-3 col-lg-2">
          <div class="checkbox">
            <label>
              <input type="checkbox" name="endpoints" value="Poderopedia">
              <span data-toggle="tooltip" title="Entities in Chile">
                Poderopedia
              </span>
              <span data-toggle="tooltip" title="API key required">
                <a href="https://poderopedia.3scale.net/login"><span class="glyphicon glyphicon-lock" aria-hidden="true" aria-label="Register for an API key"></span></a>
              </span>
            </label>
          </div>
        </div>
      </div>
    </div>

    <input type="hidden" name="queries" id="queries">
    <button type="button" class="btn btn-default" id="submit">Submit query</button>
    <button type="submit" class="btn">Download CSV</button>
    <span id="loading"></span>
  </form>

  <div id="messages">
  </div>

  <div class="panel panel-default" id="results">
    <div class="panel-heading"><span id="number"></span> of <span id="count"></span> results</div>
    <div class="panel-body">
      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th>Name</th>
            <th>Country</th>
            <th>Classification</th>
            <th>Founding date</th>
            <th>Address</th>
            <th>Source</th>
            <th>JSON</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>

      <p>
        <a href="#" class="btn btn-default" rel="prev" id="page-previous">Previous</a>
        <a href="#" class="btn btn-default" rel="next" id="page-next">Next</a>
      </p>
    </div>
  </div>

  <div id="modals">
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<script src="build/build.js"></script>
</body>
</html>