Skip to content

Instantly share code, notes, and snippets.

@Kahn

Kahn/gist:b98ddf722d82d5e91b9388df660a1657

Created September 29, 2021 09:06
Show Gist options
  • Save Kahn/b98ddf722d82d5e91b9388df660a1657 to your computer and use it in GitHub Desktop.
Save Kahn/b98ddf722d82d5e91b9388df660a1657 to your computer and use it in GitHub Desktop.
Download ZIP
VATPAC oceanic reporter
Raw
gistfile1.txt
<!--
=========================================================
* Now UI Design System PRO - v2.1.0
=========================================================
* Product Page: https://www.creative-tim.com/product/now-ui-design-system-pro
* Copyright 2021 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->
<!DOCTYPE html>
<html lang="en" itemscope itemtype="http://schema.org/WebPage">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>
Position Report
</title>
<!-- Fonts and icons -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700,200|Open+Sans+Condensed:700" rel="stylesheet">
<!-- Nucleo Icons -->
<link href="./assets/css/nucleo-icons.css" rel="stylesheet" />
<link href="./assets/css/nucleo-svg.css" rel="stylesheet" />
<!-- Font Awesome Icons -->
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
<!-- CSS Files -->
<link id="pagestyle" href="./assets/css/now-design-system-pro.css?v=2.1.0" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script>
<style>
.error {
color:red;
font-weight: bold;
}
</style>
</head>
<body class="presentation-page">
<div class="col-lg-9">
<div class="card mb-5">
<div class="card-body p-5">
<h1 class="text-gradient text-info ">Oceanic report generator</h1>
<section class="py-3">
<form id="form" autocomplete="off">
<p>Complete the form to generate the position report phraseology for use in Oceanic airspace within VATPAC, VATNZ or Pacific Partnership FIRs.</p>
<p>Note: This <strong>does not submit your position</strong>, this tool provides you with the phraseology to make a manual PIREP via voice or text.</p>
<div class="row">
<div class="form-group col">
<label for="callsign">Callsign</label>
<input required name="callsign" id="callsign" onblur="this.value = this.value.toUpperCase()" type="text" class="form-control" placeholder="QFA352">
</div>
<div class="form-group col">
<label for="position">Position</label>
<input required name="position" id="position" onblur="this.value = this.value.toUpperCase()" maxlength="7" type="text" class="form-control" placeholder="ANULI">
</div>
<div class="form-group col">
<label for="time">Time at position</label>
<input required name="time" id="time" data-rule-minlength="4" data-rule-maxlength="4" data-msg-minlength="Must have four digits" maxlength="4" onblur="this.value = this.value.toUpperCase()" type="text" class="form-control" placeholder="1512">
</div>
<div class="form-group col">
<label for="flightLevel">Flight level</label>
<input required name="flightLevel" id="flightLevel" data-rule-minlength="3" data-rule-maxlength="3" data-msg-minlength="Must have three digits" maxlength="3" onblur="this.value = this.value.toUpperCase()" type="text" class="form-control" placeholder="370">
</div>
</div>
<div class="row">
<div class="form-group col">
<label for="nextPosition">Next position</label>
<input required name="nextPosition" id="nextPosition" maxlength="7" onblur="this.value = this.value.toUpperCase()" type="text" class="form-control" placeholder="VIROG">
</div>
<div class="form-group col">
<label for="nextPositionEstimate">Next position estimated time</label>
<input required name="nextPositionEstimate" id="nextPositionEstimate" onblur="this.value = this.value.toUpperCase()" data-rule-minlength="4" data-rule-maxlength="4" data-msg-minlength="Must have four digits" maxlength="4" type="text" class="form-control" placeholder="1524">
</div>
<div class="form-group col">
<label for="positionThereafter">Position thereafter</label>
<input required name="positionThereafter" id="positionThereafter" onblur="this.value = this.value.toUpperCase()" type="text" maxlength="7" class="form-control" placeholder="IGEVO">
</div>
</div>
<!-- <div class="row">
<div class="pb-3 mt-3">
<div class="d-flex ">
<div class="form-check form-switch mb-0">
<input class="form-check-input" type="checkbox" id="speedReport">
</div>
<div class="ms-4">
<span class="text-dark font-weight-bold d-block text-sm">Mach Speed</span>
<span class="text-xs d-block">Unless you are specifically assigned a mach speed to fly by ATC, you do not need to report your speed.</span>
</div>
</div>
</div>
<div class="row">
<div class="form-group col">
<label for="mach">Mach Speed</label>
<input onblur="this.value = this.value.toUpperCase()" id="mach" type="text" maxlength="7" class="form-control" placeholder="0.83">
</div>
<div class="form-group col">
<label for="groundspeed">Ground Speed</label>
<input onblur="this.value = this.value.toUpperCase()" id="groundspeed" type="text" maxlength="7" class="form-control" placeholder="280">
</div> -->
<!--
<div class="pb-3 mt-3">
<div class="d-flex ">
<div class="form-check form-switch mb-0">
<input class="form-check-input" type="checkbox" id="weatherReport">
</div>
<div class="ms-4">
<span class="text-dark font-weight-bold d-block text-sm">Weather Report</span>
<span class="text-xs d-block">Are you at a weather reporting station? If you are unsure, assume you are not unless specifically requested for weather info by ATC.</span>
</div>
</div>
</div>
<div class="row">
<div class="form-group col">
<label for="winddirection">Wind Direction</label>
<input id="winddirection" maxlength="7" onblur="this.value = this.value.toUpperCase()" type="text" class="form-control" placeholder="350">
</div>
<div class="form-group col">
<label for="windspeed">Wind Speed</label>
<input onblur="this.value = this.value.toUpperCase()" id="windspeed" maxlength="4" type="text" class="form-control" placeholder="12">
</div>
</div>
<div class="row">
<div class="form-group col">
<label>Turbulence</label>
<div class="dropdown">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
None
</button>
<ul class="dropdown-menu px-2 py-3" aria-labelledby="dropdownMenuButton" id="turbulence">
<li><a class="dropdown-item border-radius-md" href="javascript:;">None</a></li>
<li><a class="dropdown-item border-radius-md" href="javascript:;">Light</a></li>
<li><a class="dropdown-item border-radius-md" href="javascript:;">Moderate</a></li>
<li><a class="dropdown-item border-radius-md" href="javascript:;">Severe</a></li>
</ul>
</div>
</div>
<div class="form-group col">
<label>Icing</label>
<div class="dropdown">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
None
</button>
<ul class="dropdown-menu px-2 py-3" aria-labelledby="dropdownMenuButton" id="icing">
<li><a class="dropdown-item border-radius-md" href="javascript:;">None</a></li>
<li><a class="dropdown-item border-radius-md" href="javascript:;">Light</a></li>
<li><a class="dropdown-item border-radius-md" href="javascript:;">Moderate</a></li>
<li><a class="dropdown-item border-radius-md" href="javascript:;">Severe</a></li>
</ul>
</div>
</div>
<div class="form-group col">
<label>Thunderstorms</label>
<div class="dropdown">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
None
</button>
<ul class="dropdown-menu px-2 py-3" aria-labelledby="dropdownMenuButton" id="thunderstone">
<li><a class="dropdown-item border-radius-md" href="javascript:;">None</a></li>
<li><a class="dropdown-item border-radius-md" href="javascript:;">Yes</a></li>
<li><a class="dropdown-item border-radius-md" href="javascript:;">Severe with hail</a></li>
</ul>
</div>
</div>
</div>
-->
<div class="form-row">
<input type=submit name="generate" value="Generate" id="generateButton" class="btn bg-gradient-info"></input>
</div>
<p class="card bg-light" id="results" style="padding: 1rem;">Complete the fields above to generate the report</p>
</div>
</form>
</div>
</section>
</div>
</div>
<script>
const rules = {
callsign: {
required: true
},
position: {
required: true
},
time: {
required: true,
number: true
},
flightLevel: {
required: true,
number: true
},
nextPosition: {
required: true
},
nextPositionEstimate: {
required: true,
number: true
},
positionThereafter: {
required: true
}
}
$("#generateButton").click(function() {
$("#form").validate({
rules: rules,
submitHandler: function(form) {
console.log(form);
var transcript =
`${$(form).find('input[name="callsign"]').val()}, position ${$(form).find('input[name="position"]').val()} ` +
`at ${$(form).find('input[name="time"]').val()}, flight level ${$(form).find('input[name="flightLevel"]').val()}, ` +
`estimating ${$(form).find('input[name="nextPosition"]').val()} at ${$(form).find('input[name="nextPositionEstimate"]').val()}, `+
`${$(form).find('input[name="positionThereafter"]').val()} next`
$("#results").html(transcript);
}
});
});
</script>
<!-- Theme JS Files -->
<script src="./assets/js/core/popper.min.js" type="text/javascript"></script>
<script src="./assets/js/core/bootstrap.min.js" type="text/javascript"></script>
<script src="./assets/js/plugins/perfect-scrollbar.min.js"></script>
<!-- Plugin for TypedJS, full documentation here: https://github.com/mattboldt/typed.js/ -->
<script src="./assets/js/plugins/typedjs.js"></script>
<!-- Plugin for TypedJS, full documentation here: https://github.com/inorganik/CountUp.js -->
<script src="./assets/js/plugins/countup.min.js"></script>
<!-- Plugin for Parallax, full documentation here: https://github.com/dixonandmoe/rellax -->
<script src="./assets/js/plugins/rellax.min.js"></script>
<!-- Plugin for TiltJS, full documentation here: https://gijsroge.github.io/tilt.js/ -->
<script src="./assets/js/plugins/tilt.min.js"></script>
<!-- Plugin for Selectpicker - ChoicesJS, full documentation here: https://github.com/jshjohnson/Choices -->
<script src="./assets/js/plugins/choices.min.js"></script>
<!-- Plugin for Parallax, full documentation here: https://github.com/wagerfield/parallax -->
<script src="./assets/js/plugins/parallax.min.js"></script>
<!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
<script src="./assets/js/plugins/nouislider.min.js" type="text/javascript"></script>
<!-- Plugin for the GlideJS Carousel, full documentation here: http://kenwheeler.github.io/slick/ -->
<script src="./assets/js/plugins/glidejs.min.js" type="text/javascript"></script>
<!-- Plugin for the blob animation -->
<script src="./assets/js/plugins/anime.min.js" type="text/javascript"></script>
<!-- Chart JS -->
<script src="./assets/js/plugins/chartjs.min.js"></script>
<!-- Control Center foe Now UI Design System: parallax effects, scripts for the example pages etc -->
<!-- Google Maps Plugin -->
<!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDTTfWur0PDbZWPr7Pmq8K3jiDp0_xUziI"></script> -->
<script src="./assets/js/now-design-system-pro.min.js?v=2.1.0" type="text/javascript"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment