From 261fe27b2e1d82759275ac995245ae7d6e9b4ccc Mon Sep 17 00:00:00 2001
From: TwinProduction <twin@twinnation.org>
Date: Fri, 2 Oct 2020 12:08:52 -0400
Subject: [PATCH] Move refresh interval to bottom left corner instead + Use
 icon + Minor improvements

---
 static/index.html | 63 +++++++++++++++++++++++++----------------------
 1 file changed, 34 insertions(+), 29 deletions(-)
diff --git a/static/index.html b/static/index.html
index fcb46905..89c0ffc6 100644
--- a/static/index.html
+++ b/static/index.html
@@ -90,6 +90,15 @@
 		#social img:hover {
 			opacity: 1;
 		}
+		#settings {
+            position: fixed;
+			left: 5px;
+			bottom: 5px;
+			padding: 5px;
+		}
+        #settings select:focus {
+            box-shadow: none;
+        }
 	</style>
 </head>
 <body>
@@ -104,19 +113,6 @@
 				</div>
 			</div>
 		</div>
-		<div class="mb-2">
-			<div class="row flex-row-reverse">
-				<div class="col-2">
-					<div class="input-group mb-3">
-					  <select class="custom-select" id="refreshRate">
-					  </select>
-					  <div class="input-group-append">
-					    <label class="input-group-text" for="refreshRate">Seconds</label>
-					  </div>
-					</div>
-				</div>
-			</div>
-		</div>
 		<div id="results"></div>
 	</div>
 
@@ -141,10 +137,26 @@
 		</a>
 	</div>
 
+	<div id="settings">
+		<div class="input-group input-group-sm">
+			<div class="input-group-prepend">
+				<div class="input-group-text">&#x21bb;</div>
+			</div>
+			<select class="form-control form-control-sm" id="refresh-rate">
+				<option value="10">10s</option>
+				<option value="30" selected>30s</option>
+				<option value="60">1m</option>
+				<option value="120">2m</option>
+				<option value="300">5m</option>
+				<option value="600">10m</option>
+			</select>
+		</div>
+	</div>
+
 	<script>
 		let serviceStatuses = {};
 		let timerHandler = 0;
-		let refreshInterval = 0;
+		let refreshIntervalHandler = 0;
 		let userClickedStatus = false;
 
 		function showTooltip(serviceName, index, element) {
@@ -305,26 +317,19 @@
 				.replace(/'/g, '&apos;');
 		}
 
-		function setRefreshInterval(i) {
+		function setRefreshInterval(seconds) {
 			refreshResults();
-			refreshInterval = setInterval(function() {
+			refreshIntervalHandler = setInterval(function() {
 				refreshResults();
-			}, i)
+			}, seconds * 1000)
 		}
 
-		$("#refreshRate").change(function() {			
-			clearInterval(refreshInterval);
-			setRefreshInterval($(this).val() * 1000)
+		$("#refresh-rate").change(function() {
+			clearInterval(refreshIntervalHandler);
+			setRefreshInterval($(this).val())
 		});
-
-		for (var i = 5; i <= 600; i++) {
-			if (i%5 == 0) {
-				$("#refreshRate").append(new Option(i, i));
-			}
-		}
-		$("#refreshRate").val(30);
-
-		setRefreshInterval(30000)
+		setRefreshInterval(30);
+		$("#refresh-rate").val(30);
 	</script>
 </body>
 </html>
