Task/ric 1076 add the tcp range counter client to the code rt samples (#63)

* A new Node.js Express Client sample is provided that sends events to the TcpRangeCounter sample.

* Removed some dependencies, removed HCL image, moved some styling to style.css, put under client-ui folder.

* Updates to the TcpRangeCounter and TcpRangeCounter_Client README.md files.

* The index.ejs prompts the user for hostname & port which is used by the index.js file to remove the hardcoding of hostname & port.  The README.md was updated.

Author: Mary ellen Kerr

art-samples/TcpRangeCounter/README.md

@@ -25,4 +25,6 @@ where <arg> is one of:
    -min <int> : Set min of range
    -delta <int> : Set delta (positive to count up, negative to count down)
    -resume : Resume counting
-```
+```
+
+Alternatively, the sample includes a web application which also uses the [rt-test-probe] utility for making TCP requests. The link to the README for using this web application is [TcpRangeCounter_Client README](client-ui\README.md).

art-samples/TcpRangeCounter/client-ui/README.md

@@ -1,19 +1,17 @@
 # TcpRangeCounter Client
 
-This Node.js Express sample client works with the TcpRangeCounter sample by sending events to the TcpRangeCounter sample.  The TcpRangeCounter sample implements a counter that starts at a min value and increments until it reaches a max value.  It embeds a TCP server which allows it to be dynamically configured by means of sending TCP requests.  These requests corresponds to the events of the Events protocol:
+This TcpRangeCounter_Client works with the TcpRangeCounter sample by sending the following events to the TcpRangeCounter sample. 
+- setMin: Sets the min value of the range (default 0).
+- setMax: Sets the max value of the range (default 10).
+- setDelta: Sets the delta by which the counter increments in each step (default 1; Use a negative value to count down instead of up).
+- resumeCounting: Resume the counter when it has stopped.
+
+The instructions to run this TcpRangeCounter_Client are as follows:
+- Build and start the TcpRangeCounter sample by following the directions in its README file.
+- Start this client sample by entering 'npm install' and then 'npm start' in a terminal session. The TcpRangeCounter_Client listens on port 3000.
+- Invoke the TcpRangeCounter_Client in a web browser at http://localhost:3000/.
+    - Select the Event type and enter its Argument to send the event to the TcpRangeCounter sample.
+    - Enter the Hostname or IP address that the TcpRangeCounter sample is running on.
+    - Enter the Port that the TcpRangeCounter sample is listening on.
+    - Click the Submit button.
 
-* setMin: Sets the min value of the range (default 0).
-
-* setMax: Sets the max value of the range (default 10).
-
-* setDelta: Sets the delta by which the counter increments in each step (default 1; Use a negative value to count down instead of up).
-
-* resumeCounting: Resume the counter when it has stopped.
-
-The following are instructions to run this sample client.
-
-* Build and start the TcpRangeCounter sample by following the directions in its README file.
-
-* Start this sample client by entering 'npm install' and then 'npm start' in a terminal session.  The client listens on port 3000.
-
-* Invoke the sample client in a web browser at http://localhost:3000/.

art-samples/TcpRangeCounter/client-ui/public/stylesheets/style.css

@@ -29,12 +29,11 @@ a {
 }
 
 hr.lightgrey {
-  border: 3px solid lightgrey;
+  border: 1px solid lightgrey;
 }
 
-hr.lightgreen {
-  border: 3px solid #e6fff7;
-}
+
+
 
 
 

art-samples/TcpRangeCounter/client-ui/routes/index.js

@@ -1,16 +1,21 @@
 var express = require('express');
 var router = express.Router();
-const testProbe = require ('rt-test-probe')('localhost', 12345);
-	
+
 function sendEvent(data, fn) {
 
 	console.log("Entered the sendEvent function");
 
 	var eventType = data.eventType;
 	var arg = data.arg;
+	var hostname = data.hostname;
+	var port = data.port;
 
 	console.log("Event Type = " + eventType);
 	console.log("Argument = " + arg);
+	console.log("Hostname = " + hostname);
+	console.log("Port = " + port);
+
+	const testProbe = require ('rt-test-probe')(hostname, port);
 
 	let success = false;
 
@@ -49,8 +54,8 @@ router.post('/sendEvent', function(req, res) {
 	console.log("JSON.stringify(req.body) = " + JSON.stringify(req.body));
 	if (req.body != undefined) {		
 		sendEvent(req.body, function(err, data) 
-				{  res.render('status', { title: 'Range Counter Client', data: data }); });
-	}	
-});
+			{  res.render('status', { title: 'Range Counter Client', data: data }); });
+	}
+});	
 
 module.exports = router; 

art-samples/TcpRangeCounter/client-ui/views/index.ejs

@@ -5,21 +5,27 @@
 <link rel="stylesheet" href="stylesheets/style.css"/>  
 </head>
   <body>
-	<hr class="lightgrey"></hr>
+	<hr class = "lightgrey" />
 	<h1>TcpRangeCounter Client</h1>
 	<section id="inputSection">
 		<form method=post action=sendEvent>
-			<H3>Select the Event Type</H3>
+		</br></br>
+			<label>Select the Event Type:</label>
 				<select id=selection name = "eventType">
 	  				<option value="max">max</option>
 	  				<option value="min">min</option>
 	  				<option value="delta">delta</option>
 	  				<option value="resume">resume</option>
-				</select>
-			<H3>Enter the Argument associated with the selected Event</H3>
-				<input id=arg type="number" name="arg" size="10" required/>	      	
-			   	<br><br>
-			   	<input type=submit value='submit' name=submit>
+				</select></br></br>
+			<label>Enter the Argument associated with the selected Event:</label>
+				<input id=arg type="number" name="arg" size="10" required/></br></br>
+			<hr class = "lightgrey" />
+			<label>Enter the Hostname that the RangeCounter is running on:</label> 
+				<input id=hostname type="text" name="hostname" size="20" value = "127.0.0.1" required/></br></br>	
+			<label>Enter the Port that the RangeCounter is listening on:</label> 
+				<input id=port type="number" name="port" size="10" value = "12345" required/></br></br>  
+			<hr class = "lightgrey" />	
+			<input type=submit value='submit' name=submit>
 		</form>			
 		<ul>
 			<li>This sample implements a counter that starts at a min value and increments until it reaches a max value.</li>