Sharepoint 2010 , Sharepoint 2013 , Sharepoint 2016 , Office 365: fetching data in Angular js using Rest app Sharepoint 2010 2013 2015

Wednesday, November 25, 2015

fetching data in Angular js using Rest app Sharepoint 2010 2013 2015

var CFRATSApp = angular.module("CFRATSApp", []);
var period, year, weak;
CFRATSApp.controller('MainController', function ($scope, $http, $filter) {
dt = querySt("date");
selDate = dt.length > 0 ? new Date(dt.split('-')[0], eval(dt.split('-')[1]) - 1, dt.split('-')[2]) : new Date();
period = $('#Period').getXXXDate({
format: "P{P}",
selectedDate: selDate
}).html();

year = $('#Year').getXXXDate({
format: "{Y}",
selectedDate: selDate
}).html();
weak = $('#Weak').getXXXDate({
format: "{W}",
selectedDate: selDate
}).html();
$http({
method: 'GET',
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/Lists/getByTitle('CFR%20Report')/items?$select=P,Year,Target,OData__x0057_1,OData__x0057_2,OData__x0057_3,OData__x0057_4,PTD,YTD,Category,Channel",
headers: { "Accept": "application/json;odata=verbose" }
}).success(function (data, status, headers, config) {

$scope.TotalDataCFR = data.d.results;
$scope.DataCFR = $filter('filter')($scope.TotalDataCFR, { P: period });
$scope.DataCFR = $filter('filter')($scope.DataCFR, { Year: year });

}).error(function (data, status, headers, config) {
});

$http({
method: 'GET',
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/Lists/getByTitle('ATS%20Report')/items/?$select=P,Year,Target,OData__x0057_1,OData__x0057_2,OData__x0057_3,OData__x0057_4,PTD,YTD,DistProd",
headers: { "Accept": "application/json;odata=verbose" }
}).success(function (data, status, headers, config) {

$scope.TotalDataATS = data.d.results;
$scope.DataATS = $filter('filter')($scope.TotalDataATS, { P: period });
$scope.DataATS = $filter('filter')($scope.DataATS, { Year: year });
$scope.TotalATSCount = $scope.DataATS.length==0?1:$scope.DataATS.length;

}).error(function (data, status, headers, config) {
});

$http({
method: 'GET',
url: _spPageContextInfo.webAbsoluteUrl + "/_api/lists/getbytitle('CFRRemarks')/items?$filter=Title eq 'CFRRemarks'&$select=Remarks",
headers: { "Accept": "application/json;odata=verbose" }
}).success(function (data, status, headers, config) {

$scope.DataCFRRemarks = data.d.results;

}).error(function (data, status, headers, config) {
});

$http({
method: 'GET',
url: _spPageContextInfo.webAbsoluteUrl + "/_api/lists/getbytitle('CFRRemarks')/items?$filter=Title eq 'ATSRemarks'&$select=Remarks",
headers: { "Accept": "application/json;odata=verbose" }
}).success(function (data, status, headers, config) {
$scope.DataATSRemarks = data.d.results;

}).error(function (data, status, headers, config) {
});

$http({
method: 'GET',
url: _spPageContextInfo.webAbsoluteUrl + "/_api/Lists/getByTitle('CFR%20Report')/items?$Select=Year&$orderby=Year desc",
headers: { "Accept": "application/json;odata=verbose" }
}).success(function (data, status, headers, config) {
$scope.YearData = data.d.results;
$scope.SelYear = year;
$scope.SelPeriod = period;

});
$scope.getcolorbyTW = function (t, w) {
if (parseFloat($filter('number')(w * 100, 1)) >= parseFloat($filter('number')(t * 100, 1)))
return 'green';
return 'red';
};
$scope.getData = function (w, We) {
w = w == null ? "" : $filter('number')(w * 100, 1) + '%';
if (Math.round(weak) < We)
w = "";
return w;
};

$scope.SearchClick = function () {
var CurDate=new Date();
var Curprd = $('#Period').getXXXDate({
format: "{P}",
selectedDate: CurDate
}).html();

var Curyer = $('#Year').getXXXDate({
format: "{Y}",
selectedDate: CurDate
}).html();
var CurWeak = $('#Weak').getXXXDate({
format: "{W}",
selectedDate: CurDate
}).html();
var chgYear=$scope.SelYear;
var chgPer=$scope.SelPeriod;
if(Curyer <chgYear||(Curyer==chgYear&&Curprd > chgPer.replace("P","")))
weak=4;
else if(Curyer==chgYear&&Curprd ==chgPer.replace("P",""))
weak=CurWeak;
else
chgPer="P0";
$scope.DataCFR = $filter('filter')($scope.TotalDataCFR, { P: chgPer});
$scope.DataCFR = $filter('filter')($scope.DataCFR, { Year: chgYear});

$scope.DataATS = $filter('filter')($scope.TotalDataATS, { P: chgPer});
$scope.DataATS = $filter('filter')($scope.DataATS, { Year: chgYear});
$scope.TotalATSCount = $scope.DataATS.length==0?1:$scope.DataATS.length;
// $scope.TotalATSCount.$apply();
// $scope.DataCFR.$apply();
// $scope.DataATS.$apply();
$scope.apply();
}
});

