Skip to content

Commit

Permalink
started work on the flight stats page and banner functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
@brian-mckeown
brian-mckeown committed Oct 21, 2023
1 parent d4e3862 commit 2d912d0
Show file tree
Hide file tree
Showing 2 changed files with 142 additions and 2 deletions.
78 changes: 77 additions & 1 deletion src/main/resources/static/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,10 @@
<a class="navbar-brand" href="#">
<i class="fas fa-plane"></i> flightdash.io
</a>
<div ng-show="showFlightStatBanner" class="text-white d-flex align-items-center ms-2">
<p class="mb-0">{{callSign}} {{departureIcao}}/{{arrivalIcao}} | BOARDING {{boardingDateTime | toLocalTime}} | DEPARTURE {{departureDateTime | toLocalTime}} <span class="badge" ng-class="{'bg-success': departureStatus === 'On-Time', 'bg-danger': departureStatus === 'Delayed'}">{{departureStatus}}</span>
| ARRIVAL {{arrivalDateTime | toLocalTime}}</p>
</div>

<!-- Toggler for mobile -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
Expand Down Expand Up @@ -93,6 +97,9 @@
<li class="nav-item">
<a class="nav-link" ng-click="activeTab='charts'" ng-class="{'active': activeTab === 'charts'}">Charts</a>
</li>
<li class="nav-item">
<a class="nav-link" ng-click="activeTab='flightStats'" ng-class="{'active': activeTab === 'flightStats'}">Flight Stats</a>
</li>
</ul>

<hr>
Expand Down Expand Up @@ -317,7 +324,76 @@ <h2>Navigraph Charts</h2>
<a href="https://developers.navigraph.com/docs/general/restrictions" target="_blank" rel="noopener noreferrer">prohibited at this time</a>.
</p>
<p>We will look into options in the future.</p>
</div>
</div>
</div>

<!-- Flight Stats Tab -->
<div ng-show="activeTab === 'flightStats'">
<div class="container mt-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="flightStatBannerCheckbox" ng-model="showFlightStatBanner">
<label class="form-check-label" for="flightStatBannerCheckbox">
Show Flight Stats Banner
</label>
</div>
<hr>
<form>
<!-- Row 1 -->
<div class="row mb-3">
<!-- Call Sign Input -->
<div class="col-md-4">
<label for="callSignInput" class="form-label">Call Sign</label>
<input type="text" class="form-control" id="callSignInput" placeholder="Enter Call Sign" ng-model="callSign">
</div>

<!-- Departure ICAO Input -->
<div class="col-md-4">
<label for="departureICAOInput" class="form-label">Departure ICAO</label>
<input type="text" class="form-control" id="departureICAOInput" maxlength="4" oninput="this.value = this.value.toUpperCase()" placeholder="Enter Departure ICAO" ng-model="departureIcao">
</div>

<!-- Arrival ICAO Input -->
<div class="col-md-4">
<label for="arrivalICAOInput" class="form-label">Arrival ICAO</label>
<input type="text" class="form-control" id="arrivalICAOInput" maxlength="4" oninput="this.value = this.value.toUpperCase()" placeholder="Enter Arrival ICAO" ng-model="arrivalIcao">
</div>
</div>

<!-- Row 2 -->
<div class="row mb-3">
<!-- Departure Date and Time Input -->
<div class="col-md-4">
<label for="departureDateTimeInput" class="form-label">Departure Date and Time</label>
<input type="datetime-local" class="form-control" id="departureDateTimeInput" ng-model="departureDateTime">
<span class="badge bg-success mt-2" ng-class="{'bg-success': departureStatus === 'On-Time', 'bg-danger': departureStatus === 'Delayed'}" mt-2>{{departureStatus}}</span>
</div>

<!-- Boarding Time in Minutes Input -->
<div class="col-md-4">
<label for="boardingTimeInput" class="form-label">Boarding Time (in minutes)</label>
<input type="number" class="form-control" id="boardingTimeInput" placeholder="Enter Boarding Time in minutes" ng-model="boardingTime">
</div>

<!-- Arrival Date and Time Input -->
<div class="col-md-4">
<label for="arrivalDateTimeInput" class="form-label">Arrival Date and Time</label>
<input type="datetime-local" class="form-control" id="arrivalDateTimeInput" ng-model="arrivalDateTime">
<span class="badge bg-success mt-2">On-Time</span>
</div>
</div>

<!-- Row 3 -->
<div class="row">
<!-- Calculated Boarding Date and Time Field -->
<div class="col-md-4">
<label for="calculatedBoardingDateTime" class="form-label">Calculated Boarding Date and Time</label>
<input type="text" class="form-control" id="calculatedBoardingDateTime" ng-model="boardingDateTime"readonly>
<span class="badge bg-success mt-2">On-Time</span>
</div>
</div>
</form>
</div>
</div>
</div>

</div>
Expand Down
66 changes: 65 additions & 1 deletion src/main/resources/static/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -635,6 +635,63 @@ $scope.clearConfigValues = function() {
$scope.tables = [];
};

//** Flight Status Section */
// Default values for the badges
$scope.callSign = '';
$scope.departureIcao = '';
$scope.arrivalIcao = '';
$scope.departureDateTime = '';
$scope.boardingTime = '';
$scope.arrivalDateTime = '';
$scope.boardingDateTime = '';
$scope.showFlightStatBanner = false;
$scope.departureStatus = "On-Time";
$scope.arrivalStatus = "On-Time";
$scope.boardingStatus = "On-Time";

$scope.$watch('showFlightStatBanner', function(newValue) {
console.log('showFlightStatBanner changed to:', newValue);
});

$scope.updateStatus = function(dateTimeField) {
// Get the current time
let currentTime = new Date().toISOString();

// Convert datetime-local input to ISO format for comparison
let inputDateTime = new Date(dateTimeField).toISOString();

if (inputDateTime < currentTime) {
// If the input date-time is less than the current time, it's delayed
return "Delayed";
} else {
return "On-Time";
}
};

// Watch the Departure Date and Time input for changes
$scope.$watch('departureDateTime', function(newVal, oldVal) {
if (newVal !== oldVal) {
$scope.departureStatus = $scope.updateStatus(newVal);
}
});

// Watch the Arrival Date and Time input for changes
$scope.$watch('arrivalDateTime', function(newVal, oldVal) {
if (newVal !== oldVal) {
$scope.arrivalStatus = $scope.updateStatus(newVal);
}
});

// Watch the Calculated Boarding Date and Time field for changes
$scope.$watch('calculatedBoardingDateTime', function(newVal, oldVal) {
if (newVal !== oldVal) {
$scope.boardingStatus = $scope.updateStatus(newVal);
}
});

// Add logic here to calculate and set the 'calculatedBoardingDateTime' based on the provided Departure Date-Time and Boarding Time in minutes
/** End Flight Status Section */

/*** API CALLS *****************/
/**
*
Expand Down Expand Up @@ -747,4 +804,11 @@ $scope.clearConfigValues = function() {
};
$scope.fetchDefaultChecklists();

}]);
}]);

app.filter('toLocalTime', function() {
return function(input) {
var date = new Date(input);
return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); // returns "hh:mm AM/PM" format
};
});

0 comments on commit 2d912d0

Please sign in to comment.