Synchronized Load

Demonstrating numerous asynchronous data loading with interval synchronization at the completion of both

by David Kyle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<div id="container" class="container-fluid">
<h1 class="text-primary">
Async Load Status:
</h1>
<div class="messages-container bg-light col-12" data-bind="foreach: Messages">
  <div class="message row" data-bind="fadeVisible: $parent.AllowFade">
    <span data-bind="text: Date" class="col-3"></span>
    <span data-bind="text: Message" class="col"></span>
  </div>
</div>
</div>

CSS

.messages-container {
  border-top: solid 1px #cdcdcd;
}
.message {
  display: none;
}

JavaScript

ko.bindingHandlers.fadeVisible = {
    init: function(element, valueAccessor) {
        // Initially set the element to be instantly visible/hidden depending on the value
        var value = valueAccessor();
        $(element).toggle(ko.unwrap(value)); // Use "unwrapObservable" so we can handle values that may or may not be observable
    },
    update: function(element, valueAccessor) {
    		console.log("boom");
        // Whenever the value subsequently changes, slowly fade the element in or out
        var value = valueAccessor();
        ko.unwrap(value) ? $(element).hide().fadeIn('slow') : $(element).show().fadeOut('slow');
    }
};

function getRandom() {
	return Math.floor(Math.random() * 500) * 10;
}

function DraftViewModel() {
	var local = this;
  
  local.ReferenceNumber = "";
  local.Name = "test";
  local.Targets = Array();
  local.SupplementalNotes = Array();
  return local;
}

function Message() {
	var m = this;
  
  m.Date = ko.observable();
  m.Message = ko.observable("");
}

function MessagesViewModel() {
	var mvm = this;
  
  mvm.Messages = ko.observableArray([]);
  
  mvm.AddMessage = function(messageContent) {
  	let message = new Message();
    message.Date("[" + moment().format("MM-DD-YYYY HH:mm:ss") + "] - ");
    message.Message(messageContent);
  	mvm.Messages.push(message);
  }
  
  mvm.AllowFade = ko.observable(true);
}



let messages = new MessagesViewModel();

function loadDraftReferences(vm, referenceNumber, continueOperations) {
	// TODO: Would be an ajax call
  messages.AddMessage("Loading draft references for reference number: " + referenceNumber + ".");
	setTimeout(function() {
  	messages.AddMessage("Completed loading draft references.");
    vm.ReferenceNumber = referenceNumber;
    if(continueOperations) {
    	continueOperations();
    }
  }, getRandom());
}

function loadDraftTargets(vm, referenceNumber, continueOperations) {
	// TODO: Would be an ajax call
  messages.AddMessage("Loading targets for reference number: " +...