JSFiddle - React, Tailwind, and code Playground

by stefek99

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
  <div ng-controller="ctrl">

    <p>Checking availability of: {{ selectedIDs }}</p>

    <input type="button" value="Start" ng-click="checkAvailability()">

    <div class="cf"></div>

    <div class="upper">
      <div class="available">
        <h3>Available</h3>
        <p ng-repeat="item in available">{{ item }}</p>
      </div>      

      <div class="unavailable">
        <h3>Unavailable</h3>
        <p ng-repeat="item in unavailable">{{ item }}</p>
      </div>
    </div>

    <div class="cf"></div>

    <div class="lower">
      <p>Randomly selected available ID:</p>
      <div class="lastAvailableID">{{ lastAvailableID }}</div>
    </div>

  </div>

CSS

/* http://nicolasgallagher.com/micro-clearfix-hack/ */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.available, .unavailable {
	float: left;
	width: 200px;
	border: 2px solid black;
}

.available {
	margin-right: 20px;
}

.upper, .lower {
	border: 2px solid black;
}

.upper {
	background-color: LightBlue;
	width: 100%;
	display: inline-block;
}

.lower {
	position: relative;
	height: 250px;
}

.lastAvailableID {
	position: absolute;
	top: 100px;
	left: 50%;
}

JavaScript

var app = angular.module("app", []);

app.controller("ctrl", function($scope, $timeout, $q, checkAvailabilityService) {

	var ids = [6270002277,4552982500,4552981877,4552982136,4513108434,4552982677,4552662036,4552982000,4513106947,4552980901,4563073472,4552982333];

	$scope.checkAvailability = function() {
		$scope.selectedIDs = _.sample(ids, 8);
		$scope.available = [];
		$scope.unavailable = [];

		var promises = [];

		var setAvailability = function(data) {
			if(data.available) {
				$scope.available.push(data.guid);
			} else{
				$scope.unavailable.push(data.guid);
			}
		};		

		for (var i=0; i<$scope.selectedIDs.length; i++) {
			var promise = checkAvailabilityService.check($scope.selectedIDs[i]);
			promise.then(setAvailability);
			promises.push(promise);
		}

		var allPromises = $q.all(promises);
		allPromises.then(function() {
			$timeout(function(){
				$scope.lastAvailableID = $scope.available[$scope.available.length - 1];
			}, 2000);
		});
	};
});

app.factory("checkAvailabilityService", function($http, $q) {

	var endpoint = "http://live.me-tail.net/api/3.0/retailer/4/garmentsAvailable";

	var check = function(guid) {
		var defer = $q.defer();

		$http.get(endpoint, {
			params : { guid : guid }
		}).
		success(function(data) {

			if(_.contains(data.AvailableSkus, guid.toString())) {
				defer.resolve({ 
					guid : guid,
					available : true 
				});
			} else {
				defer.resolve({ 
					guid : guid,
					available : false 
				});
			}

		}).
		error(function(data) {
			defer.reject();
		});

		return defer.promise;
	};

	return {
		check : check
	};
});