Skip to content

O
OKU-GIS
Commit 895f1d4e authored by Muhamad's avatar Muhamad
Browse files
Options

perbaikan 3d

parent 96f254b9
Hide whitespace changes
Inline Side-by-side
Showing with 827 additions and 637 deletions
API/views.py
View file @ 895f1d4e
...@@ -48,9 +48,9 @@ import random ...@@ -48,9 +48,9 @@ import random
@api_view(('GET',)) @api_view(('GET',))
@renderer_classes((TemplateHTMLRenderer, JSONRenderer)) @renderer_classes((TemplateHTMLRenderer, JSONRenderer))
def search_auto(request): def search_auto(request):
nama_desa = request.GET.get('namadesa')
with conn.cursor() as desa: with conn.cursor() as desa:
desa.execute(f"SELECT id, desa, kecamatan FROM geo_data_kelurahan WHERE desa ILIKE '{nama_desa}%' order by desa ASC limit 5") desa.execute(f"SELECT id, desa, kecamatan FROM geo_data_kelurahan order by desa ASC")
all = desa.fetchall() all = desa.fetchall()
data = {'nama_des':all} data = {'nama_des':all}
...@@ -737,22 +737,116 @@ def hapus(request): ...@@ -737,22 +737,116 @@ def hapus(request):
print(respon) print(respon)
return Response(respon) return Response(respon)
@api_view(('GET',)) @api_view(('GET',))
@renderer_classes((TemplateHTMLRenderer, JSONRenderer)) @renderer_classes((TemplateHTMLRenderer, JSONRenderer))
def hasilsearch(request): def hasilsearch(request):
if request.method == 'GET': if request.method == 'GET':
id_desa = request.GET.get("id_desa_search") nama_desa = request.GET.get("id_desa_search")
nama_desa = nama_desa.split(",")[0]
with conn.cursor() as bts:
bts.execute("""
SELECT
st_asgeojson ( ST_ExteriorRing ( the_geom ) ) AS erings
FROM
( SELECT ( ST_Dump ( geom ) ).geom AS the_geom FROM geo_data_kelurahan WHERE desa = '%s' ) as foo
"""% nama_desa)
batas = bts.fetchall()
# batas_desa = json.loads(batas)
line_o = []
for i in batas:
o_pol1 = ''
o_poly = []
for x in json.loads(i[0])['coordinates']:
o_pol1 += (f'{x[0]},{x[1]}""')
o_pol2 = o_pol1.replace('""1',',1')
with conn.cursor() as kel: o_poly.append(o_pol2.replace('""',''))
kel.execute("SELECT json_build_object('type', 'Feature', 'administrasi', (kode_desa, desa, kecamatan, kab_kota, provinsi, jumlah_pen, jumlah_kk, luas_desa),'penduduk', (pria, wanita, belum_kawin, kawin, cerai_hidup, cerai_mati, wajib_ktp, islam, kristen, khatolik, hindu, budha, konghucu, kepercayaan_lain, u0, u5, u10, u15, u20, u25, u30, u35, u40, u45, u50, u55, u60, u65, u70, u75),'pekerjaan_pendidikan', (tidak_sekolah, belum_tamat, tamat_sd, sltp, slta, diploma_i, diploma_ii, diploma_iv, strata_ii, strata_iii, tidak_bekerja, aparatur_pemerintah, tenaga_pendidik, wiraswasta, pertanian, tenaga_kesehatan, pensiunan, pegawai, tentara, kepolisian, pedagang, petani, peternak, nelayan, karyawan, buruh, pembantu, tukang, pendeta, pastor, ustadz, dosen, guru, pilot, pengacara, notaris, arsitek, akuntan, konsultan, dokter, bidan, perawat, psikiater, sopir, lainnya),'geometry', ST_AsGeoJSON(geom :: geometry) :: json) from geo_data_kelurahan where id = %s"% int(id_desa))
kel_res_ = kel.fetchall() line_o.append(o_poly)
with conn.cursor() as desa:
desa.execute("""
SELECT
ST_AsGeoJson ( ST_centroid ( geom ) )
FROM
geo_data_kelurahan
WHERE
desa = '%s'"""% nama_desa)
lat_lng = desa.fetchall()
with conn.cursor() as bang:
bang.execute("""SELECT
json_build_object (
'type',
'Feature',
'properties',
( buildings.ID, buildings.NAME, buildings.information ),
'administrasi',
(
buildings.address_1,
buildings.address_2,
buildings.address_3,
buildings.provinsi,
buildings.alamat,
buildings.luas_bangunan,
buildings.luas_tanah,
buildings.tinggi_bangunan,
buildings.gambar,
buildings.pemilik
),
'geometry',
ST_AsGeoJSON ( buildings.geom :: geometry ) :: json
)
FROM
geo_bangunan buildings
JOIN geo_data_kelurahan desa ON st_intersects ( ST_SetSRID(desa.geom, 0), buildings.geom )
WHERE
desa.desa = '%s'"""% nama_desa)
kel_res = [] bangunan = bang.fetchall()
for i in kel_res_:
kel_res.append(i[0]) polygon_o = []
info_polygon = []
tinggi_pol = []
for i in bangunan:
o_pol1 = ''
o_poly = []
for x in i[0]['geometry']['coordinates'][0][0]:
o_pol1 += (f'{x[0]},{x[1]}""')
o_pol2 = o_pol1.replace('""1',',1')
data = {'result':kel_res} o_poly.append(o_pol2.replace('""',''))
return Response(data)
polygon_o.append(o_poly)
tinggi_pol.append(i[0]['administrasi']['f8'])
info_polygon.append(i[0]['properties']['f1'])
# for i in batas:
# o_batas = ''
# o_poly_batas = []
# for x in i[0]['geometry']['coordinates'][0][0]:
# o_batas += (f'{x[0]},{x[1]}""')
# o_pol2 = o_pol1.replace('""1',',1')
# o_poly.append(o_pol2.replace('""',''))
# polygon_o.append(o_poly)
# tinggi_pol.append(i[0]['administrasi']['f8'])
# info_polygon.append(i[0]['properties']['f1'])
lat = json.loads(lat_lng[0][0])['coordinates'][0]
lng = json.loads(lat_lng[0][0])['coordinates'][1]
respon={'polygon_o':polygon_o,'tinggi_pol':tinggi_pol, 'info_polygon': info_polygon, 'lat':lat, 'lng':lng, 'line_o':line_o}
return Response(respon)
import random import random
......
templates/includes/js-m.html
View file @ 895f1d4e
{% 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;
} }
...@@ -14,7 +15,7 @@ ...@@ -14,7 +15,7 @@
#btn_edit_bangunan { #btn_edit_bangunan {
display: block; display: block;
} }
#btn_delete_bangunan { #btn_delete_bangunan {
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;
} }
...@@ -69,8 +71,8 @@ ...@@ -69,8 +71,8 @@
#btn_edit_si { #btn_edit_si {
display: block; display: block;
} }
.leaflet-popup{ .leaflet-popup {
display: block; display: block;
} }
</style> </style>
...@@ -79,7 +81,7 @@ ...@@ -79,7 +81,7 @@
<script> <script>
var kantor_administrasi = "{{ kantor_administrasi }}".replace(/&#x27;/g, '"'); var kantor_administrasi = "{{ kantor_administrasi }}".replace(/&#x27;/g, '"');
var result_kan_adm = JSON.parse("" + kantor_administrasi + "") var result_kan_adm = JSON.parse("" + kantor_administrasi + "")
console.log(result_kan_adm) console.log(result_kan_adm)
geo_po_adm = L.geoJson(null, { geo_po_adm = L.geoJson(null, {
pointToLayer: function(feature, latlng) { pointToLayer: function(feature, latlng) {
...@@ -275,8 +277,7 @@ ...@@ -275,8 +277,7 @@
offset: [0, 0] offset: [0, 0]
}); });
return marker return marker
} } else if (feature.administrasi.f2 == 'none') {
else if (feature.administrasi.f2 == 'none') {
var smallIcon = new L.Icon({ var smallIcon = new L.Icon({
iconSize: [20, 20], iconSize: [20, 20],
iconAnchor: [13, 27], iconAnchor: [13, 27],
...@@ -306,7 +307,7 @@ ...@@ -306,7 +307,7 @@
var geogeo = geocodeService.reverse().latlng(e.latlng).run(function(error, result) { var geogeo = geocodeService.reverse().latlng(e.latlng).run(function(error, result) {
tay = result.address.Address; tay = result.address.Address;
console.log(feature.administrasi.f8) console.log(feature.administrasi.f8)
// aladije(result.address.Address) // aladije(result.address.Address)
if (feature.administrasi.f3 == 'alamat') { if (feature.administrasi.f3 == 'alamat') {
if (tay != '') { if (tay != '') {
var alamak = tay; var alamak = tay;
...@@ -408,7 +409,7 @@ ...@@ -408,7 +409,7 @@
</div> </div>
</tbody> </tbody>
</table>`; </table>`;
content_delete_adm = ` content_delete_adm = `
<div class="modal-dialog md"> <div class="modal-dialog md">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header bg-info" style="background-color: #40777c !important;"> <div class="modal-header bg-info" style="background-color: #40777c !important;">
...@@ -447,7 +448,7 @@ ...@@ -447,7 +448,7 @@
</div> </div>
</div> </div>
</div>`; </div>`;
content_edit_adm = ` content_edit_adm = `
<div class="modal-dialog md"> <div class="modal-dialog md">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header bg-info" style="background-color: #40777c !important;"> <div class="modal-header bg-info" style="background-color: #40777c !important;">
...@@ -558,11 +559,11 @@ ...@@ -558,11 +559,11 @@
</div> </div>
</div> </div>
</div>`; </div>`;
$("#isi_panel").html(content) $("#isi_panel").html(content)
$("#modald_adm").html(content_delete_adm) $("#modald_adm").html(content_delete_adm)
$("#modal_adm").html(content_edit_adm) $("#modal_adm").html(content_edit_adm)
}) })
hidelegend(); hidelegend();
} }
}) })
...@@ -655,7 +656,7 @@ ...@@ -655,7 +656,7 @@
data.append('alamat', $('#alamat_adm_edit').val()) data.append('alamat', $('#alamat_adm_edit').val())
data.append('perangkat', $('#perangkat_adm_edit').val()) data.append('perangkat', $('#perangkat_adm_edit').val())
data.append('point', poi), data.append('point', poi),
data.append('gambar', $('#gambar_adm_edit').val()) data.append('gambar', $('#gambar_adm_edit').val())
$.ajax({ $.ajax({
url: "{% url 'api:kantor' %}", url: "{% url 'api:kantor' %}",
...@@ -720,7 +721,7 @@ ...@@ -720,7 +721,7 @@
map_delete.setView([data['geometry']['coordinates'][1], data['geometry']['coordinates'][0]], 19); map_delete.setView([data['geometry']['coordinates'][1], data['geometry']['coordinates'][0]], 19);
let dapoin = [data['geometry']['coordinates'][1], data['geometry']['coordinates'][0]] let dapoin = [data['geometry']['coordinates'][1], data['geometry']['coordinates'][0]]
var poinin = L.marker(dapoin).addTo(map_delete) var poinin = L.marker(dapoin).addTo(map_delete)
// poinin.enableEdit(); // poinin.enableEdit();
$('#saveeditadm').click(function() { $('#saveeditadm').click(function() {
var hasil = (JSON.stringify(poinin.toGeoJSON())) var hasil = (JSON.stringify(poinin.toGeoJSON()))
$("#coordinateZoneedit_adm_del").val(hasil); $("#coordinateZoneedit_adm_del").val(hasil);
...@@ -1109,7 +1110,7 @@ ...@@ -1109,7 +1110,7 @@
data.append('alamat', $('#alamat_lk_edit').val()) data.append('alamat', $('#alamat_lk_edit').val())
data.append('perangkat', $('#perangkat_lk_edit').val()) data.append('perangkat', $('#perangkat_lk_edit').val())
data.append('point', poi), data.append('point', poi),
data.append('gambar', $('#gambar_lk_edit').val()) data.append('gambar', $('#gambar_lk_edit').val())
$.ajax({ $.ajax({
url: "{% url 'api:layanankesehatan' %}", url: "{% url 'api:layanankesehatan' %}",
...@@ -1657,7 +1658,7 @@ ...@@ -1657,7 +1658,7 @@
</div> </div>
</tbody> </tbody>
</table>`; </table>`;
content_edit_rs=` content_edit_rs = `
<div class="modal-dialog md"> <div class="modal-dialog md">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header bg-info" style="background-color: #40777c !important;"> <div class="modal-header bg-info" style="background-color: #40777c !important;">
...@@ -2676,7 +2677,7 @@ ...@@ -2676,7 +2677,7 @@
data.append('alamat', $('#alamat_sp_edit').val()) data.append('alamat', $('#alamat_sp_edit').val())
data.append('perangkat', $('#perangkat_sp_edit').val()) data.append('perangkat', $('#perangkat_sp_edit').val())
data.append('point', poi), data.append('point', poi),
data.append('gambar', $('#gambar_sp_edit').val()) data.append('gambar', $('#gambar_sp_edit').val())
$.ajax({ $.ajax({
url: "{% url 'api:sekolah' %}", url: "{% url 'api:sekolah' %}",
...@@ -4411,7 +4412,7 @@ ...@@ -4411,7 +4412,7 @@
data.append('alamat', $('#alamat').val()) data.append('alamat', $('#alamat').val())
data.append('perangkat', $('#perangkat').val()) data.append('perangkat', $('#perangkat').val())
data.append('point', poi), data.append('point', poi),
data.append('gambar', $('#gambar').val()) data.append('gambar', $('#gambar').val())
$.ajax({ $.ajax({
url: "{% url 'api:gardu' %}", url: "{% url 'api:gardu' %}",
...@@ -4483,18 +4484,18 @@ ...@@ -4483,18 +4484,18 @@
} }
function showpanel(content) { function showpanel(content) {
$("#button_hide_panel").css("display", "block") $("#button_hide_panel").css("display", "block")
// $("#thisFooter").css('left', '380px'); // $("#thisFooter").css('left', '380px');
// $("#thisFooter").css('width', '930px'); // $("#thisFooter").css('width', '930px');
// //
$("#isi_panel").html(content); $("#isi_panel").html(content);
} }
function showlegend() { function showlegend() {
$("#legendapo").css('display', 'block'); $("#legendapo").css('display', 'block');
} }
function hidelegend() { function hidelegend() {
...@@ -4518,14 +4519,14 @@ ...@@ -4518,14 +4519,14 @@
if ((checkBox1.checked == true) || (checkBox2.checked == true) || (checkBox3.checked == true) || (checkBox4.checked == true) || (checkBox5.checked == true) || (checkBox6.checked == true) || (checkBox7.checked == true) || (checkBox8.checked == true) || (checkBox9.checked == true) || (checkBox10.checked == true) || (checkBox11.checked == true) || (checkBox12.checked == true)) { if ((checkBox1.checked == true) || (checkBox2.checked == true) || (checkBox3.checked == true) || (checkBox4.checked == true) || (checkBox5.checked == true) || (checkBox6.checked == true) || (checkBox7.checked == true) || (checkBox8.checked == true) || (checkBox9.checked == true) || (checkBox10.checked == true) || (checkBox11.checked == true) || (checkBox12.checked == true)) {
showlegend() showlegend()
} else if ((checkBox1.checked == false) && (checkBox2.checked == false) && (checkBox3.checked == false) && (checkBox4.checked == false) && (checkBox5.checked == false) && (checkBox6.checked == false) && (checkBox7.checked == false) && (checkBox8.checked == false) && (checkBox9.checked == false) && (checkBox10.checked == false) && (checkBox11.checked == false) && (checkBox12.checked == false)) { } else if ((checkBox1.checked == false) && (checkBox2.checked == false) && (checkBox3.checked == false) && (checkBox4.checked == false) && (checkBox5.checked == false) && (checkBox6.checked == false) && (checkBox7.checked == false) && (checkBox8.checked == false) && (checkBox9.checked == false) && (checkBox10.checked == false) && (checkBox11.checked == false) && (checkBox12.checked == false)) {
hidelegend() hidelegend()
} }
} }
...@@ -4543,10 +4544,10 @@ ...@@ -4543,10 +4544,10 @@
map.removeLayer(marques); map.removeLayer(marques);
map.addLayer(marques); map.addLayer(marques);
map.removeLayer(xnxx); map.removeLayer(xnxx);
$("#legendapo").css('display', 'block'); $("#legendapo").css('display', 'block');
} else { } else {
$("#legendapo").css('display', 'none'); $("#legendapo").css('display', 'none');
map.removeLayer(marques); map.removeLayer(marques);
} }
...@@ -4604,175 +4605,229 @@ ...@@ -4604,175 +4605,229 @@
} }
} }
//3d begin //3d begin
function map3d() { Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhOTc0NDkxMi02N2NkLTQwYjMtOTE1Yi1iMGNkZDU0Zjg3MGMiLCJpZCI6NDQ1ODgsImlhdCI6MTYxNDE0NjM5NH0.sRHzNNa7uV_huqGxERySWlL8J5UVx1VwU-pRwNd0GJk';
var checkBox_3d = document.getElementById("3d-maps");
if (checkBox_3d.checked == true) {
$("#map").css('display', 'none');
$("#map-cesium").css('display', 'block');
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhOTc0NDkxMi02N2NkLTQwYjMtOTE1Yi1iMGNkZDU0Zjg3MGMiLCJpZCI6NDQ1ODgsImlhdCI6MTYxNDE0NjM5NH0.sRHzNNa7uV_huqGxERySWlL8J5UVx1VwU-pRwNd0GJk'; var map_cesium = new Cesium.Viewer('map-cesium');
var worldTerrain = new Cesium.ArcGISTiledElevationTerrainProvider({ //
url:
"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', {
// terrainProvider: worldTerrain,
// });
map_cesium.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(104.171696, -4.120217, 10000)
});
map_cesium.camera.moveEnd.addEventListener(function() {
var windowPosition = new Cesium.Cartesian2(map_cesium.container.clientWidth / 2, map_cesium.container.clientHeight / 2);
var pickRay = map_cesium.scene.camera.getPickRay(windowPosition);
var pickPosition = map_cesium.scene.globe.pick(pickRay, map_cesium.scene);
var pickPositionCartographic = map_cesium.scene.globe.ellipsoid.cartesianToCartographic(pickPosition);
var longitudee = pickPositionCartographic.longitude * (180 / Math.PI);
var lattitudee = pickPositionCartographic.latitude * (180 / Math.PI);
// map_cesium.terrainProvider = worldTerrain;
console.log(lattitudee)
console.log(longitudee)
$.ajax({ //
url: "{% url 'api:3d-maps' %}", //function mapsganti() {
data: { // $("#modalsearch3d").modal()
'latt': lattitudee, //}
'loog': longitudee
},
dataType: 'json',
success: function(data) {
for (var i = 0; i < data["polygon_o"].length; i++) {
polygon_oo = data["polygon_o"][i][0].replace(/&#x27;/g, '');
poll = JSON.parse("[" + polygon_oo + "]");
var poly_osm = map_cesium.entities.add({
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray(
poll
),
height: 0,
material: Cesium.Color.FLORALWHITE.withAlpha(0.7),
outline: true,
outlineColor: Cesium.Color.GREEN,
},
name: data["info_polygon"][i]
});
poly_osm.polygon.extrudedHeight = data["tinggi_pol"][i];
// poly_osm.polygon.extrudedHeight = 10;
// console.log(data["tinggi_pol"])
};
}
});
});
map_cesium.selectedEntityChanged.addEventListener(function(selectedEntity) {
if (Cesium.defined(selectedEntity)) {
if (Cesium.defined(selectedEntity.name)) {
var id_poly = selectedEntity.name
$.ajax({
url: "{% url 'api:edit' %}",
data: {
'id_poly': id_poly
},
dataType: 'json',
success: function(data) {
if (data['administrasi']['f9'] == 'None') {
var path_img = "static/img/image_null.jpg"
} else {
var path_img = `"static/image/bangunan/` + data['administrasi']['f9'] + `"`
}
content = `<table class="table table-hover tasks-list">
<thead style="text-align: center;">
<tr>
<th style="padding: 0 0 0 0px;">
<img src=` + path_img + ` alt="Image" style="width: 100%;max-height: 237px;height:237">
</th>
</tr>
</thead>
<tbody>
<div class= "container">
<tr style="height: 100px;">
<th>
<div>
<h1 style="font-family: Google Sans,Roboto,Arial,sans-serif;
letter-spacing: 0;
font-weight: 400;">
<span style="font-size: x-large;">
` + data['properties']['f2'] + `
</span>
</h1>
</div>
</th>
</tr>
</div>
<div class= "container">
<tr style="height: 30px;">
<th>
<span>
` + data['properties']['f3'] + `
</span>
</th>
</tr>
</div>
<div class= "container">
<tr style="height: 40px;">
<th>
<span>
` + data['administrasi']['f1'] + `, ` + data['administrasi']['f2'] + `, ` + data['administrasi']['f3'] + `, ` + data['administrasi']['f4'] + `
</span>
</th>
</tr>
</div>
<div class= "container">
<tr style="height: 40px;">
<th>
<p>
<span>Luas Bangunan : ` + data['administrasi']['f6'] + `</span>
</p>
<p>
<span>Luas Tanah : ` + data['administrasi']['f7'] + `</span>
</p>
<p>
<span>Tinggi Bangunan : ` + data['administrasi']['f8'] + `</span>
</p>
<p>
<span>Pemilik : ` + data['administrasi']['f10'] + `</span>
</p>
</th>
</tr>
</div>
</tbody>
</table>`;
$("#isi_panel").html(content)
} function mapsganti() {
}) var checkBox_3d = document.getElementById("mapschange");
console.log('Selected ' + selectedEntity.name); if (checkBox_3d.checked == true) {
} else { $("#modalsearch3d").modal()
console.log('Unknown entity selected.'); $.ajax({
url: "{% url 'api:search'%}",
data: {
'namadesa': 'search'
},
dataType: 'json',
success: function(response) {
var len = response['nama_des'].length;
var data_de = []
for (var i = 0; i < len; i++) {
var id = response['nama_des'][i][0];
var desa = response['nama_des'][i][1];
var kec = response['nama_des'][i][2];
var da = `<option value="` + desa + `,` + kec + `">` + desa + `,` + kec + `</option>`;
data_de.push(da)
} }
} else { $("#search_desa").html(data_de);
console.log('Deselected.');
} }
}); })
} else { } else {
//location.reload();
// $("#labelchange").html(`<h1 style="color: white;margin-top: 5px;margin-left: 8px;">
// 3D
//</h1>`)
//map_cesium.entities.removeAll(); //map_cesium.entities.removeAll();
//map_cesium.destroy(); //map_cesium.destroy();
setTimeout(function() { setTimeout(function() {
map.invalidateSize(); map.invalidateSize();
}, 1000); }, 1000);
$("#map").css('display', 'block'); $("#map").css('display', 'block');
$(".no3d").css('display', 'block')
$("#map-cesium").css('display', 'none'); $("#map-cesium").css('display', 'none');
//$(".filter3d").removeClass("d3filter");
} }
} }
//3d end
$("#search3D").click(function() {
$("#map").css('display', 'none');
$("#map-cesium").css('display', 'block');
$(".no3d").css('display', 'none')
$("#labelchange").html(`<h1 style="color: white;margin-top: 5px;margin-left: 8px;">
2D
</h1>`)
var nama_desa = $("#search_desa").val();
$.ajax({
url: "{% url 'api:ressearch' %}",
data: {
'id_desa_search': nama_desa
},
dataType: 'json',
success: function(data) {
$("#modalsearch3d").modal("toggle")
console.log(data['polygon_o'])
console.log(data['line_o'])
map_cesium.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(data['lat'], data['lng'], 750)
});
for (var i = 0; i < data["polygon_o"].length; i++) {
polygon_oo = data["polygon_o"][i][0].replace(/&#x27;/g, '');
poll = JSON.parse("[" + polygon_oo + "]");
var poly_osm = map_cesium.entities.add({
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray(
poll
),
height: 0,
material: Cesium.Color.FLORALWHITE.withAlpha(0.7),
outline: true,
outlineColor: Cesium.Color.GREEN,
},
name: data["info_polygon"][i]
});
poly_osm.polygon.extrudedHeight = data["tinggi_pol"][i];
// poly_osm.polygon.extrudedHeight = 10;
// console.log(data["tinggi_pol"])
};
for (var i = 0; i < data["line_o"].length; i++) {
line_oo = data["line_o"][i][0].replace(/&#x27;/g, '');
lin = JSON.parse("[" + line_oo + "]");
var redLine = map_cesium.entities.add({
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray(
lin
),
width: 5,
material: Cesium.Color.RED,
clampToGround: true,
},
});
}
map_cesium.selectedEntityChanged.addEventListener(function(selectedEntity) {
if (Cesium.defined(selectedEntity)) {
if (Cesium.defined(selectedEntity.name)) {
var id_poly = selectedEntity.name
$.ajax({
url: "{% url 'api:edit' %}",
data: {
'id_poly': id_poly
},
dataType: 'json',
success: function(data) {
if (data['administrasi']['f9'] == 'None') {
var path_img = "static/img/image_null.jpg"
} else {
var path_img = `"static/image/bangunan/` + data['administrasi']['f9'] + `"`
}
content = `<table class="table table-hover tasks-list">
<thead style="text-align: center;">
<tr>
<th style="padding: 0 0 0 0px;">
<img src=` + path_img + ` alt="Image" style="width: 100%;max-height: 237px;height:237">
</th>
</tr>
</thead>
<tbody>
<div class= "container">
<tr style="height: 100px;">
<th>
<div>
<h1 style="font-family: Google Sans,Roboto,Arial,sans-serif;
letter-spacing: 0;
font-weight: 400;">
<span style="font-size: x-large;">
` + data['properties']['f2'] + `
</span>
</h1>
</div>
</th>
</tr>
</div>
<div class= "container">
<tr style="height: 30px;">
<th>
<span>
` + data['properties']['f3'] + `
</span>
</th>
</tr>
</div>
<div class= "container">
<tr style="height: 40px;">
<th>
<span>
` + data['administrasi']['f1'] + `, ` + data['administrasi']['f2'] + `, ` + data['administrasi']['f3'] + `, ` + data['administrasi']['f4'] + `
</span>
</th>
</tr>
</div>
<div class= "container">
<tr style="height: 40px;">
<th>
<p>
<span>Luas Bangunan : ` + data['administrasi']['f6'] + `</span>
</p>
<p>
<span>Luas Tanah : ` + data['administrasi']['f7'] + `</span>
</p>
<p>
<span>Tinggi Bangunan : ` + data['administrasi']['f8'] + `</span>
</p>
<p>
<span>Pemilik : ` + data['administrasi']['f10'] + `</span>
</p>
</th>
</tr>
</div>
</tbody>
</table>`;
$("#isi_panel").html(content)
}
})
console.log('Selected ' + selectedEntity.name);
} else {
console.log('Unknown entity selected.');
}
} else {
console.log('Deselected.');
}
});
}
});
});
function load3dbang() {
$(".label-bangunan").css("display", "none");
}
//3d end
var geocodeService = L.esri.Geocoding.geocodeService(); var geocodeService = L.esri.Geocoding.geocodeService();
var geocoderNominatim = new L.Control.Geocoder.Nominatim(); var geocoderNominatim = new L.Control.Geocoder.Nominatim();
...@@ -4816,22 +4871,22 @@ ...@@ -4816,22 +4871,22 @@
var path_img = `"static/image/bangunan/` + feature.administrasi.f9 + `"` var path_img = `"static/image/bangunan/` + feature.administrasi.f9 + `"`
} }
console.log(feature.administrasi.f11) console.log(feature.administrasi.f11)
// if (feature.administrasi.f11 != 'None'){ // if (feature.administrasi.f11 != 'None'){
// var cbb = `<option value="null" disabled>-- Pilih Jenis Point --</option> // var cbb = `<option value="null" disabled>-- Pilih Jenis Point --</option>
// <option value="bangunan" `if(feature.administrasi.f11 != 'bangunan'){`selected`};` >Bangunan Biasa</option> // <option value="bangunan" `if(feature.administrasi.f11 != 'bangunan'){`selected`};` >Bangunan Biasa</option>
// <option value="kantor_administrasi">Kantor Administrasi</option> // <option value="kantor_administrasi">Kantor Administrasi</option>
// <option value="layanan_kesehatan">Layanan Kesehatan</option> // <option value="layanan_kesehatan">Layanan Kesehatan</option>
// <option value="puskesmas">Puskesmas</option> // <option value="puskesmas">Puskesmas</option>
// <option value="rumah_sakit">Rumah Sakit</option> // <option value="rumah_sakit">Rumah Sakit</option>
// <option value="sarana_ibadah">Sarana Ibadah</option> // <option value="sarana_ibadah">Sarana Ibadah</option>
// <option value="sarana_pendidikan">Sarana Pendidikan</option> // <option value="sarana_pendidikan">Sarana Pendidikan</option>
// <option value="spbu">SPBU</option> // <option value="spbu">SPBU</option>
// <option value="stasiun">Stasiun</option> // <option value="stasiun">Stasiun</option>
// <option value="terminal_bus">Terminal Bus</option> // <option value="terminal_bus">Terminal Bus</option>
// <option value="cagar_budaya">Cagar Budaya dan Tempat Wisata</option> // <option value="cagar_budaya">Cagar Budaya dan Tempat Wisata</option>
// <option value="gardu_listrik">Gardu Listrik</option>` // <option value="gardu_listrik">Gardu Listrik</option>`
// } // }
// var list_history = feature.properties.f7 // var list_history = feature.properties.f7
// var list_history_panel = `` // var list_history_panel = ``
...@@ -4871,7 +4926,7 @@ ...@@ -4871,7 +4926,7 @@
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<input type="text" class="hidden" name="coordinatebangunan" id="coordinatebangunan" value="`+feature.geometry+`"> <input type="text" class="hidden" name="coordinatebangunan" id="coordinatebangunan" value="` + feature.geometry + `">
<table> <table>
<tr style="margin-top: 10px"> <tr style="margin-top: 10px">
<th> <th>
...@@ -4879,28 +4934,28 @@ ...@@ -4879,28 +4934,28 @@
</th> </th>
<td> <td>
<input type="file" id="imgbangunan" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif"> <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="`+feature.administrasi.f9+`"required> <input style="display:none;" id="gambar" type="text" class="form-control" value="` + feature.administrasi.f9 + `"required>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<input type="text" name="idbangunan" id="idbangunan" class="form-control hidden" value="`+feature.properties.f1+`" disable> <input type="text" name="idbangunan" id="idbangunan" class="form-control hidden" value="` + feature.properties.f1 + `" disable>
<input style="display:none;" id="coordinateZoneeditbang" type="text" class="form-control" value=""required> <input style="display:none;" id="coordinateZoneeditbang" type="text" class="form-control" value=""required>
</td> </td>
</tr> </tr>
<tr> <tr>
<th>Nama Bangunan</th> <th>Nama Bangunan</th>
<td> <td>
<input type="text" name="namebangunan" id="namebangunan" class="form-control" value="`+feature.properties.f2+`"> <input type="text" name="namebangunan" id="namebangunan" class="form-control" value="` + feature.properties.f2 + `">
</td> </td>
</tr> </tr>
<tr> <tr>
<th>Jenis Bangunan</th> <th>Jenis Bangunan</th>
<td> <td>
<input type="text" class="hidden" name="tipe1" id="tipe111" value="`+feature.administrasi.f11+`"> <input type="text" class="hidden" name="tipe1" id="tipe111" value="` + feature.administrasi.f11 + `">
<input type="text" class="hidden" name="tipe1" id="tipe222" value="`+feature.administrasi.f12+`"> <input type="text" class="hidden" name="tipe1" id="tipe222" value="` + feature.administrasi.f12 + `">
<input type="text" class="hidden" name="tipe1" id="tipe333" value="`+feature.administrasi.f13+`"> <input type="text" class="hidden" name="tipe1" id="tipe333" value="` + feature.administrasi.f13 + `">
<input type="text" class="hidden" name="tipe1" id="tipe444" value="`+feature.administrasi.f14+`"> <input type="text" class="hidden" name="tipe1" id="tipe444" value="` + feature.administrasi.f14 + `">
<select style="border-bottom: 1px solid rgb(83, 83, 83) !important;width: 220px;" id="tipe_point_b_e" data-placeholder="select point.." class="select-size-md"> <select style="border-bottom: 1px solid rgb(83, 83, 83) !important;width: 220px;" id="tipe_point_b_e" data-placeholder="select point.." class="select-size-md">
<option value="null" selected disabled>-- Pilih Jenis Point --</option> <option value="null" selected disabled>-- Pilih Jenis Point --</option>
<option value="bangunan">Bangunan Biasa</option> <option value="bangunan">Bangunan Biasa</option>
...@@ -4934,31 +4989,31 @@ ...@@ -4934,31 +4989,31 @@
<tr> <tr>
<th>Informasi Bangunan</th> <th>Informasi Bangunan</th>
<td> <td>
<input type="text" name="infobangunan" id="infobangunan" class="form-control" value="`+feature.properties.f3+`"> <input type="text" name="infobangunan" id="infobangunan" class="form-control" value="` + feature.properties.f3 + `">
</td> </td>
</tr> </tr>
<tr> <tr>
<th>Kelurahan</th> <th>Kelurahan</th>
<td> <td>
<input type=" text " name="nmkelurahan " id="nmkelurahan" class="form-control " value="`+feature.administrasi.f1+`"> <input type=" text " name="nmkelurahan " id="nmkelurahan" class="form-control " value="` + feature.administrasi.f1 + `">
</td> </td>
</tr> </tr>
<tr> <tr>
<th>Kecamatan</th> <th>Kecamatan</th>
<td> <td>
<input type="text " name="nmkecamatan " id="nmkecamatan" class="form-control " value="`+feature.administrasi.f2+`"> <input type="text " name="nmkecamatan " id="nmkecamatan" class="form-control " value="` + feature.administrasi.f2 + `">
</td> </td>
</tr> </tr>
<tr> <tr>
<th>Kab/Kota</th> <th>Kab/Kota</th>
<td> <td>
<input type="text " name="nmkabkota " id="nmkabkota" class="form-control " value="`+feature.administrasi.f3+`"> <input type="text " name="nmkabkota " id="nmkabkota" class="form-control " value="` + feature.administrasi.f3 + `">
</td> </td>
</tr> </tr>
<tr> <tr>
<th>Provinsi</th> <th>Provinsi</th>
<td> <td>
<input type="text " name="nmprovinsi " id="nmprovinsi" class="form-control " value="`+feature.administrasi.f4+`"> <input type="text " name="nmprovinsi " id="nmprovinsi" class="form-control " value="` + feature.administrasi.f4 + `">
</td> </td>
</tr> </tr>
...@@ -4971,25 +5026,25 @@ ...@@ -4971,25 +5026,25 @@
<tr> <tr>
<th>Luas Bangunan</th> <th>Luas Bangunan</th>
<td> <td>
<input type="text " name="luasbangunan " id="luasbangunan" class="form-control " value="`+feature.administrasi.f6+`"> <input type="text " name="luasbangunan " id="luasbangunan" class="form-control " value="` + feature.administrasi.f6 + `">
</td> </td>
</tr> </tr>
<tr> <tr>
<th>Luas Tanah</th> <th>Luas Tanah</th>
<td> <td>
<input type="text " name="luastanah " id="luastanah" class="form-control " value="`+feature.administrasi.f7+`"> <input type="text " name="luastanah " id="luastanah" class="form-control " value="` + feature.administrasi.f7 + `">
</td> </td>
</tr> </tr>
<tr> <tr>
<th>Tinggi Bangunan</th> <th>Tinggi Bangunan</th>
<td> <td>
<input type="text " name="tinggibangunan " id="tinggibangunan" class="form-control " value="`+feature.administrasi.f8+`"> <input type="text " name="tinggibangunan " id="tinggibangunan" class="form-control " value="` + feature.administrasi.f8 + `">
</td> </td>
</tr> </tr>
<tr> <tr>
<th>Pemilik</th> <th>Pemilik</th>
<td> <td>
<input type="text " name="pemilik " id="pemilik" class="form-control " value="`+feature.administrasi.f10+`"> <input type="text " name="pemilik " id="pemilik" class="form-control " value="` + feature.administrasi.f10 + `">
</td> </td>
</tr> </tr>
</table> </table>
...@@ -5003,7 +5058,7 @@ ...@@ -5003,7 +5058,7 @@
</div> </div>
</div> </div>
</div>`; </div>`;
content_delete=` content_delete = `
<div class="modal-dialog" style="width: max-content;height: max-content;"> <div class="modal-dialog" style="width: max-content;height: max-content;">
<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;">
...@@ -5019,9 +5074,9 @@ ...@@ -5019,9 +5074,9 @@
<div class="form-group"> <div class="form-group">
<div class="col-lg-12" style="margin-top:10px;margin-bottom:10px;"> <div class="col-lg-12" style="margin-top:10px;margin-bottom:10px;">
<input type="text" class="hidden" name="coordinatebangunan" id="coordinatebangunanhps" value=""> <input type="text" class="hidden" name="coordinatebangunan" id="coordinatebangunanhps" value="">
<input type="text" name="idbangunan" id="idbangunanhps" class="form-control hidden" value="`+feature.properties.f1+`" disable> <input type="text" name="idbangunan" id="idbangunanhps" class="form-control hidden" value="` + feature.properties.f1 + `" disable>
<input type="text" name="namebangunan" id="namebangunanhps" class="form-control" value="`+feature.properties.f2+`"> <input type="text" name="namebangunan" id="namebangunanhps" class="form-control" value="` + feature.properties.f2 + `">
<input type="text" name="infobangunan" id="infobangunanhps" class="form-control" value="`+feature.properties.f3+`"> <input type="text" name="infobangunan" id="infobangunanhps" class="form-control" value="` + feature.properties.f3 + `">
</div> </div>
</div> </div>
</div> </div>
...@@ -5263,7 +5318,7 @@ ...@@ -5263,7 +5318,7 @@
loaderPage(true); loaderPage(true);
var tipe1 = $('#tipe111').val(); var tipe1 = $('#tipe111').val();
$('#tipe_point_b_e option[value='+tipe1+']').attr('selected','selected'); $('#tipe_point_b_e option[value=' + tipe1 + ']').attr('selected', 'selected');
// $("#tipe_point_b_e option").val(tipe1).change(); // $("#tipe_point_b_e option").val(tipe1).change();
$("#tipe_point_b_e").change(function() { $("#tipe_point_b_e").change(function() {
...@@ -5280,7 +5335,7 @@ ...@@ -5280,7 +5335,7 @@
var data_all_kab = [] var data_all_kab = []
for (var i = 0; i < data['result'].length; i++) { for (var i = 0; i < data['result'].length; i++) {
var data_k = data['result'][i][0]; var data_k = data['result'][i][0];
// if (feature.administrasi.f12 == data_k){ // if (feature.administrasi.f12 == data_k){
// var data_kab = `<option value="` + data_k + `" selected>` + data_k + `</option>`; // var data_kab = `<option value="` + data_k + `" selected>` + data_k + `</option>`;
// } else{ // } else{
...@@ -5298,8 +5353,8 @@ ...@@ -5298,8 +5353,8 @@
// $('#tipe_point_2_b_e option[value='+tipe2+']').attr('selected','selected'); // $('#tipe_point_2_b_e option[value='+tipe2+']').attr('selected','selected');
if (tipe2 == 'null') { if (tipe2 == 'null') {
$('#tipe_point_2_b_e').html(`<option value="null" selected disabled>-- Pilih Tipe Point --</option>`); $('#tipe_point_2_b_e').html(`<option value="null" selected disabled>-- Pilih Tipe Point --</option>`);
} else{ } else {
$('#tipe_point_2_b_e').html(`<option value="`+tipe2+`" selected disabled>`+tipe2+`</option>`); $('#tipe_point_2_b_e').html(`<option value="` + tipe2 + `" selected disabled>` + tipe2 + `</option>`);
} }
$("#tipe_point_2_b_e").change(function() { $("#tipe_point_2_b_e").change(function() {
...@@ -5321,7 +5376,7 @@ ...@@ -5321,7 +5376,7 @@
var data_po = data['result'][i][1]; var data_po = data['result'][i][1];
console.log(data_id) console.log(data_id)
console.log(data_po) console.log(data_po)
var data_kab = `<option value="` +data_id + `">` + data_po + `</option>`; var data_kab = `<option value="` + data_id + `">` + data_po + `</option>`;
data_all_kab.push(data_kab) data_all_kab.push(data_kab)
}; };
$('#tipe_point_3_b_e').html(`<option value="null" selected disabled>-- Pilih Point --</option>` + data_all_kab); $('#tipe_point_3_b_e').html(`<option value="null" selected disabled>-- Pilih Point --</option>` + data_all_kab);
...@@ -5332,11 +5387,11 @@ ...@@ -5332,11 +5387,11 @@
var tipe3 = $('#tipe333').val(); var tipe3 = $('#tipe333').val();
var tipe4 = $('#tipe444').val(); var tipe4 = $('#tipe444').val();
// $('#tipe_point_3_b_e option[value='+tipe3+']').attr('selected','selected'); // $('#tipe_point_3_b_e option[value='+tipe3+']').attr('selected','selected');
if (tipe3 == 'null') { if (tipe3 == 'null') {
$('#tipe_point_3_b_e').html(`<option value="null" selected disabled>-- Pilih Point --</option>`); $('#tipe_point_3_b_e').html(`<option value="null" selected disabled>-- Pilih Point --</option>`);
} else{ } else {
$('#tipe_point_3_b_e').html(`<option value="`+tipe3+`" selected disabled>`+tipe4+`</option>`); $('#tipe_point_3_b_e').html(`<option value="` + tipe3 + `" selected disabled>` + tipe4 + `</option>`);
} }
$.ajax({ $.ajax({
...@@ -5372,10 +5427,10 @@ ...@@ -5372,10 +5427,10 @@
}) })
} }
}) })
}); });
$(document).on("click", "#btnsavebangunan", function() { $(document).on("click", "#btnsavebangunan", function() {
var data = new FormData(); var data = new FormData();
...@@ -5535,42 +5590,41 @@ ...@@ -5535,42 +5590,41 @@
// ]).addTo(map_bang) // ]).addTo(map_bang)
$(document).on("click", "#btn_perbaikan_bangunan", function() { $(document).on("click", "#btn_perbaikan_bangunan", function() {
// if (map_bang.hasLayer(polyxxx)) { // if (map_bang.hasLayer(polyxxx)) {
// polyxxx.remove() // polyxxx.remove()
// } // }
// var id_polyx = $('#idbangunan').val(); // var id_polyx = $('#idbangunan').val();
$("#input_perbaikan_bang").css("display", "block"); $("#input_perbaikan_bang").css("display", "block");
// $.ajax({ // $.ajax({
// url: "{% url 'apps:input-perbaikan-bang' %}", // url: "{% url 'apps:input-perbaikan-bang' %}",
// data: { // data: {
// 'id_bangunan': id_polyx // 'id_bangunan': id_polyx
// }, // },
// dataType: 'json', // dataType: 'json',
// success: function(data) { // success: function(data) {
// $("#nama_bang").val(data[0]); // $("#nama_bang").val(data[0]);
// $("#type_bang").val(data[1]); // $("#type_bang").val(data[1]);
// $("#id_bang_perbaikan").val(data[3]); // $("#id_bang_perbaikan").val(data[3]);
// $("#type_id_bang").val("1") // $("#type_id_bang").val("1")
// var latlngs = data[2]; // var latlngs = data[2];
// map_bang.setView([latlngs['geometry']['coordinates'][0][0][1], latlngs['geometry']['coordinates'][0][0][0]], 19) // map_bang.setView([latlngs['geometry']['coordinates'][0][0][1], latlngs['geometry']['coordinates'][0][0][0]], 19)
// let lop_poly_edit = data['geometry']['coordinates'][0][0]; // let lop_poly_edit = data['geometry']['coordinates'][0][0];
// let list_poly_edit = []; // let list_poly_edit = [];
// 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);
// }; // };
// polylyly = L.polygon(list_poly_edit).addTo(map_bang) // polylyly = L.polygon(list_poly_edit).addTo(map_bang)
// polylyly.enableEdit(); // polylyly.enableEdit();
// var hasil = (JSON.stringify(polylyly.toGeoJSON())) // var hasil = (JSON.stringify(polylyly.toGeoJSON()))
// } // }
// }) // })
}) })
</script> </script>
{% include 'includes/insert.html' %} {% include 'includes/insert.html' %}
\ No newline at end of file
templates/includes/js-o.html
View file @ 895f1d4e
...@@ -1054,7 +1054,7 @@ ...@@ -1054,7 +1054,7 @@
var desa = response['nama_des'][i][1]; var desa = response['nama_des'][i][1];
var kec = response['nama_des'][i][2]; var kec = response['nama_des'][i][2];
var da = `<li value='` + id + `'>` + desa + `,` + kec + `</li>`; var da = `<li value='` + desa + `,` + kec + `'>` + desa + `,` + kec + `</li>`;
data_de.push(da) data_de.push(da)
} }
...@@ -1071,6 +1071,9 @@ ...@@ -1071,6 +1071,9 @@
}); });
//3d begin
function setsearch(element) { function setsearch(element) {
var value = $(element).text(); var value = $(element).text();
...@@ -1086,11 +1089,8 @@ ...@@ -1086,11 +1089,8 @@
}, },
dataType: 'json', dataType: 'json',
success: function(response) { success: function(response) {
var resultan = response['result'][0]
geo_json_search(resultan); console.log(response)
map.setView([resultan['geometry']['coordinates'][0][0][0][1], resultan['geometry']['coordinates'][0][0][0][0]], 14);
search_desa.addTo(map)
geo_batas.remove()
} }
}); });
} }
...@@ -1467,7 +1467,7 @@ ...@@ -1467,7 +1467,7 @@
// } else { // } else {
// var path_img = `"static/image/bangunan/` + feature.administrasi.f9 + `"` // var path_img = `"static/image/bangunan/` + feature.administrasi.f9 + `"`
// } // }
// // var list_history = feature.properties.f7 // // var list_history = feature.properties.f7
// // var list_history_panel = `` // // var list_history_panel = ``
......
templates/includes/modal.html
View file @ 895f1d4e
...@@ -579,9 +579,28 @@ ...@@ -579,9 +579,28 @@
</div> </div>
</div> </div>
<div class="modal fade" id="modalsearch3d" tabindex="-1" role="dialog">
<div class="modal-dialog modal-xs">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">3D Searching</h4>
</div>
<div class="modal-body">
<fieldset>
<select id="search_desa" placeholder="Pick a state..." style="width: 256px;height: 35px;">
</select>
<br>
</fieldset>
</div>
<div class="modal-footer">
<input class="btn btn-success btn-block" id="search3D" type="submit" value="Search">
</div>
</div>
</div>
</div> </div>
</div> <!--
<script> <script>
$("#tipe_point").change(function() { $("#tipe_point").change(function() {
var tipe = $(this).val(); var tipe = $(this).val();
...@@ -609,4 +628,4 @@ ...@@ -609,4 +628,4 @@
} }
}); });
}); });
</script> </script> -->
\ No newline at end of file \ No newline at end of file
templates/includes/navbar.html
View file @ 895f1d4e
...@@ -10,9 +10,11 @@ ...@@ -10,9 +10,11 @@
top: 7px;"> top: 7px;">
</i> </i>
<!-- <i class="icon-location4 fa-gradient"></i> --> <!-- <i class="icon-location4 fa-gradient"></i> -->
<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;OKU-GIS</b> <b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Teman-KU
</b> (Sistem Informasi Pembangunan OKU)
</a> </a>
<ul class="nav navbar-nav pull-right visible-xs-block"> <ul class="nav navbar-nav pull-right visible-xs-block">
<li><a data-toggle="collapse" data-target="#navbar-mobile"><i class="icon-tree5"></i></a></li> <li><a data-toggle="collapse" data-target="#navbar-mobile"><i class="icon-tree5"></i></a></li>
</ul> </ul>
......
templates/includes/plugin.html
View file @ 895f1d4e
{% 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: 50px;">
<div class="dropdown show-dropdown" style="top: 1px;">
<a href="#" type="checkbox">
<input type="checkbox" name="checkbox" onclick="mapsganti()" id="mapschange" style="position: absolute;opacity: 0;width: 48px;height: 30px;">
<div id="labelchange">
<h1 style="color: white;margin-top: 5px;margin-left: 8px;">
3D
</h1>
</div>
<!-- <i class="fa fa-map-o fa-2x" style="color: white;
margin: 10px 10px;
width: auto;"> </i> -->
</a>
</div>
</li>
<li class="fixed-plugin no3d" style="top: 110px;">
<div class="dropdown show-dropdown" style="top: 1px;"> <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;
...@@ -55,9 +73,9 @@ ...@@ -55,9 +73,9 @@
</ul> </ul>
</div> </div>
</li> </li>
<li class="fixed-plugin" style="top: 160px;"> <li class="fixed-plugin no3d" style="top: 170px;">
<div class="dropdown show-dropdown"> <div class="dropdown show-dropdown ">
<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;
...@@ -71,7 +89,6 @@ ...@@ -71,7 +89,6 @@
<div class="panel-body"> --> <div class="panel-body"> -->
<div class="row" style="margin: 0;padding: 0;"> <div class="row" style="margin: 0;padding: 0;">
<div class="col-md-6"> <div class="col-md-6">
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" id="geo_tuplah" onclick="geotuplah()" style="margin-top:2px;"> <input type="checkbox" id="geo_tuplah" onclick="geotuplah()" style="margin-top:2px;">
...@@ -79,14 +96,13 @@ ...@@ -79,14 +96,13 @@
</label> </label>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" id="geo_building" style="margin-top:2px;"> <input type="checkbox" id="geo_building" style="margin-top:2px;">
Bangunan Bangunan
</label> </label>
</div> </div>
<ul class="nasted active"> <!-- <ul class="nasted active">
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" id="2d-maps" style="margin-top:2px;"> <input type="checkbox" id="2d-maps" style="margin-top:2px;">
...@@ -99,13 +115,7 @@ ...@@ -99,13 +115,7 @@
Bangunan 3D Maps Bangunan 3D Maps
</label> </label>
</div> </div>
</ul> </ul> -->
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" id="geo_jalan" onclick="geojalan()" style="margin-top:2px;"> <input type="checkbox" id="geo_jalan" onclick="geojalan()" style="margin-top:2px;">
......
templates/layout/layout.html
View file @ 895f1d4e
...@@ -465,7 +465,7 @@ ...@@ -465,7 +465,7 @@
} }
li.fixed-plugin .fa:hover { li.fixed-plugin .fa:hover {
transform: rotate(180deg); transform: rotate(360deg);
transition: all 0.3s linear; transition: all 0.3s linear;
} }
/*.move-btn .caret {*/ /*.move-btn .caret {*/
...@@ -683,10 +683,15 @@ ...@@ -683,10 +683,15 @@
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<div id="map"> <div id="map">
</div> </div>
<div id="map-cesium" style="z-index: -999; height: 605px; display:none"></div> <div id="map-cesium" style="z-index: -999; height: 100vh; display:none">
<div class="label-bangunan" style="margin: 0px 0 0px 0px;padding-top: 55px;position: absolute;z-index: 1;right: 20px;">
<label style="background-color: white;">
&nbsp;&nbsp;left click + ctrl to rotate maps&nbsp;&nbsp;
</label>
</div>
<div class="page_loader_3d"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
......
templates/layout/user_layout.html
View file @ 895f1d4e
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css"> <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css"> <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.css" />
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
padding: 0; padding: 0;
height: 100%; height: 100%;
} }
.modal-backdrop { .modal-backdrop {
z-index: -999!important; z-index: -999!important;
} }
...@@ -57,14 +57,14 @@ ...@@ -57,14 +57,14 @@
margin-right: 0px; margin-right: 0px;
} }
.modal-colors{ .modal-colors {
background-color: #1a222f; background-color: #1a222f;
} }
.lbl-top{ .lbl-top {
margin-top: 10px; margin-top: 10px;
} }
.select2-selection--multiple:not([class*=bg-]) .select2-selection__choice { .select2-selection--multiple:not([class*=bg-]) .select2-selection__choice {
background-color: #eee; background-color: #eee;
color: #333333; color: #333333;
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
margin-bottom: 3px; margin-bottom: 3px;
border-radius: 0px; border-radius: 0px;
} }
.page_loader { .page_loader {
position: fixed; position: fixed;
background: url('../../static/img/loadingz.gif') 50% 50% no-repeat rgb(249, 249, 249); background: url('../../static/img/loadingz.gif') 50% 50% no-repeat rgb(249, 249, 249);
...@@ -111,12 +111,19 @@ ...@@ -111,12 +111,19 @@
<!-- Main navbar --> <!-- Main navbar -->
<div class="navbar navbar-inverse"> <div class="navbar navbar-inverse">
<div class="navbar-header"> <div class="navbar-header">
<a class="navbar-brand" href="{% url 'apps:dashboard' %}"> <a class="navbar-brand gradient-text " href="{% url 'apps:dashboard' %}">
<!-- <h3>NationalAddress</h3> --> <!-- <h3>NationalAddress</h3> -->
<i class=" icon-location4"></i> <i>
<b>&nbsp;&nbsp;OKU-GISs</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;&nbsp;Teman-KU
</b> (Sistem Informasi Pembangunan OKU)
</a> </a>
<ul class="nav navbar-nav pull-right visible-xs-block"> <ul class="nav navbar-nav pull-right visible-xs-block">
<li><a data-toggle="collapse" data-target="#navbar-mobile"><i class="icon-tree5"></i></a></li> <li><a data-toggle="collapse" data-target="#navbar-mobile"><i class="icon-tree5"></i></a></li>
</ul> </ul>
...@@ -188,14 +195,14 @@ ...@@ -188,14 +195,14 @@
<!-- Main --> <!-- Main -->
<li class="navigation-header"> <i class="icon-menu" title="Main pages"></i></li> <li class="navigation-header"> <i class="icon-menu" title="Main pages"></i></li>
<li><a href="?page=user" class="tablinks" id="defaultOpen"><i class="icon-user"></i><span>User Management</span></a></li> <li><a href="?page=user" class="tablinks" id="defaultOpen"><i class="icon-user"></i><span>User Management</span></a></li>
<li><a href="?page=group" class="tablinks" id="defaultOpen"><i class="icon-users4"></i><span>Group</span></a></li> <li><a href="?page=group" class="tablinks" id="defaultOpen"><i class="icon-users4"></i><span>Group</span></a></li>
<!-- <li><a class="tablinks" onclick="openInfo(event, 'info-penduduk')" id="defaultOpen"><span>Kependudukan</span></a></li> <!-- <li><a class="tablinks" onclick="openInfo(event, 'info-penduduk')" id="defaultOpen"><span>Kependudukan</span></a></li>
<li><a class="tablinks" onclick="openInfo(event, 'info-pendidikan')" id="defaultOpen"><span>Pendidikan</span></a></li> <li><a class="tablinks" onclick="openInfo(event, 'info-pendidikan')" id="defaultOpen"><span>Pendidikan</span></a></li>
<li><a class="tablinks" onclick="openInfo(event, 'info-pekerjaan')" id="defaultOpen"><span>Pekerjaan</span></a></li> <li><a class="tablinks" onclick="openInfo(event, 'info-pekerjaan')" id="defaultOpen"><span>Pekerjaan</span></a></li>
<li><a class="tablinks" onclick="openInfo(event, 'info-poi')" id="defaultOpen"><span>POI</span></a></li> --> <li><a class="tablinks" onclick="openInfo(event, 'info-poi')" id="defaultOpen"><span>POI</span></a></li> -->
<!-- /page kits --> <!-- /page kits -->
</ul> </ul>
</div> </div>
...@@ -260,12 +267,10 @@ ...@@ -260,12 +267,10 @@
{% if user.isactive == True %} {% if user.isactive == True %}
<span class="label label-success"> <span class="label label-success">
Active Active
</span> </span> {% else %}
{% else %}
<span class="label label-danger"> <span class="label label-danger">
Inactive Inactive
</span> </span> {% endif %}
{% endif %}
</td> </td>
<td class="text-center"> <td class="text-center">
<ul class="icons-list"> <ul class="icons-list">
...@@ -273,9 +278,9 @@ ...@@ -273,9 +278,9 @@
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-menu9"></i> <i class="icon-menu9"></i>
</a> </a>
<ul class="dropdown-menu dropdown-menu-right"> <ul class="dropdown-menu dropdown-menu-right">
<li><a onclick="switchuserstatus('{{user.id}}, {{user.isactive}}')" ><i class="icon-user-block"></i> Switch user status</a></li> <li><a onclick="switchuserstatus('{{user.id}}, {{user.isactive}}')"><i class="icon-user-block"></i> Switch user status</a></li>
<li><a onclick="loaduserbyid('{{user.id}}')"><i class="icon-users"></i> Edit user</a></li> <li><a onclick="loaduserbyid('{{user.id}}')"><i class="icon-users"></i> Edit user</a></li>
</ul> </ul>
</li> </li>
...@@ -320,7 +325,7 @@ ...@@ -320,7 +325,7 @@
<hr style="margin-top: 0px;"> <hr style="margin-top: 0px;">
<div class="panel-body"> <div class="panel-body">
<table class="table table-responsive datatable-groups table-sm" id="usergroup" > <table class="table table-responsive datatable-groups table-sm" id="usergroup">
<thead> <thead>
<tr> <tr>
<th>No.</th> <th>No.</th>
...@@ -339,9 +344,9 @@ ...@@ -339,9 +344,9 @@
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-menu9"></i> <i class="icon-menu9"></i>
</a> </a>
<ul class="dropdown-menu dropdown-menu-right"> <ul class="dropdown-menu dropdown-menu-right">
<li><a onclick="deletegroup('{{group.id}}', '{{group.name}}')" ><i class="icon-user-block"></i> Delete group</a></li> <li><a onclick="deletegroup('{{group.id}}', '{{group.name}}')"><i class="icon-user-block"></i> Delete group</a></li>
<li><a onclick="showmodalgroup('{{group.id}}', '{{group.name}}')"><i class="icon-users"></i> Edit group</a></li> <li><a onclick="showmodalgroup('{{group.id}}', '{{group.name}}')"><i class="icon-users"></i> Edit group</a></li>
</ul> </ul>
</li> </li>
...@@ -358,7 +363,7 @@ ...@@ -358,7 +363,7 @@
<!-- /main charts --> <!-- /main charts -->
</div> </div>
</div> </div>
<!-- /main content --> <!-- /main content -->
</div> </div>
<!-- /page content --> <!-- /page content -->
...@@ -374,72 +379,72 @@ ...@@ -374,72 +379,72 @@
</div> </div>
<div class="modal-body" style="max-height: 450px;overflow-y: auto;"> <div class="modal-body" style="max-height: 450px;overflow-y: auto;">
<input type="hidden" id="iduser"> <input type="hidden" id="iduser">
<div class="row"> <div class="row">
<div class="form-group"> <div class="form-group">
<label class="col-lg-3 control-label lbl-top" >Username</label> <label class="col-lg-3 control-label lbl-top">Username</label>
<div class="col-lg-9"> <div class="col-lg-9">
<input id="inUsername" type="text" class="form-control" value=""required> <input id="inUsername" type="text" class="form-control" value="" required>
</div>
</div> </div>
</div> </div>
</div>
<div class="row">
<div class="form-group"> <div class="row">
<label class="col-lg-3 control-label lbl-top" >First Name</label> <div class="form-group">
<div class="col-lg-9"> <label class="col-lg-3 control-label lbl-top">First Name</label>
<input id="inNameF" type="text" class="form-control" value=""required> <div class="col-lg-9">
</div> <input id="inNameF" type="text" class="form-control" value="" required>
</div> </div>
</div> </div>
</div>
<div class="row"> <div class="row">
<div class="form-group"> <div class="form-group">
<label class="col-lg-3 control-label lbl-top" >Last Name</label> <label class="col-lg-3 control-label lbl-top">Last Name</label>
<div class="col-lg-9"> <div class="col-lg-9">
<input id="inNameL" type="text" class="form-control" value=""required> <input id="inNameL" type="text" class="form-control" value="" required>
</div>
</div> </div>
</div> </div>
</div>
<div class="row">
<div class="form-group"> <div class="row">
<label class="col-lg-3 control-label lbl-top" >Email</label> <div class="form-group">
<div class="col-lg-9"> <label class="col-lg-3 control-label lbl-top">Email</label>
<input id="inEmail" type="text" class="form-control" value=""required> <div class="col-lg-9">
</div> <input id="inEmail" type="text" class="form-control" value="" required>
</div> </div>
</div> </div>
</div>
<div class="row" style="margin-top: 20px;"> <div class="row" style="margin-top: 20px;">
<div class="form-group"> <div class="form-group">
<label class="col-lg-3 control-label">Staff</label> <label class="col-lg-3 control-label">Staff</label>
<div class="col-lg-9"> <div class="col-lg-9">
<label class="radio-inline"> <label class="radio-inline">
<input type="radio" class="styled" value="true" name="isStaff" checked="checked"> <input type="radio" class="styled" value="true" name="isStaff" checked="checked">
Ya Ya
</label> </label>
<label class="radio-inline"> <label class="radio-inline">
<input type="radio" class="styled" value="false" name="isStaff"> <input type="radio" class="styled" value="false" name="isStaff">
Tidak Tidak
</label> </label>
</div>
</div> </div>
</div> </div>
</div>
<div class="row">
<div class="form-group" style="margin-top: 10px !important;"> <div class="row">
<label class="col-lg-3 control-label lbl-top" >Groups</label> <div class="form-group" style="margin-top: 10px !important;">
<div class="col-lg-9" > <label class="col-lg-3 control-label lbl-top">Groups</label>
<select style="border-bottom: 1px solid rgb(83, 83, 83) !important;" id="select_group" data-placeholder="select group.." class="select-size-xs"> <div class="col-lg-9">
<select style="border-bottom: 1px solid rgb(83, 83, 83) !important;" id="select_group" data-placeholder="select group.." class="select-size-xs">
<option></option> <option></option>
</select> </select>
</div>
</div> </div>
</div> </div>
</div>
</div> </div>
<hr> <hr>
<div class="modal-footer"> <div class="modal-footer">
...@@ -459,91 +464,91 @@ ...@@ -459,91 +464,91 @@
</div> </div>
<div class="modal-body" style="max-height: 450px;overflow-y: auto;"> <div class="modal-body" style="max-height: 450px;overflow-y: auto;">
<input type="hidden" id="idgroup"> <input type="hidden" id="idgroup">
<div class="row"> <div class="row">
<div class="form-group"> <div class="form-group">
<label class="col-lg-3 control-label lbl-top" >Nama Group</label> <label class="col-lg-3 control-label lbl-top">Nama Group</label>
<div class="col-lg-9"> <div class="col-lg-9">
<input id="inGroupName" type="text" class="form-control" value=""required> <input id="inGroupName" type="text" class="form-control" value="" required>
</div>
</div> </div>
</div> </div>
</div>
<div class> <div class>
<div class="row" id="container_sparent"> <div class="row" id="container_sparent">
<div class="form-group" style="margin-top: 10px !important;"> <div class="form-group" style="margin-top: 10px !important;">
<label class="col-lg-3 control-label lbl-top" >Group Parent</label> <label class="col-lg-3 control-label lbl-top">Group Parent</label>
<div class="col-lg-9" > <div class="col-lg-9">
<select style="border-bottom: 1px solid rgb(83, 83, 83) !important;" id="select_group_parent" data-placeholder="select group.." class="select-size-xs"> <select style="border-bottom: 1px solid rgb(83, 83, 83) !important;" id="select_group_parent" data-placeholder="select group.." class="select-size-xs">
<option></option> <option></option>
</select> </select>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<hr> <hr>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal" onclick="destroyfade()">Close</button> <button type="button" class="btn btn-link" data-dismiss="modal" onclick="destroyfade()">Close</button>
<button type="button" class="btn btn-info" id="savegroup">Save changes</button> <button type="button" class="btn btn-info" id="savegroup">Save changes</button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="page_loader"></div> <div class="page_loader"></div>
<!-- Core JS files --> <!-- Core JS files -->
<script type="text/javascript" src="{% static 'js/plugins/loaders/pace.min.js' %}"></script> <script type="text/javascript" src="{% static 'js/plugins/loaders/pace.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/core/libraries/jquery.min.js' %}"></script> <script type="text/javascript" src="{% static 'js/core/libraries/jquery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/core/libraries/bootstrap.min.js' %}"></script> <script type="text/javascript" src="{% static 'js/core/libraries/bootstrap.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/plugins/loaders/blockui.min.js' %}"></script> <script type="text/javascript" src="{% static 'js/plugins/loaders/blockui.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/plugins/ui/nicescroll.min.js' %}"></script> <script type="text/javascript" src="{% static 'js/plugins/ui/nicescroll.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/plugins/ui/drilldown.js' %}"></script> <script type="text/javascript" src="{% static 'js/plugins/ui/drilldown.js' %}"></script>
<!-- /core JS files --> <!-- /core JS files -->
<script src="https://use.fontawesome.com/d232835e93.js"></script> <script src="https://use.fontawesome.com/d232835e93.js"></script>
<script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script> <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script> <!-- <script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script> --> <script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script> -->
<script src="https://unpkg.com/esri-leaflet@2.5.1/dist/esri-leaflet.js"></script> <script src="https://unpkg.com/esri-leaflet@2.5.1/dist/esri-leaflet.js"></script>
<script src="https://unpkg.com/esri-leaflet-geocoder@2.3.3/dist/esri-leaflet-geocoder.js"></script> <script src="https://unpkg.com/esri-leaflet-geocoder@2.3.3/dist/esri-leaflet-geocoder.js"></script>
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script> <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw-src.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw-src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.fullscreen/1.4.2/Control.FullScreen.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.fullscreen/1.4.2/Control.FullScreen.min.js"></script>
<!-- Theme JS files --> <!-- Theme JS files -->
<script type="text/javascript" src="{% static 'js/plugins/visualization/d3/d3.min.js' %}"></script> <script type="text/javascript" src="{% static 'js/plugins/visualization/d3/d3.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/plugins/visualization/d3/d3_tooltip.js' %}"></script> <script type="text/javascript" src="{% static 'js/plugins/visualization/d3/d3_tooltip.js' %}"></script>
<script type="text/javascript" src="{% static 'js/plugins/forms/styling/switchery.min.js' %}"></script> <script type="text/javascript" src="{% static 'js/plugins/forms/styling/switchery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/plugins/forms/styling/uniform.min.js' %}"></script> <script type="text/javascript" src="{% static 'js/plugins/forms/styling/uniform.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/plugins/forms/selects/bootstrap_multiselect.js' %}"></script> <script type="text/javascript" src="{% static 'js/plugins/forms/selects/bootstrap_multiselect.js' %}"></script>
<script type="text/javascript" src="{% static 'js/plugins/ui/moment/moment.min.js' %}"></script> <script type="text/javascript" src="{% static 'js/plugins/ui/moment/moment.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/plugins/pickers/daterangepicker.js' %}"></script> <script type="text/javascript" src="{% static 'js/plugins/pickers/daterangepicker.js' %}"></script>
<!-- <script type="text/javascript" src="{% static 'js/plugins/ui/ripple.min.js' %}"></script> --> <!-- <script type="text/javascript" src="{% static 'js/plugins/ui/ripple.min.js' %}"></script> -->
<!-- /theme JS files --> <!-- /theme JS files -->
{% include 'includes/scripts.html' %} {% include 'includes/scripts.html' %}
<script src="{% static 'js/leaflet-bing-layer.js' %}"></script> <script src="{% static 'js/leaflet-bing-layer.js' %}"></script>
<!-- <script src="https://unpkg.com/sweetalert/dists/sweetalert.min.js"></script> --> <!-- <script src="https://unpkg.com/sweetalert/dists/sweetalert.min.js"></script> -->
<script type="text/javascript" src="{% static 'js/core/libraries/jquery_ui/interactions.min.js' %}"></script> <script type="text/javascript" src="{% static 'js/core/libraries/jquery_ui/interactions.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/plugins/forms/selects/select2.min.js' %}"></script> <script type="text/javascript" src="{% static 'js/plugins/forms/selects/select2.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/pages/form_select2.js' %}"></script> <script type="text/javascript" src="{% static 'js/pages/form_select2.js' %}"></script>
</body> </body>
</html> </html>
...@@ -555,7 +560,7 @@ ...@@ -555,7 +560,7 @@
// blah.src = URL.createObjectURL(fil) // blah.src = URL.createObjectURL(fil)
// } // }
// } // }
jQuery(document).ajaxSend(function(event, xhr, settings) { jQuery(document).ajaxSend(function(event, xhr, settings) {
function getCookie(name) { function getCookie(name) {
...@@ -613,139 +618,140 @@ ...@@ -613,139 +618,140 @@
const queryString = window.location.search; const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString); const urlParams = new URLSearchParams(queryString);
const page = urlParams.get('page') const page = urlParams.get('page')
if(page == "group"){ if (page == "group") {
$("#usergroup").css("display", "block"); $("#usergroup").css("display", "block");
$("#info-maps").css("display", "none"); $("#info-maps").css("display", "none");
}else{ } else {
$("#usergroup").css("display", "none"); $("#usergroup").css("display", "none");
$("#info-maps").css("display", "block"); $("#info-maps").css("display", "block");
} }
function destroyfade(){ function destroyfade() {
$(".modal-backdrop").css("display","none") $(".modal-backdrop").css("display", "none")
$(".modal-backdrop").removeClass('show'); $(".modal-backdrop").removeClass('show');
$("body").css('padding-right','0px !important') $("body").css('padding-right', '0px !important')
} }
$('.datatable-show-all').DataTable({ $('.datatable-show-all').DataTable({
autoWidth: false, autoWidth: false,
columnDefs: [ columnDefs: [{
{
orderable: false, orderable: false,
width: '20px', width: '20px',
targets: [ 0 ], targets: [0],
}, },
// { // {
// width: '100px', // width: '100px',
// targets: [ 4 ] // targets: [ 4 ]
// }, // },
{ {
orderable: false, orderable: false,
width: '20px', width: '20px',
targets: [ 6 ], targets: [6],
}, }, {
{
orderable: false, orderable: false,
width: '20px', width: '20px',
targets: [ 7 ], targets: [7],
}, },
], ],
dom: '<"float-left"B>frtip', dom: '<"float-left"B>frtip',
buttons: [ buttons: [{
{ text: 'Tambah User',
text: 'Tambah User', action: function(e, dt, node, config) {
action: function ( e, dt, node, config ) { $("#modalAddButton").click()
$("#modalAddButton").click() $("#inUsername").attr("disabled", false);
$("#inUsername").attr("disabled", false); $("#inUsername").val(null);
$("#inUsername").val(null); $("#inNameF").val(null);
$("#inNameF").val(null); $("#inNameL").val(null);
$("#inNameL").val(null); $("#inEmail").val(null);
$("#inEmail").val(null); $("#iduser").val(null);
$("#iduser").val(null); $(".modstit").html("Tambah User")
$(".modstit").html("Tambah User") loadGroups(null)
loadGroups(null)
}
} }
], }],
language: { language: {
search: '<span>Filter:</span> _INPUT_', search: '<span>Filter:</span> _INPUT_',
searchPlaceholder: 'Type to filter...', searchPlaceholder: 'Type to filter...',
lengthMenu: '<span>Show:</span> _MENU_', lengthMenu: '<span>Show:</span> _MENU_',
paginate: { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' } paginate: {
'first': 'First',
'last': 'Last',
'next': '&rarr;',
'previous': '&larr;'
}
}, },
drawCallback: function () { drawCallback: function() {
$(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup'); $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
}, },
preDrawCallback: function() { preDrawCallback: function() {
$(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup'); $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
} }
}); });
$('.datatable-groups').DataTable({ $('.datatable-groups').DataTable({
autoWidth: false, autoWidth: false,
columnDefs: [ columnDefs: [{
{ orderable: false,
orderable: false, width: '100px',
width: '100px', targets: [2]
targets: [ 2 ] }, {
}, orderable: false,
{ width: '100px',
orderable: false, targets: [0]
width: '100px', }],
targets: [ 0 ]
}
],
dom: '<"float-left"B>frtip', dom: '<"float-left"B>frtip',
buttons: [ buttons: [{
{ text: 'Tambah Group',
text: 'Tambah Group', action: function(e, dt, node, config) {
action: function ( e, dt, node, config ) { $("#modalAddButtong").click();
$("#modalAddButtong").click(); $("#idgroup").val(null);
$("#idgroup").val(null); $(".modstitg").html("Tambah Group")
$(".modstitg").html("Tambah Group") $("#inGroupName").val(null)
$("#inGroupName").val(null) $("#container_sparent").css("display", "block")
$("#container_sparent").css("display", "block") loadGroups(null)
loadGroups(null)
}
} }
], }],
language: { language: {
search: '<span>Filter:</span> _INPUT_', search: '<span>Filter:</span> _INPUT_',
searchPlaceholder: 'Type to filter...', searchPlaceholder: 'Type to filter...',
lengthMenu: '<span>Show:</span> _MENU_', lengthMenu: '<span>Show:</span> _MENU_',
paginate: { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' } paginate: {
'first': 'First',
'last': 'Last',
'next': '&rarr;',
'previous': '&larr;'
}
}, },
drawCallback: function () { drawCallback: function() {
$(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup'); $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
}, },
preDrawCallback: function() { preDrawCallback: function() {
$(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup'); $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
} }
}); });
$("#modalAddButton").click(function(){ $("#modalAddButton").click(function() {
$("body").css("padding-right","0px !important") $("body").css("padding-right", "0px !important")
}) })
$("#saveuser").on("click", function(){ $("#saveuser").on("click", function() {
addUser() addUser()
}) })
function addUser(){ function addUser() {
var isObject = {}; var isObject = {};
var ars = '' var ars = ''
var group = $("#select_group").val(); var group = $("#select_group").val();
var iduser = $("#iduser").val(); var iduser = $("#iduser").val();
console.log(group); console.log(group);
if(iduser){ if (iduser) {
isObject.id = iduser; isObject.id = iduser;
} }
...@@ -757,16 +763,16 @@ ...@@ -757,16 +763,16 @@
// } // }
// } // }
// return false // return false
isObject['username'] = $("#inUsername").val(); isObject['username'] = $("#inUsername").val();
isObject['first_name'] = $("#inNameF").val(); isObject['first_name'] = $("#inNameF").val();
isObject['last_name'] = $("#inNameL").val(); isObject['last_name'] = $("#inNameL").val();
isObject['email'] = $("#inEmail").val(); isObject['email'] = $("#inEmail").val();
isObject.group = group isObject.group = group
isObject.isStaff = $('input[name="isStaff"]:checked').val(); isObject.isStaff = $('input[name="isStaff"]:checked').val();
console.log(isObject); console.log(isObject);
$.ajax({ $.ajax({
url: "{% url 'adduser' %}", url: "{% url 'adduser' %}",
...@@ -776,38 +782,38 @@ ...@@ -776,38 +782,38 @@
success: function(data) { success: function(data) {
let response = data; let response = data;
if(response.code == 0){ if (response.code == 0) {
$("#modal_theme_info").modal('toggle'); $("#modal_theme_info").modal('toggle');
destroyfade(); destroyfade();
swal({ swal({
title : response.info, title: response.info,
text : response.data, text: response.data,
type : "success", type: "success",
icon : "success", icon: "success",
confirmButtonColor: "#00BCD4" confirmButtonColor: "#00BCD4"
}).then((isok) => { }).then((isok) => {
location.reload(); location.reload();
}) })
}else{ } else {
swal({ swal({
title : response.info, title: response.info,
text : response.data, text: response.data,
type : "alert", type: "alert",
icon : "error", icon: "error",
confirmButtonColor: "#00BCD4" confirmButtonColor: "#00BCD4"
}) })
} }
} }
}); });
} }
$("#select_group").on("click", function(e){ $("#select_group").on("click", function(e) {
e.preventDefault() e.preventDefault()
}) })
function loadGroups(isSelect){ function loadGroups(isSelect) {
var isObject = {} var isObject = {}
console.log(isSelect) console.log(isSelect)
isObject.func_name = "loadGroups"; isObject.func_name = "loadGroups";
...@@ -818,66 +824,66 @@ ...@@ -818,66 +824,66 @@
dataType: 'json', dataType: 'json',
type: 'post', type: 'post',
success: function(data) { success: function(data) {
let response = data; let response = data;
console.log(response) console.log(response)
if(response.code == 0){ if (response.code == 0) {
var groups = response.data; var groups = response.data;
var html = `<option value="null" selected disabled>-- Pilih Group --</option>`; var html = `<option value="null" selected disabled>-- Pilih Group --</option>`;
for(i in groups){ for (i in groups) {
if(isSelect){ if (isSelect) {
if(isSelect.length>=1){ if (isSelect.length >= 1) {
for(j in isSelect){ for (j in isSelect) {
if(isSelect[j] == groups[i]){ if (isSelect[j] == groups[i]) {
html += `<option value="`+groups[i]+`" selected>`+groups[i]+`</option>`; html += `<option value="` + groups[i] + `" selected>` + groups[i] + `</option>`;
console.log(groups[i]) console.log(groups[i])
}else{ } else {
html += `<option value="`+groups[i]+`">`+groups[i]+`</option>`; html += `<option value="` + groups[i] + `">` + groups[i] + `</option>`;
} }
} }
}else{ } else {
html += `<option value="`+groups[i]+`">`+groups[i]+`</option>`; html += `<option value="` + groups[i] + `">` + groups[i] + `</option>`;
} }
}else{
html += `<option value="`+groups[i]+`">`+groups[i]+`</option>`;
} else {
html += `<option value="` + groups[i] + `">` + groups[i] + `</option>`;
} }
} }
$("#select_group").html(html); $("#select_group").html(html);
$("#select_group_parent").html(html); $("#select_group_parent").html(html);
console.log(html) console.log(html)
}else{ } else {
$("#select_group").html("group tidak tersedia"); $("#select_group").html("group tidak tersedia");
$("#select_group_parent").html("group tidak tersedia"); $("#select_group_parent").html("group tidak tersedia");
} }
} }
}); });
} }
function switchuserstatus(id, isactive){
function switchuserstatus(id, isactive) {
var isObject = {} var isObject = {}
var params = id.split(","); var params = id.split(",");
isObject.id = params[0]; isObject.id = params[0];
isObject.stat = params[1].replace(" ", ""); isObject.stat = params[1].replace(" ", "");
console.log(params) console.log(params)
if(isObject.stat == "True"){ if (isObject.stat == "True") {
var title = "Nonaktifkan"; var title = "Nonaktifkan";
var text = "User tidak akan bisa login jika dinonaktifkan!"; var text = "User tidak akan bisa login jika dinonaktifkan!";
}else{ } else {
var title = "Aktifkan"; var title = "Aktifkan";
var text = "User dapat kembali login jika diaktifkan!"; var text = "User dapat kembali login jika diaktifkan!";
} }
swal({ swal({
title: title+" user?", title: title + " user?",
text: text, text: text,
type: "warning", type: "warning",
showCancelButton: true, showCancelButton: true,
...@@ -886,48 +892,48 @@ ...@@ -886,48 +892,48 @@
cancelButtonText: "Tidak!", cancelButtonText: "Tidak!",
closeOnConfirm: false, closeOnConfirm: false,
closeOnCancel: false closeOnCancel: false
}).then((isConfirm) =>{ }).then((isConfirm) => {
console.log(isConfirm) console.log(isConfirm)
if (isConfirm.value) { if (isConfirm.value) {
$.ajax({ $.ajax({
url: "{% url 'switchStatus' %}", url: "{% url 'switchStatus' %}",
data: isObject, data: isObject,
dataType: 'json', dataType: 'json',
type: 'post', type: 'post',
success: function(data) { success: function(data) {
let response = data; let response = data;
if(isObject.stat == "True"){ if (isObject.stat == "True") {
var inf = "dinonaktifkan" var inf = "dinonaktifkan"
}else{ } else {
var inf = "diaktifkan" var inf = "diaktifkan"
} }
if(response.code == 0){ if (response.code == 0) {
swal({ swal({
title : "sukses", title: "sukses",
text : "User berhasil "+inf, text: "User berhasil " + inf,
type : "success", type: "success",
icon : "success", icon: "success",
confirmButtonColor: "#00BCD4" confirmButtonColor: "#00BCD4"
}).then((isok) => { }).then((isok) => {
location.reload(); location.reload();
}) })
}else{ } else {
alert("no data in database") alert("no data in database")
} }
} }
}); });
} else { } else {
swal("Dibatalkan", "User status tidak berubah", "error"); swal("Dibatalkan", "User status tidak berubah", "error");
} }
}); });
} }
function loaduserbyid(id){ function loaduserbyid(id) {
var isObject = {}; var isObject = {};
$(".modstit").html("Update User") $(".modstit").html("Update User")
$("#inUsername").attr("disabled", true) $("#inUsername").attr("disabled", true)
...@@ -941,27 +947,27 @@ ...@@ -941,27 +947,27 @@
dataType: 'json', dataType: 'json',
type: 'post', type: 'post',
success: function(data) { success: function(data) {
let response = data; let response = data;
if(response.code == 0){ if (response.code == 0) {
var user = response.data; var user = response.data;
console.log(user) console.log(user)
$("#inUsername").val(user.username); $("#inUsername").val(user.username);
$("#inNameF").val(user.firstname); $("#inNameF").val(user.firstname);
$("#inNameL").val(user.lastname); $("#inNameL").val(user.lastname);
$("#inEmail").val(user.email); $("#inEmail").val(user.email);
if(user.is_staff){ if (user.is_staff) {
$('input[name=isStaff][value=true]').attr('checked', true) $('input[name=isStaff][value=true]').attr('checked', true)
}else{ } else {
$('input[name=isStaff][value=false]').attr('checked', true) $('input[name=isStaff][value=false]').attr('checked', true)
} }
loadGroups(user.group) loadGroups(user.group)
$("#modalAddButton").click() $("#modalAddButton").click()
}else{ } else {
} }
} }
}); });
} }
...@@ -977,23 +983,23 @@ ...@@ -977,23 +983,23 @@
} }
}; };
$("#savegroup").on("click", function(){ $("#savegroup").on("click", function() {
addGroup(); addGroup();
}) })
function addGroup(){ function addGroup() {
var isObject = {} var isObject = {}
var idgroup = $("#idgroup").val(); var idgroup = $("#idgroup").val();
isObject.parent = $("#select_group_parent").val() isObject.parent = $("#select_group_parent").val()
isObject.name = $("#inGroupName").val(); isObject.name = $("#inGroupName").val();
if(idgroup){ if (idgroup) {
isObject.id = idgroup; isObject.id = idgroup;
} }
console.log(isObject) console.log(isObject)
// return false // return false
$.ajax({ $.ajax({
url: "{% url 'addGroup' %}", url: "{% url 'addGroup' %}",
data: isObject, data: isObject,
...@@ -1002,34 +1008,34 @@ ...@@ -1002,34 +1008,34 @@
success: function(data) { success: function(data) {
let response = data; let response = data;
if(response.code == 0){ if (response.code == 0) {
$("#modal_group").modal('toggle'); $("#modal_group").modal('toggle');
destroyfade(); destroyfade();
swal({ swal({
title : response.info, title: response.info,
text : response.data, text: response.data,
type : "success", type: "success",
icon : "success", icon: "success",
confirmButtonColor: "#00BCD4" confirmButtonColor: "#00BCD4"
}).then((isok) => { }).then((isok) => {
window.location.href = window.location.origin+"/usermanagement/?page=group" window.location.href = window.location.origin + "/usermanagement/?page=group"
}) })
}else{ } else {
swal({ swal({
title : response.info, title: response.info,
text : response.data, text: response.data,
type : "alert", type: "alert",
icon : "error", icon: "error",
confirmButtonColor: "#00BCD4" confirmButtonColor: "#00BCD4"
}) })
} }
} }
}); });
} }
function showmodalgroup(id, name){ function showmodalgroup(id, name) {
console.log(id); console.log(id);
console.log(name); console.log(name);
...@@ -1037,7 +1043,7 @@ ...@@ -1037,7 +1043,7 @@
$("#inGroupName").val(name); $("#inGroupName").val(name);
$(".modstitg").html("Edit Group"); $(".modstitg").html("Edit Group");
// $("#modalAddButtong").click(); // $("#modalAddButtong").click();
var isObject = {} var isObject = {}
isObject.id = id isObject.id = id
$.ajax({ $.ajax({
...@@ -1048,43 +1054,43 @@ ...@@ -1048,43 +1054,43 @@
success: function(data) { success: function(data) {
let response = data; let response = data;
if(response.code == 0){ if (response.code == 0) {
var datas = response.data var datas = response.data
if(datas.length == 0){ if (datas.length == 0) {
$("#container_sparent").css("display", "none") $("#container_sparent").css("display", "none")
}else{ } else {
$("#container_sparent").css("display", "block") $("#container_sparent").css("display", "block")
} }
loadGroups(datas) loadGroups(datas)
$("#modalAddButtong").click(); $("#modalAddButtong").click();
}else{ } else {
swal({ swal({
title : response.info, title: response.info,
text : response.data, text: response.data,
type : "alert", type: "alert",
icon : "error", icon: "error",
confirmButtonColor: "#00BCD4" confirmButtonColor: "#00BCD4"
}) })
} }
} }
}); });
} }
function deletegroup(id, group){ function deletegroup(id, group) {
var isObject = {} var isObject = {}
var params = id; var params = id;
isObject.id = params;
isObject.id = params;
swal({ swal({
title: "Hapus group?", title: "Hapus group?",
text: "Group "+group+" akan dihapus", text: "Group " + group + " akan dihapus",
type: "warning", type: "warning",
showCancelButton: true, showCancelButton: true,
confirmButtonClass: "btn-danger", confirmButtonClass: "btn-danger",
...@@ -1092,39 +1098,39 @@ ...@@ -1092,39 +1098,39 @@
cancelButtonText: "Tidak!", cancelButtonText: "Tidak!",
closeOnConfirm: false, closeOnConfirm: false,
closeOnCancel: false closeOnCancel: false
}).then((isConfirm) =>{ }).then((isConfirm) => {
console.log(isConfirm) console.log(isConfirm)
if (isConfirm.value) { if (isConfirm.value) {
$.ajax({ $.ajax({
url: "{% url 'deleteGroup' %}", url: "{% url 'deleteGroup' %}",
data: isObject, data: isObject,
dataType: 'json', dataType: 'json',
type: 'post', type: 'post',
success: function(data) { success: function(data) {
let response = data; let response = data;
if(response.code == 0){ if (response.code == 0) {
swal({ swal({
title : "sukses", title: "sukses",
text : "Group berhasil dihapus", text: "Group berhasil dihapus",
type : "success", type: "success",
icon : "success", icon: "success",
confirmButtonColor: "#00BCD4" confirmButtonColor: "#00BCD4"
}).then((isok) => { }).then((isok) => {
location.reload(); location.reload();
}) })
}else{ } else {
alert("no data in database") alert("no data in database")
} }
} }
}); });
} else { } else {
swal("Dibatalkan", "User status tidak berubah", "error"); swal("Dibatalkan", "User status tidak berubah", "error");
} }
}); });
} }
</script> </script>
\ No newline at end of file
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