BookyourSeat:
It is an angularJs app that helps you book your seats for a movie show similar to bookmyshow .
What the User Can Do (User Cases)?
Select and Deselect the Seats with respect to the selectedVal, i.e if the selectedVal = 4 then the user can select only 4 seats in total.
if the SelectedVal is less than 1 then the user should not be able to select the seat anymore unless the user deselect any of the previously selected seats and select again.
Booked Seats Case: If the check value of a seat is true, then the user should not be able to select or deselect that seat(a.blocked CSS rule is Added for that purpose) since it is already selected by another user(Lets assume).
Automatic Seat Selection Cases
As shown in the GIF
- If the user selects 3 seats and click on the first seat in the first row it should automatically select 2 and 3 on the same row.
- If the user Selects 3 seats and clicks on the second last seat in the row then last two seats should be filled and the remaining seat should be filled where ever the user clicks.
- If the user selects 3 seats and clicks on only the last seat then only that seat should be filled.
In case of 4 seats.
Problem:
I am able to achieve the automatic selection process using angular.forEach()
but cannot all the logics correctly.
$scope.execute = function(i, j, itemVal, itemLetter) {
angular.forEach($scope.obj, function(v, k) {
if (v[i].val == itemVal && v[i].letter == itemLetter) {
if (v[i].seat == true || ($scope.isDisabled && v[i].check == false)) {
return;
}
v[i].check = !v[i].check;
if (v[i].check)
$scope.selectedVal -= 1;
else
$scope.selectedVal += 1;
//seatSelection
var m = i;
for (var l = 0; l < $scope.selectedVal; l++)
v[m++].check = true;
//seatSelectionEnd
console.log(itemVal + " " + itemLetter);
if ($scope.selectedVal < 1) {
$scope.isDisabled = true;
} else {
$scope.isDisabled = false;
}
}
});
};
}])
Working Fiddle: https://jsfiddle.net/rittamdebnath/5vqxgtq3/11/
Aucun commentaire:
Enregistrer un commentaire