Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- angular.module( 'tappApp.planManager', [
- 'ui.router'
- ])
- .config(['$stateProvider','$urlRouteProvider',function config( $stateProvider, $urlRouterProvider) {
- $stateProvider["state"]( 'planManager', {
- url: '/planManager/:state',
- views: {
- "main": {
- controller: 'planManagerControl',
- templateUrl: 'planManager/planManager.tpl.html'
- }
- },
- /* params: [{'planType':'new'}],*/
- data:{ pageTitle: 'Plan Manager' },
- resolve:{
- validState: function($stateParams,localStorageService){
- if($stateParams["state"]!="buy" && $stateParams["state"]!="audience" && $stateParams["state"]!="campaign"){
- $stateParams["state"]="buy";
- }
- /*TODO:
- Need to change this to remove the unnknown part of the URL and replace it with planManager/buy... Right now, is the unknown string is abcd, then the
- url still shows planManager/abcd although the right page is loaded*/
- return true;
- },
- pmGetPlan: function($http,$stateParams){
- var urlConfig='';
- if($stateParams["planType"]=='draft'){
- urlConfig="assets/data/mediaPlan_draft.json";
- }
- else if($stateParams["planType"]=='newClient'){
- urlConfig="assets/data/mediaPlan_new_client.json";
- }
- else {
- urlConfig="assets/data/mediaPlan_new.json";
- }
- var plan = $http({method: 'GET', url: urlConfig})
- .success(function(){
- /*console.log("Fetch successfull"+plan);*/
- })
- .error(function(){
- console.log(error);
- });
- return true;
- }
- }
- }]);
- $urlRouterProvider.when('/planManager/', '/planManager/buy');
- $urlRouterProvider.when('/planManager', '/planManager/buy');
- $urlRouterProvider.otherwise('/planManager/buy');
- })
- .run(['$rootScope','$state','$stateParams',function run ($rootScope, $state, $stateParams) {
- $rootScope.$state = $state;
- $rootScope.$stateParams = $stateParams;
- }])
- .directive('onLastRepeatDemo', function() {
- return function(scope, element, attrs) {
- if (scope.$last){
- setTimeout(function(){
- scope.$emit('onRepeatLastDemo', element, attrs);
- }, 1);
- }
- };
- })
- .directive('onLastRepeatBeh', function() {
- return function(scope, element, attrs) {
- if (scope.$last){
- setTimeout(function(){
- scope.$emit('onRepeatLastBeh', element, attrs);
- }, 1);
- }
- };
- })
- /**
- * And of course we define a controller for our route.
- */
- .controller( 'planManagerControl', ['$scope','localStorageService','$http','$rootScope','$stateParams', function($scope,localStorageService,$http,$rootScope,$stateParams) {
- /* if($('html').hasClass("defaultBg")){
- $('html').removeClass("defaultBg");
- }*/
- $rootScope["states"]=[{
- "name": "buy",
- "active": true,
- "currentState":false
- },{
- "name": "audience",
- "active": true,
- "currentState":false
- },{
- "name": "campaign",
- "active": true,
- "currentState":false
- }];
- $rootScope["state"] = $stateParams["state"];
- var activeIndex = 2;
- $.each($rootScope["states"], function(i,item){
- if(item["name"]==$rootScope["state"].toLowerCase() || i<activeIndex){
- item["active"]=true;
- if(item["name"]==$rootScope["state"].toLowerCase()){
- activeIndex = i;
- item["currentState"]=true;
- }
- }
- else
- {
- item["active"]=false;
- }
- });
- var pmTabs = $('.pmTab');
- $.each(pmTabs, function(i, item){
- if($(item).attr("id")!==$rootScope["state"]){
- $(item).css("visibility","hidden");
- }
- });
- $('#'+$rootScope["state"]).css("visibility","visible");
- angular.element(document).ready(function (){
- $.each(pmTabs, function(i, item){
- if($(item).attr("id")!==$rootScope["state"]){
- $(item).hide();
- }
- });
- $('.'+$rootScope["state"]).show();
- $('#'+$rootScope["state"]).show();
- });
- /*Buy code starts*/
- $scope["planObject"] = $.parseJSON(JSON.stringify(localStorageService.get("plan")));
- /*var buy = JSON.parse();*/
- $scope.updateBuyParam = function(event){
- if(event.target.attributes["name"]["value"]=="bbBiz"){
- $scope["planObject"]["buy"]["sBusinessType"] = (event.target.nextSibling.nextElementSibling.innerText).replace(/\n/g,'');
- }
- else if (event.target.attributes["name"]["value"]=="bbBuyType"){
- $scope["planObject"]["buy"]["sMediaBuy"]=event.target.nextSibling.nextElementSibling.innerText.replace(/\n/g,'');
- }
- else if (event.target.attributes["name"]["value"]=="bbMediaType"){
- $scope["planObject"]["buy"]["sMediaDelivery"]=event.target.nextSibling.nextElementSibling.innerText.replace(/\n/g,'');
- }
- else if (event.target.attributes["name"]["value"]=="bbMediaType"){
- $scope["planObject"]["buy"]["sMediaMethod"]=event.target.nextSibling.nextElementSibling.innerText.replace(/\n/g,'');
- }
- else{
- console.log('Invalid Buy Parameter Selection');
- }
- localStorageService.remove("plan");
- localStorageService.set("plan",$scope.planObject);
- };
- $scope["bBoxProps"] = [{
- "bbId":"bbBiz",
- "bbClass":[
- "disabledBb"
- ],
- "bbTitle":"BUSINESS",
- "bbOptIds":{
- "id1":"bbBiz1",
- "id2":"bbBiz2"
- },
- "bbName":"bbBiz",
- "bbLabelText":{
- "label1":"NYI",
- "label2":"Local"
- }
- },
- {
- "bbId":"bbBuyType",
- "bbClass":[
- "disabledBb"
- ],
- "bbTitle":"BUY TYPE",
- "bbOptIds":{
- "id1":"bbBuyType1",
- "id2":"bbBuyType2"
- },
- "bbName":"bbBuyType",
- "bbLabelText":{
- "label1":"Audience",
- "label2":"Spot"
- }
- },
- {
- "bbId":"bbMediaType",
- "bbClass":[
- "disabledBb"
- ],
- "bbTitle":"MEDIA TYPE",
- "bbOptIds":{
- "id1":"bbMediaType1",
- "id2":"bbMediaType2"
- },
- "bbName":"bbMediaType",
- "bbLabelText":{
- "label1":"Optimized Linear",
- "label2":"Addressable"
- }
- },
- {
- "bbId":"bbDelType",
- "bbClass":[
- "disabledBb"
- ],
- "bbTitle":"DELIVERY TYPE",
- "bbOptIds":{
- "id1":"bbDelType1",
- "id2":"bbDelType2"
- },
- "bbName":"bbDelType",
- "bbLabelText":{
- "label1":"Impressions",
- "label2":"GRP"
- }
- }];
- angular.element(document).ready(function (){
- $("#bbBiz").removeClass("disabledBb");
- var activeIndex = 0;
- var activeIndexFlag = false;
- var buyBoxArray = $(".buyBox");
- $("a#buy").on('click', this, function(){
- $("div#buyPBox").css('left','0%').css('display','inline-block');
- });
- $("a#audience").on('click', this, function(){
- $("div#audPBox").css('left','0%').css('display','inline-block');
- });
- $("a#campaign").on('click', this, function(){
- $("div#camPBox").css('left','0%').css('display','inline-block');
- });
- $("div.buyBox.disabledBb input").attr('disabled','disabled');
- $("a#buy").trigger('click');
- $("div.bbSelectOpt").on('change','input', function(){
- $.each(buyBoxArray,function(i,item){
- if($(item).hasClass('activeBb')){
- $(item).removeClass('activeBb');
- }
- });
- $(this).parents(".buyBox").addClass("activeBb");
- $.each($(this).parents('.bbSelect').children('.bbSelectOpt'), function(){
- $(this).removeClass('bbSelected');
- if($(this).children('input.css-checkbox').is(':checked')){
- $(this).addClass('bbSelected');
- }
- });
- $.each(buyBoxArray,function(i,item){
- if($(buyBoxArray[i]).hasClass("activeBb")){
- activeIndex = i;
- activeIndexFlag = true;
- }
- else if((i==(activeIndex+1)) && (activeIndexFlag===true) && ($(item).length>0)){
- $(item).removeClass('disabledBb');
- $(item).find('input').removeAttr('disabled').removeAttr('checked');
- $(item).find('.bbSelectOpt').removeClass('bbSelected');
- }
- });
- $.each(buyBoxArray,function(i,item){
- if(i>(activeIndex+1)){
- $(item).addClass("disabledBb");
- $(item).find('input').attr("disabled","disabled").removeAttr('checked');
- $(item).find('.bbSelectOpt').removeClass('bbSelected');
- }
- });
- });
- $("span#clearBuySelections").on('click',this,function(){
- $.each(buyBoxArray,function(i, item){
- if(i!==0){
- $(item).addClass('disabledBb');
- $(item).find('input').removeAttr('checked').attr("disabled","disabled");
- $(item).find('.bbSelected').removeClass('bbSelected');
- }
- else if(i===0){
- $(item).find('input').removeAttr('checked');
- $(item).find('.bbSelected').removeClass('bbSelected');
- }
- });
- });
- $("div#buy").removeClass("tappLoader");
- });
- /*Buy code ends*/
- /*Audience code starts*/
- $scope.planObject = $.parseJSON(JSON.stringify(localStorageService.get("plan")));
- $scope["custSelList"] = [];
- $scope["audienceBehavioral"]=[];
- $scope["audienceDemographics"] = [];
- $scope["demoFlag"]="";
- $scope["behFlag"]="";
- $scope["universeHousehold"] = "";
- $scope["segmentAudience"] = "";
- $scope["sSegmentHousehold"] = "";
- $scope.pmStateValidator = function(state){
- return true;
- };
- $scope.custNav = function(tabName, event){
- if(!($(event.target.parentElement).hasClass("active"))){
- if(tabName=="demo"){
- $('.demoContainer').toggleClass('active').addClass('tappLoader');
- $('.behContainer').toggleClass('active');
- $(event.target.parentElement.parentElement.children).removeClass('active');
- $(event.target.parentElement).toggleClass('active');
- gridCtrl.resizeGrid($(".demoContainer .gridContainer"));
- $('.demoContainer').removeClass('tappLoader');
- /* $scope.resizeGridSiblings();*/
- }
- else if(tabName=="beh"){
- $('.demoContainer').toggleClass('active');
- $('.behContainer').toggleClass('active').addClass('tappLoader');
- $(event.target.parentElement.parentElement.children).removeClass('active');
- $(event.target.parentElement).toggleClass('active');
- gridCtrl.resizeGrid($(".behContainer .gridContainer"));
- $('.behContainer').removeClass('tappLoader');
- // $scope.resizeGridSiblings();
- }
- }
- };
- $scope.resizeGridSiblings = function(){
- var gridHeight = $('.custTabContainer').height();
- $('.selListContainer').height(gridHeight);
- };
- $scope.audNav = function(tabName, event){
- if(!($(event.target.parentElement).hasClass("active"))){
- if(tabName=="pre"){
- $('.preContainer').toggleClass('active');
- $('.custContainer').toggleClass('active');
- $(event.target.parentElement.parentElement.children).removeClass('active');
- $(event.target.parentElement).toggleClass('active');
- }
- else if(tabName=="cust"){
- $('.custContainer').toggleClass('active');
- $('.preContainer').toggleClass('active');
- $(event.target.parentElement.parentElement.children).removeClass('active');
- $(event.target.parentElement).toggleClass('active');
- }
- }
- };
- angular.element(document).ready(function (){
- $scope.$on('onRepeatLastDemo', function(scope, element, attrs){
- var columns= 4;
- gridCtrl.createGrid("#demoGridContainer",3,true);
- $("div#audience").removeClass("tappLoader");
- /*$scope.resizeGridSiblings(); */
- });
- $scope.$on('onRepeatLastBeh', function(scope, element, attrs){
- var columns= 4;
- gridCtrl.createGrid("#behGridContainer",3,true);
- $("div#audience").removeClass("tappLoader");
- });
- $http.get('assets/data/audienceDemographics.json').
- success(function(data, status, headers, config) {
- $scope.audienceDemographics = data;
- $scope.demoFlag="demographic";
- }).
- error(function(data, status, headers, config) {
- console.log("Error fetching demographic distribution");
- });
- $http.get('assets/data/audienceBehavioral.json').
- success(function(data, status, headers, config) {
- $scope.audienceBehavioral = data;
- $scope.behFlag="behavioral";
- }).
- error(function(data, status, headers, config) {
- console.log("Error fetching behavioral distribution");
- });
- });
- $scope.updatePlan = function(custCategory,name,value){
- $scope.planObject.audience[custCategory][name].push(value);
- localStorageService.remove("plan");
- localStorageService.set("plan",$scope.planObject);
- /*To do - update only the audience part of the plan object OR
- Do only one transaction with all changes together. This will save time*/
- };
- $scope.itemClick = function(custCategory,obj, $event){
- $event.stopPropagation();
- obj[custCategory]["isSelected"] = "true";
- gridCtrl.cellClicked($($event.currentTarget));
- };/*End of itemClick event*/
- $scope.subItemClick = function(custCategory,obj,$event){
- //alert("subitemClcik");
- $event.stopPropagation();
- gridCtrl.subSectionItemClick($($event.currentTarget));
- if(obj["subItemValue"]["isSelected"] == "true"){
- obj["subItemValue"]["isSelected"] = "false";
- }
- else if(obj["subItemValue"]["isSelected"] == "false") {
- if(obj[custCategory]["isMultiSelect"] == "false")
- {
- $(obj[custCategory]["values"]).each(function(index, val){
- val["isSelected"] = "false";
- });
- }
- obj["subItemValue"]["isSelected"] = "true";
- }
- //alert("1");
- var values = obj[custCategory]["values"];
- var name = obj[custCategory]["name"];
- //alert("2");
- var selEval = $scope.selEval(obj, custCategory, obj[custCategory]["keyid"]);
- if(selEval){
- $scope.planObject.audience[custCategory][name] = [];
- $.each(values, function(i, item){
- if(item.isSelected==="true"){
- var key = item["subkeyid"];
- var value = item["value"];
- $scope.updatePlan(custCategory,name,value);
- }
- });
- }
- //$event.stopPropagation();
- //alert("calling stopPropagation");
- //$event.
- };/*End of subitemClick event*/
- $scope.clearSubItems = function(custCategory,obj,event){
- event.stopPropagation();
- $(obj[custCategory]["values"]).each(function(index, item){
- item["isSelected"]="false";
- });
- gridCtrl.clearSubOptions($(event.currentTarget));
- var values = obj[custCategory]["values"];
- var name = obj[custCategory]["name"];
- var selEval = $scope.selEval(obj, custCategory, obj[custCategory]["keyid"]);
- if(selEval){
- $scope["planObject"]["audience"][custCategory][name] = [];
- $.each(values, function(i, item){
- if(item["isSelected"]==="true"){
- var key = item["subkeyid"];
- var value = item["value"];
- $scope.updatePlan(custCategory,name,value);
- }
- });
- }
- };/*End of clearSubItems function*/
- $scope.doneWithSubItem = function(custCategory,obj,event){
- event.stopPropagation();
- gridCtrl.doneSubOptionClick($(event.currentTarget));
- };/*End of doneWithSubItem Function*/
- $scope.selEval = function(obj,custCategory, id){
- var returnVal = false;
- /*At time of evaluation, the item is active: sub items may or may not be checked*/
- if(obj[custCategory]["isSelected"] === "true"){
- var values = obj[custCategory]["values"];
- var subItemSelected = false;/*Sub items exist*/
- var dupe = false;/*Item already exist in custSelList*/
- $.each(values, function(i, item){
- if(item["isSelected"]==="true"){
- subItemSelected=true;
- return false;
- }
- });
- if(!subItemSelected){
- $scope["custRemoveItem"](id,true);
- returnVal = true;
- }
- else{
- $.each($scope["custSelList"], function(i, item){
- if(item["keyid"]==id){
- dupe=true;
- }
- });
- if(!(dupe)){
- $scope["custSelList"].push(obj[custCategory]);
- returnVal = true;
- }
- }
- }
- else{
- returnVal = false;
- }
- return returnVal;
- };
- $scope.custRemoveItem = function(key, dontChangeCellStatus){
- var index = -1;
- var custSelList = $scope["custSelList"];
- $.each(custSelList, function(i, item){
- if(item["keyid"]==key){
- index=i;
- return false;
- }
- });
- if(index>=0){
- $scope["custSelList"].splice(index,1);
- }
- if($scope["audienceDemographics"].length > 0 && !dontChangeCellStatus){
- index = -1;
- $.each($scope["audienceDemographics"], function(i, item){
- if(item["keyid"]==key){
- index=i;
- return false;
- }
- });
- if(index>=0)
- {
- $scope["audienceDemographics"][index].isSelected = "false";
- $.each($scope["audienceDemographics"][index]["values"], function(i, item){
- item.isSelected = "false";
- });
- }
- /*$scope.updatePlan($scope.demoFlag,$scope.audienceDemographics[index].name,value); STUB TO DO*/
- }
- if($scope["audienceBehavioral"].length > 0 && !dontChangeCellStatus){
- index =-1;
- $.each($scope["audienceBehavioral"], function(i, item){
- if(item["keyid"]==key){
- index=i;
- return false;
- }
- });
- if(index>=0)
- {
- $scope["audienceBehavioral"][index]["isSelected"] = "false";
- $.each($scope["audienceBehavioral"][index]["values"], function(i, item){
- item["isSelected"] = "false";
- });
- }
- /*$scope.updatePlan($scope.demoFlag,$scope.audienceDemographics[index].name,value); STUB TO DO*/
- }
- if(!dontChangeCellStatus){
- gridCtrl.changeCellStatusByDataKeyId(key,false);
- }
- };
- $scope.clearAllSelections= function(){
- while($scope["custSelList"].length>0)
- {
- gridCtrl.changeCellStatusByDataKeyId($scope["custSelList"][0]["keyid"], false);
- $scope["custRemoveItem"]($scope["custSelList"][0]["keyid"]);
- }
- };
- $scope["tempMediaPlan"] = '';
- $scope["closeHH"] = function(){
- $(".hhCountDisplay").hide();
- };
- $scope["updateCanvas"] = function(canvasObj){
- var canvas = canvasObj;
- canvas.parent().show();
- var set = [];
- var total = parseFloat($scope["universeHousehold"]);
- var segmentAudience = parseFloat($scope["segmentAudience"]);
- var segAudInPercent = parseFloat(((100*segmentAudience)/total).toFixed(1));
- var remainPercent = 100 - segAudInPercent;
- var r = 80;
- var cx = 0;
- var cy = 0;
- var x1=0;
- var y1 =0;
- var tempAngle = 0;
- var w = parseInt(canvas.css('width'),10);
- var h = parseInt(canvas.css('height'),10);
- var p = canvas.parent();
- p.css("top",$(".audFooter").offset().top-h-12);
- p.css("left",$("#hhCanvasTrigger").offset().left-35);
- var ctx = canvas[0].getContext('2d');
- ctx.save();
- ctx.font = "normal 14px sans-serif";
- ctx.translate(w/2,h/2);
- //ctx.fillStyle = "#585E6B";
- ctx.rect(-w/2,-h/2,w,h);
- ctx.fillStyle = "#585E6B";
- ctx.fill();
- ctx.strokeStyle="#585E6B";
- ctx.beginPath();
- ctx.arc(cx,cy,r,0,2*Math.PI);
- ctx.fillStyle = "#31dbd2";
- ctx.fill();
- if(segAudInPercent>0)
- {
- ctx.beginPath();
- var startAngle = 1.75 *Math.PI;
- var endAngle = startAngle + (2 * Math.PI * segAudInPercent/100);
- ctx.arc(cx,cy,r,startAngle,endAngle);
- ctx.fillStyle = "#f27b57";
- ctx.lineTo(cx,cy);
- x1 = r * Math.cos(startAngle);
- y1 = r * Math.sin(startAngle);
- ctx.lineTo(x1,y1);
- ctx.fill();
- ctx.stroke();
- tempAngle = startAngle + (endAngle-startAngle)/2;
- x1 = (r-50) * Math.cos(tempAngle);
- y1 = (r-50) * Math.sin(tempAngle);
- ctx.fillStyle = "white";
- //ctx.strokeStyle = "white"
- ctx.fillText(segAudInPercent+" %",x1,y1);
- }
- ctx.fillText("Household Count: "+$scope.segmentHousehold,cx-70,cy+r+25);
- //data[0].sSegmentAudience;
- ctx.restore();
- };
- $scope.sendHhCount = function(canvasId){
- var canvas = $(canvasId);
- if(canvas.parent().css("display") !="none")
- {
- canvas.parent().hide();return;
- }
- $http.get('assets/data/hhRequest.json').
- success(function(response){
- $scope["tempMediaPlan"] = JSON.parse(JSON.stringify(response));
- $.ajax({
- url:'/TAPP2_MDP1/cablevision/MediaPlan/householdAudience',
- data: JSON.stringify($scope["tempMediaPlan"]),
- type:"POST",
- contentType: "application/json",
- success: function(response){
- var hhData = JSON.parse(JSON.stringify(data));
- $scope["universeHousehold"] = hhData[0]["sUniverseHousehold"];
- $scope["segmentAudience"] = hhData[0]["sSegmentAudience"];
- $scope["segmentHousehold"] = hhData[0]["sSegmentHousehold"];
- $('.hhCountDisplay').show().fadeIn('slow');
- $scope.updateCanvas(canvas);
- },
- error:function(){
- $http.get('assets/data/hhResponse.json').
- success(function(data, status, headers, config) {
- var hhData = JSON.parse(JSON.stringify(data));
- $scope["universeHousehold"]=hhData[0]["sUniverseHousehold"];
- $scope["segmentAudience"]=hhData[0]["sSegmentAudience"];
- $scope["segmentHousehold"]=hhData[0]["sSegmentHousehold"];
- $scope["updateCanvas"](canvas);
- });
- }
- });//end of inner AJAX
- }).
- error(function(data, status, headers, config) {
- console.log("Error fetching HH request from LS");
- });
- };
- /*Audience code ends*/
- }]);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement