Merge pull request #271 from one-some/ui2-better-clubbing

Better club importing

static/koboldai.css

@@ -2492,7 +2492,7 @@ body {
 	right: 0px;
 	height: calc(100vh - 15px);
 	width: 400px;
-	z-index: 8;
+	z-index: 99999999;
 	pointer-events: none;
 	overflow-y: hidden;
 	overflow-x: hidden;
@@ -2500,7 +2500,6 @@ body {
 }
 
 .notification {
-	z-index: 8;
 	background-color: #30414e;
 	animation: 10s 1 alternate swoosh-in;
 	margin-right: 15px;

static/koboldai.js

@@ -4902,6 +4902,7 @@ function updateTitle() {
 }
 
 function openClubImport() {
+	$el("#aidgpromptnum").value = "";
 	openPopup("aidg-import-popup");
 }
 
@@ -4924,6 +4925,12 @@ function openPopup(id) {
 
 	const popup = $el(`#${id}`);
 	popup.classList.remove("hidden");
+
+	// Sometimes we want to instantly focus on certain elements when a menu opens.
+	for (const noticeMee of popup.getElementsByClassName("focus-on-me")) {
+		noticeMee.focus();
+		break;
+	}
 }
 
 function closePopups() {
@@ -5732,4 +5739,27 @@ function deleteConfirmation(sFormatted, confirmText, denyText, confirmCallback,
 	}
 
 	openPopup("confirm-delete-dialog");
-}
+}
+
+function attemptClubLoad() {
+	const input = $el("#aidgpromptnum");
+	let val = input.value;
+	if (!/^\d+$/.test(val)) {
+		// Not an id, is it a full URL?
+		const matches = val.match(/aetherroom\.club\/([0-9]+)/)
+		if (!matches) {
+			reportError("Malformed club import", "That doesn't look like a valid club URL or ID. Please check your input and try again.");
+			return;
+		}
+		val = matches[1];
+	}
+	socket.emit("load_aidg_club", val);
+	closePopups();
+}
+
+
+$el("#aidgpromptnum").addEventListener("keydown", function(event) {
+	if (event.key !== "Enter") return;
+	attemptClubLoad();
+	event.preventDefault();
+});

templates/popups.html

@@ -122,10 +122,10 @@
 			<br/>
 			<div style="text-align: center;"><a href="https://aetherroom.club/" target="_blank" rel="noopener noreferrer">https://aetherroom.club/</a></div>
 			<br/>
-			<input autocomplete="off" class="form-control" type="text" placeholder="Prompt Number (4-digit number at the end of aetherroom.club URL)" id="aidgpromptnum">
+			<input autocomplete="off" class="form-control focus-on-me" type="text" placeholder="Prompt ID or URL" id="aidgpromptnum">
 		</div>
 		<div class="popup_load_cancel">
-			<button type="button" class="btn btn-primary popup_load_cancel_button" onclick="socket.emit('load_aidg_club', document.getElementById('aidgpromptnum').value);closePopups();">Accept</button>
+			<button type="button" class="btn btn-primary popup_load_cancel_button" onclick="attemptClubLoad();">Accept</button>
 			<button type="button" class="btn btn-primary popup_load_cancel_button" onclick="closePopups();">Cancel</button>
 		</div>
 	</div>