Skip to content

Commit

Permalink
Merge pull request #89 from GuruVII/master
Browse files Browse the repository at this point in the history 
#63 and #64
  • Loading branch information
@j-h-s
j-h-s authored May 14, 2018
2 parents eba8759 + 781d9e9 commit 966f132
Show file tree
Hide file tree
Showing 7 changed files with 164 additions and 71 deletions.
72 changes: 48 additions & 24 deletions src/AppBundle/Resources/views/Template/list_pictures.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,30 +21,54 @@
<a class="waves-effect waves-light btn filter-button z-depth-0" ng-click="defaultSort()">Reset filters</a>
<!-- Platform selection dropdown -->
<a class="waves-effect waves-light dropdown-button btn filter-button z-depth-0 sort-white platform-button asc" data-activates="platform-selection" data-beloworigin="true">{{selectedPlatform()}}</a>
<ul id="platform-selection" class="dropdown-content arrow-color z-depth-0 filter-menu dropdown-platform">
<li class="filter-menu-items dropdown-menu-social-filter" ng-click="radioBtn = 'all'; filterPlatform(radioBtn)"><input id="all-platforms" class="with-gap platform-button" name="platform" type="radio" id="all-platform" value="all" ng-model="radioBtn" ng-click="filterPlatform(radioBtn)">
<label for="all-platforms" class="platform-dropdown-font radioButtonLabel">All</label>
</li>
<li class="filter-menu-items dropdown-menu-social-filter" ng-click="radioBtn = 'fb'; filterPlatform(radioBtn)" ><input class="with-gap" name="platform" type="radio" id="FB-platform" value="fb" ng-model='radioBtn' ng-click="filterPlatform(radioBtn)">
<label for="FB-platform" class="platform-dropdown-font radioButtonLabel">Facebook</label>
</li>
<li class="filter-menu-items dropdown-menu-social-filter" ng-click="radioBtn = 'tw'; filterPlatform(radioBtn)"><input class="with-gap" name="platform" type="radio" id="TW-platform" value="tw" ng-model='radioBtn' ng-click="filterPlatform(radioBtn)">
<label for="TW-platform" class="platform-dropdown-font radioButtonLabel">Twitter</label></li>
<!-- <li class="filter-menu-items dropdown-menu-social-filter" ng-click="radioBtn = 'G+'"><input class="with-gap" name="platform" type="radio" id="G+-platform" value="G+ "ng-model="radioBtn" ng-click="filterPlatform(radioBtn)">
<label for="G+-platform" class="dropdown-font-text radioButtonLabel">Google+</label></li> -->
</ul>
<!-- Party selection dropdown -->
<a class="waves-effect waves-light dropdown-button btn filter-button z-depth-0 sort-white asc" ng-click="emptyInput()"data-activates="party-selection" data-beloworigin="true" id="party-selection-button">Party selection</a>
<ul id="party-selection" class="dropdown-content arrow-color z-depth-0 filter-menu dropdown-menu-parties">
<!--both dropdown-text-input-li and dropdown-text-input are using !important" -->
<li class="dropdown-text-input-li">
<input placeholder="SEARCH" class="dropdown-text-input" name="party" type="text" ng-model="partySelection" id="party-selection-search" autofocus>
</li>
<li class="filter-menu-items party-dropdown waves-effect valign" ng-click="filterParty(items.code)" ng-repeat="items in partyList | filter:partySelection:items.name.en track by $index">
<span class="party-dropdown-font valign" ng-attr-id="{{items.code}}">{{items.name.en}}</span>
</li>
</ul>
<a class="waves-effect waves-light btn filter-button z-depth-0 sort-white" ng-click="sortDescViews()" id="asc-desc-views">Engagement</a>
<ul id="platform-selection" class="dropdown-content arrow-color z-depth-0 filter-menu dropdown-platform">
<li class="filter-menu-items dropdown-menu-social-filter" ng-click="radioBtn = 'all'; filterPlatform(radioBtn)"><input id="all-platforms" class="with-gap platform-button" name="platform" type="radio" id="all-platform" value="all" ng-model="radioBtn" ng-click="filterPlatform(radioBtn)">
<label for="all-platforms" class="platform-dropdown-font radioButtonLabel">All</label>
</li>
<li class="filter-menu-items dropdown-menu-social-filter" ng-click="radioBtn = 'fb'; filterPlatform(radioBtn)" ><input class="with-gap" name="platform" type="radio" id="FB-platform" value="fb" ng-model='radioBtn' ng-click="filterPlatform(radioBtn)">
<label for="FB-platform" class="platform-dropdown-font radioButtonLabel">Facebook</label>
</li>
<li class="filter-menu-items dropdown-menu-social-filter" ng-click="radioBtn = 'tw'; filterPlatform(radioBtn)"><input class="with-gap" name="platform" type="radio" id="TW-platform" value="tw" ng-model='radioBtn' ng-click="filterPlatform(radioBtn)">
<label for="TW-platform" class="platform-dropdown-font radioButtonLabel">Twitter</label></li>
<!-- <li class="filter-menu-items dropdown-menu-social-filter" ng-click="radioBtn = 'G+'"><input class="with-gap" name="platform" type="radio" id="G+-platform" value="G+ "ng-model="radioBtn" ng-click="filterPlatform(radioBtn)">
<label for="G+-platform" class="dropdown-font-text radioButtonLabel">Google+</label></li> -->
</ul>
<!-- Party selection dropdown -->
<a class="waves-effect waves-light dropdown-button btn filter-button z-depth-0 sort-white asc" ng-click="emptyInput()" data-activates="party-selection" data-beloworigin="true" id="party-selection-button">Party selection</a>
<ul id="party-selection" class="dropdown-content arrow-color z-depth-0 filter-menu dropdown-menu-parties">
<!--both dropdown-text-input-li and dropdown-text-input are using !important" -->
<li class="dropdown-text-input-li">
<input placeholder="SEARCH" class="dropdown-text-input" name="party" type="text" ng-model="partySelection" id="party-selection-search" autofocus>
</li>
<li class="filter-menu-items party-dropdown waves-effect valign" ng-click="filterParty(items.code)" ng-repeat="items in partyList | filter:partySelection:items.name.en track by $index">
<span class="party-dropdown-font valign" ng-attr-id="{{items.code}}">{{items.name.en}}</span>
</li>
</ul>
</div>
<div class="col s12 filter-row-margin">
<span>POSTED IN THE LAST:</span>
<a class="waves-effect waves-light btn filter-button z-depth-0 sort-white" ng-class="{'reach-selected': address.recent === '1 days'}" ng-click="limitPostDay('1 days')">1 day</a>
<a class="waves-effect waves-light btn filter-button z-depth-0 sort-white" ng-class="{'reach-selected': address.recent === '7 days'}"ng-click="limitPostDay('7 days')">1 week</a>
<a class="waves-effect waves-light btn filter-button z-depth-0 sort-white" ng-class="{'reach-selected': address.recent === '1 months'}" ng-click="limitPostDay('1 months')">1 month</a>
<a class="waves-effect waves-light btn filter-button z-depth-0 sort-white" ng-class="{'reach-selected': address.recent === '6 months'}" ng-click="limitPostDay('6 months')">6 months</a>
<a class="waves-effect waves-light btn filter-button z-depth-0 sort-white" ng-class="{'reach-selected': address.recent === '12 months'}" ng-click="limitPostDay('12 months')">1 year</a>
</div>
<div class="col s12 filter-row-margin">
<span>SORT BY:</span>
<a class="waves-effect waves-light btn filter-button z-depth-0 sort-white" ng-click="sortBy('code')" ng-class="{'reach-selected': address.sort === 'code'}">
Name
</a>
<a class="waves-effect waves-light btn filter-button z-depth-0 sort-white" ng-click="sortBy('date')" ng-class="{'reach-selected': address.sort === 'date'}">Time</a>
<a class="waves-effect waves-light btn filter-button z-depth-0 sort-white" ng-click="sortBy('likes')" ng-class="{'reach-selected': address.sort === 'likes'}">
Engagement
</a>
<a class="waves-effect waves-light btn filter-button z-depth-0 sort-white" ng-click="sortAscDesc()" id="asc-desc-sort">
<div class="sort-btn-div">
Sort Order:
<i class="material-icons asc-desc-arrow" ng-class="{'asc-desc-hide-arrow': address.direction === 'asc'}">arrow_downward</i>
<i class="material-icons asc-desc-arrow" ng-class="{'asc-desc-hide-arrow': address.direction === 'desc'}">arrow_upward</i>
</div>
</a>
</div>
</div>
<!-- cards while loading and loading circle-->
Expand Down
30 changes: 27 additions & 3 deletions src/AppBundle/Resources/views/Template/list_posts.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
</li>
<li class="filter-menu-items dropdown-menu-social-filter" ng-click="radioBtn = 'tw'; filterPlatform(radioBtn)"><input class="with-gap" name="platform" type="radio" id="TW-platform" value="tw" ng-model='radioBtn' ng-click="filterPlatform(radioBtn)">
<label for="TW-platform" class="platform-dropdown-font radioButtonLabel">Twitter</label></li>
<!-- <li class="filter-menu-items dropdown-menu-social-filter" ng-click="radioBtn = 'G+'"><input class="with-gap" name="platform" type="radio" id="G+-platform" value="G+ "ng-model="radioBtn" ng-click="filterPlatform(radioBtn)">
<!-- <li class="filter-menu-items dropdown-menu-social-filter" ng-click="radioBtn = 'G+'"><input class="with-gap" name="platform" type="radio" id="G+-platform" value="G+ "ng-model="radioBtn" ng-click="filterPlatform(radioBtn)">
<label for="G+-platform" class="dropdown-font-text radioButtonLabel">Google+</label></li> -->
</ul>
<!-- Party selection dropdown -->
Expand All @@ -45,8 +45,32 @@
<span class="party-dropdown-font valign" ng-attr-id="{{items.code}}">{{items.name.en}}</span>
</li>
</ul>
<a class="waves-effect waves-light btn filter-button z-depth-0 sort-white" ng-click="sortDescViews()" id="asc-desc-views">Engagement</a>
</div>
</div>
<div class="col s12 filter-row-margin">
<span>POSTED IN THE LAST:</span>
<a class="waves-effect waves-light btn filter-button z-depth-0 sort-white" ng-class="{'reach-selected': address.recent === '1 days'}" ng-click="limitPostDay('1 days')">1 day</a>
<a class="waves-effect waves-light btn filter-button z-depth-0 sort-white" ng-class="{'reach-selected': address.recent === '7 days'}"ng-click="limitPostDay('7 days')">1 week</a>
<a class="waves-effect waves-light btn filter-button z-depth-0 sort-white" ng-class="{'reach-selected': address.recent === '1 months'}" ng-click="limitPostDay('1 months')">1 month</a>
<a class="waves-effect waves-light btn filter-button z-depth-0 sort-white" ng-class="{'reach-selected': address.recent === '6 months'}" ng-click="limitPostDay('6 months')">6 months</a>
<a class="waves-effect waves-light btn filter-button z-depth-0 sort-white" ng-class="{'reach-selected': address.recent === '12 months'}" ng-click="limitPostDay('12 months')">1 year</a>
</div>
<div class="col s12 filter-row-margin">
<span>SORT BY:</span>
<a class="waves-effect waves-light btn filter-button z-depth-0 sort-white" ng-click="sortBy('code')" ng-class="{'reach-selected': address.sort === 'code'}">
Name
</a>
<a class="waves-effect waves-light btn filter-button z-depth-0 sort-white" ng-click="sortBy('date')" ng-class="{'reach-selected': address.sort === 'date'}">Time</a>
<a class="waves-effect waves-light btn filter-button z-depth-0 sort-white" ng-click="sortBy('likes')" ng-class="{'reach-selected': address.sort === 'likes'}">
Engagement
</a>
<a class="waves-effect waves-light btn filter-button z-depth-0 sort-white" ng-click="sortAscDesc()" id="asc-desc-sort">
<div class="sort-btn-div">
Sort Order:
<i class="material-icons asc-desc-arrow" ng-class="{'asc-desc-hide-arrow': address.direction === 'asc'}">arrow_downward</i>
<i class="material-icons asc-desc-arrow" ng-class="{'asc-desc-hide-arrow': address.direction === 'desc'}">arrow_upward</i>
</div>
</a>
</div>
</div>
<!-- cards while loading and loading circle-->
<div class="row" ng-if="loading">
Expand Down
15 changes: 12 additions & 3 deletions web/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -519,7 +519,6 @@ the rest is for both
-webkit-transition: opacity 1s ease-out;
}


