API documentation for Epic Foundation Inc

  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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166

<div id='full-example-result'></div>
        <script>
        $(document).ready(  function() {

          function getOrganizations ( tokenData )
          {
            //get the list of organizations
            $.ajax({
               url:    "https://api.epic.foundation/portfolio/organization",
               dataType: "json",
               method:   "GET",
               access_token: tokenData.access_token,
               data:     {
                             access_token:   tokenData.access_token
                         },
               cache:    false,
               success: function( portfolioData, status, request )
                        {
                            if (    ( typeof portfolioData != "undefined")
                                 && ( typeof portfolioData.organizations != "undefined")
                               )
                            {
                               $.each( portfolioData.organizations , getOrganizationsClosureFn ( this.access_token ));
                            }
                        }
           });
          }

          // returns an iterating function to build each organization block
          // with the access_token present in the scope for further subsequent callbacks
          function getOrganizationsClosureFn( access_token )
          {
            var accessToken = access_token;
            return function ( index , element )
            {
                BuildOrganization ( element , accessToken );
            }
          }

          // Builds the organization block
          function BuildOrganization ( organizationJsonElement , accessToken )
          {
            var id = organizationJsonElement.organization.id;
            var org = $("<div class='org' id='" + id + "'></div>");
            org.append("<h3>" + organizationJsonElement.organization.name + "</h3>");
            org.append("<div class='data'></div>");
            org.children(".data").first().append("<span class='joined'>Epic since " +  organizationJsonElement.organization.since  + "</span>");
            org.children(".data").first().append("<span class='founded'>Founded in " +  organizationJsonElement.organization.founded  + "</span>");
            org.append("<div class='sectors'></div>");
            org.append("<span class='logo'><a href='" + organizationJsonElement.organization.website + "' target='_new' ><img src='" + organizationJsonElement.organization.logoUri + "' alt='" + organizationJsonElement.organization.name + "'/></a></span>");
            org.append("<div class='splash'><img src='" + organizationJsonElement.organization.visualUri + "' alt='" + organizationJsonElement.organization.name + "'/></div>");
            $("#full-example-result").append( org );
            // enrich with the sectors
            $.ajax({
               url:    "https://api.epic.foundation/portfolio/organization/" + id  + "/sector",
               dataType: "json",
               method:   "GET",
               id:       id,
               data:     {
                             access_token:   accessToken
                         },
               cache:    false,
               success: function( sectorsJsonElement , status, request )
                        {
                            if (    (typeof sectorsJsonElement != "undefined")
                                 && (typeof sectorsJsonElement.sectors != "undefined")
                                 && (Object.keys(sectorsJsonElement.sectors).length > 0)
                               )
                            {
                               $.each( sectorsJsonElement.sectors , AddOrganizationSectorsClosureFn( this.id ));
                            }
                        }
           });

          }

          // returns an iterating function to build the sectors for the org block
          // with the org id present in the scope for subsequent insertion into
          // the proper DOM element
          function AddOrganizationSectorsClosureFn( id )
          {
            var orgId = id;
            return function ( index , element )
            {
               //add the list of sectors to organization
               $.each( element.sector , BuildSectorBlockClosureFn ( element.sector , orgId ));
            }
          }

          // returns an iterating function to get the labels for the sectors
          // with the org id and the sector element in context
          function BuildSectorBlockClosureFn (sector , orgId )
          {
             var id            = orgId;
             var sectorElement = sector;
             var sectorIdDOM   = id + "_" + sectorElement.sectorId;
             var sectorDOM = $("<span class='sector' id='" + id + "_" + sectorElement.sectorId  + "'><img src='" + sectorElement.logoUri + "' /></span>");
             // Add the sector to the DOM
             $("#" + id + " .sectors"  ).append( sectorDOM );

             // add the labels
             if ( Object.keys(sectorElement.labels).length > 0)
             {
                 $.each( sectorElement.labels , AddSectorLabelClosureFn( sectorElement , id , sectorIdDOM ));
             }
             return function ( index , element )
             {
                 //add a label for reach language
                 //$.each( sector.labels , AddSectorLabelClosureFn( sectorElement , id , sectorIdDOM ));
             }
          }

          // returns an iterative function to loop throuh all the sector lang labels
          // with the org ID and the sector element in context for subsequent insertion
          // into the DOM
          function AddSectorLabelClosureFn ( sectorElement , orgId , sectorIdDOM )
          {
            var sector    = sectorElement ;
            var id        = orgId;
            var domTarget = sectorIdDOM;

            return function ( index , element )
            {
                //add a label for reach language
                $("#" + domTarget ).append("<label lang='" +  element.label.lang + "'>" + element.label.sectorName + "</label>");
            }
          }


          // Button trigger
          $("#full-example").click( function ( event ) {
                //empty the result
                $("#full-example-result").html("");
                //add styles
                $("#full-example-result").append("<style> .data { display: flex; justify-content: space-between; } #full-example-result { background-color: #e4e3dd; display: flex; flex-wrap: wrap; justify-content: space-between; } .org { flex-basis: calc(50% - 30px); margin: 5px; padding: 0px; background-color: rgba(41, 171, 226, 0.38); position: relative; } .org h3 { color: #2da6df; background-color: rgb(0,49,66); padding: 5px 10px; margin: 0;} .org .joined, .org .founded { font-weight: bold; font-size: 0.9em; background-color: #efa508; padding: 5px 7px; } .org .logo img { width: 65%; height: 65%; } .org .logo a { width: 100px; display: block; text-align: center;} .org .logo { z-index:50; width: 100px; height: 100px; position: absolute; bottom: 10px; left: 10px; border-radius: 100px; justify-content: center; display: flex; background-color: white; align-content: center; align-items: center;} .org .splash img { width: 100%; height: auto; } .sectors {  display: flex; justify-content: flex-end; position: absolute; bottom: 0; right: 0; z-index: 30; background-color: white; opacity: 0.8; border-top-left-radius: 14px; } .sector { flex-basis: 30px; flex-grow: 0; flex-shrink: 0; margin: 5px; } .sector label {  font-size: 0.6em; display: none; background-color: rgb(0,49,66); color: white; font-weight: bold; padding: 5px 8px;}  .sector img { width: 30px; height: 30px; }</style>");

                //Get a fresh token
                $.ajax({
                    url:    "https://api.epic.foundation/oauth2/get-token",
                    dataType: "json",
                    method:   "POST",
                    data:     {
                                  grant_type:    "client_credentials",
                                  client_id:     "testclient",
                                  client_secret: "testpass"
                              },
                    cache:    false,
                    success: function( tokenData, status, request)
                             {
                                 if ( (typeof tokenData != "undefined") && ( typeof tokenData.access_token != "undefined"))
                                 {
                                     getOrganizations ( tokenData );
                                 };
                             }
                });

                event.stopPropagation();
            });
        });
        </script>