Merge remote-tracking branch 'origin/master'

FRCTeam4855 · Mar 11, 2020 · 180ee82 · 180ee82
2 parents 6783352 + ffbbd98
commit 180ee82
Show file tree

Hide file tree

Showing 7 changed files with 311 additions and 12 deletions.
diff --git a/data/styles.css b/data/styles.css
@@ -289,6 +289,28 @@ h2 a {
 input {
 	border: 1px solid #353535;
 }
+/* Searchable dropdown styles */
+.choices {
+	margin: 6px;
+	margin-bottom: -10px !important;
+	width: 300px;
+	height: 24px;
+	border: 1px solid #353535;
+	display: inline-block;
+}
+.choices__inner {
+	padding-top: 3.5px;
+	min-height: 0px;
+	width: 283px;
+	border-radius: 0px;
+}
+.choices__list--single {
+	padding: 0px;
+}
+.choices__list--dropdown .choices__item--selectable {
+	padding-right: 0px;
+}
+
 #scout {
 	padding: 12px 24px;
 	margin: 0 8%;

diff --git a/interface/scout_form.html b/interface/scout_form.html
@@ -4,7 +4,10 @@
 		<meta charset="utf-8">
 		<title>New Report :: 4855 Scouting</title>
 		<script type="text/javascript"></script>
+		<link href="../script/choices-library/styles/choices.min.css" rel="stylesheet">
 		<link href="../data/styles.css" rel="stylesheet" type="text/css">
+		<!-- Include choices library -->
+		<script type="text/javascript" src="../script/choices-library/scripts/choices.min.js"></script>
 	</head>
 	<body onload="pick_button(); climbInputDisabling(); defenseInputDisabling();">
 		<h1>NEW SCOUTING REPORT</h1>
@@ -32,10 +35,11 @@ <h1>NEW SCOUTING REPORT</h1>
 				<input id="inTeamno" name="teamno" autocomplete="off" required onInput="append_team_name()"><br>
 				<label for="matchno" style="clear: both;">Qualification Match #</label><input id="inMatchno" autocomplete="off" name="matchno" required><br>
 				<div class="tooltip">
-					<span class="tooltiptext">An event key is a unique ID that APIs like The Blue Alliance use to identify events. You can usually find it at the end of a TBA URL (i.e. 2020week0 is the week 0 event for 2020)</span>
-					<label for="eventkey">Event Key</label>
+					<span class="tooltiptext">Pick the event that the match occurred at. If this field is grayed out, then it has already been pre-selected.</span>
+					<label for="eventkey">Event Name</label>
 				</div>
-				<input id="inEventkey" autocomplete="off" required name="eventkey"><br>
+				<select required class="form-control" name="inEventkey" id="inEventkey"></select>
+				<br>
 			</fieldset>
 
 			<fieldset>
@@ -165,14 +169,23 @@ <h3 class="fieldsetHead">Miscellaneous</h3>
 		<script type="text/javascript" src="../script/get_team_name.js"></script>
 		<script type="text/javascript" src="../script/submit_report.js"></script>
 		<script type="text/javascript" src="../script/get_version.js"></script>
+		<script type="text/javascript" src="../script/get_event_keys.js"></script>
 		<script>
 			function pick_button() {
 				if (localStorage.source == "master") document.getElementById("cancelButton").href = "master_main.html";
 			}
 
+			// Initialize event key select box
+			const choices = new Choices(document.getElementById("inEventkey"), {
+				itemSelectText: ""
+			});
+			choices.setChoices(get_all_event_names().map(name => {
+				return { value: ALL_EVENT_KEYS[name], label: name };
+			}), "value", "label");
+
 			if (localStorage.source == "scout") {
-				if (default_event_key != "") document.getElementById("inEventkey").value = default_event_key;
-				if (!allow_event_key_edits) document.getElementById("inEventkey").disabled = true;
+				if (default_event_key != "") choices.setChoiceByValue(default_event_key);
+				if (!allow_event_key_edits) choices.disable();
 			} else if (localStorage.source == "edit") {
 				// Prefill form inputs with edit data and remove button to go to other form type
 				document.getElementById("switchFormButton").style.display = "none";
@@ -188,7 +201,7 @@ <h3 class="fieldsetHead">Miscellaneous</h3>
 				document.getElementById("inTeamno").value = form.teamno;
 				document.getElementById("inTeamno").disabled = true;
 				document.getElementById("inMatchno").value = form.matchno;
-				document.getElementById("inEventkey").value = form.eventkey;
+				choices.setChoiceByValue(form.eventkey);
 				document.getElementById("inAutocross").checked = form.autocross == "1";
 				document.getElementById("inAutolow").value = form.autolow;
 				document.getElementById("inAutohigh").value = form.autohigh;

diff --git a/interface/verbal_form.html b/interface/verbal_form.html
@@ -4,7 +4,10 @@
 		<meta charset="utf-8">
 		<title>New Verbal Report :: 4855 Scouting</title>
 		<script type="text/javascript"></script>
+		<link href="../script/choices-library/styles/choices.min.css" rel="stylesheet">
 		<link href="../data/styles.css" rel="stylesheet" type="text/css">
+		<!-- Include choices library -->
+		<script type="text/javascript" src="../script/choices-library/scripts/choices.min.js"></script>
 	</head>
 	<body onload="pick_button()">
 		<h1>NEW VERBAL REPORT</h1>
@@ -30,10 +33,10 @@ <h1>NEW VERBAL REPORT</h1>
 				</div>
 				<input id="inTeamno" name="teamno" autocomplete="off" required onInput="append_team_name()"><br>
 				<div class="tooltip">
-					<span class="tooltiptext">An event key is a unique ID that APIs like The Blue Alliance use to identify events. You can usually find it at the end of a TBA URL (i.e. 2020week0 is the week 0 event)</span>
-					<label for="eventkey">Event Key</label>
+					<span class="tooltiptext">Pick the event that this data was gathered at. If this field is grayed out, then it has already been pre-selected.</span>
+					<label for="eventkey">Event Name</label>
 				</div>
-				<input id="inEventkey" autocomplete="off" required name="eventkey"><br>
+				<select required class="form-control" name="inEventkey" id="inEventkey"></select>
 			</fieldset>
 
 			<fieldset>
@@ -88,14 +91,23 @@ <h3 class="fieldsetHead">Miscellaneous</h3>
 		<script type="text/javascript" src="../script/get_team_name.js"></script>
 		<script type="text/javascript" src="../script/submit_report.js"></script>
 		<script type="text/javascript" src="../script/get_version.js"></script>
+		<script type="text/javascript" src="../script/get_event_keys.js"></script>
 		<script>
 			function pick_button() {
 				if (localStorage.source == "master") document.getElementById("cancelButton").href = "master_main.html";
 			}
 
+			// Initialize event key select box
+			const choices = new Choices(document.getElementById("inEventkey"), {
+				itemSelectText: ""
+			});
+			choices.setChoices(get_all_event_names().map(name => {
+				return { value: ALL_EVENT_KEYS[name], label: name };
+			}), "value", "label");
+
 			if (localStorage.source == "scout") {
-				if (default_event_key != "") document.getElementById("inEventkey").value = default_event_key;
-				if (!allow_event_key_edits) document.getElementById("inEventkey").disabled = true;
+				if (default_event_key != "") choices.setChoiceByValue(default_event_key);
+				if (!allow_event_key_edits) choices.disable();
 			} else if (localStorage.source == "edit") {
 				// Prefill form inputs with edit data and remove button to go to other form type
 				document.getElementById("switchFormButton").style.display = "none";
@@ -110,7 +122,7 @@ <h3 class="fieldsetHead">Miscellaneous</h3>
 				document.getElementById("inName").value = form.name;
 				document.getElementById("inTeamno").value = form.teamno;
 				document.getElementById("inTeamno").disabled = true;
-				document.getElementById("inEventkey").value = form.eventkey;
+				choices.setChoiceByValue(form.eventkey);
 				document.getElementById("inDrivetrain").value = form.drivetrain;
 				document.getElementById("inWeight").value = form.weight;
 				document.getElementById("inDefense").value = form.defense;

diff --git a/script/choices-library/scripts/.eslintrc.js b/script/choices-library/scripts/.eslintrc.js
@@ -0,0 +1,27 @@
+// get polyfill settings from top level config
+// @ts-ignore
+const { settings } = require('../../../.eslintrc.json');
+
+// Adding non-polyfilable Symbol-related functions as they are most probably
+// behind the flag
+
+settings.polyfills.push(
+  'Symbol.toStringTag',
+  'Symbol.for',
+  'Object.getOwnPropertySymbols',
+  'Object.getOwnPropertyDescriptors',
+  'Promise', // Promise is gate checked
+);
+
+module.exports = /** @type {import('eslint').Linter.Config} */ ({
+  root: true,
+  extends: ['plugin:compat/recommended'],
+  parserOptions: {
+    // ensure that it's compatible with ES5 browsers, so, no `const`, etc
+    ecmaVersion: 5,
+  },
+  env: {
+    browser: true,
+  },
+  settings,
+});
diff --git a/script/choices-library/scripts/choices.min.js b/script/choices-library/scripts/choices.min.js
diff --git a/script/choices-library/styles/choices.min.css b/script/choices-library/styles/choices.min.css