Skip to content

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

help&support(-image)

parent fdba7023
Hide 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): ...@@ -619,8 +619,8 @@ class Dashboard(generic.TemplateView):
'gardu_listrik':gardu_listrik_result, 'gardu_listrik':gardu_listrik_result,
'global':all[0], 'global':all[0],
'res_all':res_all, 'res_all':res_all,
'thisUser' : user_data 'thisUser' : user_data,
# ,'user_res':user_res # 'user_res':user_res
} }
return render (request, self.template_name, context) return render (request, self.template_name, context)
......
static/css/layout-style.css
View file @ ff70b342
...@@ -808,6 +808,14 @@ li.active>a:after { ...@@ -808,6 +808,14 @@ li.active>a:after {
color: black!important; 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) { @media (max-width: 1025px) {
.dock { .dock {
position: absolute; position: absolute;
......
static/js/action.js
View file @ ff70b342
...@@ -152,12 +152,13 @@ function load_manage() { ...@@ -152,12 +152,13 @@ function load_manage() {
success: function(data) { success: function(data) {
var data_user = [] var data_user = []
var number = 0; var number = 0;
var all_id = []
var all_stat = []
for (var i = 0; i < data['data'].length; i++) { for (var i = 0; i < data['data'].length; i++) {
$("#list_point").addClass('list_point') $("#list_point").addClass('list_point')
$("#list_user").addClass('list_user') $("#list_user").addClass('list_user')
number += 1; number += 1;
var id = data['data'][i]['id']; var id = data['data'][i]['id'];
var name = data['data'][i]['name']; var name = data['data'][i]['name'];
...@@ -167,40 +168,65 @@ function load_manage() { ...@@ -167,40 +168,65 @@ function load_manage() {
var last = data['data'][i]['last']; var last = data['data'][i]['last'];
var isactive = data['data'][i]['isactive']; var isactive = data['data'][i]['isactive'];
var no_telp = +6281234567890
var jabatan = 'Support'
if (isactive == true) { if (isactive == true) {
var isac = `<span class="label label-success">Active</span>` var isac = 'checked'
} else { } else {
var isac = `<span class="label label-danger">Inactive</span>` var isac = ''
} }
var data_gab = `<tr> var data_gab = `<tr>
<td>` + number + `</td> <td>` + number + `</td>
<td>` + id + `</td>
<td>` + username + `</td> <td>` + username + `</td>
<td>` + email + `</td> <td>` + email + `</td>
<td>` + no_telp + `</td>
<td>` + jabatan + `</td>
<td>` + last + `</td> <td>` + last + `</td>
<td>` + isac + `</td> <td class="text-center" style='padding:0px;'>
<td class="text-center"> <div class='row'>
<ul class="icons-list"> <div class='col-md-6 text-right' style='margin-top:5px'>
<li class="dropdown"> <a onclick="loaduserbyid('` + id + `')"><i class=" icon-pencil7"></i>Edit</a>
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> </div>
<i class="icon-menu9"></i> <div class='col-md-6 text-left'>
</a> <div class="checkbox checkbox-switchery">
<label>
<ul class="dropdown-menu dropdown-menu-right"> <input type="checkbox" class="switchery-custom-x" id="checkbox` + id + `" onclick="switchuserstatus('` + id + `, ` + isactive + `','` + id + `')" ` + isac + ` >
<li><a onclick="switchuserstatus('` + id + `, ` + isactive + `')"><i class="icon-user-block"></i> Switch user status</a></li> </label>
<li><a onclick="loaduserbyid('` + id + `')"><i class="icon-users"></i> Edit user</a></li> </div>
</ul> </div>
</li> </div>
</ul>
</td> </td>
</tr>`; </tr>`;
data_user.push(data_gab) data_user.push(data_gab)
all_id.push(id)
all_stat.push(isactive)
}; };
$("#tbody_user_list").html(data_user) $("#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 data_point = []
var number2 = 0; var number2 = 0;
...@@ -245,36 +271,6 @@ function load_manage() { ...@@ -245,36 +271,6 @@ function load_manage() {
orderable: false, orderable: false,
width: '10%', width: '10%',
targets: [0], 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', dom: '<"float-left "B>frtip',
language: { language: {
...@@ -535,15 +531,59 @@ function loadGroups(isSelect) { ...@@ -535,15 +531,59 @@ function loadGroups(isSelect) {
}); });
} }
function swal_switch(isConfirm) {
if (isConfirm == true) {
$.ajax({
url: "/switchStatus/",
data: isObject,
dataType: 'json',
type: 'post',
success: function(data) {
function switchuserstatus(id, isactive) { let response = data;
if (isObject.stat == "True") {
var inf = "dinonaktifkan"
} else {
var inf = "diaktifkan"
}
if (response.code == 0) {
swal({
title: "sukses",
text: "User berhasil " + inf,
type: "success",
icon: "success",
confirmButtonColor: "#00BCD4"
}, function(isok) {
if (inf == "diaktifkan") {
$(this).checked = true;
} else {
$(this).checked = false;
}
})
} else {
alert("no data in database")
}
}
});
} else {
swal("Dibatalkan", "User status tidak berubah", "error");
}
}
function switchuserstatus(id, c) {
var isObject = {} var isObject = {}
var params = id.split(","); var params = id.split(",");
var checkbox = document.getElementById("checkbox" + c);
console.log(checkbox);
isObject.id = params[0]; isObject.id = params[0];
isObject.stat = params[1].replace(" ", ""); isObject.stat = params[1].replace(" ", "");
console.log(params)
if (isObject.stat == "True") { if (isObject.stat == "True") {
var title = "Nonaktifkan"; var title = "Nonaktifkan";
var text = "User tidak akan bisa login jika dinonaktifkan!"; var text = "User tidak akan bisa login jika dinonaktifkan!";
...@@ -552,6 +592,7 @@ function switchuserstatus(id, isactive) { ...@@ -552,6 +592,7 @@ function switchuserstatus(id, isactive) {
var text = "User dapat kembali login jika diaktifkan!"; var text = "User dapat kembali login jika diaktifkan!";
} }
swal({ swal({
title: title + " user?", title: title + " user?",
text: text, text: text,
...@@ -563,50 +604,32 @@ function switchuserstatus(id, isactive) { ...@@ -563,50 +604,32 @@ function switchuserstatus(id, isactive) {
closeOnConfirm: false, closeOnConfirm: false,
closeOnCancel: false closeOnCancel: false
}, function(isConfirm) { }, function(isConfirm) {
if (isConfirm == true) { swal_switch(isConfirm)
$.ajax({ // if (cb == 'b') {
url: "/switchStatus/", // alert('b')
data: isObject, //check it
dataType: 'json', // if (cb == true) {
type: 'post', // checkbox.checked = false;
success: function(data) { // } else {
// checkbox.checked = true
let response = data; // }
if (isObject.stat == "True") { // } else {
var inf = "dinonaktifkan" // alert('a')
} else {
var inf = "diaktifkan" // if (cb == true) {
} // checkbox.checked = true;
if (response.code == 0) { // } else {
swal({ // checkbox.checked = false;
title: "sukses", // }
text: "User berhasil " + inf, // }
type: "success",
icon: "success",
confirmButtonColor: "#00BCD4"
}, function(isok) {
load_manage()
})
} else {
alert("no data in database")
}
}
});
} else {
swal("Dibatalkan", "User status tidak berubah", "error");
}
}); });
} }
function loaduserbyid(id) { function loaduserbyid(id) {
$("#modal_edit_user").modal("show")
var isObject = {}; var isObject = {};
$(".modstit").html("Update User")
$("#inUsername").attr("disabled", true)
isObject.id = id; isObject.id = id;
$("#iduser").val(id) $("#iduser").val(id)
...@@ -617,6 +640,10 @@ function loaduserbyid(id) { ...@@ -617,6 +640,10 @@ function loaduserbyid(id) {
dataType: 'json', dataType: 'json',
type: 'post', type: 'post',
success: function(data) { success: function(data) {
$("#modal_edit_user").modal("show")
$(".modstit").html("Update User")
$("#inUsername").attr("disabled", true)
let response = data; let response = data;
...@@ -988,8 +1015,16 @@ $("#btnsaveuser").click(function() { ...@@ -988,8 +1015,16 @@ $("#btnsaveuser").click(function() {
changepassword() 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").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") 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() { ...@@ -39,8 +39,11 @@ WorldImagery.onclick = function() {
}; };
BingSatellite.onclick = function() { BingSatellite.onclick = function() {
maps = L.tileLayer.bing({ bingMapsKey: BING_KEY, maxNativeZoom: 22 }).addTo(map); 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() { GoogleSatellite.onclick = function() {
......
static/js/pages/form_checkboxes_radios.js
View file @ ff70b342
/* ------------------------------------------------------------------------------ /* ------------------------------------------------------------------------------
* *
* # Styled checkboxes, radios and file input * # Styled checkboxes, radios and file input
* *
* Specific JS code additions for form_checkboxes_radios.html page * Specific JS code additions for form_checkboxes_radios.html page
* *
* Version: 1.0 * Version: 1.0
* Latest update: Aug 1, 2015 * Latest update: Aug 1, 2015
* *
* ---------------------------------------------------------------------------- */ * ---------------------------------------------------------------------------- */
$(function() { $(function() {
...@@ -21,7 +21,8 @@ $(function() { ...@@ -21,7 +21,8 @@ $(function() {
elems.forEach(function(html) { elems.forEach(function(html) {
var switchery = new Switchery(html); var switchery = new Switchery(html);
}); });
} else { }
else {
var elems = document.querySelectorAll('.switchery'); var elems = document.querySelectorAll('.switchery');
for (var i = 0; i < elems.length; i++) { for (var i = 0; i < elems.length; i++) {
var switchery = new Switchery(elems[i]); var switchery = new Switchery(elems[i]);
...@@ -29,28 +30,8 @@ $(function() { ...@@ -29,28 +30,8 @@ $(function() {
} }
// Colored switches // Colored switches
var primary = document.querySelector('.switchery-primary');
/* ini ngaruh sama element yang punya class "switchery-" */ var switchery = new Switchery(primary, { color: '#2196F3' });
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 danger = document.querySelector('.switchery-danger'); var danger = document.querySelector('.switchery-danger');
var switchery = new Switchery(danger, { color: '#EF5350' }); var switchery = new Switchery(danger, { color: '#EF5350' });
...@@ -59,7 +40,7 @@ $(function() { ...@@ -59,7 +40,7 @@ $(function() {
var switchery = new Switchery(warning, { color: '#FF7043' }); var switchery = new Switchery(warning, { color: '#FF7043' });
var info = document.querySelector('.switchery-info'); var info = document.querySelector('.switchery-info');
var switchery = new Switchery(info, { color: '#00BCD4' }); var switchery = new Switchery(info, { color: '#00BCD4'});
...@@ -124,5 +105,5 @@ $(function() { ...@@ -124,5 +105,5 @@ $(function() {
// ------------------------------ // ------------------------------
$(".switch").bootstrapSwitch(); $(".switch").bootstrapSwitch();
}); });
\ No newline at end of file
templates/includes/modal.html
View file @ ff70b342
...@@ -663,11 +663,11 @@ ...@@ -663,11 +663,11 @@
</div> </div>
</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%; <div class="modal-dialog" style="width: 100%;
margin: 0px; margin: 0px;
height: 100vh;"> height: 100vh;">
<div class="modal-content" style="height: 100vh;"> <div class="modal-content">
<div class="modal-body"> <div class="modal-body">
<div class="row"> <div class="row">
...@@ -785,7 +785,7 @@ ...@@ -785,7 +785,7 @@
width: 90%; width: 90%;
background: #FFFFFF; background: #FFFFFF;
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px;display:none;" onclick="btnuserclick(event)"> border-radius: 5px;" onclick="btnuserclick(event)">
<div class="row"> <div class="row">
<div class="col-sm-2"> <div class="col-sm-2">
<img src="{% static 'img/icon-1/help.svg' %}" alt=""> <img src="{% static 'img/icon-1/help.svg' %}" alt="">
...@@ -1003,37 +1003,16 @@ ...@@ -1003,37 +1003,16 @@
<thead style="font-size: 12px;line-height: 14px;font-family: 'gilroysemibold';text-transform: capitalize;"> <thead style="font-size: 12px;line-height: 14px;font-family: 'gilroysemibold';text-transform: capitalize;">
<tr> <tr>
<th>No.</th> <th>No.</th>
<th>Id user</th>
<th>Nama</th> <th>Nama</th>
<th>Email</th> <th>Email</th>
<th>No. Telp</th>
<th>Jabatan</th>
<th>Last Login</th> <th>Last Login</th>
<th>Status</th> <th>Action/Status</th>
<th>Action</th>
</tr> </tr>
</thead> </thead>
<tbody id="tbody_user_list"> <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> </tbody>
</table> </table>
...@@ -1074,9 +1053,6 @@ ...@@ -1074,9 +1053,6 @@
Help & Support Help & Support
</div> </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>
<div class="panel panel-flat" style="margin:10px;"> <div class="panel panel-flat" style="margin:10px;">
<div class="row"> <div class="row">
...@@ -1133,15 +1109,306 @@ ...@@ -1133,15 +1109,306 @@
<div class="form-group"> <div class="form-group">
<div class="col-md-12"> <div class="col-md-12">
<label class="control-label"> Pesan :</label> <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> </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> </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>
...@@ -1755,4 +2022,394 @@ ...@@ -1755,4 +2022,394 @@
</div> </div>
</div> </div>
</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> </div>
\ No newline at end of file
templates/includes/sidebar.html
View file @ ff70b342
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
</div> </div>
<div class="sidebar-category sidebar-category-visible"> <div class="sidebar-category sidebar-category-visible">
<div class="category-content no-padding"> <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 --> <!-- Main -->
<li id="button_keterangan"> <li id="button_keterangan">
...@@ -37,11 +37,11 @@ ...@@ -37,11 +37,11 @@
</ul> </ul>
<ul class="navigation navigation-main navigation-accordion"> <ul class="navigation navigation-main navigation-accordion">
<!-- <li> <li>
<a href="#" class="side-bar-but"> <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;"> <img src="{% static 'img/icon-1/Vectoriconwarning.svg' %}" alt="" style="height: 17.875003814697266px;width: 17.875003814697266px;margin-left: -8px;">
</a> </a>
</li> --> </li>
<li> <li>
<a href="{% url 'logout' %}" class="side-bar-but"> <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;"> <img src="{% static 'img/icon-1/Vectoriconlogout.svg' %}" alt="" style="height: 17.875003814697266px;width: 17.875003814697266px;margin-left: -8px;">
...@@ -352,8 +352,8 @@ ...@@ -352,8 +352,8 @@
<div class="col-sm-2"> <div class="col-sm-2">
<div class="checkbox checkbox-switchery"> <div class="checkbox checkbox-switchery">
<label> <label>
<input type="checkbox" class="switchery-custom" id="cabud" onclick="cb100()"> <input type="checkbox" class="switchery-custom" id="cabud" onclick="cb100()">
</label> </label>
</div> </div>
</div> </div>
......
templates/layout/layout.html
View file @ ff70b342
...@@ -93,6 +93,15 @@ ...@@ -93,6 +93,15 @@
<link rel="stylesheet" href="{% static 'css/layout-style.css' %}"> {% endblock css %} <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> <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> </head>
...@@ -347,13 +356,13 @@ ...@@ -347,13 +356,13 @@
<!-- Theme JS files --> <!-- Theme JS files -->
<script type="text/javascript" src="{% static 'js/plugins/visualization/d3/d3.min.js' %}"></script> <script type="text/javascript" src="{% static 'js/plugins/visualization/d3/d3.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/plugins/visualization/d3/d3_tooltip.js' %}"></script> <script type="text/javascript" src="{% static 'js/plugins/visualization/d3/d3_tooltip.js' %}"></script>
<script type="text/javascript" src="{% static 'js/plugins/forms/styling/switchery.min.js' %}"></script> <!-- <script type="text/javascript" src="{% static 'js/plugins/forms/styling/switchery.min.js' %}"></script> -->
<script type="text/javascript" src="{% static 'js/plugins/forms/styling/uniform.min.js' %}"></script> <!-- <script type="text/javascript" src="{% static 'js/plugins/forms/styling/uniform.min.js' %}"></script> -->
<script type="text/javascript" src="{% static 'js/plugins/forms/selects/bootstrap_multiselect.js' %}"></script> <script type="text/javascript" src="{% static 'js/plugins/forms/selects/bootstrap_multiselect.js' %}"></script>
<script type="text/javascript" src="{% static 'js/plugins/ui/moment/moment.min.js' %}"></script> <script type="text/javascript" src="{% static 'js/plugins/ui/moment/moment.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/plugins/pickers/daterangepicker.js' %}"></script> <script type="text/javascript" src="{% static 'js/plugins/pickers/daterangepicker.js' %}"></script>
<script type="text/javascript" src="{% static 'js/plugins/forms/styling/switch.min.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/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.min.js' %}"></script>
<script type="text/javascript " src="{% static 'js/apexcharts.js' %}"></script> <script type="text/javascript " src="{% static 'js/apexcharts.js' %}"></script>
...@@ -2261,6 +2270,120 @@ ...@@ -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').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") $('.leaflet-bottom.leaflet-right>.leaflet-control-attribution.leaflet-control').css("right", "50px")
</script> </script>
\ No newline at end of file
<!-- <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