JSFiddle - React, Tailwind, and code Playground

by Radomír Laučík

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="row message-type">
		<div class="left-col">
			<label>Message Types:</label>
		</div>
		<div>
			<span>
				<input id="metar" name="message-type" type="checkbox" value="METAR"><label for="metar">METAR</label>
			</span>
			<span>
				<input id="sigmet" name="message-type" type="checkbox" value="SIGMET"><label for="sigmet">SIGMET</label>
			</span>
			<span>
				<input id="taf" name="message-type" type="checkbox" value="TAF"><label for="taf">TAF</label>
			</span>
		</div>
	</div>
	<div class="row airports">
		<div class="left-col">
			<label for="airports">Airports:</label>
		</div>
		<div>
			<input id="airports" type="text">
		</div>
	</div>
	<div class="row countries">
		<div class="left-col">
			<label for="countries">Countries:</label>
		</div>
		<div>
			<input id="countries" type="text">
		</div>
	</div>
	<div class="row submit">
		<div class="error"><span id="error" style="display:none"></span></div>

		<button id="submit">Create briefing</button>
	</div>
	<div id="results">
	</div>

CSS

body {
		font-family:Arial, Helvetica, sans-serif;
	}
	.row {
		width:400px;
		float: left;
		clear:both;
	}
	.row > div {
		float:left;
		height:35px;
	}
	.row > .left-col {
		width:150px;
	}
	.row > .left-col + div{
		width:250px;
	}
	.row > .left-col label {
		width:100%;
		display:block;
	}
	input[type='text'] {
		width:100%;
	}
	table, th, td {
	    border: 1px solid black;
	    border-collapse: collapse;
	    padding: 5px;
	}
	th {
		background-color:grey;
		color:white;
	}
	.error {
		color: red;
	}
	#submit {
		height:35px;
		cursor:pointer;
		float:right;
	}
	#results {
		margin-top:20px;
		width:100%;
		float:left;
	}

JavaScript

// debug data
	// $(document).ready(function() {
	// 	$("#airports").val("LKPR EGLL");
	// 	$("#countries").val("SQ");
	// 	$("#metar").prop("checked",true);
	// 	$("#sigmet").prop("checked",true);
	// 	$("#taf").prop("checked",true);
	// });

	var serviceUrl = "https://ogcie.iblsoft.com/ria/opmetquery";
	var $error = $("#error");
	var selectedReports;
	var selectedCountries;
	var selectedAirports;
	var error;

	$("#submit").click(function() { 
		$error.hide();
		$("#results").html("");
		if (validateForm()) {
			var payload = {
				"id": "query01",
				"method": "query",
				"params": [
				{
				  "id": "briefing01",
				  "reportTypes": selectedReports,
				}
				]
			};
			payload.params[0]['stations'] = selectedAirports[0] ? selectedAirports : undefined;
			payload.params[0]['countries'] = selectedCountries[0] ? selectedCountries : undefined;
			$.ajax({
				url: serviceUrl,
				type: "POST",
				dataType: "json",
				data: JSON.stringify(payload),
				success: function(data) {
					if (data.error && typeof data.error.message !== "undefined") {
						error = data.error.message;
						showError();
					} else if (data.result.length < 1) {
						error = "No results for your query. Please, try more message types.";
						showError();
					} else {
						$("#results").html(resultTable(data.result));
					}
				}
			});
		} else {
			showError();
		}
	});

	function validateForm() {
		selectedReports = $("input[name='message-type']:checked").map(function() {
      		return $(this).val();
    	}).get();
		if (selectedReports.length < 1) {
			error = "Please select at least one message type.";
			return false;
		}
		// console.log('selectedReports',selectedReports);
		selectedAirports = $("input#airports").val().split(" ");
		// console.log('airports',selectedAirports);
		selectedCountries = $("input#countries").val().split(" ");
		// console.log('countries',selectedCountries);
		if (selectedAirports.length < 1 && selectedCountries.length < 1) {
			error = "Please...