I want to filter the records by the reply time monthly. If I click a date on the left menu. The table should display the records only in that specific month. I have a search filter also.
The current reviews date are displayed on the left which serve as filter on ng-click. Is it possible for the dates in the left to be dynamic base on the reply time. the reply time is in the third column of the tabl which is a string date from JSON array.
My Script:
<script>
(function() {
'use strict';
angular
.module('myApp', [])
.constant('STATUS', {
0: 'Stable',
1: 'Normal',
2: 'Serious'
})
.controller('historyCtrl', historyCtrl);
historyCtrl.$inject = ['$scope', 'STATUS'];
function historyCtrl($scope, STATUS) {
$scope.sortType = 'sportorderreply.replyTime'; // set the default sort type
$scope.sortReverse = true; // set the default sort order
$scope.sortId = false;
$scope.sortRD = false;
$scope.sortRT = false;
$scope.sortStatus = false;
$scope.orderHistory = [{
"orderID":"123",
"purchaseTime":1437536718345,
"sportorderreply":{
"memberId":"123123",
"orderStatus":1,
"replyTime":"2016/06/04 08:30:40"
}
},
{
"orderID":"123",
"purchaseTime": 1437536718345,
"sportorderreply":{
"memberId":"123123",
"orderStatus":2,
"replyTime":"2016/08/04 08:30:40"
}
},
{
"orderID":"123",
"purchaseTime": 1437536718345,
"sportorderreply":{
"memberId":"123123",
"orderStatus":0,
"replyTime":"2016/07/04 08:30:40"
}
},
];
$scope.currentPage = 1;
$scope.currentYear = new Date().getFullYear();
$scope.search = function (order){
if ($scope.searchReview === undefined) return true;
if (order.sportorderreply.orderStatus.indexOf($scope.searchReview)!=-1 || order.purchaseTime.indexOf($scope.searchReview)!=-1 || order.sportorderreply.replyTime.indexOf($scope.searchReview)!=-1) {
return true;
}
return false;
};
function parseProperties() {
$scope.orderHistory.map(function(order) {
order.sportorderreply.orderStatus = STATUS[order.sportorderreply.orderStatus];
var date = new Date(order.purchaseTime);
var d = date.getDate();
var m = date.getMonth() + 1;
var y = date.getFullYear();
var dateString = y + '/' + (m <= 9 ? '0' + m : m) + '/' + (d <= 9 ? '0' + d : d);
order.purchaseTime = dateString;
var newRT = new Date(order.sportorderreply.replyTime);
order.sportorderreply.replyTime = newRT;
return order;
});
}
parseProperties();
}})();
</script>
HTML:
<div id="accordion">
<h4 class="accordion-toggle activeAccordion"><p>Current reviews (120)</p></h4>
<div class="accordion-content default">
<ul ng-init="currentYear = {{currentYear}}">
<li ng-click="monthFilter={'filterMonth':'December'};yearFilter={'filterYear': currentYear} "> Dec. (50)</li>
<li ng-click="monthFilter={'filterMonth':'November'};yearFilter={'filterYear': currentYear} "> Nov. (50)</li>
<li ng-click="monthFilter={'filterMonth':'October'};yearFilter={'filterYear': currentYear} "> Oct. (50)</li>
<li ng-click="monthFilter={'filterMonth':'September'};yearFilter={'filterYear': currentYear} "> Sep. (50)</li>
<li ng-click="monthFilter={'filterMonth':'August'};yearFilter={'filterYear': currentYear} "> Aug. (50)</li>
<li ng-click="monthFilter={'filterMonth':'July'};yearFilter={'filterYear':currentYear}">Jul. (54)</li>
<li ng-click="monthFilter={'filterMonth':'June'};yearFilter={'filterYear':currentYear}">Jun. (30)</li>
<li ng-click="monthFilter={'filterMonth':'May'};yearFilter={'filterYear':currentYear}">May. (34)</li>
<li ng-click="monthFilter={'filterMonth':'April'};yearFilter={'filterYear':currentYear}">Apr. (20)</li>
<li ng-click="monthFilter={'filterMonth':'March'};yearFilter={'filterYear':currentYear}">Mar. (58)</li>
<li ng-click="monthFilter={'filterMonth':'February'};yearFilter={'filterYear':currentYear}">Feb. (59)</li>
<li ng-click="monthFilter={'filterMonth':'January'};yearFilter={'filterYear':currentYear}">Jan. (56)</li>
</ul>
</div>
<h4 class="accordion-toggle secondAcc"><p>2015 reviews (650)</p></h4>
<div class="accordion-content secondAcc">
<ul ng-init="lastYear = {{lastYear}}">
<li ng-click="monthFilter={'filterMonth':'December'};yearFilter={'filterYear': lastYear} "> Dec. (50)</li>
<li ng-click="monthFilter={'filterMonth':'November'};yearFilter={'filterYear': lastYear} "> Nov. (50)</li>
<li ng-click="monthFilter={'filterMonth':'October'};yearFilter={'filterYear': lastYear} "> Oct. (50)</li>
<li ng-click="monthFilter={'filterMonth':'September'};yearFilter={'filterYear': lastYear} "> Sep. (50)</li>
<li ng-click="monthFilter={'filterMonth':'August'};yearFilter={'filterYear': lastYear} "> Aug. (50)</li>
<li ng-click="monthFilter={'filterMonth':'July'};yearFilter={'filterYear':lastYear}">Jul. (54)</li>
<li ng-click="monthFilter={'filterMonth':'June'};yearFilter={'filterYear':lastYear}">Jun. (30)</li>
<li ng-click="monthFilter={'filterMonth':'May'};yearFilter={'filterYear':lastYear}">May. (34)</li>
<li ng-click="monthFilter={'filterMonth':'April'};yearFilter={'filterYear':lastYear}">Apr. (20)</li>
<li ng-click="monthFilter={'filterMonth':'March'};yearFilter={'filterYear':lastYear}">Mar. (58)</li>
<li ng-click="monthFilter={'filterMonth':'February'};yearFilter={'filterYear':lastYear}">Feb. (59)</li>
<li ng-click="monthFilter={'filterMonth':'January'};yearFilter={'filterYear':lastYear}">Jan. (56)</li>
</ul>
</div>
</div>
<body>
<div id="table-div-id-history" ng-app="myApp" ng-controller="historyCtrl">
<input type="text" id="livefilter-input" class="searchHistory" placeholder="Keyword" ng-model="searchReview">
<div class="divs" ng-repeat="order in orderHistory|orderBy:sortType:sortReverse| filter:search | filter:yearFilter | filter:monthFilter track by $index" >
<div >
<ul class="historyTableData">
<li><p class="table-data1-h">{{$index+1}}</li>
<li><p class="table-data2-h" ng-bind="order.purchaseTime"> </p></li>
<li><p class="table-data3-h">{{ order.sportorderreply.replyTime | date: 'yyyy/MM/dd, HH:mm'}}</p></li>
<li><p class="table-data4-h">XDCFG0006</p></li>
<li><p class="table-data5-h historyStatus" ng-bind="order.sportorderreply.orderStatus"></p></li>
<!--<li></li>-->
</ul>
</div>
</div>
</div>
Related
I'm currently developing a project that will be Client on Java and Admin on PHP. For this purpose, I would like to store the API's data in a SQL database, so then I can show it in Java for the user to consume. The problem is, no matter how much I search, I can't find an answer that helps my specific issue. The solution that tends to be the best is to implement AJAX from a PHP form, the problem is I'm not trying to use POST for this.
Example of a function where I want information stored in database
function getMovie() {
let movieId = sessionStorage.getItem('id');
//test id -> 299536
axios.get(`https://api.themoviedb.org/3/movie/${movieId}?api_key=5ec279387e9aa9488ef4d00b22acc451`)
.then((response) => {
// https://api.themoviedb.org/3/movie/299536/reviews?api_key=5ec279387e9aa9488ef4d00b22acc451&language=en-US&page=1
console.log(response);
let movie = response.data;
if (movie.poster_path === null) {
poster = "../image/default-movie.png";
} else {
poster = "https://image.tmdb.org/t/p/w185_and_h278_bestv2" + movie.poster_path;
}
let date = movie.release_date;
let year = date.slice(0, 4);
let Rated;
let revenue = movie.revenue / 1000000;
let budget = movie.budget / 1000000;
revenue = Math.round(revenue);
budget = Math.round(budget);
if (revenue === 0) {
revenue = "Revenue is less than million dollers"
}
if (budget === 0) {
budget = "Budget is less than million dollers"
}
let genre = [];
movie.genres.forEach(element => {
genre.push(element.name);
});
genres = genre.join(' / ');
let output1 = `
<div class="row">
<div class="col-md-4 box1">
<img src="${poster}" class="poster-image">
</div>
<div class="col-md-4 box2">
<h1 class="movie-title">${movie.title}</h1>
<h5 style="color: white; font-weight:bold">${year}</h5>
<h5 style="color: white; font-weight:bold; margin-top: -10px;">${genres}</h5>
<ul class="list-group">
<li class="list-group-item active">
<strong>Rating: </strong> ${movie.vote_average} / 10</li>
<li class="list-group-item active">
<strong>Status: </strong> ${movie.status}</li>
<li class="list-group-item active">
<strong>Duration: </strong> ${movie.runtime} min</li>
<li class="list-group-item active">
<strong>Budget: </strong> $ ${budget} million</li>
<li class="list-group-item active">
<strong>Revenue: </strong> $ ${revenue} million</li>
</ul>
</div>
<div class="col-md-4 box3">
<h1 class="title-second">Synopsis</h1>
<p>${movie.overview}</p>
<hr style="width: 80%;color: #222;">
<div>
View IMDB
<!-- View IMDB -->
Go Back To Search
</div>
</div>
</div>
`
$('#movie').html(output1);
})
.catch((error) => {
console.log(error);
});
}
Thanks in advance!
I want to display search results, but whenever i am trying to type anything to search box it shows error in console. i am fetching data from api and according to type i am displaying results in tabs.
data is getting filtered according to nav-tabs type.
but now i want to search listed data,
so whenever i am trying to search is shows error
TS -
searchKeywords: string;
CoffeeItemList: any = [];
// tslint:disable-next-line:max-line-length
constructor(private getDataListingService: DataListingService){}
ngOnInit() {
this.getGlobalSearchList('');
}
getGlobalSearchList(type: string) {
this.CoffeeItemList = [];
this.getDataListingService.getAllDataLists().subscribe(value => {
let data = [];
data = value.data;
console.log(data);
for (let i = 0; i < data.length - 1; i++) {
if (data[i].type === type) {
this.CoffeeItemList.push(data[i]);
}
}
});
}
getSmartSearchValues(search: string) {
if (search === '' ) {
this.getGlobalSearchList('');
return false;
}
this.getDataListingService.searchList(search).subscribe((data: any) => {
this.CoffeeItemList = data;
});
HTML
<div class="container">
<div class="mt-4">
<input class="form-control" type="text" [(ngModel)]="searchKeywords" (keyup)="getSmartSearchValues(searchKeywords)" placeholder="Search here"/>
</div>
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#list" (click)="getGlobalSearchList('DancingGoatMvc-Coffee')">Coffee</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#list" (click)="getGlobalSearchList('DancingGoatMvc-Brewer')">Brewer</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="list" class="tab-pane container active in"><br>
<div class="row">
<div class="card col-3" *ngFor="let items of CoffeeItemList">
<div class="card-body">
<h5 class="card-title">{{items?.title }}</h5>
<img src="http://infogainpune.com{{items.image |slice:1}}" class="w-100"/>
<p class="card-text">{{items?.content}}</p>
<h4 class="card-text">${{items?.price}}</h4>
<h4 class="card-text">{{items?.type}}</h4>
</div>
</div>
</div>
</div>
</div>
</div>
The response of data
Try to change your code like this too see if it work for you
this.getDataListingService.getAllDataLists().subscribe(value => {
this.CoffeeItemList = value.data;
});
Let me know if you still have a problem.
I am not great with jQuery, so far this is what i got from checking through stackoverflow and other resources:
var counter = 1;
$('.next-page .nav-item').each(function () {
if ($(this, ':gt(0)')) {
$(this).find('.view-title').html('Up Next');
} else {
$(this).find('.view-title').html('0' + counter);
}
counter++;
});
Basically the output should end up like this in the html:
<div class="nav-item">
<span class="view-title">Up Next</span>
<span>Kits</span>
</div>
<div class="nav-item">
<span class="view-title">02</span>
<span>GUI</span>
</div>
<div class="nav-item">
<span class="view-title">03</span>
<span>UI</span>
</div>
<div class="nav-item">
<span class="view-title">04</span>
<span>Other</span>
</div>
Try like
$('.next-page .nav-item').each(function (i , val) {
$(this).find('.view-title').html(!i ? 'Up Next' : '0' + (i+1));
});
I my code i have 3 ng-repeats based on key press event value i am getting data from service and iam consuming
my html code is:
<div class="input-group" ng-controller="sidemenu">
<input class="form-control" placeholder="Enter location, builder or project" ng-model="NodeId_1" autofocus ng-keyup="getValue($event.keyCode)"/>
<div class="search-datalist" ng-if="showsearch">
<ul ng-if="resultOfBuldDet.length>0">
<span class="result-hd">Builders</span>
<li ng-repeat="bud in resultOfBuldDet" ng-class="{active :2}" ng-click="searchFilter(bud)"><i class="fa fa-map-marker"></i> {{bud.builders_name}}</li>
</ul>
<ul ng-if="resultOfPropDet.length>0">
<span class="result-hd">Properties</span>
<li ng-repeat="prop in resultOfPropDet" ng-click="searchFilter(prop)"><i class="fa fa-map-marker"></i> {{prop.property_name}} ,{{prop.hp_city.city_name}},{{prop.hp_location.location_name}} </li>
</ul>
<ul ng-if="resultOfCityDet.length>0">
<span class="result-hd">cities</span>
<li ng-repeat="city in resultOfCityDet" ng-click="searchFilter(city)"><i class="fa fa-map-marker"> </i> {{city.city_name}}</li>
</ul>
<ul ng-if="resultOfLocaDet.length>0">
<span class="result-hd">Location</span>
<li ng-repeat="loc in resultOfLocaDet" ng-click="searchFilter(loc)"><i class="fa fa-map-marker"></i> {{loc.location_name}},{{loc.hp_city.city_name}}</li>
</ul>
<ul ng-if="resultOfSubLocaDet.length>0">
<span class="result-hd">sub Location</span>
<li ng-repeat="subloc in resultOfSubLocaDet" ng-click=" searchFilter(subloc)"><i class="fa fa-map-marker"></i> {{subloc.sub_location_name}},{{subloc.hp_location.location_name}},{{subloc.hp_location.hp_city.city_name}}</li>
</ul>
</div>
</div>
my controller js code:
sidemenu.controller('sidemenu', ['$scope', '$rootScope', 'allServices'
function(a, b,e) {
a.getValue = function(key) {
if (key == 8 && a.NodeId_1.length <= 2) {
a.resultOfPropDet = "";
a.resultOfBuldDet = "";
a.resultOfLocaDet = "";
a.resultOfCityDet = "";
a.resultOfSubLocaDet = "";
}
if (a.NodeId_1.length > 2) {
e.searchList(a.NodeId_1).then(function(result) {
a.resultOfPropDet = result.data.resultOfPropDet;
a.resultOfBuldDet = result.data.resultOfBuldDet;
a.resultOfLocaDet = result.data.resultOfLocaDet;
a.resultOfCityDet = result.data.resultOfCityDet;
a.resultOfSubLocaDet = result.data.resultOfSubLocaDet;
a.showsearch = true;
}, function(error) {
});
}
}
});
so when i am moving up and down arrows in keyboard.how to highlight the particular rows and trigger the particular function
like this
I'm using the following code to try ng-repeat in angular. I need to show the list which I click. But when I click on the symbol ~, it is showing all the lists.
How can I specify such conditions when using ng-repeat?
HTML
<div ng-app='myapp' ng-controller='cntrl'>
<input ng-model="addy" />
<button ng-click="add()" class="w3-btn w3-padding w3-blue">Add</button>
<span ng-show='span' style='color:red'>The TeXt Is AlReAdY In ThE LiSt</span>
<ul class="w3-ul">
<li ng-repeat="x in names" class="w3-padding-hor-16">
<span ng-click="expand()">~{{x}}
<ul ng-show='show'>
<li ng-repeat="Y in features[$index]">{{Y}}</li>
</ul>
</span>
</li>
</ul>
</div>
Angular JS
<script>
var app = angular.module('myapp',[]);
app.controller('cntrl', function($scope){
$scope.names = ['Fruits', 'Veggies', 'Cars'];
$scope.show= false ;
$scope.features=[['Apple','Mango','Lemon','Grapes'], ['Tomato', 'Carrot', 'Cucumber'], ['Porsche', 'Aston', 'Dodge']];
$scope.expand=function(){
$scope.show = !$scope.show;
}
$scope.add = function(){
$scope.span = false
if($scope.names.indexOf($scope.addy) === -1)
$scope.names.push($scope.addy);
else
$scope.span = true;
}
});
</script>
Pls check it out
var app = angular.module('myapp',[]);
app.controller('cntrl', function($scope){
$scope.names = ['Fruits', 'Veggies', 'Cars'];
$scope.show= false ;
$scope.features=[['Apple','Mango','Lemon','Grapes'], ['Tomato', 'Carrot', 'Cucumber'], ['Porsche', 'Aston', 'Dodge']];
$scope.expand=function(index){
$scope.expanded = ($scope.expanded != index)?index:-1;
}
$scope.add = function(){
$scope.span = false
if($scope.names.indexOf($scope.addy) === -1)
$scope.names.push($scope.addy);
else
$scope.span = true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myapp' ng-controller='cntrl'>
<input ng-model="addy" />
<button ng-click="add()" class="w3-btn w3-padding w3-blue">Add</button>
<span ng-show='span' style='color:red'>The TeXt Is AlReAdY In ThE LiSt</span>
<ul class="w3-ul">
<li ng-repeat="x in names" class="w3-padding-hor-16">
<span ng-click="expand($index)">~{{x}}
<ul ng-show='expanded == $index'>
<li ng-repeat="Y in features[$index]">{{Y}}</li>
</ul>
</span>
</li>
</ul>
</div>