CFRATSApp.filter('percentage', ['$filter', function ($filter) {
return function (input, decimals) {
if (input == null)
return "";
return $filter('number')(input * 100, decimals) + "%";

};
}]);
CFRATSApp.filter('newline', function ($sce) {
return function (text) {
text = text.replace(/\n/g, '<br />').replace('&', /&/g).replace('>', />/g).replace('<', /</g);
return $sce.trustAsHtml(text);
}
});
CFRATSApp.filter('unique', function () {

return function (items, filterOn) {

if (filterOn === false) {
return items;
}

if ((filterOn || angular.isUndefined(filterOn)) && angular.isArray(items)) {
var hashCheck = {}, newItems = [];

var extractValueToCompare = function (item) {
if (angular.isObject(item) && angular.isString(filterOn)) {
var props = filterOn.split('.');
var valueRet = item;
for (var i = 0; i < props.length; i++) {
valueRet = valueRet[props[i]];
}
return valueRet;
} else {
return item;
}
};

angular.forEach(items, function (item) {
var valueToCheck, isDuplicate = false;

for (var i = 0; i < newItems.length; i++) {
if (angular.equals(extractValueToCompare(newItems[i]), extractValueToCompare(item))) {
isDuplicate = true;
break;
}
}
if (!isDuplicate) {
newItems.push(item);
}

});
items = newItems;
}
return items;
};
});

SP.SOD.executeFunc("sp.js", "SP.ClientContext", PageReset);
function PageReset() {
setTimeout(function () { resetParentFrame(); }, 1500);
}
function querySt(Key) {
var url = decodeURIComponent(window.location.href);
KeysValues = url.split(/[\?&]+/);
for (i = 0; i < KeysValues.length; i++) {
KeyValue = KeysValues[i].split("=");
if (KeyValue[0] == Key) {
return KeyValue[1];
}
}
return "";
}

____________________________________________________________________________

<%@ Assembly Name="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Page Language="C#" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage" MasterPageFile="../_catalogs/masterpage/MorningPanelMinimal.master" MainContentID="PlaceHolderMain" meta:progid="SharePoint.WebPartPage.Document" %>

<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<meta content="SharePoint.WebPartPage.Document" name="ProgId">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>CFR & ATS Reports</title>
<link href="/sites/XXXX/SiteAssets/css/content.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="../SiteAssets/css/CommonCssEfficency.css" />
<link rel="stylesheet" type="text/css" href="../SiteAssets/css/CTRandATSReport.css" />
<script type="text/javascript" src="/jQuery/jquery-1.9.1.min.js"></script>


<script type="text/javascript" src="/sites/XXXX/SiteAssets/js/angular.min.js"></script>
<script type="text/javascript" src="/sites/XXXX/SiteAssets/js/XXXPeriod.jquery.plugin.js"></script>
<script type="text/javascript" src="/sites/XXXX/SiteAssets/js/index.js"></script>
<script type="text/javascript" src="/sites/XXXX/SiteAssets/js/CFRandATSReport.js"></script>


<style type="text/css">
.jqplot-point-label {
font-size: .80em !important;
}
</style>

</asp:Content>

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
<div class="rightMain indicatorBoard kpiMark" >
<div class="idt-board-main" ng-app="CFRATSApp" ng-controller="MainController">
<div class="idt-board-title">
<span id="headerText">Service Level Review - 服务水平回顾</span>
</div>
<div class="idt-board-controls">
<select ng-model="SelYear" class="Year">
<option ng-repeat="Y in YearData | unique:'Year'">{{Y.Year}}</option>
</select>
<select ng-model="SelPeriod" class="Period">
<option value="P1">P1</option>
<option value="P2">P2</option>
<option value="P3">P3</option>
<option value="P4">P4</option>
<option value="P5">P5</option>
<option value="P6">P6</option>
<option value="P7">P7</option>
<option value="P8">P8</option>
<option value="P9">P9</option>
<option value="P10">P10</option>
<option value="P11">P11</option>
<option value="P12">P12</option>
<option value="P13">P13</option>
</select>
<input type="button" class="btn_search" ng-click="SearchClick()" value="Search" />
</div>

