Commit 3a79ac61 authored by Muhamad's avatar Muhamad

user profile, jalan perbaikan, etc

parent 86c68770
......@@ -195,6 +195,22 @@ body>div.page-container>div>div.sidebar.sidebar-main>div>img {
margin-bottom: 20px;
}
#modal_detail_perbaikan_dash>div>div>div>div.isi.text>div>div>div:nth-child(1)>span {
font-size: 12px;
line-height: 14px;
}
#modal_detail_perbaikan_dash>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_dash>div>div>div>div.isi.text>div>div {
margin-left: 40px;
margin-bottom: 20px;
}
.hid {
transform: rotate( 180deg);
}
......@@ -206,6 +222,18 @@ body>div.page-container>div>div.sidebar.sidebar-main>div>img {
height: 20px;
}
.tab_personal_information {
margin: 10px;
}
#formmen>div>div>div>div {
margin-bottom: 10px;
}
#formmen>div>div>div>div>div>input {
font-family: 'gilroylight';
}
@media (max-width: 1025px) {
.dock {
position: absolute;
......
<svg width="28" height="37" viewBox="0 0 28 37" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path d="M13.9966 6.99054e-10C11.8822 0.00183716 9.85438 0.874018 8.35608 2.42605C6.85779 3.97808 6.01076 6.08383 6 8.28339C6 11.5812 7.77853 14.3423 9.08188 16.3549L9.31947 16.7221C10.6162 18.6773 12.0073 20.5628 13.4875 22.3715L14.0034 23L14.5193 22.3715C15.9993 20.5626 17.3904 18.6771 18.6873 16.7221L18.9249 16.3479C20.2215 14.3353 22 11.5812 22 8.28339C21.9892 6.08261 21.1413 3.97579 19.6415 2.42356C18.1417 0.871329 16.1122 -2.84983e-05 13.9966 6.99054e-10ZM13.9966 12.0049C13.1159 12.0049 12.2549 11.7332 11.5226 11.2242C10.7903 10.7152 10.2195 9.99168 9.88246 9.1452C9.54541 8.29873 9.45723 7.36729 9.62905 6.46868C9.80088 5.57006 10.225 4.74463 10.8478 4.09677C11.4706 3.4489 12.264 3.0077 13.1278 2.82896C13.9917 2.65021 14.887 2.74195 15.7007 3.09257C16.5144 3.44319 17.2099 4.03695 17.6992 4.79876C18.1886 5.56057 18.4497 6.45621 18.4497 7.37243C18.4497 8.60104 17.9806 9.77933 17.1454 10.6481C16.3103 11.5168 15.1776 12.0049 13.9966 12.0049Z" fill="#5A9AFB"/>
</g>
<defs>
<filter id="filter0_d" x="0" y="0" width="28" height="37" 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="3"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.4875 0 0 0 0 0.6925 0 0 0 0 1 0 0 0 0.82 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.0748 24.6313C19.9049 24.6313 24.6311 19.9051 24.6311 14.075C24.6311 8.24499 19.9049 3.5188 14.0748 3.5188C8.24475 3.5188 3.51855 8.24499 3.51855 14.075C3.51855 19.9051 8.24475 24.6313 14.0748 24.6313Z" stroke="#212232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.0748 21.1125C15.0465 21.1125 15.8342 20.3248 15.8342 19.3531C15.8342 18.3814 15.0465 17.5938 14.0748 17.5938C13.1031 17.5938 12.3154 18.3814 12.3154 19.3531C12.3154 20.3248 13.1031 21.1125 14.0748 21.1125Z" fill="#212232"/>
<path d="M14.075 14.9552C14.684 14.9552 15.2792 14.7746 15.7855 14.4363C16.2919 14.098 16.6865 13.6171 16.9195 13.0545C17.1526 12.4919 17.2135 11.8729 17.0947 11.2756C16.9759 10.6784 16.6827 10.1297 16.2521 9.69916C15.8215 9.26856 15.2729 8.97533 14.6757 8.85652C14.0784 8.73772 13.4594 8.7987 12.8968 9.03173C12.3342 9.26477 11.8533 9.6594 11.515 10.1657C11.1767 10.672 10.9961 11.2673 10.9961 11.8763" stroke="#212232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.5566 7.25269H23.7522" stroke="#212232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.5571 14.2903H23.752" stroke="#212232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.5571 21.328H23.752" stroke="#212232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.39844 7.25269H6.15785" stroke="#212232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.39893 14.2903H6.15766" stroke="#212232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.39893 21.328H6.15766" stroke="#212232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.44582 21.1166L23.0399 21.1166C24.0116 21.1166 24.7993 20.3289 24.7993 19.3572V7.04131C24.7993 6.06961 24.0116 5.2819 23.0399 5.2819L5.44582 5.2819C4.47413 5.2819 3.68641 6.06961 3.68641 7.04131V19.3572C3.68641 20.3289 4.47413 21.1166 5.44582 21.1166Z" stroke="#212232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.7618 25.0752H10.7241" stroke="#212232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.0755 25.1478C19.9057 25.1478 24.6319 20.4215 24.6319 14.5914C24.6319 8.7612 19.9057 4.03491 14.0755 4.03491C8.24533 4.03491 3.51904 8.7612 3.51904 14.5914C3.51904 20.4215 8.24533 25.1478 14.0755 25.1478Z" stroke="url(#paint0_linear)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.0753 18.1103C16.5045 18.1103 18.4738 16.141 18.4738 13.7118C18.4738 11.2825 16.5045 9.31323 14.0753 9.31323C11.646 9.31323 9.67676 11.2825 9.67676 13.7118C9.67676 16.141 11.646 18.1103 14.0753 18.1103Z" stroke="url(#paint1_linear)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.01562 22.4399C7.67827 21.1371 8.68852 20.043 9.93452 19.2789C11.1805 18.5147 12.6137 18.1102 14.0753 18.1102C15.537 18.1102 16.9702 18.5147 18.2162 19.2789C19.4622 20.043 20.4724 21.1371 21.1351 22.4399" stroke="url(#paint2_linear)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear" x1="14.0755" y1="-15.7584" x2="41.667" y2="28.3032" gradientUnits="userSpaceOnUse">
<stop stop-color="#4C97DC"/>
<stop offset="1" stop-color="#4969DA"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="14.0753" y1="1.066" x2="25.5717" y2="19.425" gradientUnits="userSpaceOnUse">
<stop stop-color="#4C97DC"/>
<stop offset="1" stop-color="#4969DA"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="14.0753" y1="14.0511" x2="16.4049" y2="26.1829" gradientUnits="userSpaceOnUse">
<stop stop-color="#4C97DC"/>
<stop offset="1" stop-color="#4969DA"/>
</linearGradient>
</defs>
</svg>
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M24.4706 24.4612V6.10823C24.4706 3.93957 23.4876 1.76225 21.9052 0.42595L21.4118 0.00933838L20.9184 0.426001C19.3359 1.76225 18.3529 3.93957 18.3529 6.10823V11.6247C17.6896 10.5955 16.8272 9.68919 15.7973 8.96828L11.4706 5.93953L7.14383 8.96828C4.58589 10.7588 3.05882 13.6918 3.05882 16.8141V18.3435H1.52941V24.4612H0V25.9906H26V24.4612H24.4706ZM22.9412 7.63764H19.8824V6.10823H22.9412V7.63764ZM21.4118 2.07262C22.0362 2.76396 22.4976 3.6394 22.7425 4.57881H20.0811C20.3259 3.63945 20.7874 2.76396 21.4118 2.07262ZM8.02085 10.2212L11.4706 7.80638L14.9203 10.2212C16.6453 11.4287 17.8116 13.2547 18.2053 15.2847H4.73593C5.1296 13.2547 6.29593 11.4287 8.02085 10.2212ZM4.58824 16.8141H18.3529V18.3435H4.58824V16.8141ZM3.05882 19.8729H19.8824V21.4024H14.9774L11.9186 24.4612H3.05882V19.8729ZM14.0814 24.4612L15.6109 22.9318H19.8824V24.4612H14.0814ZM21.4118 24.4612V18.3435H19.8824C19.8824 17.9019 19.8824 9.56562 19.8824 9.16705H22.9412V24.4612H21.4118Z" fill="#7DC74F"/>
<path d="M4.58838 21.4024H6.11779V22.9318H4.58838V21.4024Z" fill="#7DC74F"/>
<path d="M7.64697 21.4024H9.17639V22.9318H7.64697V21.4024Z" fill="#7DC74F"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="26" height="26" fill="white"/>
</clipPath>
</defs>
</svg>
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -1132,7 +1132,20 @@
var path_img = `"static/image/tuplah/` + feature.legend.f4 + `"`
}
$(".gambar_keterangan").html(`<img src="` + path_img + `" alt="" style="width:360px;height:290px;border-top-left-radius: 10px;border-top-right-radius: 10px;">`)
$(".gambar_keterangan").html(`<img src="` + path_img + `" alt="" style="width:100%;height:240px;border-top-left-radius: 10px;border-bottom-right-radius: 10px;">`)
$(".btn_action").html(`<div class="tombol-edit-keterangan text-center" style="
background-color: #5A9AFB;
position: absolute;
width: 40px;
height: 40px;
bottom: 2px;
right: 5px;
border: 1pt solid rosybrown;
border-radius: 8px;
">
<a href="#" class="btn" id="btn_edit_tuplah" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;"><i class="icon-pencil5"></i></a>
</div>`)
$(".nama_keterangan").html(feature.legend.f2)
......@@ -1252,7 +1265,6 @@
$(document).on("click", "#btn_edit_tuplah", function() {
if (map_edit_tuplah.hasLayer(polygon_edit_tuplah)) {
polygon_edit_tuplah.remove()
}
......@@ -1266,6 +1278,8 @@
},
dataType: 'json',
success: function(data) {
$("#modal-edit-tuplah").modal("show")
$("#modal_detail_non_kelurahan").modal("toggle")
loaderPage(false);
let response = data
if (response.code == 0) {
......@@ -2015,29 +2029,67 @@
layer.on({
click: function(e) {
$("#modal_detail_non_kelurahan").modal(show);
var geogeo = geocodeService.reverse().latlng(e.latlng).run(function(error, result) {
$("#modal_detail_non_kelurahan").modal('show');
if (feature.properties.f2 == null) {
var namajalan = "unnamed"
}
if (feature.properties.f6 == 'None') {
var path_img = "static/img/image_null.png"
} else {
var path_img = `"static/image/jalan/` + feature.properties.f6 + `"`
}
$(".gambar_keterangan").html(`<img src="` + path_img + `" alt="" style="width:360px;height:290px;border-top-left-radius: 10px;border-top-right-radius: 10px;">`)
$(".gambar_keterangan").html(`<img src="` + path_img + `" alt="" style="width:100%;height:240px;border-top-left-radius: 10px;border-bottom-left-radius: 10px;">`)
$(".nama_keterangan").html(feature.legend.f2)
$(".nama_keterangan").html(namajalan)
$(".isi_keterangan").html(`
<input type="text" name="idjalan" id="idjalan" class="hidden" value="">
$(".btn_action").html(`<div class="tombol-edit-keterangan text-center" style="background-color: #5A9AFB;position: absolute;width: 40px;height: 40px;bottom: 2px;right: 5px;border: 1pt solid rosybrown;border-radius: 8px;">
<a href="#" id="btn_jalan" class="btn" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;"><i class="icon-pencil5"></i></a>
</div>
<div class="tombol-delete-keterangan text-center" style="background-color: indianred;position: absolute;width: 40px;height: 40px;bottom: 2px;right: 50px;border: 1pt solid rosybrown;border-radius: 10px;">
<a href="#" id="btn_hapus_jalan" class="btn" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;"><i class="icon-eraser2"></i></a>
</div>
`)
<input type="text" name="coordinatejalan" id="coordinatejalan" class="hidden" value="">
if (feature.properties.f7 != null) {
var list_history = feature.properties.f7
console.log(list_history[0].split(",")[0])
var perbaikan_jl = `<div class='row'>
<label class="col-md-8">` + list_history[0].split(",")[1] + `</label>
<a class="col-md-4" onclick="getdetailper(` + list_history[0].split(",")[0] + `)" data-toggle="modal" data-target="#modal_detail_perbaikan_dash"><i>Detail</i></a>
</div>
<a class="col-md-6" class="btn" id="btn_perbaikan_jalan"><i>Input Perbaikan</i></a>`
} else {
var perbaikan_jl = `<div class='row'>
<div class="col-md-6">
<label class="col-md-6">Null</label>
</div>
<a class="col-md-6" class="btn" id="btn_perbaikan_jalan"><i>Input Perbaikan</i></a>
</div>`
}
$(".isi_keterangan").html(`
<input type="text" name="idjalan" id="idjalan" class="hidden" value="">
<input type="text" name="coordinatejalan" id="coordinatejalan" class="hidden" value="">
<div>
<div>
<span>Panjang Jalan</span>
</div>
<div>
<span>` + feature.legend.f3 + `m</span>
<span>` + feature.properties.f3 + `m</span>
</div>
</div>
<div>
......@@ -2048,8 +2100,7 @@
<span style="font-family: 'Roboto';">` + feature.properties.f4 + ` m</span>
</div>
</div>
</div>
<div class="col-md-6">
<div>
<div>
<span>Tipe Jalan</span>
......@@ -2058,7 +2109,16 @@
<span>` + feature.properties.f5 + `</span>
</div>
</div>
<div>
<div>
<span>Perbaikan Terakhir</span>
</div>
<div>
<span>` + perbaikan_jl + `</span>
</div>
</div>
`)
//if (result.address.Address != '') {
// var nmjalan = result.address.Address
......@@ -2103,8 +2163,8 @@
//}
//
$('#namajalan').val(feature.legend.f2);
});
$('#namajalan').val(feature.properties.f2);
$('#idjalan').val(feature.properties.f1);
$('#panjangjalan').val(feature.properties.f3);
......@@ -2236,6 +2296,8 @@
dataType: 'json',
success: function(data) {
loaderPage(false);
$("#modal-jalan").modal("show")
$(".modal_detail_non_kelurahan").modal("hide")
setTimeout(function() {
map_edit_jalan.invalidateSize();
}, 1000);
......@@ -2784,56 +2846,96 @@
};
function getdetailper(id) {
$.ajax({
url: "{% url 'apps:get-detail-perbaikan' %}",
data: {
'id': id
},
dataType: 'json',
success: function(data) {
console.log(data)
isi_modal_detail = []
for (var i = 0; i < data.length; i++) {
isi_modal_detail.push(`<tr>
<td>` + i + `</td>
<td>` + data[i].name + `</td>
<td>` + data[i].type + `</td>
<td>` + data[i].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" target="_blank">View</a></td>
<td><a href="media/bukti_penyelesaian/` + data[i].bukti_selesai + `" onclick="viewBukti()" id="view-bukti" target="_blank">View</a></td>
</tr>`)
var map_detail_perbaikan = L.map('map_detail_perbaikan_dash', {
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);
setTimeout(function() {
map_detail_perbaikan.invalidateSize();
}, 500);
if (data.length === 0) {
$(".nama_detail_dash").text("Null");
$(".type_detail_dash").html("Null");
$(".tanggal_perbaikan_detail_dash").html("Null")
$(".anggaran_detail_dash").html("Null")
$(".penanggung_jawab_detail_dash").html("Null")
$(".penanggung_jawab_lapangan_detail_dash").html("Null")
$(".kontraktor_detail_dash").html("Null")
$(".panjang_jalan_detail_dash").html("Null")
$(".lebar_jalan_detail_dash").html("Null")
$(".proposal_detail_dash").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_dash").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_dash").html(data[0]['name']);
$(".type_detail_dash").html(data[0]['type'])
$(".tanggal_perbaikan_detail_dash").text(data[0]['tgl_perbaikan'])
$(".anggaran_detail_dash").html(data[0]['anggaran'])
$(".penanggung_jawab_detail_dash").html(data[0]['pj'])
$(".penanggung_jawab_lapangan_detail_dash").html(data[0]['pj_lapangan'])
$(".kontraktor_detail_dash").html(data[0]['kontraktor'])
$(".panjang_jalan_detail_dash").html(data[0]['panjang'])
$(".lebar_jalan_detail_dash").html(data[0]['lbr_jln_reno'])
$(".proposal_detail_dash").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_dash").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);
}
$("#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>`)
}
});
......@@ -2881,6 +2983,7 @@
map_input.setView([latlngs['geometry']['coordinates'][0][0][1], latlngs['geometry']['coordinates'][0][0][0]], 17)
geo_jalan_input.addData(data[3]);
$("#map-insert > div.leaflet-control-container > div.leaflet-top.leaflet-left > div:nth-child(1) > div > div > a.leaflet-draw-draw-marker").css("display", "none")
}
})
......
{% load static %}
<div class="legendapo" id="legendapo" style="bottom: 0px;display:none">
<!-- <div class="legendapo" id="legendapo" style="bottom: 0px;display:none">
<div>
<a href="#" onclick="hidelegend()" class="btn btn-default" id="button_hide_point"><span class="caret" style="margin-left: -5px;"></span></a>
</div>
......@@ -303,4 +303,4 @@
</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>
</div>
\ No newline at end of file
</div> -->
\ No newline at end of file
......@@ -352,6 +352,11 @@
font-family: 'gilroysemibold';
}
#modal_detail_non_kelurahan>div>div>div.modal-body>fieldset>div>div:nth-child(2)>div>div>div>div:nth-child(2) {
margin-bottom: 10px;
font-family: 'gilroysemibold';
}
li.active>a:after {
border-bottom: 2pt solid #60B2FD;
}
......@@ -498,9 +503,9 @@
</div>
</div>
<div class="modal fade" id="modal_detail_non_kelurahan" tabindex="-1" role="dialog">
<div class="modal-dialog modal-md" style="width: 362px;max-height: 500px;min-height: 500px;">
<div class="modal-content" style="border-radius:10px;max-height: 500px;min-height: 500px;">
<div class="modal fade" id="modal_detail_non_kelurahan" tabindex="-1" role="dialog" style="z-index: 1;margin-left: 6%;">
<div class="modal-dialog modal-md" style="top: 20%;">
<div class="modal-content" style="border-radius:10px;">
<div class="modal-body" style="padding: 0px;">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style=" margin: 0px 8px 0px 0px;
width: 25px;
......@@ -510,18 +515,23 @@
position: absolute;
right: 0px;
opacity: 1;
z-index: 999;
border-radius: 12px;">×</button>
<fieldset>
<div class="row">
<div class="col-md-6">
<div class="gambar_keterangan">
<img src="/static/img/image_null.png" alt="" style="width:360px;height:290px;border-top-left-radius: 10px;border-top-right-radius: 10px;">
<img src="/static/img/image_null.png" alt="" style="width:100%;height:240px;border-top-left-radius: 10px;border-bottom-left-radius: 10px;">
</div>
<div style="margin: 10px;">
<div style="font-family: 'gilroybold';margin-bottom: 10px;" class="nama_keterangan">
<div style="font-family: 'gilroybold';margin: 10px;" class="nama_keterangan">
NAMADESA
</div>
<div class="row isi_keterangan">
</div>
<div class="col-md-6">
<div style="margin: 10px;">
<div class="row isi_keterangan" style="margin-top: 25px;">
<div class="col-md-6">
<div>
<div>
......@@ -561,25 +571,44 @@
</div>
</div>
</div>
</div>
</fieldset>
</div>
<div class="tombol-edit-keterangan text-center" style="background-color: #5A9AFB;
<div class="btn_action">
<div class="tombol-edit-keterangan text-center" style="
background-color: #5A9AFB;
position: absolute;
border-bottom-left-radius: 8px;
border-top-right-radius: 8px;
width: 80px;
height: 45px;
bottom: 0px;">
<a href="#" class="btn" style=" border-bottom-left-radius: 8px;
border-top-right-radius: 8px;
width: 80px;
height: 45px;
bottom: 0px;
color: white;">Edit</a>
width: 40px;
height: 40px;
bottom: 2px;
right: 5px;
border: 1pt solid rosybrown;
border-radius: 8px;
">
<a href="#" class="btn" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;"><i class="icon-pencil5"></i></a>
</div>
<div class="tombol-delete-keterangan text-center" style="
background-color: indianred;
position: absolute;
width: 40px;
height: 40px;
bottom: 2px;
right: 50px;
border: 1pt solid rosybrown;
border-radius: 10px;
">
<a href="#" class="btn" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;"><i class="icon-eraser2"></i></a>
</div>
</div>
</div>
</div>
</div>
......@@ -669,3 +698,602 @@
</div>
</div>
</div>
<div class="modal fade" id="user_profile" tabindex="-1" role="dialog" style="margin-left: 50px;">
<div class="modal-dialog" style="width: 100%;
margin: 0px;
height: 100vh;">
<div class="modal-content" style="height: 100vh;">
<div class="modal-body">
<div class="row">
<div class="col-md-3" style="border-right: 0.1pt solid #E2E2E2;">
<div style="height: 100vh;">
<div class="text-center">
<div style="margin-top: 90px;">
<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: 120px!important;
width: 120px!important;
max-width: 120px!important;
height: 120px!important;"/>
{% else %}
<img src="{% static 'img/placeholder.jpg' %}" id="uploaded_image" class="img-responsive img-circle" style="max-height: 120px!important;
width: 120px!important;
max-width: 120px!important;
height: 120px!important;"/>
{% 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 style="font-family: 'gilroysemibold';">{{user.username}}</span>
</div>
<div>
<span>{{user.email}}</span>
</div>
</div>
<div class="text-left" style="margin-top: 100px;">
<div style="margin-bottom: 10px;">
<a href="#personalinformation" data-toggle="tab" class="btn btn-default" style="
width: 90%;
background: #FFFFFF;
border: 1px solid #4A7ADB;
box-sizing: border-box;
border-radius: 5px;">
<div class="row">
<div class="col-sm-2">
<img src="{% static 'img/icon-1/personalinfo.svg' %}" alt="">
</div>
<div class="col-sm-8 text-left" style="margin-top: 4px;">
Personal Information
</div>
<div class="col-sm-2">
<i class="caret" style="transform: rotate(-90deg);margin-top: 4px;"></i>
</div>
</div>
</a>
</div>
{% if user.is_superuser %}
<div style="margin-bottom: 10px;">
<a href="#informationdatauser" data-toggle="tab" class="btn btn-default" style="
width: 90%;
background: #FFFFFF;
border: 1px solid #4A7ADB;
box-sizing: border-box;
border-radius: 5px;">
<div class="row">
<div class="col-sm-2">
<img src="{% static 'img/icon-1/infodatauser.svg' %}" alt="">
</div>
<div class="col-sm-8 text-left" style="margin-top: 4px;">
Information Data User
</div>
<div class="col-sm-2">
<i class="caret" style="transform: rotate(-90deg);margin-top: 4px;"></i>
</div>
</div>
</a>
</div>
{% endif %}
<div style="margin-bottom: 10px;">
<a href="#monitoringdatauser" data-toggle="tab" class="btn btn-default" style="
width: 90%;
background: #FFFFFF;
border: 1px solid #4A7ADB;
box-sizing: border-box;
border-radius: 5px;">
<div class="row">
<div class="col-sm-2">
<img src="{% static 'img/icon-1/monitordatauser.svg' %}" alt="">
</div>
<div class="col-sm-8 text-left" style="margin-top: 4px;">
Monitoring Data Area
</div>
<div class="col-sm-2">
<i class="caret" style="transform: rotate(-90deg);margin-top: 4px;"></i>
</div>
</div>
</a>
</div>
<div style="margin-bottom: 10px;">
<a href="#help" data-toggle="tab" class="btn btn-default" style="
width: 90%;
background: #FFFFFF;
border: 1px solid #4A7ADB;
box-sizing: border-box;
border-radius: 5px;">
<div class="row">
<div class="col-sm-2">
<img src="{% static 'img/icon-1/help.svg' %}" alt="">
</div>
<div class="col-sm-8 text-left" style="margin-top: 4px;">
Help
</div>
<div class="col-sm-2">
<i class="caret" style="transform: rotate(-90deg);margin-top: 4px;"></i>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-9">
<div class="tab-content">
<div class="tab-pane active" id="personalinformation" style="font-family: 'gilroysemibold';">
<div style="border-bottom: 1pt solid #E2E2E2;">
<div class="tab_personal_information" style="color: #4378C8;">
BASIC SETTING
</div>
</div>
<div style="border-bottom: 1pt solid #E2E2E2;">
<div class="tab_personal_information" style="margin:0px;">
<div class="alert alert-danger" id="notificationsprop" style="display: none">
</div>
<form class="form-horizontal" id="formmen" method="post" enctype="multipart/form-data">
<div class="panel-body">
<div class="row">
{% for us in thisUser %}
<input type="text" id="iduseredt" value="{{us.id}}" hidden>
<div class="col-md-6">
<div class="form-group">
<div class="col-md-12">
<label class="control-label"> Nama Depan:</label>
<input type="text" id="firstnameedt" class="form-control" value="{{us.firstname}}">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="col-md-12">
<label class="control-label"> Nama Belakang:</label>
<input type="text" id="lastnameedt" class="form-control" value="{{us.lastname}}">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="col-md-12">
<label class="control-label"> Email :</label>
<input type="text" id="emailedts" class="form-control" value="{{us.email}}">
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</form>
</div>
</div>
<div style="border-bottom: 1pt solid #E2E2E2;">
<div class="tab_personal_information" style="color: #4378C8;">
SECURITY SETTING
</div>
</div>
<div style="border-bottom: 1pt solid #E2E2E2;">
<div class="tab_personal_information" style="margin:0px;">
<div>
<div class="alert alert-danger" id="notifications" style="display: none">
</div>
</div>
<form class="form-horizontal" id="formmen" method="post" enctype="multipart/form-data">
<div class="panel-body">
<div class="row">
{% for us in thisUser %}
<input type="text" id="usernameedt" value="{{us.username}}" hidden>
<input type="text" id="iduseredt" value="{{us.id}}" hidden>
<!-- <input type="text" id="current" value="{{us.password}}"> -->
{% endfor %}
<div class="col-md-6">
<div class="form-group">
<div class="col-md-12">
<label class="control-label"> Password saat ini :</label>
<input type="password" id="currentPass" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<label class="control-label"> Password baru :</label>
<input type="password" id="newPass" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<label class="control-label"> Ulangi password baru :</label>
<input type="password" id="renewPass" class="form-control">
</div>
</div>
</div>
<div class="col-md-6">
<div class="text-center">
<img src="{% static 'img/icon-1/male-holding-magnifying-glass.png' %}" alt="" style="height: 138px;
width: 178px;">
</div>
<div class="help">
<span style="font-size: 12px;">
Password tidak boleh mirip dengan informasi pribadi Anda yang lain, Password harus mengandung setidaknya 8 karakter, Password Anda tidak boleh berupa kata sandi yang umum digunakan, Password tidak boleh sepenuhnya numerik.
</span>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div>
<div class="tab_personal_information">
<div style="float: right;">
<button type="button" class="btn btn-link" data-dismiss="modal" style="width: 120px;height: 35px;border-color: #BABABA;border-radius: 10px;">Close</button>
<button type="button" id="btnsaveuser" class="btn btn-info" style="width: 120px;height: 35px;border-radius: 10px;">Save changes</button>
</div>
</div>
</div>
<div>
</div>
</div>
{% if user.is_superuser %}
<div class="tab-pane" id="informationdatauser">
informationdatauser
</div>
{% endif %}
<div class="tab-pane" id="monitoringdatauser">
monitoringdatauser
</div>
<div class="tab-pane" id="help">
help
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="modal_detail_perbaikan_dash" 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" aria-hidden="true" style="color: white;padding: 3px;">
<span>x</span>
</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_dash">NAMA JALAN</span>
</div>
</div>
</div>
<div class="isi_detail_cek ">
<div>
<div>
<span>Type</span>
</div>
<div>
<span class="type_detail_dash">NAMA JALAN</span>
</div>
</div>
</div>
<div class="isi_detail_cek ">
<div>
<div>
<span>Tanggal perbaikan</span>
</div>
<div>
<span class="tanggal_perbaikan_detail_dash">NAMA JALAN</span>
</div>
</div>
</div>
<div class="isi_detail_cek ">
<div>
<div>
<span>Anggaran</span>
</div>
<div>
<span class="anggaran_detail_dash">NAMA JALAN</span>
</div>
</div>
</div>
<div class="isi_detail_cek ">
<div>
<div>
<span>Penanggung jawab</span>
</div>
<div>
<span class="penanggung_jawab_detail_dash">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_dash">NAMA JALAN</span>
</div>
</div>
</div>
<div class="isi_detail_cek ">
<div>
<div>
<span>Kontraktor</span>
</div>
<div>
<span class="kontraktor_detail_dash">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_dash">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_dash">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_dash ">
<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_dash">
<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 class="map_detail_p">
<div id="map_detail_perbaikan_dash" style=" position: relative; height: 220px; width: 90%; border-radius: 5px; ">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content-wrapper modal" id="input_perbaikan" style="display: none;padding: 60px;margin-left: 10%;border-radius:10px;top: -40px;">
<div class="content modal-md" style="padding: 15px;max-height: 550px;">
<!-- Main charts -->
<div class="panel panel-flat" style="display: none;width: 1000px;">
<div class="panel-header" style="height: 50px;background: #1E2233;border-top-left-radius: 10px;border-top-right-radius: 10px;">
<!-- <button type="button" class="close" onclick="destroyWraper()" style=" width: 30px;
color: white;
height: 30px;">&times;</button> -->
<h5 class="modal-title title-create" style="color: white;margin-left: 25px;padding-top: 10px;">Input Perbaikan</h5>
</div>
<div class="panel-body" style="padding-top: 10px;">
<div class="tabbable">
<ul class="nav nav-tabs nav-tabs-bottom nav-justified">
<li class="active"><a href="#left-tab-input-coordinat" data-toggle="tab">Koordinat</a></li>
<li><a href="#right-tab-input-informasi" data-toggle="tab">Insert Informasi</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="left-tab-input-coordinat">
<div class="modal-body" style="max-height: 450px;overflow-y: auto;">
<input type="text" class="hidden" id="poly_create_input">
<input type="text" class="hidden" id="id_jalan_perbaikan">
<input type="text" class="hidden" id="type_id">
<div id="map-insert" style="height: 375px;width: 100%">
</div>
</div>
</div>
<div class="tab-pane" id="right-tab-input-informasi">
<div class="modal-body" style="max-height: 415px;overflow-y: auto;">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Nama Jalan :</label>
<input type="text" id="namajalan" class="form-control" value="">
</div>
<div class="form-group">
<label>Type Jalan :</label>
<input type="text" id="typejalan" class="form-control" value="">
</div>
<div class="form-group">
<label>Kelurahan :</label>
<input type="text" id="kelurahan" class="form-control" value="">
</div>
<div class="form-group">
<label>Kecamatan :</label>
<input type="text" id="kecamatan" class="form-control" value="">
</div>
<div class="form-group">
<label>Anggaran :</label>
<input type="text" id="anggaran" class="form-control" value="">
</div>
<div class="form-group">
<label>Pihak yang Mengesahkan :</label>
<input type="text" id="pihakpengesahan" class="form-control" value="">
</div>
<div class="form-group">
<label>Tanggal Disetujui :</label>
<input type="date" id="tgldisetujui" class="form-control" value="">
</div>
<div class="form-group">
<label>Tanggal Mulai Perbaikan :</label>
<input type="date" id="tglmulaiperbaikan" class="form-control" value="">
</div>
<div class="form-group">
<label>Tanggal Selesai Perbaikan :</label>
<input type="date" id="tglselesaiperbaikan" class="form-control" value="">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Penanggung Jawab Lapangan :</label>
<input type="text" id="pjlapangan" class="form-control" value="">
</div>
<div class="form-group">
<label>Kontraktor :</label>
<input type="text" id="kontraktor" class="form-control" value="">
</div>
<div class="form-group">
<label>Panjang Jalan Keseluruhan :</label>
<input type="text" id="panjangjalanall" class="form-control" value="">
</div>
<div class="form-group">
<label>Panjang Jalan Perbaikan :</label>
<input type="text" id="panjangjalanperbaikan" class="form-control" value="">
</div>
<div class="form-group">
<label>Lebar Jalan Perbaikan :</label>
<input type="text" id="lebarjalanperbaikan" class="form-control" value="">
</div>
<div class="form-group">
<label>Jenis Perbaikan :</label>
<input type="text" id="jenisperbaikan" class="form-control" value="">
</div>
<div class="form-group">
<label>Proposal (.pdf):</label>
<input type="file" id="proposal">
</div>
<div class="form-group">
<label>Bukti Selesai Perbaikan (.png/.jpg/.jpeg/):</label>
<input type="file" id="buktiselesai">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<button type="button" class="btn btn-info" id="save-perbaikan" style="float: right; margin-right: 40px;">SAVE</button>
<button type="button" class="btn btn-link" onclick="destroyWraper()" style="float: right;">Close</button>
</div>
</div>
</div>
<!-- /main charts -->
</div>
\ No newline at end of file
{% load static %} {% load humanize %}
<style>
#list_perbaikan_filter>label>input[type=search] {
border-color: #393E54;
}
......@@ -247,7 +246,7 @@
<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="">
<img src="{% static 'img/icon-1/saranaibadah.svg' %}" alt="">
</div>
<div class="col-sm-7" style="margin-bottom: 2px;margin-top: -8px;">
Jumlah Sarana Ibadah
......@@ -644,8 +643,10 @@
</div>
<div id="previewImage" style="display: none;"></div> -->
<div class="map_detail_p">
<div id="map_detail_perbaikan" style=" position: relative; height: 220px; width: 90%; border-radius: 5px; ">
</div>
</div>
</div>
......@@ -666,17 +667,6 @@
<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()
......@@ -840,21 +830,36 @@
});
function loaddetailid(id) {
$(".map_detail_p").html(``)
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) {
$(".map_detail_p").html(`<div id="map_detail_perbaikan" style=" position: relative; height: 220px; width: 90%; border-radius: 5px; ">`)
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);
setTimeout(function() {
map_detail_perbaikan.invalidateSize();
}, 500);
if (data.length === 0) {
$(".nama_detail").text("Null");
......
......@@ -485,6 +485,22 @@
margin-top: -4.5px;
border-radius: 50%;
}
.modal-header {
background-color: #1B1F2D !important;
border: #1B1F2D;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
#modal_adm>.modal-content {
border-radius: 10px;
}
#modal_detail_non_kelurahan>div>div>div.modal-body>fieldset>div>div:nth-child(1)>div.gambar_keterangan>img {
border-bottom-left-radius: 0px!important;
border-bottom-right-radius: 10px;
}
</style>
{% include 'includes/css-o.html' %} {% include 'includes/css-m.html' %}
......@@ -669,7 +685,7 @@
padding: 8px 16px;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;">Kelola Akun</a>
text-overflow: ellipsis;" data-toggle="modal" data-target="#user_profile" data-backdrop="static" data-keyboard="false">Kelola Akun</a>
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment