Implement adding model by name in the webinterface like in the JavaFX

GUI

server/src/main/java/ctbrec/recorder/server/RecorderServlet.java

@@ -8,6 +8,7 @@ import java.security.NoSuchAlgorithmException;
 import java.time.Instant;
 import java.util.Iterator;
 import java.util.List;
+import java.util.Objects;
 
 import javax.servlet.ServletException;
 import javax.servlet.http.HttpServletRequest;
@@ -77,6 +78,12 @@ public class RecorderServlet extends AbstractCtbrecServlet {
                     response = "{\"status\": \"success\", \"msg\": \"Recording started\"}";
                     resp.getWriter().write(response);
                     break;
+                case "startByName":
+                    LOG.debug("Starting recording for model {}", request.model.getUrl());
+                    startByName(request);
+                    response = "{\"status\": \"success\", \"msg\": \"Recording started\"}";
+                    resp.getWriter().write(response);
+                    break;
                 case "stop":
                     new Thread(() -> {
                         try {
@@ -223,6 +230,20 @@ public class RecorderServlet extends AbstractCtbrecServlet {
         throw new IllegalArgumentException("No site found to record " + url);
     }
 
+    private void startByName(Request request) throws InvalidKeyException, NoSuchAlgorithmException, IOException {
+        String[] input = request.model.getUrl().split(":");
+        String siteName = input[0];
+        String modelName = input[1];
+        for (Site site : sites) {
+            if (Objects.equals(siteName.toLowerCase(), site.getClass().getSimpleName().toLowerCase())) {
+                Model m = site.createModel(modelName);
+                recorder.startRecording(m);
+                return;
+            }
+        }
+        throw new IllegalArgumentException("No site found to record " + request.model.getUrl());
+    }
+
     private static class Request {
         public String action;
         public Model model;

server/src/main/resources/html/static/index.html

@@ -77,13 +77,13 @@
     <div id="alert-container"></div>
 
 	<div class="tab-content" id="myTabContent">
-		<section id="models" class="tab-pane fade" role="tabpanel" aria-labelledby="models-tab">
+		<section id="models" class="tab-pane fade active show" role="tabpanel" aria-labelledby="models-tab">
 			<div class="container">
 				<div class="row">
 					<div class="col-lg-10 mx-auto">
 						<div class="form-group">
 						    <label for="addModelByUrl">Add Model</label>
-				    		<input type="text" class="form-control" id="addModelByUrl" placeholder="URL"
+				    		<input type="text" class="form-control" id="addModelByUrl" placeholder="e.g. MyFreeCams:ModelName or an URL like https://chaturbate.com/modelname/"
 				    			onKeyUp="addModelKeyPressed(event)">
 				 		</div>
 			 		</div>
@@ -172,7 +172,7 @@
 				</div>
 			</div>
 		</section>
-		<section id="configuration" class="tab-pane fade active show" role="tabpanel" aria-labelledby="configuration-tab">
+		<section id="configuration" class="tab-pane fade" role="tabpanel" aria-labelledby="configuration-tab">
 			<div class="container">
 				<form data-bind="submit: saveConfig">
 				<div class="row">
@@ -254,35 +254,41 @@
 			text: ko.observable('')
 		};
 		let hmac;
-		
+
 		function addModelKeyPressed(e) {
 			let charCode = (typeof e.which === "number") ? e.which : e.keyCode;
-			if(charCode === 13) {
+			let val = $('#addModelByUrl').val();
-				let url = $('#addModelByUrl').val();
+			if (charCode === 13) {
-				ctbrec.add(url, function() {
+				ctbrec.add(val, function() {
 					$('#addModelByUrl').val('');
 				});
+			} else {
+			    $('#addModelByUrl').autocomplete({
+			        source: ["BongaCams:", "Cam4:", "Camsoda:", "Chaturbate:", "Fc2Live:", "Flirt4Free:", "LiveJasmin:", "MyFreeCams:", "Showup:", "Streamate:", "Stripchat:"]
+			    });		    
 			}
 		}
 		
 		let ctbrec = {
-			add: function(modelUrl, onsuccess) {
+			add: function(input, onsuccess) {
 				try {
 					let model = {
 						type: null,
 						name: '',
-						url: modelUrl	
+						url: input	
 					};
+					
 					if(console) console.log(model);
-					let action = '{"action": "startByUrl", "model": ' + JSON.stringify(model) + '}';
+					let action = input.startsWith('http') ? 'startByUrl' : 'startByName'; 
+					let msg = '{"action": "' + action + '", "model": ' + JSON.stringify(model) + '}';
 					$.ajax({
 						type : 'POST',
 						url : '../rec',
 						dataType : 'json',
 						async : true,
 						timeout : 60000,
-						headers : {'CTBREC-HMAC': CryptoJS.HmacSHA256(action, hmac)},
+						headers : {'CTBREC-HMAC': CryptoJS.HmacSHA256(msg, hmac)},
-						data : action
+						data : msg
 					})
 					.done(function(data) {
 						if (data.status === 'success') {