<!DOCTYPE html>
<html>

  <head>
    
    <!-- Please note that we use https://getmdl.io/components for quick and easy page 
         styling and for our client components. Look on their website to see how to use
         Material Design Lite -->
    
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
    <link rel="stylesheet" href="style.css">    
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>  
    <link rel="stylesheet" href="style.css"> 
    
    <!-- Please note how we hardcode the use of heat-sdk version, 0.5.0 in this case -->
    
    <script src="https://unpkg.com/heat-sdk@0.5.0/dist/heat-sdk.umd.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
      function beep() {
        var snd = new Audio("data:audio/wav;base64,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qJrx4KOQjahZxWbcZgztj2c49nKmkId44S71j0c8eV9yDK6uPRzx5X18eDvjvQ6yKo9ZSS6l//8elePK/Lf//IInrOF/FvDoADYAGBMGb7FtErm5MXMlmPAJQVgWta7Zx2go+8xJ0UiCb8LHHdftWyLJE0QIAIsI+UbXu67dZMjmgDGCGl1H+vpF4NSDckSIkk7Vd+sxEhBQMRU8j/12UIRhzSaUdQ+rQU5kGeFxm+hb1oh6pWWmv3uvmReDl0UnvtapVaIzo1jZbf/pD6ElLqSX+rUmOQNpJFa/r+sa4e/pBlAABoAAAAA3CUgShLdGIxsY7AUABPRrgCABdDuQ5GC7DqPQCgbbJUAoRSUj+NIEig0YfyWUho1VBBBA//uQZB4ABZx5zfMakeAAAAmwAAAAF5F3P0w9GtAAACfAAAAAwLhMDmAYWMgVEG1U0FIGCBgXBXAtfMH10000EEEEEECUBYln03TTTdNBDZopopYvrTTdNa325mImNg3TTPV9q3pmY0xoO6bv3r00y+IDGid/9aaaZTGMuj9mpu9Mpio1dXrr5HERTZSmqU36A3CumzN/9Robv/Xx4v9ijkSRSNLQhAWumap82WRSBUqXStV/YcS+XVLnSS+WLDroqArFkMEsAS+eWmrUzrO0oEmE40RlMZ5+ODIkAyKAGUwZ3mVKmcamcJnMW26MRPgUw6j+LkhyHGVGYjSUUKNpuJUQoOIAyDvEyG8S5yfK6dhZc0Tx1KI/gviKL6qvvFs1+bWtaz58uUNnryq6kt5RzOCkPWlVqVX2a/EEBUdU1KrXLf40GoiiFXK///qpoiDXrOgqDR38JB0bw7SoL+ZB9o1RCkQjQ2CBYZKd/+VJxZRRZlqSkKiws0WFxUyCwsKiMy7hUVFhIaCrNQsKkTIsLivwKKigsj8XYlwt/WKi2N4d//uQRCSAAjURNIHpMZBGYiaQPSYyAAABLAAAAAAAACWAAAAApUF/Mg+0aohSIRobBAsMlO//Kk4soosy1JSFRYWaLC4qZBYWFRGZdwqKiwkNBVmoWFSJkWFxX4FFRQWR+LsS4W/rFRb/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VEFHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAU291bmRib3kuZGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMjAwNGh0dHA6Ly93d3cuc291bmRib3kuZGUAAAAAAAAAACU=");  
        snd.play();
      }
      beep();      
      $(document).ready(function () {
        var sdk = new heatsdk.HeatSDK()
        var subs = {}

        function setup(id, name, subscription) {
          var input = $("#"+id)
          var logMessage = (m) => { 
            beep();
            log(name + " >>>>> " + JSON.stringify(m,null,2));
          }
          var toggle = () => {            
            if (subs[id]) {
              log("unsubscribe "+name)
              subs[id].close()
              subs[id] = null
            }
            else {
              log("subscribe "+name+" | now we wait")
              subs[id] = subscription.onMessage(logMessage)
            }
          }
          toggle()
          input.change(toggle)
        }

        // Note that all websocket subscriptions can be given filters that determine when they are 
        // invoked, or not. Please see https://heat-ledger-ltd.github.io/heat-sdk/classes/_heat_subscriber_.heatsubscriber.html
        // for details on the various subscriber filters.
        setup('block-pushed', 'block pushed', sdk.subscriber.blockPushed({}))
        setup('block-popped', 'block popped', sdk.subscriber.blockPopped({}))
        setup('balance-changed', 'balance changed', sdk.subscriber.balanceChanged({}))
        setup('order', 'order', sdk.subscriber.order({}))
        setup('trade', 'trade', sdk.subscriber.trade({}))
        setup('message', 'message', sdk.subscriber.message({}))
        setup('unconfirmed', 'unconfirmed', sdk.subscriber.unconfirmedTransaction({}))
      })
      function log(msg) {
        var console = $('#console')
        console.append(msg+"\n"); 
        console.scrollTop(console[0].scrollHeight - console.height());
      }
    </script>
  </head>

  <body>
    <h3>HEAT-SDK | Websockets / push</h3>
    
    <h6>With heat-sdk we can subscribe for realtime push messages for observing live blockchain events. Checkout the <a href="https://heat-ledger-ltd.github.io/heat-sdk/classes/_heat_subscriber_.heatsubscriber.html">sdk documentation</a> for further details.
    Note that these same samples will run in your browser, in your mobile phone and in your server side scripts.</h6>
    
    <h6>Expect blocks to arrive every 30 seconds, this means you'd have to wait at max 30 seconds to see the push messages coming in.</h6>

    <div class="demo-card-wide mdl-card mdl-shadow--2dp">
      <div class="mdl-card__title">
        <h2 class="mdl-card__title-text"></h2>
      </div>
      <div class="mdl-card__supporting-text">
        <div>Status ouput and push message contents</div>
        <textarea rows="10" id="console"></textarea>        
        <div>Toggle the handles to subscribe/unsubscribe to push topics</div>
        <br>
        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="block-pushed">
          <input type="checkbox" id="block-pushed" class="mdl-switch__input" checked>
          <span class="mdl-switch__label">Blocks pushed</span>
        </label>
        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="block-popped">
          <input type="checkbox" id="block-popped" class="mdl-switch__input" checked>
          <span class="mdl-switch__label">Blocks popped</span>
        </label>        
        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="balance-changed">
          <input type="checkbox" id="balance-changed" class="mdl-switch__input" checked>
          <span class="mdl-switch__label">Balance changed</span>
        </label>   
        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="order">
          <input type="checkbox" id="order" class="mdl-switch__input" checked>
          <span class="mdl-switch__label">DEX Order Update</span>
        </label> 
        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="trade">
          <input type="checkbox" id="trade" class="mdl-switch__input" checked>
          <span class="mdl-switch__label">DEX Trade</span>
        </label> 
        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="message">
          <input type="checkbox" id="message" class="mdl-switch__input" checked>
          <span class="mdl-switch__label">Message</span>
        </label> 
        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="unconfirmed">
          <input type="checkbox" id="unconfirmed" class="mdl-switch__input" checked>
          <span class="mdl-switch__label">Unconfirmed Transaction</span>
        </label> 
      </div>
    </div>    
    
  </body>
</html>
body {
  padding: 10px;
}
.demo-card-wide.mdl-card {
  width: 512px;
}
.demo-card-wide > .mdl-card__title {
  color: #fff;
  height: 176px;
  background: url('https://media.licdn.com/mpr/mpr/AAEAAQAAAAAAAARSAAAAJDZlNmMzZGZjLTJmYjgtNDExMi1hNTI4LWVmZTViYmZjOTQzOA.jpg') center / cover;
}
.demo-card-wide > .mdl-card__menu {
  color: #fff;
}
.bigger {
  font-size: 16px;
  margin-bottom: 8px;
}
.mdl-switch {
  margin-bottom: 4px;
}
textarea {
  width: 100%;
  background-color: black;
  color: yellow;
  font-family: monospace;
  margin-top: 8px;
}