HIW JS API Example #3

Shows how to use the Synchronizer.

by HealthIndicators

HTML

<script src="https://rawgit.com/HealthIndicators/js-api/current-release/Content/Scripts/API/Output/hiw-api.min.js"></script>
<div>
    <label for="apiKey">API Key:</label>
    <input id="apiKey" type="text" />
</div>
<div>
    <label for="baseURL">Base URL:</label>
    <input id="baseURL" type="text" />
    <button id="runButton">Run Example</button>
</div>

<ul id="actions">
    <li id="getLocales"><strong>Get Locales</strong> <span></span></li>
    <li id="getTimeframes"><strong>Get Timeframes</strong> <span></span></li>
    <li id="getIndicatorDescriptions"><strong>Get Indicator Descriptions</strong> <span></span></li>
    <li id="overallStatus"><strong>Overall status</strong> <span></span></li>
</ul>

CSS

html, body {
    width: 100%;
    height: 100%;
}

label {
    display: inline-block;
    width: 200px;
    text-align: right;
}

#actions {
    margin: 20px 0;
    padding: 0;
    list-style: none;
}

#actions li {
    padding: 10px;
}

#actions li strong {
    display: inline-block;
    width: 200px;
}

#actions li strong:after {
    content: "...";
}

#actions li.processing span:after {
    content: "processing...";
    color: orange;
}

#actions li.done span:after {
    content: "done.";
    color: green;
}

JavaScript

var apiKey_Key = "apiKey";
var baseURL_Key = "baseURL";
var indicatorDescriptionID_Key = "indicatorDescriptionID";
var api = null;
var map = null;

function run() {
    var apiKey = $("#apiKey").val();
    var baseURL = $("#baseURL").val();
    
    $("#runButton").attr("disabled", "disabled");
    
    //Create an API instance against which to make your API calls, passing in your API key.
    api = new hiw.API(apiKey, baseURL);

    runExample();
}

function runExample() {
    var synchronizer = new hiw.Synchronizer();
    var localesLI = $("#getLocales");
    var timeframesLI = $("#getTimeframes");
    var indicatorDescriptionsLI = $("#getIndicatorDescriptions");
    var overallStatusLI = $("#overallStatus");
    
    // Indicate the process has started.
    processing(overallStatusLI); 
    
    // Get locales.
    processing(localesLI); 
    synchronizer.add(hiw.Locale.getAll(api, function (result) {
       done(localesLI); 
    }));
    
    // Get timeframes.
    processing(timeframesLI); 
    synchronizer.add(hiw.Timeframe.getAll(api, function (result) {
       done(timeframesLI); 
    }));
    
    // Get indicator descriptions.
    processing(indicatorDescriptionsLI); 
    synchronizer.add(hiw.IndicatorDescription.getAll(api, function (result) {
       done(indicatorDescriptionsLI); 
    }));
    
    // This delegate function will run after all Asyncs have completed.
    synchronizer.sync(function () {
        done(overallStatusLI);
        runComplete();
    });
}}

function runComplete() {
    $("#runButton").removeAttr("disabled");
}

function processing($target) {
    $target.attr("class", "processing");
}

function done($target) {
    $target.attr("class", "done");
}

function getParameters() {
    var apiKey = null;
    var baseURL = null;
    
    if (typeof (Storage) !== "undefined") {
        apiKey = localStorage.getItem(apiKey_Key);
        baseURL = localStorage.getItem(baseURL_Key);
    }
    
    $("#apiKey").val(apiKey);
   ...