forked from kevinowino869/mitrobill
Router Maps
This commit is contained in:
Ibnu Maksum
@ -5,70 +5,147 @@
|
||||
<div class="col-sm-12 col-md-12">
|
||||
<div class="panel panel-primary panel-hovered panel-stacked mb30">
|
||||
<div class="panel-heading">{Lang::T('Edit Router')}</div>
|
||||
<div class="panel-body">
|
||||
<form class="form-horizontal" method="post" role="form" action="{$_url}routers/edit-post" >
|
||||
<input type="hidden" name="id" value="{$d['id']}">
|
||||
<div class="form-group">
|
||||
<label class="col-md-2 control-label">{Lang::T('Status')}</label>
|
||||
<div class="col-md-10">
|
||||
<label class="radio-inline warning">
|
||||
<input type="radio" {if $d['enabled'] == 1}checked{/if} name="enabled" value="1"> Enable
|
||||
</label>
|
||||
<label class="radio-inline">
|
||||
<input type="radio" {if $d['enabled'] == 0}checked{/if} name="enabled" value="0"> Disable
|
||||
</label>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<form class="form-horizontal" method="post" role="form" action="{$_url}routers/edit-post">
|
||||
<input type="hidden" name="id" value="{$d['id']}">
|
||||
<div class="form-group">
|
||||
<label class="col-md-2 control-label">{Lang::T('Status')}</label>
|
||||
<div class="col-md-10">
|
||||
<label class="radio-inline warning">
|
||||
<input type="radio" {if $d['enabled'] == 1}checked{/if} name="enabled" value="1"> Enable
|
||||
</label>
|
||||
<label class="radio-inline">
|
||||
<input type="radio" {if $d['enabled'] == 0}checked{/if} name="enabled" value="0">
|
||||
Disable
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-md-2 control-label">{Lang::T('Router Name / Location')}</label>
|
||||
<div class="col-md-6">
|
||||
<input type="text" class="form-control" id="name" name="name" maxlength="32" value="{$d['name']}">
|
||||
<p class="help-block">{Lang::T('Name of Area that router operated')}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-md-2 control-label">{Lang::T('Router Name / Location')}</label>
|
||||
<div class="col-md-6">
|
||||
<input type="text" class="form-control" id="name" name="name" maxlength="32"
|
||||
value="{$d['name']}">
|
||||
<p class="help-block">{Lang::T('Name of Area that router operated')}</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-md-2 control-label">{Lang::T('IP Address')}</label>
|
||||
<div class="col-md-6">
|
||||
<input type="text" placeholder="192.168.88.1:8728" class="form-control" id="ip_address" name="ip_address" value="{$d['ip_address']}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-md-2 control-label">{Lang::T('IP Address')}</label>
|
||||
<div class="col-md-6">
|
||||
<input type="text" placeholder="192.168.88.1:8728" class="form-control" id="ip_address"
|
||||
name="ip_address" value="{$d['ip_address']}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-md-2 control-label">{Lang::T('Username')}</label>
|
||||
<div class="col-md-6">
|
||||
<input type="text" class="form-control" id="username" name="username" value="{$d['username']}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-md-2 control-label">{Lang::T('Username')}</label>
|
||||
<div class="col-md-6">
|
||||
<input type="text" class="form-control" id="username" name="username"
|
||||
value="{$d['username']}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-md-2 control-label">{Lang::T('Router Secret')}</label>
|
||||
<div class="col-md-6">
|
||||
<input type="password" class="form-control" id="password" name="password" value="{$d['password']}" onmouseleave="this.type = 'password'"
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-md-2 control-label">{Lang::T('Router Secret')}</label>
|
||||
<div class="col-md-6">
|
||||
<input type="password" class="form-control" id="password" name="password"
|
||||
value="{$d['password']}" onmouseleave="this.type = 'password'"
|
||||
onmouseenter="this.type = 'text'">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-md-2 control-label">{Lang::T('Description')}</label>
|
||||
<div class="col-md-6">
|
||||
<textarea class="form-control" id="description"
|
||||
name="description">{$d['description']}</textarea>
|
||||
<p class="help-block">{Lang::T('Explain Coverage of router')}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-md-2 control-label">{Lang::T('Coordinates')}</label>
|
||||
<div class="col-md-6">
|
||||
<input name="coordinates" id="coordinates" class="form-control" value="{$d['coordinates']}"
|
||||
placeholder="6.465422, 3.406448">
|
||||
<div id="map" style="width: '100%'; height: 200px; min-height: 150px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-md-2 control-label">{Lang::T('Coverage')}</label>
|
||||
<div class="col-md-6">
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" id="coverage" name="coverage" value="{$d['coverage']}"
|
||||
onkeyup="updateCoverage()">
|
||||
<span class="input-group-addon">meter(s)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-md-2 control-label">{Lang::T('Description')}</label>
|
||||
<div class="col-md-6">
|
||||
<textarea class="form-control" id="description" name="description">{$d['description']}</textarea>
|
||||
<p class="help-block">{Lang::T('Explain Coverage of router')}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-lg-offset-2 col-lg-10">
|
||||
<button class="btn btn-primary" type="submit">{Lang::T('Save Changes')}</button>
|
||||
Or <a href="{$_url}routers/list">{Lang::T('Cancel')}</a>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-2 control-label"></label>
|
||||
<div class="col-md-6">
|
||||
<label><input type="checkbox" checked name="testIt" value="yes"> Test Connection</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-lg-offset-2 col-lg-10">
|
||||
<button class="btn btn-primary" type="submit">{Lang::T('Save Changes')}</button>
|
||||
Or <a href="{$_url}routers/list">{Lang::T('Cancel')}</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{include file="sections/footer.tpl"}
|
||||
{literal}
|
||||
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
|
||||
<script>
|
||||
var circle;
|
||||
function getLocation() {
|
||||
if (window.location.protocol == "https:" && navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition(showPosition);
|
||||
} else {
|
||||
setupMap(51.505, -0.09);
|
||||
}
|
||||
}
|
||||
|
||||
function showPosition(position) {
|
||||
setupMap(position.coords.latitude, position.coords.longitude);
|
||||
}
|
||||
|
||||
function updateCoverage() {
|
||||
if(circle != undefined){
|
||||
circle.setRadius($("#coverage").val());
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function setupMap(lat, lon) {
|
||||
var map = L.map('map').setView([lat, lon], 13);
|
||||
L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/light_all/{z}/{x}/{y}.png', {
|
||||
attribution:
|
||||
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
|
||||
subdomains: 'abcd',
|
||||
maxZoom: 20
|
||||
}).addTo(map);
|
||||
circle = L.circle([lat, lon], 5, {
|
||||
color: 'blue',
|
||||
fillOpacity: 0.1
|
||||
}).addTo(map);
|
||||
var marker = L.marker([lat, lon]).addTo(map);
|
||||
map.on('click', function(e) {
|
||||
var coord = e.latlng;
|
||||
var lat = coord.lat;
|
||||
var lng = coord.lng;
|
||||
newLatLng = new L.LatLng(lat, lng);
|
||||
marker.setLatLng(newLatLng);
|
||||
circle.setLatLng(newLatLng);
|
||||
$('#coordinates').val(lat + ',' + lng);
|
||||
updateCoverage();
|
||||
});
|
||||
updateCoverage();
|
||||
}
|
||||
window.onload = function() {
|
||||
{/literal}
|
||||
{if $d['coordinates']}
|
||||
setupMap({$d['coordinates']});
|
||||
{else}
|
||||
getLocation();
|
||||
{/if}
|
||||
{literal}
|
||||
}
|
||||
</script>
|
||||
{/literal}
|
||||
{include file="sections/footer.tpl"}
|
||||
84
ui/ui/routers-maps.tpl
Normal file
84
ui/ui/routers-maps.tpl
Normal file
@ -0,0 +1,84 @@
|
||||
{include file="sections/header.tpl"}
|
||||
|
||||
|
||||
<form id="site-search" method="post" action="{$_url}routers/maps">
|
||||
<input type="hidden" name="_route" value="routers/maps">
|
||||
<div class="input-group">
|
||||
<div class="input-group-addon">
|
||||
<span class="fa fa-search"></span>
|
||||
</div>
|
||||
<input type="text" name="name" class="form-control" value="{$name}"
|
||||
placeholder="{Lang::T('Search')}...">
|
||||
<div class="input-group-btn">
|
||||
<button class="btn btn-success" type="submit">{Lang::T('Search')}</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Map container div -->
|
||||
<div id="map" class="well" style="width: '100%'; height: 70vh; margin: 20px auto"></div>
|
||||
|
||||
{include file="pagination.tpl"}
|
||||
|
||||
{literal}
|
||||
<script>
|
||||
function getLocation() {
|
||||
if (window.location.protocol == "https:" && navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition(showPosition);
|
||||
} else {
|
||||
setupMap(51.505, -0.09);
|
||||
}
|
||||
}
|
||||
|
||||
function showPosition(position) {
|
||||
setupMap(position.coords.latitude, position.coords.longitude);
|
||||
}
|
||||
|
||||
function setupMap(lat, lon) {
|
||||
var map = L.map('map').setView([lat, lon], 9);
|
||||
var group = L.featureGroup().addTo(map);
|
||||
|
||||
var routers = {/literal}{$d|json_encode}{literal};
|
||||
|
||||
L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/light_all/{z}/{x}/{y}.png', {
|
||||
attribution:
|
||||
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
|
||||
subdomains: 'abcd',
|
||||
maxZoom: 20
|
||||
}).addTo(map);
|
||||
|
||||
routers.forEach(function(router) {
|
||||
var name = router.name;
|
||||
var info = router.description;
|
||||
var coordinates = router.coordinates;
|
||||
console.log(coordinates.split(","))
|
||||
// Create a popup for the marker
|
||||
var popupContent = "<strong>Name</strong>: " + name + "<br>" +
|
||||
"<strong>Info</strong>: " + info + "<br>"
|
||||
"<a href='{/literal}{$_url}{literal}routers/edit/"+ router.id +"'>More Info</a> • " +
|
||||
"<a href='https://www.google.com/maps/dir//" + coordinates + "' target='maps'>Get Direction</a><br>";
|
||||
|
||||
// Add marker to map
|
||||
if(router.enabled == 1){
|
||||
var circle = L.circle(coordinates.split(","), router.coverage*1, {
|
||||
color: 'blue',
|
||||
fillOpacity: 0.1
|
||||
}).addTo(map);
|
||||
}else{
|
||||
var circle = L.circle(coordinates.split(","), router.coverage*1, {
|
||||
color: 'red',
|
||||
fillOpacity: 0.1
|
||||
}).addTo(map);
|
||||
}
|
||||
var marker = L.marker(coordinates.split(",")).addTo(group);
|
||||
marker.bindTooltip(name, { permanent: true }).bindPopup(popupContent);
|
||||
});
|
||||
|
||||
map.fitBounds(group.getBounds());
|
||||
}
|
||||
window.onload = function() {
|
||||
getLocation();
|
||||
}
|
||||
</script>
|
||||
{/literal}
|
||||
{include file="sections/footer.tpl"}
|
||||
@ -4,7 +4,12 @@
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="panel panel-hovered mb20 panel-primary">
|
||||
<div class="panel-heading">{Lang::T('Routers')}</div>
|
||||
<div class="panel-heading">{Lang::T('Routers')}
|
||||
<div class="btn-group pull-right">
|
||||
<a class="btn btn-primary btn-xs" title="save" href="{$_url}routers/maps">
|
||||
<span class="glyphicon glyphicon-map-marker"></span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="md-whiteframe-z1 mb20 text-center" style="padding: 15px">
|
||||
<div class="col-md-8">
|
||||
@ -43,7 +48,13 @@
|
||||
<tbody>
|
||||
{foreach $d as $ds}
|
||||
<tr {if $ds['enabled'] != 1}class="danger" title="disabled" {/if}>
|
||||
<td>{$ds['name']}</td>
|
||||
<td>
|
||||
{if $ds['coordinates']}
|
||||
<a href="https://www.google.com/maps/dir//{$ds['coordinates']}/" target="_blank"
|
||||
class="btn btn-default btn-xs" title="{$ds['coordinates']}"><i
|
||||
class="glyphicon glyphicon-map-marker"></i></a>
|
||||
{/if}
|
||||
{$ds['name']}</td>
|
||||
<td>{$ds['ip_address']}</td>
|
||||
<td>{$ds['username']}</td>
|
||||
<td>{$ds['description']}</td>
|
||||
|
||||
@ -427,10 +427,12 @@
|
||||
</span>
|
||||
</a>
|
||||
<ul class="treeview-menu">
|
||||
<li {if $_routes[0] eq 'routers' and $_routes[1] eq 'list' }class="active" {/if}><a
|
||||
href="{$_url}routers/list">{Lang::T('Routers')}</a></li>
|
||||
<li {if $_routes[0] eq 'routers' and $_routes[1] eq '' }class="active" {/if}><a
|
||||
href="{$_url}routers">{Lang::T('Routers')}</a></li>
|
||||
<li {if $_routes[0] eq 'pool' and $_routes[1] eq 'list' }class="active" {/if}><a
|
||||
href="{$_url}pool/list">{Lang::T('IP Pool')}</a></li>
|
||||
<li {if $_routes[0] eq 'routers' and $_routes[1] eq 'maps' }class="active" {/if}><a
|
||||
href="{$_url}routers/maps">{Lang::T('Routers Maps')}</a></li>
|
||||
{$_MENU_NETWORK}
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
Reference in New Issue
Block a user