var iopApp = angular.module('iopApp', ['ngRoute']); var IframeURL = "http://ford-eu.nextgen-technology.net"; /* sample VINs WF0AXXWPMADD04397 WF0LXXGCBLEP55524 */ //Omniture tagging events OM.IOP = OM.IOP || {}; var IOP = IOP || {}; OM.IOP.pl = function(page,action,obj) { s.linkTrackVars = "channel,hier1,eVar11,eVar12,eVar16,eVar48,eVar54,prop5,prop12,prop16,prop54"; switch (page) { case "vehicleselect": switch (action) { case "load": s.pageName = "brand:tech:mobile compatibility:find device"; s.channel = "technology"; s.hier1 = "technology:connectivity:mobile compatibility:find device"; s.eVar4 = s.eVar4; s.prop4 = s.prop4; s.eVar14 = s.eVar14; s.prop14 = s.prop14; s.eVar11 = "brand:tech:mobile compatibility:find device"; s.eVar48 = "event:mobile compatibility:device search-start"; s.prop11 = "brand:tech:mobile compatibility:find device"; s.prop48 = "event:mobile compatibility:device search-start"; s.events = "event43"; s.t(); break; case "selectNameplate": s.hier1 = "brand:tech:mobile compatibility:find device:select vehicle"; s.pev2 = "brand:tech:mobile compatibility:find device:select vehicle"; s.pe = "o"; s.channel = "technology"; s.hier1 = "technology:connectivity:mobile compatibility:find device"; s.eVar16 = "ford " + obj.name.toString().toLowerCase(); s.prop5 = "mobile compatibility:select vehicle"; s.prop16 = "ford " + obj.name.toString().toLowerCase(); s.eVar54 = "ui:rad:pc"; s.prop54 = "ui:rad:pc"; s.prop11 = "brand:tech:mobile compatibility:find device:select vehicle"; s.eVar4 = s.eVar4; s.prop4 = s.prop4; s.eVar14 = s.eVar14; s.prop14 = s.prop14; omnitureOnClick('o', "brand:tech:mobile compatibility:find device:select vehicle"); break; case "selectModelYear": s.pev2 = "brand:tech:mobile compatibility:find device:select year:ford " + obj.name.toString().toLowerCase(); s.pe = "o"; s.channel = "technology"; s.hier1 = "technology:connectivity:mobile compatibility:find device"; s.eVar12 = obj.year.toString(); s.eVar16 = "ford " + obj.name.toString().toLowerCase(); s.prop5 = "mobile compatibility:select year"; s.prop12 = obj.year.toString(); s.prop16 = "ford " + obj.name.toString().toLowerCase(); s.eVar54 = "ui:rad:pc"; s.prop54 = "ui:rad:pc"; omnitureOnClick('o', "brand:tech:mobile compatibility:find device:select year:ford " + obj.name.toString().toLowerCase()); break; case "enterVIN": s.pev2 = "brand:tech:mobile compatibility:find device:enter vin"; s.pe = "o"; s.channel = "technology"; s.hier1 = "technology:connectivity:mobile compatibility:find device"; s.eVar16 = "ford " + obj.name.toString().toLowerCase(); s.prop5 = "mobile compatibility:enter vin"; s.prop12 = obj.year.toString(); s.prop16 = "ford " + obj.name.toString(); s.eVar54 = "ui:rad:pc"; s.prop54 = "ui:rad:pc"; omnitureOnClick('o', "brand:tech:mobile compatibility:find device:enter vin"); break; } break; case "syncselect": switch (action) { case "load": ClearVars(); s.hier1 = "brand:tech:mobile compatibility:find device:select sync system"; s.pageName = "brand:tech:mobile compatibility:find device:select sync system"; s.channel = "technology"; s.eVar11 = "brand:tech:mobile compatibility:find device:select sync system"; if (obj.name) { s.eVar12 = obj.year.toString(); s.eVar16 = "ford " + obj.name.toString().toLowerCase(); s.prop11 = "brand:tech:mobile compatibility:find device:select sync system"; s.prop12 = obj.year.toString(); s.prop16 = "ford " + obj.name.toString().toLowerCase(); s.eVar4 = s.eVar4; s.prop4 = s.prop4; s.eVar14 = s.eVar14; s.prop14 = s.prop14; } s.t(); break; case "deviceResults": if (obj.name) { s.pageName = "brand:tech:mobile compatibility:find device:results:" + obj.name.toString().toLowerCase(); s.channel = "technology"; s.hier1 = "technology:connectivity:mobile compatibility:find device:results"; s.eVar11 = "brand:tech:mobile compatibility:find device:results"; s.eVar12 = obj.year.toString(); s.eVar16 = "ford " + obj.name.toString().toLowerCase(); s.eVar21 = obj.connection.toString(); s.eVar48 = "event:mobile compatibility:device search-complete"; s.eVar49 = "ford " + obj.name.toString().toLowerCase() +" search"; s.eVar54 = "ui:rad:pc"; s.prop11 = "brand:tech:mobile compatibility:find device:results"; s.prop12 = obj.year.toString(); s.prop16 = "ford " + obj.name.toString().toLowerCase(); s.prop48 = "event:mobile compatibility:device search-complete"; s.prop49 = "ford " + obj.name.toString().toLowerCase() +" search"; s.prop54 = "ui:rad:pc"; s.events = "event43"; } break; } break; case "syncresults": switch (action) { case "load": ClearVars(); if (obj.name) { s.hier1 = "brand:tech:mobile compatibility:find device:results:ford " + obj.name.toString().toLowerCase(); s.pageName = "brand:tech:mobile compatibility:find device:results:ford " + obj.name.toString().toLowerCase(); s.channel = "technology"; s.eVar11 = "brand:tech:mobile compatibility:find device:results " + obj.name.toString().toLowerCase();; if (obj.year) { s.eVar12 = obj.year.toString(); } s.eVar16 = "ford " + obj.name.toString().toLowerCase(); s.eVar21 = ""; s.eVar48 = "event:mobile compatibility:device search-complete"; s.eVar49 = "nameplate search"; s.eVar54 = "ui:rad:pc"; s.prop11 = "brand:tech:mobile compatibility:find device:select sync system"; s.prop12 = obj.year.toString(); s.prop16 = "ford " + obj.name.toString().toLowerCase(); s.prop48 = "event:mobile compatibility:device search-complete"; s.prop49 = "nameplate search"; s.prop54 = "ui:rad:pc"; s.events = "event43"; s.eVar4 = s.eVar4; s.prop4 = s.prop4; s.eVar14 = s.eVar14; s.prop14 = s.prop14; s.t(); } break; } break; } } iopApp.factory('VINService', function($http) { return { getVin: function(vin) { //return the promise directly. var serviceURL = "/cs/ContentServer?pagename=" + siteBase + "/SYNC2/Compatibility/ajax/ConnectionTypeService&VIN=" + vin; return $http.get(serviceURL) .then( function(result) { //resolve the promise as the data return result.data; }, function(data) { return data.status; } ); } }; }); iopApp.factory('VehicleList', function($http) { var getData = function() { return $http({ method: "GET", url: "/cs/ContentServer?pagename=" + siteBase + "/SYNC2/Compatibility/VehicleListData&pageID=" + PageID }).then(function(result) { return result.data; }); }; return { getData: getData }; }); iopApp.factory('storeService', function() { var savedData = {}; function set(data) { savedData = data; } function get() { return savedData; }; return { set: set, get: get }; }); //vehicle model/year controller iopApp.controller('iopVehicleController', function($scope, $route, $location, $http, $log, VehicleList, VINService, storeService) { //$scope.VehicleList = VehicleList.vehicles; var vehicleListPromise = VehicleList.getData(); $('.progress').hide(); vehicleListPromise.then(function(result) { // this is only run after $http completes $scope.VehicleList = result.vehicles; $scope.currentVehicle = { 'name': null, 'year': null, 'vin': null }; $scope.vehicleChanged = function() { if ($scope.vehicleList != undefined) { $scope.currentVehicle.name = $scope.vehicleList.name; $scope.years = $scope.vehicleList.years; OM.IOP.pl('vehicleselect','selectNameplate',$scope.currentVehicle); //Omniture } else { $scope.years = null; } }; $scope.yearChanged = function() { if ($scope.year != undefined) { $scope.currentVehicle.year = $scope.year.year; OM.IOP.pl('vehicleselect','selectModelYear',$scope.currentVehicle); //Omniture } else { $scope.currentVehicle.year = null; } }; $scope.submit = function() { var vehicle = $scope.currentVehicle; $scope.noVin = false; $('.progress').show(); //Check if form is valid if ($scope.vehicleForm.$valid) { //validate the VIN against the JSON service, pull out the model and year if (vehicle.vin != null) { VINService.getVin(vehicle.vin).then(function(data) { if (data == 500) { $scope.noVin = true; $('.progress').hide(); } else if (data.vehicle.name != null) { try { // throw error if vin does not exist. would be better to get error from service and use that rather than try/catch? $scope.currentVehicle.name = data.vehicle.name; $scope.currentVehicle.year = data.vehicle.year; $scope.currentVehicle.title = data.connectionType.title; storeService.set($scope.currentVehicle); OM.IOP.pl('vehicleselect','enterVIN',$scope.currentVehicle); $location.path('/' + data.connectionType.id + '/' + region + '/' + culture + '/0/1'); } catch (e) { $('.progress').hide(); $scope.noVin = true; } } }); } //If no VIN, use the select box inputs and forward to the Connection view else { $location.path('/' + vehicle.name + '/' + vehicle.year); } } }; }); }); //Connection selection controller iopApp.controller('iopConnectionController', function($rootScope, $scope, $route, $routeParams, $http, $location, VehicleList, VINService, storeService, $log) { var vehicleListPromise = VehicleList.getData(); vehicleListPromise.then(function(result) { // this is only run after $http completes $scope.VehicleList = result.vehicles; $scope.vehicleModel = $route.current.params.model; $scope.vehicleYear = $route.current.params.year; $scope.vin = $route.current.params.vin; //Validate model and year, if not forward back to the selection view if ($scope.vehicleModel == "" || $scope.vehicleYear == "") { $location.path('/'); } $scope.currentVehicle = { 'name': $scope.vehicleModel, 'image': null, 'year': $scope.vehicleYear, 'vin': $scope.vin, 'connection': null, 'connections': [], 'title': null }; OM.IOP.pl('syncselect','load',$scope.currentVehicle); //Omniture //This iterates through the VehicleList service, finds the selected Model/Year and pulls out the related connection types //and populates the currentVehicle array with them for (var i = 0; i < $scope.VehicleList.length; i++) { if ($scope.VehicleList[i].name == $scope.vehicleModel) { for (var x = 0; x < $scope.VehicleList[i].years.length; x++) { if ($scope.VehicleList[i].years[x].year == $scope.vehicleYear) { $scope.currentVehicle.image = $scope.VehicleList[i].years[x].image; $scope.currentVehicle.connections = $scope.VehicleList[i].years[x].connectionTypes; } } } } //If selected a connection, forward to the iframe $scope.submit = function() { if ($scope.connections != null) { $scope.currentVehicle.connection = $scope.connections; // TODO: need to make this select correct 'title' based on selection index. Used jquery, angular may be better. var selectedIndex = $('.detailsText input[type="radio"]:checked').attr('data-index'); $scope.currentVehicle.title = $scope.currentVehicle.connections[selectedIndex].title; $scope.sendData($scope.currentVehicle); OM.IOP.pl('syncselect','deviceResults',$scope.currentVehicle); //Omniture } }; $scope.back = function() { $location.path('/'); }; $scope.sendData = function(vehicle) { OM.IOP.pl('syncselect','deviceResults',vehicle); //Omniture $location.path('/' + vehicle.connection + "/" + region + "/" + culture + "/0/1"); }; //If there's only one connection type, it skips the selection and forwards straight to the iframe if ($scope.currentVehicle.connections.length == 1) { $scope.currentVehicle.connection = $scope.currentVehicle.connections[0].id; $scope.currentVehicle.title = $scope.currentVehicle.connections[0].title; $scope.sendData($scope.currentVehicle); } //store currentVehicle to storeService factory for cross controller use storeService.set($scope.currentVehicle); //Fire the external lightbox $scope.lightbox = function(item) { //engine.media.mdp.onFullScreen(item.image, item.title, '+'); overlayer.open({ content : "" + item.title + "", height:560, width:780, mediatype:"Image_C", callbackAfter:function(){} }); }; }); }); //Iframe controller iopApp.controller('iopIframe', function($rootScope, $scope, $route, $routeParams, $http, $location, $sce, $window, storeService, $log) { var params = $route.current.params; // get current car data for preview and check for vin $scope.currentVehicle = storeService.get(); OM.IOP.pl('syncresults','load',$scope.currentVehicle); //Omniture //contstruct NextGen URL $scope.iframeURL = IframeURL + "/?system=" + params.system + "®ion=" + region + "&culture=" + params.culture; $scope.url = $sce.trustAsResourceUrl($scope.iframeURL); $('#container_main').width('780'); $scope.back = function() { $location.path('/'); }; }); function ClearVars(){ for (var i=0; i < 75; i++) { s['prop'+i]=''; s['eVar'+i]=''; if(i<=5) s['hier'+i]=''; } svarArr = ['pageName','channel','products','events','campaign','purchaseID','state','zip','server','linkName']; for (var i=0; i < svarArr.length ; i++) { s[svarArr[i]]=''; } } function frameLoaded() { $('.progress').hide(); };