From 831804fed341a588e23acb48cc7e6d38fcd49c7c Mon Sep 17 00:00:00 2001
From: Shakil <shakil.chowdhury@yahoo.com>
Date: Wed, 28 Feb 2018 22:56:34 +0000
Subject: [PATCH] Shakil Choudhury

Ajax call to get list of sponsors followed by another ajax call using the ID of the sponsor to get details and logo. Massaged this data into an object which is passed to Mustache.js to render from template.
---
 CoInvestor.html | 153 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 153 insertions(+)
 create mode 100644 CoInvestor.html
diff --git a/CoInvestor.html b/CoInvestor.html
new file mode 100644
index 0000000..b3ee25e
--- /dev/null
+++ b/CoInvestor.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <style>
+      body{
+        font-family: 'Open Sans',sans-serif;
+        font-size: 20px;
+        text-align: center;
+        background-color: #f7fbf9;
+        color:#4a4a4a;
+      }
+
+      #fund-manager-container{
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+      #fund-manager-container ul{
+        margin: auto;
+      }
+
+      .token{
+        display: flex;
+        align-items: center;
+        background-color: white;
+        border: 2px solid #dce5eb;
+        padding: 12px;
+        margin: 10px auto;
+        height: 150px;
+      }
+
+      a{
+        color:#d60b52;
+        font-size:28px;
+        margin-left:20px;
+        float: right;
+      }
+
+      .btnbox{
+        margin-left:auto;
+        margin-right:20px;
+      }
+
+      .title{
+        padding:0;
+        margin: 10px;
+        font-size: 16px;
+      }
+
+      .token img{
+        max-height: 100px;
+        max-width: 400px;
+        margin: 10px;
+      }
+
+      .sponsor{
+        background-color: #fddee9;
+        font-size: 11px;
+        padding:5px;
+        border-radius: 6px;
+        margin: 3px;
+      }
+
+      ul *{
+        list-style-type:none;
+      }
+
+    </style>
+    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.3/mustache.min.js'></script>
+    <title>CoInvestor Coding Test</title>
+  </head>
+  <body>
+    <div id="intro">
+      This page showcases a list of fund managers that all have profiles on the <span style="color:#d60b52">CoInvestor</span> platform.
+      <hr>
+    </div>
+    <div id="fund-manager-container">
+      <ul>
+        <script id="token-template" type="text/template">
+          <li class="token">
+            <div class="sponsor-box">
+              {{#sponsors}}
+              <p class="sponsor">{{.}}</p>
+              {{/sponsors}}
+            </div>
+            <img src="{{logo}}">
+            <p class="title">{{title}}</p>
+            <div class="btnbox">
+              <a class="website" href="{{website}}"><i class="fas fa-globe"></i></a>
+              <a class="email" href="mailto:{{email}}"><i class="fas fa-envelope"></i></a>
+            </div>
+          </li>
+        </script>
+      </ul>
+    </div>
+  </body>
+  <script>
+  $( document ).ready(function() {
+
+    let $tm = $("#fund-manager-container");
+    let $tokens = $tm.find("ul");
+    let tokentemplate = $tm.find("#token-template").html();
+
+    function renderToken(data){
+      $tokens.append(Mustache.render(tokentemplate, {title:data.title, logo:data.logo, sponsors:data.sponsors, website: data.website, email:data.email}));
+    }
+
+    function getData(page = 1){
+      let currentPage = page;
+      $.ajax({
+        type: "GET",
+        url: "https://api.coinvestor.co.uk/v2/company/sponsor?&page="+page,
+        dataType: "json",
+        success: function(data){
+          $.each(data.data, function(i, item){
+            $.ajax({
+              type: "GET",
+              url: "https://api.coinvestor.co.uk/v2/company/sponsor/"+ item.id +"?include=latestLogo,primarySponsorType,otherSponsorTypes,communications",
+              dataType: "json",
+              success: function(details){
+                let ob = new Object();
+                ob.title = item.attributes.name.toUpperCase();
+                console.log(ob.title);
+                ob.sponsors = new Array();
+                $.each(details.included, function(x, detail){
+                  if(detail.type == "file_manager"){
+                    ob.logo = detail.attributes.path;
+                  }else if(detail.type == "sponsor_type"){
+                    ob.sponsors.push(detail.attributes.value);
+                  }else if(detail.type == "company_communication"){
+                    ob.email = detail.attributes.email;
+                    ob.website = detail.attributes.website;
+                  }
+                });
+                renderToken(ob);
+              }
+            });
+          });
+
+          if(currentPage < data.meta.pagination.total_pages){
+            currentPage++;
+            getData(currentPage);
+          }
+        }
+      });
+    }
+    getData();
+  });
+  </script>
+</html>
