nestict/mitrobill
1
0
Fork 0
forked from kevinowino869/mitrobill
Code Pull Requests Activity

Router Maps

Browse Source
This commit is contained in:
Ibnu Maksum
2024-08-05 15:20:18 +07:00
parent 46a4c5f24d
commit 7d2f69f96f
12 changed files with 306 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
ui/ui/routers-edit.tpl
View File

@ -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:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <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"}