Filter w. Radiobutton data
by Bianca Kuehweidner
HTML
<div class="singlefare" id="fare0" data-airlinecode="LH">
<div class="segment__moreFlightTimes segment__moreflights_0">
FRA - JFK<br/>
<input type="radio" id="rb-fare0-leg0-c0" name="fare0-leg0" value="1" data-departuretime="10:00" data-arrivaltime="18:00" checked>10:00-16:00<br/>
<input type="radio" id="rb-fare0-leg0-c1" name="fare0-leg0" value="2" data-departuretime="08:00" data-arrivaltime="20:00">08:00-20:00<br/>
<input type="radio" id="rb-fare0-leg0-c2" name="fare0-leg0" value="3" data-departuretime="14:00" data-arrivaltime="18:00">14:00-18:00
</div>
<p></p>
<div class="segment__moreFlightTimes segment__moreflights_0">
JFK - FRA<br/>
<input type="radio" id="rb-fare0-leg1-c0" name="fare0-leg1" value="1" data-departuretime="14:00" data-arrivaltime="18:00" checked>14:00-18:00<br/>
<input type="radio" id="rb-fare0-leg1-c1" name="fare0-leg1" value="2" data-departuretime="08:00" data-arrivaltime="20:00">08:00-20:00<br/>
<input type="radio" id="rb-fare0-leg1-c2" name="fare0-leg1" value="3" data-departuretime="10:00" data-arrivaltime="16:00">10:00-16:00
</div>
</div>
<hr/>
<div class="singlefare" id="fare1" data-airlinecode="AA">
<div class="segment__moreFlightTimes segment__moreflights_1">
FRA - JFK<br/>
<input type="radio" id="rb-fare1-leg0-c0" name="fare1-leg0" value="1" data-departuretime="10:00" data-arrivaltime="16:00" checked>10:00-16:00<br/>
<input type="radio" id="rb-fare1-leg0-c1" name="fare1-leg0" value="2" data-departuretime="08:00" data-arrivaltime="20:00">08:00-20:00<br/>
<input type="radio" id="rb-fare1-leg0-c2" name="fare1-leg0" value="3" data-departuretime="14:00" data-arrivaltime="18:00">14:00-18:00
</div>
<p></p>
<div class="segment__moreFlightTimes segment__moreflights_1">
JFK - FRA<br/>
<input type="radio" id="rb-fare1-leg1-c0" name="fare1-leg1" value="1" data-departuretime="14:00" data-arrivaltime="18:00"...
JavaScript
const FareCount = 2;
const SegmentCount = 2;
/* Given values that are dynamic later and only used for a sample here */
const Segment = 1;
const DepartureTime_Min = "09:00";
const DepartureTime_Max= "16:00";
const ArrivalTime_Min = "10:00";
const ArrivalTime_Max= "20:00";
/* All Fare data */
let Fares = [];
let SingleFare = [];
GenerateFareArray();
function GenerateFareArray() {
$(".singlefare .segment__moreFlightTimes input[type='radio']:checked").each(function() {
let currentSegment = $(this).attr("name").split("-");
SingleFare = {
FareID: $(this).closest(".singlefare").attr("id"),
Segment: currentSegment[1].slice(3,10),
DepartureTime: $(this).data("departuretime"),
ArrivalTime: $(this).data("arrivaltime")
};
Fares.push(SingleFare);
console.log(Object.keys(Fares).length);
for (let i=0; i <= Object.keys(Fares).length; i++ ) {
console.log(SingleFare.FareID + " / Segment " + SingleFare.Segment + ": " + SingleFare.DepartureTime + " - " + SingleFare.ArrivalTime);
}
});
FilterFares();
}
$(".segment__moreFlightTimes input[type='radio']").on("click", function() {
Fares = [];
GenerateFareArray();
});
function FilterFares() {
$(".singlefare").hide();
var matchingFares = $.grep(Fares, function(e) {
return e.Segment == Segment && e.DepartureTime >= DepartureTime_Min && e.DepartureTime <= DepartureTime_Max;
});
fareIds = [];
for (fare of matchingFares) {
fareIds.push(fare.FareID);
$("#" + fare.FareID).show();
}
console.log(fareIds);
console.log(matchingFares);
}