Option Valuations

Get option valuations for a used car

by CAPDev

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/8.7/styles/agate.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.7/highlight.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<div class="container body-content">

  <h3>Option Valuations</h3>
  <p>Get option valuations for a used car</p>
  <div ng-controller="optionValuesCtrl as vm">
    <div>
      <div class="form-group">
        <label>Authentication Token</label>
        <textarea class="form-control" cols="15" rows="9" ng-model="vm.token" placeholder="authentication token" required></textarea>
      </div>
      <div class="form-group">
        <label>Cap Id</label>
        <input type="text" class="form-control" placeholder="i.e. 61308" ng-model="vm.capId" required>
      </div>
      <div class="form-group">
        <label>Registration Date</label>
        <input type="text" class="form-control" placeholder="i.e. 2013-10-01" ng-model="vm.registrationDate" required>
      </div>
      <div class="form-group">
        <label>Mileage</label>
        <input type="text" class="form-control" placeholder="i.e. 49168" ng-model="vm.mileage" required>
      </div>

      <div class="form-group">
        <label>Required Valuation Months</label>
        <input type="text" class="form-control" placeholder="Comma separated, i.e. 0,1,2,10,60" ng-model="vm.months" required>
      </div>
      <div class="form-group">
        <label>Required Conditions</label>
        <div class="input-group">
          <label class="checkbox-inline" ng-repeat="condition in vm.conditions">
            <input type="checkbox" value="condition.name" ng-model="condition.selected">{{condition.name}}
          </label>
        </div>
      </div>
      <div class="form-group">
        <label>Option IDs</label>
        <input type="text" class="form-control"...

CSS

body {
  padding-top: 0;
  padding-bottom: 20px;
}

.body-content {
  padding-left: 15px;
  padding-right: 15px;
}

input,
select,
textarea {
  max-width: 280px;
}

pre,
code {
  max-height: 400px;
}

p {
  font-size: 16px;
}

JavaScript

angular.module('capApiDemo', []);

angular.module('capApiDemo').directive('ngHighlight', function() {
  return {
    restrict: 'A',
    link: function($scope, element, attrs) {
      $scope.$watch(attrs.ngHighlight, function(newValue) {
        element.text(newValue);
        hljs.highlightBlock(element[0]);
      });
    }
  };
});

angular
  .module('capApiDemo')
  .controller('optionValuesCtrl', optionValuesCtrl);

optionValuesCtrl.$inject = ['$http'];

function optionValuesCtrl($http) {
  var vm = this;
  vm.result = '';
  vm.selectedFormat = 'application/json';
  vm.conditions = [{
    name: "Clean",
    selected: false
  }, {
    name: "Average",
    selected: false
  }, {
    name: "Below",
    selected: false
  }, {
    name: "Retail",
    selected: false
  }];

  vm.getResult = getResult;

  function getResult() {

    vm.result = '';
    var requestUrl = 'https://services.cap.co.uk/OptionValues/v1/Options/' + vm.capId;

    var data = {
      RegistrationDate: vm.registrationDate,
      Mileage: vm.mileage,
      ConditionsRequired: [],
      RequiredValuationMonths: vm.months ? vm.months.split(",").map(function(item) {
        return parseInt(item, 10)
      }) : null,
      ListOfOptionsIdsToValue: vm.optionIds ? vm.optionIds.split(",").map(function(item) {
        return parseInt(item, 10)
      }) : [],
      ListOfPackIDsToValue: vm.packIds ? vm.packIds.split(",").map(function(item) {
        return parseInt(item, 10)
      }) : [],
    };
    for (i = 0; i < vm.conditions.length; i++) {
      if (vm.conditions[i].selected) {
        data.ConditionsRequired.push(vm.conditions[i].name);
      }
    }

    $http({
        method: 'POST',
        url: requestUrl,
        headers: {
          'Authorization': 'Bearer ' + vm.token,
          'Accept': vm.selectedFormat
        },
        data: data
      })
      .then(function(response) {
        vm.resultAvailable = true;
        if (vm.selectedFormat === 'application/json') {
          vm.result =...