Commit 74ad4e71 authored by Muhamad's avatar Muhamad

dashboard, insert all kurang dikit pointnya

parent 75b657e5
...@@ -49,6 +49,8 @@ urlpatterns = [ ...@@ -49,6 +49,8 @@ urlpatterns = [
path('c_bangunan', views.createbang, name='c_bangunan'), path('c_bangunan', views.createbang, name='c_bangunan'),
path('create-jalan', views.createjalan, name='create-jalan'),
path('create-point', views.createpoint, name='create-point'),
path('edit-tuplah', login_required(views.edittuplah), name='edit-tuplah'), path('edit-tuplah', login_required(views.edittuplah), name='edit-tuplah'),
path('edit-tuplah-valid', views.edittuplahvalid, name='edit-tuplah-valid'), path('edit-tuplah-valid', views.edittuplahvalid, name='edit-tuplah-valid'),
...@@ -57,7 +59,4 @@ urlpatterns = [ ...@@ -57,7 +59,4 @@ urlpatterns = [
path('edit-jalan-valid', views.editjalanvalid, name='edit-jalan-valid'), path('edit-jalan-valid', views.editjalanvalid, name='edit-jalan-valid'),
path('3d-maps', views.maps3d, name='3d-maps'), path('3d-maps', views.maps3d, name='3d-maps'),
] ]
\ No newline at end of file
...@@ -1535,4 +1535,146 @@ def createbang(request): ...@@ -1535,4 +1535,146 @@ def createbang(request):
respon={'data':data, 'info': info, 'status':status} respon={'data':data, 'info': info, 'status':status}
return Response(respon) return Response(respon)
# @api_view(('GET',)) @api_view(('POST',))
def createjalan(request):
polyline = request.POST.get('polyline')
name_jalan = request.POST.get('name_jalan')
panjang_jalan = request.POST.get('panjang_jalan')
lebar_jalan = request.POST.get('lebar_jalan')
tipe_jalan = request.POST.get('tipe_jalan')
img_jalan = request.FILES.get('gambar')
coord = json.loads(str(polyline))
print(coord)
try:
if coord['features'][0]['geometry']['type'] == 'LineString':
for co in coord['features']:
ll = str(co["geometry"]['coordinates'])
ll += ll
ll = ll.replace(", "," ")
ll = ll.replace("]][[","),(")
ll = ll.replace("] [",", ")
ll = ll.replace("]]",")")
ll = ll.replace("[[","(")
coordinat = f'MULTILINESTRING({ll})'
except:
if coord['geometry']['type'] == 'LineString':
ll = str(coord["geometry"]['coordinates'])
ll = ll.replace(", "," ")
ll = ll.replace("]][[","),(")
ll = ll.replace("] [",", ")
ll = ll.replace("]]",")")
ll = ll.replace("[[","(")
coordinat = f'MULTILINESTRING({ll})'
fss_p = FileSystemStorage(location='static/image/jalan/')
try:
format = (img_jalan.name).split(".")
num = random.randrange(1, 10000000000000)
ngambar = f"{name_jalan}_{num}.{format[-1:][0]}"
ngambar = ngambar.replace(" ","-")
filename_p = fss_p.save(ngambar, img_jalan)
url_p = fss_p.url(filename_p)
except:
ngambar = 'None'
try:
with conn.cursor() as jalan:
jalan.execute("""INSERT INTO geo_jalan(geom, namrjl, panjang_jalan, lebar_jalan, remark, gambar) VALUES (ST_GeomFromEWKT('SRID=4326;%s'), '%s',%s,%s,'%s','%s')"""% (coordinat, name_jalan, panjang_jalan, lebar_jalan, tipe_jalan, ngambar))
conn.commit()
data = 'SUCCESS'
info = 'data telah diperbaharui'
status = 0
except:
data = 'Opss..!!'
info = 'Hubungi Developer'
status = 1
respon={'data':data, 'info': info, 'status':status}
return Response(respon)
@api_view(('POST',))
def createpoint(request):
gambar = request.FILES.get('gambar')
co_point = request.POST.get('point')
name_create_point = request.POST.get('name_create_point')
tipe_point = request.POST.get('tipe_point')
info_create_point = request.POST.get('info_create_point')
alamat_create_point = request.POST.get('alamat_create_point')
luas_bangunan_point = request.POST.get('luas_bangunan_point')
luas_tanah_point = request.POST.get('luas_tanah_point')
tinggi_bangunan_point = request.POST.get('tinggi_bangunan_point')
lantai_point = request.POST.get('lantai_point')
pemilik_point = request.POST.get('pemilik_point')
coord = json.loads(str(co_point))
coordinat = coord['geometry']['coordinates']
fss_p = FileSystemStorage(location='static/img/image/')
try:
format = (gambar.name).split(".")
num = random.randrange(1, 10000000000000)
ngambar = f"{name_create_point}_{num}.{format[-1:][0]}"
ngambar = ngambar.replace(" ","-")
filename_p = fss_p.save(ngambar, gambar)
url_p = fss_p.url(filename_p)
except:
ngambar = 'None'
# update geo_rumah_sakit set geom = st_geomfromgeojson('{"type":"Point", "coordinates":%s, "crs":{"type":"name","properties":{"name":"EPSG:4326"}}}'), namobj = '%s', alamat = '%s', remark = '%s', luas_bangunan = '%s', luas_tanah = '%s', tinggi_bangunan = '%s', perangkat = '%s', gambar = '%s' where id = %s
try:
if tipe_point == 'administrasi':
with conn.cursor() as point:
point.execute("""INSERT INTO geo_kantor_administrasi(geom, namobj, remark, luas_bangunan, luas_tanah, tinggi_bangunan, alamat, perangkat, type_id, gambar) VALUES (st_geomfromgeojson('{"type":"Point", "coordinates":%s, "crs":{"type":"name","properties":{"name":"EPSG:4326"}}}'), '%s','%s', %s, %s, %s, '%s', '%s', 5,'%s')"""% (coordinat, name_create_point, info_create_point, luas_bangunan_point, luas_tanah_point, tinggi_bangunan_point, alamat_create_point, pemilik_point, ngambar))
conn.commit()
if tipe_point == 'layanankesehatan':
with conn.cursor() as point:
point.execute("""INSERT INTO geo_layanan_kesehatan(geom, namobj, remark, luas_bangunan, luas_tanah, tinggi_bangunan, alamat, perangkat, type_id, gambar) VALUES (st_geomfromgeojson('{"type":"Point", "coordinates":%s, "crs":{"type":"name","properties":{"name":"EPSG:4326"}}}'), '%s','%s', %s, %s, %s, '%s', '%s', 6,'%s')"""% (coordinat, name_create_point, info_create_point, luas_bangunan_point, luas_tanah_point, tinggi_bangunan_point, alamat_create_point, pemilik_point, ngambar))
conn.commit()
if tipe_point == 'puskesmas':
with conn.cursor() as point:
point.execute("""INSERT INTO geo_puskesmas(geom, namobj, remark, luas_bangunan, luas_tanah, tinggi_bangunan, alamat, perangkat, type_id, gambar) VALUES (st_geomfromgeojson('{"type":"Point", "coordinates":%s, "crs":{"type":"name","properties":{"name":"EPSG:4326"}}}'), '%s','%s', %s, %s, %s, '%s', '%s', 7,'%s')"""% (coordinat, name_create_point, info_create_point, luas_bangunan_point, luas_tanah_point, tinggi_bangunan_point, alamat_create_point, pemilik_point, ngambar))
conn.commit()
if tipe_point == 'rumahsakit':
with conn.cursor() as point:
point.execute("""INSERT INTO geo_rumah_sakit(geom, namobj, remark, luas_bangunan, luas_tanah, tinggi_bangunan, alamat, perangkat, type_id, gambar) VALUES (st_geomfromgeojson('{"type":"Point", "coordinates":%s, "crs":{"type":"name","properties":{"name":"EPSG:4326"}}}'), '%s','%s', %s, %s, %s, '%s', '%s', 8,'%s')"""% (coordinat, name_create_point, info_create_point, luas_bangunan_point, luas_tanah_point, tinggi_bangunan_point, alamat_create_point, pemilik_point, ngambar))
conn.commit()
if tipe_point == 'saranaibadah':
with conn.cursor() as point:
point.execute("""INSERT INTO geo_sarana_ibadah(geom, namobj, remark, luas_bangunan, luas_tanah, tinggi_bangunan, alamat, perangkat, type_id, gambar) VALUES (st_geomfromgeojson('{"type":"Point", "coordinates":%s, "crs":{"type":"name","properties":{"name":"EPSG:4326"}}}'), '%s','%s', %s, %s, %s, '%s', '%s', 9,'%s')"""% (coordinat, name_create_point, info_create_point, luas_bangunan_point, luas_tanah_point, tinggi_bangunan_point, alamat_create_point, pemilik_point, ngambar))
conn.commit()
if tipe_point == 'saranapendidikan':
with conn.cursor() as point:
point.execute("""INSERT INTO geo_sarana_pendidikan(geom, namobj, remark, luas_bangunan, luas_tanah, tinggi_bangunan, alamat, perangkat, type_id, gambar) VALUES (st_geomfromgeojson('{"type":"Point", "coordinates":%s, "crs":{"type":"name","properties":{"name":"EPSG:4326"}}}'), '%s','%s', %s, %s, %s, '%s', '%s', 10,'%s')"""% (coordinat, name_create_point, info_create_point, luas_bangunan_point, luas_tanah_point, tinggi_bangunan_point, alamat_create_point, pemilik_point, ngambar))
conn.commit()
if tipe_point == 'cagarbudaya':
with conn.cursor() as point:
point.execute("""INSERT INTO geo_cagar_budaya(geom, namobj, remark, luas_bangunan, luas_tanah, tinggi_bangunan, alamat, perangkat, type_id, gambar) VALUES (st_geomfromgeojson('{"type":"Point", "coordinates":%s, "crs":{"type":"name","properties":{"name":"EPSG:4326"}}}'), '%s','%s', %s, %s, %s, '%s', '%s', 3,'%s')"""% (coordinat, name_create_point, info_create_point, luas_bangunan_point, luas_tanah_point, tinggi_bangunan_point, alamat_create_point, pemilik_point, ngambar))
conn.commit()
data = 'SUCCESS'
info = 'data telah diperbaharui'
status = 0
except:
data = 'Opss..!!'
info = 'Hubungi Developer'
status = 1
respon={'data':data, 'info': info, 'status':status}
return Response(respon)
\ No newline at end of file
<script>
//klik kanan begin
map.on('contextmenu', function(e) {
$("#map-create").remove();
// document.getElementsByClassName('leaflet-popup-content').style.width = "550px";
var popup = L.popup()
.setLatLng(e.latlng)
.setContent(`
<div class="tab-pane has-padding" id="panel-tab2">
<div class="tab-pane" id="bottom-justified-data">
<div class="tabbable" style="width: 450px!important;">
<ul class="nav nav-tabs nav-tabs-bottom nav-justified">
<li onclick="changetabs(this)" class="active"><a href="#bangunan" data-toggle="tab" id="c_bangunan">Bangunan</a></li>
<li onclick="changetabs(this)"><a href=".koordinatjalan" data-toggle="tab" id="c_jalan">Jalan</a></li>
<li onclick="changetabs(this)"><a href=".point-insert" data-toggle="tab" id="point-insert">Point</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="bangunan">
<div class="tabbable" style="overflow:auto;height:450px!important;width: 450px!important;">
<ul class="nav nav-tabs nav-tabs-bottom nav-justified">
<li onclick="changetabs(this)" class="active"><a href="#right-tab2-feas-upl" data-toggle="tab">Koordinat</a></li>
<li onclick="changetabs(this)"><a href="#left-tab1-feas-upl" data-toggle="tab">Informasi Bangunan</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="right-tab2-feas-upl">
<div class="form-group">
<div id="map-create" style="height: 250px;">
<input type="button" id="create" value="Create" style="z-index: 1000;position:relative;">
</div>
<div class="form-group">
<label class="col-lg-2 control-label" style="margin-top:10px">Image</label>
<div class="col-lg-9" style="margin-top:10px">
<input type="file" id="file" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif">
<input style="display:none;" id="gambar" type="text" class="form-control" value="" required>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="left-tab1-feas-upl">
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Nama Bangunan</label>
<div class="col-lg-9">
<input id="name_create" type="text" class="form-control" value="" required>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Informasi Bangunan</label>
<div class="col-lg-9">
<input id="info_create" type="text" class="form-control" value="" placeholder="Rumah/Gedung/Ruko/Pabrik/dsb" required>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Alamat</label>
<div class="col-lg-9">
<input id="alamat_create" type="text" class="form-control" value="" placeholder="cth : Jl. Contoh Rt 005/01 No.01" required>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Luas Bangunan</label>
<div class="col-lg-6">
<input id="luas_bangunan_create" type="text" class="form-control" value="" required>
</div>
<div class="col-lg-3">
<select id="satuan_luas_bangunan" style="margin-top: 15px;">
<option>m2</option>
</select>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Luas Tanah</label>
<div class="col-lg-6">
<input id="luas_tanah_create" type="text" class="form-control" value="" required>
</div>
<div class="col-lg-3">
<select id="satuan_luas_tanah" style="margin-top: 15px;">
<option>m2</option>
</select>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Tinggi Bangunan</label>
<div class="col-lg-6">
<input id="tinggi_bangunan_create" type="text" class="form-control" value="" required>
</div>
<div class="col-lg-3" style="margin-top: 15px;">m</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Jumlah Lantai</label>
<div class="col-lg-9">
<input id="lantai" type="text" class="form-control" value="" placeholder="Estimasi Per Lantai = 3m" required>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Pemilik</label>
<div class="col-lg-9">
<input id="pemilik_create" type="text" class="form-control" value="" placeholder="cth : Ali Budiman, S.Si." required>
</div>
</div>
</div>
</div>
</div>
</div>
<input type="button" class="btn btn-primary" id="create_save_bangunan" value="SAVE" style="margin-right:30px;">
<input type="text" name="poly_create" class="hidden" id="poly_create_bangunan" value="">
</div>
<div class="tab-pane koordinatjalan">
<div class="tabbable" style="overflow:auto;height:450px!important;width: 450px!important;">
<ul class="nav nav-tabs nav-tabs-bottom nav-justified">
<li onclick="changetabs(this)" class="active"><a href=".koordinatjalan" data-toggle="tab">Koordinat</a></li>
<li onclick="changetabs(this)"><a href="#informasi_jalan" data-toggle="tab">Informasi Jalan</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane koordinatjalan" id="koordinatjalan">
<div class="form-group">
<div id="map-create-jalan" style="height: 250px;">
<input type="button" id="create-jal" value="Create" style="z-index: 1000;position:relative;">
</div>
<div class="form-group">
<label class="col-lg-2 control-label" style="margin-top:10px">Image</label>
<div class="col-lg-9" style="margin-top:10px">
<input type="file" id="img_jalan" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif">
</div>
</div>
</div>
</div>
<div class="tab-pane" id="informasi_jalan">
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-4 control-label lbl-top" style="margin-top: 15px;">Nama Jalan</label>
<div class="col-lg-8">
<input id="nama_jalan_create" type="text" class="form-control" value="" required>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-4 control-label lbl-top" style="margin-top: 15px;">Panjang Jalan (m)</label>
<div class="col-lg-8">
<input id="panjang_jalan_create" type="text" class="form-control" value="" required>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-4 control-label lbl-top" style="margin-top: 15px;">Lebar Jalan (m)</label>
<div class="col-lg-8">
<input id="lebar_jalan_create" type="text" class="form-control" value="" required>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-4 control-label lbl-top" style="margin-top: 15px;">Tipe Jalan</label>
<div class="col-lg-8">
<input id="tipe_jalan_create" type="text" class="form-control" value="" required>
</div>
</div>
</div>
</div>
</div>
</div>
<input type="button" class="btn btn-primary" id="create_save_jalan" value="SAVE" style="margin-right:30px;">
<input type="text" name="poly_create" class="hidden" id="poly_create_jalan" value="">
</div>
<div class="tab-pane point-insert">
<div class="tabbable" style="overflow:auto;height:450px!important;width: 450px!important;">
<ul class="nav nav-tabs nav-tabs-bottom nav-justified">
<li onclick="changetabs(this)" class="active"><a href=".point-insert" data-toggle="tab">Koordinat</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane point-insert">
<div class="form-group">
<div id="map-create-admin" style="height: 250px;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`)
.openOn(map);
map.openPopup(popup);
var map_create_bangunan = L.map('map-create', {
editable: true,
zoomControl: false,
drawControl: true
}).setView([e.latlng.lat, e.latlng.lng], 20.5);
map_created = L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
maxZoom: 22,
minZoom: 4,
}).addTo(map_create_bangunan);
map_create_bangunan.invalidateSize();
$('#create').click(function() {
polygonDraweredit.enable();
});
var Marker = {};
var Poly = {};
map_create_bangunan.on(L.Draw.Event.CREATED, function(e) {
var layer = e.layer;
$("#poly_create").empty();
var type = e.layerType;
var layer = e.layer;
var shape = layer.toGeoJSON();
let geoShape = shape.geometry.coordinates[0];
let kordinat = "";
for (j in geoShape) {
kordinat += geoShape[j][0] + ' ' + geoShape[j][1];
if (j <= (geoShape.length - 2)) {
kordinat += ', ';
}
}
window.thisBaseDrawPolygonLayer = layer;
$("#poly_create").val(JSON.stringify(kordinat));
});
polygon_options = {
showArea: false,
shapeOptions: {
stroke: true,
color: '#6e83f0',
weight: 1.5,
opacity: 2,
fill: false,
fillColor: null, //same as color by default
clickable: true
}
}
var polygonDraweredit = new L.Draw.Polygon(map_create_bangunan, polygon_options);
polygonDraweredit.on("click", function(event) {
shapecoords.innerHTML = event.latlng.toString();
map_create_bangunan.fire("click", event); // Trigger a map click as well.
});
map_create_bangunan.on('draw:created', function(e) {
var type = e.layerType,
layer = e.layer;
var lay = layer.addTo(map_create_bangunan);
Poly = lay;
});
var map_create_jalan = L.map('map-create-jalan', {
editable: true,
zoomControl: false,
drawControl: true
}).setView([e.latlng.lat, e.latlng.lng], 20.5);
L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
maxZoom: 22,
minZoom: 4,
}).addTo(map_create_jalan);
$("#c_jalan").click(function() {
setTimeout(function() {
map_create_jalan.invalidateSize();
}, 500);
})
var lineDraweredit = new L.Draw.Polyline(map_create_jalan, polygon_options);
lineDraweredit.on("click", function(event) {
shapecoords.innerHTML = event.latlng.toString();
map_create_jalan.fire("click", event); // Trigger a map click as well.
});
map_create_jalan.on('draw:created', function(e) {
var type = e.layerType,
layer = e.layer;
layer.options.color = 'yellow';
layer.options.weight = 10;
var koordina = ""
if (type === 'polyline') {
var tempLatLng = null;
var totalDistance = 0.00000;
$.each(e.layer._latlngs, function(i, latlng) {
if (tempLatLng == null) {
tempLatLng = latlng;
return;
}
totalDistance += tempLatLng.distanceTo(latlng);
tempLatLng = latlng;
});
e.layer.bindPopup((totalDistance).toFixed(2) + ' meter');
e.layer.openPopup();
$("#panjang_jalan_create").val((totalDistance).toFixed(2) + ' meter');
}
$("#poly_create_jalan").val(JSON.stringify(layer.toGeoJSON()));
layer.addTo(map_create_jalan);
});
$("#create-jal").click(function() {
lineDraweredit.enable();
})
var map_create_admin = L.map('map-create-admin', {
editable: true,
zoomControl: false,
drawControl: true
}).setView([e.latlng.lat, e.latlng.lng], 20.5);
L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
maxZoom: 22,
minZoom: 4,
}).addTo(map_create_admin);
$("#point-insert").click(function() {
setTimeout(function() {
map_create_admin.invalidateSize();
}, 500);
})
$(".leaflet-draw-draw-marker").html('<span class="fa fa-expand"></span>')
var drawControl = new L.Control.Draw(drawPluginOptions);
map_create_admin.addControl(drawControl);
var editableLayers = new L.FeatureGroup();
map_create_admin.addLayer(editableLayers);
// define custom marker
var MyCustomMarker = L.Icon.extend({
options: {
shadowUrl: null,
iconAnchor: new L.Point(12, 12),
iconSize: new L.Point(24, 24),
}
});
var drawPluginOptions = {
position: 'topright',
draw: {
marker: {
title: "soyel1",
icon: new MyCustomMarker()
},
marker: true
},
edit: {
featureGroup: editableLayers, //REQUIRED!!
remove: true
}
};
var drawControl = new L.Control.Draw(drawPluginOptions);
map_create_admin.addControl(drawControl);
var editableLayers = new L.FeatureGroup();
map_create_admin.addLayer(editableLayers);
map_create_admin.on('draw:created', function(e) {
var type = e.layerType,
layer = e.layer;
editableLayers.addLayer(layer);
$("#poly_create_point").val(JSON.stringify(layer.toGeoJSON()));
$("#modal_point").modal()
map.closePopup();
});
$("#map-create-admin > div.leaflet-control-container > div.leaflet-top.leaflet-left > div:nth-child(2) > div > div > a.leaflet-draw-draw-marker").css("display", "block!important")
});
$(document).on("click", "#create_save_jalan", function(e) {
data = new FormData()
data.append("gambar", $("input[id^='img_jalan']")[0].files[0]);
data.append("polyline", $("#poly_create_jalan").val())
data.append("name_jalan", $("#nama_jalan_create").val())
data.append("panjang_jalan", $("#panjang_jalan_create").val())
data.append("lebar_jalan", $("#lebar_jalan_create").val())
data.append("tipe_jalan", $("#tipe_jalan_create").val())
$.ajax({
url: "{% url 'api:create-jalan' %}",
data: data,
dataType: 'json',
type: 'POST',
processData: false,
contentType: false,
success: function(data) {
let response = data
if (response.status == 0) {
swal({
title: response.info,
text: response.data,
type: "success",
icon: "success",
confirmButtonColor: "#00BCD4"
})
} else {
swal({
title: response.info,
text: response.data,
type: "warning",
icon: "error",
confirmButtonColor: "#00BCD4"
})
}
map.closePopup();
}
});
});
$(document).on("click", "#create_save_bangunan", function(e) {
var polygin = $('#poly_create').val();
var name_poly = $('#name_create').val();
var info_poly = $('#info_create').val();
var alamat_poly = $('#alamat_create').val();
var lb_poly = $('#luas_bangunan_create').val();
var lt_poly = $('#luas_tanah_create').val();
var tb_poly = $('#tinggi_bangunan_create').val();
var ltbang = $('#lantai').val();
var mpu_poly = $('#pemilik_create').val();
$.ajax({
url: "{% url 'api:c_bangunan' %}",
data: {
'polygon': polygin,
'name': name_poly,
'info': info_poly,
'alamat': alamat_poly,
'lb': lb_poly,
'lt': lt_poly,
'tb': tb_poly,
'ltb': ltbang,
'pemilik': mpu_poly
},
dataType: 'json',
// type: 'POST',
// processData: false,
// contentType: false,
success: function(data) {
let response = data
if (response.status == 0) {
swal({
title: response.info,
text: response.data,
type: "success",
icon: "success",
confirmButtonColor: "#00BCD4"
})
} else {
swal({
title: response.info,
text: response.data,
type: "warning",
icon: "error",
confirmButtonColor: "#00BCD4"
})
}
map.closePopup();
}
});
});
$(document).on("click", "#btnsavepoint", function(e) {
data = new FormData()
data.append("gambar", $("input[id^='gambar_pitik']")[0].files[0]);
data.append("point", $("#poly_create_point").val())
data.append("name_create_point", $("#name_create_point").val())
data.append("tipe_point", $("#tipe_point").val())
data.append("info_create_point", $("#info_create_point").val())
data.append("alamat_create_point", $("#alamat_create_point").val())
data.append("luas_bangunan_point", $("#luas_bangunan_point").val())
data.append("luas_tanah_point", $("#luas_tanah_point").val())
data.append("tinggi_bangunan_point", $("#tinggi_bangunan_point").val())
data.append("lantai_point", $("#lantai_point").val())
data.append("pemilik_point", $("#pemilik_point").val())
$.ajax({
url: "{% url 'api:create-point' %}",
data: data,
dataType: 'json',
type: 'POST',
processData: false,
contentType: false,
success: function(data) {
let response = data
if (response.status == 0) {
swal({
title: response.info,
text: response.data,
type: "success",
icon: "success",
confirmButtonColor: "#00BCD4"
}, function() {
$("#modal_point").css('display', 'none');
})
} else {
swal({
title: response.info,
text: response.data,
type: "warning",
icon: "error",
confirmButtonColor: "#00BCD4"
})
}
map.closePopup();
}
});
});
//klik kanan end
</script>
\ No newline at end of file
{% for group in user.groups.all %} {% if group.name == 'Superadmin' %} {% for group in user.groups.all %} {% if group.name == 'Superadmin' %}
<style> <style>
.leaflet-popup{ .leaflet-popup {
display: block; display: block;
} }
#btn_edit_kelurahan { #btn_edit_kelurahan {
display: block; display: block;
} }
...@@ -46,6 +47,7 @@ ...@@ -46,6 +47,7 @@
#btn_edit_adm { #btn_edit_adm {
display: block; display: block;
} }
#btn_delete_adm { #btn_delete_adm {
display: block; display: block;
} }
...@@ -70,7 +72,7 @@ ...@@ -70,7 +72,7 @@
display: block; display: block;
} }
.leaflet-popup{ .leaflet-popup {
display: block; display: block;
} }
</style> </style>
...@@ -4638,7 +4640,7 @@ ...@@ -4638,7 +4640,7 @@
} }
} }
//3d begin //3d begin
function map3d() { function map3d() {
var checkBox_3d = document.getElementById("3d-maps"); var checkBox_3d = document.getElementById("3d-maps");
if (checkBox_3d.checked == true) { if (checkBox_3d.checked == true) {
...@@ -4647,8 +4649,7 @@ ...@@ -4647,8 +4649,7 @@
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhOTc0NDkxMi02N2NkLTQwYjMtOTE1Yi1iMGNkZDU0Zjg3MGMiLCJpZCI6NDQ1ODgsImlhdCI6MTYxNDE0NjM5NH0.sRHzNNa7uV_huqGxERySWlL8J5UVx1VwU-pRwNd0GJk'; Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhOTc0NDkxMi02N2NkLTQwYjMtOTE1Yi1iMGNkZDU0Zjg3MGMiLCJpZCI6NDQ1ODgsImlhdCI6MTYxNDE0NjM5NH0.sRHzNNa7uV_huqGxERySWlL8J5UVx1VwU-pRwNd0GJk';
var worldTerrain = new Cesium.ArcGISTiledElevationTerrainProvider({ var worldTerrain = new Cesium.ArcGISTiledElevationTerrainProvider({
url: url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
"https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
}); });
var map_cesium = new Cesium.Viewer('map-cesium'); var map_cesium = new Cesium.Viewer('map-cesium');
// var map_cesium = new Cesium.Viewer('map-cesium', { // var map_cesium = new Cesium.Viewer('map-cesium', {
...@@ -4806,272 +4807,6 @@ ...@@ -4806,272 +4807,6 @@
$("#map-cesium").css('display', 'none'); $("#map-cesium").css('display', 'none');
} }
} }
//3d end //3d end
//klik kanan begin
map.on('contextmenu', function(e) {
$("#map-create").remove();
// document.getElementsByClassName('leaflet-popup-content').style.width = "550px";
var popup = L.popup()
.setLatLng(e.latlng)
.setContent(`
<div class="tab-pane has-padding" id="panel-tab2">
<div class="tab-pane" id="bottom-justified-data">
<div class="tabbable" style="overflow:auto;height:450px!important;width: 450px!important;">
<ul class="nav nav-tabs nav-tabs-bottom nav-justified">
<li onclick="changetabs(this)" class="active"><a href="#right-tab2-feas-upl" data-toggle="tab">Koordinat</a></li>
<li onclick="changetabs(this)"><a href="#left-tab1-feas-upl" data-toggle="tab">Informasi Umum</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="right-tab2-feas-upl">
<div class="form-group">
<div id="map-create" style="height: 250px;">
<input type="button" id="create" value="Create" style="z-index: 1000;position:relative;">
</div>
<div class="form-group">
<label class="col-lg-2 control-label" style="margin-top:10px">Image</label>
<div class="col-lg-9" style="margin-top:10px">
<input type="file" id="file" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif">
<input style="display:none;" id="gambar" type="text" class="form-control" value=""required>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="left-tab1-feas-upl">
<div class="modal-body" style="overflow-y: auto;">
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Nama Bangunan</label>
<div class="col-lg-9">
<input id="name_create" type="text" class="form-control" value=""required>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Informasi Bangunan</label>
<div class="col-lg-9">
<input id="info_create" type="text" class="form-control" value="" placeholder="Rumah/Gedung/Ruko/Pabrik/dsb"required>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Alamat</label>
<div class="col-lg-9">
<input id="alamat_create" type="text" class="form-control" value="" placeholder="cth : Jl. Contoh Rt 005/01 No.01" required>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Luas Bangunan</label>
<div class="col-lg-6">
<input id="luas_bangunan_create" type="text" class="form-control" value=""required>
</div>
<div class="col-lg-3">
<select id="satuan_luas_bangunan" style="margin-top: 15px;">
<option>m2</option>
</select>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Luas Tanah</label>
<div class="col-lg-6">
<input id="luas_tanah_create" type="text" class="form-control" value=""required>
</div>
<div class="col-lg-3">
<select id="satuan_luas_tanah" style="margin-top: 15px;">
<option>m2</option>
</select>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Tinggi Bangunan</label>
<div class="col-lg-6">
<input id="tinggi_bangunan_create" type="text" class="form-control" value=""required>
</div>
<div class="col-lg-3" style="margin-top: 15px;">m</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Jumlah Lantai</label>
<div class="col-lg-9">
<input id="lantai" type="text" class="form-control" value="" placeholder="Estimasi Per Lantai = 3m" required>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Pemilik</label>
<div class="col-lg-9">
<input id="pemilik_create" type="text" class="form-control" value="" placeholder="cth : Ali Budiman, S.Si."required>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<input type="button" class="btn btn-primary" id="create_save" value="SAVE" style="margin-right:30px;">
</div>
<input type="text" name="poly_create" class="hidden" id="poly_create" value="">
</div>
`)
.openOn(map);
map.openPopup(popup);
var map_create = L.map('map-create', {
editable: true,
zoomControl: false,
drawControl: true
}).setView([e.latlng.lat, e.latlng.lng], 20.5);
map_created = L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
maxZoom: 22,
minZoom: 4,
}).addTo(map_create);
map_create.invalidateSize();
$('#create').click(function() {
polygonDraweredit.enable();
});
var Marker = {};
var Poly = {};
map_create.on(L.Draw.Event.CREATED, function(e) {
var layer = e.layer;
$("#poly_create").empty();
var type = e.layerType;
var layer = e.layer;
var shape = layer.toGeoJSON();
let geoShape = shape.geometry.coordinates[0];
let kordinat = "";
for (j in geoShape) {
kordinat += geoShape[j][0] + ' ' + geoShape[j][1];
if (j <= (geoShape.length - 2)) {
kordinat += ', ';
}
}
window.thisBaseDrawPolygonLayer = layer;
$("#poly_create").val(JSON.stringify(kordinat));
});
polygon_options = {
showArea: false,
shapeOptions: {
stroke: true,
color: '#6e83f0',
weight: 1.5,
opacity: 2,
fill: true,
fillColor: null, //same as color by default
fillOpacity: 0.3,
clickable: true
}
}
var polygonDraweredit = new L.Draw.Polygon(map_create, polygon_options);
polygonDraweredit.on("click", function(event) {
shapecoords.innerHTML = event.latlng.toString();
map_create.fire("click", event); // Trigger a map click as well.
});
map_create.on('draw:created', function(e) {
var type = e.layerType,
layer = e.layer;
var lay = layer.addTo(map_create);
Poly = lay;
});
});
$(document).on("click", "#create_save", function(e) {
var polygin = $('#poly_create').val();
var name_poly = $('#name_create').val();
var info_poly = $('#info_create').val();
var alamat_poly = $('#alamat_create').val();
var lb_poly = $('#luas_bangunan_create').val();
var lt_poly = $('#luas_tanah_create').val();
var tb_poly = $('#tinggi_bangunan_create').val();
var ltbang = $('#lantai').val();
var mpu_poly = $('#pemilik_create').val();
$.ajax({
url: "{% url 'api:c_bangunan' %}",
data: {
'polygon': polygin,
'name': name_poly,
'info': info_poly,
'alamat': alamat_poly,
'lb': lb_poly,
'lt': lt_poly,
'tb': tb_poly,
'ltb':ltbang,
'pemilik': mpu_poly
},
dataType: 'json',
// type: 'POST',
// processData: false,
// contentType: false,
success: function(data) {
let response = data
if (response.status == 0) {
swal({
title: response.info,
text: response.data,
type: "success",
icon: "success",
confirmButtonColor: "#00BCD4"
})
} else {
swal({
title: response.info,
text: response.data,
type: "warning",
icon: "error",
confirmButtonColor: "#00BCD4"
})
}
map.closePopup();
}
});
});
//klik kanan end
</script> </script>
{% include 'includes/insert.html' %}
\ No newline at end of file
...@@ -39,11 +39,12 @@ ...@@ -39,11 +39,12 @@
#btn_edit_adm { #btn_edit_adm {
display: block; display: block;
} }
#btn_delete_adm { #btn_delete_adm {
display: block; display: block;
} }
.leaflet-popup{ .leaflet-popup {
display: block; display: block;
} }
</style> </style>
...@@ -95,7 +96,7 @@ ...@@ -95,7 +96,7 @@
display: block; display: block;
} }
.leaflet-popup{ .leaflet-popup {
display: block; display: block;
} }
</style> </style>
...@@ -171,10 +172,9 @@ ...@@ -171,10 +172,9 @@
display: block; display: block;
} }
.leaflet-popup{ .leaflet-popup {
display: block; display: block;
} }
</style> </style>
{% elif group.name == 'Dinas Sosial' %} {% elif group.name == 'Dinas Sosial' %}
<style> <style>
...@@ -1204,7 +1204,7 @@ ...@@ -1204,7 +1204,7 @@
<span>Luas Lahan : ` + feature.legend.f3 + `</span> <span>Luas Lahan : ` + feature.legend.f3 + `</span>
</p> </p>
<p class="text-center" style="margin-top: 25px;"> <p class="text-center" style="margin-top: 25px;">
<a href="#" class="btn btn-default" data-toggle="modal" data-target="#modal-edit-tuplah" id="btn_edit_tuplah" data-backdrop="static" data-keyboard="false"><i>Edit Informasi Jalan</i></a> <a href="#" class="btn btn-default" data-toggle="modal" data-target="#modal-edit-tuplah" id="btn_edit_tuplah" data-backdrop="static" data-keyboard="false"><i>Edit Informasi Tutupan Lahan</i></a>
</p> </p>
</th> </th>
</tr> </tr>
...@@ -1285,8 +1285,6 @@ ...@@ -1285,8 +1285,6 @@
} }
$(document).on("click", "#btn_edit_tuplah", function() {
var map_edit_tuplah = L.map('map-edit-tuplah', { var map_edit_tuplah = L.map('map-edit-tuplah', {
editable: true, editable: true,
zoomControl: false, zoomControl: false,
...@@ -1298,6 +1296,20 @@ ...@@ -1298,6 +1296,20 @@
minZoom: 4, minZoom: 4,
}).addTo(map_edit_tuplah); }).addTo(map_edit_tuplah);
var polygon_edit_tuplah = L.polygon([
[-4.1283969, 104.1674575],
[-4.128396, 104.1674947],
[-4.1284664, 104.1674964],
[-4.1284674, 104.1674593],
[-4.1283969, 104.1674575]
]).addTo(map_edit_tuplah)
$(document).on("click", "#btn_edit_tuplah", function() {
if (map_edit_tuplah.hasLayer(polygon_edit_tuplah)) {
polygon_edit_tuplah.remove()
}
if (group == "Dinas Pekerjaan Umum dan Penataan Ruang") { if (group == "Dinas Pekerjaan Umum dan Penataan Ruang") {
var id_poly = $('#idtuplah').val(); var id_poly = $('#idtuplah').val();
...@@ -1316,18 +1328,24 @@ ...@@ -1316,18 +1328,24 @@
map_edit_tuplah.invalidateSize(); map_edit_tuplah.invalidateSize();
}, 1000); }, 1000);
map_edit_tuplah.setView([data['tuplah']['geometry']['coordinates'][0][0][1], data['tuplah']['geometry']['coordinates'][0][0][0]], 19);
let lop_poly_edit = data['tuplah']['geometry']['coordinates'][0]; let lop_poly_edit = data['tuplah']['geometry']['coordinates'][0];
let list_poly_edit = []; let list_poly_edit = [];
var latt = 0;
var longg = 0;
for (var i = 0; i < lop_poly_edit.length; i++) { for (var i = 0; i < lop_poly_edit.length; i++) {
geoj = lop_poly_edit[i][0]; geoj = lop_poly_edit[i][0];
polygigi = [lop_poly_edit[i][1], lop_poly_edit[i][0]] polygigi = [lop_poly_edit[i][1], lop_poly_edit[i][0]]
list_poly_edit.push(polygigi); list_poly_edit.push(polygigi);
latt += lop_poly_edit[i][0]
longg += lop_poly_edit[i][1]
}; };
var lattt = latt / list_poly_edit.length
var longgg = longg / list_poly_edit.length
map_edit_tuplah.setView([longgg, lattt], 14);
var polygon_edit_tuplah = L.polygon(list_poly_edit).addTo(map_edit_tuplah) polygon_edit_tuplah = L.polygon(list_poly_edit).addTo(map_edit_tuplah)
polygon_edit_tuplah.enableEdit(); polygon_edit_tuplah.enableEdit();
$('#btnsavetuplah').click(function() { $('#btnsavetuplah').click(function() {
var hasil = (JSON.stringify(polygon_edit_tuplah.toGeoJSON())) var hasil = (JSON.stringify(polygon_edit_tuplah.toGeoJSON()))
...@@ -1346,7 +1364,7 @@ ...@@ -1346,7 +1364,7 @@
}, },
}) })
} else { } else {
$("#modal-edit-tuplah").css('display', 'none');
swal({ swal({
title: "Sorry", title: "Sorry",
text: group + " Tidak memiliki akses", text: group + " Tidak memiliki akses",
...@@ -1354,6 +1372,7 @@ ...@@ -1354,6 +1372,7 @@
icon: "error", icon: "error",
confirmButtonColor: "#00BCD4" confirmButtonColor: "#00BCD4"
}) })
$("#modal-edit-tuplah").css('display', 'none');
} }
...@@ -1629,8 +1648,6 @@ ...@@ -1629,8 +1648,6 @@
} }
}); });
$(document).on("click", "#btn_edit_bangunan", function() {
var map_edit = new L.map('map-edit', { var map_edit = new L.map('map-edit', {
editable: true, editable: true,
zoomControl: false, zoomControl: false,
...@@ -1641,6 +1658,20 @@ ...@@ -1641,6 +1658,20 @@
maxZoom: 22, maxZoom: 22,
minZoom: 4, minZoom: 4,
}).addTo(map_edit); }).addTo(map_edit);
var polylyly = L.polygon([
[-4.1283969, 104.1674575],
[-4.128396, 104.1674947],
[-4.1284664, 104.1674964],
[-4.1284674, 104.1674593],
[-4.1283969, 104.1674575]
]).addTo(map_edit)
$(document).on("click", "#btn_edit_bangunan", function() {
if (map_edit.hasLayer(polylyly)) {
polylyly.remove()
}
var id_poly = $('#idbangunan').val(); var id_poly = $('#idbangunan').val();
loaderPage(true); loaderPage(true);
...@@ -1669,10 +1700,10 @@ ...@@ -1669,10 +1700,10 @@
list_poly_edit.push(polygigi); list_poly_edit.push(polygigi);
}; };
var polyly = L.polygon(list_poly_edit).addTo(map_edit) polylyly = L.polygon(list_poly_edit).addTo(map_edit)
polyly.enableEdit(); polylyly.enableEdit();
$('#btnsavebangunan').click(function() { $('#btnsavebangunan').click(function() {
var hasil = (JSON.stringify(polyly.toGeoJSON())) var hasil = (JSON.stringify(polylyly.toGeoJSON()))
$("#coordinatebangunan").val(hasil); $("#coordinatebangunan").val(hasil);
}) })
} }
...@@ -2081,8 +2112,6 @@ ...@@ -2081,8 +2112,6 @@
} }
} }
$(document).on("click", "#btn_jalan", function() {
var map_edit_jalan = L.map('map-jalan', { var map_edit_jalan = L.map('map-jalan', {
editable: true, editable: true,
zoomControl: false, zoomControl: false,
...@@ -2093,7 +2122,21 @@ ...@@ -2093,7 +2122,21 @@
maxZoom: 22, maxZoom: 22,
minZoom: 4, minZoom: 4,
}).addTo(map_edit_jalan); }).addTo(map_edit_jalan);
var polygon_edit_jalan = new L.Polyline([
[-4.11941282399997, 104.170558774],
[-4.11965812399992, 104.170414073]
], {
color: 'blue',
weight: 3,
opacity: 0.5,
smoothFactor: 1
});
$(document).on("click", "#btn_jalan", function() {
if (map_edit_jalan.hasLayer(polygon_edit_jalan)) {
polygon_edit_jalan.remove()
}
var id_poly = $('#idjalan').val(); var id_poly = $('#idjalan').val();
$.ajax({ $.ajax({
...@@ -2128,7 +2171,7 @@ ...@@ -2128,7 +2171,7 @@
}; };
var polygon_edit_jalan = new L.Polyline(list_poly_edit, { polygon_edit_jalan = new L.Polyline(list_poly_edit, {
color: 'blue', color: 'blue',
weight: 3, weight: 3,
opacity: 0.5, opacity: 0.5,
...@@ -2534,7 +2577,6 @@ ...@@ -2534,7 +2577,6 @@
weight: 10 weight: 10
} }
}, },
// disable toolbar item by setting it to false
polyline: true, polyline: true,
}, },
edit: { edit: {
...@@ -2556,8 +2598,6 @@ ...@@ -2556,8 +2598,6 @@
var koordina = "" var koordina = ""
if (type === 'polyline') { if (type === 'polyline') {
// Calculating the distance of the polyline
var tempLatLng = null; var tempLatLng = null;
var totalDistance = 0.00000; var totalDistance = 0.00000;
$.each(e.layer._latlngs, function(i, latlng) { $.each(e.layer._latlngs, function(i, latlng) {
...@@ -2574,9 +2614,6 @@ ...@@ -2574,9 +2614,6 @@
$("#panjangjalanperbaikan").val((totalDistance).toFixed(2) + ' meter'); $("#panjangjalanperbaikan").val((totalDistance).toFixed(2) + ' meter');
} }
$("#poly_create_input").val(JSON.stringify(koordina));
editableLayers.addLayer(layer); editableLayers.addLayer(layer);
}); });
...@@ -2772,7 +2809,6 @@ ...@@ -2772,7 +2809,6 @@
data = new FormData() data = new FormData()
data.append("proposal", $("input[id^='proposal']")[0].files[0]); data.append("proposal", $("input[id^='proposal']")[0].files[0]);
data.append("bukti_selesai", $("input[id^='buktiselesai']")[0].files[0]); data.append("bukti_selesai", $("input[id^='buktiselesai']")[0].files[0]);
console.log(data)
for (var i = 0; i < data_umum.length; i++) { for (var i = 0; i < data_umum.length; i++) {
var keyss = Object.keys(data_umum[i]); var keyss = Object.keys(data_umum[i]);
data.append(keyss[0], data_umum[i][keyss[0]]) data.append(keyss[0], data_umum[i][keyss[0]])
......
...@@ -116,31 +116,43 @@ ...@@ -116,31 +116,43 @@
</div> </div>
<!-- modal jalan --> <!-- modal jalan -->
<div id="modal-jalan" class="modal fade"> <div id="modal-jalan" class="modal fade">
<div class="modal-dialog" style="width: max-content;height: max-content;"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header bg-info" style="background-color: #40777c;"> <div class="modal-header bg-info" style="background-color:#40777c;">
<button type="button" class="close" data-dismiss="modal">&times;</button> <button type="button" class="close" data-dismiss="modal">&times;</button>
<h6 class="modal-title">Maps Jalan</h6> <h6 class="modal-title">Edit Line Jalan dan Informasinya</h6>
</div> </div>
<input type="text" name="idjalan" id="idjalan" class="form-control hidden" value="` + feature.properties.f1 + `">
<input type="text" name="coordinatejalan" id="coordinatejalan" class="form-control hidden" value="">
<div class="modal-body" style="max-height: 450px;overflow-y: auto;"> <div class="modal-body" style="max-height: 450px;overflow-y: auto;">
<div class="tab-pane has-padding" id="panel-tab2">
<div class="tab-pane" id="bottom-justified-data">
<div class="tabbable">
<ul class="nav nav-tabs nav-tabs-bottom nav-justified">
<li onclick="changetabs(this)" class="active"><a href="#left-tab1-feas-upl" data-toggle="tab">Koordinat</a></li>
<li onclick="changetabs(this)"><a href="#right-tab2-feas-upl" data-toggle="tab">Informasi Umum</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="left-tab1-feas-upl">
<div id="map-jalan" style="width: 400px;height: 300px;position: relative;margin-left: 100px;"></div>
<div id="map-jalan" style="width:400px;height: 350px;"> <div class="form-group">
<label class="col-lg-2 control-label" style="margin-top:10px">Image</label>
<div class="col-lg-9" style="margin-top:10px">
<input type="file" id="imgbangunan" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif">
</div> </div>
<br> </div>
<table> </div>
<tr>
<th> <div class="tab-pane" id="right-tab2-feas-upl">
Image
</th> <div class="row" style="height: 337px;">
<td>
<input type="file" id="imgjalan" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif"> <input type="text" class="hidden" name="coordinatebangunan" id="coordinatebangunan" value="">
</td> <input type="text" name="idbangunan" id="idbangunan" class="form-control hidden" value="" disable>
</tr> <table style="margin-left: 50px;
width: 100vh;">
<tr> <tr>
<th> <th>
Nama Jalan Nama Jalan
...@@ -175,16 +187,25 @@ ...@@ -175,16 +187,25 @@
</tr> </tr>
</table> </table>
</div> </div>
</div>
<div class="modal-footer"> </div>
<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
<button type="button" id="btnsavejalan" class="btn btn-info">Save changes</button> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-link" onclick="destroyfade()" data-dismiss="modal">Close</button>
<button type="button" id="btnsavebangunan" class="btn btn-info">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<div id="modal_theme_info" class="modal fade"> <div id="modal_theme_info" class="modal fade">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content" style="width: 400px;margin-left: 100px;"> <div class="modal-content" style="width: 400px;margin-left: 100px;">
...@@ -216,36 +237,41 @@ ...@@ -216,36 +237,41 @@
<!-- modal bangunan --> <!-- modal bangunan -->
<div id="modal_bangunan_edit" class="modal fade"> <div id="modal_bangunan_edit" class="modal fade">
<div class="modal-dialog" style="width: max-content;height: max-content;"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header bg-info" style="background-color:#40777c;"> <div class="modal-header bg-info" style="background-color:#40777c;">
<button type="button" class="close" data-dismiss="modal">&times;</button> <button type="button" class="close" data-dismiss="modal">&times;</button>
<h6 class="modal-title">Edit Polygon Bangunan dan Informasinya</h6> <h6 class="modal-title">Edit Polygon Bangunan dan Informasinya</h6>
</div> </div>
<div class="modal-body" style="max-height: 450px;overflow-y: auto;"> <div class="modal-body" style="max-height: 450px;overflow-y: auto;">
<div class="row"> <div class="tab-pane has-padding" id="panel-tab2">
<div class="col-md-5"> <div class="tab-pane" id="bottom-justified-data">
<div id="map-edit" style="width:400px;height: 350px;">
<div class="tabbable">
<ul class="nav nav-tabs nav-tabs-bottom nav-justified">
<li onclick="changetabs(this)" class="active"><a href="#left-tab1-feas-upl" data-toggle="tab">Koordinat</a></li>
<li onclick="changetabs(this)"><a href="#right-tab2-feas-upl" data-toggle="tab">Informasi Umum</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="left-tab1-feas-upl">
<div id="map-edit" style="width: 400px;height: 300px;position: relative;margin-left: 100px;"></div>
<div class="form-group">
<label class="col-lg-2 control-label" style="margin-top:10px">Image</label>
<div class="col-lg-9" style="margin-top:10px">
<input type="file" id="imgbangunan" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif">
</div> </div>
</div> </div>
<div class="col-md-4"> </div>
<div class="tab-pane" id="right-tab2-feas-upl">
<div class="row" style="height: 337px;"></div>
<div class="col-md-6">
<input type="text" class="hidden" name="coordinatebangunan" id="coordinatebangunan" value=""> <input type="text" class="hidden" name="coordinatebangunan" id="coordinatebangunan" value="">
<table>
<tr>
<th>
Image
</th>
<td>
<input type="file" id="imgbangunan" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif">
<input style="display:none;" id="gambar" type="text" class="form-control" value=""required>
</td>
</tr>
<tr>
<th>Id</th>
<td>
<input type="text" name="idbangunan" id="idbangunan" class="form-control hidden" value="" disable> <input type="text" name="idbangunan" id="idbangunan" class="form-control hidden" value="" disable>
</td>
</tr> <table>
<tr> <tr>
<th>Nama Bangunan</th> <th>Nama Bangunan</th>
<td> <td>
...@@ -286,7 +312,7 @@ ...@@ -286,7 +312,7 @@
</table> </table>
</div> </div>
<div class="col-md-3 "> <div class="col-md-6">
<table> <table>
<tr> <tr>
...@@ -316,15 +342,22 @@ ...@@ -316,15 +342,22 @@
</table> </table>
</div> </div>
</div> </div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
<div class="modal-footer "> <div class="modal-footer ">
<button type="button " class="btn btn-link " data-dismiss="modal ">Close</button> <button type="button" class="btn btn-link" onclick="destroyfade()" data-dismiss="modal">Close</button>
<button type="button " id="btnsavebangunan" class="btn btn-info ">Save changes</button> <button type="button" id="btnsavebangunan" class="btn btn-info">Save changes</button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div id="modal_bangunan_delete" class="modal fade"> <div id="modal_bangunan_delete" class="modal fade">
<div class="modal-dialog" style="width: max-content;height: max-content;"> <div class="modal-dialog" style="width: max-content;height: max-content;">
...@@ -332,7 +365,9 @@ ...@@ -332,7 +365,9 @@
<div class="modal-header bg-info" style="background-color:#40777c;"> <div class="modal-header bg-info" style="background-color:#40777c;">
<table> <table>
<tr> <tr>
<th><h6 class="modal-title">Delete Bangunan dan Informasinya</h6></th> <th>
<h6 class="modal-title">Delete Bangunan dan Informasinya</h6>
</th>
<td><button type="button" class="close" data-dismiss="modal">&times;</button></td> <td><button type="button" class="close" data-dismiss="modal">&times;</button></td>
</tr> </tr>
</table> </table>
...@@ -372,7 +407,8 @@ ...@@ -372,7 +407,8 @@
<input type="text" name="coordinatetuplah" id="coordinatetuplah" class="form-control hidden" value=""> <input type="text" name="coordinatetuplah" id="coordinatetuplah" class="form-control hidden" value="">
<div class="modal-body" style="max-height: 450px;overflow-y: auto;"> <div class="modal-body" style="max-height: 450px;overflow-y: auto;">
<div id="map-edit-tuplah" style="width:400px;height: 350px;"> <div id="map-edit-tuplah" style="width: 400px;height: 300px;position: relative;margin-left: 100px;margin-left: 100px;
margin-right: 100px;">
</div> </div>
<br> <br>
<table> <table>
...@@ -403,3 +439,142 @@ ...@@ -403,3 +439,142 @@
<div class="modal fade" id="modal_adm"> <div class="modal fade" id="modal_adm">
</div> </div>
<div id="modal_point" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-info" style="background-color: #40777c;">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h6 class="modal-title">Insert Point</h6>
</div>
<input type="text" name="poly_create_point" class="hidden" id="poly_create_point" value="">
<div class="modal-body" style="max-height: 450px;overflow-y: auto;">
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label" style="margin-top:10px">Image</label>
<div class="col-lg-9" style="margin-top:10px">
<input type="file" id="gambar_pitik" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif">
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Nama Bangunan</label>
<div class="col-lg-9">
<input id="name_create_point" type="text" class="form-control" value="" required>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Tipe Point</label>
<div class="col-lg-9">
<select style="border-bottom: 1px solid rgb(83, 83, 83) !important;" id="tipe_point" data-placeholder="select point.." class="select-size-md">
<option value="null" selected disabled>-- Pilih Jenis Point --</option>
<option value="administrasi">Kantor Administrasi</option>
<option value="layanankesehatan">Layanan Kesehatan</option>
<option value="puskesmas">Puskesmas</option>
<option value="rumahsakit">Rumah Sakit</option>
<option value="saranaibadah">Sarana Ibadah</option>
<option value="saranapendidikan">Sarana Pendidikan</option>
<option value="spbu">SPBU</option>
<option value="stasiun">Stasiun</option>
<option value="terminalbus">Terminal Bus</option>
<option value="cagarbudaya">Cagar Budaya dan Tempat Wisata</option>
<option value="gardulistrik">Gardu Listrik</option>
</select>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Informasi Bangunan</label>
<div class="col-lg-9">
<input id="info_create_point" type="text" class="form-control" value="" placeholder="Rumah/Gedung/Ruko/Pabrik/dsb" required>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Alamat</label>
<div class="col-lg-9">
<input id="alamat_create_point" type="text" class="form-control" value="" placeholder="cth : Jl. Contoh Rt 005/01 No.01" required>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Luas Bangunan</label>
<div class="col-lg-6">
<input id="luas_bangunan_point" type="text" class="form-control" value="" required>
</div>
<div class="col-lg-3">
<select id="satuan_luas_bangunan" style="margin-top: 15px;">
<option>m2</option>
</select>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Luas Tanah</label>
<div class="col-lg-6">
<input id="luas_tanah_point" type="text" class="form-control" value="" required>
</div>
<div class="col-lg-3">
<select id="satuan_luas_tanah" style="margin-top: 15px;">
<option>m2</option>
</select>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Tinggi Bangunan</label>
<div class="col-lg-6">
<input id="tinggi_bangunan_point" type="text" class="form-control" value="" required>
</div>
<div class="col-lg-3" style="margin-top: 15px;">m</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Jumlah Lantai</label>
<div class="col-lg-9">
<input id="lantai_point" type="text" class="form-control" value="" placeholder="Estimasi Per Lantai = 3m" required>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Pemilik</label>
<div class="col-lg-9">
<input id="pemilik_point" type="text" class="form-control" value="" placeholder="cth : Ali Budiman, S.Si." required>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
<button type="button" id="btnsavepoint" class="btn btn-info">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
...@@ -4,8 +4,13 @@ ...@@ -4,8 +4,13 @@
<div class="navbar-header"> <div class="navbar-header">
<a class="navbar-brand gradient-text " href="{% url 'apps:dashboard' %}"> <a class="navbar-brand gradient-text " href="{% url 'apps:dashboard' %}">
<!-- <h3>NationalAddress</h3> --> <!-- <h3>NationalAddress</h3> -->
<i class="icon-location4 fa-gradient"></i> <i>
<b>&nbsp;&nbsp;OKU-GIS</b> <img src="{% static 'img/logo-ok.png' %}" alt="" style="position: absolute;
width: 26px;
top: 7px;">
</i>
<!-- <i class="icon-location4 fa-gradient"></i> -->
<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;OKU-GIS</b>
</a> </a>
<ul class="nav navbar-nav pull-right visible-xs-block"> <ul class="nav navbar-nav pull-right visible-xs-block">
......
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</div> </div>
</div> </div>
<div class="footer" id="thisFooter" style="bottom: 0px; left: 0px;"> <div class="footer" id="thisFooter" style="bottom: 10px; left: 0px;">
<input type="hidden" id="infoLongitude"> <input type="hidden" id="infoLongitude">
<input type="hidden" id="infoLatitude"> <input type="hidden" id="infoLatitude">
<input type="hidden" id="infoLimitx"> <input type="hidden" id="infoLimitx">
......
{% load static %} {% load static %}
<ul class="dock" style="right: 0;position: absolute;"> <ul class="dock" style="right: 0;position: absolute;">
<li class="fixed-plugin" style="top: 100px;"> <li class="fixed-plugin" style="top: 100px;">
<div class="dropdown show-dropdown"> <div class="dropdown show-dropdown" style="top: 1px;">
<a href="#" data-toggle="dropdown"> <a href="#" data-toggle="dropdown">
<i class="fa fa-map-o fa-2x" style="color: white; <i class="fa fa-map-o fa-2x" style="color: white;
padding: 10px; margin: 10px 10px;
border-radius: 0 0 6px 6px;
width: auto;"> </i> width: auto;"> </i>
</a> </a>
<ul class="dropdown-menu" x-placement="bottom-start"> <ul class="dropdown-menu" x-placement="bottom-start">
...@@ -62,10 +61,9 @@ ...@@ -62,10 +61,9 @@
<a href="#" data-toggle="dropdown"> <a href="#" data-toggle="dropdown">
<i class="fa fa-cog fa-2x" style="font-size: 36px; <i class="fa fa-cog fa-2x" style="font-size: 36px;
color: white; color: white;
margin: 4px; margin: 6px 9px;"> </i>
margin-left: 10px;"> </i>
</a> </a>
<ul class="dropdown-menu"> <ul class="dropdown-menu" style="top: -5px;">
<li class="header-title text-center">Sidebar Filters</li> <li class="header-title text-center">Sidebar Filters</li>
<!-- <div id="sidebar" onmouseleave="overll()"> <!-- <div id="sidebar" onmouseleave="overll()">
<div class="sidebar-wrapper"> <div class="sidebar-wrapper">
......
...@@ -353,7 +353,7 @@ ...@@ -353,7 +353,7 @@
margin-right: 3px; margin-right: 3px;
position: absolute; position: absolute;
top: calc(100% - 196px); top: calc(100% - 196px);
right: calc(50% - 0px); right: calc(95% / 2);
z-index: 99999999; z-index: 99999999;
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
border: 0; border: 0;
...@@ -373,7 +373,7 @@ ...@@ -373,7 +373,7 @@
margin-right: 3px; margin-right: 3px;
position: absolute; position: absolute;
top: calc(100% - 23px); top: calc(100% - 23px);
right: calc(50% - 0px); right: calc(95%/2);
z-index: 99999999; z-index: 99999999;
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
border: 0; border: 0;
...@@ -391,14 +391,29 @@ ...@@ -391,14 +391,29 @@
left: 408px !important; left: 408px !important;
transform: translate(0, 0); transform: translate(0, 0);
} }
/*.fixed-plugin {*/
/* position: absolute;*/
/* z-index: 1000;*/
/* right: 0px;*/
/* background-color: #40777c;*/
/* border-top-left-radius: 10px;*/
/* border-bottom-left-radius: 10px;*/
/* margin-top: 5px;*/
/* width: 48px;*/
/* height: 48px;*/
/* box-shadow: 0 0 20px rgb(0 0 0 / 30%);*/
/* transition: 0.3s ease-out;*/
/* display: inline-block;*/
/*}*/
.fixed-plugin { .fixed-plugin {
position: absolute; position: absolute;
z-index: 1000; z-index: 1000;
right: 0px; right: 10px;
background-color: #40777c; background-color: #40777c;
border-top-left-radius: 10px; border-top-left-radius: 10px;
border-bottom-left-radius: 10px; border-bottom-left-radius: 10px;
border-radius: 10px;
margin-top: 5px; margin-top: 5px;
width: 48px; width: 48px;
height: 48px; height: 48px;
...@@ -414,27 +429,29 @@ ...@@ -414,27 +429,29 @@
width: 550px; width: 550px;
margin-left: -560px !important; margin-left: -560px !important;
margin-top: -40px !important; margin-top: -40px !important;
top: 10px;
box-shadow: 0 0 20px rgb(0 0 0 / 30%); box-shadow: 0 0 20px rgb(0 0 0 / 30%);
border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px;
} }
li.fixed-plugin:hover { li.fixed-plugin:hover {
/*transform: scale(1.3);*/ transform: scale(1.3);
right: 0; right: 10px;
/*margin-right: 7px;*/ /*margin-right: 7px;*/
position: relative; /*position: relative;*/
}
li.fixed-plugin .dropdown-menu {
transform: scale(0.769230);
float: right;
position: absolute;
right: -550px;
width: 550px;
margin-left: -490px !important;
margin-top: -40px !important;
top: 10px;
margin-right: -550px;
} }
/*li.fixed-plugin:hover .dropdown-menu {*/
/* transform: scale(0.769230);*/
/* float: right;*/
/* position: absolute;*/
/* right: -550px;*/
/* width: 550px;*/
/* margin-left: -490px !important;*/
/* margin-top: -40px !important;*/
/* top: 0;*/
/* margin-right: -550px;*/
/*}*/
li.fixed-plugin .fa:hover { li.fixed-plugin .fa:hover {
transform: rotate(180deg); transform: rotate(180deg);
...@@ -454,6 +471,23 @@ ...@@ -454,6 +471,23 @@
display: block; display: block;
} }
#map-create-admin>div.leaflet-control-container {
display: block;
}
#map-create-admin>a.leaflet-draw-draw-polyline {
display: none!important;
}
#map-create-admin>div.leaflet-control-container>div.leaflet-top.leaflet-left>div:nth-child(1)>div>div>a.leaflet-draw-draw-polyline,
#map-create-admin>div.leaflet-control-container>div.leaflet-top.leaflet-left>div:nth-child(2) {
display: none;
}
#map-create-admin>div.leaflet-control-container>div.leaflet-top.leaflet-right {
display: none!important;
}
#map-insert>div.leaflet-control-container>div.leaflet-top.leaflet-left>div:nth-child(2) { #map-insert>div.leaflet-control-container>div.leaflet-top.leaflet-left>div:nth-child(2) {
display: none; display: none;
} }
...@@ -461,7 +495,6 @@ ...@@ -461,7 +495,6 @@
.leaflet-draw-draw-polygon, .leaflet-draw-draw-polygon,
.leaflet-draw-draw-rectangle, .leaflet-draw-draw-rectangle,
.leaflet-draw-draw-circle, .leaflet-draw-draw-circle,
.leaflet-draw-draw-marker,
.leaflet-draw-draw-circlemarker { .leaflet-draw-draw-circlemarker {
display: none!important; display: none!important;
} }
...@@ -478,6 +511,10 @@ ...@@ -478,6 +511,10 @@
.leaflet-container ul li a { .leaflet-container ul li a {
color: #333333; color: #333333;
} }
.modal-dialog {
margin-top: 48px;
}
</style> </style>
{% include 'includes/css-o.html' %} {% include 'includes/css-m.html' %} {% include 'includes/css-o.html' %} {% include 'includes/css-m.html' %}
...@@ -551,17 +588,77 @@ ...@@ -551,17 +588,77 @@
<div class="panel panel-default" id="features"> <div class="panel panel-default" id="features">
<div class="sidebar-table" id="isi_panel"> <div class="sidebar-table" id="isi_panel" style="margin-top: 48px;">
<!-- <input type="submit" value="submit"> --> <table class="table tasks-list">
<!-- <a href="" id="btn_edit_kelurahan" style="position: absolute; <thead style="text-align: center;">
top: 240px; <tr>
right: 5px;">Edit</a> --> <th class="text-center" style="padding: 0 0 0 0px;">
<table class="table table-hover tasks-list"> <img src="{% static 'img/logo-ok.png' %}" alt="" style="max-height: 368px">
</th>
<!-- panel samping js disini --> </tr>
</thead>
<tbody>
<div class="container">
<tr style="height: 100px;">
<th class="text-center">
<div>
<h1 style="font-family: Google Sans,Roboto,Arial,sans-serif;
letter-spacing: 0;
font-weight: 400;">
<span style="font-size: x-large;">
OGAN KOMERING ULU
</span>
</h1>
</div>
</th>
</tr>
</div>
<div class="container">
<tr>
<th>
<div class="form-group" style="margin-left: 80px;">
<table>
<tr>
<th>Luas Wilayah</th>
<td>: {{ global.1 }} km2</td>
</tr>
<tr>
<th>Jumlah Kecamatan</th>
<td>: {{ global.5 }} Kecamatan</td>
</tr>
<tr>
<th>Jumlah Kelurahan</th>
<td>: {{ global.6 }} Kelurahan</td>
</tr>
<tr>
<th>Jumlah Penduduk</th>
<td>: {{ global.19 }} Jiwa</td>
</tr>
<tr>
<th>Jumlah KK</th>
<td>: {{ global.20 }} KK</td>
</tr>
<tr>
<th>Jumlah Laki-laki</th>
<td>: {{ global.21 }} Jiwa</td>
</tr>
<tr>
<th>Jumlah Perempuan</th>
<td>: {{ global.22 }} Jiwa</td>
</tr>
</table> </table>
</div>
</th>
</tr>
</div>
</tbody>
</table>
</div> </div>
</div> </div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment