vpn-p2p/nodejs/views/hosts.ejs

<%- include('top') %>
<script id="rowTemplate" type="text/html">
	<tr action="api" class="<<fresh>>">
		<input type="hidden" name="host" value="<< host >>" />
		<td><a target="_blank" href="http://<<host>>"><<host>></a></td>
		<td><<ip>></td>
		<td class="hidden-xs"><<date>></td>
		<td>
			<button type="button" data-host="<< host >>" onclick="editHost(this);" class="btn btn-sm btn-default">Edit</button>
			<button type="button" onclick="formAJAX(this, true)" class="btn btn-sm btn-default">Delete</button>
		</td>
	</tr>
</script>
<script type="text/javascript">
	var currentEditHost;

	function editHost(btn){
		var btn = $(btn);
		currentEditHost = btn.data('host');
		$('.editWindow').slideDown('fast');
		$('.editWindow .panel-body').slideDown('fast');
		$('.editWindow .panel-title .pull-left').html("Edit "+btn.data('host'))

		$('div.editWindow .panel-body span').html($('#addHost').html())
		$('div.editWindow .panel-body span button').remove()

		app.hosts.get(currentEditHost, function(error, data){
			console.log(data)
			$.each( data.results, function( key, val ) {

				$(".editWindow input[name='" + key + "']").val(val);
			});
		});
		// $.getJSON('api/hosts/' + btn.data('host'), function( data ) {
		// 	$("input[name='old_host']").attr('value', btn.data('host'));
		// });
	}

	function tableAJAX(actionMessage){

		$('#tableAJAX').html('').hide();
		app.util.actionMessage('')

		app.hosts.list(function(err, data){
			if(err) return app.util.actionMessage(err);	
			if(data){
				$.each(data, function( key, value ) {
					host_row = ich.rowTemplate(value);
					$('#tableAJAX').append(host_row);
				});
				$('#tableAJAX').fadeIn('slow');
			}else{
				app.util.actionMessage('No hosts...')
			}
		});
	}

	$(document).ready(function(){
		tableAJAX(); //populate the table
		setInterval(tableAJAX, 30000);

		$('#addHost').on('submit', function(){
			event.preventDefault();

			$form = $(this);
			app.util.actionMessage('')

			if($form.attr('isValid') === 'true'){
				app.hosts.add($form.serializeObject(), function(error, data){					
					app.util.actionMessage(data.message || 'Error!');
					if(!error) $form.trigger('reset');
				})
			}
		});
	});
</script>
<div class="row" style="display:none">
	<div class="col-md-4">
		<div class="panel panel-danger editWindow" style="display:none">
			<div class="panel-heading">
				<div class="panel-title">
					<div class="pull-left">Edit $host!</div>
					&nbsp;
					<div class="pull-right">
						<label class="glyphicon glyphicon-circle-arrow-down"></label>
						<label class="glyphicon glyphicon-remove-circle"></label>
					</div>
				</div>
			</div>
			<div class="panel-body">
				<form action="api" evalAJAX="$('div.editWindow').slideUp();currentEditHost = null;">
					<span></span>
					<button type="button" class="btn btn-danger">Update</button>
					<button class="btn btn-link" type="reset">Cancel</button>
				</form>
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-heading">
				<div class="panel-title">
					Add New Proxy
					<div class="pull-right">
						<label class="glyphicon glyphicon-circle-arrow-down panel-toggle"></label>
					</div>
				</div>
			</div>
			<div class="panel-body">
				<form id="addHost" onsubmit="$(this).validate()">
					
					<div class="form-group">
						<label class="control-label">Incoming SSL</label>
						<div class="radio">
							<label>
								<input type="radio" name="forceSSL" id="forceSSL1" value="true" checked>
								Force incoming connections over HTTPS <b>Recommended</b>
							</label>
						</div>
						<div class="radio">
							<label>
								<input type="radio" name="forceSSL" id="forceSSL2" value="false">
								Allow use of both HTTP and HTTPS
							</label>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label">Hostname</label>
						<input type="text" name="host" class="form-control" placeholder="ex: proxy.cloud-ops.net" validate="host:3" >
					</div>

					<hr />

					<div class="form-group">
						<label class="control-label">Target IP or Host Name</label>
						<input type="text" name="ip" class="form-control" placeholder="ex: 10.10.10.10" />
					</div>

					<div class="form-group">
						<label class="control-label">Target TCP Port</label>
						<input type="number"  name="targetPort" class="form-control" value="80" min="0" max="65535" />
					</div>

					<div class="form-group">
						<label class="control-label">Target SSL</label>
						<div class="radio">
							<label>
								<input type="radio" name="targetSSL" id="targetSSL1" value="true">
								Proxt to HTTPS 
							</label>
						</div>
						<div class="radio">
							<label>
								<input type="radio" name="targetSSL" id="targetSSL2" value="false" checked>
								Proxy to HTTP <b>Recommended</b>
							</label>
						</div>
					</div>
	
					<button type="submit" class="btn btn-default">Add</button>
				</form>
			</div>
		</div>
	</div>

	<div class="col-md-8">
		<div class="panel panel-default">
			<div class="panel-heading">
				<div class="panel-title">
					Proxy List
					<div class="pull-right">
						<label class="glyphicon glyphicon-circle-arrow-down panel-toggle"></label>
						<label class="glyphicon glyphicon-refresh"></label>
					</div>
				</div>
			</div>
			<div class="panel-body" style="padding-bottom:0">
				<div class="alert alert-warning actionMessage" style="display:none">
					<!-- Message after AJAX action is preformed -->
				</div>
				<div class="table-responsive">
					<table class="table">
						<thead>
							<th>Hostname</th>
							<th>target</th>
							<th class="hidden-xs">Updated</th>
							<th>Actions</th>
						</thead>
						<tbody id="tableAJAX">
							<!-- ajax loaded table -->
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>
<%- include('bottom') %>