/*card post */
.card-post {
background-size: contain;
Expand Down Expand Up @@ -704,8 +703,18 @@ the rest is for both
}

/* Filter menu on post and picture pages */


.sort-btn-div {
display: flex;
}
.filter-row-margin {
margin-top: 4px;
}
.asc-desc-arrow {
margin-left: 8px;
}
.asc-desc-hide-arrow {
display: none;
}
.filter-button {
background: #29b6f6;
border-radius: 0px !important;
Expand Down
2 changes: 1 addition & 1 deletion web/js/pictureAndPostFactory.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ angular.module("app").factory("pictureAndPostFactory", function($http) {
return promise
},
postList: function(x) {
var promise = $http.get(address + "social/?_format=json&sub_type=" + x.subType + "&order_by=" + x.sort + "&code=" + x.partyCode + "&type=" + x.socialPlatform + "&offset=" + x.offset)
var promise = $http.get(address + "social/?_format=json&sub_type=" + x.subType + "&order_by=" + x.sort + "&direction=" + x.direction + "&code=" + x.partyCode + "&type=" + x.socialPlatform + "&offset=" + x.offset + "&recent=" + x.recent)
.then(function(response) {
//First function handles success
return response.data;
Expand Down
49 changes: 32 additions & 17 deletions web/js/pictureList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,18 @@
$scope.address = { //object contains all possible filters for the API
subType: "I",
socialPlatform: "",
sort: "",
sort: "code",
partyCode: "",
offset: 0
offset: 0,
direction: "desc",
recent: ""
};

//sets default checked radio button when the page loads
$scope.radioBtn = "all";


//this functions loads more data for the infinite scroll
//this functorderions loads more data for the infinite scroll
// it constantily updates the array from which ng-repeat gets its data
$scope.loadData = function() {
//Function that gets the data
Expand Down Expand Up @@ -131,29 +133,42 @@
};*/

//a toggle that sorts entries by reach in descending order
$scope.sortDescViews = function() {
$scope.sortBy = function(sortType) {
resetArray()
if ($("#asc-desc-views").hasClass("reach-selected")) {
$("#asc-desc-views").removeClass("reach-selected");
$scope.address.sort = "";
$scope.address.offset = 0;
$scope.loadMore();
$scope.address.sort = sortType;
$scope.loadMore();
}

$scope.sortAscDesc = function () {
resetArray()
if ($scope.address.direction === "desc") {
$scope.address.direction = "asc";
} else {
$scope.address.direction = "desc";
}
$scope.loadMore();
}
$scope.limitPostDay = function(timeLimit) {
if (timeLimit === $scope.address.recent) {
$scope.address.recent = "";
} else {
$("#asc-desc-views").addClass("reach-selected");
$scope.address.sort = "likes";
$scope.address.offset = 0;
$scope.loadMore();
};
};

$scope.address.recent = timeLimit;

}
resetArray()
$scope.loadMore();
}
$scope.defaultSort = function() {
resetArray()
$scope.address = {
subType: "I",
socialPlatform: "",
sort: "",
sort: "code",
partyCode: "",
offset: 0
offset: 0,
direction: "desc",
recent: ""
};
$scope.loadMore();
$(".up").removeClass("arrow-color")
Expand Down
Loading

0 comments on commit 966f132

Please sign in to comment.