From c71c39b0d709de9ec09ca3317b3dda1c954013ef Mon Sep 17 00:00:00 2001
From: Eric Tran <eric.tran@flightaware.com>
Date: Fri, 28 Feb 2020 20:54:22 +0000
Subject: [PATCH] Customizable range rings UI

---
 public_html/index.html | 20 ++++++++++++++++++++
 public_html/style.css  | 15 +++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/public_html/index.html b/public_html/index.html
index 2c5aad8..65e1abc 100644
--- a/public_html/index.html
+++ b/public_html/index.html
@@ -150,6 +150,26 @@
 						<div class="settingsText">Group by Data Type</div>
 					</div>
 				</div>
+				<div class="settingsOptionContainer">
+					<div class="infoBlockTitleText">Range Rings</div>
+				</div>
+				<form id="range_ring_form">
+					<div class="rangeOptions">
+						<label><span class="infoBlockTitleText">Ring Count: </span></label>
+						<input id="range_ring_count" name="ringCount" type="text" class="rangeRingsInput" maxlength="1">
+					</div>
+					<div class="rangeOptions">
+						<label><span class="infoBlockTitleText">Base Distance: </span></label>
+						<input id="range_ring_base" name="baseRing" type="text" class="rangeRingsInput" maxlength="3">
+					</div>
+					<div class="rangeOptions">
+						<label><span class="infoBlockTitleText">Distance Interval:</span></label>
+						<input id="range_ring_interval" name="ringInterval" type="text" class="rangeRingsInput" maxlength="3">
+					</div>
+					<div class="set_range_rings_button">
+						<button id="set_range_rings_button" type="button">Set Range Rings</button>
+					</div>
+				</form>
 			</div>
 
 			<div id="map_container">
diff --git a/public_html/style.css b/public_html/style.css
index 6f3e020..0a3481d 100644
--- a/public_html/style.css
+++ b/public_html/style.css
@@ -260,6 +260,21 @@ div#loader { z-index: 99; position: absolute; left: 0; top: 0; bottom: 0; right:
     width: 50px;
 }
 
+.rangeRingsInput {
+    width: 30px;
+    float: right;
+}
+
+.rangeOptions {
+	width: 170px;
+	padding-bottom: 5px;
+	text-indent: 10px;
+}
+
+.set_range_rings_button {
+	padding-top: 5px;
+}
+
 select.error, textarea.error, input.error {
     color: #FF0000;
 }