Skip to content

O
OKU-GIS
Commit 60eaca51 authored by Muhamad's avatar Muhamad
Browse files
Options

jalan edit

parent 85e29181
Hide whitespace changes
Inline Side-by-side
Showing with 2519 additions and 1181 deletions
API/views.py
View file @ 60eaca51
......@@ -101,9 +101,10 @@ def jalan(request):
kulon = request.GET.get("kulon")
lor = request.GET.get("lor")
kidul = request.GET.get("kidul")
print(kulon, lor, wetan, lor, wetan, kidul, kulon, kidul, kulon, lor, kulon, lor, wetan, lor, wetan, kidul, kulon, kidul, kulon, lor)
with conn.cursor() as jalan:
jalan.execute("SELECT json_build_object ('type', 'Feature', 'properties', ( id, namrjl, st_length(geom::geography), lebar_jalan, remark, gambar), 'geometry', ST_AsGeoJSON ( st_intersection(geom, 'SRID=4326;POLYGON((%s %s, %s %s, %s %s, %s %s, %s %s))') :: geometry ) :: json ) FROM geo_jalan WHERE st_intersects(geom,'SRID=4326;POLYGON((%s %s, %s %s, %s %s, %s %s, %s %s))')"% (kulon, lor, wetan, lor, wetan, kidul, kulon, kidul, kulon, lor, kulon, lor, wetan, lor, wetan, kidul, kulon, kidul, kulon, lor))
jalan.execute("SELECT json_build_object ('type', 'Feature', 'properties', ( gj.ID, namrjl, st_length ( gj.geom :: geography ), gj.lebar_jalan, gj.remark, gj.gambar,(SELECT ARRAY_AGG ( '' || id || ',' || tgl_perbaikan || '' order by tgl_perbaikan DESC ) FROM tbl_perbaikan WHERE id_object = gj.ID ) ), 'geometry', ST_AsGeoJSON ( st_intersection(gj.geom, 'SRID=4326;POLYGON((%s %s, %s %s, %s %s, %s %s, %s %s))') :: geometry ) :: json ) FROM geo_jalan gj WHERE st_intersects(gj.geom,'SRID=4326;POLYGON((%s %s, %s %s, %s %s, %s %s, %s %s))') GROUP BY gj.id"% (kulon, lor, wetan, lor, wetan, kidul, kulon, kidul, kulon, lor, kulon, lor, wetan, lor, wetan, kidul, kulon, kidul, kulon, lor))
prov_res = jalan.fetchall()
data = {'gen':prov_res}
......
Application/urls.py
View file @ 60eaca51
......@@ -8,9 +8,15 @@ app_name = 'apps'
urlpatterns = [
path('', views.Dashboard.as_view(), name='dashboard'),
#Search
path('editkelurahan/', edit.editkelurahan, name='edit_kel'),
path('editkelurahan', views.editkelurahan, name='editkelurahan'),
path('perbaikan', views.perbaikanrenovasi, name='perbaikan'),
path('loadDetail', views.loadDetail, name='loadDetail'),
path('input-perbaikan', views.inpuperbaikan, name='input-perbaikan'),
path('save-perbaikan', views.saveperbaikan, name='save-perbaikan'),
path('load-jl-by-id-detail', views.loadbyiddetail, name='load-jl-by-id-detail'),
path('get-jalan-perbaikan', views.getjalanperbaikan, name='get-jalan-perbaikan'),
path('get-detail-perbaikan', views.getdetailperbaikan, name='get-detail-perbaikan'),
]
\ No newline at end of file
Application/views.py
View file @ 60eaca51
......@@ -503,6 +503,67 @@ def has_group(user, group_name):
def perbaikanrenovasi(request):
with conn.cursor() as data_per:
# data_per.execute("""
# SELECT
# gl.NAME,
# tp.name,
# tp.type,
# st_length ( gj.geom :: geography ),
# tp.tgl_pembuatan,
# tp.tgl_perbaikan,
# tp.anggaran,
# tp.proposal,
# tp.pj,
# tp.pj_lapangan,
# tp.kontraktor,
# ST_AsGeoJSON ( tp.geom :: geometry ) :: json,
# tp.pjg_perbaikan,
# tp.lbr_perbaikan,
# tp.id_object
# FROM
# tbl_perbaikan tp
# JOIN geo_label gl ON gl.ID = tp.type_id
# JOIN geo_jalan gj ON gj.ID = tp.id_object
# """)
data_per.execute("""
SELECT
gl.NAME,
tp.id_object,
tp.NAME,
tp.TYPE,
tp.tgl_perbaikan,
tp.anggaran,
tp.tgl_selesai
FROM
( SELECT tbl_perbaikan.*, ROW_NUMBER ( ) OVER ( PARTITION BY id_object ORDER BY tgl_selesai DESC ) AS rn FROM tbl_perbaikan ) tp
JOIN geo_label gl ON gl.ID = tp.type_id
WHERE
rn = 1
""")
res_perbaikan = data_per.fetchall()
res_all = []
for j in res_perbaikan:
print(j[0])
# if j[0] == 'jalan':
data_all = {
'name_perbaikan':j[0],
'id_object':j[1],
'name':j[2],
'type':j[3],
'tgl_perbaikan':j[4],
'anggaran':j[5],
'tgl_selesai':j[6],
}
res_all.append(data_all)
context = {'res_all':res_all}
return render(request, 'maps/perbaikan.html', context)
@api_view(('POST',))
def loadDetail(request):
id_object = request.POST.get('id')
with conn.cursor() as data_per:
data_per.execute("""
SELECT
......@@ -512,71 +573,260 @@ def perbaikanrenovasi(request):
st_length ( gj.geom :: geography ),
tp.tgl_pembuatan,
tp.tgl_perbaikan,
tp.tgl_selesai,
tp.anggaran,
tp.proposal,
tp.pj,
tp.pj_lapangan,
tp.kontraktor,
ST_AsGeoJSON ( tp.geom :: geometry ) :: json,
tp.pjg_perbaikan,
tp.lbr_perbaikan,
tp.id_object
tp.id_object,
tp.id,
tp.proposal,
tp.bukti_selesai
FROM
tbl_perbaikan tp
JOIN geo_label gl ON gl.ID = tp.type_id
JOIN geo_jalan gj ON gj.ID = tp.id_object
""")
where tp.id_object = %s"""% id_object)
res_perbaikan = data_per.fetchall()
res_jln = []
res_skl = []
res_all = []
for j in res_perbaikan:
print(j[0])
if j[0] == 'jalan':
data_jln = {
'name':j[1],
'type':j[2],
'panjang':j[3],
'tgl_pembuatan':j[4],
'tgl_perbaikan':j[5],
'anggaran':j[6],
'proposal':j[7],
'pj':j[8],
'pj_lapangan':j[9],
'kontraktor':j[10],
'geometry':j[11],
'pjg_jln_reno':j[12],
'lbr_jln_reno':j[13],
'id':j[14]
}
res_jln.append(data_jln)
if j[0] == 'sarana pendidikan':
data_skl = {
data_all = {
'name':j[1],
'type':j[2],
'panjang':j[3],
'tgl_pembuatan':j[4],
'tgl_perbaikan':j[5],
'anggaran':j[6],
'proposal':j[7],
'tgl_selesai':j[6],
'anggaran':j[7],
'pj':j[8],
'pj_lapangan':j[9],
'kontraktor':j[10],
'geometry':j[11],
'pjg_jln_reno':j[12],
'lbr_jln_reno':j[13],
'id':j[14]
'id_object':j[14],
'id':j[15],
'proposal':j[16],
'bukti_selesai':j[17]
}
res_skl.append(data_skl)
print(res_skl)
print(res_jln)
context = {'jalan':res_jln, 'all':['jalan','sarana pendidikan'], 'pendidikan':res_skl}
return render(request, 'maps/perbaikan.html', context)
res_all.append(data_all)
respon =res_all
return Response(respon)
@api_view(('GET',))
def inpuperbaikan(request):
id = request.GET.get('id_jalan')
with conn.cursor() as data_per:
data_per.execute("""
SELECT
namrjl,
remark,
st_length ( geom :: geography ),
json_build_object (
'type', 'Feature',
'geometry', ST_AsGeoJSON ( geom :: geometry ) :: json ) ,
id,
type_id
FROM
geo_jalan
where id = %s
"""% id)
res_data = data_per.fetchall()
respon = res_data[0]
return Response(respon)
from django.core.files.storage import FileSystemStorage
import random
import re
import json
@api_view(('POST',))
def loadDetail(request):
id_object = request.POST.get('id')
def saveperbaikan(request):
type_id = request.POST.get("type_id")
id_object = request.POST.get("object_id")
name = request.POST.get("name")
type = request.POST.get("type")
tgl_pembuatan = request.POST.get("tgl_pembuatan")
tgl_perbaikan = request.POST.get("tgl_perbaikan")
tgl_disetujui = request.POST.get("tgl_disetujui")
anggaran = request.POST.get("anggaran")
pj = request.POST.get("pj")
pj_lapangan = request.POST.get("pj_lapangan")
kontraktor = request.POST.get("kontraktor")
pjg_perbaikan = request.POST.get("pjg_perbaikan")
lbr_perbaikan = request.POST.get("lbr_perbaikan")
jenis_perbaikan = request.POST.get("jenis_perbaikan")
luas = request.POST.get("luas")
coor = request.POST.get("coord")
tgl_selesai = request.POST.get("tgl_selesai")
proposal = request.FILES.get("proposal")
bukti_selesai = request.FILES.get("bukti_selesai")
print(coor, proposal)
fss_p = FileSystemStorage(location='media/proposal/')
fss_b = FileSystemStorage(location='media/bukti_penyelesaian/')
coord = json.loads(str(coor))
pjg_perbaikan = re.sub('[^0-9.]+', '', str(pjg_perbaikan))
lbr_perbaikan = re.sub('[^0-9.]+', '', str(lbr_perbaikan))
luas = re.sub('[^0-9.]+', '', str(luas))
if coord['features'][0]['geometry']['type'] == 'LineString':
print("oke")
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})'
if coord['features'][0]['geometry']['type'] == 'Polygon':
print('tidakoke')
try:
format = (proposal.name).split(".")
num = random.randrange(1, 10000000000000)
nproposal = f"{name}_{num}.{format[-1:][0]}"
nproposal = nproposal.replace(" ","-")
filename_p = fss_p.save(nproposal, proposal)
url_p = fss_p.url(filename_p)
nbukti = f"{name}_{num}.{format[-1:][0]}"
nbukti = nbukti.replace(" ","-")
filename_b = fss_b.save(nbukti, bukti_selesai)
url_b = fss_b.url(filename_b)
with conn.cursor() as data_per:
data_per.execute("""
INSERT INTO tbl_perbaikan (
type_id,
id_object,
name,
type,
tgl_selesai,
tgl_perbaikan,
tgl_disetujui,
anggaran,
proposal,
bukti_selesai,
pj,
pj_lapangan,
kontraktor,
pjg_perbaikan,
lbr_perbaikan,
jenis_perbaikan,
geom
)
VALUES
(
%s,
%s,
'%s',
'%s',
'%s',
'%s',
'%s',
%s,
'%s',
'%s',
'%s',
'%s',
'%s',
%s,
%s,
'%s',
ST_GeomFromText('%s')
)
"""% (
int(type_id),
int(id_object),
name,
type,
tgl_selesai,
tgl_perbaikan,
tgl_disetujui,
int(anggaran),
nproposal,
nbukti,
pj,
pj_lapangan,
kontraktor,
float(pjg_perbaikan),
float(lbr_perbaikan),
jenis_perbaikan,
coordinat))
conn.commit()
data = "Alhamdulilah"
info = "Data Telah Berhasil di Perbaharui"
code = 0
except:
data = "Pastikan Semua Data Terisi Termasuk Proposal dan Bukti Selesai"
info = "Oops"
code = 1
respon = {"data":data,"info":info,"code":code}
return Response(respon)
@api_view(('GET',))
def loadbyiddetail(request):
id = request.GET.get('id')
id_jl = request.GET.get('id_jl')
with conn.cursor() as detail_maps:
detail_maps.execute("""
SELECT
json_build_object (
'type', 'Feature',
'geometry', ST_AsGeoJSON ( a.geom :: geometry ) :: json ),
json_build_object (
'type', 'Feature',
'geometry', ST_AsGeoJSON ( b.geom :: geometry ) :: json )
from
tbl_perbaikan a, geo_jalan b
where
a.id = %s and b.id = %s
"""% (id, id_jl))
detail_ = detail_maps.fetchone()
print(detail_)
respon=detail_
return Response(respon)
@api_view(('GET',))
def getjalanperbaikan(request):
id = request.GET.get('id')
with conn.cursor() as detail_maps:
detail_maps.execute("""
SELECT
json_build_object (
'type', 'Feature',
'geometry', ST_AsGeoJSON ( a.geom :: geometry ) :: json )
from
tbl_perbaikan a
where
a.id = %s
"""% id)
detail_ = detail_maps.fetchone()
print(detail_)
respon=detail_
return Response(respon)
@api_view(('GET',))
def getdetailperbaikan(request):
id_object = request.GET.get('id')
with conn.cursor() as data_per:
data_per.execute("""
SELECT
......@@ -586,22 +836,25 @@ def loadDetail(request):
st_length ( gj.geom :: geography ),
tp.tgl_pembuatan,
tp.tgl_perbaikan,
tp.tgl_selesai,
tp.anggaran,
tp.proposal,
tp.pj,
tp.pj_lapangan,
tp.kontraktor,
ST_AsGeoJSON ( tp.geom :: geometry ) :: json,
tp.pjg_perbaikan,
tp.lbr_perbaikan,
tp.id_object
tp.id_object,
tp.id,
tp.proposal,
tp.bukti_selesai
FROM
tbl_perbaikan tp
JOIN geo_label gl ON gl.ID = tp.type_id
JOIN geo_jalan gj ON gj.ID = tp.id_object
where tp.id_object = %s"""% id_object)
where tp.id = %s"""% id_object)
res_perbaikan = data_per.fetchall()
res_all = []
for j in res_perbaikan:
data_all = {
......@@ -610,17 +863,46 @@ def loadDetail(request):
'panjang':j[3],
'tgl_pembuatan':j[4],
'tgl_perbaikan':j[5],
'anggaran':j[6],
'proposal':j[7],
'tgl_selesai':j[6],
'anggaran':j[7],
'pj':j[8],
'pj_lapangan':j[9],
'kontraktor':j[10],
'geometry':j[11],
'pjg_jln_reno':j[12],
'lbr_jln_reno':j[13],
'id':j[14]
'id_object':j[14],
'id':j[15],
'proposal':j[16],
'bukti_selesai':j[17]
}
res_all.append(data_all)
respon =res_all
return Response(respon)
\ No newline at end of file
return Response(respon)
@api_view(('GET',))
def editkelurahan(request):
kode_dagri = request.GET.get('kode_dagri')
with conn.cursor() as edit_poly:
edit_poly.execute("SELECT json_build_object('type', 'Feature', 'administrasi', json_build_array(kode_desa, desa, kecamatan, kab_kota, provinsi, jumlah_pen, jumlah_kk, luas_desa),'penduduk', json_build_array(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', json_build_array(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), 'poi',json_build_array(jml_puskesma, jml_sekolah, jml_sarib),'geometry', ST_AsGeoJSON(geom :: geometry) :: json) from geo_data_kelurahan where kode_desa = '%s'"% kode_dagri)
res_edit_poly = edit_poly.fetchall()
print(res_edit_poly)
la = []
lo = []
for i in res_edit_poly[0][0]['geometry']['coordinates'][0][0]:
la.append(i[0])
lo.append(i[1])
avg_la = sum(la)/len(la)
avg_lo = sum(lo)/len(lo)
desa = res_edit_poly[0][0]['administrasi'][1]
kec = res_edit_poly[0][0]['administrasi'][2]
kab = res_edit_poly[0][0]['administrasi'][3]
prov = res_edit_poly[0][0]['administrasi'][4]
context = {'desa':desa, 'kec':kec, 'kab':kab, 'prov':prov,'result_poly': res_edit_poly[0][0], 'avg_la':avg_la, 'avg_lo':avg_lo}
return Response(context)
\ No newline at end of file
OKU/settings.py
View file @ 60eaca51
......@@ -42,7 +42,7 @@ INSTALLED_APPS = [
'Application',
'API',
'myauth.apps.MyauthConfig',
'widget_tweaks',
'widget_tweaks'
]
MIDDLEWARE = [
......@@ -144,4 +144,7 @@ STATICFILES_DIRS = (
STATIC_ROOT = '/static/'
LOGIN_REDIRECT_URL = '/'
\ No newline at end of file
LOGIN_REDIRECT_URL = '/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
\ No newline at end of file
OKU/urls.py
View file @ 60eaca51
......@@ -36,4 +36,4 @@ urlpatterns = [
path('addGroup/', views.addGroup, name="addGroup"),
path('deleteGroup/', views.deleteGroup, name="deleteGroup"),
path('getGroupById/', views.loadGroupByGroupId, name='getGroupById')
]
]+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
static/js/scripts.js
View file @ 60eaca51
......@@ -80,6 +80,7 @@ $("#button_unhide").click(function() {
$("#button_hide_panel").click(function() {
$("#panel-samping").toggleClass("move");
// $("#panel-samping").css('display', 'none');
$("#button_unhide_panel").css('display', 'block');
$("#button_hide_panel").css('display', 'none');
......@@ -90,8 +91,11 @@ $("#button_hide_panel").click(function() {
})
$("#button_unhide_panel").click(function() {
$(".pace-done").toggleClass("sidebar-move")
$("#panel-samping").toggleClass("move");
$(".mymodal").toggleClass("input_perbaikan")
$(this).toggleClass("move-btn");
// $("#panel-samping").css('display', 'block');
// $("#button_unhide").css('display', 'none');
// $("#button_hide_panel").css('display', 'block');
......
templates/includes/js-o.html
View file @ 60eaca51
{% for group in user.groups.all %}
{% load static %} {% for group in user.groups.all %}
<script>
swal({
title: 'SUKSES',
......@@ -212,7 +212,7 @@
content = `
<table class="table table-hover tasks-list">
<table class="table tasks-list">
<thead style="text-align: center;">
<tr>
<th style="padding: 0 0 0 0px;">
......@@ -262,8 +262,9 @@
</tr>
<tr>
<td>
<a href="/editkelurahan/?kode_dagri=` + encodeURIComponent(feature.administrasi.f1) + `" id='btn_edit_kelurahan' class='btn
btn-default btn_edit_kelurahan'>Edit</a>
<input class="hidden" id="kode_desa_dagri" value="` + feature.administrasi.f1 + `"></input>
<a id='btn_edit_kelurahan' class='btn
btn-default btn_edit_kelurahan' style="left: 130px;">Edit</a>
</td>
</tr>
<tr>
......@@ -538,8 +539,8 @@
</table>`;
$("#panel-samping").css("display", "block");
$("#button_hide_panel").css("display", "block")
// $("#thisFooter").css('left', '380px');
// $("#thisFooter").css('width', '930px');
// $("#thisFooter").css('left', '380px');
// $("#thisFooter").css('width', '930px');
$("#thisFooter").css('display', 'none');
$("#button_unhide").css('display', 'block')
$("#isi_panel").html(content)
......@@ -554,8 +555,6 @@
<div class="row">
<div class="col-md-5" style="min-width: 300px;">
<div class="form-group">
<label class="text-semibold">Informasi</label>
<div>
<table>
<tr>
......@@ -588,7 +587,7 @@
</div>
</div>
<div class="col-md-4" style="min-width: 150px;">
<div class="form-group" style="top: 25px;">
<div class="form-group">
<table>
<tr>
......@@ -625,7 +624,7 @@
</table>
</div>
</div>
<div class="col-md-3" style="min-width: 150px;padding-left:50px;bottom:-128px">
<div class="" style="min-width: 150px;padding-left:50px;bottom:-128px">
<i><b>
Sumber : DUKCAPIL, 2019
</b></i>
......@@ -656,6 +655,204 @@
});
};
var map_kel = L.map('map-kelurahan', {
editable: true,
zoomControl: false,
drawControl: true
}).setView([-4.125826277307029, 104.1881561279297], 10);
mapxxx = L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}&s=Gal&apistyle=s.t:0|s.e:l|p.v:off', {
maxZoom: 22,
minZoom: 4,
}).addTo(map_kel);
var polygon_kel = L.polygon(null).addTo(map_kel)
$(document).on("click", "#btn_edit_kelurahan", function() {
polygon_kel.clearLayers()
$("#edit_kelurahan").css("display", "block")
var id = $("#kode_desa_dagri").val()
setTimeout(function() {
map_kel.invalidateSize();
}, 1000);
$.ajax({
url: "{% url 'apps:editkelurahan'%}",
data: {
'kode_dagri': id
},
dataType: 'json',
success: function(data) {
var ket_kel = ['kodekelurahan', 'kelurahan', 'kecamatan', 'kabupaten', 'provinsi', 'jumlahpenduduk', 'jumlahkk', 'luasdesa']
var ket_penduduk = ['jumlahlakilaki', 'jumlahperempuan', 'belumkawin', 'kawin', 'ceraihidup', 'ceraimati', 'wajibktp', 'islam', 'kristen', 'katolik', 'hindu', 'budha', 'konghucu', 'kepercayaanlain', 'u0', 'u5', 'u10', 'u15', 'u20', 'u25', 'u30', 'u35', 'u40', 'u45', 'u50', 'u55', 'u60', 'u65', 'u70', 'u75']
var ket_pendidik = ['tidaksekolah', 'belumtamat', 'tamatsd', 'tamatsltp', 'tamatslta', 'diplomai', 'diplomaiii', 'diplomaiv', 'strataii', 'strataiii', 'tidakbekerja', 'aparaturpemerintah', 'tenagapendidik', 'wiraswasta', 'pertanian', 'tenagakesehatan', 'pensiunan', 'pegawai', 'tentara', 'kepolisian', 'dosen', 'guru', 'pilot', 'pedagang', 'petani', 'peternak', 'nelayan', 'karyawan', 'buruh', 'pembantu', 'tukang', 'pendeta', 'pastor', 'ustadz', 'pengacara', 'notaris', 'arsitek', 'akuntan', 'dokter', 'bidan', 'perawat', 'psikiater', 'sopir', 'lainnya']
var result_kelurahan = data.result_poly.administrasi;
var result_penduduk = data.result_poly.penduduk;
var result_pend_pekerja = data.result_poly.pekerjaan_pendidikan;
var result_poi = data.result_poly.poi;
for (var i = 0; i < result_kelurahan.length; i++) {
$("#" + ket_kel[i] + "").val(result_kelurahan[i])
}
for (var i = 0; i < result_penduduk.length; i++) {
$("#" + ket_penduduk[i] + "").val(result_penduduk[i])
}
for (var i = 0; i < result_pend_pekerja.length; i++) {
$("#" + ket_pendidik[i] + "").val(result_pend_pekerja[i])
}
var poldit = data.result_poly;
map_kel.setView([data.avg_lo, data.avg_la], 12);
//
let lop_poly_edit = poldit['geometry']['coordinates'][0][0];
let list_poly_edit = [];
for (var i = 0; i < lop_poly_edit.length; i++) {
geoj = lop_poly_edit[i][0];
polygigi = [lop_poly_edit[i][1], lop_poly_edit[i][0]]
list_poly_edit.push(polygigi);
};
polygon_kel.addData(list_poly_edit)
polygon_kel.enableEdit();
var hasil = (JSON.stringify(polygon_kel.toGeoJSON()))
$("#coordinatekel").val(hasil)
}
})
});
$('#btnsavevalidasi').click(function() {
var ketket = ['kodekelurahan', 'kelurahan', 'kecamatan', 'kabupaten', 'provinsi', 'luasdesa', 'jumlahpenduduk', 'jumlahkk', 'jumlahlakilaki', 'jumlahperempuan', 'belumkawin', 'kawin', 'ceraihidup', 'ceraimati', 'wajibktp', 'islam', 'kristen', 'katolik', 'hindu', 'budha', 'konghucu', 'kepercayaanlain', 'u0', 'u5', 'u10', 'u15', 'u20', 'u25', 'u30', 'u35', 'u40', 'u45', 'u50', 'u55', 'u60', 'u65', 'u70', 'u75', 'tidaksekolah', 'belumtamat', 'tamatsd', 'tamatsltp', 'tamatslta', 'diplomai', 'diplomaiii', 'diplomaiv', 'strataii', 'strataiii', 'tidakbekerja', 'aparaturpemerintah', 'tenagapendidik', 'wiraswasta', 'pertanian', 'tenagakesehatan', 'pensiunan', 'pegawai', 'tentara', 'kepolisian', 'dosen', 'guru', 'pilot', 'pedagang', 'petani', 'peternak', 'nelayan', 'karyawan', 'buruh', 'pembantu', 'tukang', 'pendeta', 'pastor', 'ustadz', 'pengacara', 'notaris', 'arsitek', 'akuntan', 'dokter', 'bidan', 'perawat', 'psikiater', 'sopir', 'lainnya', 'coordinatekel']
for (var i = 0; i < ketket.length; i++) {
window[ketket[i]] = $('#' + ketket[i]).val()
}
var ketek = [kodekelurahan, kelurahan, kecamatan, kabupaten, provinsi, luasdesa, jumlahpenduduk, jumlahkk, jumlahlakilaki, jumlahperempuan, belumkawin, kawin, ceraihidup, ceraimati, wajibktp, islam, kristen, katolik, hindu, budha, konghucu, kepercayaanlain, u0, u5, u10, u15, u20, u25, u30, u35, u40, u45, u50, u55, u60, u65, u70, u75, tidaksekolah, belumtamat, tamatsd, tamatsltp, tamatslta, diplomai, diplomaiii, diplomaiv, strataii, strataiii, tidakbekerja, aparaturpemerintah, tenagapendidik, wiraswasta, pertanian, tenagakesehatan, pensiunan, pegawai, tentara, kepolisian, dosen, guru, pilot, pedagang, petani, peternak, nelayan, karyawan, buruh, pembantu, tukang, pendeta, pastor, ustadz, pengacara, notaris, arsitek, akuntan, dokter, bidan, perawat, psikiater, sopir, lainnya, coordinatekel]
var ketek_json = {}
for (var i = 0; i < ketket.length; i++) {
ketek_json[ketket[i]] = ketek[i];
}
var data = new FormData();
data.append("file", $("input[id^='file']")[0].files[0]);
data.append("csrfmiddlewaretoken", "{{ csrf_token }}");
$.each(ketek_json, function(key, value) {
data.append(key, value);
})
data.append('coordinate', hasil)
$.ajax({
url: "{% url 'api:kependudukan' %}",
data: data,
dataType: 'json',
type: 'POST',
processData: false,
contentType: false,
mimeType: "multipart/form-data",
success: function(data) {
let response = data
if (response.code == 0) {
swal({
title: response.info,
text: response.data,
type: "success",
icon: "success",
confirmButtonColor: "#00BCD4"
}).then((isok) => {
$("#modal_theme_info").css('display', 'none');
})
} else {
swal({
title: response.info,
text: response.data,
type: "warning",
icon: "error",
confirmButtonColor: "#00BCD4"
})
}
for (var i = 0; i < data['penduduk'].length; i++) {
$('#' + ketket[i]).val(data['penduduk'][i])
}
}
});
});
$('#savedatakelurahankel').click(function() {
var data = new FormData();
data.append("file", $("input[id^='file']")[0].files[0]);
data.append("csrfmiddlewaretoken", "{{ csrf_token }}");
var ket_kel = ['kodekelurahan', 'kelurahan', 'kecamatan', 'kabupaten', 'provinsi', 'luasdesa']
var ket_penduduk = ['jumlahpenduduk', 'jumlahkk', 'jumlahlakilaki', 'jumlahperempuan', 'belumkawin', 'kawin', 'ceraihidup', 'ceraimati', 'wajibktp', 'islam', 'kristen', 'katolik', 'hindu', 'budha', 'konghucu', 'kepercayaanlain', 'u0', 'u5', 'u10', 'u15', 'u20', 'u25', 'u30', 'u35', 'u40', 'u45', 'u50', 'u55', 'u60', 'u65', 'u70', 'u75']
var ket_pendidik = ['tidaksekolah', 'belumtamat', 'tamatsd', 'tamatsltp', 'tamatslta', 'diplomai', 'diplomaiii', 'diplomaiv', 'strataii', 'strataiii']
var ket_pekerja = ['tidakbekerja', 'aparaturpemerintah', 'tenagapendidik', 'wiraswasta', 'pertanian', 'tenagakesehatan', 'pensiunan', 'pegawai', 'tentara', 'kepolisian', 'dosen', 'guru', 'pilot', 'pedagang', 'petani', 'peternak', 'nelayan', 'karyawan', 'buruh', 'pembantu', 'tukang', 'pendeta', 'pastor', 'ustadz', 'pengacara', 'notaris', 'arsitek', 'akuntan', 'dokter', 'bidan', 'perawat', 'psikiater', 'sopir', 'lainnya']
var poi = []
var data_kel = []
var data_penduduk = []
var data_pendidik = []
var data_pekerjaan = []
var data_all = []
for (var i = 0; i < ket_kel.length; i++) {
data_kel.push(`
<tr>
<th>` + ket_kel[i] + `</th>
<td>` + $('#' + ket_kel[i]).val() + `</td>
</tr>`)
}
for (var i = 0; i < ket_penduduk.length; i++) {
data_penduduk.push(`
<tr>
<th>` + ket_penduduk[i] + `</th>
<td>` + $('#' + ket_penduduk[i]).val() + `</td>
</tr>`)
}
for (var i = 0; i < ket_pendidik.length; i++) {
data_pendidik.push(`
<tr>
<th>` + ket_pendidik[i] + `</th>
<td>` + $('#' + ket_pendidik[i]).val() + `</td>
</tr>`)
}
for (var i = 0; i < ket_pekerja.length; i++) {
data_pekerjaan.push(`
<tr>
<th>` + ket_pekerja[i] + `</th>
<td>` + $('#' + ket_pekerja[i]).val() + `</td>
</tr>`)
}
$("#valid-edit-kel").html(data_kel);
$("#valid-edit-penduduk").html(data_penduduk);
$("#valid-edit-pendidik").html(data_pendidik);
$("#valid-edit-pekerja").html(data_pekerjaan);
});
map.on('zoomend', function() {
var zoom = map.getZoom();
......@@ -750,22 +947,6 @@
}
}
// var geojsonFeature = {
// "type": "Feature",
// "properties": {
// "name": "Coors Field",
// "amenity": "Baseball Stadium",
// "popupContent": "This is where the Rockies play!"
// },
// "geometry": {
// "type": "Point",
// "coordinates": [104.1881561279297, -4.125826277307029]
// }
// };
//L.geoJSON(geojsonFeature, {
// onEachFeature: onEachFeature
//}).addTo(map);
function batasdesa() {
var checkBox = document.getElementById("batas_desa");
......@@ -957,48 +1138,7 @@
content = `
<a href="#" id='btn_edit_tuplah' class='btn
btn-default btn_edit_tuplah' style="position: absolute;
top: 6px;right: 5px;width: 60px;" data-toggle="modal" data-target="#modal-edit-tuplah" data-backdrop="static" data-keyboard="false">Edit</a>
<div id="modal-edit-tuplah" class="modal fade">
<div class="modal-dialog" style="width: max-content;height: max-content;">
<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">Batas Lahan</h6>
</div>
<input type="text" name="idtuplah" id="idtuplah" class="form-control hidden" value="` + feature.legend.f1 + `">
<input type="text" name="coordinatetuplah" id="coordinatetuplah" class="form-control hidden" value="">
<div class="modal-body" style="max-height: 450px;overflow-y: auto;">
<div id="map-edit-tuplah" style="width:400px;height: 350px;">
</div>
<br>
<table>
<tr>
<th>
Image
</th>
<td>
<input type="file" id="imgtuplah" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif">
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
<button type="button" id="btnsavetuplah" class="btn btn-info">Save changes</button>
</div>
</div>
</div>
</div>
<table class="table table-hover tasks-list">
<table class="table tasks-list">
<thead style="text-align: center;">
<tr>
<th style="padding: 0 0 0 0px;">
......@@ -1028,6 +1168,9 @@
<p>
<span>Luas Lahan : ` + feature.legend.f3 + `</span>
</p>
<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>
</p>
</th>
</tr>
</div>
......@@ -1273,121 +1416,7 @@
content = `
<a href="#" id='btn_edit_bangunan' class='btn
btn-default btn_edit_bangunan' style="position: absolute;
top: 6px;right: 5px;width: 60px;" data-toggle="modal" data-target="#modal_bangunan_edit" data-backdrop="static" data-keyboard="false">Edit</a>
<div id="modal_bangunan_edit" class="modal fade">
<div class="modal-dialog" style="width: max-content;height: max-content;">
<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">Edit Polygon Bangunan dan Informasinya</h6>
</div>
<div class="modal-body" style="max-height: 450px;overflow-y: auto;">
<div class="row">
<div class="col-md-5">
<div id="map-edit" style="width:400px;height: 350px;">
</div>
</div>
<div class="col-md-4">
<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">
</td>
</tr>
<tr>
<th>Id</th>
<td>
<input type="text" name="idbangunan" id="idbangunan" class="form-control hidden" value="` + feature.properties.f1 + `" disable>
</td>
</tr>
<tr>
<th>Nama Bangunan</th>
<td>
<input type="text" name="namebangunan" id="namebangunan" class="form-control" value="` + feature.properties.f2 + `">
</td>
</tr>
<tr>
<th>Informasi Bangunan</th>
<td>
<input type="text" name="infobangunan" id="infobangunan" class="form-control" value="` + feature.properties.f3 + `">
</td>
</tr>
<tr>
<th>Kelurahan</th>
<td>
<input type="text" name="nmkelurahan" id="nmkelurahan" class="form-control" value="` + feature.administrasi.f1 + `">
</td>
</tr>
<tr>
<th>Kecamatan</th>
<td>
<input type="text" name="nmkecamatan" id="nmkecamatan" class="form-control" value="` + feature.administrasi.f2 + `">
</td>
</tr>
<tr>
<th>Kab/Kota</th>
<td>
<input type="text" name="nmkabkota" id="nmkabkota" class="form-control" value="` + feature.administrasi.f3 + `">
</td>
</tr>
<tr>
<th>Provinsi</th>
<td>
<input type="text" name="nmprovinsi" id="nmprovinsi" class="form-control" value="` + feature.administrasi.f4 + `">
</td>
</tr>
</table>
</div>
<div class="col-md-3">
<table>
<tr>
<th>Luas Bangunan</th>
<td>
<input type="text" name="luasbangunan" id="luasbangunan" class="form-control" value="` + feature.administrasi.f6 + `">
</td>
</tr>
<tr>
<th>Luas Tanah</th>
<td>
<input type="text" name="luastanah" id="luastanah" class="form-control" value="` + feature.administrasi.f7 + `">
</td>
</tr>
<tr>
<th>Tinggi Bangunan</th>
<td>
<input type="text" name="tinggibangunan" id="tinggibangunan" class="form-control" value="` + feature.administrasi.f8 + `">
</td>
</tr>
<tr>
<th>Pemilik</th>
<td>
<input type="text" name="pemilik" id="pemilik" class="form-control" value="` + feature.administrasi.f10 + `">
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
<button type="button" id="btnsavebangunan" class="btn btn-info">Save changes</button>
</div>
</div>
</div>
</div>
<table class="table table-hover tasks-list">
<table class="table tasks-list">
<thead style="text-align: center;">
<tr>
<th style="padding: 0 0 0 0px;">
......@@ -1444,6 +1473,9 @@
<p>
<span>Pemilik : ` + feature.administrasi.f10 + `</span>
</p>
<p class="text-center" style="margin-top: 25px;">
<a href="#" class="btn btn-default" data-toggle="modal" data-target="#modal_bangunan_edit" id="btn_edit_bangunan" data-backdrop="static" data-keyboard="false"><i>Edit Informasi Bangunan</i></a>
</p>
</th>
</tr>
</div>
......@@ -1726,94 +1758,50 @@
var nmjalan = feature.properties.f2
};
var history
if (feature.properties.f7 != null) {
var list_history = feature.properties.f7
var list_history_panel = ``
for (var i = 0; i < list_history.length; i++) {
var dt_history = list_history[i].split(",");
var data_history = `<div class="form-group" style="margin-bottom:0px;">
<div class="row">
<label class="col-md-6">` + dt_history[1] + `</label>
<a class="col-md-3" onclick="getjalanper(` + dt_history[0] + `)"><i>View Ruas</i></a>
<a class="col-md-3" onclick="getdetailper(` + dt_history[0] + `)" data-toggle="modal" data-target="#modal_detail"><i>View Detail</i></a>
</div>
</div>`;
list_history_panel += data_history
};
history = `<p class="text-center">
History Perbaikan
</p>
<br>
` + list_history_panel + `
<p class="text-center" style="margin-top: 10px;">
<a href="#" id='btn_perbaikan_jalan' class="btn btn-default"><i>Tambah History Perbaikan</i></a>
</p>`;
} else {
history = `<p class="text-center">
History Perbaikan
</p>
<br>
<p class="text-center" style="margin-top: 10px;">
<a href="#" id='btn_perbaikan_jalan' class="btn btn-default"><i>Input History Perbaikan</i></a>
</p>`;
}
content = `
<a href="#" id='btn_jalan' style="position: absolute;
top: 240px;
right: 0px;
width: 160px;
height: 30px;
background-color: transparent;
padding: 0px 0px;
color: black;" data-toggle="modal" data-target="#modal-jalan" data-backdrop="static" data-keyboard="false"><i>edit informasi Jalan</i></a>
<a href="#" id='btn_perbaikan_jalan' style="position: absolute;
top: 300px;
right: 0px;
width: 160px;
height: 30px;
background-color: transparent;
padding: 0px 0px;
color: black;"><i>Perbaikan</i></a>
<div id="modal-jalan" class="modal fade">
<div class="modal-dialog" style="width: max-content;height: max-content;">
<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">Maps Jalan</h6>
</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 id="map-jalan" style="width:400px;height: 350px;">
</div>
<br>
<table>
<tr>
<th>
Image
</th>
<td>
<input type="file" id="imgjalan" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif">
</td>
</tr>
<tr>
<th>
Nama Jalan (m)
</th>
<td>
<input type="text" id="namajalan" class="form-control" value="` + nmjalan + `">
</td>
</tr>
<tr>
<th>
Panjang Jalan (m)
</th>
<td>
<input type="text" id="panjangjalan" class="form-control" value="` + feature.properties.f3 + `">
</td>
</tr>
<tr>
<th>
Lebar Jalan (m)
</th>
<td>
<input type="text" id="lebarjalan" class="form-control" value="` + feature.properties.f4 + `">
</td>
</tr>
<tr>
<th>
Tipe Jalan
</th>
<td>
<input type="text" id="tipejalan" class="form-control" value="` + feature.properties.f5 + `">
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<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>
<table class="table table-hover tasks-list">
<table class="table 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: 368px;height:368">
<img src=` + path_img + ` alt="Image" style="width: 100%;max-height: 237px;height:237">
</th>
</tr>
</thead>
......@@ -1834,34 +1822,40 @@
</tr>
</div>
<div class= "container">
<tr>
<tr style="height: 40px;">
<th>
<p>
<span>Panjang Jalan : ` + feature.properties.f3 + ` m</span>
</p>
</th>
</tr>
<tr>
<th>
<p>
<span>Panjang Jalan : ` + feature.properties.f3 + ` m</span>
</p>
<p>
<span>Lebar Jalan : ` + feature.properties.f4 + ` m</span>
</p>
</th>
</tr>
<tr>
<th>
<p>
<span>Tipe Jalan : ` + feature.properties.f5 + `</span>
</p>
<p class="text-center" style="margin-top: 25px;">
<a href="#" class="btn btn-default" data-toggle="modal" data-target="#modal-jalan" id="btn_jalan" data-backdrop="static" data-keyboard="false"><i>Edit Informasi Jalan</i></a>
</p>
</th>
</tr>
</div>
<div class="container">
<tr style="height: 40px;">
<th id="history_panel">
` + history + `
</th>
</tr>
</div>
</tbody>
</table>`;
$("#isi_panel").html(content)
$("#isi_panel").html(content);
$('#namajalan').val(nmjalan);
});
$('#idjalan').val(feature.properties.f1);
$('#panjangjalan').val(feature.properties.f3);
$('#lebarjalan').val(feature.properties.f4);
......@@ -1872,7 +1866,6 @@
$("#panel-samping").css("display", "block");
$("#button_hide_panel").css("display", "block");
panel_samp()
}
});
......@@ -2375,4 +2368,579 @@
// $("#map-cesium").css('display', 'none');
// }
// }
</script>
<script type="text/javascript" src="{% static 'js/plugins/tables/datatables/datatables.min.js' %}"></script>
<script>
function destroyfade() {
$(".modal-backdrop").css("display", "none")
$(".modal-backdrop").removeClass('show');
$("body").css('padding-right', '0px !important')
}
function destroyWraper() {
$("#input_perbaikan").css("display", "none");
$("#edit_kelurahan").css("display", "none");
}
var map_input = L.map('map-insert', {
editable: true,
zoomControl: false,
drawControl: true
}).setView([-4.125826277307029, 104.1881561279297], 10);
maps = L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}&s=Gal&apistyle=s.t:0|s.e:l|p.v:off', {
maxZoom: 22,
minZoom: 4,
}).addTo(map_input);
var editableLayers = new L.FeatureGroup();
map_input.addLayer(editableLayers);
var options = {
position: 'topleft',
draw: {
polyline: {
shapeOptions: {
color: 'red',
weight: 10
}
},
// disable toolbar item by setting it to false
polyline: true,
},
edit: {
featureGroup: editableLayers, //REQUIRED!!
remove: true
},
color: 'red'
};
var drawControl = new L.Control.Draw(options);
map_input.addControl(drawControl);
map_input.on('draw:created', function(e) {
var type = e.layerType,
layer = e.layer;
layer.options.color = 'yellow';
layer.options.weight = 10;
layer.options.opacity = 1;
var koordina = ""
if (type === 'polyline') {
// Calculating the distance of the polyline
var tempLatLng = null;
var totalDistance = 0.00000;
$.each(e.layer._latlngs, function(i, latlng) {
if (tempLatLng == null) {
tempLatLng = latlng;
return;
}
alert(latlng)
totalDistance += tempLatLng.distanceTo(latlng);
tempLatLng = latlng;
});
e.layer.bindPopup((totalDistance).toFixed(2) + ' meter');
e.layer.openPopup();
$("#panjangjalanperbaikan").val((totalDistance).toFixed(2) + ' meter');
}
$("#poly_create_input").val(JSON.stringify(koordina));
editableLayers.addLayer(layer);
});
function getjalanper(id) {
$.ajax({
url: "{% url 'apps:get-jalan-perbaikan' %}",
data: {
'id': id
},
dataType: 'json',
success: function(data) {
map.setView([data[0]['geometry']['coordinates'][0][0][1], data[0]['geometry']['coordinates'][0][0][0]], 18)
var geo_jalan_perbaikan = L.geoJson(data[0], {
style: function(feature) {
return {
color: "#FAFA00",
weight: 10,
opacity: 2,
zIndex: 1999
};
}
}).addTo(map);
}
});
};
function getdetailper(id) {
$.ajax({
url: "{% url 'apps:get-detail-perbaikan' %}",
data: {
'id': id
},
dataType: 'json',
success: function(data) {
isi_modal_detail = []
for (var i = 0; i < data.length; i++) {
isi_modal_detail.push(`<tr>
<td>` + i + `</td>
<td>` + data[i].name + `</td>
<td>` + data[i].type + `</td>
<td>` + data[i].tgl_perbaikan + `</td>
<td>` + data[i].anggaran + `</td>
<td>` + data[i].pj + `</td>
<td>` + data[i].pj_lapangan + `</td>
<td>` + data[i].kontraktor + `</td>
<td>` + data[i].pjg_jln_reno + `</td>
<td>` + data[i].lbr_jln_reno + `</td>
<td><a onclick="loadmapruas('` + data[i].id + `','` + data[i].id_object + `')" id="loaddetailcoord" data-toggle="modal" data-target="#modal_detail_ruas">View</a></td>
<td><a href="media/proposal/` + data[i].proposal + `" id="downloadproposal">View</a></td>
<td><a href="media/bukti_penyelesaian/` + data[i].bukti_selesai + `" onclick="viewBukti()" id="view-bukti">View</a></td>
</tr>`)
}
$("#isi_modal_detail").html(`
<table class="table table-responsive datatable-show-all table-sm" id="isi_detail" style="word-wrap:break-word;">
<thead>
<tr>
<th>No.</th>
<th>Nama</th>
<th>Type</th>
<th>Tanggal Perbaikan</th>
<th>Anggaran</th>
<th>Penanggung Jawab</th>
<th>Penanggung Jawab Lapangan</th>
<th>Kontraktor</th>
<th>panjang jalan yang di perbaiki</th>
<th>Lebar Jalan yang di Perbaiki</th>
<th>Ruas yang di perbaiki</th>
<th>Proposal</th>
<th>Bukti Penyelesaian</th>
</tr>
</thead>
<tbody>
` + isi_modal_detail + `
</tbody>
</table>`)
}
});
};
var geo_jalan_input = L.geoJson(null, {
style: function(feature) {
return {
color: "#06FF08",
weight: 8,
opacity: 2,
zIndex: 1000
};
}
}).addTo(map_input);
$(document).on("click", "#btn_perbaikan_jalan", function() {
geo_jalan_input.clearLayers(geo_jalan_input)
$("#input_perbaikan").css("display", "block");
var id_jalan = $("#idjalan").val();
editableLayers.clearLayers();
setTimeout(function() {
map_input.invalidateSize();
}, 1000);
$.ajax({
url: "{% url 'apps:input-perbaikan' %}",
data: {
'id_jalan': id_jalan
},
dataType: 'json',
success: function(data) {
$("#namajalan").val(data[0]);
$("#typejalan").val(data[1]);
$("#panjangjalanall").val(data[2]);
$("#id_jalan_perbaikan").val(data[4]);
$("#type_id").val(data[5])
var latlngs = data[3];
map_input.setView([latlngs['geometry']['coordinates'][0][0][1], latlngs['geometry']['coordinates'][0][0][0]], 17)
geo_jalan_input.addData(data[3]);
}
})
});
$("#save-perbaikan").click(function() {
var hasil = JSON.stringify(editableLayers.toGeoJSON());
var id_jalan = $("#id_jalan_perbaikan").val();
var type_id = $("#type_id").val();
var name = $("#namajalan").val();
var type = $("#typejalan").val();
var tgl_perbaikan = $("#tglmulaiperbaikan").val();
var tgl_selesai = $("#tglselesaiperbaikan").val();
var tgl_disetujui = $("#tgldisetujui").val();
var anggaran = $("#anggaran").val();
var proposal = $("#proposal").val();
var bukti_selesai = $("#buktiselesai").val();
var pj = $("#pihakpengesahan").val();
var pj_lapangan = $("#pjlapangan").val();
var kontraktor = $("#kontraktor").val();
var pjg_perbaikan = $("#panjangjalanperbaikan").val();
var lbr_perbaikan = $("#lebarjalanperbaikan").val();
var jenis_perbaikan = $("#jenisperbaikan").val();
var luas = $("#luas").val();
var kelurahan = $("#kelurahan").val();
var kecamatan = $("#kecamatan").val();
var data_umum = [{
'coord': hasil
}, {
'object_id': id_jalan
}, {
'type_id': type_id
}, {
'name': name
}, {
'type': type
}, {
'tgl_selesai': tgl_selesai
}, {
'tgl_perbaikan': tgl_perbaikan
}, {
'tgl_disetujui': tgl_disetujui
}, {
'anggaran': anggaran
}, {
'pj': pj
}, {
'pj_lapangan': pj_lapangan
}, {
'kontraktor': kontraktor
}, {
'pjg_perbaikan': pjg_perbaikan
}, {
'lbr_perbaikan': lbr_perbaikan
}, {
'jenis_perbaikan': jenis_perbaikan
}, {
'luas': luas
}, {
'kelurahan': kelurahan
}, {
'kecamatan': kecamatan
}]
data = new FormData()
data.append("proposal", $("input[id^='proposal']")[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++) {
var keyss = Object.keys(data_umum[i]);
data.append(keyss[0], data_umum[i][keyss[0]])
}
$.ajax({
url: "{% url 'apps:save-perbaikan' %}",
data: data,
dataType: 'json',
type: 'POST',
processData: false,
contentType: false,
success: function(data) {
let response = data;
if (response.code == 0) {
swal({
title: response.info,
text: response.data,
type: "success",
icon: "success",
confirmButtonColor: "#00BCD4"
}, function() {
$("#input_perbaikan").css("display", "none");
$("#info-jalan").css("display", "block");
$("#info-pendidikan").css("display", "none");
})
} else {
swal({
title: response.info,
text: response.data,
type: "warning",
icon: "error",
confirmButtonColor: "#00BCD4"
})
}
}
})
});
$('.datatable-show-all').DataTable({
autoWidth: false,
columnDefs: [{
orderable: false,
width: '20px',
targets: [0],
},
// {
// width: '100px',
// targets: [ 4 ]
// },
{
orderable: false,
width: '20px',
targets: [6],
}, {
orderable: false,
width: '20px',
targets: [7],
},
],
dom: '<"float-left"B>frtip',
buttons: [{
text: 'Tambah User',
action: function(e, dt, node, config) {
$("#modalAddButton").click()
$("#inUsername").attr("disabled", false);
$("#inUsername").val(null);
$("#inNameF").val(null);
$("#inNameL").val(null);
$("#inEmail").val(null);
$("#iduser").val(null);
$(".modstit").html("Tambah User")
loadGroups(null)
}
}],
language: {
search: '<span>Filter:</span> _INPUT_',
searchPlaceholder: 'Type to filter...',
lengthMenu: '<span>Show:</span> _MENU_',
paginate: {
'first': 'First',
'last': 'Last',
'next': '&rarr;',
'previous': '&larr;'
}
},
drawCallback: function() {
$(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
},
preDrawCallback: function() {
$(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
}
});
$('.datatable-groups').DataTable({
autoWidth: false,
columnDefs: [{
orderable: false,
width: '100px',
targets: [2]
}, {
orderable: false,
width: '100px',
targets: [0]
}],
dom: '<"float-left"B>frtip',
buttons: [{
text: 'Tambah Group',
action: function(e, dt, node, config) {
$("#modalAddButtong").click();
$("#idgroup").val(null);
$(".modstitg").html("Tambah Group")
$("#inGroupName").val(null)
$("#container_sparent").css("display", "block")
loadGroups(null)
}
}],
language: {
search: '<span>Filter:</span> _INPUT_',
searchPlaceholder: 'Type to filter...',
lengthMenu: '<span>Show:</span> _MENU_',
paginate: {
'first': 'First',
'last': 'Last',
'next': '&rarr;',
'previous': '&larr;'
}
},
drawCallback: function() {
$(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
},
preDrawCallback: function() {
$(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
}
});
$("#modalAddButton").click(function() {
$("body").css("padding-right", "0px !important")
})
$("#saveuser").on("click", function() {
addUser()
})
function loadjlbyid(id) {
var isObject = {};
isObject.id = id;
$("#iduser").val(id)
$.ajax({
url: "{% url 'apps:loadDetail' %}",
data: isObject,
dataType: 'json',
type: 'post',
success: function(data) {
isi_modal_detail = []
for (var i = 0; i < data.length; i++) {
isi_modal_detail.push(`<tr>
<td>` + i + `</td>
<td>` + data[i].name + `</td>
<td>` + data[i].type + `</td>
<td>` + data[i].tgl_perbaikan + `</td>
<td>` + data[i].anggaran + `</td>
<td>` + data[i].pj + `</td>
<td>` + data[i].pj_lapangan + `</td>
<td>` + data[i].kontraktor + `</td>
<td>` + data[i].pjg_jln_reno + `</td>
<td>` + data[i].lbr_jln_reno + `</td>
<td><a onclick="loadmapruas('` + data[i].id + `','` + data[i].id_object + `')" id="loaddetailcoord" data-toggle="modal" data-target="#modal_detail_ruas">View</a></td>
<td><a href="media/proposal/` + data[i].proposal + `" id="downloadproposal">View</a></td>
<td><a href="media/bukti_penyelesaian/` + data[i].bukti_selesai + `" onclick="viewBukti()" id="view-bukti">View</a></td>
</tr>`)
}
$("#isi_modal_detail").html(`
<table class="table table-responsive datatable-show-all table-sm" id="isi_detail" style="word-wrap:break-word;">
<thead>
<tr>
<th>No.</th>
<th>Nama</th>
<th>Type</th>
<th>Tanggal Perbaikan</th>
<th>Anggaran</th>
<th>Penanggung Jawab</th>
<th>Penanggung Jawab Lapangan</th>
<th>Kontraktor</th>
<th>panjang jalan yang di perbaiki</th>
<th>Lebar Jalan yang di Perbaiki</th>
<th>Ruas yang di perbaiki</th>
<th>Proposal</th>
<th>Bukti Penyelesaian</th>
</tr>
</thead>
<tbody>
` + isi_modal_detail + `
</tbody>
</table>`)
}
});
}
function destroylayer() {
map_detail_by_id
}
$(".leaflet-draw-draw-polyline").html('<span class="fa fa-expand"></span>')
$(".leaflet-draw-actions-top").html(`<li class=""><a class="btn btn-primary" href="#" title="Finish drawing">Finish</a></li><li class=""><a class="" href="#" title="Delete last point drawn">Delete last point</a></li><li class=""><a class="" href="#" title="Cancel drawing">Cancel</a></li>`);
loaderPage(false);
function loaderPage(stat) {
if (stat == true) {
$('.page_loader').show();
} else {
$('.page_loader').hide();
$(".panel-flat").css("display", "block")
}
};
function cetakExcel() {
var tab_text = "<table border='2px'><tr bgcolor='#87AFC6'>";
var textRange;
var j = 0;
tab = document.getElementById('isi_detail'); // id of table
for (j = 0; j < tab.rows.length; j++) {
tab_text = tab_text + tab.rows[j].innerHTML + "</tr>";
//tab_text=tab_text+"</tr>";
}
tab_text = tab_text + "</table>";
tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, ""); //remove if u want links in your table
tab_text = tab_text.replace(/<img[^>]*>/gi, ""); // remove if u want images in your table
tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer
{
txtArea1.document.open("txt/html", "replace");
txtArea1.document.write(tab_text);
txtArea1.document.close();
txtArea1.focus();
sa = txtArea1.document.execCommand("SaveAs", true, "Say Thanks to Sumit.xls");
} else //other browser not tested on IE 11
sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
return (sa);
}
var $content, $modal, $apnData, $modalCon;
$content = $(".min");
$(".mdlFire").click(function(e) {
e.preventDefault();
var $id = $(this).attr("data-target");
});
$(".modalMinimize").on("click", function() {
$modalCon = $(this).closest(".mymodal").attr("id");
$apnData = $(this).closest(".mymodal");
$modal = "#" + $modalCon;
$(".modal-backdrop").addClass("display-none");
$($modal).toggleClass("min");
if ($($modal).hasClass("min")) {
$(".minmaxCon").append($apnData);
$(this).find("i").toggleClass('fa-minus').toggleClass('fa-clone');
} else {
$(".container").append($apnData);
$(this).find("i").toggleClass('fa-clone').toggleClass('fa-minus');
};
});
$("button[data-dismiss='modal']").click(function() {
$(this).closest(".mymodal").removeClass("min");
$(".container").removeClass($apnData);
$(this).next('.modalMinimize').find("i").removeClass('fa fa-clone').addClass('fa fa-minus');
});
</script>
\ No newline at end of file
templates/includes/js.html
View file @ 60eaca51
......@@ -21,10 +21,12 @@
<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>
<!-- /theme JS files -->
<script src="{% static 'js/leaflet-bing-layer.js' %}"></script>
<script type="text/javascript" src="{% static 'js/plugins/tables/datatables/datatables.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/maps.js' %}"></script>
<script src="{% static 'js/scripts.js' %}"></script>
\ No newline at end of file
templates/includes/modal.html
View file @ 60eaca51
......@@ -59,7 +59,8 @@
</div>
</div>
</div>
{% include 'includes/js-m.html' %}
<div class="modal fade" id="modal_delete_1" tabindex="+1" role="dialog">
<div class="modal-dialog modal-md">
<div class="modal-content">
......@@ -89,4 +90,275 @@
</div>
</div>
</div>
</div>
<div id="modal_detail" class="modal fade mymodal" style="padding-top: 0px;padding-bottom: 0px;right: -11px;">
<div class="modal-dialog modal-lg" style="width: 100%;height: 100%;margin: 0;bottom: 0;">
<div class="modal-content" style="height: 100%;">
<div class="modal-header bg-info" style="background-color:#28343a">
<button type="button" class="close" data-dismiss="modal"> <i class='fa fa-times'></i> </button>
<h6 class="modal-title">Info Detail</h6>
</div>
<div class="modal-body" style="max-height: 100%;overflow-y: auto;">
<div class="panel-body" id="isi_modal_detail">
<table class="table table-responsive datatable-show-all table-sm" id="isi_detail" style="word-wrap:break-word;">
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" onclick="cetakExcel()">Cetak</button>
</div>
</div>
</div>
</div>
<!-- modal jalan -->
<div id="modal-jalan" class="modal fade">
<div class="modal-dialog" style="width: max-content;height: max-content;">
<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">Maps Jalan</h6>
</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 id="map-jalan" style="width:400px;height: 350px;">
</div>
<br>
<table>
<tr>
<th>
Image
</th>
<td>
<input type="file" id="imgjalan" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif">
</td>
</tr>
<tr>
<th>
Nama Jalan
</th>
<td>
<input type="text" id="namajalan" class="form-control" value="">
</td>
</tr>
<tr>
<th>
Panjang Jalan (m)
</th>
<td>
<input type="text" id="panjangjalan" class="form-control" value="">
</td>
</tr>
<tr>
<th>
Lebar Jalan (m)
</th>
<td>
<input type="text" id="lebarjalan" class="form-control" value="">
</td>
</tr>
<tr>
<th>
Tipe Jalan
</th>
<td>
<input type="text" id="tipejalan" class="form-control" value="">
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<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 id="modal_theme_info" class="modal fade">
<div class="modal-dialog">
<div class="modal-content" style="width: 400px;margin-left: 100px;">
<div class="modal-header bg-info">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h6 class="modal-title">Info header</h6>
</div>
<div class="modal-body" style="max-height: 450px;overflow-y: auto;">
<img id="blah" src="#" style="max-width: 275px;max-height: 275px;margin-left: 45px;" alt="your image" />
<table id="valid-edit-kel" style="margin-bottom: 20px;"></table>
<table id="valid-edit-penduduk" style="margin-bottom: 20px;"></table>
<table id="valid-edit-pendidik" style="margin-bottom: 20px;"></table>
<table id="valid-edit-pekerja" style="margin-bottom: 20px;"></table>
<div id="validasi-edit" style="width: 350px; margin-left:10px;">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
<button type="button" id="btnsavevalidasi" class="btn btn-info">Save changes</button>
</div>
</div>
</div>
</div>
<!-- modal bangunan -->
<div id="modal_bangunan_edit" class="modal fade">
<div class="modal-dialog" style="width: max-content;height: max-content;">
<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">Edit Polygon Bangunan dan Informasinya</h6>
</div>
<div class="modal-body" style="max-height: 450px;overflow-y: auto;">
<div class="row">
<div class="col-md-5">
<div id="map-edit" style="width:400px;height: 350px;">
</div>
</div>
<div class="col-md-4">
<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">
</td>
</tr>
<tr>
<th>Id</th>
<td>
<input type="text" name="idbangunan" id="idbangunan" class="form-control hidden" value="" disable>
</td>
</tr>
<tr>
<th>Nama Bangunan</th>
<td>
<input type="text" name="namebangunan" id="namebangunan" class="form-control" value="">
</td>
</tr>
<tr>
<th>Informasi Bangunan</th>
<td>
<input type="text" name="infobangunan" id="infobangunan" class="form-control" value="">
</td>
</tr>
<tr>
<th>Kelurahan</th>
<td>
<input type=" text " name="nmkelurahan " id="nmkelurahan " class="form-control " value="">
</td>
</tr>
<tr>
<th>Kecamatan</th>
<td>
<input type="text " name="nmkecamatan " id="nmkecamatan " class="form-control " value="">
</td>
</tr>
<tr>
<th>Kab/Kota</th>
<td>
<input type="text " name="nmkabkota " id="nmkabkota " class="form-control " value="">
</td>
</tr>
<tr>
<th>Provinsi</th>
<td>
<input type="text " name="nmprovinsi " id="nmprovinsi " class="form-control " value="">
</td>
</tr>
</table>
</div>
<div class="col-md-3 ">
<table>
<tr>
<th>Luas Bangunan</th>
<td>
<input type="text " name="luasbangunan " id="luasbangunan " class="form-control " value=" ">
</td>
</tr>
<tr>
<th>Luas Tanah</th>
<td>
<input type="text " name="luastanah " id="luastanah " class="form-control " value=" ">
</td>
</tr>
<tr>
<th>Tinggi Bangunan</th>
<td>
<input type="text " name="tinggibangunan " id="tinggibangunan " class="form-control " value=" ">
</td>
</tr>
<tr>
<th>Pemilik</th>
<td>
<input type="text " name="pemilik " id="pemilik " class="form-control " value=" ">
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="modal-footer ">
<button type="button " class="btn btn-link " data-dismiss="modal ">Close</button>
<button type="button " id="btnsavebangunan " class="btn btn-info ">Save changes</button>
</div>
</div>
</div>
</div>
<div id="modal-edit-tuplah" class="modal fade">
<div class="modal-dialog" style="width: max-content;height: max-content;">
<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">Batas Lahan</h6>
</div>
<input type="text" name="idtuplah" id="idtuplah" 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 id="map-edit-tuplah" style="width:400px;height: 350px;">
</div>
<br>
<table>
<tr>
<th>
Image
</th>
<td>
<input type="file" id="imgtuplah" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif">
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
<button type="button" id="btnsavetuplah" class="btn btn-info">Save changes</button>
</div>
</div>
</div>
</div>
\ No newline at end of file
templates/includes/navbar.html
View file @ 60eaca51
......@@ -30,6 +30,7 @@
<li><a href="#"><i class="icon-cog5"></i> Account settings</a></li>
{% if user.is_superuser or user.is_staff %}
<li><a href="{% url 'usermanagement' %}"><i class="icon-user"></i>User Management</a></li>
<li><a href="{% url 'apps:perbaikan' %}"><i class="icon-list"></i>Repair & Renovation</a></li>
{% endif %}
<li class="divider"></li>
<li><a href="{% url 'logout' %}"><i class="icon-cog5"></i> Logout</a></li>
......@@ -38,17 +39,16 @@
{% else %}
<div class="form-group" style="margin: 6px;">
<a href="/login">
<button type="submit" class="btn btn-xs btn-icon bg-blue btn-block" style="width: 100px;border-radius: 4px;"> <i class="icon-enter"> Login</i></button>
<button type="submit" class="btn btn-xs btn-icon bg-blue btn-block btn-login" style="width: 35px;
border-radius: 20px;
height: 35px;
border-color: #40777c;
background-color: #40777c;
color: white;
box-shadow: 0 0 20px rgb(0 0 0 / 30%);"> <i class="icon-enter"></i></button>
</a>
</div>
{% endif %}
</li>
</ul>
</div>
......
templates/includes/o.html
View file @ 60eaca51
......@@ -237,88 +237,54 @@
<div>
<a href="#" class="btn btn-default" id="button_hide"><span class="caret" style="margin-left: -5px;"></span></a>
</div>
<div class="row" >
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 content-footer" >
<div class="col-md-6 content-footer">
<div class="row" id="info-footer">
<div class="col-md-12">
<div class="row">
<div class="col-md-3" style="min-width: 150px;">
<div class="col-md-4" style="min-width: 150px;">
<div class="form-group">
<label class="text-semibold">Informasi</label>
<div>
<table>
<tr>
<th>Jumlah Kecamatan</th>
<td>: {{ global.5 }}</td>
</tr>
<tr>
<th>Jumlah Kelurahan</th>
<td>: {{ global.6 }}</td>
</tr>
<tr>
<th>Jumlah Penduduk</th>
<td>: {{ global.19 }}</td>
</tr>
<tr>
<th>Jumlah KK</th>
<td>: {{ global.20 }}</td>
</tr>
<tr>
<th>Jumlah Laki-laki</th>
<td>: {{ global.21 }}</td>
</tr>
<tr>
<th>Jumlah Perempuan</th>
<td>: {{ global.22 }}</td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-md-3" style="min-width: 150px;">
<div class="form-group" style="margin-top: 30px;">
<table>
<tr>
<th>Luas Wilayah</th>
<td>: {{ global.1 }}</td>
</tr>
<tr>
<th>Luas Pemukiman</th>
<td>: {{ global.2 }}</td>
<th>Jumlah Kecamatan</th>
<td>: {{ global.5 }}</td>
</tr>
<tr>
<th>Luas Ladang & Sawah</th>
<td>: {{ global.3 }}</td>
<th>Jumlah Kelurahan</th>
<td>: {{ global.6 }}</td>
</tr>
<tr>
<th>Luas Hutan Kering</th>
<td>: {{ global.7 }}</td>
<th>Jumlah Penduduk</th>
<td>: {{ global.19 }}</td>
</tr>
<tr>
<th>Luas Semak Belukar</th>
<td>: {{ global.14 }}</td>
<th>Jumlah KK</th>
<td>: {{ global.20 }}</td>
</tr>
<tr>
<th>Panjang Ruas Jalan</th>
<td>: {{ global.8 }}</td>
<th>Jumlah Laki-laki</th>
<td>: {{ global.21 }}</td>
</tr>
<tr>
<th>Jumlah Perempuan</th>
<td>: {{ global.22 }}</td>
</tr>
</table>
</div>
</div>
<div class="col-md-3" style="min-width: 120px;">
<div class="form-group" style="margin-top: 20px;">
<!-- <label class="text-semibold">Last filter check feasibilty </label> -->
<div class="col-md-4" style="min-width: 150px;">
<div class="form-group">
<table>
<tr>
<th>Jumlah Rumah Sakit</th>
......@@ -351,9 +317,37 @@
</tr>
</table>
</div>
</div>
<div class="col-md-4" style="min-width: 120px;">
<div class="form-group">
<!-- <label class="text-semibold">Last filter check feasibilty </label> -->
<table>
<tr>
<th>Luas Pemukiman</th>
<td>: {{ global.2 }}</td>
</tr>
<tr>
<th>Luas Ladang & Sawah</th>
<td>: {{ global.3 }}</td>
</tr>
<tr>
<th>Luas Hutan Kering</th>
<td>: {{ global.7 }}</td>
</tr>
<tr>
<th>Luas Semak Belukar</th>
<td>: {{ global.14 }}</td>
</tr>
<tr>
<th>Panjang Ruas Jalan</th>
<td>: {{ global.8 }}</td>
</tr>
</table>
</div>
</div>
<div class="col-md-3" style="min-width: 150px;padding-left:50px;bottom:-140px">
<div style="min-width: 150px;padding-left:50px;bottom:-140px">
<i><b>
Sumber : DUKCAPIL, 2019
</b></i>
......
templates/includes/plugin.html
View file @ 60eaca51
{% load static %}
<ul class="dock" style="right: 0;position: absolute;">
<li class="fixed-plugin" style="top: 100px;">
<div class="dropdown show-dropdown">
<a href="#" data-toggle="dropdown">
<i class="fa fa-map-o fa-2x" style="color: white;
<li class="fixed-plugin" style="top: 100px;">
<div class="dropdown show-dropdown">
<a href="#" data-toggle="dropdown">
<i class="fa fa-map-o fa-2x" style="color: white;
padding: 10px;
border-radius: 0 0 6px 6px;
width: auto;"> </i>
</a>
<ul class="dropdown-menu" x-placement="bottom-start" >
<li class="header-title text-center">Maps BaseLayer</li>
<div class="dropdown-content-body">
<div class="row text-center">
<div class="col-md-3" style="margin-top: 2px;">
<ul class="menu-list">
<a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="OpenStreetMap">
<img src="{% static 'img/maps/osm.PNG' %}" alt="" style="min-width: 180px; min-height:20px;max-height: 130px;">
<span class="menu-heading">
</a>
<ul class="dropdown-menu" x-placement="bottom-start">
<li class="header-title text-center">Maps BaseLayer</li>
<div class="dropdown-content-body">
<div class="row text-center">
<div class="col-md-3" style="margin-top: 2px;">
<ul class="menu-list">
<a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="OpenStreetMap">
<img src="{% static 'img/maps/osm.PNG' %}" alt="" style="min-width: 180px; min-height:20px;max-height: 130px;">
<span class="menu-heading">
Google Street</span>
</a>
</ul>
</div>
<div class="col-md-3">
<ul class="menu-list">
<a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="WorldImagery">
<img src="{% static 'img/maps/esri.png' %}" alt="" style="min-width: 180px; max-height: 130px;
</a>
</ul>
</div>
<div class="col-md-3">
<ul class="menu-list">
<a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="WorldImagery">
<img src="{% static 'img/maps/esri.png' %}" alt="" style="min-width: 180px; max-height: 130px;
min-height: 130px">
<span class="menu-heading">
<span class="menu-heading">
World Imagery</span>
</a>
</ul>
</div>
<div class="col-md-3">
<ul class="menu-list">
<a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="BingSatellite">
<img src="{% static 'img/maps/bing.png' %}" alt="" style="min-width: 180px; max-height: 130px;
</a>
</ul>
</div>
<div class="col-md-3">
<ul class="menu-list">
<a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="BingSatellite">
<img src="{% static 'img/maps/bing.png' %}" alt="" style="min-width: 180px; max-height: 130px;
min-height: 130px">
<span class="menu-heading">
<span class="menu-heading">
Bing Satellite</span>
</a>
</ul>
</div>
<div class="col-md-3">
<ul class="menu-list">
<a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="GoogleSatellite">
<img src="{% static 'img/maps/esri.png' %}" alt="" style="min-width: 180px; max-height: 130px;
</a>
</ul>
</div>
<div class="col-md-3">
<ul class="menu-list">
<a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="GoogleSatellite">
<img src="{% static 'img/maps/esri.png' %}" alt="" style="min-width: 180px; max-height: 130px;
min-height: 130px">
<span class="menu-heading">
<span class="menu-heading">
Google Satellite</span>
</a>
</ul>
</a>
</ul>
</div>
</div>
</div>
</div>
</ul>
</div>
</li>
<li class="fixed-plugin" style="top: 160px;">
<div class="dropdown show-dropdown">
<a href="#" data-toggle="dropdown">
<i class="fa fa-cog fa-2x" style="font-size: 36px;
</ul>
</div>
</li>
<li class="fixed-plugin" style="top: 160px;">
<div class="dropdown show-dropdown">
<a href="#" data-toggle="dropdown">
<i class="fa fa-cog fa-2x" style="font-size: 36px;
color: white;
margin: 4px;
margin-left: 10px;"> </i>
</a>
<ul class="dropdown-menu" >
<li class="header-title text-center">Sidebar Filters</li>
<!-- <div id="sidebar" onmouseleave="overll()">
</a>
<ul class="dropdown-menu">
<li class="header-title text-center">Sidebar Filters</li>
<!-- <div id="sidebar" onmouseleave="overll()">
<div class="sidebar-wrapper">
<div class="panel panel-default" id="features">
<div class="panel-body"> -->
<div class="row" style="margin: 0;padding: 0;">
<div class="col-md-6">
<div class="row" style="margin: 0;padding: 0;">
<div class="col-md-6">
<div class="checkbox">
<label>
<div class="checkbox">
<label>
<input type="checkbox" id="geo_tuplah" onclick="geotuplah()" style="margin-top:2px;">
Lahan
</label>
</div>
</div>
<div class="checkbox">
<label>
<div class="checkbox">
<label>
<input type="checkbox" id="geo_building" style="margin-top:2px;">
Bangunan
</label>
</div>
<ul class="nasted active">
<div class="checkbox">
<label>
</div>
<ul class="nasted active">
<div class="checkbox">
<label>
<input type="checkbox" id="2d-maps" style="margin-top:2px;">
Bangunan 2D Maps
</label>
</div>
<div class="checkbox">
<label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="3d-maps" onclick="map3d()" style="margin-top:2px;">
Bangunan 3D Maps
</label>
</div>
</ul>
</div>
</ul>
<div class="checkbox">
<label>
<div class="checkbox">
<label>
<input type="checkbox" id="geo_jalan" onclick="geojalan()" style="margin-top:2px;">
Jalan
</label>
</div>
</div>
<div class="checkbox">
<label>
<div class="checkbox">
<label>
<input type="checkbox" id="geo_sungai" onclick="geosungai()" style="margin-top:2px;">
Sungai
</label>
</div>
<div class="checkbox">
<label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="batas_all" onclick="batasall()" style="margin-top:2px;" >
Batas Teritori
</label>
</div>
<ul class="nasted active">
<div class="checkbox">
<label>
</div>
<ul class="nasted active">
<div class="checkbox">
<label>
<input class="active" checked="true" type="checkbox" id="batas_kota" onclick="bataskota()" style="margin-top:2px;">
Batas Kabupaten/Kota
</label>
</div>
</div>
<div class="checkbox">
<label>
<div class="checkbox">
<label>
<input type="checkbox" id="batas_kec" onclick="bataskec()" style="margin-top:2px;">
Batas Kecamatan
</label>
</div>
</div>
<div class="checkbox">
<label>
<div class="checkbox">
<label>
<input type="checkbox" id="batas_desa" onclick="batasdesa()" style="margin-top:2px;">
Batas Desa/Kelurahan
</label>
</div>
</ul>
</div>
<div class="col-md-6">
<div class="checkbox">
<label>
</div>
</ul>
</div>
<div class="col-md-6">
<div class="checkbox">
<label>
<input type="checkbox" id="po_all" onclick="gas_all()" value="BLACK" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Point
</label>
</div>
</div>
<ul class="nasted active">
<div class="checkbox">
<label>
<ul class="nasted active">
<div class="checkbox">
<label>
<input type="checkbox" id="knt_adm" onclick="k_adm()" value="BLACK" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Kantor Administrasi
</label>
</div>
</div>
<div class="checkbox">
<label>
<div class="checkbox">
<label>
<input type="checkbox" id="lyn_kes" onclick="l_kes()" value="RED" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Layanan Kesehatan
</label>
</div>
</div>
<div class="checkbox">
<label>
<div class="checkbox">
<label>
<input type="checkbox" id="pus" onclick="pks()" value="YELLOW" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Puskesmas
</label>
</div>
<div class="checkbox">
<label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="rusak" onclick="rs()" value="YELLOW" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Rumah Sakit
</label>
</div>
<div class="checkbox">
<label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="ibdh" onclick="fiksi()" value="YELLOW" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Sarana Ibadah
</label>
</div>
<div class="checkbox">
<label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="dididik" onclick="didik()" value="YELLOW" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Sarana Pendidikan
</label>
</div>
<div class="checkbox">
<label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="pom_bengsin" onclick="pom_mini()" value="YELLOW" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
SPBU
</label>
</div>
<div class="checkbox">
<label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="tasiun" onclick="sthall()" value="YELLOW" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Stasiun
</label>
</div>
<div class="checkbox">
<label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="caheum" onclick="temanggung()" value="YELLOW" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Terminal Bus
</label>
</div>
<div class="checkbox">
<label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="cabud" onclick="cb100()" value="YELLOW" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Cagar Budaya dan Pariwisata
</label>
</div>
<div class="checkbox">
<label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="gardu" onclick="gl100()" value="YELLOW" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Gardu Listrik
</label>
</div>
</ul>
</div>
</div>
</ul>
</div>
</div>
</ul>
<!-- Second navbar -->
<div class="navbar navbar-default" id="navbar-second" style="display: none;">
<ul class="nav navbar-nav no-border visible-xs-block">
<li><a class="text-center collapsed" data-toggle="collapse" data-target="#navbar-second-toggle"><i class="icon-menu7"></i></a></li>
</ul>
<div class="navbar-collapse collapse" id="navbar-second-toggle">
<ul class="nav navbar-nav">
<li class="active"><a href="{% url 'apps:dashboard' %}"><i class="icon-display4 position-left"></i> Dashboard</a></li>
<li>
<div onmouseenter="resse()" onmouseleave="normalse()" id="DataTables_Table_0_filter" class="dataTables_filter" style="margin: 0px 0 0px 20px;padding-top:5px;">
<label>
<input type="search" class="search_desa" id="search_desa" placeholder="Type to search..." aria-controls="DataTables_Table_0">
</label>
<ul id="searchResult"></ul>
</div>
</ul>
</div>
</div>
</li>
<li class="hidden-xs" id="jumlah" style="padding-top: 14px;padding-left: 14px;">
<!-- <li class="hidden-xs"><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="list-btn"><i class="fa fa-list white"></i>&nbsp;&nbsp;List</a></li> -->
</li>
{% block btnlist %} {% endblock btnlist %}
</ul>
</ul>
</div>
</li>
<!-- Second navbar -->
</div>
</div>
</div>
\ No newline at end of file
</ul>
\ No newline at end of file
templates/layout/layout.html
View file @ 60eaca51
......@@ -8,7 +8,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{title}}</title>
<style>
#map {
width: auto;
height: 100%;
......@@ -66,16 +65,11 @@
padding-left: 200px;
}
.panel-body {
width: 450px;
}
.feature-row {
cursor: pointer;
width: 250px;
}
.page_loader {
position: fixed;
background: url('../../static/img/loadingz.gif') 50% 50% no-repeat rgb(249, 249, 249);
......@@ -137,6 +131,17 @@
<style>
#input_perbaikan {
padding: 60px;
z-index: 1000;
}
.input_perbaikan {
left: 375px;
width: 1020px!important;
z-index: 1000;
}
#button_hide_panel {
line-height: 30px;
width: 10px;
......@@ -168,275 +173,287 @@
<style>
.navbar {
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.navbar-brand {
font-size: 20px !important;
}
.navbar-brand > [class^="icon-"], [class*=" icon-"] {
font-size: 24px !important;
}
.bg-none {
background-color: #ffffff00 !important;
/* border-color: #3F51B5; */
/* color: #fff; */
}
/* .navbar-inverse .navbar-brand {
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.navbar-brand {
font-size: 20px !important;
}
.navbar-brand>[class^="icon-"],
[class*=" icon-"] {
font-size: 24px !important;
}
.bg-none {
background-color: #ffffff00 !important;
/* border-color: #3F51B5; */
/* color: #fff; */
}
/* .navbar-inverse .navbar-brand {
font-size: 20px;
color: linear-gradient(258.09deg, #D77E7C -3.66%, #AE4F88 37.2%, #7B43BD 129.85%);
background: -webkit-linear-gradient(#2c9e6a,#2495cc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} */
.gradient-text {
display: inline-block;
background-image: -webkit-gradient(linear,left top,right top,from(#2c9e6a),to(#2495cc));
background-image: linear-gradient(to right,#2c9e6a,#2495cc);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.fa-gradient {
background: -webkit-gradient(linear,left top,right top,from(#2c9e6a),to(#2495cc));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.navbar-inverse .navbar-nav > li > a {
color: #2799a4 !important;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
color: #2799a4 !important;
/* background-color: rgba(0, 0, 0, 0.1); */
background: linear-gradient(to right,#2c9e6a38,#2495cc2e);
}
#map{
height: 100vh;
width: 100%;
}
.content-wrapper{
display: block;
position: fixed;
top : 0;
}
.content {
padding: 0 !important;
}
.widget-pane {
width: 408px;
position: absolute;
top: 0;
z-index: 999;
opacity: 1;
/* height: 0; */
left: -408px;
/* -webkit-transform: translateX(0px); */
/* transform: translateX(0px); */
/* transition-property: -webkit-transform,transform,opacity; */
/* transition-duration: 0.2s; */
/* transition-timing-function: cubic-bezier(0.0,0.0,0.2,1); */
/* width: 380px; */
/* height: 100px; */
max-width: 100%;
float: right;
top: -48px;
/* left: -5px; */
position: absolute;
z-index: 999;
display: block;
background-color: rgba(255, 255, 255, 0.836);
opacity: 1;
height: 100vh;
box-shadow: 0 0 20px rgb(0 0 0 / 30%);
background: rgba(255, 255, 255, 0.801);
overflow: auto;
transition: all 1s ease;
}
.widget-pane-visible {
opacity: 1;
height: 100vh !important;
box-shadow: 0 0 20px rgb(0 0 0 / 30%);
background: #fff;
}
.panel {
margin-bottom: 0 !important;
}
.widget-pane-toggle-button-container {
position: absolute;
z-index: 0;
top: calc(50% - 24px);
left: 100%;
display: none;
}
#button_unhide_panel {
line-height: 30px;
width: 10px;
font-size: 10pt;
font-family: tahoma;
margin-top: 0px;
/* margin-right: 3px; */
position: absolute;
top: calc(50vh - 48px);
left: 0;
z-index: 1001;
display: block;
width: 23px;
height: 48px;
cursor: pointer;
border-left: 1px solid #D4D4D4;
box-shadow: 0px 1px 4px rgb(0 0 0 / 30%);
border-radius: 0 8px 8px 0;
background: rgba(255,255,255,1) 7px center/7px 10px no-repeat;
transition: all 1s ease;
}
#button_hide_panel {
line-height: 30px;
width: 10px;
font-size: 10pt;
font-family: tahoma;
margin-top: 0px;
/* margin-right: 3px; */
position: absolute;
top: calc(50vh - 48px);
left: 407px;
z-index: 1001;
display: none;
width: 23px;
height: 48px;
cursor: pointer;
border-left: 1px solid #D4D4D4;
box-shadow: 0px 1px 4px rgb(0 0 0 / 30%);
border-radius: 0 8px 8px 0;
background: rgba(255,255,255,1) 7px center/7px 10px no-repeat;
}
.content-footer{
background: #6f99c330;
border-radius: 10px 10px 0px 0px;
padding: 10px 20px 10px 20px;
backdrop-filter: blur(8px);
box-shadow: 0 0 20px rgb(0 0 0 / 30%);
}
#button_hide {
padding: 5px 0px 5px 5px;
line-height: 15px;
text-align: center;
width: 48px;
font-size: 10pt;
height: 23px;
font-family: tahoma;
margin-top: 3px;
margin-right: 3px;
position: absolute;
top: calc(100% - 196px);
right: calc(50% - 0px);
z-index: 99999999;
border-radius: 8px 8px 0 0;
border: 0;
backdrop-filter: blur(8px);
box-shadow: 0 0 20px rgb(0 0 0 / 30%);
background: #ffffff85;
}
#button_unhide {
padding: 5px 0px 5px 5px;
line-height: 15px;
text-align: center;
width: 48px;
font-size: 10pt;
height: 23px;
font-family: tahoma;
margin-top: 3px;
margin-right: 3px;
position: absolute;
top: calc(100% - 23px);
right: calc(50% - 0px);
z-index: 99999999;
border-radius: 8px 8px 0 0;
border: 0;
backdrop-filter: blur(8px);
box-shadow: 0 0 20px rgb(0 0 0 / 30%);
background: #ffffff85;
}
.move{
left: 408px !important;
transform: translate(-408px, 0);
}
.move-btn{
left: 408px !important;
transform: translate(0, 0);
}
.fixed-plugin{
position: absolute;
z-index: 999;
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 .dropdown-menu{
float: right;
position: absolute;
right: 0px;
width: 550px;
margin-left: -560px !important;
margin-top: -40px !important;
box-shadow: 0 0 20px rgb(0 0 0 / 30%);
border-radius: 8px 8px 8px 8px;
}
li.fixed-plugin:hover {
transform: scale(1.3);
right: 0;
margin-right: 7px;
position: relative;
}
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; */
}
.gradient-text {
display: inline-block;
background-image: -webkit-gradient(linear, left top, right top, from(#2c9e6a), to(#2495cc));
background-image: linear-gradient(to right, #2c9e6a, #2495cc);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.fa-gradient {
background: -webkit-gradient(linear, left top, right top, from(#2c9e6a), to(#2495cc));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.navbar-inverse .navbar-nav>li>a {
color: #2799a4 !important;
}
.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus {
color: #2799a4 !important;
/* background-color: rgba(0, 0, 0, 0.1); */
background: linear-gradient(to right, #2c9e6a38, #2495cc2e);
}
#map {
height: 100vh;
width: 100%;
}
.content-wrapper {
display: block;
position: fixed;
top: 0;
}
.content {
padding: 0 !important;
}
.widget-pane {
width: 408px;
position: absolute;
top: 0;
z-index: 1002;
opacity: 1;
/* height: 0; */
left: -408px;
/* -webkit-transform: translateX(0px); */
/* transform: translateX(0px); */
/* transition-property: -webkit-transform,transform,opacity; */
/* transition-duration: 0.2s; */
/* transition-timing-function: cubic-bezier(0.0,0.0,0.2,1); */
/* width: 380px; */
/* height: 100px; */
max-width: 100%;
float: right;
top: -48px;
/* left: -5px; */
position: absolute;
z-index: 1000;
display: block;
background-color: rgba(255, 255, 255, 0.836);
opacity: 1;
height: 100vh;
box-shadow: 0 0 20px rgb(0 0 0 / 30%);
background: rgba(255, 255, 255, 0.801);
overflow: auto;
transition: all 1s ease;
}
.widget-pane-visible {
opacity: 1;
height: 100vh !important;
box-shadow: 0 0 20px rgb(0 0 0 / 30%);
background: #fff;
}
.panel {
margin-bottom: 0 !important;
}
.widget-pane-toggle-button-container {
position: absolute;
z-index: 0;
top: calc(50% - 24px);
left: 100%;
display: none;
}
#button_unhide_panel {
line-height: 30px;
width: 10px;
font-size: 10pt;
font-family: tahoma;
margin-top: 0px;
/* margin-right: 3px; */
position: absolute;
top: calc(50vh - 48px);
left: 0;
z-index: 1001;
display: block;
width: 23px;
height: 48px;
cursor: pointer;
border-left: 1px solid #D4D4D4;
box-shadow: 0px 1px 4px rgb(0 0 0 / 30%);
border-radius: 0 8px 8px 0;
background: rgba(255, 255, 255, 1) 7px center/7px 10px no-repeat;
transition: all 1s ease;
}
#button_hide_panel {
line-height: 30px;
width: 10px;
font-size: 10pt;
font-family: tahoma;
margin-top: 0px;
/* margin-right: 3px; */
position: absolute;
top: calc(50vh - 48px);
left: 407px;
z-index: 1001;
display: none;
width: 23px;
height: 48px;
cursor: pointer;
border-left: 1px solid #D4D4D4;
box-shadow: 0px 1px 4px rgb(0 0 0 / 30%);
border-radius: 0 8px 8px 0;
background: rgba(255, 255, 255, 1) 7px center/7px 10px no-repeat;
}
.content-footer {
background: #6f99c330;
border-radius: 10px 10px 0px 0px;
padding: 10px 20px 10px 20px;
backdrop-filter: blur(8px);
box-shadow: 0 0 20px rgb(0 0 0 / 30%);
}
#button_hide {
padding: 5px 0px 5px 5px;
line-height: 15px;
text-align: center;
width: 48px;
font-size: 10pt;
height: 23px;
font-family: tahoma;
margin-top: 3px;
margin-right: 3px;
position: absolute;
top: calc(100% - 196px);
right: calc(50% - 0px);
z-index: 99999999;
border-radius: 8px 8px 0 0;
border: 0;
backdrop-filter: blur(8px);
box-shadow: 0 0 20px rgb(0 0 0 / 30%);
background: #ffffff85;
}
#button_unhide {
padding: 5px 0px 5px 5px;
line-height: 15px;
text-align: center;
width: 48px;
font-size: 10pt;
height: 23px;
font-family: tahoma;
margin-right: 3px;
position: absolute;
top: calc(100% - 23px);
right: calc(50% - 0px);
z-index: 99999999;
border-radius: 8px 8px 0 0;
border: 0;
backdrop-filter: blur(8px);
box-shadow: 0 0 20px rgb(0 0 0 / 30%);
background: #ffffff85;
}
.move {
left: 408px !important;
transform: translate(-408px, 0);
}
.move-btn {
left: 408px !important;
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 .dropdown-menu {
float: right;
position: absolute;
right: 0px;
width: 550px;
margin-left: -560px !important;
margin-top: -40px !important;
box-shadow: 0 0 20px rgb(0 0 0 / 30%);
border-radius: 8px 8px 8px 8px;
}
li.fixed-plugin:hover {
/*transform: scale(1.3);*/
right: 0;
/*margin-right: 7px;*/
position: relative;
}
/*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 {
transform: rotate(180deg);
transition: all 0.3s linear;
}
/*.move-btn .caret {*/
/* transform: rotate(90deg)!important;*/
/* transition: all 0.3s linear;*/
/*}*/
.btn-login:hover {
transform: scale(1.3);
}
</style>
<style>
#map-insert>div.leaflet-control-container {
display: block;
}
</style>
{% include 'includes/css-o.html' %} {% include 'includes/css-m.html' %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
......@@ -495,123 +512,70 @@ li.fixed-plugin:hover .dropdown-menu {
{% include 'includes/navbar.html' %} {% include 'includes/plugin.html' %}
<!-- Page container -->
<div class="page-container">
<div class="page-container">
<!-- Page content -->
<div class="page-content">
<!-- Page content -->
<div class="page-content">
<!-- Main sidebar -->
<!-- <div class="sidebar sidebar-main sidebar-default"> -->
<!-- <div class="sidebar-content"> -->
<div id="panel-samping" class="widget-pane widget-pane-visible" >
{% block content %}
<div class="sidebar-wrapper">
<div class="panel panel-default" id="features">
<!-- Main sidebar -->
<!-- <div class="sidebar sidebar-main sidebar-default"> -->
<!-- <div class="sidebar-content"> -->
<div id="panel-samping" class="widget-pane widget-pane-visible">
{% block content %}
<div class="sidebar-wrapper">
<div class="panel panel-default" id="features">
<div class="sidebar-table" id="isi_panel">
<!-- <input type="submit" value="submit"> -->
<!-- <a href="" id="btn_edit_kelurahan" style="position: absolute;
<div class="sidebar-table" id="isi_panel">
<!-- <input type="submit" value="submit"> -->
<!-- <a href="" id="btn_edit_kelurahan" style="position: absolute;
top: 240px;
right: 5px;">Edit</a> -->
<table class="table table-hover tasks-list">
<!-- panel samping js disini -->
</table>
</div>
</div>
<table class="table table-hover tasks-list">
<!-- panel samping js disini -->
</table>
</div>
{% endblock content %}
</div>
<!-- <div >
<a href="#" class="btn btn-default" id="button_hide_panel" data-toggle="tooltip" data-placement="right" title="Ciutkan panel"><span class="caret" style="margin-left: -5px;transform: rotate(90deg)"></span></a>
</div> -->
<div >
<a href="#" class="btn btn-default" id="button_unhide_panel" data-toggle="tooltip" data-placement="right" title="Tampilkan panel"><span class="caret" style="margin-left: -5px;transform: rotate(270deg)"></span></a>
</div>
<!-- User menu -->
<!-- <div class="sidebar-user-material"> -->
<!-- <div class="category-content" id="panel-samping"> -->
<!-- <div class="panel panel-default" id="features"> -->
<!-- <div class="sidebar-table" id="isi_panel"> -->
<!-- <input type="submit" value="submit"> -->
<!-- <a href="" id="btn_edit_kelurahan" style="position: absolute; -->
<!-- top: 240px; -->
<!-- right: 5px;">Edit</a> -->
<!-- <table class="table table-hover tasks-list"> -->
<!-- panel samping js disini -->
<!-- </table> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- /category content -->
<!-- </div> -->
<!-- /user menu -->
<!-- </div> -->
<!-- </div> -->
</div>
{% endblock content %}
</div>
<div>
<a href="#" class="btn btn-default" id="button_unhide_panel" data-toggle="tooltip" data-placement="right" title="Tampilkan panel"><span class="caret" style="margin-left: -5px;transform: rotate(270deg)"></span></a>
</div>
<!-- Main content -->
<div class="content-wrapper">
<div class="content-wrapper">
<!-- Content area -->
<div class="content">
<!-- Content area -->
<div class="content">
<!-- Main charts -->
<div class="row">
<div class="col-lg-12">
<div id="map">
<!-- Main charts -->
<div class="row">
<div class="col-lg-12">
<div id="map"></div>
</div>
<div id="map-cesium" style="z-index: -999; height: 605px; display:none"></div>
</div>
</div>
</div>
</div>
{% include 'includes/content.html' %}
</div>
<!-- /page content -->
</div>
<!-- <div style="height: 93vh;"> -->
<!-- <div>
<a href="#" class="btn btn-default" id="button_hide_panel" data-toggle="tooltip" data-placement="right" title="Ciutkan panel"><span class="caret" style="margin-left: -5px;transform: rotate(90deg)"></span></a>
</div>
<div>
<a href="#" class="btn btn-default" id="button_unhide_panel" data-toggle="tooltip" data-placement="right" title="Ciutkan panel"><span class="caret" style="margin-left: -5px;transform: rotate(270deg)"></span></a>
</div> -->
<!-- <div id="panel-samping" style="width: 380px;
height: 100px;
max-width: 100%;
float: right;
top: 68px;
left: -5px;
position: absolute;
z-index: 999;
display: none;
background-color: white;">
<div class="sidebar-wrapper">
</div>
</div> -->
<!-- <div id="map"></div>
<div id="map-cesium" style="z-index: -999; height: 605px; display:none"></div> -->
<!-- </div> -->
{% include 'includes/modal.html' %}
<div class="modal fade" id="modal-kelurahan" tabindex="-1" role="dialog">
</div>
<!-- end modal location -->
{% include 'includes/modal.html' %} {% include 'includes/o.html' %} {% include 'includes/m.html' %}
{% include 'includes/o.html' %} {% include 'includes/m.html' %}
<div class="page_loader"></div>
......
templates/maps/perbaikan.html
View file @ 60eaca51
......@@ -37,8 +37,7 @@
}
.modal-backdrop {
z-index: -999!important;
display: none;
opacity: 0.7;
}
.sidebar {
......@@ -97,10 +96,17 @@
display: none!important;
}
.leaflet-interactive {
fill: none;
stroke-width: 15;
stroke: #ffee00;
.leaflet-draw-toolbar {
position: absolute;
}
.leaflet-draw-actions {
padding: 0px 0px 0px 40px;
list-style-type: none;
}
.leaflet-container ul li a {
color: white;
}
::-webkit-scrollbar {
......@@ -122,6 +128,68 @@
background: #555;
}
</style>
<style>
.modal-header .btnGrp {
position: absolute;
top: 8px;
right: 10px;
}
.min {
width: 250px;
height: 35px;
overflow: hidden !important;
padding: 0px !important;
margin: 0px;
float: left;
position: static !important;
}
.min .modal-dialog,
.min .modal-content {
height: 100%;
width: 100%;
margin: 0px !important;
padding: 0px !important;
}
.min .modal-header {
height: 100%;
width: 100%;
margin: 0px !important;
padding: 3px 5px !important;
}
.display-none {
display: none;
}
button .fa {
font-size: 16px;
margin-left: 10px;
}
.min .fa {
font-size: 14px;
}
.min .menuTab {
display: none;
}
button:focus {
outline: none;
}
.minmaxCon {
height: 35px;
bottom: 1px;
left: 1px;
position: fixed;
right: 1px;
z-index: 9999;
}
</style>
</head>
<body style="padding-right: 0px !important;">
......@@ -133,7 +201,7 @@
<!-- Page container -->
<div class="page-container">
<div class="page-container" style="top: 48px;">
<!-- Page content -->
<div class="page-content">
......@@ -151,17 +219,9 @@
<div class="media-body">
<span class="media-heading text-semibold">{{user.username}}</span>
<div class="text-size-mini text-muted">
<i class="icon-pin text-size-small"></i>
<!-- <i class="icon-pin text-size-small"></i> -->
</div>
</div>
<div class="media-right media-middle">
<ul class="icons-list">
<li>
<a href="#"><i class="icon-cog3"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
......@@ -178,8 +238,8 @@
<li><a class="tablinks" onclick="openInfo(event, 'info-jalan')" id="defaultOpen"><span>Jalan</span></a></li>
<li><a class="tablinks" onclick="openInfo(event, 'info-pendidikan')" id="defaultOpen"><span>Sarana Pendidikan</span></a></li>
<li><a class="tablinks" onclick="openInfo(event, 'info-jalan')" id="defaultOpen"><span>Manajemen Perbaikan</span></a></li>
<!-- <li><a class="tablinks" onclick="openInfo(event, 'info-pendidikan')" id="defaultOpen"><span>Sarana Pendidikan</span></a></li> -->
<!-- <li><a class="tablinks" onclick="openInfo(event, 'info-ibadah')" id="defaultOpen"><span>Sarana Ibadah</span></a></li>
<li><a class="tablinks" onclick="openInfo(event, 'info-kesehatan')" id="defaultOpen"><span>Sarana Kesehatan</span></a></li>
<li><a class="tablinks" onclick="openInfo(event, 'info-jembatan')" id="defaultOpen"><span>Jembatan</span></a></li> -->
......@@ -204,16 +264,6 @@
<div class="content-wrapper" id="info-jalan">
<div>
<!-- Page header -->
<div class="page-header page-header-default" style="margin-bottom: 0px;">
<div class="breadcrumb-line">
<ul class="breadcrumb">
<li>Manajemen Jalan</li>
</ul>
</div>
</div>
<!-- /page header -->
<!-- Content area -->
<div class="content" style="padding: 15px;">
<!-- Main charts -->
......@@ -222,11 +272,11 @@
<div class="panel-heading">
<h6 class="panel-title">Table Data Perbaikan</h6>
<!-- <input name="" id=""> -->
<button class="btn btn-primary btn-sm" id="inputdata" style="bottom: 15px;
<!-- <button class="btn btn-primary btn-sm" id="inputdata" style="bottom: 15px;
float: right;
width: 80px;
height: 32px;
margin-top: -15px;" data-toggle="modal" data-target="#modal_input">Input Data</button>
margin-top: -15px;">Input Data</button> -->
</div>
<hr style="margin-top: 0px;">
......@@ -236,28 +286,28 @@
<thead>
<tr>
<th>No.</th>
<th>Nama Jalan</th>
<th>Panjang Jalan</th>
<th>Lebar Jalan</th>
<th>Type Jalan</th>
<th>Tahun Perbaikan</th>
<th>Sarana Perbaiakn</th>
<th>Nama</th>
<th>Type</th>
<th>Tanggal Mulai</th>
<th>Tanggal Selesai</th>
<th>Anggaran</th>
<th>Keterangan</th>
</tr>
</thead>
<tbody>
{% for jln in jalan %}
{% for all in res_all %}
<tr>
<td>{{forloop.counter}}</td>
<td>{{jln.name}}</td>
<td>{{jln.pjg_jln_reno}}</td>
<td>{{jln.lbr_jln_reno}}</td>
<td>{{jln.type}}</td>
<td>{{jln.tgl_perbaikan}}</td>
<td>{{jln.anggaran}}</td>
<td>{{all.name_perbaikan}}</td>
<td>{{all.name}}</td>
<td>{{all.type}}</td>
<td>{{all.tgl_perbaikan}}</td>
<td>{{all.tgl_selesai}}</td>
<td>{{all.anggaran}}</td>
<td class="text-center">
<a onclick="loadjlbyid('{{jln.id}}')" data-toggle="modal" data-target="#modal_detail">Detail</a>
<a class="mdlFire" onclick="loadjlbyid('{{all.id_object}}')" data-toggle="modal" data-target="#modal_detail">Detail</a>
</td>
</tr>
......@@ -272,68 +322,128 @@
</div>
</div>
<div class="content-wrapper" id="info-pendidikan" style="display: none;">
<div>
<!-- Page header -->
<div class="page-header page-header-default" style="margin-bottom: 0px;">
<div class="breadcrumb-line">
<ul class="breadcrumb">
<li>Manajemen Sarana Pendidikan</li>
</ul>
</div>
</div>
<!-- /page header -->
<!-- Content area -->
<div class="content" style="padding: 15px;">
<!-- Main charts -->
<div class="panel panel-flat" style="display: none;">
<div class="panel-heading">
<h6 class="panel-title">Table Data Perbaikan</h6>
<button id="modalAddButton" class="btn btn-primary btn-sm" value="SAVE" style="bottom: 15px; float: right; display:none;" data-toggle="modal" data-target="#modal_theme_info"></button>
<div class="content-wrapper mymodal" id="input_perbaikan" style="display: none;">
<div class="content" style="padding: 15px;">
<!-- Main charts -->
<div class="panel panel-flat" style="display: none;">
<div class="panel-body" style="padding-top: 10px;">
<div class="tabbable">
<ul class="nav nav-tabs nav-tabs-bottom nav-justified">
<button type="button" class="close" onclick="destroyWraper()">&times;</button>
<button class="close modalMinimize" style="right: 50px;"> <i class='fa fa-minus'></i> </button>
<li class="active"><a href="#left-tab-input-coordinat" data-toggle="tab">Koordinat</a></li>
<li><a href="#right-tab-input-informasi" data-toggle="tab">Insert Informasi</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="left-tab-input-coordinat">
<div class="modal-body" style="max-height: 450px;overflow-y: auto;">
<input type="text" class="hidden" id="poly_create">
<input type="text" class="hidden" id="id_jalan_perbaikan">
<input type="text" class="hidden" id="type_id">
<div id="map-insert" style="height: 400px;width: 100%">
</div>
</div>
</div>
<hr style="margin-top: 0px;">
<div class="panel-body">
<table class="table table-responsive datatable-show-all table-sm" id="userList" style="word-wrap:break-word;">
<thead>
<tr>
<th>No.</th>
<th>Nama</th>
<th>Panjang</th>
<th>Lebar</th>
<th>Type</th>
<th>Tahun Perbaikan</th>
<th>Anggaran</th>
<th>Keterangan</th>
</tr>
</thead>
<tbody>
<div class="tab-pane" id="right-tab-input-informasi">
<div class="modal-body" style="max-height: 450px;overflow-y: auto;">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Nama Jalan :</label>
<input type="text" id="namajalan" class="form-control" value="">
</div>
<div class="form-group">
<label>Type Jalan :</label>
<input type="text" id="typejalan" class="form-control" value="">
</div>
<div class="form-group">
<label>Kelurahan :</label>
<input type="text" id="kelurahan" class="form-control" value="">
</div>
<div class="form-group">
<label>Kecamatan :</label>
<input type="text" id="kecamatan" class="form-control" value="">
</div>
<div class="form-group">
<label>Anggaran :</label>
<input type="text" id="anggaran" class="form-control" value="">
</div>
<div class="form-group">
<label>Pihak yang Mengesahkan :</label>
<input type="text" id="pihakpengesahan" class="form-control" value="">
</div>
<div class="form-group">
<label>Tanggal Disetujui :</label>
<input type="date" id="tgldisetujui" class="form-control" value="">
</div>
<div class="form-group">
<label>Tanggal Mulai Perbaikan :</label>
<input type="date" id="tglmulaiperbaikan" class="form-control" value="">
</div>
<div class="form-group">
<label>Tanggal Selesai Perbaikan :</label>
<input type="date" id="tglselesaiperbaikan" class="form-control" value="">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Penanggung Jawab Lapangan :</label>
<input type="text" id="pjlapangan" class="form-control" value="">
</div>
<div class="form-group">
<label>Kontraktor :</label>
<input type="text" id="kontraktor" class="form-control" value="">
</div>
<div class="form-group">
<label>Panjang Jalan Keseluruhan :</label>
<input type="text" id="panjangjalanall" class="form-control" value="">
</div>
<div class="form-group">
<label>Panjang Jalan Perbaikan :</label>
<input type="text" id="panjangjalanperbaikan" class="form-control" value="">
</div>
<div class="form-group">
<label>Lebar Jalan Perbaikan :</label>
<input type="text" id="lebarjalanperbaikan" class="form-control" value="">
</div>
<div class="form-group">
<label>Jenis Perbaikan :</label>
<input type="text" id="jenisperbaikan" class="form-control" value="">
</div>
<div class="form-group">
<label>Proposal (.pdf):</label>
<input type="file" id="proposal">
</div>
<div class="form-group">
<label>Bukti Selesai Perbaikan (.png/.jpg/.jpeg/):</label>
<input type="file" id="buktiselesai">
</div>
</div>
</div>
{% for jln in pendidikan %}
<tr>
<td>{{forloop.counter}}</td>
<td>{{jln.name}}</td>
<td>{{jln.pjg_jln_reno}}</td>
<td>{{jln.lbr_jln_reno}}</td>
<td>{{jln.type}}</td>
<td>{{jln.tgl_perbaikan}}</td>
<td>{{jln.anggaran}}</td>
<td class="text-center">
<a onclick="loadjlbyid('{{jln.id}}')" data-toggle="modal" data-target="#modal_detail">Detail</a>
</td>
</tr>
</div>
</div>
{% endfor %}
</tbody>
</table>
</div>
<!-- /form validation -->
</div>
<div class="panel-footer">
<input type="submit" class="btn btn-default" id="save-perbaikan" value="SAVE">
<button type="button" class="btn btn-link" onclick="destroyWraper()">Close</button>
</div>
</div>
<!-- /main charts -->
</div>
<!-- /main charts -->
</div>
......@@ -347,15 +457,17 @@
</div>
<!-- /page container -->
<div id="modal_detail" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div id="modal_detail" class="modal fade mymodal" style="padding-top: 0px;padding-bottom: 0px;right: -11px;">
<div class="modal-dialog modal-lg" style="width: 100%;height: 100%;margin: 0;bottom: 0;">
<div class="modal-content" style="height: 100%;">
<div class="modal-header bg-info" style="background-color:#28343a">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<button type="button" class="close" data-dismiss="modal"> <i class='fa fa-times'></i> </button>
<button class="close modalMinimize" style="right: 50px;"> <i class='fa fa-minus'></i> </button>
<h6 class="modal-title">Info Detail</h6>
</div>
<div class="modal-body" style="max-height: 450px;overflow-y: auto;">
<div class="modal-body" style="max-height: 100%;overflow-y: auto;">
<div class="panel-body" id="isi_modal_detail">
<table class="table table-responsive datatable-show-all table-sm" id="isi_detail" style="word-wrap:break-word;">
</table>
......@@ -363,149 +475,34 @@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-link" onclick="cetakExcel()">Cetak</button>
</div>
</div>
</div>
</div>
<div id="modal_input" class="modal fade">
<div class="modal-dialog modal-md">
<div id="modal_detail_ruas" class="modal fade mymodal">
<div class="modal-dialog modal-md" style="margin-top: 60px;">
<div class="modal-content">
<div class="modal-header bg-info" style="background-color:#28343a">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h6 class="modal-title">Insert jalan yang di perbaiki</h6>
<button type="button" class="close" onclick="destroylayer()" data-dismiss="modal">&times;</button>
<button class="close modalMinimize" style="right: 50px;"> <i class='fa fa-minus'></i> </button>
<h6 class="modal-title">Koordinat Jalan yang di Perbaiki</h6>
</div>
<div class="tabbable">
<ul class="nav nav-tabs nav-tabs-bottom nav-justified">
<li class="active"><a href="#left-tab-input-coordinat" data-toggle="tab">Koordinat</a></li>
<li><a href="#right-tab-input-informasi" data-toggle="tab">Insert Informasi</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="left-tab-input-coordinat">
<div class="modal-body" style="max-height: 450px;overflow-y: auto;">
<input type="text" class="hidden" id="poly_create">
<div id="map-insert" style="height: 400px;width: 560px">
<!-- <input type="button" id="create" value="Create" style="z-index: 1000;position:relative;"> -->
</div>
</div>
</div>
<div class="tab-pane" id="right-tab-input-informasi">
<div class="modal-body" style="max-height: 450px;overflow-y: auto;">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Nama Jalan :</label>
<input type="text" id="namajalan" class="form-control" value="">
</div>
<div class="form-group">
<label>Type Jalan :</label>
<input type="text" id="typejalan" class="form-control" value="">
</div>
<div class="form-group">
<label>Kelurahan :</label>
<input type="text" id="kelurahan" class="form-control" value="">
</div>
<div class="form-group">
<label>Kecamatan :</label>
<input type="text" id="kecamatan" class="form-control" value="">
</div>
<div class="form-group">
<label>Anggaran :</label>
<input type="text" id="anggaran" class="form-control" value="">
</div>
<div class="form-group">
<label>Tanggal Mulai Perbaikan :</label>
<input type="text" id="tglmulaiperbaikan" class="form-control" value="">
</div>
<div class="form-group">
<label>Tanggal Selesai Perbaikan :</label>
<input type="text" id="tglselesaiperbaikan" class="form-control" value="">
</div>
<div class="form-group">
<label>Tanggal Disetujui :</label>
<input type="text" id="tgldisetujui" class="form-control" value="">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Pihak yang Mengesahkan :</label>
<input type="text" id="pihakpengesahan" class="form-control" value="">
</div>
<div class="form-group">
<label>Penanggung Jawab Lapangan :</label>
<input type="text" id="pjlapangan" class="form-control" value="">
</div>
<div class="form-group">
<label>Kontraktor :</label>
<input type="text" id="kontraktor" class="form-control" value="">
</div>
<div class="form-group">
<label>Panjang Jalan Keseluruhan :</label>
<input type="text" id="pengacara" class="form-control" value="">
</div>
<div class="form-group">
<label>Panjang Jalan Perbaikan :</label>
<input type="text" id="panjangjalanperbaikan" class="form-control" value="">
</div>
<div class="form-group">
<label>Lebar Jalan Perbaikan :</label>
<input type="text" id="lebarjalanperbaikan" class="form-control" value="">
</div>
<div class="form-group">
<label>Proposal (.pdf):</label>
<input type="file" id="proposal" class="form-control" value="">
</div>
<div class="form-group">
<label>Bukti Selesai Perbaikan (.png/.jpg/.jpeg/):</label>
<input type="file" id="buktiselesai" class="form-control" value="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="modal_detail_ruas" class="modal fade">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header bg-info" style="background-color:#28343a">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h6 class="modal-title">Insert jalan yang di perbaiki</h6>
</div>
<div class="modal-body" style="max-height: 450px;overflow-y: auto;">
<div class="panel-body" id="isi_modal_detail">
<table class="table table-responsive datatable-show-all table-sm" style="word-wrap:break-word;">
</table>
</div>
<div class="modal-body" style="overflow-y: auto;">
<div id="map-detail-by-id" style="height: 350px;"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-link" onclick="destroylayer()" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="minmaxCon"></div>
<!-- Core JS files -->
<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>
......@@ -541,7 +538,7 @@
<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/pickers/daterangepicker.js' %}"></script>
<script src="{% static 'js/plugins/notifications/sweet_alert.min.js' %}"></script>
<!-- <script type="text/javascript" src="{% static 'js/plugins/ui/ripple.min.js' %}"></script> -->
<!-- /theme JS files -->
......@@ -613,25 +610,170 @@
evt.currentTarget.className += " active";
}
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const page = urlParams.get('page')
if (page == "group") {
$("#usergroup").css("display", "block");
$("#info-maps").css("display", "none");
} else {
$("#usergroup").css("display", "none");
$("#info-maps").css("display", "block");
}
function destroyfade() {
$(".modal-backdrop").css("display", "none")
$(".modal-backdrop").removeClass('show');
$("body").css('padding-right', '0px !important')
}
function destroyWraper() {
$("#input_perbaikan").css("display", "none");
$("#info-jalan").css("display", "block");
$("#info-pendidikan").css("display", "none");
}
$("#inputdata").on("click", function() {
$("#input_perbaikan").css("display", "block");
$("#info-jalan").css("display", "none");
$("#info-pendidikan").css("display", "none");
editableLayers.clearLayers();
setTimeout(function() {
map_input.invalidateSize();
}, 1000);
$.ajax({
url: "{% url 'apps:input-perbaikan' %}",
data: {
'id_jalan': 1
},
dataType: 'json',
success: function(data) {
$("#namajalan").val(data[0]);
$("#typejalan").val(data[1]);
$("#panjangjalanall").val(data[2]);
$("#id_jalan_perbaikan").val(data[4]);
$("#type_id").val(data[5])
var latlngs = data[3];
map_input.setView([latlngs['geometry']['coordinates'][0][0][1], latlngs['geometry']['coordinates'][0][0][0]], 17)
var geo_jalan = L.geoJson(data[3], {
style: function(feature) {
return {
color: "#808080",
weight: 8,
opacity: 2,
zIndex: 1000
};
}
}).addTo(map_input);
}
})
});
$("#save-perbaikan").click(function() {
var hasil = JSON.stringify(editableLayers.toGeoJSON());
var id_jalan = $("#id_jalan_perbaikan").val();
var type_id = $("#type_id").val();
var name = $("#namajalan").val();
var type = $("#typejalan").val();
var tgl_perbaikan = $("#tglmulaiperbaikan").val();
var tgl_selesai = $("#tglselesaiperbaikan").val();
var tgl_disetujui = $("#tgldisetujui").val();
var anggaran = $("#anggaran").val();
var proposal = $("#proposal").val();
var bukti_selesai = $("#buktiselesai").val();
var pj = $("#pihakpengesahan").val();
var pj_lapangan = $("#pjlapangan").val();
var kontraktor = $("#kontraktor").val();
var pjg_perbaikan = $("#panjangjalanperbaikan").val();
var lbr_perbaikan = $("#lebarjalanperbaikan").val();
var jenis_perbaikan = $("#jenisperbaikan").val();
var luas = $("#luas").val();
var kelurahan = $("#kelurahan").val();
var kecamatan = $("#kecamatan").val();
var data_umum = [{
'coord': hasil
}, {
'object_id': id_jalan
}, {
'type_id': type_id
}, {
'name': name
}, {
'type': type
}, {
'tgl_selesai': tgl_selesai
}, {
'tgl_perbaikan': tgl_perbaikan
}, {
'tgl_disetujui': tgl_disetujui
}, {
'anggaran': anggaran
}, {
'pj': pj
}, {
'pj_lapangan': pj_lapangan
}, {
'kontraktor': kontraktor
}, {
'pjg_perbaikan': pjg_perbaikan
}, {
'lbr_perbaikan': lbr_perbaikan
}, {
'jenis_perbaikan': jenis_perbaikan
}, {
'luas': luas
}, {
'kelurahan': kelurahan
}, {
'kecamatan': kecamatan
}]
data = new FormData()
data.append("proposal", $("input[id^='proposal']")[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++) {
var keyss = Object.keys(data_umum[i]);
data.append(keyss[0], data_umum[i][keyss[0]])
}
$.ajax({
url: "{% url 'apps:save-perbaikan' %}",
data: data,
dataType: 'json',
type: 'POST',
processData: false,
contentType: false,
success: function(data) {
let response = data;
if (response.code == 0) {
swal({
title: response.info,
text: response.data,
type: "success",
icon: "success",
confirmButtonColor: "#00BCD4"
}, function() {
$("#input_perbaikan").css("display", "none");
$("#info-jalan").css("display", "block");
$("#info-pendidikan").css("display", "none");
})
} else {
swal({
title: response.info,
text: response.data,
type: "warning",
icon: "error",
confirmButtonColor: "#00BCD4"
})
}
}
})
});
$('.datatable-show-all').DataTable({
autoWidth: false,
columnDefs: [{
......@@ -755,24 +897,23 @@
dataType: 'json',
type: 'post',
success: function(data) {
console.log(data)
isi_modal_detail = []
for (var i = 0; i < data.length; i++) {
isi_modal_detail.push(`<tr>
<td>` + i + `</td>
<td>` + data[i].name + `</td>
<td>` + data[i].type + `</td>
<td>` + data[i].panjang + `</td>
<td>` + data[i].tgl_perbaikan + `</td>
<td>` + data[i].anggaran + `</td>
<td><a href="/static/file/` + data[i].proposal + `" id="downloadproposal">` + data[i].proposal + `</a></td>
<td>` + data[i].pj + `</td>
<td>` + data[i].pj_lapangan + `</td>
<td>` + data[i].kontraktor + `</td>
<td><a onclick="loadmapruas('` + data[i].id + `')" >Detail</a></td>
<td>` + data[i].pjg_jln_reno + `</td>
<td>` + data[i].lbr_jln_reno + `</td>
<td><a onclick="loadmapruas('` + data[i].id + `','` + data[i].id_object + `')" id="loaddetailcoord" data-toggle="modal" data-target="#modal_detail_ruas">View</a></td>
<td><a href="media/proposal/` + data[i].proposal + `" id="downloadproposal">View</a></td>
<td><a href="media/bukti_penyelesaian/` + data[i].bukti_selesai + `" onclick="viewBukti()" id="view-bukti">View</a></td>
</tr>`)
}
......@@ -783,16 +924,16 @@
<th>No.</th>
<th>Nama</th>
<th>Type</th>
<th>Panjang ruas jalan</th>
<th>Tanggal Perbaikan</th>
<th>Anggaran</th>
<th>Proposal</th>
<th>Penanggung Jawab</th>
<th>Penanggung Jawab Lapangan</th>
<th>Kontraktor</th>
<th>Ruas yang di perbaiki</th>
<th>panjang jalan yang di perbaiki</th>
<th>Lebar Jalan yang di Perbaiki</th>
<th>Ruas yang di perbaiki</th>
<th>Proposal</th>
<th>Bukti Penyelesaian</th>
</tr>
</thead>
<tbody>
......@@ -804,6 +945,68 @@
});
}
var map_detail_by_id = L.map('map-detail-by-id', {
editable: true,
zoomControl: false,
drawControl: true
}).setView([-4.125826277307029, 104.1881561279297], 10);
L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}&s=Gal&apistyle=s.t:0|s.e:l|p.v:off', {
maxZoom: 21,
minZoom: 4,
}).addTo(map_detail_by_id);
function loadmapruas(id_tbl, id_jl) {
setTimeout(function() {
map_detail_by_id.invalidateSize();
}, 1000);
$("#map-detail-by-id > div.leaflet-control-container").css("display", "none")
$.ajax({
url: "{% url 'apps:load-jl-by-id-detail' %}",
data: {
"id": id_tbl,
"id_jl": id_jl
},
dataType: 'json',
success: function(data) {
console.log(data)
map_detail_by_id.setView([data[0]['geometry']['coordinates'][0][0][1], data[0]['geometry']['coordinates'][0][0][0]], 18)
var geo_jalan = L.geoJson(data[1], {
style: function(feature) {
return {
color: "#808080",
weight: 15,
opacity: 2,
zIndex: 1000
};
}
}).addTo(map_detail_by_id);
var geo_jalan_perbaikan = L.geoJson(data[0], {
style: function(feature) {
return {
color: "#FAFA00",
weight: 10,
opacity: 2,
zIndex: 1001
};
}
}).addTo(map_detail_by_id);
}
})
}
function destroylayer() {
map_detail_by_id
}
var map_input = L.map('map-insert', {
editable: true,
zoomControl: false,
......@@ -823,7 +1026,7 @@
draw: {
polyline: {
shapeOptions: {
color: '#56ff01',
color: 'red',
weight: 10
}
},
......@@ -833,7 +1036,8 @@
edit: {
featureGroup: editableLayers, //REQUIRED!!
remove: true
}
},
color: 'red'
};
var drawControl = new L.Control.Draw(options);
......@@ -842,8 +1046,11 @@
map_input.on('draw:created', function(e) {
var type = e.layerType,
layer = e.layer;
layer.options.color = 'yellow';
layer.options.weight = 10;
if (type === 'polyline') {
// Calculating the distance of the polyline
var tempLatLng = null;
var totalDistance = 0.00000;
......@@ -858,19 +1065,15 @@
});
e.layer.bindPopup((totalDistance).toFixed(2) + ' meter');
e.layer.openPopup();
$("#panjangjalanperbaikan").val((totalDistance).toFixed(2) + ' meter');
}
editableLayers.addLayer(layer);
});
$(document).on("click", "#inputdata", function() {
editableLayers.clearLayers();
setTimeout(function() {
map_input.invalidateSize();
}, 1000);
});
$(".leaflet-draw-draw-polyline").html('<span class="fa fa-expand"></span>')
$(".leaflet-draw-actions-top").html(`<li class=""><a class="btn btn-primary" href="#" title="Finish drawing">Finish</a></li><li class=""><a class="" href="#" title="Delete last point drawn">Delete last point</a></li><li class=""><a class="" href="#" title="Cancel drawing">Cancel</a></li>`);
loaderPage(false);
......@@ -882,4 +1085,72 @@
$(".panel-flat").css("display", "block")
}
};
function cetakExcel() {
var tab_text = "<table border='2px'><tr bgcolor='#87AFC6'>";
var textRange;
var j = 0;
tab = document.getElementById('isi_detail'); // id of table
for (j = 0; j < tab.rows.length; j++) {
tab_text = tab_text + tab.rows[j].innerHTML + "</tr>";
//tab_text=tab_text+"</tr>";
}
tab_text = tab_text + "</table>";
tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, ""); //remove if u want links in your table
tab_text = tab_text.replace(/<img[^>]*>/gi, ""); // remove if u want images in your table
tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer
{
txtArea1.document.open("txt/html", "replace");
txtArea1.document.write(tab_text);
txtArea1.document.close();
txtArea1.focus();
sa = txtArea1.document.execCommand("SaveAs", true, "Say Thanks to Sumit.xls");
} else //other browser not tested on IE 11
sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
return (sa);
}
var $content, $modal, $apnData, $modalCon;
$content = $(".min");
$(".mdlFire").click(function(e) {
e.preventDefault();
var $id = $(this).attr("data-target");
});
$(".modalMinimize").on("click", function() {
$modalCon = $(this).closest(".mymodal").attr("id");
$apnData = $(this).closest(".mymodal");
$modal = "#" + $modalCon;
$(".modal-backdrop").addClass("display-none");
$($modal).toggleClass("min");
if ($($modal).hasClass("min")) {
$(".minmaxCon").append($apnData);
$(this).find("i").toggleClass('fa-minus').toggleClass('fa-clone');
} else {
$(".container").append($apnData);
$(this).find("i").toggleClass('fa-clone').toggleClass('fa-minus');
};
});
$("button[data-dismiss='modal']").click(function() {
$(this).closest(".mymodal").removeClass("min");
$(".container").removeClass($apnData);
$(this).next('.modalMinimize').find("i").removeClass('fa fa-clone').addClass('fa fa-minus');
});
</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