angular rest cars

by Akram kamal

HTML

<div ng-app='myApp'>
    <div ng-controller="CarCtrl">
        <div>
            <label for="make">Make:</label>
            <select id="make" ng-model="make" ng-options="make.name for make in makes">
                <option value=''>Select</option>
            </select>
        </div>
        <div>
            <label for="model">Model:</label>
            <select id="model" ng-model="model" ng-options="model.name for model in make.models">
                <option value=''>Select</option>
            </select>
        </div>
        <div>
            <label for="year">Year:</label>
            <select id="year" ng-model="year" ng-options="year.year for year in model.years">
                <option value=''>Select</option>
            </select>
        </div>
        <div>
            <button class="btn" ng-disabled="!make.name || !model.name || !year.year" ng-click="getCars()">Get Cars</button>
        </div>
        <div id="results" ng-repeat="style in myCars.styles">
            <div class="entry">
                <div first-image-of-my-car data-styleid="myCars.id"></div>
                <first-image-of-my-car data-styleid="style.id"></first-image-of-my-car>
                <div>StyleID: {{style.id}}</div>
                <div>{{style.name}}</div>
                <div>{{style.submodel}}</div>
                <div>{{style.trim}}</div>
            </div>
        </div>
        <br/>
        <div ng-hide="myCars.styles.length">No cars found or selected.</div>
    </div>
</div>

CSS

body {
    font-family: Sans-Serif;
}
label {
    width: 60px;
    display: block;
    float: left;
}
select {
    width: 100px;
}
button {
    margin-left: 60px;
    width: 100px;
}
img {
    width: 200px;
}
.entry {
    border: 1px solid black;
}

JavaScript

var placeholderUrl = 'https://maxbuttons.com/wordpress/wp-content/themes/maxbuttonsdotcom/images/placeholder-200x150.png';

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

app.service('VehicleService', function ($q, $http) {

    this.getAllMakes = function () {
        var deferred = $q.defer();
        var url = 'https://api.edmunds.com/api/vehicle/v2/makes?state=new&view=basic&fmt=json&api_key=mexvxqeke9qmhhawsfy8j9qd'
        $http.get(url).then(function (response) {
            deferred.resolve(response.data.makes);
        }, function (error) {
            deferred.reject(new Error(JSON.stringify(error)));
        });
        return deferred.promise;
    }

    this.getCar = function (makeName, modelName, year) {
        var deferred = $q.defer();
        var url = 'https://api.edmunds.com/api/vehicle/v2/' + makeName + '/' + modelName + '/' + year + '?category=Sedan&view=full&fmt=json&api_key=mexvxqeke9qmhhawsfy8j9qd'
        $http.get(url).then(function (response) {
            deferred.resolve(response.data);
        }, function (error) {
            deferred.reject(new Error(JSON.stringify(error)));
        });
        return deferred.promise;
    };
});


app.service('VehiclePhotoService', function ($q, $http, $timeout) {

    this.getCarData = function (styleId) {
        var deferred = $q.defer();
        var url = 'https://api.edmunds.com/v1/api/vehiclephoto/service/findphotosbystyleid?styleId=' + styleId + '&fmt=json&api_key=mexvxqeke9qmhhawsfy8j9qd'
        var delay = Math.floor((Math.random() * 5000) + 1);
        console.log(delay);
        // random delay to keep api happy and don't get rate limited
        $timeout(function () {
            $http.get(url).then(function (response) {
                var carData = response.data;
                deferred.resolve(carData);
            }, function (error) {
                deferred.reject(new Error(JSON.stringify(error)));
            });
        }, delay);
        return deferred.promise;
    }

   ...