Vehicle Types

Get all available vehicle types

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>Vehicle Types</h3>

    <p>Get all available vehicle types</p>
    <div ng-controller="vehicleTypeController as vm">
        <div>
            <div class="form-group">
                <label>Authentication Token</label>
                <textarea type="text" rows="5" class="form-control" placeholder="Authentication Token" ng-model="vm.authenticationToken" required></textarea>
            </div>
            <div class="form-group" style="margin-top: 20px;">
                <label>Result Format</label>
                <select class="form-control" ng-model="vm.selectedFormat">
                    <option value="application/json">JSON</option>
                    <option value="application/xml">XML</option>
                </select>
            </div>
            <button type="submit" class="btn btn-default" ng-click="vm.submit()">Get Vehicle Types</button>
        </div>
        <div ng-show="vm.resultAvailable" style="margin-top: 20px;"> <pre ng-highlight="vm.result"></pre>

        </div>
    </div>
</div>

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', ['$interpolate', function ($interpolate) {
    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('vehicleTypeController', vehicleTypeController);

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

function vehicleTypeController($http) {
    var vm = this;
    vm.authenticationToken = null;
    vm.selectedFormat = "application/json";

    vm.submit = function () {
        $http({
            method: 'GET',
            url: 'https://services.cap.co.uk/ShortTermForecast/v1/VehicleTypes',
            headers: {
                'Authorization': 'Bearer ' + vm.authenticationToken,
                    'Accept': vm.selectedFormat
            }
        }).then(function (response) {
            vm.resultAvailable = true;
            if (vm.selectedFormat === 'application/json') {
                vm.result = JSON.stringify(response.data, undefined, 2);
            } else {
                vm.result = response.data;
            }
        })
            .
        catch (function (errResponse) {
            vm.resultAvailable = true;
            if (vm.selectedFormat === 'application/json') {
                vm.result = JSON.stringify(errResponse.data, undefined, 2);
            } else {
                vm.result = errResponse.data;
            }
        });
    }
}