<div class="bg-boardCon-wrap">
<div class="bg-boardCon">
<div class="bg-boardCon-top"></div>
<div class="bg-boardCon-middle">
<div class="bg-boardCon-main">
<div id="CFRATSApp">
<div>
<table id="reportTable">
<tr>

<th>Catgeory</th>
<th>Channel</th>
<th>Target</th>
<th>W1</th>
<th>W2</th>
<th>W3</th>
<th>W4</th>
<th>PTD</th>
<th>YTD</th>
</tr>
<tr ng-show="DataCFR.length!=0" ng-repeat="CFR in DataCFR">
<td>{{CFR.Category}}</td>
<td>{{CFR.Channel}}</td>
<td>{{CFR.Target| percentage:1}}</td>
<td ng-style="{'color':getcolorbyTW(CFR.Target,CFR.OData__x0057_1)}" ng-bind="getData(CFR.OData__x0057_1,1)"></td>
<td ng-style="{'color':getcolorbyTW(CFR.Target,CFR.OData__x0057_2)}" ng-bind="getData(CFR.OData__x0057_2,2)"></td>
<td ng-style="{'color':getcolorbyTW(CFR.Target,CFR.OData__x0057_3)}" ng-bind="getData(CFR.OData__x0057_3,3)"></td>
<td ng-style="{'color':getcolorbyTW(CFR.Target,CFR.OData__x0057_4)}" ng-bind="getData(CFR.OData__x0057_4,4)"></td>
<td ng-style="{'color':getcolorbyTW(CFR.Target,CFR.PTD)}">{{CFR.PTD| percentage:1}}</td>
<td ng-style="{'color':getcolorbyTW(CFR.Target,CFR.YTD)}">{{CFR.YTD| percentage:1}}</td>
</tr>
<tr ng-show="DataCFR.length==0" > <td colspan="9" class="NoData"><span>Data is not available</span></td></tr>
<tr>
<td colspan="1">Remarks</td>
<td colspan="8">
<div class="remarksText">
<div ng-repeat="CFRR in DataCFRRemarks">
<span ng-bind-html="CFRR.Remarks | newline"></span>
</div>
</div>
</td>
</tr>

</table>
</div>
<div style="margin: auto auto 30px 30px; width: 95%;">
<div>DT:经销商</div>
<div style="clear: both;">KA:关键客户</div>
</div>
<div>
<table id="ATSreportTable">
<tr>
<th rowspan="{{TotalATSCount+2}}">
<div>
ATS
</div>
<div style="clear: both;">生产计划符合率</div>
</th>
<th>
<div>Dist./Prod.</div>
<div style="clear: both;">区域/产品</div>
</th>
<th>Target</th>
<th>W1</th>
<th>W2</th>
<th>W3</th>
<th>W4</th>
<th>PTD</th>
<th>YTD</th>
</tr>
<tr ng-show="DataATS.length!=0" ng-repeat="ATS in DataATS">
<td>{{ATS.DistProd}}</td>
<td>{{ATS.Target| percentage:1}}</td>
<td ng-style="{'color':getcolorbyTW(ATS.Target,ATS.OData__x0057_1)}" ng-bind="getData(ATS.OData__x0057_1,1)"></td>
<td ng-style="{'color':getcolorbyTW(ATS.Target,ATS.OData__x0057_2)}" ng-bind="getData(ATS.OData__x0057_2,2)"></td>
<td ng-style="{'color':getcolorbyTW(ATS.Target,ATS.OData__x0057_3)}" ng-bind="getData(ATS.OData__x0057_3,3)"></td>
<td ng-style="{'color':getcolorbyTW(ATS.Target,ATS.OData__x0057_4)}" ng-bind="getData(ATS.OData__x0057_4,4)"></td>
<td ng-style="{'color':getcolorbyTW(ATS.Target,ATS.PTD)}">{{ATS.PTD| percentage:1}}</td>
<td ng-style="{'color':getcolorbyTW(ATS.Target,ATS.YTD)}">{{ATS.YTD| percentage:1}}</td>
</tr>
<tr ng-show="DataATS.length==0" > <td colspan="8" class="NoData"><span>Data is not available</span></td></tr>
<tr>
<td colspan="1">Remarks</td>
<td colspan="7">
<div class="remarksText">
<div ng-repeat="ATSR in DataATSRemarks">
<span ng-bind-html="ATSR.Remarks | newline"></span>
</div>
</div>
</td>

</tr>

</table>
</div>

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


</div>
</div>
<div id="Period" style="display: none"></div>
<div id="Year" style="display: none"></div>
<div id="Weak" style="display: none"></div>
</asp:Content>

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)