Job Management UI

This example shows how to implement a client side job management UI using intercooler

Note that the "server side" implementation is mocked out using mockjax, so you can see the entire implementation. Click the "Source Code" tab to see the code.



    <style>
      #main {
        transition: all .5s;
      }
      #main.ic-transitioning {
        opacity: 0;
      }
    </style>

    <div id="main" ic-src="/job/status">
      <!-- This post to /job causes the outer div to refresh due to intercooler's dependencies system -->
      <button class="btn btn-primary" ic-post-to="/job">Start Job</button>
    </div>

    <script>

    //========================================================================
    // Mock Server-Side HTTP End Point
    //========================================================================
    $.mockjax({
      url: '/job',
      response: function (settings) {
        jobManager.start();
      }
    });

    $.mockjax({
      url: '/job/status',
      response: function (settings) {
        var job = jobManager.currentProcess();
        this.responseText = jobStatusTemplate(job);
      }
    });

    $.mockjax({
      url: '/job/status/percent_complete',
      response: function () {
        var job = jobManager.currentProcess();
        this.responseText = job.percentComplete + "%";
        if (job.complete) {
          this.headers = { "X-IC-Refresh": "/job/status" }; // if the job is complete, refresh the entire job status UI
        }
      }});

    //========================================================================
    // Mock Server-Side Templates
    //========================================================================
    function jobStatusTemplate(process) {
      if(process.complete) {
        return 'Job Complete!';
      } else {
        return 'Job Running:' +
          '  <div class="progress progress-striped active">' +
          '   <div class="progress-bar" ic-style-src="width:/job/status/percent_complete" ic-poll="1s" style="width:0%"></div>' +
          '  </div>';
      }
    }

    //========================================================================
    // Mock Process Manager
    //========================================================================
    var jobManager = (function(){
      var currentProcess = null;
      return {
        start : function() {
          currentProcess = {
            complete : false,
            percentComplete : 0
          }
        },
        currentProcess : function() {
          currentProcess.percentComplete += Math.min(100, Math.floor(33 * Math.random()));  // simulate progress
          currentProcess.complete = currentProcess.percentComplete >= 100;
          return currentProcess;
        }
      }
    })();
    </script>