// Knockout js binding Modal Sample with ajax query
-------------------------------------------------------------------
<link href="/Style Library/en-us/stylesheets/main.css" type="text/css" rel="stylesheet" />
<style>
.Theme-button-color {
background-color: #a2821f !important;
color: #fff !important;
}
</style>
<script type="text/javascript">
var language;
var languageText;
var ajaxResult = new Array();
var value = 1;
var myObj = function() {
var content, id, link, status, openingDate
}
var viewModel = function() {
var self = this;
self.tenders = ko.observableArray([]),
self.language = ko.observable(language),
self.init = function() {
GetFilteredTenders(self.tenders);
self.language(languageText);
}
}
function daysInMonth(month, year) {
return new Date(year, month, 0).getDate();
}
$(document).ready(function(){
GetLanguage();
//GetFilteredTenders();
var vm = new viewModel();
vm.init();
ko.applyBindings(vm, $('#tendersDiv').get(0));
});
function GetLanguage() {
var lang = _spPageContextInfo.currentLanguage;
if (lang == '1033') {
language = '/en-us/';
languageText = "en";
}
else {
language = '/ar-sa/';
languageText = "ar";
}
}
function GetFilteredTenders(tenders) {
var currentYear = new Date().getFullYear();
var month = "12";
var status = "Open";
var nbDays = new Date(currentYear, month, 0).getDate();
var days = daysInMonth(12, currentYear);
var d = new Date();
var today = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
var newsIndex = 0;
var d = new Date();
var formatedDate = d.format("yyyy-MM-ddTHH:mm:ssZ");
// var uri="https://services.moid.gov.ae/_api/lists/getbytitle('tenders')/items?$select=ID,TenderName_EN,TenderName_AR,TenderStatus,OpeningDate,SubmitDate&$filter=OpeningDate le datetime'" + formatedDate + "' and TenderStatus eq 'Approved' and SubmitDate le datetime'" + formatedDate + "'";
var uri = "https://services.moid.gov.ae/_api/lists/getbytitle('tenders')/items?$select=ID,TenderName_EN,TenderName_AR,TenderStatus,OpeningDate,SubmitDate&$filter=OpeningDate ge datetime'" + formatedDate + "' and TenderStatus eq 'Approved' and SubmitDate le datetime'" + formatedDate + "'";
$.ajax({
url: uri,
type: "GET",
async: false,
headers: { "ACCEPT": "application/json;odata=verbose" },
success: function (data) {
if(data.d.results.length>0)
{
for(var i=0; i<data.d.results.length; i++)
{
if(i>3)
{ break;}
if (language == '/en-us/') {
var cObj = new myObj();
cObj.content = data.d.results[i].TenderName_EN;
}
else{
cObj.content = data.d.results[i].TenderName_AR;
}
cObj.id = data.d.results[i].ID;
cObj.link = "https://services.moid.gov.ae" + language + "Competition/Pages/AvailableTenders.aspx?itemId=" + data.d.results[i].ID;
cObj.status = "open";
cObj.openingDate = moment(data.d.results[i].OpeningDate).format('MMMM DD, YYYY');
tenders.push(cObj);
//ajaxResult.push(cObj);
}
}
if(tenders().length < 4){
GetCloseTenders(tenders);
}
},
error: function (request, textStatus, errorThrown) {
}
});
}
function GetCloseTenders(tenders)
{
var currentYear = new Date().getFullYear();
var month = "12";
var status = "Open";
var value = 1;
var nbDays = new Date(currentYear, month, 0).getDate();
var days = daysInMonth(12, currentYear);
var d = new Date();
var today = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
var newsIndex = 0;
var d = new Date();
var formatedDate = d.format("yyyy-MM-ddTHH:mm:ssZ");
var uri="https://services.moid.gov.ae/_api/lists/getbytitle('tenders')/items?$select=ID,TenderName_EN,TenderName_AR,TenderStatus,OpeningDate,SubmitDate&$filter=OpeningDate le datetime'" + formatedDate + "' and TenderStatus eq 'Approved' and SubmitDate le datetime'" + formatedDate + "'";
$.ajax({
url: uri,
type: "GET",
async: false,
headers: { "ACCEPT": "application/json;odata=verbose" },
success: function (data) {
if(data.d.results.length>0)
{
for(var i=0; i<data.d.results.length; i++)
{
if(tenders().length < 4){
if (language == '/en-us/') {
var cObj = new myObj();
cObj.content = data.d.results[i].TenderName_EN;
}
else{
cObj.content = data.d.results[i].TenderName_AR;
}
cObj.id = data.d.results[i].ID;
cObj.link = "https://services.moid.gov.ae" + language + "Competition/Pages/AvailableTenders.aspx?itemId=" + data.d.results[i].ID;
cObj.openingDate = moment(data.d.results[i].OpeningDate).format('MMMM DD, YYYY');
cObj.status="close";
tenders.push(cObj);
//ajaxResult.push(cObj);
}
else{
break;
}
}
}
},
error: function (request, textStatus, errorThrown) {
}
});
}
</script>
<section id="tendersDiv" class="wrapper style1 special tender-bg">
<div>
<div class="inner">
<header>
<h2 class="full-caps text-left tender-heding">Tenders <span class="pull-right view-all-tenders">
<!-- ko if: language() == "en" -->
<a href="/en-us/Competition/Pages/AvailableTenders.aspx">View All Tenders <i aria-hidden="true" class="fa fa-caret-right" style="font-size: 15px;"></i></a>
<!-- /ko -->
<!-- ko if: language() === 'ar' -->
<a href="/ar-sa/Competition/Pages/AvailableTenders.aspx">View All Tenders <i aria-hidden="true" class="fa fa-caret-right" style="font-size: 15px;"></i></a>
<!-- /ko -->
</span></h2>
<div class="border-3 Theme-border-color">
<div class="border-left Theme-border-color-left"></div>
</div>
</header>
<!-- ko foreach: tenders -->
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="tender-box">
<div class="tender-text" >
<span data-bind="text: content"></span>
<div class="tender-datte" data-bind="text: openingDate"></div>
<div class="text-center margn-top-10">
<!-- ko if: status == 'open' -->
<a data-bind="attr : { href: link }" href="#" class="button special tendersbtn Theme-button-color">Participate </a>
<!-- /ko -->
<!-- ko if: status == 'close' -->
<span class="button special tendersbtn Theme-button-color" style="cursor: default;background-color: gray !important;">Closed </span>
<!-- /ko -->
</div>
</div>
</div>
</div>
<!-- /ko -->
</div>
</div>
</section>
No comments:
Post a Comment