Skip to content

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

help&support(-image)

parent fdba7023
Show whitespace changes
Inline Side-by-side
Showing with 976 additions and 169 deletions
Application/views.py
View file @ ff70b342
......@@ -619,8 +619,8 @@ class Dashboard(generic.TemplateView):
'gardu_listrik':gardu_listrik_result,
'global':all[0],
'res_all':res_all,
'thisUser' : user_data
# ,'user_res':user_res
'thisUser' : user_data,
# 'user_res':user_res
}
return render (request, self.template_name, context)
......
static/css/layout-style.css
View file @ ff70b342
......@@ -808,6 +808,14 @@ li.active>a:after {
color: black!important;
}
input#change_stat {
display: block!important;
}
#help>div:nth-child(3)>div>div.panel.panel-flat.panel-collapsed>div.panel-body>table>tbody>tr {
border-top: 20px solid white;
}
@media (max-width: 1025px) {
.dock {
position: absolute;
......
static/js/action.js
View file @ ff70b342
......@@ -152,12 +152,13 @@ function load_manage() {
success: function(data) {
var data_user = []
var number = 0;
var all_id = []
var all_stat = []
for (var i = 0; i < data['data'].length; i++) {
$("#list_point").addClass('list_point')
$("#list_user").addClass('list_user')
number += 1;
var id = data['data'][i]['id'];
var name = data['data'][i]['name'];
......@@ -167,40 +168,65 @@ function load_manage() {
var last = data['data'][i]['last'];
var isactive = data['data'][i]['isactive'];
var no_telp = +6281234567890
var jabatan = 'Support'
if (isactive == true) {
var isac = `<span class="label label-success">Active</span>`
var isac = 'checked'
} else {
var isac = `<span class="label label-danger">Inactive</span>`
var isac = ''
}
var data_gab = `<tr>
<td>` + number + `</td>
<td>` + id + `</td>
<td>` + username + `</td>
<td>` + email + `</td>
<td>` + no_telp + `</td>
<td>` + jabatan + `</td>
<td>` + last + `</td>
<td>` + isac + `</td>
<td class="text-center">
<ul class="icons-list">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a onclick="switchuserstatus('` + id + `, ` + isactive + `')"><i class="icon-user-block"></i> Switch user status</a></li>
<li><a onclick="loaduserbyid('` + id + `')"><i class="icon-users"></i> Edit user</a></li>
</ul>
</li>
</ul>
<td class="text-center" style='padding:0px;'>
<div class='row'>
<div class='col-md-6 text-right' style='margin-top:5px'>
<a onclick="loaduserbyid('` + id + `')"><i class=" icon-pencil7"></i>Edit</a>
</div>
<div class='col-md-6 text-left'>
<div class="checkbox checkbox-switchery">
<label>
<input type="checkbox" class="switchery-custom-x" id="checkbox` + id + `" onclick="switchuserstatus('` + id + `, ` + isactive + `','` + id + `')" ` + isac + ` >
</label>
</div>
</div>
</div>
</td>
</tr>`;
data_user.push(data_gab)
all_id.push(id)
all_stat.push(isactive)
};
$("#tbody_user_list").html(data_user)
if (Array.prototype.forEach) {
var elems = Array.prototype.slice.call(document.querySelectorAll('.switchery'));
elems.forEach(function(html) {
var switchery = new Switchery(html);
});
} else {
var elems = document.querySelectorAll('.switchery');
for (var i = 0; i < elems.length; i++) {
var switchery = new Switchery(elems[i]);
}
}
$(".switch").bootstrapSwitch();
var primary_s = document.querySelectorAll("[class^=switchery-custom-x");
for (var z = 0; z < primary_s.length; z++) {
var switchery = new Switchery(primary_s[z], { color: '#5A9AFB', secondaryColor: '#3B3E47', jackColor: '#fff', jackSecondaryColor: '#fff' });
}
var data_point = []
var number2 = 0;
......@@ -245,36 +271,6 @@ function load_manage() {
orderable: false,
width: '10%',
targets: [0],
}, {
orderable: false,
width: '10%',
targets: [1],
}, {
orderable: false,
width: '20%',
targets: [2],
}, {
orderable: false,
width: '20%',
targets: [3],
}, {
orderable: false,
width: '20%',
targets: [4],
}, {
orderable: false,
width: '10%',
targets: [5],
}, {
orderable: false,
width: '10%',
targets: [6],
}, ],
dom: '<"float-left "B>frtip',
language: {
......@@ -535,34 +531,7 @@ function loadGroups(isSelect) {
});
}
function switchuserstatus(id, isactive) {
var isObject = {}
var params = id.split(",");
isObject.id = params[0];
isObject.stat = params[1].replace(" ", "");
console.log(params)
if (isObject.stat == "True") {
var title = "Nonaktifkan";
var text = "User tidak akan bisa login jika dinonaktifkan!";
} else {
var title = "Aktifkan";
var text = "User dapat kembali login jika diaktifkan!";
}
swal({
title: title + " user?",
text: text,
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "Ya!",
cancelButtonText: "Tidak!",
closeOnConfirm: false,
closeOnCancel: false
}, function(isConfirm) {
function swal_switch(isConfirm) {
if (isConfirm == true) {
$.ajax({
......@@ -587,7 +556,12 @@ function switchuserstatus(id, isactive) {
icon: "success",
confirmButtonColor: "#00BCD4"
}, function(isok) {
load_manage()
if (inf == "diaktifkan") {
$(this).checked = true;
} else {
$(this).checked = false;
}
})
} else {
alert("no data in database")
......@@ -598,15 +572,64 @@ function switchuserstatus(id, isactive) {
} else {
swal("Dibatalkan", "User status tidak berubah", "error");
}
}
function switchuserstatus(id, c) {
var isObject = {}
var params = id.split(",");
var checkbox = document.getElementById("checkbox" + c);
console.log(checkbox);
isObject.id = params[0];
isObject.stat = params[1].replace(" ", "");
if (isObject.stat == "True") {
var title = "Nonaktifkan";
var text = "User tidak akan bisa login jika dinonaktifkan!";
} else {
var title = "Aktifkan";
var text = "User dapat kembali login jika diaktifkan!";
}
swal({
title: title + " user?",
text: text,
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "Ya!",
cancelButtonText: "Tidak!",
closeOnConfirm: false,
closeOnCancel: false
}, function(isConfirm) {
swal_switch(isConfirm)
// if (cb == 'b') {
// alert('b')
//check it
// if (cb == true) {
// checkbox.checked = false;
// } else {
// checkbox.checked = true
// }
// } else {
// alert('a')
// if (cb == true) {
// checkbox.checked = true;
// } else {
// checkbox.checked = false;
// }
// }
});
}
function loaduserbyid(id) {
$("#modal_edit_user").modal("show")
var isObject = {};
$(".modstit").html("Update User")
$("#inUsername").attr("disabled", true)
isObject.id = id;
$("#iduser").val(id)
......@@ -617,6 +640,10 @@ function loaduserbyid(id) {
dataType: 'json',
type: 'post',
success: function(data) {
$("#modal_edit_user").modal("show")
$(".modstit").html("Update User")
$("#inUsername").attr("disabled", true)
let response = data;
......@@ -988,8 +1015,16 @@ $("#btnsaveuser").click(function() {
changepassword()
})
// function switchuserstatuss(id, isactive) {
// var checkbox = $(this);
// if (checkbox.is(":checked")) {
// e.preventDefault();
// return false;
// }else{
// }
// }
document.querySelector("#map-create-all > div.leaflet-control-container > div.leaflet-bottom.leaflet-right > div").html(`Powered by <a href="https://khansia.co.id" target="_blank">Khansia</a> with <a href="https://leafletjs.com" target="_blank">Leaflet</a>`)
document.querySelector("#map-create-all > div.leaflet-control-container > div.leaflet-bottom.leaflet-right > div").css("right", "50px")
\ No newline at end of file
static/js/maps.js
View file @ ff70b342
......@@ -39,8 +39,11 @@ WorldImagery.onclick = function() {
};
BingSatellite.onclick = function() {
maps = L.tileLayer.bing({ bingMapsKey: BING_KEY, maxNativeZoom: 22 }).addTo(map);
setTimeout(function() {
$('.leaflet-bottom.leaflet-right>.leaflet-control-attribution.leaflet-control').html(`Powered by <a href="https://khansia.co.id" target="_blank">Khansia</a> with <a href="https://leafletjs.com" target="_blank">Leaflet</a>`)
}, 100);
};
GoogleSatellite.onclick = function() {
......
static/js/pages/form_checkboxes_radios.js
View file @ ff70b342
/* ------------------------------------------------------------------------------
*
* # Styled checkboxes, radios and file input
*
* Specific JS code additions for form_checkboxes_radios.html page
*
* Version: 1.0
* Latest update: Aug 1, 2015
*
* ---------------------------------------------------------------------------- */
*
* # Styled checkboxes, radios and file input
*
* Specific JS code additions for form_checkboxes_radios.html page
*
* Version: 1.0
* Latest update: Aug 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function() {
......@@ -21,7 +21,8 @@ $(function() {
elems.forEach(function(html) {
var switchery = new Switchery(html);
});
} else {
}
else {
var elems = document.querySelectorAll('.switchery');
for (var i = 0; i < elems.length; i++) {
var switchery = new Switchery(elems[i]);
......@@ -29,28 +30,8 @@ $(function() {
}
// Colored switches
/* ini ngaruh sama element yang punya class "switchery-" */
var primary = document.querySelectorAll("[class^=switchery-");
/* ------------------- */
console.log(primary);
var switcheryCustom = document.querySelector('.switchery-custom');
var switchery = new Switchery(switcheryCustom, { color: '#5A9AFB', secondaryColor: '#3B3E47', jackColor: '#fff', jackSecondaryColor: '#fff' });
// var switchery = new Switchery(primary[0], { color: '#2196F3' });
/* inisialisasi switchery buat class "switchery-" */
for (var z = 0; z < primary.length; z++) {
var switchery = new Switchery(primary[z], { color: '#5A9AFB', secondaryColor: '#3B3E47', jackColor: '#fff', jackSecondaryColor: '#fff' });
}
/* ------------------ */
var switcheryCustom1 = document.querySelector('.switchery-custom1');
var switchery = new Switchery(switcheryCustom1, { color: '#5A9AEB', secondaryColor: '#3B3E47', jackColor: '#fff', jackSecondaryColor: '#fff' });
// var switchery = new Switchery(primary, { color: '#2196F3' });
var primary = document.querySelector('.switchery-primary');
var switchery = new Switchery(primary, { color: '#2196F3' });
var danger = document.querySelector('.switchery-danger');
var switchery = new Switchery(danger, { color: '#EF5350' });
......@@ -59,7 +40,7 @@ $(function() {
var switchery = new Switchery(warning, { color: '#FF7043' });
var info = document.querySelector('.switchery-info');
var switchery = new Switchery(info, { color: '#00BCD4' });
var switchery = new Switchery(info, { color: '#00BCD4'});
......
templates/includes/modal.html
View file @ ff70b342
......@@ -663,11 +663,11 @@
</div>
</div>
<div class="modal fade" id="user_profile" tabindex="-1" role="dialog" style="margin-left: 50px;padding-left:0px">
<div class="modal fade" id="user_profile" tabindex="-1" role="dialog" style="margin-left: 50px;padding-left:0px;">
<div class="modal-dialog" style="width: 100%;
margin: 0px;
height: 100vh;">
<div class="modal-content" style="height: 100vh;">
<div class="modal-content">
<div class="modal-body">
<div class="row">
......@@ -785,7 +785,7 @@
width: 90%;
background: #FFFFFF;
box-sizing: border-box;
border-radius: 5px;display:none;" onclick="btnuserclick(event)">
border-radius: 5px;" onclick="btnuserclick(event)">
<div class="row">
<div class="col-sm-2">
<img src="{% static 'img/icon-1/help.svg' %}" alt="">
......@@ -1003,37 +1003,16 @@
<thead style="font-size: 12px;line-height: 14px;font-family: 'gilroysemibold';text-transform: capitalize;">
<tr>
<th>No.</th>
<th>Id user</th>
<th>Nama</th>
<th>Email</th>
<th>No. Telp</th>
<th>Jabatan</th>
<th>Last Login</th>
<th>Status</th>
<th>Action</th>
<th>Action/Status</th>
</tr>
</thead>
<tbody id="tbody_user_list">
{% for all in user_res %}
<tr>
<td>{{forloop.counter}}</td>
<td>{{all.id}}</td>
<td>{{all.username}}</td>
<td>{{all.email}}</td>
<td>{{all.last}}</td>
<td>{{all.isactive}}</td>
<td class="text-center ">
<a class="btn mdlFire " onclick="loaddetailid( '{{all.id}}') " 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>
{% endfor %}
</tbody>
</table>
......@@ -1074,9 +1053,6 @@
Help & Support
</div>
<span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, minus. Obcaecati consequuntur, consequatur vitae soluta tempora doloremque quis eligendi officia illo ad nesciunt tenetur, nostrum cum deleniti, dolorum explicabo sed!
</span>
</div>
<div class="panel panel-flat" style="margin:10px;">
<div class="row">
......@@ -1133,15 +1109,306 @@
<div class="form-group">
<div class="col-md-12">
<label class="control-label"> Pesan :</label>
<textarea rows="5" cols="5" class="form-control" id="pesan_pengirim" placeholder="Tuliskan Pesan disini"></textarea>
<textarea rows="5" cols="5" class="form-control" id="pesan_pengirim" placeholder="Tuliskan Pesan disini" style="height: 240px;"></textarea>
</div>
</div>
</div>
<button type="button" class="btn btn-info" id="send_pesan" style=" margin: 10px;float: right;border: none;">Send Messages</button>
</div>
</div>
</div>
<div>
<div style="margin: 0px 70px;">
<div class="text-center" style="font-size: 22px;margin:10px">
How can we help you ?
</div>
<!-- <input class="form-control" type="text" name="" id=""> -->
<div class="panel panel-flat" style="margin-top: 5px;">
<div class="panel-heading" style="padding-top: 10px;padding-bottom: 10px;">
<h6 class="panel-title"><b>Login</b></h6>
<div class="heading-elements">
<ul class="icons-list">
<li>
<a data-action="collapse"></a>
</li>
</ul>
</div>
</div>
<div class="panel-body" style="display: none;">
<table>
<tr>
<td>1.</td>
<td>Pada halaman dashboard, klik tombol “SIGN IN” untuk melakukan login</td>
</tr>
<tr>
<td>2.</td>
<td>
Masukkan <i>username</i> dan <i>password</i>
</td>
</tr>
<tr>
<td>3.</td>
<td>
Kemudian klik tombol “Log In”
</td>
</tr>
<tr>
<td>4.</td>
<td>
Akan muncul Welcome Page seperti di bawah
</td>
</tr>
</table>
</div>
</div>
<div class="panel panel-flat" style="margin-top: 5px;">
<div class="panel-heading" style="padding-top: 10px;padding-bottom: 10px;">
<h6 class="panel-title"><b>Akses Fitur 3D</b></h6>
<div class="heading-elements">
<ul class="icons-list">
<li>
<a data-action="collapse"></a>
</li>
</ul>
</div>
</div>
<div class="panel-body" style="display: none;">
<table>
<tr>
<td>1.</td>
<td>Pada halaman utama aplikasi, klik icon</td>
</tr>
<tr>
<td>2.</td>
<td>
Setelah itu akan muncul form 3D Searching, lalu pilih desa,
</td>
</tr>
<tr>
<td>3.</td>
<td>
Lalu klik tombol “Search”
</td>
</tr>
<tr>
<td>4.</td>
<td>
Maka akan muncul desa yang dicari
</td>
</tr>
</table>
</div>
</div>
<div class="panel panel-flat" style="margin-top: 5px;">
<div class="panel-heading" style="padding-top: 10px;padding-bottom: 10px;">
<h6 class="panel-title"><b>Memunculkan Data Bangunan</b></h6>
<div class="heading-elements">
<ul class="icons-list">
<li>
<a data-action="collapse"></a>
</li>
</ul>
</div>
</div>
<div class="panel-body" style="display: none;">
<table>
<tr>
<td>1.</td>
<td>Pada halaman utama aplikasi, klik icon</td>
</tr>
<tr>
<td>2.</td>
<td>
Setelah itu akan muncul halaman sidebar filters
</td>
</tr>
<tr>
<td>3.</td>
<td>
Kemudian checklist pada bagian bagunan
</td>
</tr>
<tr>
<td>4.</td>
<td>
Maka akan muncul tampilan bangunan (polygon bangunan akan muncul ketika zoom > 17)
</td>
</tr>
<tr>
<td>5.</td>
<td>Untuk melihat informasi bangunan, klik bagian bangunan yang akan di lihat informasinya.
</td>
</tr>
</table>
</div>
</div>
<div class="panel panel-flat" style="margin-top: 5px;">
<div class="panel-heading" style="padding-top: 10px;padding-bottom: 10px;">
<h6 class="panel-title"><b>Memunculkan Data Tempat</b></h6>
<div class="heading-elements">
<ul class="icons-list">
<li>
<a data-action="collapse"></a>
</li>
</ul>
</div>
</div>
<div class="panel-body" style="display: none;">
<table>
<tr>
<td>
1.
</td>
<td>
Klik icon
<img src="{% static 'img/icon-1/Screenshot_poi.png'%}" alt=""> pie pada sidebar
</td>
</tr>
<tr>
<td>
2.
</td>
<td>
Sehingga akan muncul informasi berikut
</td>
</tr>
<tr>
<td>
</td>
<td>
<img src="{% static 'img/icon-1/Screenshot_menu_layer.png'%}" alt="" style="max-width: 500px;">
</td>
</tr>
<tr>
<td>
3.
</td>
<td>
Untuk informasi tempat, klik Point Of Interest
</td>
</tr>
<tr>
<td>
4.
</td>
<td>
Untuk informasi tempat, klik Point Of Interest
</td>
</tr>
<tr>
<td>
5.
</td>
<td>
Ceklist data tempat yang akan dimunculkan
</td>
</tr>
<tr>
<td>
</td>
<td>
<img src="{% static 'img/icon-1/Screenshot_point_of_interest.png' %}" alt="" style="max-width: 500px;">
</td>
</tr>
<tr>
<td>
6.
</td>
<td>
Sehingga akan muncul informasi sebagai berikut
</td>
</tr>
<tr>
<td>
</td>
<td>
<img src="{% static 'img/icon-1/Screenshot_dash_poi.png' %}" alt="" style="max-width: 500px;">
</td>
</tr>
<tr>
<td>
7.
</td>
<td>
Untuk informasi tempat lebih detail, klik tempat yang akan di munculkan detailnya
</td>
</tr>
<tr>
<td>
8.
</td>
<td>
Akan muncul informasi detail tempat seperti berikut
</td>
</tr>
<tr>
<td>
</td>
<td>
<img src="{% static 'img/icon-1/Screenshot_detail_point.png' %}" alt="">
</td>
</tr>
</table>
</div>
</div>
<div class="panel panel-flat" style="margin-top: 5px;">
<div class="panel-heading" style="padding-top: 10px;padding-bottom: 10px;">
<h6 class="panel-title"><b>Menemukan Informasi Data Perbaikan</b></h6>
<div class="heading-elements">
<ul class="icons-list">
<li>
<a data-action="collapse"></a>
</li>
</ul>
</div>
</div>
<div class="panel-body" style="display: none;">
<table>
<tr>
<td>
1.
</td>
<td>
Klik icon pie pada sidebar
</td>
</tr>
<tr>
<td></td>
<td>
<img src="{% static 'img/icon-1/icon_pie_sd.png' %}" alt="">
</td>
</tr>
<tr>
<td>
2.
</td>
<td>
Setelah di-klik maka akan muncul informasi berikut
</td>
</tr>
<tr>
<td></td>
<td>
<img src="{% static 'img/icon-1/Screen_shot_data_perbaikan.png' %}" alt="" style="max-width: 500px;">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
......@@ -1756,3 +2023,393 @@
</div>
</div>
</div>
<div class="modal fade" id="modal_help" tabindex="-1" role="dialog" style="margin-left: 50px;padding-left:0px;">
<div class="modal-dialog" style="width: 75%;
margin: 0px;
height: 100vh;">
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="
margin: 0px 8px 0px 0px;
width: 25px;
height: 25px;
background-color: white;
top: -10px;
position: absolute;
right: -5px;
opacity: 1;
z-index: 999;
border-radius: 12px;
">×</button>
<div>
<div style="font-size: 22px;margin:10px">
Help & Support
</div>
</div>
<div class="panel panel-flat" style="margin:10px;">
<div class="row">
<div class="col-md-4">
<div style="margin: 10px;background-color:#2F343A;border-radius:10px">
<div style="background-image: url(/static/img/icon-1/contact_info.svg);height:330px;border-radius:10px;">
<div style="margin:0px 20px;padding:20px;color:white">
<div style="margin-bottom: 10px;font-size:16px;">
Contact Information
</div>
<div style="margin-top: 20px;">
<div class="row" style="margin-top: 20px;">
<i class="col-md-4 icon-phone2"></i>
<span class="col-md-8">(0222) 0668202</span>
</div>
<div class="row" style="margin-top: 20px;">
<i class="col-md-4 icon-envelop3"></i>
<span class="col-md-8">admin@khansia.com</span>
</div>
<div class="row" style="margin-top: 20px;">
<i class="col-md-4 icon-location3"></i>
<span class="col-md-8">Komplek Taman Bumi Prima blok s14, Cibabat, Cimahi Utara, Kota Cimahi</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8" style="margin-top:10px">
<div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="col-md-12">
<label class="control-label"> Nama :</label>
<input type="text" id="nama_pengirim" class="form-control">
</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="email_pengirim" class="form-control">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<label class="control-label"> Pesan :</label>
<textarea rows="5" cols="5" class="form-control" id="pesan_pengirim" placeholder="Tuliskan Pesan disini" style="height: 240px;"></textarea>
</div>
</div>
</div>
<button type="button" class="btn btn-info" id="send_pesan" style=" margin: 10px;float: right;border: none;">Send Messages</button>
</div>
</div>
</div>
<div>
<div style="margin: 0px 70px;">
<div class="text-center" style="font-size: 22px;margin:10px">
How can we help you ?
</div>
<!-- <input class="form-control" type="text" name="" id=""> -->
<div class="panel panel-flat" style="margin-top: 5px;">
<div class="panel-heading" style="padding-top: 10px;padding-bottom: 10px;">
<h6 class="panel-title"><b>Login</b></h6>
<div class="heading-elements">
<ul class="icons-list">
<li>
<a data-action="collapse"></a>
</li>
</ul>
</div>
</div>
<div class="panel-body" style="display: none;">
<table>
<tr>
<td>1.</td>
<td>Pada halaman dashboard, klik tombol “SIGN IN” untuk melakukan login</td>
</tr>
<tr>
<td>2.</td>
<td>
Masukkan <i>username</i> dan <i>password</i>
</td>
</tr>
<tr>
<td>3.</td>
<td>
Kemudian klik tombol “Log In”
</td>
</tr>
<tr>
<td>4.</td>
<td>
Akan muncul Welcome Page seperti di bawah
</td>
</tr>
</table>
</div>
</div>
<div class="panel panel-flat" style="margin-top: 5px;">
<div class="panel-heading" style="padding-top: 10px;padding-bottom: 10px;">
<h6 class="panel-title"><b>Akses Fitur 3D</b></h6>
<div class="heading-elements">
<ul class="icons-list">
<li>
<a data-action="collapse"></a>
</li>
</ul>
</div>
</div>
<div class="panel-body" style="display: none;">
<table>
<tr>
<td>1.</td>
<td>Pada halaman utama aplikasi, klik icon</td>
</tr>
<tr>
<td>2.</td>
<td>
Setelah itu akan muncul form 3D Searching, lalu pilih desa,
</td>
</tr>
<tr>
<td>3.</td>
<td>
Lalu klik tombol “Search”
</td>
</tr>
<tr>
<td>4.</td>
<td>
Maka akan muncul desa yang dicari
</td>
</tr>
</table>
</div>
</div>
<div class="panel panel-flat" style="margin-top: 5px;">
<div class="panel-heading" style="padding-top: 10px;padding-bottom: 10px;">
<h6 class="panel-title"><b>Memunculkan Data Bangunan</b></h6>
<div class="heading-elements">
<ul class="icons-list">
<li>
<a data-action="collapse"></a>
</li>
</ul>
</div>
</div>
<div class="panel-body" style="display: none;">
<table>
<tr>
<td>1.</td>
<td>Pada halaman utama aplikasi, klik icon</td>
</tr>
<tr>
<td>2.</td>
<td>
Setelah itu akan muncul halaman sidebar filters
</td>
</tr>
<tr>
<td>3.</td>
<td>
Kemudian checklist pada bagian bagunan
</td>
</tr>
<tr>
<td>4.</td>
<td>
Maka akan muncul tampilan bangunan (polygon bangunan akan muncul ketika zoom > 17)
</td>
</tr>
<tr>
<td>5.</td>
<td>Untuk melihat informasi bangunan, klik bagian bangunan yang akan di lihat informasinya.
</td>
</tr>
</table>
</div>
</div>
<div class="panel panel-flat" style="margin-top: 5px;">
<div class="panel-heading" style="padding-top: 10px;padding-bottom: 10px;">
<h6 class="panel-title"><b>Memunculkan Data Tempat</b></h6>
<div class="heading-elements">
<ul class="icons-list">
<li>
<a data-action="collapse"></a>
</li>
</ul>
</div>
</div>
<div class="panel-body" style="display: none;">
<table>
<tr>
<td>
1.
</td>
<td>
Klik icon
<img src="{% static 'img/icon-1/Screenshot_poi.png'%}" alt=""> pie pada sidebar
</td>
</tr>
<tr>
<td>
2.
</td>
<td>
Sehingga akan muncul informasi berikut
</td>
</tr>
<tr>
<td>
</td>
<td>
<img src="{% static 'img/icon-1/Screenshot_menu_layer.png'%}" alt="" style="max-width: 500px;">
</td>
</tr>
<tr>
<td>
3.
</td>
<td>
Untuk informasi tempat, klik Point Of Interest
</td>
</tr>
<tr>
<td>
4.
</td>
<td>
Untuk informasi tempat, klik Point Of Interest
</td>
</tr>
<tr>
<td>
5.
</td>
<td>
Ceklist data tempat yang akan dimunculkan
</td>
</tr>
<tr>
<td>
</td>
<td>
<img src="{% static 'img/icon-1/Screenshot_point_of_interest.png' %}" alt="" style="max-width: 500px;">
</td>
</tr>
<tr>
<td>
6.
</td>
<td>
Sehingga akan muncul informasi sebagai berikut
</td>
</tr>
<tr>
<td>
</td>
<td>
<img src="{% static 'img/icon-1/Screenshot_dash_poi.png' %}" alt="" style="max-width: 500px;">
</td>
</tr>
<tr>
<td>
7.
</td>
<td>
Untuk informasi tempat lebih detail, klik tempat yang akan di munculkan detailnya
</td>
</tr>
<tr>
<td>
8.
</td>
<td>
Akan muncul informasi detail tempat seperti berikut
</td>
</tr>
<tr>
<td>
</td>
<td>
<img src="{% static 'img/icon-1/Screenshot_detail_point.png' %}" alt="">
</td>
</tr>
</table>
</div>
</div>
<div class="panel panel-flat" style="margin-top: 5px;">
<div class="panel-heading" style="padding-top: 10px;padding-bottom: 10px;">
<h6 class="panel-title"><b>Menemukan Informasi Data Perbaikan</b></h6>
<div class="heading-elements">
<ul class="icons-list">
<li>
<a data-action="collapse"></a>
</li>
</ul>
</div>
</div>
<div class="panel-body" style="display: none;">
<table>
<tr>
<td>
1.
</td>
<td>
Klik icon pie pada sidebar
</td>
</tr>
<tr>
<td></td>
<td>
<img src="{% static 'img/icon-1/icon_pie_sd.png' %}" alt="">
</td>
</tr>
<tr>
<td>
2.
</td>
<td>
Setelah di-klik maka akan muncul informasi berikut
</td>
</tr>
<tr>
<td></td>
<td>
<img src="{% static 'img/icon-1/Screen_shot_data_perbaikan.png' %}" alt="" style="max-width: 500px;">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
templates/includes/sidebar.html
View file @ ff70b342
......@@ -15,7 +15,7 @@
</div>
<div class="sidebar-category sidebar-category-visible">
<div class="category-content no-padding">
<ul class="navigation navigation-main navigation-accordion" style="margin-bottom: 45vh;">
<ul class="navigation navigation-main navigation-accordion" style="margin-bottom: 40vh;">
<!-- Main -->
<li id="button_keterangan">
......@@ -37,11 +37,11 @@
</ul>
<ul class="navigation navigation-main navigation-accordion">
<!-- <li>
<a href="#" class="side-bar-but">
<li>
<a href="#" class="side-bar-but" data-toggle="modal" data-target="#modal_help" data-backdrop="static" data-keyboard="false">
<img src="{% static 'img/icon-1/Vectoriconwarning.svg' %}" alt="" style="height: 17.875003814697266px;width: 17.875003814697266px;margin-left: -8px;">
</a>
</li> -->
</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;">
......
templates/layout/layout.html
View file @ ff70b342
......@@ -93,6 +93,15 @@
<link rel="stylesheet" href="{% static 'css/layout-style.css' %}"> {% endblock css %}
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link>
<!-- Theme JS files -->
<script type="text/javascript" src="{% static 'js/plugins/forms/styling/uniform.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/plugins/forms/styling/switchery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/plugins/forms/styling/switch.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/core/app.js' %}"></script>
<!-- <script type="text/javascript" src="{% static 'js/pages/form_checkboxes_radios.js' %}"></script> -->
<!-- /theme JS files -->
</head>
......@@ -347,13 +356,13 @@
<!-- Theme JS files -->
<script type="text/javascript" src="{% static 'js/plugins/visualization/d3/d3.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/plugins/visualization/d3/d3_tooltip.js' %}"></script>
<script type="text/javascript" src="{% static 'js/plugins/forms/styling/switchery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/plugins/forms/styling/uniform.min.js' %}"></script>
<!-- <script type="text/javascript" src="{% static 'js/plugins/forms/styling/switchery.min.js' %}"></script> -->
<!-- <script type="text/javascript" src="{% static 'js/plugins/forms/styling/uniform.min.js' %}"></script> -->
<script type="text/javascript" src="{% static 'js/plugins/forms/selects/bootstrap_multiselect.js' %}"></script>
<script type="text/javascript" src="{% static 'js/plugins/ui/moment/moment.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/plugins/pickers/daterangepicker.js' %}"></script>
<script 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/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>
......@@ -2261,6 +2270,120 @@
}
});
/* ini ngaruh sama element yang punya class "switchery-" */
var primary = document.querySelectorAll("[class^=switchery-");
/* ------------------- */
for (var z = 0; z < primary.length; z++) {
var switchery = new Switchery(primary[z], {
color: '#5A9AFB',
secondaryColor: '#3B3E47',
jackColor: '#fff',
jackSecondaryColor: '#fff'
});
}
$('.leaflet-bottom.leaflet-right>.leaflet-control-attribution.leaflet-control').html(`Powered by <a href="https://khansia.co.id" target="_blank">Khansia</a> with <a href="https://leafletjs.com" target="_blank">Leaflet</a>`)
$('.leaflet-bottom.leaflet-right>.leaflet-control-attribution.leaflet-control').css("right", "50px")
</script>
<!-- <script>
$(function() {
// Switchery
// ------------------------------
// Initialize multiple switches
if (Array.prototype.forEach) {
var elems = Array.prototype.slice.call(document.querySelectorAll('.switchery'));
elems.forEach(function(html) {
var switchery = new Switchery(html);
});
}
else {
var elems = document.querySelectorAll('.switchery');
for (var i = 0; i < elems.length; i++) {
var switchery = new Switchery(elems[i]);
}
}
// Colored switches
var primary = document.querySelector('.switchery-primary');
var switchery = new Switchery(primary, { color: '#2196F3' });
var danger = document.querySelector('.switchery-danger');
var switchery = new Switchery(danger, { color: '#EF5350' });
var warning = document.querySelector('.switchery-warning');
var switchery = new Switchery(warning, { color: '#FF7043' });
var info = document.querySelector('.switchery-info');
var switchery = new Switchery(info, { color: '#00BCD4'});
// Checkboxes/radios (Uniform)
// ------------------------------
// Default initialization
$(".styled, .multiselect-container input").uniform({
radioClass: 'choice'
});
// File input
$(".file-styled").uniform({
wrapperClass: 'bg-blue',
fileButtonHtml: '<i class="icon-file-plus"></i>'
});
//
// Contextual colors
//
// Primary
$(".control-primary").uniform({
radioClass: 'choice',
wrapperClass: 'border-primary-600 text-primary-800'
});
// Danger
$(".control-danger").uniform({
radioClass: 'choice',
wrapperClass: 'border-danger-600 text-danger-800'
});
// Success
$(".control-success").uniform({
radioClass: 'choice',
wrapperClass: 'border-success-600 text-success-800'
});
// Warning
$(".control-warning").uniform({
radioClass: 'choice',
wrapperClass: 'border-warning-600 text-warning-800'
});
// Info
$(".control-info").uniform({
radioClass: 'choice',
wrapperClass: 'border-info-600 text-info-800'
});
// Custom color
$(".control-custom").uniform({
radioClass: 'choice',
wrapperClass: 'border-indigo-600 text-indigo-800'
});
// Bootstrap switch
// ------------------------------
$(".switch").bootstrapSwitch();
});
</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