Commit 60c8ed0c authored by Muhamad's avatar Muhamad

perbaikan, user

parent 9c526a4a
......@@ -63,6 +63,9 @@ urlpatterns = [
path('edit-jalan-valid', views.editjalanvalid, name='edit-jalan-valid'),
path('3d-maps', views.maps3d, name='3d-maps'),
path('deletejalan', views.deletejalan, name='hapus-jalan')
path('deletejalan', views.deletejalan, name='hapus-jalan'),
path('filt_perbaikan_kecamatan', views.filt_perbaikan_kecamatan, name='filt_perbaikan_kecamatan'),
path('filt_perbaikan_desa', views.filt_perbaikan_desa)
]
\ No newline at end of file
from django.http import response
from django.http.response import Http404
from django.shortcuts import redirect, render
from rest_framework import status
......@@ -15,13 +16,12 @@ from django.db import connection as conn
# Create your views here.
from rest_framework.renderers import JSONRenderer, TemplateHTMLRenderer
from django.utils import six
#import six
# from django.utils import six
import six
from django.core.exceptions import PermissionDenied
from django.contrib.auth.decorators import user_passes_test
from django.http import HttpResponse, HttpResponseNotFound
def group_required(group, login_url=None, raise_exception=False):
def check_perms(user):
......@@ -2621,3 +2621,97 @@ def createpoint(request):
respon={'data':data, 'info': info, 'status':status}
return Response(respon)
@api_view(('GET',))
def filt_perbaikan_kecamatan(request):
id_kec = request.GET.get('id_kec')
with conn.cursor() as data_per:
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
JOIN geo_data_kecamatan gdk ON st_intersects(st_setsrid(tp.geom, 4326), st_setsrid(gdk.geom, 4326))
WHERE
rn = 1 and gdk.id = %s
"""% id_kec)
res_perbaikan = data_per.fetchall()
res_all = []
for j in res_perbaikan:
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)
with conn.cursor() as data_desa:
data_desa.execute("""
SELECT
gdk.ID,
gdk.desa
FROM
geo_data_kelurahan gdk
WHERE
kecamatan = (SELECT kecamatan FROM geo_data_kecamatan WHERE id = %s)
"""% id_kec)
res_kelurahan = data_desa.fetchall()
respon = {'res_perbaikan':res_all, 'res_kel':res_kelurahan}
return Response(respon)
@api_view(('GET',))
def filt_perbaikan_desa(request):
id_desa = request.GET.get('id_desa')
with conn.cursor() as data_per:
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
JOIN geo_data_kelurahan gdk ON st_intersects(st_setsrid(tp.geom, 4326), st_setsrid(gdk.geom, 4326))
WHERE
rn = 1 and gdk.id = %s
"""% id_desa)
res_perbaikan = data_per.fetchall()
res_all = []
for j in res_perbaikan:
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)
respon = {'res_perbaikan':res_all}
return Response(respon)
\ No newline at end of file
......@@ -23,7 +23,7 @@ class Dashboard(generic.TemplateView):
kel_res_ = kel.fetchall()
with conn.cursor() as kec:
kec.execute("SELECT kecamatan, json_build_object('type', 'Feature', 'administrasi', (id, kecamatan),'geometry', ST_AsGeoJSON(geom :: geometry) :: json) from geo_data_kecamatan")
kec.execute("SELECT kecamatan, json_build_object('type', 'Feature', 'administrasi', (id, kecamatan),'geometry', ST_AsGeoJSON(geom :: geometry) :: json) from geo_data_kecamatan order by kecamatan ASC")
kec_res_ = kec.fetchall()
# with conn.cursor() as knt:
......@@ -463,6 +463,64 @@ class Dashboard(generic.TemplateView):
for i in gardu_listrik_res:
gardu_listrik_result.append(i[0])
with conn.cursor() as data_per:
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:
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)
current_user = request.user
thisUser = current_user.id
if thisUser == None:
user_data = {"filepath":'placeholder.jpg'}
else:
# print()
sql = "select * from auth_user where id = "+str(thisUser)
with conn.cursor() as userprop:
userprop.execute(sql)
us = userprop.fetchall()
user_data = []
for row in us:
datas = {
"id": row[0],
"username": row[4],
"firstname": row[5],
"lastname": row[6],
"email" : row[7],
"filepath": row[11],
# "password": row[1]
}
user_data.append(datas)
context = {
'title':'Dashboard',
'kelurahan':kel_res,
......@@ -479,7 +537,9 @@ class Dashboard(generic.TemplateView):
'cagar_budaya':cagar_budaya_result,
'gardu_listrik':gardu_listrik_result,
'global':all[0],
# 'kntl':kntl
'res_all':res_all,
'thisUser' : user_data
}
return render (request, self.template_name, context)
......
......@@ -79,14 +79,25 @@ WSGI_APPLICATION = 'OKU.wsgi.application'
# Database
# https://docs.djangoproject.com/en/3.2/ref/settings/#databases
# DATABASES = {
# 'default': {
# 'ENGINE': 'django.db.backends.postgresql_psycopg2',
# 'NAME': 'oku_gis_new',
# 'USER': 'postgres',
# 'PASSWORD' : 'khansia215758',
# 'HOST': '30.10.20.102',
# 'PORT': '5432',
# }
# }
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.postgresql_psycopg2',
'NAME': 'oku_gis_new',
'USER': 'postgres',
'PASSWORD' : 'khansia215758',
'HOST': '30.10.20.102',
'PORT': '5432',
'HOST': '103.126.28.66',
'PORT': '8082',
}
}
......
......@@ -49,6 +49,32 @@
opacity: 1;
}
.sidebar-2.active {
display: block!important;
}
.navigation>li.active>a,
.navigation>li.active>a:hover,
.navigation>li.active>a:focus {
background-color: #353847;
color: #fff;
border-radius: 15px;
}
/* #btn-hide-all {
transform: rotate(180deg)
}
.active>#btn-hide-all {
transform: rotate(0deg)
} */
.navigation>li.active>#btn-hide-all {
color: #fff;
border-radius: 15px;
}
.tooltiptext-side {
visibility: hidden;
position: absolute;
......@@ -146,6 +172,33 @@ body>div.page-container>div>div.sidebar.sidebar-main>div>img {
padding-left: 0;
}
.dataTables_filter {
position: relative;
display: block;
float: left;
margin: 0 0 20px 30px;
}
#modal_detail_perbaikan>div>div>div>div.isi.text>div>div>div:nth-child(1)>span {
font-size: 12px;
line-height: 14px;
}
#modal_detail_perbaikan>div>div>div>div.isi.text>div>div>div:nth-child(2)>span {
font-size: 16px;
line-height: 19px;
font-family: 'gilroysemibold';
}
#modal_detail_perbaikan>div>div>div>div.isi.text>div>div {
margin-left: 40px;
margin-bottom: 20px;
}
.hid {
transform: rotate( 180deg);
}
@media (max-width: 1025px) {
.dock {
position: absolute;
......
<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.875 14.7199H16.3121V7.40741C16.3117 7.10915 16.1931 6.8232 15.9822 6.61229C15.7713 6.40139 15.4854 6.28275 15.1871 6.28241H10.6871V2.90741C10.6867 2.60915 10.5681 2.3232 10.3572 2.11229C10.1463 1.90139 9.86035 1.78275 9.56209 1.78241H2.81209C2.51382 1.78275 2.22787 1.90139 2.01697 2.11229C1.80606 2.3232 1.68743 2.60915 1.68709 2.90741V14.7199H1.125C0.975816 14.7199 0.832742 14.7792 0.727252 14.8847C0.621763 14.9902 0.5625 15.1332 0.5625 15.2824C0.5625 15.4316 0.621763 15.5747 0.727252 15.6802C0.832742 15.7856 0.975816 15.8449 1.125 15.8449H16.875C17.0242 15.8449 17.1673 15.7856 17.2727 15.6802C17.3782 15.5747 17.4375 15.4316 17.4375 15.2824C17.4375 15.1332 17.3782 14.9902 17.2727 14.8847C17.1673 14.7792 17.0242 14.7199 16.875 14.7199ZM8.43709 9.65741C8.43709 9.80659 8.37782 9.94967 8.27233 10.0552C8.16684 10.1606 8.02377 10.2199 7.87459 10.2199H5.62459C5.4754 10.2199 5.33233 10.1606 5.22684 10.0552C5.12135 9.94967 5.06209 9.80659 5.06209 9.65741C5.06209 9.50822 5.12135 9.36515 5.22684 9.25966C5.33233 9.15417 5.4754 9.09491 5.62459 9.09491H7.87459C8.02377 9.09491 8.16684 9.15417 8.27233 9.25966C8.37782 9.36515 8.43709 9.50823 8.43709 9.65741ZM4.49959 4.59491H6.74959C6.89877 4.59491 7.04185 4.65417 7.14734 4.75966C7.25282 4.86515 7.31209 5.00823 7.31209 5.15741C7.31209 5.30659 7.25282 5.44967 7.14734 5.55516C7.04185 5.66065 6.89877 5.71991 6.74959 5.71991H4.49959C4.3504 5.71991 4.20733 5.66065 4.10184 5.55516C3.99635 5.44967 3.93709 5.30659 3.93709 5.15741C3.93709 5.00823 3.99635 4.86515 4.10184 4.75966C4.20733 4.65417 4.3504 4.59491 4.49959 4.59491ZM4.49959 11.9074H6.74959C6.89877 11.9074 7.04185 11.9667 7.14734 12.0722C7.25282 12.1777 7.31209 12.3207 7.31209 12.4699C7.31209 12.6191 7.25282 12.7622 7.14734 12.8677C7.04185 12.9731 6.89877 13.0324 6.74959 13.0324H4.49959C4.3504 13.0324 4.20733 12.9731 4.10184 12.8677C3.99635 12.7622 3.93709 12.6191 3.93709 12.4699C3.93709 12.3207 3.99635 12.1777 4.10184 12.0722C4.20733 11.9667 4.3504 11.9074 4.49959 11.9074ZM10.6871 7.40741H15.1871V14.7199H10.6871V7.40741Z" fill="url(#paint0_linear)"/>
<path d="M13.4995 11.9074H12.3745C12.2253 11.9074 12.0823 11.9667 11.9768 12.0722C11.8713 12.1777 11.812 12.3207 11.812 12.4699C11.812 12.6191 11.8713 12.7622 11.9768 12.8677C12.0823 12.9731 12.2253 13.0324 12.3745 13.0324H13.4995C13.6487 13.0324 13.7918 12.9731 13.8973 12.8677C14.0027 12.7622 14.062 12.6191 14.062 12.4699C14.062 12.3207 14.0027 12.1777 13.8973 12.0722C13.7918 11.9667 13.6487 11.9074 13.4995 11.9074Z" fill="url(#paint1_linear)"/>
<path d="M12.3745 10.2199H13.4995C13.6487 10.2199 13.7918 10.1606 13.8973 10.0552C14.0027 9.94967 14.062 9.80659 14.062 9.65741C14.062 9.50822 14.0027 9.36515 13.8973 9.25966C13.7918 9.15417 13.6487 9.09491 13.4995 9.09491H12.3745C12.2253 9.09491 12.0823 9.15417 11.9768 9.25966C11.8713 9.36515 11.812 9.50822 11.812 9.65741C11.812 9.80659 11.8713 9.94967 11.9768 10.0552C12.0823 10.1606 12.2253 10.2199 12.3745 10.2199Z" fill="url(#paint2_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="9" y1="1.78241" x2="9" y2="15.8449" gradientUnits="userSpaceOnUse">
<stop stop-color="#738ADE"/>
<stop offset="1" stop-color="#4940AF"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="12.937" y1="11.9074" x2="12.937" y2="13.0324" gradientUnits="userSpaceOnUse">
<stop stop-color="#738ADE"/>
<stop offset="1" stop-color="#4940AF"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="12.937" y1="9.09491" x2="12.937" y2="10.2199" gradientUnits="userSpaceOnUse">
<stop stop-color="#738ADE"/>
<stop offset="1" stop-color="#4940AF"/>
</linearGradient>
</defs>
</svg>
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.3438 2.53125H3.65625C3.35799 2.53159 3.07204 2.65023 2.86113 2.86113C2.65023 3.07204 2.53159 3.35799 2.53125 3.65625V14.3438C2.53159 14.642 2.65023 14.928 2.86113 15.1389C3.07204 15.3498 3.35799 15.4684 3.65625 15.4688H14.3438C14.642 15.4684 14.928 15.3498 15.1389 15.1389C15.3498 14.928 15.4684 14.642 15.4688 14.3438V3.65625C15.4684 3.35799 15.3498 3.07204 15.1389 2.86113C14.928 2.65023 14.642 2.53159 14.3438 2.53125ZM3.65625 3.65625H9V14.3438H3.65625V3.65625Z" fill="url(#paint0_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="9" y1="2.53125" x2="9" y2="15.4688" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFC46B"/>
<stop offset="1" stop-color="#D5B64A"/>
</linearGradient>
</defs>
</svg>
<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.0625 8.45013C12.5638 8.45078 12.0794 8.61677 11.6852 8.92213C11.2909 9.22749 11.0091 9.65496 10.8837 10.1376H4.0625C3.46576 10.1376 2.89347 9.90058 2.47151 9.47862C2.04955 9.05667 1.8125 8.48437 1.8125 7.88763C1.8125 7.2909 2.04955 6.7186 2.47151 6.29664C2.89347 5.87469 3.46576 5.63763 4.0625 5.63763H10.8125C11.5584 5.63763 12.2738 5.34132 12.8012 4.81387C13.3287 4.28643 13.625 3.57106 13.625 2.82513C13.625 2.07921 13.3287 1.36384 12.8012 0.836396C12.2738 0.30895 11.5584 0.0126343 10.8125 0.0126343H4.0625C3.91332 0.0126343 3.77024 0.0718976 3.66475 0.177387C3.55926 0.282876 3.5 0.42595 3.5 0.575134C3.5 0.724319 3.55926 0.867393 3.66475 0.972882C3.77024 1.07837 3.91332 1.13763 4.0625 1.13763H10.8125C11.2601 1.13763 11.6893 1.31542 12.0057 1.63189C12.3222 1.94836 12.5 2.37758 12.5 2.82513C12.5 3.27269 12.3222 3.70191 12.0057 4.01838C11.6893 4.33484 11.2601 4.51263 10.8125 4.51263H4.0625C3.16739 4.51263 2.30895 4.86821 1.67601 5.50115C1.04308 6.13408 0.6875 6.99253 0.6875 7.88763C0.6875 8.78274 1.04308 9.64118 1.67601 10.2741C2.30895 10.9071 3.16739 11.2626 4.0625 11.2626H10.8837C10.9889 11.6701 11.2063 12.0399 11.5111 12.3301C11.8159 12.6202 12.196 12.8191 12.6082 12.904C13.0204 12.989 13.4481 12.9566 13.8429 12.8107C14.2376 12.6647 14.5835 12.4109 14.8412 12.0782C15.0989 11.7455 15.2582 11.3472 15.3009 10.9286C15.3436 10.5099 15.268 10.0876 15.0828 9.70975C14.8975 9.33187 14.61 9.01352 14.2529 8.79086C13.8958 8.5682 13.4833 8.45015 13.0625 8.45013Z" fill="#8E8E8E"/>
</svg>
<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.4391 1.41406C13.3457 1.3673 13.2411 1.3475 13.137 1.35687C13.033 1.36625 12.9336 1.40443 12.85 1.46713C10.8602 2.95956 9.17392 2.23686 7.22158 1.40012C5.23567 0.54902 2.98491 -0.415305 0.475015 1.46713C0.471684 1.46962 0.468801 1.47246 0.465573 1.475C0.45778 1.48111 0.450261 1.48742 0.442811 1.49393C0.435841 1.50002 0.42894 1.50617 0.42235 1.51254C0.416205 1.51846 0.4103 1.52459 0.404429 1.53079C0.39739 1.5382 0.390456 1.54565 0.383897 1.55338C0.378919 1.55925 0.374215 1.56531 0.369478 1.57137C0.362955 1.57971 0.3565 1.58809 0.350527 1.59674C0.346063 1.60312 0.341978 1.60972 0.337789 1.61629C0.332365 1.62489 0.32694 1.63347 0.321996 1.64233C0.317773 1.64985 0.313928 1.65759 0.310049 1.66533C0.305963 1.67354 0.301809 1.68171 0.298135 1.69007C0.294222 1.69893 0.290752 1.70801 0.287287 1.71709C0.284368 1.72476 0.281416 1.73242 0.278841 1.7402C0.275648 1.74983 0.272934 1.75964 0.270258 1.76952C0.268129 1.77731 0.266 1.78507 0.264215 1.79295C0.262087 1.80246 0.260335 1.81212 0.258688 1.82182C0.257177 1.83063 0.255735 1.83942 0.254636 1.84829C0.253572 1.85703 0.252817 1.86582 0.25213 1.87468C0.251375 1.88492 0.250826 1.89517 0.250584 1.90545C0.250513 1.9094 0.25 1.91321 0.25 1.91716V13.7297C0.25 13.8788 0.309263 14.0219 0.414753 14.1274C0.520242 14.2329 0.663316 14.2922 0.8125 14.2922C0.961684 14.2922 1.10476 14.2329 1.21025 14.1274C1.31574 14.0219 1.375 13.8788 1.375 13.7297V10.6454C3.26805 9.3683 4.9002 10.0667 6.77842 10.8717C7.92196 11.3618 9.15325 11.8895 10.4714 11.8895C11.4423 11.8895 12.4603 11.6031 13.525 10.8047C13.5948 10.7523 13.6516 10.6843 13.6906 10.6062C13.7297 10.5281 13.75 10.442 13.75 10.3547V1.91716C13.75 1.8127 13.7209 1.71031 13.666 1.62145C13.6111 1.53259 13.5325 1.46078 13.4391 1.41406Z" fill="url(#paint0_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="7" y1="0.382385" x2="7" y2="14.2922" gradientUnits="userSpaceOnUse">
<stop stop-color="#51B9DA"/>
<stop offset="1" stop-color="#4E8394"/>
</linearGradient>
</defs>
</svg>
<svg width="52" height="53" viewBox="0 0 52 53" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path d="M36 10.1416H16C15.4697 10.142 14.9612 10.3528 14.5862 10.7278C14.2112 11.1028 14.0004 11.6113 14 12.1416V32.1416C14.0004 32.6719 14.2112 33.1804 14.5862 33.5554C14.9612 33.9304 15.4697 34.1412 16 34.1416H29.5859C29.8486 34.1421 30.1088 34.0906 30.3515 33.99C30.5942 33.8894 30.8146 33.7418 31 33.5557L37.4141 27.1416C37.6002 26.9562 37.7478 26.7358 37.8484 26.4931C37.949 26.2505 38.0005 25.9902 38 25.7275V12.1416C37.9996 11.6113 37.7888 11.1028 37.4138 10.7278C37.0388 10.3528 36.5303 10.142 36 10.1416ZM22 17.1416H30C30.2652 17.1416 30.5196 17.247 30.7071 17.4345C30.8946 17.622 31 17.8764 31 18.1416C31 18.4068 30.8946 18.6612 30.7071 18.8487C30.5196 19.0362 30.2652 19.1416 30 19.1416H22C21.7348 19.1416 21.4804 19.0362 21.2929 18.8487C21.1054 18.6612 21 18.4068 21 18.1416C21 17.8764 21.1054 17.622 21.2929 17.4345C21.4804 17.247 21.7348 17.1416 22 17.1416ZM26 27.1416H22C21.7348 27.1416 21.4804 27.0362 21.2929 26.8487C21.1054 26.6612 21 26.4068 21 26.1416C21 25.8764 21.1054 25.622 21.2929 25.4345C21.4804 25.247 21.7348 25.1416 22 25.1416H26C26.2652 25.1416 26.5196 25.247 26.7071 25.4345C26.8946 25.622 27 25.8764 27 26.1416C27 26.4068 26.8946 26.6612 26.7071 26.8487C26.5196 27.0362 26.2652 27.1416 26 27.1416ZM22 23.1416C21.7348 23.1416 21.4804 23.0362 21.2929 22.8487C21.1054 22.6612 21 22.4068 21 22.1416C21 21.8764 21.1054 21.622 21.2929 21.4345C21.4804 21.247 21.7348 21.1416 22 21.1416H30C30.2652 21.1416 30.5196 21.247 30.7071 21.4345C30.8946 21.622 31 21.8764 31 22.1416C31 22.4068 30.8946 22.6612 30.7071 22.8487C30.5196 23.0362 30.2652 23.1416 30 23.1416H22ZM30 31.7275V26.1396H35.5879L30 31.7275Z" fill="url(#paint0_linear)"/>
</g>
<defs>
<filter id="filter0_d" x="0" y="0.141602" width="52" height="52" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="7"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.745833 0 0 0 0 0.58788 0 0 0 0 0.32941 0 0 0 0.36 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<linearGradient id="paint0_linear" x1="28" y1="27.5" x2="38" y2="-3" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFDF6D"/>
<stop offset="1" stop-color="#AA7C38"/>
</linearGradient>
</defs>
</svg>
<svg width="76" height="80" viewBox="0 0 76 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path d="M48.6987 26.2844L41.7072 19.2928C41.6971 19.2828 41.6863 19.274 41.6759 19.2645C41.6624 19.2521 41.6493 19.2393 41.6351 19.2277C41.6257 19.22 41.6157 19.2133 41.606 19.2059C41.5897 19.1934 41.5735 19.1807 41.5564 19.1691C41.5486 19.1639 41.5404 19.1596 41.5326 19.1547C41.5128 19.1422 41.4929 19.1297 41.4722 19.1185C41.4665 19.1155 41.4607 19.1132 41.4551 19.1104C41.4316 19.0983 41.4079 19.0867 41.3835 19.0765C41.3797 19.0749 41.3757 19.0737 41.3718 19.0722C41.3455 19.0616 41.3188 19.0518 41.2915 19.0435C41.2875 19.0422 41.2834 19.0415 41.2795 19.0403C41.2524 19.0325 41.225 19.0252 41.1969 19.0196C41.188 19.0178 41.1788 19.017 41.1698 19.0155C41.1466 19.0115 41.1235 19.0074 41.0999 19.0051C41.0667 19.0017 41.0334 19 41 19H28.999C28.4688 19.0006 27.9604 19.2115 27.5855 19.5865C27.2105 19.9614 26.9996 20.4698 26.999 21V43C26.9996 43.5302 27.2105 44.0386 27.5855 44.4135C27.9604 44.7885 28.4688 44.9994 28.999 45H47C47.5302 44.9994 48.0386 44.7885 48.4135 44.4135C48.7885 44.0386 48.9994 43.5302 49 43V27.0193C49.0001 27.0128 49.001 27.0065 49.001 27C49.0011 26.8665 48.9744 26.7344 48.9224 26.6115C48.8705 26.4886 48.7944 26.3773 48.6987 26.2844ZM42.6812 39.682C42.4937 39.8695 42.2393 39.9749 41.9741 39.9749C41.7089 39.9749 41.4546 39.8695 41.267 39.682L39.8939 38.3089C38.9581 38.896 37.8389 39.118 36.7498 38.9322C35.6608 38.7465 34.6784 38.1661 33.9901 37.302C33.3019 36.4379 32.956 35.3505 33.0187 34.2475C33.0813 33.1446 33.548 32.1033 34.3296 31.3226C35.1113 30.542 36.1531 30.0765 37.2561 30.0153C38.3592 29.954 39.4461 30.3012 40.3094 30.9905C41.1727 31.6798 41.7518 32.663 41.9362 33.7522C42.1206 34.8415 41.8973 35.9604 41.309 36.8955L42.6812 38.2677C42.7741 38.3606 42.8477 38.4708 42.898 38.5921C42.9483 38.7135 42.9741 38.8435 42.9741 38.9749C42.9741 39.1062 42.9483 39.2362 42.898 39.3576C42.8477 39.4789 42.7741 39.5891 42.6812 39.682ZM41 27V21.4142L46.5857 27H41Z" fill="url(#paint0_linear)"/>
</g>
<path d="M37.499 32.0012C36.9211 32.0017 36.3613 32.2025 35.9148 32.5694C35.4684 32.9363 35.163 33.4467 35.0506 34.0136C34.9382 34.5804 35.0259 35.1687 35.2986 35.6782C35.5713 36.1877 36.0123 36.5868 36.5463 36.8077C37.0803 37.0285 37.6744 37.0574 38.2273 36.8894C38.7802 36.7214 39.2578 36.3668 39.5786 35.8862C39.8995 35.4055 40.0438 34.8285 39.9869 34.2535C39.93 33.6784 39.6755 33.1408 39.2668 32.7323C39.0348 32.5 38.7592 32.3158 38.4558 32.1904C38.1525 32.0649 37.8273 32.0006 37.499 32.0012Z" fill="url(#paint1_linear)"/>
<defs>
<filter id="filter0_d" x="-0.000976562" y="0" width="76.002" height="80" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="8"/>
<feGaussianBlur stdDeviation="13.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.34902 0 0 0 0 0.882353 0 0 0 0 0.803922 0 0 0 0.36 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<linearGradient id="paint0_linear" x1="38" y1="19" x2="38" y2="45" gradientUnits="userSpaceOnUse">
<stop stop-color="#ADF0FF"/>
<stop offset="1" stop-color="#48DDC2"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="37.501" y1="32.0012" x2="37.501" y2="36.9973" gradientUnits="userSpaceOnUse">
<stop stop-color="#ADF0FF"/>
<stop offset="1" stop-color="#48DDC2"/>
</linearGradient>
</defs>
</svg>
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -20,11 +20,8 @@ function loaderPage(stat) {
};
$("#sidebar").hide()
maps = L.tileLayer('https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&s=Gal&apistyle=s.t:0|s.e:l|p.v:off', {
maxZoom: 22,
minZoom: 4,
}).addTo(map);
//https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&s=Gal&apistyle=s.t:0|s.e:l|p.v:off
maps = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { id: 'mapbox/light-v9', tileSize: 512, zoomOffset: -1 }).addTo(map);
OpenStreetMap.onclick = function() {
maps = L.tileLayer("https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&s=Gal&apistyle=s.t:0|s.e:l|p.v:off", {
......@@ -35,7 +32,7 @@ OpenStreetMap.onclick = function() {
WorldImagery.onclick = function() {
// https://{s}.tiles.wmflabs.org/osm-no-labels/{z}/{x}/{y}.png
maps = L.tileLayer("https://{s}.tiles.wmflabs.org/osm-no-labels/{z}/{x}/{y}.png", {
maps = L.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", {
maxZoom: 22,
minZoom: 3,
}).addTo(map);
......
......@@ -107,88 +107,88 @@ $("#button_unhide_panel").click(function() {
})
// $("#manage_perbaikan").click(function() {
// $(".pace-done").toggleClass("sidebar-move");
// $("#panel-samping").toggleClass("move");
// $(".mymodal").toggleClass("input_perbaikan");
// $("#button_unhide_panel").toggleClass("move-btn");
// $("#perbaikan-dashboard").toggleClass("perbaikan-dashboard");
// var content_perbaikan = `
// <div id="panel-samping-child" class="sidebar-2" style="background: #1B1F2D;position: absolute;z-index: 9;width: 23%;height:100vh;left: -30%;transition: all 0.5s ease;">
// <div style="margin-left: 50px;background: #1B1F2D;">
// <div class="header" style="margin-top: 25px;background: #2F3445;">
// <h6 class="panel-title" style="color: #ffff;margin-left: 20px;font-size: 12pt;">Laporan Perbaikan<a class="heading-elements-toggle"><i class="icon-more"></i></a></h6>
// </div>
// <div class="bod" style="margin-top: 10px;margin-left:6px;">
// <div style="color: white;">
// <span>Filter:</span>
// </div>
// <div class="form-group" style="margin-top: 15px;width: 250px;">
// <select name="select" id="sel-kec" class="form-control input-sm" style="background-color: #393E54;border-radius: 8px;border-color: #393E54;color: white;">
// <option value="opt1">Pilih Kecamatan</option>
// <option value="opt1">Pilih Kecamatan</option>
// <option value="opt1">Pilih Kecamatan</option>
// {% for nama_kecamatan in kec_res %}
// {% endfor %}
// </select>
// </div>
// <div class="form-group" style="margin-top: 15px;width: 250px;">
// <select name="select" id="sel-desa" class="form-control input-sm" style="background-color: #393E54;border-radius: 8px;border-color: #393E54;color: white;">
// <option value="opt1">Pilih Desa</option>
// </select>
// </div>
// </div>
// </div>
// </div>
// <div class="panel panel-flat" id="perbaikan-dashboard" style="background: #181B27;position: absolute;z-index: 9;width: 77%;height:100vh;left: 23%;transition: all 0.5s ease;color: white; border: none;">
// <div class="panel-heading" style="background-color:#181B27;border-bottom: 0.5pt solid #313649;">
// <h6 class="panel-title">Table Data Perbaikan</h6>
// </div>
// <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>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 id="loop-perbaikan">
// {% for all in res_all %}
// <tr>
// <td>{{forloop.counter}}</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 class="mdlFire" onclick="loadjlbyid('{{all.id_object}}')" data-toggle="modal" data-target="#modal_detail">Detail</a>
// </td>
// </tr>
// {% endfor %}
// </tbody>
// </table>
// </div>
// </div>`;
// $("#panel-samping").html(content_perbaikan)
// })
$("#manage_perbaikan").click(function() {
$(".pace-done").toggleClass("sidebar-move");
$("#panel-samping").toggleClass("move");
$(".mymodal").toggleClass("input_perbaikan");
$("#button_unhide_panel").toggleClass("move-btn");
$("#perbaikan-dashboard").toggleClass("perbaikan-dashboard");
// var content_perbaikan = `
// <div id="panel-samping-child" class="sidebar-2" style="background: #1B1F2D;position: absolute;z-index: 9;width: 23%;height:100vh;left: -30%;transition: all 0.5s ease;">
// <div style="margin-left: 50px;background: #1B1F2D;">
// <div class="header" style="margin-top: 25px;background: #2F3445;">
// <h6 class="panel-title" style="color: #ffff;margin-left: 20px;font-size: 12pt;">Laporan Perbaikan<a class="heading-elements-toggle"><i class="icon-more"></i></a></h6>
// </div>
// <div class="bod" style="margin-top: 10px;margin-left:6px;">
// <div style="color: white;">
// <span>Filter:</span>
// </div>
// <div class="form-group" style="margin-top: 15px;width: 250px;">
// <select name="select" id="sel-kec" class="form-control input-sm" style="background-color: #393E54;border-radius: 8px;border-color: #393E54;color: white;">
// <option value="opt1">Pilih Kecamatan</option>
// <option value="opt1">Pilih Kecamatan</option>
// <option value="opt1">Pilih Kecamatan</option>
// {% for nama_kecamatan in kec_res %}
// {% endfor %}
// </select>
// </div>
// <div class="form-group" style="margin-top: 15px;width: 250px;">
// <select name="select" id="sel-desa" class="form-control input-sm" style="background-color: #393E54;border-radius: 8px;border-color: #393E54;color: white;">
// <option value="opt1">Pilih Desa</option>
// </select>
// </div>
// </div>
// </div>
// </div>
// <div class="panel panel-flat" id="perbaikan-dashboard" style="background: #181B27;position: absolute;z-index: 9;width: 77%;height:100vh;left: 23%;transition: all 0.5s ease;color: white; border: none;">
// <div class="panel-heading" style="background-color:#181B27;border-bottom: 0.5pt solid #313649;">
// <h6 class="panel-title">Table Data Perbaikan</h6>
// </div>
// <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>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 id="loop-perbaikan">
// {% for all in res_all %}
// <tr>
// <td>{{forloop.counter}}</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 class="mdlFire" onclick="loadjlbyid('{{all.id_object}}')" data-toggle="modal" data-target="#modal_detail">Detail</a>
// </td>
// </tr>
// {% endfor %}
// </tbody>
// </table>
// </div>
// </div>`;
// $("#panel-samping").html(content_perbaikan)
})
function sizeLayerControl() {
......
......@@ -28,8 +28,7 @@
height: 450px!important;
width: 500px!important;
}
.legendapo {
/*.legendapo {
background: #ffffffa6;
position: fixed;
left: 20px;
......@@ -37,7 +36,7 @@
bottom: 0;
height: 170px;
z-index: 999;
}
}*/
.marker-cluster-adm {
margin-left: -20px;
......
......@@ -4482,59 +4482,6 @@
});
function gas_all() {
var checkBox = document.getElementById("po_all");
if (checkBox.checked == true) {
document.getElementById("knt_adm").checked = true;
document.getElementById("lyn_kes").checked = true;
document.getElementById("pus").checked = true;
document.getElementById("rusak").checked = true;
document.getElementById("ibdh").checked = true;
document.getElementById("dididik").checked = true;
document.getElementById("pom_bengsin").checked = true;
document.getElementById("tasiun").checked = true;
document.getElementById("caheum").checked = true;
document.getElementById("cabud").checked = true;
document.getElementById("gardu").checked = true;
k_adm()
l_kes()
pks()
rs()
fiksi()
didik()
pom_mini()
sthall()
temanggung()
cb100()
gl100()
valket()
} else if (checkBox.checked == false) {
document.getElementById("knt_adm").checked = false;
document.getElementById("lyn_kes").checked = false;
document.getElementById("pus").checked = false;
document.getElementById("rusak").checked = false;
document.getElementById("ibdh").checked = false;
document.getElementById("dididik").checked = false;
document.getElementById("pom_bengsin").checked = false;
document.getElementById("tasiun").checked = false;
document.getElementById("caheum").checked = false;
document.getElementById("cabud").checked = false;
document.getElementById("gardu").checked = false;
k_adm()
l_kes()
pks()
rs()
fiksi()
didik()
pom_mini()
sthall()
temanggung()
cb100()
gl100()
valket()
}
}
function showpanel(content) {
......@@ -4748,7 +4695,7 @@
maxheight = [];
minheight = [];
for(var x = 0; x < (poll.length/2); x++){
for (var x = 0; x < (poll.length / 2); x++) {
max = data["tinggi_pol"][i];
maxheight.push(max);
min = 0;
......@@ -4762,7 +4709,9 @@
maximumHeights: maxheight,
minimumHeights: minheight,
// height: 0,
material: new Cesium.ImageMaterialProperty({image:"static/image/bangunan/3d/"+data["tampak_depan_pol"][i]+""}),
material: new Cesium.ImageMaterialProperty({
image: "static/image/bangunan/3d/" + data["tampak_depan_pol"][i] + ""
}),
// closeTop: false,
// maximumHeights : data["tinggi_pol"][i],
// minimumHeights : 0,
......@@ -4779,10 +4728,12 @@
poll
),
// material: materialatas,
material: new Cesium.ImageMaterialProperty({image:"static/image/bangunan/3d/"+data["tampak_atas_pol"][i]+""}),
material: new Cesium.ImageMaterialProperty({
image: "static/image/bangunan/3d/" + data["tampak_atas_pol"][i] + ""
}),
outline: true,
height: data["tinggi_pol"][i],
fill : true,
fill: true,
outlineColor: Cesium.Color.GREEN,
},
name: data["info_polygon"][i]
......@@ -4835,7 +4786,7 @@
} else if (rema == 'Lembaga Pemasyarakatan') {
var color = Cesium.Color.DARKCYAN;
var gmbcok = "3d_jail.svg"
} else{
} else {
var color = Cesium.Color.GAINSBORO;
var gmbcok = "3d_kadm.svg"
}
......@@ -4855,7 +4806,7 @@
position: Cesium.Cartesian3.fromDegrees(long[i], lati[i], 100),
billboard: {
// icon: facilityUrl,
image: `static/img/icon/`+gmbcok+``,
image: `static/img/icon/` + gmbcok + ``,
// image: `static/img/icon/3d_police.svg`,
show: true, // default
scale: 2.0, // default: 1.0
......@@ -4891,7 +4842,7 @@
} else {
var path_img = `"static/image/bangunan/` + data['administrasi']['f9'] + `"`
}
content_tampak=`
content_tampak = `
<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;">
......@@ -4910,23 +4861,23 @@
<input type="text" class="hidden" name="coordinatebangunan" id="coordinatebangunantampak" value="">
</p>
<p>
<input type="text" name="idbangunan" id="idbangunantampak" class="form-control hidden" value="`+ data['properties']['f1'] +`" disable>
<input type="text" name="idbangunan" id="idbangunantampak" class="form-control hidden" value="` + data['properties']['f1'] + `" disable>
</p>
<p>
<input type="text" name="namebangunan" id="namebangunantampak" class="form-control" value="`+ data['properties']['f2'] +`">
<input type="text" name="namebangunan" id="namebangunantampak" class="form-control" value="` + data['properties']['f2'] + `">
</p>
<p>
<input type="text" name="infobangunan" id="infobangunantampak" class="form-control" value="`+ data['administrasi']['f12'] +`">
<input type="text" name="infobangunan" id="infobangunantampak" class="form-control" value="` + data['administrasi']['f12'] + `">
</p>
<p>
<span>Gambar Tampak Atas</span>
<input type="file" id="imgbangunanatas" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif">
<input style="display:none;" id="gambaratas" type="text" class="form-control" value="`+ data['administrasi']['f14'] +`"required>
<input style="display:none;" id="gambaratas" type="text" class="form-control" value="` + data['administrasi']['f14'] + `"required>
</p>
<p>
<span>Gambar Tampak Depan</span>
<input type="file" id="imgbangunandepan" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif">
<input style="display:none;" id="gambardepan" type="text" class="form-control" value="`+ data['administrasi']['f15'] +`"required>
<input style="display:none;" id="gambardepan" type="text" class="form-control" value="` + data['administrasi']['f15'] + `"required>
</p>
</div>
</div>
......@@ -5265,9 +5216,9 @@
// <option value="gardu_listrik">Gardu Listrik</option>`
// }
var history
if (feature.administrasi.f11 == 'kantor_administrasi' || feature.administrasi.f11 == 'layanan_kesehatan' || feature.administrasi.f11 == 'puskesmas'
|| feature.administrasi.f11 == 'rumah_sakit' || feature.administrasi.f11 == 'sarana_pendidikan' || feature.administrasi.f11 == 'stasiun'
|| feature.administrasi.f11 == 'terminal_bus' || feature.administrasi.f11 == 'cagar_budaya' || feature.administrasi.f11 == 'gardu_listrik'){
if (feature.administrasi.f11 == 'kantor_administrasi' || feature.administrasi.f11 == 'layanan_kesehatan' || feature.administrasi.f11 == 'puskesmas' ||
feature.administrasi.f11 == 'rumah_sakit' || feature.administrasi.f11 == 'sarana_pendidikan' || feature.administrasi.f11 == 'stasiun' ||
feature.administrasi.f11 == 'terminal_bus' || feature.administrasi.f11 == 'cagar_budaya' || feature.administrasi.f11 == 'gardu_listrik') {
if (feature.properties.f4 != null) {
var list_history = feature.properties.f4
var list_history_panel = ``
......@@ -5334,7 +5285,7 @@
</div>
</div>
<div class="col-md-4">
<input type="text" class="hidden" name="coordinatebangunan" id="coordinatebangunan" value="`+feature.geometry+`">
<input type="text" class="hidden" name="coordinatebangunan" id="coordinatebangunan" value="` + feature.geometry + `">
<table>
<tr style="margin-top: 10px">
<th>
......@@ -5342,28 +5293,28 @@
</th>
<td>
<input type="file" id="imgbangunan" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif">
<input style="display:none;" id="gambar" type="text" class="form-control" value="`+feature.administrasi.f9+`"required>
<input style="display:none;" id="gambar" type="text" class="form-control" value="` + feature.administrasi.f9 + `"required>
</td>
</tr>
<tr>
<td>
<input type="text" name="idbangunan" id="idbangunan" class="form-control hidden" value="`+feature.properties.f1+`" disable>
<input type="text" name="idbangunan" id="idbangunan" class="form-control hidden" value="` + feature.properties.f1 + `" disable>
<input style="display:none;" id="coordinateZoneeditbang" type="text" class="form-control" value=""required>
</td>
</tr>
<tr>
<th>Nama Bangunan</th>
<td>
<input type="text" name="namebangunan" id="namebangunan" class="form-control" value="`+feature.properties.f2+`">
<input type="text" name="namebangunan" id="namebangunan" class="form-control" value="` + feature.properties.f2 + `">
</td>
</tr>
<tr>
<th>Jenis Bangunan</th>
<td>
<input type="text" class="hidden" name="tipe1" id="tipe111" value="`+feature.administrasi.f11+`">
<input type="text" class="hidden" name="tipe1" id="tipe222" value="`+feature.administrasi.f12+`">
<input type="text" class="hidden" name="tipe1" id="tipe333" value="`+feature.administrasi.f13+`">
<input type="text" class="hidden" name="tipe1" id="tipe444" value="`+feature.administrasi.f14+`">
<input type="text" class="hidden" name="tipe1" id="tipe111" value="` + feature.administrasi.f11 + `">
<input type="text" class="hidden" name="tipe1" id="tipe222" value="` + feature.administrasi.f12 + `">
<input type="text" class="hidden" name="tipe1" id="tipe333" value="` + feature.administrasi.f13 + `">
<input type="text" class="hidden" name="tipe1" id="tipe444" value="` + feature.administrasi.f14 + `">
<select style="border-bottom: 1px solid rgb(83, 83, 83) !important;width: 220px;" id="tipe_point_b_e" data-placeholder="select point.." class="select-size-md">
<option value="null" selected disabled>-- Pilih Jenis Point --</option>
<option value="bangunan">Bangunan Biasa</option>
......@@ -5397,31 +5348,31 @@
<tr>
<th>Informasi Bangunan</th>
<td>
<input type="text" name="infobangunan" id="infobangunan" class="form-control" value="`+feature.properties.f3+`">
<input type="text" name="infobangunan" id="infobangunan" class="form-control" value="` + feature.properties.f3 + `">
</td>
</tr>
<tr>
<th>Kelurahan</th>
<td>
<input type=" text " name="nmkelurahan " id="nmkelurahan" class="form-control " value="`+feature.administrasi.f1+`">
<input type=" text " name="nmkelurahan " id="nmkelurahan" class="form-control " value="` + feature.administrasi.f1 + `">
</td>
</tr>
<tr>
<th>Kecamatan</th>
<td>
<input type="text " name="nmkecamatan " id="nmkecamatan" class="form-control " value="`+feature.administrasi.f2+`">
<input type="text " name="nmkecamatan " id="nmkecamatan" class="form-control " value="` + feature.administrasi.f2 + `">
</td>
</tr>
<tr>
<th>Kab/Kota</th>
<td>
<input type="text " name="nmkabkota " id="nmkabkota" class="form-control " value="`+feature.administrasi.f3+`">
<input type="text " name="nmkabkota " id="nmkabkota" class="form-control " value="` + feature.administrasi.f3 + `">
</td>
</tr>
<tr>
<th>Provinsi</th>
<td>
<input type="text " name="nmprovinsi " id="nmprovinsi" class="form-control " value="`+feature.administrasi.f4+`">
<input type="text " name="nmprovinsi " id="nmprovinsi" class="form-control " value="` + feature.administrasi.f4 + `">
</td>
</tr>
......@@ -5434,25 +5385,25 @@
<tr>
<th>Luas Bangunan</th>
<td>
<input type="text " name="luasbangunan " id="luasbangunan" class="form-control " value="`+feature.administrasi.f6+`">
<input type="text " name="luasbangunan " id="luasbangunan" class="form-control " value="` + feature.administrasi.f6 + `">
</td>
</tr>
<tr>
<th>Luas Tanah</th>
<td>
<input type="text " name="luastanah " id="luastanah" class="form-control " value="`+feature.administrasi.f7+`">
<input type="text " name="luastanah " id="luastanah" class="form-control " value="` + feature.administrasi.f7 + `">
</td>
</tr>
<tr>
<th>Tinggi Bangunan</th>
<td>
<input type="text " name="tinggibangunan " id="tinggibangunan" class="form-control " value="`+feature.administrasi.f8+`">
<input type="text " name="tinggibangunan " id="tinggibangunan" class="form-control " value="` + feature.administrasi.f8 + `">
</td>
</tr>
<tr>
<th>Pemilik</th>
<td>
<input type="text " name="pemilik " id="pemilik" class="form-control " value="`+feature.administrasi.f10+`">
<input type="text " name="pemilik " id="pemilik" class="form-control " value="` + feature.administrasi.f10 + `">
</td>
</tr>
</table>
......@@ -5466,7 +5417,7 @@
</div>
</div>
</div>`;
content_delete=`
content_delete = `
<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;">
......@@ -5482,9 +5433,9 @@
<div class="form-group">
<div class="col-lg-12" style="margin-top:10px;margin-bottom:10px;">
<input type="text" class="hidden" name="coordinatebangunan" id="coordinatebangunanhps" value="">
<input type="text" name="idbangunan" id="idbangunanhps" class="form-control hidden" value="`+feature.properties.f1+`" disable>
<input type="text" name="namebangunan" id="namebangunanhps" class="form-control" value="`+feature.properties.f2+`">
<input type="text" name="infobangunan" id="infobangunanhps" class="form-control" value="`+feature.properties.f3+`">
<input type="text" name="idbangunan" id="idbangunanhps" class="form-control hidden" value="` + feature.properties.f1 + `" disable>
<input type="text" name="namebangunan" id="namebangunanhps" class="form-control" value="` + feature.properties.f2 + `">
<input type="text" name="infobangunan" id="infobangunanhps" class="form-control" value="` + feature.properties.f3 + `">
</div>
</div>
</div>
......@@ -5667,7 +5618,7 @@
</tr>
</div>
<div class="container">
`+history+`
` + history + `
</div>
</tbody>
</table>`;
......@@ -5823,7 +5774,7 @@
loaderPage(true);
var tipe1 = $('#tipe111').val();
$('#tipe_point_b_e option[value='+tipe1+']').attr('selected','selected');
$('#tipe_point_b_e option[value=' + tipe1 + ']').attr('selected', 'selected');
$("#tipe_point_b_e").change(function() {
$('#tipe_point_2_b_e').empty();
......@@ -5858,8 +5809,8 @@
var tipe2 = $('#tipe222').val();
if (tipe2 == 'null') {
$('#tipe_point_2_b_e').html(`<option value="null" selected disabled>-- Pilih Tipe Point --</option>`);
} else{
$('#tipe_point_2_b_e').html(`<option value="`+tipe2+`" selected>`+tipe2+`</option>`);
} else {
$('#tipe_point_2_b_e').html(`<option value="` + tipe2 + `" selected>` + tipe2 + `</option>`);
}
$("#tipe_point_2_b_e").change(function() {
......@@ -5882,7 +5833,7 @@
var data_po = data['result'][i][1];
console.log(data_id)
console.log(data_po)
var data_kab = `<option value="` +data_id + `">` + data_po + `</option>`;
var data_kab = `<option value="` + data_id + `">` + data_po + `</option>`;
data_all_kab.push(data_kab)
};
$('#tipe_point_3_b_e').html(`<option value="null" selected disabled>-- Pilih Point --</option>` + data_all_kab);
......@@ -5895,8 +5846,8 @@
if (tipe3 == 'null') {
$('#tipe_point_3_b_e').html(`<option value="null" selected disabled>-- Pilih Point --</option>`);
} else{
$('#tipe_point_3_b_e').html(`<option value="`+tipe3+`" selected>`+tipe4+`</option>`);
} else {
$('#tipe_point_3_b_e').html(`<option value="` + tipe3 + `" selected>` + tipe4 + `</option>`);
}
$.ajax({
......
......@@ -192,6 +192,9 @@
</style>
{% endif %}{% endfor %}
<script>
//document.getElementsByClassName("apexcharts-menu-icon").innerHTML = "<i></i><span>&nbsp;&nbsp Download</span>";
function panel_samp() {
$("#panel-samping").addClass("move");
$("#button_unhide_panel").addClass("move-btn");
......@@ -231,6 +234,7 @@
onEachFeature: function(feature, layer) {
layer.on({
click: function(e) {
$('#modal_detail_kelurahan').modal('show');
if (feature.administrasi.f9 == 'NONE') {
var path_img = "static/img/image_null.jpg"
......@@ -238,340 +242,436 @@
var path_img = `"static/image/kelurahan/` + feature.administrasi.f9 + `"`
}
$(".nama_kelurahan").html(feature.administrasi.f2 + ` , ` + feature.administrasi.f3 + `, ` + feature.administrasi.f4)
content = `
<a href="#" data-target="#modal_detail_kel" id="btn_detail_kelurahan" data-toggle="modal" data-target="#modal-edit-tuplah" data-backdrop="static" data-keyboard="false" style="right: 10px;position: absolute;margin-top: 375px;">Detail</a>
<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"> </th>
</tr>
</thead>
<tbody>
<tr style="height: 100px;">
<th>
<div>
<h1 style="font-family: Google Sans,Roboto,Arial,sans-serif;
letter-spacing: 0;
font-weight: 400;">
<span style="font-size: x-large;
font-family: ui-serif;">
` + feature.administrasi.f2 + ` , ` + feature.administrasi.f3 + `, ` + feature.administrasi.f4 + `
</span>
$(".kode_kelurahan").html(feature.administrasi.f1)
$(".jumlah_penduduk_kelurahan").html(feature.administrasi.f6)
$(".luas_wilayah_kelurahan").html(feature.administrasi.f10)
$(".jumlah_kk_kelurahan").html(feature.administrasi.f7)
$(".tombol-edit").html(`<a href="/editkelurahan?kode_dagri=` + encodeURIComponent(feature.administrasi.f1) + `" class='btn'>Edit</a>`)
</h1>
</div>
</th>
</tr>
<tr>
<th>
<label class="text-semibold" style="margin-left:10px">Informasi Umum</label>
<div>
<table>
<tr>
<th>Kode Desa</th>
<td>:&nbsp` + feature.administrasi.f1 + `</td>
</tr>
<tr>
<th>Luas Wilayah</th>
<td>:&nbsp` + feature.administrasi.f8 + `</td>
</tr>
<tr>
<th>Jumlah Penduduk</th>
<td>:&nbsp` + feature.administrasi.f6 + `</td>
</tr>
<tr>
<th>Jumlah KK</th>
<td>:&nbsp` + feature.administrasi.f7 + `</td>
</tr>
</table>
<p class="text-center" style="margin-top: 25px;">
<input class="hidden" id="kode_desa_dagri" value="` + feature.administrasi.f1 + `"></input>
<a href="/editkelurahan?kode_dagri=` + encodeURIComponent(feature.administrasi.f1) + `" class='btn
btn-default' id="btn_edit_kelurahan" style="margin-left:128px;">Edit</a>
</p>
</div>
</th>
</tr>
<tr>
<th>
<label class="text-semibold" style="margin-left:10px">Informasi Penduduk
</label>
<div>
<table>
<tr>
<th>Jumlah Laki-laki</th>
<td>:&nbsp` + feature.penduduk.f1 + `</td>
</tr>
<tr>
<th>Jumlah Perempuan</th>
<td>:&nbsp` + feature.penduduk.f2 + `</td>
</tr>
<tr>
<th>Belum Kawin</th>
<td>:&nbsp` + feature.penduduk.f3 + `</td>
</tr>
<tr>
<th>Kawin</th>
<td>:&nbsp` + feature.penduduk.f4 + `</td>
</tr>
<tr>
<th>cerai hidup</th>
<td>:&nbsp` + feature.penduduk.f5 + `</td>
</tr>
<tr>
<th>cerai mati</th>
<td>:&nbsp` + feature.penduduk.f6 + `</td>
</tr>
<tr>
<th>wajib KTP</th>
<td>:&nbsp` + feature.penduduk.f7 + `</td>
</tr>
<tr>
<th>Islam</th>
<td>:&nbsp` + feature.penduduk.f8 + `</td>
</tr>
<tr>
<th>Kristen</th>
<td>:&nbsp` + feature.penduduk.f9 + `</td>
</tr>
<tr>
<th>Katolik</th>
<td>:&nbsp` + feature.penduduk.f10 + `</td>
</tr>
<tr>
<th>Hindu</th>
<td>:&nbsp` + feature.penduduk.f11 + `</td>
</tr>
<tr>
<th>Budha</th>
<td>:&nbsp` + feature.penduduk.f12 + `</td>
</tr>
<tr>
<th>Konghucu</th>
<td>:&nbsp` + feature.penduduk.f13 + `</td>
</tr>
<tr>
<th>Kepercayaan Lain</th>
<td>:&nbsp` + feature.penduduk.f14 + `</td>
</tr>
</table>
var nama_data_penduduk = ['pria', 'wanita', 'belum_kawin', 'kawin', 'cerai_hidup', 'cerai_mati', 'wajib_ktp'];
var dataset_penduduk = [feature.penduduk.f1, feature.penduduk.f2, feature.penduduk.f3, feature.penduduk.f4, feature.penduduk.f5, feature.penduduk.f6, feature.penduduk.f7];
</div>
</th>
</tr>
<tr>
<th>
<label class="text-semibold" style="margin-left:10px">Informasi Pendidikan</label>
<div>
<table>
<tr>
<th>Tidak Sekolah</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f1 + `</td>
</tr>
<tr>
<th>Belum Tamat</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f2 + `</td>
</tr>
<tr>
<th>Tamat SD</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f3 + `</td>
</tr>
<tr>
<th>SLTP</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f4 + `</td>
</tr>
<tr>
<th>SLTA</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f5 + `</td>
</tr>
<tr>
<th>Diploma I</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f6 + `</td>
</tr>
<tr>
<th>Diploma II</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f7 + `</td>
</tr>
<tr>
<th>Diploma IV/Strata I</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f8 + `</td>
</tr>
<tr>
<th>Strata II</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f9 + `</td>
</tr>
<tr>
<th>Strata III</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f10 + `</td>
</tr>
var nama_data_agama = ['islam', 'kristen', 'khatolik', 'hindu', 'budha', 'konghucu', 'kepercayaan_lain', ]
var dataset_agama = [feature.penduduk.f8, feature.penduduk.f9, feature.penduduk.f10, feature.penduduk.f11, feature.penduduk.f12, feature.penduduk.f13, feature.penduduk.f14]
</table>
</div>
</th>
</tr>
<tr>
<th>
<label class="text-semibold" style="margin-left:10px">Informasi Pekerjaan</label>
<div>
<table>
<tr>
<th>Tidak Bekerja</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f11 + `</td>
</tr>
<tr>
<th>Aparatur Pemerintah</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f12 + `</td>
</tr>
<tr>
<th>Tenaga Pendidik</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f13 + `</td>
</tr>
<tr>
<th>Wiraswasta</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f14 + `</td>
</tr>
<tr>
<th>Pertanian</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f15 + `</td>
</tr>
<tr>
<th>Tenaga Kesehatan</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f16 + `</td>
</tr>
<tr>
<th>Pensiunan</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f17 + `</td>
</tr>
<tr>
<th>Pegawai</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
</tr>
<tr>
<th>Tentara</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f19 + `</td>
</tr>
<tr>
<th>Kepolisian</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f20 + `</td>
</tr>
<tr>
<th>Pedagang</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f21 + `</td>
</tr>
<tr>
<th>Petani</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f22 + `</td>
</tr>
<tr>
<th>Peternak</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f23 + `</td>
</tr>
<tr>
<th>Nelayan</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f24 + `</td>
</tr>
<tr>
<th>Karyawan</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f25 + `</td>
</tr>
<tr>
<th>Buruh</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f26 + `</td>
</tr>
<tr>
<th>Pembantu</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f27 + `</td>
</tr>
<tr>
<th>Tukang</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f28 + `</td>
</tr>
<tr>
<th>Pendeta</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f29 + `</td>
</tr>
<tr>
<th>Pastor</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f30 + `</td>
</tr>
<tr>
<th>Ustadz</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f31 + `</td>
</tr>
<tr>
<th>Dosen</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f32 + `</td>
</tr>
<tr>
<th>Guru</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f33 + `</td>
</tr>
<tr>
<th>Pilot</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f34 + `</td>
</tr>
<tr>
<th>Pengacara</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f35 + `</td>
</tr>
<tr>
<th>Notaris</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f36 + `</td>
</tr>
<tr>
<th>Arsitek</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f37 + `</td>
</tr>
<tr>
<th>Akuntan</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f38 + `</td>
</tr>
<tr>
<th>Konsultan</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f39 + `</td>
</tr>
<tr>
<th>Dokter</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f40 + `</td>
</tr>
<tr>
<th>Bidan</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f41 + `</td>
</tr>
<tr>
<th>Perawat</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f42 + `</td>
</tr>
<tr>
<th>Psikiater</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f43 + `</td>
</tr>
<tr>
<th>Sopir</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f44 + `</td>
</tr>
<tr>
<th>Lainnya</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f45 + `</td>
</tr>
</table>
var nama_data_pendidik = ['tidak_sekolah', 'belum_tamat', 'tamat_sd', 'sltp', 'slta', 'diploma_i', 'diploma_ii', 'diploma_iv', 'strata_ii', 'strata_iii'];
var dataset_pendidik = [feature.pekerjaan_pendidikan.f1, feature.pekerjaan_pendidikan.f2, feature.pekerjaan_pendidikan.f3, feature.pekerjaan_pendidikan.f4, feature.pekerjaan_pendidikan.f5, feature.pekerjaan_pendidikan.f6, feature.pekerjaan_pendidikan.f7, feature.pekerjaan_pendidikan.f8, feature.pekerjaan_pendidikan.f9, feature.pekerjaan_pendidikan.f10];
var nama_data_umur = ['Umur 0-4', 'Umur 5-9', 'Umur 10-14', 'Umur 15-19', 'Umur 20-24', 'Umur 25-29', 'Umur 30-34', 'Umur 35-39', 'Umur 40-44', 'Umur 45-49', 'Umur 50-54', 'Umur 55-59', 'Umur 60-64', 'Umur 65-69', 'Umur 70-74', 'Umur > 75'];
var dataset_umur = [feature.penduduk.f16, feature.penduduk.f17, feature.penduduk.f18, feature.penduduk.f19, feature.penduduk.f20, feature.penduduk.f21, feature.penduduk.f22, feature.penduduk.f23, feature.penduduk.f24, feature.penduduk.f25, feature.penduduk.f26, feature.penduduk.f27, feature.penduduk.f28, feature.penduduk.f29, feature.penduduk.f30];
var nama_data_pekerja = ['tidak_bekerja', 'aparatur_pemerintah', 'tenaga_pendidik', 'wiraswasta', 'pertanian', 'tenaga_kesehatan', 'pegawai', 'dokter', 'bidan', 'perawat', 'lainnya'];
var dataset_pekerja = [feature.pekerjaan_pendidikan.f11, feature.pekerjaan_pendidikan.f12, feature.pekerjaan_pendidikan.f13, feature.pekerjaan_pendidikan.f14, feature.pekerjaan_pendidikan.f15, feature.pekerjaan_pendidikan.f16, feature.pekerjaan_pendidikan.f18, feature.pekerjaan_pendidikan.f40, feature.pekerjaan_pendidikan.f41, feature.pekerjaan_pendidikan.f42, feature.pekerjaan_pendidikan.f45];
var colorPalette = ['#00D8B6', '#008FFB', '#FEB019', '#FF4560', '#775DD0']
var options_penduduk = {
series: [{
name: 'Penduduk',
data: dataset_penduduk
}],
chart: {
type: 'bar',
height: 350,
toolbar: {
tools: {
download: '<div style="margin-left: 25px;"><i class=" icon-download4"></i><span>&nbsp;&nbsp; Download</span></div>',
}
}
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
endingShape: 'rounded'
},
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: nama_data_penduduk,
},
yaxis: {
title: {
text: 'Jumlah'
},
show: true
},
fill: {
type: 'gradient',
gradient: {
type: "vertical",
shadeIntensity: 1,
opacityFrom: 0.7,
opacityTo: 0.9,
colorStops: [{
offset: 0,
color: "#6BB8FF",
opacity: 1
}, {
offset: 20,
color: "#6BB8FF",
opacity: 1
}, {
offset: 60,
color: "#7282D8",
opacity: 1
}, {
offset: 100,
color: "#7282D8",
opacity: 1
}]
}
},
tooltip: {
y: {
formatter: function(val) {
var reverse = val.toString().split('').reverse().join(''),
ribuan = reverse.match(/\d{1,3}/g);
var ribuan = ribuan.join('.').split('').reverse().join('');
return ribuan
}
}
}
};
var options_agama = {
series: [{
name: 'Agama',
data: dataset_agama
}],
chart: {
type: 'bar',
height: 350,
toolbar: {
tools: {
download: '<div style="margin-left: 25px;"><i class=" icon-download4"></i><span>&nbsp;&nbsp; Download</span></div>',
}
}
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
endingShape: 'rounded'
},
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: nama_data_agama,
},
yaxis: {
title: {
text: 'Jumlah'
},
show: true
},
fill: {
type: 'gradient',
gradient: {
type: "vertical",
shadeIntensity: 1,
opacityFrom: 0.7,
opacityTo: 0.9,
colorStops: [{
offset: 0,
color: "#6BB8FF",
opacity: 1
}, {
offset: 20,
color: "#6BB8FF",
opacity: 1
}, {
offset: 60,
color: "#7282D8",
opacity: 1
}, {
offset: 100,
color: "#7282D8",
opacity: 1
}]
}
},
tooltip: {
y: {
formatter: function(val) {
var reverse = val.toString().split('').reverse().join(''),
ribuan = reverse.match(/\d{1,3}/g);
var ribuan = ribuan.join('.').split('').reverse().join('');
return ribuan
}
}
}
};
var options_pendidik = {
series: [{
name: 'Informasi Pendidikan',
data: dataset_pendidik
}],
chart: {
type: 'bar',
height: 350,
toolbar: {
tools: {
download: '<div style="margin-left: 25px;"><i class=" icon-download4"></i><span>&nbsp;&nbsp; Download</span></div>',
}
}
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
endingShape: 'rounded'
},
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: nama_data_pendidik,
},
yaxis: {
title: {
text: 'Jumlah'
},
show: true
},
fill: {
type: 'gradient',
gradient: {
type: "vertical",
shadeIntensity: 1,
opacityFrom: 0.7,
opacityTo: 0.9,
colorStops: [{
offset: 0,
color: "#6BB8FF",
opacity: 1
}, {
offset: 20,
color: "#6BB8FF",
opacity: 1
}, {
offset: 60,
color: "#7282D8",
opacity: 1
}, {
offset: 100,
color: "#7282D8",
opacity: 1
}]
}
},
tooltip: {
y: {
formatter: function(val) {
var reverse = val.toString().split('').reverse().join(''),
ribuan = reverse.match(/\d{1,3}/g);
var ribuan = ribuan.join('.').split('').reverse().join('');
return ribuan
}
}
}
};
var options_umur = {
series: [{
name: 'Umur',
data: dataset_umur
}],
chart: {
type: 'bar',
height: 350,
toolbar: {
tools: {
download: '<div style="margin-left: 25px;"><i class=" icon-download4"></i><span>&nbsp;&nbsp; Download</span></div>',
}
}
},
plotOptions: {
bar: {
horizontal: true,
columnWidth: '55%',
endingShape: 'rounded'
},
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: nama_data_umur,
},
yaxis: {
title: {
text: 'Jumlah'
},
show: true
},
fill: {
type: 'gradient',
gradient: {
type: "horizontal",
shadeIntensity: 1,
opacityFrom: 0.7,
opacityTo: 0.9,
colorStops: [{
offset: 0,
color: "#6BB8FF",
opacity: 1
}, {
offset: 20,
color: "#6BB8FF",
opacity: 1
}, {
offset: 60,
color: "#7282D8",
opacity: 1
}, {
offset: 100,
color: "#7282D8",
opacity: 1
}]
}
},
tooltip: {
y: {
formatter: function(val) {
var reverse = val.toString().split('').reverse().join(''),
ribuan = reverse.match(/\d{1,3}/g);
var ribuan = ribuan.join('.').split('').reverse().join('');
return ribuan
}
}
}
};
var options_pekerja = {
series: [{
name: 'Informasi Pekerjaan',
data: dataset_pekerja
}],
chart: {
type: 'bar',
height: 350,
toolbar: {
tools: {
download: '<div style="margin-left: 25px;"><i class=" icon-download4"></i><span>&nbsp;&nbsp; Download</span></div>',
}
}
},
plotOptions: {
bar: {
borderRadius: 4,
horizontal: true,
},
},
dataLabels: {
enabled: false
},
xaxis: {
categories: nama_data_pekerja,
},
fill: {
type: 'gradient',
gradient: {
type: "horizontal",
shadeIntensity: 1,
opacityFrom: 0.7,
opacityTo: 0.9,
colorStops: [{
offset: 0,
color: "#6BB8FF",
opacity: 1
}, {
offset: 20,
color: "#6BB8FF",
opacity: 1
}, {
offset: 60,
color: "#7282D8",
opacity: 1
}, {
offset: 100,
color: "#7282D8",
opacity: 1
}]
}
},
tooltip: {
y: {
formatter: function(val) {
var reverse = val.toString().split('').reverse().join(''),
ribuan = reverse.match(/\d{1,3}/g);
var ribuan = ribuan.join('.').split('').reverse().join('');
return ribuan
}
}
}
};
var chart_penduduk = new ApexCharts(document.querySelector("#info_penduduk"), options_penduduk);
setTimeout(function() {
chart_penduduk.render();
}, 100);
var chart_pendidik = new ApexCharts(document.querySelector("#info_pendidik"), options_pendidik);
setTimeout(function() {
chart_pendidik.render();
}, 100);
var chart_umur = new ApexCharts(document.querySelector("#info_umur"), options_umur);
setTimeout(function() {
chart_umur.render();
}, 100);
var chart_pekerja = new ApexCharts(document.querySelector("#info_pekerjaan"), options_pekerja);
setTimeout(function() {
chart_pekerja.render();
}, 100);
var chart_agama = new ApexCharts(document.querySelector("#info_agama"), options_agama);
setTimeout(function() {
chart_agama.render();
}, 100);
</div>
</th>
</tr>
</tbody>
</table>`;
$("#panel-samping").css("display", "block");
$("#button_hide_panel").css("display", "block")
// $("#thisFooter").css('left', '380px');
// $("#thisFooter").css('width', '930px');
$("#thisFooter").css('display', 'none');
$("#button_unhide").css('display', 'block')
$("#isi_panel").html(content)
panel_samp()
......@@ -658,8 +758,7 @@
</div>
</div>
</div>
`;
</div>`;
$('#info-footer').html(info_foot)
var layer = e.target;
layer.setStyle({
......@@ -683,6 +782,8 @@
};
$(document).on("click", "#btn_detail_kelurahan", function() {
});
$(document).on("click", "#btn_edit_kelurahan", function() {
var map_kel = L.map('map-kelurahan', {
......@@ -3049,85 +3150,6 @@
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;
......
{% load static %}
<div class="legendapo" id="legendapo" style="bottom: 0px;display:none">
<div>
<!-- <div>
<a href="#" onclick="hidelegend()" class="btn btn-default" id="button_hide_point"><span class="caret" style="margin-left: -5px;"></span></a>
</div>
<div class="row">
......@@ -302,5 +302,5 @@
</div>
</div>
<div>
<a href="#" onclick="showlegend()" class="btn btn-default" id="button_unhide_point" style="display: none;"><span class="caret" style="margin-left: -5px;transform: rotate(180deg)"></span></a>
<a href="#" onclick="showlegend()" class="btn btn-default" id="button_unhide_point" style="display: none;"><span class="caret" style="margin-left: -5px;transform: rotate(180deg)"></span></a> -->
</div>
\ No newline at end of file
......@@ -92,29 +92,6 @@
</div>
</div>
<div id="modal_detail" class="modal fade mymodal" style="padding-top: 0px;padding-bottom: 0px;right: -11px;width: 100%!important;">
<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">
......@@ -688,6 +665,7 @@
</div>
</div>
<div class="modal fade" id="modalsearch3d" tabindex="-1" role="dialog">
<div class="modal-dialog modal-xs">
<div class="modal-content">
......@@ -709,32 +687,158 @@
</div>
</div>
</div>
<!--
<script>
$("#tipe_point").change(function() {
var tipe = $(this).val();
$.ajax({
url: "{% url 'api:change-tipe' %}",
data: {
'tipe': tipe
},
dataType: 'json',
success: function(data) {
console.log(data)
var data_all_kab = []
for (var i = 0; i < data['result'].length; i++) {
var data_k = data['result'][i][0];
console.log(data_k)
var data_kab = `<option value="` +
data_k +
`">` +
data_k +
`</option>`;
data_all_kab.push(data_kab)
};
$('#tipe_point_2').html(`<option value="null" selected disabled>-- Pilih Tipe Point --</option>` + data_all_kab);
<style>
#modal_detail_kelurahan>div>div>div>fieldset>div>div:nth-child(1)>div:nth-child(2)>div.row>div>div>div:nth-child(1) {
margin-bottom: 5px;
}
#modal_detail_kelurahan>div>div>div>fieldset>div>div:nth-child(1)>div:nth-child(2)>div.row>div>div>div:nth-child(2) {
margin-bottom: 10px;
font-family: 'gilroysemibold';
}
li.active>a:after {
border-bottom: 2pt solid #60B2FD;
}
.apexcharts-menu-icon {
width: 150px;
color: white;
left: -16px;
}
.apexcharts-toolbar {
right: -50px!important;
top: 104%!important;
background-color: #5A9AFB;
border-top-left-radius: 10px;
width: 150px;
height: 45px;
border-bottom-right-radius: 10px;
}
.apexcharts-menu {
top: -98px!important;
right: 0px!important;
}
});
});
</script> -->
</style>
<div class="modal fade" id="modal_detail_kelurahan" tabindex="-1" role="dialog">
<div class="modal-dialog modal-md" style="width: 820px;max-height: 500px;min-height: 500px;">
<div class="modal-content" style="border-radius:10px;max-height: 500px;min-height: 500px;">
<div class="modal-body" style="padding: 0px;">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="padding: 5px 10px 0px 0px;">×</button>
<fieldset>
<div class="row">
<div class="col-md-6">
<div class="gambar_kelurahan">
<img src="/static/img/imm.png" alt="" style="width:360px;height:290px;border-top-left-radius: 10px;">
</div>
<div style="margin: 10px;">
<div style="font-family: 'gilroybold';margin-bottom: 10px;" class="nama_kelurahan">
NAMADESA
</div>
<div class="row">
<div class="col-md-6">
<div>
<div>
<span>Kode Desa</span>
</div>
<div>
<span class="kode_kelurahan">1234</span>
</div>
</div>
<div>
<div>
<span>Jumlah Penduduk</span>
</div>
<div>
<span class="jumlah_penduduk_kelurahan">34567</span>
</div>
</div>
</div>
<div class="col-md-6">
<div>
<div>
<span>Luas Wilayah</span>
</div>
<div>
<span class="luas_wilayah_kelurahan">1234</span>
</div>
</div>
<div>
<div>
<span>Jumlah KK</span>
</div>
<div>
<span class="jumlah_kk_kelurahan">34567</span>
</div>
</div>
</div>
</div>
</div>
<div class="tombol-edit text-center" style="background-color: #5A9AFB;
position: absolute;
margin-top: 3px;
border-bottom-left-radius: 8px;
border-top-right-radius: 8px;
width: 80px;
height:45px;">
<a href="" class="btn">Edit</a>
</div>
</div>
<div class="col-md-6" style="margin-left: -30px;margin-top: 10px;">
<div>
<span>
Informasi Data Wilayah
</span>
</div>
<div class="tabbable">
<ul class="nav nav-tabs nav-tabs-bottom nav-justified" style="border-top: 1px solid #F9F9F9;
border-bottom: 1px solid #F9F9F9;">
<li class="active"><a href="#bordered-justified-tab1" data-toggle="tab">Penduduk</a></li>
<li><a href="#bordered-justified-tab5" data-toggle="tab">Agama</a></li>
<li><a href="#bordered-justified-tab2" data-toggle="tab">Pendidikan</a></li>
<li><a href="#bordered-justified-tab3" data-toggle="tab">Umur</a></li>
<li><a href="#bordered-justified-tab4" data-toggle="tab">Pekerjaan</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="bordered-justified-tab1">
<div id="info_penduduk">
</div>
</div>
<div class="tab-pane" id="bordered-justified-tab5">
<div id="info_agama">
</div>
</div>
<div class="tab-pane" id="bordered-justified-tab2">
<div id="info_pendidik">
</div>
</div>
<div class="tab-pane" id="bordered-justified-tab3">
<div id="info_umur">
</div>
</div>
<div class="tab-pane" id="bordered-justified-tab4">
<div id="info_pekerjaan">
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
\ No newline at end of file
......@@ -14,11 +14,13 @@
</div>
</a>
</div>
<span class="tooltiptext tooltip-left">3D</span>
<span class="tooltiptext tooltip-left" style="font-family: 'gilroysemibold';
color: #085E8C;">3D</span>
</li>
<li class="fixed-plugin no3d" style="top: 110px;">
<span class="tooltiptext tooltip-left">Basemaps</span>
<span class="tooltiptext tooltip-left" style="color:
#2D7159;font-family:'gilroysemibold';">Basemaps</span>
<div class="dropdown show-dropdown" style="top: 1px;">
<a href="#" data-toggle="dropdown">
<img src="{% static 'img/icon-1/Vectorbasemaps.svg' %}" alt="" style="height: 50px;
......@@ -75,7 +77,7 @@
</div>
</li>
<li class="fixed-plugin no3d" style="top: 170px;">
<span class="tooltiptext tooltip-left">Overlay</span>
<span class="tooltiptext tooltip-left" style="font-family: 'gilroysemibold';color: #6D3FDE;">OVERLAY</span>
<div class="dropdown show-dropdown ">
<a href="#" data-toggle="dropdown">
<img src="{% static 'img/icon-1/Vectoroverlay.svg' %}" alt="" style="height: 50px;
......@@ -83,25 +85,34 @@
margin-top: -1px;
margin-left: -4px;">
</a>
<ul class="dropdown-menu" style="top: -5px;">
<ul class="dropdown-menu" style="top: 12px;
width: 300px;
margin-left: -270px!important;">
<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="col-md-12">
<div class="checkbox">
<label>
<input type="checkbox" id="geo_tuplah" onclick="geotuplah()" style="margin-top:2px;">
<img src="/static/img/icon-1/SquareHalflahan.svg" alt="" style="margin-top: -5px;">
<span>
Lahan
</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="geo_building" style="margin-top:2px;">
<img src="/static/img/icon-1/Buildingsbangunan.svg" alt="" style="margin-top: -5px;">
<span>
Bangunan
</span>
</label>
</div>
<!-- <ul class="nasted active">
......@@ -121,7 +132,10 @@
<div class="checkbox">
<label>
<input type="checkbox" id="geo_jalan" onclick="geojalan()" style="margin-top:2px;">
<img src="/static/img/icon-1/Vectorjalan.svg" alt="" style="margin-top: -5px;">
<span>
Jalan
</span>
</label>
</div>
......@@ -134,7 +148,10 @@
<div class="checkbox">
<label>
<input type="checkbox" id="batas_all" onclick="batasall()" style="margin-top:2px;" >
<img src="/static/img/icon-1/Vectorteritory.svg" alt="" style="margin-top: -5px;">
<span>
Batas Teritori
</span>
</label>
</div>
<ul class="nasted active">
......@@ -160,16 +177,16 @@
</div>
</ul>
</div>
<div class="col-md-6">
<div class="checkbox">
<!-- <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">
<!-- <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
......@@ -194,26 +211,26 @@
<input type="checkbox" id="rusak" onclick="rs()" value="YELLOW" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Rumah Sakit
</label>
</div>
<div class="checkbox">
</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">
</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">
</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">
</div> -->
<!-- <div class="checkbox">
<label>
<input type="checkbox" id="tasiun" onclick="sthall()" value="YELLOW" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Stasiun
......@@ -236,9 +253,9 @@
<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>
</div>
......
{% load static %} {% load humanize %}
<style>
#list_perbaikan_filter>label>input[type=search] {
border-color: #393E54;
}
.isi_detail_cek {
margin-top: 20px;
border-bottom: 0.5pt solid #313649;
}
</style>
<div class="sidebar sidebar-main">
<div class="sidebar-content">
<img src="{% static 'img/logo-ok.png' %}" alt="" style="width: 25px;height:32px;">
......@@ -8,53 +18,51 @@
<ul class="navigation navigation-main navigation-accordion" style="margin-bottom: 40vh;">
<!-- Main -->
<li>
<a href="#" class="side-bar-but" id="button_keterangan" style="background: #353847;border-radius: 11px;">
<li id="button_keterangan">
<a href="#panel-sm" data-toggle="tab" aria-expanded="false" class="side-bar-but" id="keterangan_button">
<i class="icon-stack2"></i>
<span class="tooltiptext-side tooltip-right">Keterangan Umum</span>
</a>
</li>
<li>
<a href="#" class="side-bar-but" id="manage_perbaikan">
<li id="manage_perbaikan">
<a href="#panel-sm2" data-toggle="tab" aria-expanded="false" class="side-bar-but" id="perbaikan_manage">
<i class="icon-pie-chart5"></i>
<span class="tooltiptext-side tooltip-right">Laporan Perbaikan</span>
</a>
</li>
<li style="margin-top: 400px;position: absolute;">
<a href="#" id="btn-hide-all" class="side-bar-but" style="position: absolute;margin-top: 20px;">
<i class="icon-arrow-right13"></i>
</a>
</li>
</ul>
<ul class="navigation navigation-main navigation-accordion">
<li>
<a href="#" class="side-bar-but">
<img src="{% static 'img/icon-1/Vectoriconwarning.svg' %}" alt="" style="height: 17.875003814697266px;width: 17.875003814697266px;margin-left: -8px;">
<span class="tooltiptext-side tooltip-right">Underconstructor</span>
</a>
</li>
<li>
<a href="{% url 'logout' %}" class="side-bar-but">
<img src="{% static 'img/icon-1/Vectoriconlogout.svg' %}" alt="" style="height: 17.875003814697266px;width: 17.875003814697266px;margin-left: -8px;">
<span class="tooltiptext-side tooltip-right">Log Out</span>
</a>
</li>
<hr>
<li>
<a href="#" id="button_unhide_panel" class="side-bar-but">
<i class="icon-arrow-right13"></i>
<span class="tooltiptext-side tooltip-right">Panel</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="panel-samping" class="sidebar-2" style="background: #1B1F2D;position: absolute;z-index: 9;width: 23%;height:100vh;left: -30%;transition: all 0.5s ease;">
<div id="panel-sm" class="sidebar-2" style="display:none;background: #1B1F2D;position: absolute;z-index: 9;width: 23%;height:100vh;left: 0%;transition: all 0.5s ease;">
<div style="margin-left: 50px;background: #1B1F2D;">
<div class="header" style="margin-top: 25px;background: #2F3445;">
<h6 class="panel-title" style="color: #ffff;margin-left: 20px;font-size: 12pt;">Menu Layer<a class="heading-elements-toggle"><i class="icon-more"></i></a></h6>
<h6 class="panel-title" style=" color: #ffff;
margin-left: 20px;
font-size: 14px;
line-height: 17px;
padding-top: 9px;
padding-bottom: 9px;">Menu Layer<a class="heading-elements-toggle"><i class="icon-more"></i></a></h6>
</div>
<div class="bod" style="margin-top: 10px;margin-left:6px;">
<div class="tabbable">
......@@ -168,7 +176,7 @@
<div class="col-sm-2">
<div class="checkbox checkbox-switchery">
<label>
<input type="checkbox" class="switchery-custom">
<input type="checkbox" class="switchery-custom" id="knt_adm" onclick="k_adm()">
</label>
</div>
</div>
......@@ -187,7 +195,7 @@
<div class="col-sm-2">
<div class="checkbox checkbox-switchery">
<label>
<input type="checkbox" class="switchery-custom">
<input type="checkbox" class="switchery-custom" id="rusak" onclick="rs()">
</label>
</div>
</div>
......@@ -207,7 +215,7 @@
<div class="col-sm-2">
<div class="checkbox checkbox-switchery">
<label>
<input type="checkbox" class="switchery-custom">
<input type="checkbox" class="switchery-custom" id="pus" onclick="pks()">
</label>
</div>
</div>
......@@ -227,13 +235,37 @@
<div class="col-sm-2">
<div class="checkbox checkbox-switchery">
<label>
<input type="checkbox" class="switchery-custom">
<input type="checkbox" class="switchery-custom" id="lyn_kes" onclick="l_kes()">
</label>
</div>
</div>
</div>
<div class="row-bod row" style="border-bottom: 0.5pt solid #313649;color:white">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<img src="{% static 'img/icon-1/GraduationCap.svg' %}" alt="">
</div>
<div class="col-sm-7" style="margin-bottom: 2px;margin-top: -8px;">
Jumlah Sarana Ibadah
<br>
<b>
{{ global.13|intcomma }}
</b>
</div>
<div class="col-sm-2">
<div class="checkbox checkbox-switchery">
<label>
<input type="checkbox" class="switchery-custom" id="ibdh" onclick="fiksi()">
</label>
</div>
</div>
</div>
<div class="row-bod row" style="border-bottom: 0.5pt solid #313649;color:white">
<div class="col-sm-1"></div>
<div class="col-sm-2">
......@@ -249,7 +281,7 @@
<div class="col-sm-2">
<div class="checkbox checkbox-switchery">
<label>
<input type="checkbox" class="switchery-custom">
<input type="checkbox" class="switchery-custom" id="dididik" onclick="didik()">
</label>
</div>
</div>
......@@ -271,7 +303,8 @@
<div class="col-sm-2">
<div class="checkbox checkbox-switchery">
<label>
<input type="checkbox" class="switchery-custom">
<input type="checkbox" class="switchery-custom" id="tasiun" onclick="sthall()">
</label>
</div>
</div>
......@@ -292,7 +325,7 @@
<div class="col-sm-2">
<div class="checkbox checkbox-switchery">
<label>
<input type="checkbox" class="switchery-custom">
<input type="checkbox" class="switchery-custom" id="caheum" onclick="temanggung()">
</label>
</div>
</div>
......@@ -313,7 +346,7 @@
<div class="col-sm-2">
<div class="checkbox checkbox-switchery">
<label>
<input type="checkbox" class="switchery-custom">
<input type="checkbox" class="switchery-custom" id="cabud" onclick="cb100()">
</label>
</div>
</div>
......@@ -334,7 +367,7 @@
<div class="col-sm-2">
<div class="checkbox checkbox-switchery">
<label>
<input type="checkbox" class="switchery-custom">
<input type="checkbox" class="switchery-custom" id="gardu" onclick="gl100()">
</label>
</div>
</div>
......@@ -344,7 +377,7 @@
<div class="checkbox checkbox-switchery">
Enable / Disable All <br>
<label>
<input type="checkbox" class="switchery-custom">
<input type="checkbox" class="switchery-custom" id="po_all" onclick="gas_all()">
</label>
</div>
......@@ -354,29 +387,35 @@
</div>
</div>
</div>
<!-- <div id="panel-samping">
<div id="panel-samping-child" class="sidebar-2" style="background: #1B1F2D;position: absolute;z-index: 9;width: 23%;height:100vh;left: -30%;transition: all 0.5s ease;">
<div id="panel-sm2" class="sidebar-2" style="display: none;">
<div style="background: #1B1F2D;position: absolute;z-index: 9;width: 23%;height:100vh;left: 0%;transition: all 0.5s ease;">
<div style="margin-left: 50px;background: #1B1F2D;">
<div class="header" style="margin-top: 25px;background: #2F3445;">
<h6 class="panel-title" style="color: #ffff;margin-left: 20px;font-size: 12pt;">Laporan Perbaikan<a class="heading-elements-toggle"><i class="icon-more"></i></a></h6>
</div>
<div class="bod" style="margin-top: 10px;margin-left:6px;">
<h6 class="panel-title" style="font-family: 'gilroysemibold';
color: #ffff;
margin-left: 20px;
font-size: 16px;
line-height: 17px;
padding-top: 9px;
padding-bottom: 9px;">Laporan Perbaikan<a class="heading-elements-toggle"><i class="icon-more"></i></a></h6>
</div>
<div class="bod" style="margin-top: 10px;margin-left:6px;font-size: 12px;">
<div style="color: white;">
<span>Filter:</span>
</div>
<div class="form-group" style="margin-top: 15px;width: 250px;">
<div class="form-group" style="margin-top: 15px;width: 98%;">
<select name="select" id="sel-kec" class="form-control input-sm" style="background-color: #393E54;border-radius: 8px;border-color: #393E54;color: white;">
<option value="opt1">Pilih Kecamatan</option>
<option value="opt1">Pilih Kecamatan</option>
<option value="opt1">Pilih Kecamatan</option>
{% for nama_kecamatan in kec_res %}
<option>Pilih Kecamatan</option>
{% for nama_kecamatan in kecamatan %}
<option value="{{nama_kecamatan.administrasi.f1}}">{{nama_kecamatan.administrasi.f2}}</option>
{% endfor %}
</select>
</div>
<div class="form-group" style="margin-top: 15px;width: 250px;">
<div class="form-group" style="margin-top: 15px;width: 98%;">
<select name="select" id="sel-desa" class="form-control input-sm" style="background-color: #393E54;border-radius: 8px;border-color: #393E54;color: white;">
<option value="opt1">Pilih Desa</option>
</select>
......@@ -384,15 +423,21 @@
</div>
</div>
</div>
<div class="panel panel-flat" id="perbaikan-dashboard" style="background: #181B27;position: absolute;z-index: 9;width: 77%;height:100vh;left: 23%;transition: all 0.5s ease;color: white; border: none;">
<div class="panel panel-flat " id="perbaikan-dashboard " style="background: #181B27;position: absolute;z-index: 9;width: 77%;height:100vh;left: 23%;transition: all 0.5s ease;color: white; border: none; ">
<div class="panel-heading" style="background-color:#181B27;border-bottom: 0.5pt solid #313649;">
<h6 class="panel-title">Table Data Perbaikan</h6>
<div class="panel-body " style="padding:14px 0px;">
<table class="table table-responsive datatable-show-all table-sm bg-slate-610" id="list_perbaikan" style="font-size : 8pt;padding:0px;border-top:0.5pt solid #343434;border-bottom:0.5pt solid #343434;margin-bottom: 10px;">
<div style="position: absolute;right: 30px;font-size: 10pt;">
<a class="btn side-bar-but" id="download_perbaikan" onclick="download_all('xlsx')" style="color: white;z-index:9;">
<div>
<i class="icon-download4"></i><span>&nbsp;&nbsp;&nbsp;Download</span>
</div>
<div class="panel-body">
<table class="table table-responsive datatable-show-all table-sm" id="userList" style="word-wrap:break-word;">
<thead>
</a>
</div>
<thead style="font-size: 12px;line-height: 14px;font-family: 'gilroysemibold';text-transform: capitalize;">
<tr>
<th>No.</th>
<th>Sarana Perbaiakn</th>
......@@ -404,7 +449,7 @@
<th>Keterangan</th>
</tr>
</thead>
<tbody>
<tbody id="tbody_perbaikan">
{% for all in res_all %}
<tr>
......@@ -415,8 +460,15 @@
<td>{{all.tgl_perbaikan}}</td>
<td>{{all.tgl_selesai}}</td>
<td>{{all.anggaran}}</td>
<td class="text-center">
<a class="mdlFire" onclick="loadjlbyid('{{all.id_object}}')" data-toggle="modal" data-target="#modal_detail">Detail</a>
<td class="text-center ">
<a class="btn mdlFire " onclick="loaddetailid( '{{all.id_object}}') " data-toggle="modal" data-target="#modal_detail_perbaikan " style="background-color: #5A9AFB;color: white;border-radius: 5px;width: 85px;height: 25px; ">
<div style="margin-top: -5px; ">
<i class="icon-search4 text-muted text-size-base " style="color: white;font-size: 10px; "></i>
<span>&nbsp;&nbsp;
Detail</span>
</div>
</a>
</td>
</tr>
......@@ -425,4 +477,584 @@
</table>
</div>
</div>
</div> -->
\ No newline at end of file
<div id="modal_detail_perbaikan" class="modal fade mymodal" style="padding-top: 0px;padding-bottom: 0px;right: -11px;width: 100% !important;max-height: 657px;overflow-y:hidden; left: 0px;">
<div class="modal-dialog modal-sm " style="max-height: 657px;margin: 0;float: right;bottom: 0;
width: 320px;">
<div class="modal-content " style="background-color: #1B1F2D;max-height: 657px;color: white; ">
<div class="modal-body " style="padding: 0px;background-color: #1B1F2D; ">
<div style="float: right;margin: -42px 10px 0px 0px; ">
<button type="button " class="btn btn-link " onclick="cetakExcel() " style="color: white;padding-top: 2px;"><i class="icon-printer"></i>
<span>
&nbsp;&nbsp;Cetak
</span>
</button>
<!-- <button class="modalMinimize" style="right: 50px;"> <i class='fa fa-minus'></i> </button> -->
<button type="button" class="close" data-dismiss="modal " style="color: white;padding: 3px;"> <i class='fa fa-times'></i> </button>
</div>
<div class="isi text " style="margin-top: 50px;overflow-y: scroll;max-height: 607px;overflow-x: hidden; ">
<div class="isi_detail_cek ">
<div>
<div>
<span>Nama</span>
</div>
<div>
<span class="nama_detail">NAMA JALAN</span>
</div>
</div>
</div>
<div class="isi_detail_cek ">
<div>
<div>
<span>Type</span>
</div>
<div>
<span class="type_detail">NAMA JALAN</span>
</div>
</div>
</div>
<div class="isi_detail_cek ">
<div>
<div>
<span>Tanggal perbaikan</span>
</div>
<div>
<span class="tanggal_perbaikan_detail">NAMA JALAN</span>
</div>
</div>
</div>
<div class="isi_detail_cek ">
<div>
<div>
<span>Anggaran</span>
</div>
<div>
<span class="anggaran_detail">NAMA JALAN</span>
</div>
</div>
</div>
<div class="isi_detail_cek ">
<div>
<div>
<span>Penanggung jawab</span>
</div>
<div>
<span class="penanggung_jawab_detail">NAMA JALAN</span>
</div>
</div>
</div>
<div class="isi_detail_cek ">
<div>
<div>
<span>Penanggung jawab lapangan</span>
</div>
<div>
<span class="penanggung_jawab_lapangan_detail">NAMA JALAN</span>
</div>
</div>
</div>
<div class="isi_detail_cek ">
<div>
<div>
<span>Kontraktor</span>
</div>
<div>
<span class="kontraktor_detail">NAMA JALAN</span>
</div>
</div>
</div>
<div class="isi_detail_cek ">
<div>
<div>
<span>Panjang jalan yang diperbaiki</span>
</div>
<div>
<span class="panjang_jalan_detail">NAMA JALAN</span>
</div>
</div>
</div>
<div class="isi_detail_cek ">
<div>
<div>
<span>Lebar jalan yang diperbaiki</span>
</div>
<div>
<span class="lebar_jalan_detail">NAMA JALAN</span>
</div>
</div>
</div>
<div style="margin-top: 20px; ">
<div class="row">
<div class="col-md-6 ">
<div>
<span>Proposal</span>
</div>
<div class="proposal_detail ">
<img src="{% static 'img/icon-1/proposal.svg' %} " alt=" " style="height: 65px;width: 65px; ">
</div>
</div>
<div class="col-md-6 ">
<div>
<span>Bukti penyelesaian</span>
</div>
<div class="bukti_detail_perbaikan">
<img src="{% static 'img/icon-1/bukti.svg' %} " alt=" " style="height: 65px;width: 65px; ">
</div>
</div>
</div>
<div>
<span>Ruas yang diperbaiki</span>
<!-- <div class="row">
<div class="col-sm-6">
<a href="#" class="btn" id="download_map" style="position: absolute;z-index:999">download maps</a>
</div>
<div class="col-sm-6">
<a href="#" class="btn" id="preview_map" style="position: absolute;z-index:999">preview</a>
</div>
</div>
<div id="previewImage" style="display: none;"></div> -->
<div id="map_detail_perbaikan" style=" position: relative; height: 220px; width: 90%; border-radius: 5px; ">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="panel-sm-kosong " class="sidebar-2 " style="display:none;background: #1B1F2D;position: absolute;z-index: 1;left: 0%;transition: all 0.5s ease; ">
</div>
<script type="text/javascript " src="{% static 'js/plugins/tables/datatables/datatables.min.js' %} "></script>
<script type="text/javascript " src="{% static 'js/plugins/forms/selects/select2.min.js' %} "></script>
<script>
var map_detail_perbaikan = L.map('map_detail_perbaikan', {
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_perbaikan);
$("#sel-kec ").change(function() {
var id_kec = $(this).val()
$.ajax({
url: "api/filt_perbaikan_kecamatan",
data: {
'id_kec': id_kec
},
dataType: 'json',
success: function(data) {
var data_all_desa = []
for (var i = 0; i < data['res_kel'].length; i++) {
var id_k = data['res_kel'][i][0];
var data_k = data['res_kel'][i][1];
var data_kel = `<option value="` + id_k + ` ">` +
data_k +
`</option>`;
data_all_desa.push(data_kel)
};
$('#sel-desa').html(`<option>Pilih Desa</option>` + data_all_desa);
var data_perbaikan = []
var number = 1;
for (var i = 0; i < data['res_perbaikan'].length; i++) {
number += i;
var name_perbaikan = data['res_perbaikan'][i]['name_perbaikan'];
var id_object = data['res_perbaikan'][i]['id_object'];
var name = data['res_perbaikan'][i]['name'];
var type = data['res_perbaikan'][i]['type'];
var tgl_perbaikan = data['res_perbaikan'][i]['tgl_perbaikan'];
var anggaran = data['res_perbaikan'][i]['anggaran'];
var tgl_selesai = data['res_perbaikan'][i]['tgl_selesai'];
var data_gab = `<tr>
<td>` + number + `</td>
<td>` + name_perbaikan + `</td>
<td>` + name + `</td>
<td>` + type + `</td>
<td>` + tgl_perbaikan + `</td>
<td>` + tgl_selesai + `</td>
<td>` + anggaran + `</td>
<td class="text-center ">
<a class="btn mdlFire " onclick="loaddetailid( '` + id_object + `') " data-toggle="modal " data-target="#modal_detail_perbaikan " style="background-color: #5A9AFB;color: white;border-radius: 5px;width: 85px;height: 25px; ">
<div style="margin-top: -5px; ">
<i class="icon-search4 text-muted text-size-base " style="color: white;font-size: 10px; "></i>
<span>&nbsp;&nbsp;
Detail</span>
</div>
</a>
</td>
</tr>`;
data_perbaikan.push(data_gab)
};
$("#tbody_perbaikan ").html(data_perbaikan)
}
});
});
$("#sel-desa ").change(function() {
var id_desa = $(this).val()
$.ajax({
url: "api/filt_perbaikan_desa",
data: {
'id_desa': id_desa
},
dataType: 'json',
success: function(data) {
var data_perbaikan = []
var number = 1;
for (var i = 0; i < data['res_perbaikan'].length; i++) {
number += i;
var name_perbaikan = data['res_perbaikan'][i]['name_perbaikan'];
var id_object = data['res_perbaikan'][i]['id_object'];
var name = data['res_perbaikan'][i]['name'];
var type = data['res_perbaikan'][i]['type'];
var tgl_perbaikan = data['res_perbaikan'][i]['tgl_perbaikan'];
var anggaran = data['res_perbaikan'][i]['anggaran'];
var tgl_selesai = data['res_perbaikan'][i]['tgl_selesai'];
var data_gab = `<tr>
<td>` + number + `</td>
<td>` + name_perbaikan + `</td>
<td>` + name + `</td>
<td>` + type + `</td>
<td>` + tgl_perbaikan + `</td>
<td>` + tgl_selesai + `</td>
<td>` + anggaran + `</td>
<td class="text-center ">
<a class="btn mdlFire " onclick="loaddetailid( '` + id_object + `') " data-toggle="modal " data-target="#modal_detail_perbaikan " style="background-color: #5A9AFB;color: white;border-radius: 5px;width: 85px;height: 25px; ">
<div style="margin-top: -5px; ">
<i class="icon-search4 text-muted text-size-base " style="color: white;font-size: 10px; "></i>
<span>&nbsp;&nbsp;
Detail</span>
</div>
</a>
</td>
</tr>`;
data_perbaikan.push(data_gab)
};
$("#tbody_perbaikan ").html(data_perbaikan)
}
});
});
$('.datatable-show-all').DataTable({
autoWidth: false,
columnDefs: [{
orderable: false,
width: '20px',
targets: [0],
}, {
orderable: false,
width: '20px',
targets: [6],
}, {
orderable: false,
width: '20px',
targets: [7],
}, ],
dom: '<"float-left "B>frtip',
language: {
search: ' _INPUT_',
searchPlaceholder: 'Data Perbaikan...',
lengthMenu: '<span>Show:</span><hr> _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');
}
});
function loaddetailid(id) {
var isObject = {};
isObject.id = id;
$("#iduser ").val(id)
setTimeout(function() {
map_detail_perbaikan.invalidateSize();
}, 500);
$.ajax({
url: "{% url 'apps:loadDetail' %} ",
data: isObject,
dataType: 'json',
type: 'post',
success: function(data) {
if (data.length === 0) {
$(".nama_detail").text("Null");
$(".type_detail ").html("Null");
$(".tanggal_perbaikan_detail ").html("Null")
$(".anggaran_detail ").html("Null")
$(".penanggung_jawab_detail ").html("Null")
$(".penanggung_jawab_lapangan_detail ").html("Null")
$(".kontraktor_detail ").html("Null")
$(".panjang_jalan_detail ").html("Null")
$(".lebar_jalan_detail ").html("Null")
$(".proposal_detail ").html(`
<a href="media/proposal/null" id="downloadproposal ">
<img src="{% static 'img/icon-1/proposal.svg' %} " alt=" " style="height: 65px;width: 65px; ">
</a>`);
$(".bukti_detail_perbaikan").html(`
<a href="media/bukti_penyelesaian/null" onclick="viewBukti() " id="view-bukti ">
<img src="{% static 'img/icon-1/bukti.svg' %} " alt=" " style="height: 70px;
width: 50px;">
</a>`);
} else {
$(".nama_detail").html(data[0]['name']);
$(".type_detail ").html(data[0]['type'])
$(".tanggal_perbaikan_detail ").text(data[0]['tgl_perbaikan'])
$(".anggaran_detail ").html(data[0]['anggaran'])
$(".penanggung_jawab_detail ").html(data[0]['pj'])
$(".penanggung_jawab_lapangan_detail ").html(data[0]['pj_lapangan'])
$(".kontraktor_detail ").html(data[0]['kontraktor'])
$(".panjang_jalan_detail ").html(data[0]['panjang'])
$(".lebar_jalan_detail ").html(data[0]['lbr_jln_reno'])
$(".proposal_detail ").html(`
<a href="media/proposal/` + data[0]['proposal'] + ` target="_blank" "id="downloadproposal">
<img src="{% static 'img/icon-1/proposal.svg' %} " alt=" " style="height: 65px;width: 65px; ">
</a>`);
$(".bukti_detail_perbaikan").html(`
<a href="media/bukti_penyelesaian/` + data[0].bukti_selesai + ` target="_blank" id="view-bukti">
<img src="{% static 'img/icon-1/bukti.svg' %} " alt=" " style="height: 70px;
width: 50px;">
</a>`);
map_detail_perbaikan.setView([data[0]['geometry']['coordinates'][0][0][1], data[0]['geometry']['coordinates'][0][0][0]], 18)
var myLines = [data[0]['geometry']];
var geo_jalan_perbaikan = L.geoJson(data[0]['geometry'], {
style: function(feature) {
return {
color: "#FAFA00",
weight: 10,
opacity: 2,
zIndex: 1001
};
}
}).addTo(map_detail_perbaikan);
}
}
});
};
// var element = $("#map_detail_perbaikan"); // global variable
// var getCanvas; // global variable
//
// $("#download_map").on('click', function() {
// html2canvas(element, {
// onrendered: function(canvas) {
// $("#previewImage").append(canvas);
// getCanvas = canvas;
// }
// });
//
// var imgageData = getCanvas.toDataURL("image/png");
// // Now browser starts downloading it instead of just showing it
// var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
// $("#download_map").attr("download", "image.png").attr("href", newData);
// });
function download_all(type, fn, dl) {
var elt = document.getElementById('list_perbaikan');
var wb = XLSX.utils.table_to_book(elt, {
sheet: "sheet1"
});
return dl ?
XLSX.write(wb, {
bookType: type,
bookSST: true,
type: 'base64'
}) :
XLSX.writeFile(wb, fn || ('data_perbaikan.' + (type || 'xlsx')));
}
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');
});
$("#btn-hide-all").click(function() {
$("#button_keterangan").removeClass("active");
$("#manage_perbaikan").removeClass("active");
$("#panel-sm").removeClass("active");
$("#panel-sm2").removeClass("active");
$(this).removeClass("hid");
});
$("#keterangan_button").click(function() {
$("#btn-hide-all").toggleClass("hid")
});
$("#perbaikan_manage").click(function() {
$("#btn-hide-all").toggleClass("hid")
});
function gas_all() {
var checkBox = document.getElementById("po_all");
if (checkBox.checked == true) {
alert('hjk')
document.getElementById("knt_adm").checked = true;
document.getElementById("lyn_kes").checked = true;
document.getElementById("pus").checked = true;
document.getElementById("rusak").checked = true;
document.getElementById("ibdh").checked = true;
document.getElementById("dididik").checked = true;
document.getElementById("pom_bengsin").checked = true;
document.getElementById("tasiun").checked = true;
document.getElementById("caheum").checked = true;
document.getElementById("cabud").checked = true;
document.getElementById("gardu").checked = true;
k_adm()
l_kes()
pks()
rs()
fiksi()
didik()
pom_mini()
sthall()
temanggung()
cb100()
gl100()
valket()
} else if (checkBox.checked == false) {
document.getElementById("knt_adm").checked = false;
document.getElementById("lyn_kes").checked = false;
document.getElementById("pus").checked = false;
document.getElementById("rusak").checked = false;
document.getElementById("ibdh").checked = false;
document.getElementById("dididik").checked = false;
document.getElementById("pom_bengsin").checked = false;
document.getElementById("tasiun").checked = false;
document.getElementById("caheum").checked = false;
document.getElementById("cabud").checked = false;
document.getElementById("gardu").checked = false;
k_adm()
l_kes()
pks()
rs()
fiksi()
didik()
pom_mini()
sthall()
temanggung()
cb100()
gl100()
}
}
</script>
\ No newline at end of file
<!--
=========================================================
Material Dashboard - v2.1.2
=========================================================
Product Page: https://www.creative-tim.com/product/material-dashboard
Copyright 2019 Creative Tim (https://www.creative-tim.com)
Licensed under MIT (https://github.com/creativetimofficial/material-dashboard/blob/master/LICENSE.md)
Coded by Creative Tim
=========================================================
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76" href="https://appsrv1-147a1.kxcdn.com/material-dashboard/img/apple-icon.png">
<link rel="icon" type="image/png" href="https://appsrv1-147a1.kxcdn.com/material-dashboard/img/favicon.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="canonical" href="https://appseed.us/admin-dashboards/django-dashboard-material">
<meta name="google-site-verification" content="kCT200-J0rfczENRkJQdYCqsDKkUo3Hvr3KZic_otwU" />
<title>
Django Material Dashboard - Maps | AppSeed
</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
<!-- Fonts and icons -->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<!-- CSS Files -->
<link href="https://appsrv1-147a1.kxcdn.com/material-dashboard/css/material-dashboard.min.css?v=2.1.2" rel="stylesheet" />
<!-- CSS Just for demo purpose, don't include it in your project -->
<link href="{% static 'demo/demo.css' %}" rel="stylesheet" />
<!-- Specific Page CSS goes HERE -->
<style>
.leaflet-draw-section {
display: none;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
<link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder@2.3.3/dist/esri-leaflet-geocoder.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script>
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="{% static 'js/Leaflet.Editables.js' %}"></script>
<style>
#button_hide {
line-height: 15px;
width: 30px;
font-size: 10pt;
font-family: tahoma;
margin-top: 3px;
margin-left: 3px;
position: absolute;
top: 61px;
left: 265px;
z-index: 3;
background-color: white;
}
#button_unhide {
line-height: 15px;
width: 30px;
font-size: 10pt;
font-family: tahoma;
margin-top: 3px;
margin-left: 3px;
position: absolute;
top: 61px;
left: -46px;
z-index: 3;
background-color: white;
}
#button_detail {
line-height: 15px;
width: 30px;
font-size: 10pt;
font-family: tahoma;
margin-top: 3px;
margin-left: 3px;
position: absolute;
top: 320px;
left: 10px;
z-index: 10;
background-color: white;
}
</style>
</head>
<body class="">
<div class="wrapper ">
<div>
<a href="#" class="btn btn-default" id="button_hide" data-toggle="tooltip" data-placement="right" title="Ciutkan panel"><span class="caret" style="margin-left: -5px;"></span></a>
</div>
<div>
<a href="#" class="btn btn-default" id="button_unhide" data-toggle="tooltip" data-placement="right" title="Luaskan Panel"><span class="caret" style="margin-left: -5px;display:block" ></span></a>
</div>
<a href="#" id="button_detail">details</a>
<div class="sidebar" id="panel-samping" data-background-color="white" data-image="https://appsrv1-147a1.kxcdn.com/material-dashboard/img/sidebar-1.jpg" style="z-index: 5!important;width:300px">
<div class="sidebar-wrapper">
<ul class="nav" style="margin-top: 0px;">
<li class="nav-item ">
<a class="nav-link" href="/" style="background-image:url('static/img/maps/esri.png');min-height: 260px;min-width: 255px;">
</a>
<div>
<a class="nav-link" href="/page-user.html">
<i class="material-icons">person</i>
<p>User Profile</p>
<div class="gb_0a gb_E gb_k gb_2a gb_la" aria-label="Informasi Akun" aria-hidden="false" img-loaded="1">
<div class="gb_9a">
<div class="gb_ab"><img class="gb_Ha gbip gb_eb" src="https://lh3.googleusercontent.com/ogw/ADea4I669gQT0cHhDH2FV18X4XizVzrEX6PUKz6QJFeiNA=s83-c-mo" title="Profil" alt="" aria-hidden="true" srcset="https://lh3.googleusercontent.com/ogw/ADea4I669gQT0cHhDH2FV18X4XizVzrEX6PUKz6QJFeiNA=s83-c-mo 1x, https://lh3.googleusercontent.com/ogw/ADea4I669gQT0cHhDH2FV18X4XizVzrEX6PUKz6QJFeiNA=s192-c-mo 2x ">
<div class="gb_ib gb_eb">
<a class="gb_jb gb_Rf gb_eb gb_Wf" aria-label="Ubah foto profil." href="https://myaccount.google.com/?utm_source=OGB&amp;tab=lk" target="_blank">
<svg class="gb_kb" enable-background="new 0 0 24 24" focusable="false" height="26" viewBox="0 0 24 24" width="18" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M20 5h-3.17L15 3H9L7.17 5H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 14H4V7h16v12zM12 9c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"></path></svg>
</a>
</div>
</li>
<li class="nav-item ">
</li>
<li class="nav-item ">
<a class="nav-link" href="/ui-tables.html">
<i class="material-icons">content_paste</i>
<p>Table List</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/ui-typography.html">
<i class="material-icons">library_books</i>
<p>Typography</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/ui-icons.html">
<i class="material-icons">bubble_chart</i>
<p>Icons</p>
</a>
</li>
<li class="nav-item active ">
<a class="nav-link" href="/ui-maps.html">
<i class="material-icons">location_ons</i>
<p>Maps</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/ui-notifications.html">
<i class="material-icons">notifications</i>
<p>Notifications</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/page-rtl-support.html">
<i class="material-icons">language</i>
<p>RTL Support</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/logout/">
<i class="material-icons">directions_run</i>
<p>Logout</p>
</a>
</li>
<li class="nav-item active-pro ">
<a class="nav-link" target="_blank" rel="noopener noreferrer" href="https://appseed.us/admin-dashboards/django-dashboard-material-pro">
<i class="material-icons">unarchive</i>
<p>PRO Version</p>
</a>
</li>
</ul>
</div>
<div class="gb_bb">
<div class="gb_lb gb_mb">owiii isFact</div>
<div class="gb_nb">owri123456@gmail.com</div>
<a class="gb_rb gb_Sf gbp1 gb_Pe gb_3c" href="https://myaccount.google.com/?utm_source=OGB&amp;tab=lk&amp;utm_medium=act" target="_blank">Kelola Akun Google Anda</a>
</div>
<div class="main-panel" style="width: 100%;">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
</button>
<div class="collapse navbar-collapse justify-content-end">
<form class="navbar-form">
<div class="input-group no-border">
<input type="text" value="" class="form-control" placeholder="Search...">
<button type="submit" class="btn btn-white btn-round btn-just-icon">
<i class="material-icons">search</i>
<div class="ripple-container"></div>
</button>
</div>
</form>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#pablo">
<i class="material-icons">dashboard</i>
<p class="d-lg-none d-md-block">
Stats
</p>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">notifications</i>
<span class="notification">5</span>
<p class="d-lg-none d-md-block">
Some Actions
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Mike John responded to your email</a>
<a class="dropdown-item" href="#">You have 5 new tasks</a>
<a class="dropdown-item" href="#">You're now friend with Andrew</a>
<a class="dropdown-item" href="#">Another Notification</a>
<a class="dropdown-item" href="#">Another One</a>
<div class="gb_Eb gb_Ib">
<div class="gb_Zf gb_fc gb_Aa">
<div class="gb_gc"></div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#pablo" id="navbarDropdownProfile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">person</i>
<p class="d-lg-none d-md-block">
Account
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownProfile">
<a class="dropdown-item" href="/page-user.html">Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/logout/">Log out</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
<div class="content" style="margin-top: 0px!important;padding: 0px 0px!important; height: 100%;">
<div class="container-fluid" style="height: 100%;padding-right: 0px;padding-left: 0px;">
<div id="map" style="height: 100%;"></div>
<div class="gb_Vf gb_Mb gb_Aa" aria-hidden="true">
<a class="gb_Lb gb_Vb" href="/maps/preview?authuser=0" target="_blank" rel="noreferrer" aria-hidden="true"><img class="gb_Xb gb_eb" src="https://lh3.googleusercontent.com/-VMW-ECTZfQg/AAAAAAAAAAI/AAAAAAAAAAA/AMZuucn_ISHyAlAYmHRmxNMRKgrbrdsdWg/s48-c/photo.jpg" alt="" aria-hidden="true">
<div class="gb_Ob">
<div class="gb_4b">Default</div>
<div class="gb_0b">owiii isFact</div>
<div class="gb_2b" dir="ltr">owri123456@gmail.com</div>
</div>
</a>
</div>
<div class="gb_yb" aria-hidden="true">
<svg class="gb_zb" focusable="false" height="20" viewBox="0 0 20 20" width="20" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M0 0h20v20H0V0z" fill="none"></path><path d="M6.18 7L10 10.82 13.82 7 15 8.17l-5 5-5-5z"></path>
</svg>
</div>
<a class="gb_6b gb_Aa gb_Pb" href="https://myaccount.google.com/brandaccounts?authuser=0&amp;continue=https://www.google.co.id/maps/%40-6.8785403,107.5623616,15z&amp;service=/maps/preview%3Fauthuser%3D%24authuser" aria-hidden="true">
<div class="gb_7b"><svg focusable="false" height="20" viewBox="0 0 24 24" width="20" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 2v10.79C16.52 14.37 13.23 14 12 14s-4.52.37-7 1.79V5h14zM5 19v-.77C6.74 16.66 10.32 16 12 16s5.26.66 7 2.23V19H5zm7-6c1.94 0 3.5-1.56 3.5-3.5S13.94 6 12 6 8.5 7.56 8.5 9.5 10.06 13 12 13zm0-5c.83 0 1.5.67 1.5 1.5S12.83 11 12 11s-1.5-.67-1.5-1.5S11.17 8 12 8z" fill="#5F6368"></path><path d="M0 0h24v24H0V0z" fill="none"></path></svg>
</div>
<div class="fixed-plugin">
<div class="dropdown show-dropdown">
<a href="#" data-toggle="dropdown">
<i class="fa fa-cog fa-2x"> </i>
<div class="gb_9b gb_ac">Semua akun Bisnis</div>
<svg class="gb_bc" focusable="false" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#5F6368"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>
</a>
<ul class="dropdown-menu">
<li class="header-title"> Sidebar Filters</li>
<li class="adjustments-line">
<a href="javascript:void(0)" class="switch-trigger active-color">
<div class="badge-colors ml-auto mr-auto">
<span class="badge filter badge-purple" data-color="purple"></span>
<span class="badge filter badge-azure" data-color="azure"></span>
<span class="badge filter badge-green" data-color="green"></span>
<span class="badge filter badge-warning" data-color="orange"></span>
<span class="badge filter badge-danger" data-color="danger"></span>
<span class="badge filter badge-rose active" data-color="rose"></span>
</div>
<div class="clearfix"></div>
</a>
</li>
<li class="header-title">Images</li>
<li class="active">
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="https://appsrv1-147a1.kxcdn.com/material-dashboard/img/sidebar-1.jpg" alt="">
<div class="gb_Qb" tabindex="-1">
<a class="gb_vb gb_Of" href="https://accounts.google.com/AddSession?hl=id&amp;continue=https://www.google.co.id/maps/%40-6.8785403,107.5623616,15z&amp;service=local&amp;ec=GAlAcQ" target="_blank">
<div class="gb_wb"><svg class="gb_xb" enable-background="new 0 0 24 24" focusable="false" height="20" viewBox="0 0 24 24" width="20" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M9 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm0 7c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4zm6 5H3v-.99C3.2 16.29 6.3 15 9 15s5.8 1.29 6 2v1zm3-4v-3h-3V9h3V6h2v3h3v2h-3v3h-2z"></path></svg></div>
<div class="gb_Ab">Tambahkan akun lainnya</div>
</a>
</li>
<li>
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="https://appsrv1-147a1.kxcdn.com/material-dashboard/img/sidebar-2.jpg" alt="">
</a>
</li>
<li>
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="https://appsrv1-147a1.kxcdn.com/material-dashboard/img/sidebar-3.jpg" alt="">
</a>
</li>
<li>
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="https://appsrv1-147a1.kxcdn.com/material-dashboard/img/sidebar-4.jpg" alt="">
</a>
</li>
<li class="button-container">
<a target="_blank" rel="noopener noreferrer" href="https://appseed.us/admin-dashboards/django-dashboard-material" class="btn btn-default btn-block">
See Product
</a>
</li>
<li class="button-container">
<a target="_blank" rel="noopener noreferrer" href="https://appseed.us/support" class="btn btn-primary btn-block">
Get Support
</a>
</li>
</ul>
</div>
</div>
<!-- Core JS Files -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/core/jquery.min.js"></script>
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/core/popper.min.js"></script>
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/core/bootstrap-material-design.min.js"></script>
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/plugins/perfect-scrollbar.jquery.min.js"></script>
<!-- Plugin for the momentJs -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/plugins/moment.min.js"></script>
<!-- Plugin for Sweet Alert -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/plugins/sweetalert2.js"></script>
<!-- Forms Validations Plugin -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/plugins/jquery.validate.min.js"></script>
<!-- Plugin for the Wizard, full documentation here: https://github.com/VinceG/twitter-bootstrap-wizard -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/plugins/jquery.bootstrap-wizard.js"></script>
<!-- Plugin for Select, full documentation here: http://silviomoreto.github.io/bootstrap-select -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/plugins/bootstrap-selectpicker.js"></script>
<!-- Plugin for the DateTimePicker, full documentation here: https://eonasdan.github.io/bootstrap-datetimepicker/ -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/plugins/bootstrap-datetimepicker.min.js"></script>
<!-- DataTables.net Plugin, full documentation here: https://datatables.net/ -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/plugins/jquery.dataTables.min.js"></script>
<!-- Plugin for Tags, full documentation here: https://github.com/bootstrap-tagsinput/bootstrap-tagsinputs -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/plugins/bootstrap-tagsinput.js"></script>
<!-- Plugin for Fileupload, full documentation here: http://www.jasny.net/bootstrap/javascript/#fileinput -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/plugins/jasny-bootstrap.min.js"></script>
<!-- Full Calendar Plugin, full documentation here: https://github.com/fullcalendar/fullcalendar -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/plugins/fullcalendar.min.js"></script>
<!-- Vector Map plugin, full documentation here: http://jvectormap.com/documentation/ -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/plugins/jquery-jvectormap.js"></script>
<!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/plugins/nouislider.min.js"></script>
<!-- Include a polyfill for ES6 Promises (optional) for IE11, UC Browser and Android browser support SweetAlert -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js"></script>
<!-- Library for adding dinamically elements -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/plugins/arrive.min.js"></script>
<!-- Chartist JS -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/plugins/chartist.min.js"></script>
<!-- Notifications Plugin -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/plugins/bootstrap-notify.js"></script>
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/material-dashboard.js?v=2.1.2" type="text/javascript"></script>
<!-- Material Dashboard DEMO methods, don't include it in your project! -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/demo/demo.js"></script>
<script>
$(document).ready(function() {
$().ready(function() {
$sidebar = $('.sidebar');
$sidebar_img_container = $sidebar.find('.sidebar-background');
$full_page = $('.full-page');
$sidebar_responsive = $('body > .navbar-collapse');
window_width = $(window).width();
fixed_plugin_open = $('.sidebar .sidebar-wrapper .nav li.active a p').html();
if (window_width > 767 && fixed_plugin_open == 'Dashboard') {
if ($('.fixed-plugin .dropdown').hasClass('show-dropdown')) {
$('.fixed-plugin .dropdown').addClass('open');
}
}
$('.fixed-plugin a').click(function(event) {
// Alex if we click on switch, stop propagation of the event, so the dropdown will not be hide, otherwise we set the section active
if ($(this).hasClass('switch-trigger')) {
if (event.stopPropagation) {
event.stopPropagation();
} else if (window.event) {
window.event.cancelBubble = true;
}
}
});
$('.fixed-plugin .active-color span').click(function() {
$full_page_background = $('.full-page-background');
$(this).siblings().removeClass('active');
$(this).addClass('active');
var new_color = $(this).data('color');
if ($sidebar.length != 0) {
$sidebar.attr('data-color', new_color);
}
if ($full_page.length != 0) {
$full_page.attr('filter-color', new_color);
}
if ($sidebar_responsive.length != 0) {
$sidebar_responsive.attr('data-color', new_color);
}
});
$('.fixed-plugin .background-color .badge').click(function() {
$(this).siblings().removeClass('active');
$(this).addClass('active');
var new_color = $(this).data('background-color');
if ($sidebar.length != 0) {
$sidebar.attr('data-background-color', new_color);
}
});
$('.fixed-plugin .img-holder').click(function() {
$full_page_background = $('.full-page-background');
$(this).parent('li').siblings().removeClass('active');
$(this).parent('li').addClass('active');
var new_image = $(this).find("img").attr('src');
if ($sidebar_img_container.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
$sidebar_img_container.fadeOut('fast', function() {
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
$sidebar_img_container.fadeIn('fast');
});
}
if ($full_page_background.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
$full_page_background.fadeOut('fast', function() {
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
$full_page_background.fadeIn('fast');
});
}
if ($('.switch-sidebar-image input:checked').length == 0) {
var new_image = $('.fixed-plugin li.active .img-holder').find("img").attr('src');
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
}
if ($sidebar_responsive.length != 0) {
$sidebar_responsive.css('background-image', 'url("' + new_image + '")');
}
});
$('.switch-sidebar-image input').change(function() {
$full_page_background = $('.full-page-background');
$input = $(this);
if ($input.is(':checked')) {
if ($sidebar_img_container.length != 0) {
$sidebar_img_container.fadeIn('fast');
$sidebar.attr('data-image', '#');
}
if ($full_page_background.length != 0) {
$full_page_background.fadeIn('fast');
$full_page.attr('data-image', '#');
}
background_image = true;
} else {
if ($sidebar_img_container.length != 0) {
$sidebar.removeAttr('data-image');
$sidebar_img_container.fadeOut('fast');
}
if ($full_page_background.length != 0) {
$full_page.removeAttr('data-image', '#');
$full_page_background.fadeOut('fast');
}
background_image = false;
}
});
$('.switch-sidebar-mini input').change(function() {
$body = $('body');
$input = $(this);
if (md.misc.sidebar_mini_active == true) {
$('body').removeClass('sidebar-mini');
md.misc.sidebar_mini_active = false;
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();
} else {
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar('destroy');
setTimeout(function() {
$('body').addClass('sidebar-mini');
md.misc.sidebar_mini_active = true;
}, 300);
}
// we simulate the window Resize so the charts will get updated in realtime.
var simulateWindowResize = setInterval(function() {
window.dispatchEvent(new Event('resize'));
}, 180);
// we stop the simulation of Window Resize after the animations are completed
setTimeout(function() {
clearInterval(simulateWindowResize);
}, 1000);
});
});
});
</script>
<!-- Specific Page JS goes HERE -->
<!-- Google Maps Plugin -->
<script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
<script src="https://unpkg.com/esri-leaflet@2.5.1/dist/esri-leaflet.js"></script>
<script src="https://unpkg.com/esri-leaflet-geocoder@2.3.3/dist/esri-leaflet-geocoder.js"></script>
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw-src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.fullscreen/1.4.2/Control.FullScreen.min.js"></script>
<script>
var map = L.map('map', {
editable: true,
zoomControl: false,
drawControl: true
}).setView([-4.125826277307029, 104.1881561279297], 10);
maps = L.tileLayer('https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&s=Gal&apistyle=s.t:0|s.e:l|p.v:off', {
maxZoom: 22,
minZoom: 4,
}).addTo(map);
$("#button_hide").click(function() {
$("#panel-samping").css('display', 'none');
$("#button_hide").css('display', 'none');
})
$("#button_unhide").click(function() {
$("#panel-samping").css('display', 'block');
$("#button_hide").css('display', 'block');
})
</script>
</body>
</html>
\ No newline at end of file
<div class="gb_Pf gb_Bb"><a class="gb_Cb gb_Tf gb_2f gb_Pe gb_3c" id="gb_71" href="https://accounts.google.com/Logout?hl=id&amp;continue=https%3A%2F%2Fwww.google.co.id%2Fmaps%2Fplace%2FPolres%2BCimahi%2F%40-6.8881096%2C107.5282278%2C14z%2Fdata%3D!4m5!3m4!1s0x2e68e4367a7590eb%3A0x2b0884064bd6479c!8m2!3d-6.8847019!4d107.5530732&amp;service=local&amp;timeStmp=1632209201&amp;secTok=.AG5fkS_0blK3BAxZxsTO2xlIiDNp5l4Dag&amp;ec=GAdAcQ"
target="_top">Keluar</a></div>
<div class="gb_Qf gb_sb"><a class="gb_tb gb_Hb" href="https://policies.google.com/privacy?hl=id" target="_blank">Kebijakan Privasi</a><span class="gb_Oa" aria-hidden="true"></span><a class="gb_tb gb_Fb" href="https://myaccount.google.com/termsofservice?hl=id" target="_blank">Persyaratan Layanan</a></div>
</div>
\ No newline at end of file
......@@ -7,7 +7,49 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{title}}</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
<link href="{% static 'css/icons/icomoon/styles.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'css/bootstrap.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'css/core.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'css/components.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'css/colors.css' %}" rel="stylesheet" type="text/css">
<style>
@font-face {
font-family: 'gilroybold';
src: url('/static/css/gilroy-bold.woff') format('woff');
}
@font-face {
font-family: 'gilroylight';
src: url('/static/css/gilroy-light.woff') format('woff');
}
@font-face {
font-family: 'gilroysemibold';
src: url('/static/css/gilroy-semibold.woff') format('woff');
}
@font-face {
font-family: 'gilroymedium';
src: url('/static/css/Gilroy-Medium.woff') format('woff');
}
@font-face {
font-family: 'gilroyreguler';
src: url('/static/css/Gilroy-Regular.woff') format('woff');
}
@font-face {
font-family: 'gilroythin';
src: url('/static/css/Gilroy-Thin.woff') format('woff');
}
@font-face {
font-family: 'gilroyultralight';
src: url('/static/css/Gilroy-UltraLight.woff') format('woff');
}
#map {
width: auto;
height: 100%;
......@@ -51,7 +93,7 @@
cursor: pointer;
}
.leaflet-control-container {
#map>div.leaflet-control-container>div.leaflet-top.leaflet-left>div.leaflet-draw.leaflet-control>div>div {
display: none;
}
......@@ -236,7 +278,6 @@
left: -408px;
max-width: 100%;
float: right;
/* left: -5px; */
position: absolute;
z-index: 1000;
......@@ -447,6 +488,12 @@
.modal-dialog {
margin-top: 48px;
}
.navbar-nav>.dropdown-user img {
max-height: 37px;
margin-top: -4.5px;
border-radius: 50%;
}
</style>
{% include 'includes/css-o.html' %} {% include 'includes/css-m.html' %}
......@@ -468,12 +515,7 @@
<!-- Global stylesheets -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
<link href="{% static 'css/icons/icomoon/styles.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'css/bootstrap.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'css/core.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'css/components.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'css/colors.css' %}" rel="stylesheet" type="text/css"> {% block css %}
{% block css %}
<script src="{% static 'js/Leaflet.Editables.js' %}"></script>
......@@ -488,12 +530,16 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.fullscreen/1.4.2/Control.FullScreen.min.js"></script>
<script src="{% static 'js/plugins/notifications/sweet_alert.min.js' %}"></script>
<script type="text/javascript" src="https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js"></script>
<script type="text/javascript" src="{% static 'js/core/libraries/jquery.min.js' %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<link rel="stylesheet" href="{% static 'css/layout-style.css' %}"> {% endblock css %}
</head>
<body>
<body style="font-family: 'gilroylight';">
......@@ -502,14 +548,27 @@
<div class="page-container">
<!-- Page content -->
<div class="page-content" style="overflow: hidden;">
{% if user.is_authenticated %} {% include 'includes/sidebar.html' %}{% endif %}
{% if user.is_authenticated %} {% include 'includes/sidebar.html' %} {% endif %}
<div class="content-wrapper">
<div class="content">
<div id="map">
<div style=" height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
background-color: #5A9AFB;
opacity: 0.2;">
</div>
<div class="col-md-4 col-md-offset-4 input-group content-group head">
<div class="has-feedback has-feedback-left">
<input type="text" class="form-control input-xlg" value="Search..." style="border-radius: 10px 0px 0px 10px;">
<div class="form-control-feedback">
<i class="icon-location3 text-muted text-size-base" style="color: #5A9AFB;"></i>
......@@ -525,6 +584,8 @@
</div>
</div>
{% if user.is_authenticated %} {% else %}
<div class="col-md-6 col-md-offset-3 input-group content-group foot" style="top: 80%;background-color: white;z-index:999;border-radius:8px">
<div class="row">
<div class="col-md-1">
......@@ -546,7 +607,130 @@
</div>
</div>
{% endif %}
</div>
{% if user.is_authenticated %}
<div style="height: 10%;width: 10%;position: absolute;top: 30px;right: 65px;z-index: 999;">
<!-- <a href="#">
<div>
<img src="{% static 'img/placeholder.jpg' %}" style="width: 37px;height: 37px;border-radius: 25px;" />
</div>
</a> -->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown dropdown-user">
<a class="dropdown-toggle" data-toggle="dropdown">
{% for us in thisUser %}
{% if us.filepath %}
<img src="{% static 'img/' %}{{us.filepath}}"/>
{% else %}
<img src="{% static 'img/placeholder.jpg' %}"/>
{% endif %}
{% endfor %}
</a>
<ul class="dropdown-menu dropdown-menu-right" style="border-radius: 10px;right: 60px;top: 0px;width: 320px;padding: 18px;">
<li>
<div class="text-center" style="border-bottom: 0.5px solid #DCDCDC;margin-bottom:10px;">
<div style="margin-top: 10px;">
<div class="image_area">
<form method="post">
<label for="upload_image">
{% for us in thisUser %}
{% if us.filepath %}
<img src="{% static 'img/' %}{{us.filepath}}" id="uploaded_image" class="img-responsive img-circle" style="max-height: 65px;width: 65px;"/>
{% else %}
<img src="{% static 'img/placeholder.jpg' %}" id="uploaded_image" class="img-responsive img-circle" style="max-height: 65px;width: 65px;"/>
{% endif %}
{% endfor %}
<div class="overlay">
<div class="textover">
<i class="icon-camera" style="position: absolute;background-color: white;border-radius: 10px;top: 25%;right: 46%;width: 20px;height: 20px;" title="Ganti Foto Profil"></i>
</div>
</div>
<input type="file" name="image" class="image" id="upload_image" style="display:none" accept="image/png, image/gif, image/jpeg"/>
</label>
</form>
</div>
</div>
<div>
<span>{{user.username}}</span>
</div>
<div>
<span>{{user.email}}</span>
</div>
<div style="margin-bottom: 10px;">
<a href="#" class="btn btn-default" style="background-color: #ffffff;
border: 1px solid #dadce0;
-webkit-border-radius: 100px;
border-radius: 100px;
color: #3c4043;
display: inline-block;
font: 500 14px/16px Google Sans,Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
letter-spacing: 0.25px;
margin: 16px 0 0;
max-width: 254px;
outline: 0;
padding: 8px 16px;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;">Kelola Akun</a>
</div>
</div>
</li>
{% if user.is_superuser or user.is_staff %}
<li>
<div style="border-bottom: 0.5px solid #DCDCDC;margin-bottom:10px;">
<div style="margin-bottom: 10px;">
<a href="{% url 'usermanagement' %}" style=" background-color: #ffffff;
color: #3c4043;
display: table;
font: 500 14px/16px Google Sans,Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
letter-spacing: 0.25px;
outline: 0;
padding: 14px 41px;
text-align: center;
text-decoration: none;
width: 100%;"><i class="icon-user"></i>&nbsp;&nbsp;Kelola User</a>
</div>
</div>
</li>
{% endif %}
<li>
<div class="text-center">
<a href="{% url 'logout' %}" style="background-color: #ffffff;
border: 1px solid #dadce0;
-webkit-border-radius: 4px;
border-radius: 4px;
display: inline-block;
font: 500 14px/16px Google Sans,Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
letter-spacing: .15px;
margin: 16px;
outline: 0;
padding: 10px 24px;
text-align: center;
text-decoration: none;
white-space: normal;"> Logout</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
{% endif %}
<div id="map-cesium" style="z-index: -999; height: 100vh; display:none">
<div class="label-bangunan" style="margin: 0px 0 0px 0px;padding-top: 55px;position: absolute;z-index: 1;right: 20px;">
<label style="background-color: white;">
......@@ -579,7 +763,7 @@
<!-- 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>
<script type="text/javascript" src="{% static 'js/core/libraries/bootstrap.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/plugins/loaders/blockui.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/plugins/ui/nicescroll.min.js' %}"></script>
......@@ -596,6 +780,12 @@
<script type="text/javascript" src="{% static 'js/plugins/pickers/daterangepicker.js' %}"></script>
<script type="text/javascript" src="{% static 'js/plugins/forms/styling/switch.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/pages/form_checkboxes_radios.js' %}"></script>
<script type="text/javascript " src="{% static 'js/apexcharts.min.js' %}"></script>
<script type="text/javascript " src="{% static 'js/apexcharts.js' %}"></script>
<!-- <script type="text/javascript" src="{% static 'js/plugins/media/cropper.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/pages/extension_image_cropper.js' %}"></script> -->
<!-- /theme JS files -->
......@@ -610,3 +800,48 @@
</html>
{% include 'includes/js-o.html' %} {% include 'includes/js-m.html' %}
<script>
$("#upload_image").change(function() {
loaderPage(true)
readURL(this);
const fileupload1 = $(this).prop('files')[0];
var formData = new FormData();
formData.append("id", $("#iduseredt").val());
formData.append("inifile", fileupload1)
$.ajax({
url: "{% url 'editpp' %}",
data: formData,
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"
}).then((isConfirm) => {
location.reload()
})
} else {
swal({
title: 'Error',
text: 'Hubungi Developer',
type: "warning",
icon: "error",
confirmButtonColor: "#00BCD4"
})
}
}
})
});
</script>
\ No newline at end of file
......@@ -38,7 +38,6 @@
.modal-backdrop {
z-index: -1!important;
}
.sidebar {
......@@ -116,8 +115,7 @@
height: 270px;
}
#placelg{
#placelg {
object-fit: cover;
object-position: center center;
width: 30px;
......@@ -132,7 +130,7 @@
border: 1px solid red;
}
.modal-lg{
.modal-lg {
max-width: 1000px !important;
}
......@@ -164,8 +162,6 @@
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
......@@ -241,15 +237,11 @@
<div class="sidebar-user">
<div class="category-content">
<div class="media">
{% for us in thisUser %}
{% if us.filepath %}
{% for us in thisUser %} {% if us.filepath %}
<a href="#" class="media-left"><img src="{% static 'img/' %}{{us.filepath}}" class="img-circle img-sm" alt=""></a>
{% else %}
<a href="#" class="media-left"><img src="{% static '/img/placeholder.jpg' %}" class="img-circle img-sm" alt=""></a>
{% endif %}
{% endfor %}
{% endif %} {% endfor %}
<div class="media-body">
......@@ -507,7 +499,7 @@
<div class="row">
<div class="col-md-6">
<label>Username </label>
<input type="text" id="username" class="form-control" value="{{us.username}}"readonly>
<input type="text" id="username" class="form-control" value="{{us.username}}" readonly>
</div>
</div>
......@@ -537,7 +529,7 @@
<div class="row">
<div class="col-md-6">
<label>Email </label>
<input type="text" id="useremail" class="form-control" value="{{us.email}}"readonly>
<input type="text" id="useremail" class="form-control" value="{{us.email}}" readonly>
</div>
</div>
......@@ -969,7 +961,7 @@
<h6 class="modal-title"> Edit Password</h6>
</div>
<div class="modal-body">
<div >
<div>
<div class="alert alert-danger" id="notifications" style="display: none">
</div>
......@@ -989,7 +981,7 @@
<div class="col-md-12">
<label class="control-label"> Password saat ini :</label>
<input type="password" id="currentPass" class="form-control" >
<input type="password" id="currentPass" class="form-control">
</div>
</div>
......@@ -998,7 +990,7 @@
<div class="col-md-12">
<label class="control-label"> Password baru :</label>
<input type="password" id="newPass" class="form-control" >
<input type="password" id="newPass" class="form-control">
</div>
</div>
......@@ -1007,7 +999,7 @@
<div class="col-md-12">
<label class="control-label"> Ulangi password baru :</label>
<input type="password" id="renewPass" class="form-control" >
<input type="password" id="renewPass" class="form-control">
</div>
</div>
......@@ -1268,8 +1260,7 @@
<!-- <script type="text/javascript" src="{% static 'js/plugins/ui/ripple.min.js' %}"></script> -->
<!-- /theme JS files -->
{% include 'includes/scripts.html' %}
{% include 'layout/userprofile.html' %}
{% include 'includes/scripts.html' %} {% include 'layout/userprofile.html' %}
<script src="{% static 'js/leaflet-bing-layer.js' %}"></script>
<!-- <script src="https://unpkg.com/sweetalert/dists/sweetalert.min.js"></script> -->
......@@ -1349,15 +1340,15 @@
const urlParams = new URLSearchParams(queryString);
const page = urlParams.get('page')
if (page == "group" ) {
if (page == "group") {
$("#usergroup").css("display", "block");
$("#info-maps").css("display", "none");
$("#userprofile").css("display", "none");
} else if(page == "user" || page == null){
} else if (page == "user" || page == null) {
$("#usergroup").css("display", "none");
$("#info-maps").css("display", "block");
$("#userprofile").css("display", "none")
} else{
} else {
$("#usergroup").css("display", "none");
$("#info-maps").css("display", "none");
$("#userprofile").css("display", "block");
......@@ -1872,11 +1863,11 @@
//user profile js
$("#save-edt-password").on("click", function(){
$("#save-edt-password").on("click", function() {
changepassword();
})
function changepassword(){
function changepassword() {
var isObject = {};
isObject.id = $("#iduseredt").val();
......@@ -1885,7 +1876,7 @@
isObject.renewPass = $("#renewPass").val();
isObject.username = $("#usernameedt").val();
if(isObject.currPass == "" || isObject.newPass == "" || isObject.renewPass == ""){
if (isObject.currPass == "" || isObject.newPass == "" || isObject.renewPass == "") {
$("#notifications").css("display", "block")
$("#notifications").html("Inputan tidak boleh kosong")
......@@ -1922,11 +1913,11 @@
}
$("#save-edit-profile").on("click", function(){
$("#save-edit-profile").on("click", function() {
editprofile();
})
function editprofile(){
function editprofile() {
var isObject = {}
isObject.id = $("#iduseredt").val();
......@@ -1934,14 +1925,14 @@
isObject.last_name = $("#lastnameedt").val();
isObject.email = $("#emailedts").val()
if(isObject.first_name == "" || isObject.last_name == "" || isObject.email == ""){
if (isObject.first_name == "" || isObject.last_name == "" || isObject.email == "") {
$("#notificationsprop").css("display", "block");
$("#notificationsprop").html("Inputan tidak boleh kosong")
return false
}else{
} else {
var mail_format = /^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/;
if(!isObject.email.match(mail_format)){
if (!isObject.email.match(mail_format)) {
$("#notificationsprop").css("display", "block");
$("#notificationsprop").html("Format email tidak valid, silahkan coba kembali.")
return false
......@@ -2032,6 +2023,4 @@
}
})
});
</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