{% load static %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>{{title}}</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css"> <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.css" /> <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" /> <link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder@2.3.3/dist/esri-leaflet-geocoder.css"> <script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script> <!-- Global stylesheets --> <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css"> <link href="{% static 'css/icons/icomoon/styles.css' %}" rel="stylesheet" type="text/css"> <link href="{% static 'css/bootstrap.css' %}" rel="stylesheet" type="text/css"> <link href="{% static 'css/core.css' %}" rel="stylesheet" type="text/css"> <link href="{% static 'css/components.css' %}" rel="stylesheet" type="text/css"> <link href="{% static 'css/colors.css' %}" rel="stylesheet" type="text/css"> <script src="{% static 'js/Leaflet.Editables.js' %}"></script> <!-- /global stylesheets --> <style> .page-container { padding: 0; height: 100%; } .modal-backdrop { z-index: -1!important; } .sidebar { padding: 0; } .form-group { margin-bottom: 0px; } .panel-body { padding: 0px 20px; } .row { margin-left: 0px; margin-right: 0px; } .modal-colors { background-color: #1a222f; } .lbl-top { margin-top: 10px; } .select2-selection--multiple:not([class*=bg-]) .select2-selection__choice { background-color: #eee; color: #333333; margin-top: 3px; margin-bottom: 3px; border-radius: 0px; } .page_loader { position: fixed; background: url('../../static/img/loadingz.gif') 50% 50% no-repeat rgb(249, 249, 249); left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; opacity: .5; } ::-webkit-scrollbar { width: 10px; } /* Track */ ::-webkit-scrollbar-track { background: #f1f1f1; } /* Handle */ ::-webkit-scrollbar-thumb { background: #888; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #555; } .image_area { position: relative; } #uploaded_image { display: block; object-fit: cover; object-position: center center; width: 270px; height: 270px; } #placelg { object-fit: cover; object-position: center center; width: 30px; height: 30px; } .preview { overflow: hidden; width: 160px; height: 160px; margin: 10px; border: 1px solid red; } .modal-lg { max-width: 1000px !important; } .overlay { position: absolute; bottom: 10px; left: 0; right: 0; background-color: rgba(255, 255, 255, 0.5); overflow: hidden; height: 0; transition: .5s ease; width: 100%; } .image_area:hover .overlay { height: 50%; cursor: pointer; } .textover { color: #333; font-size: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } </style> </head> <body style="padding-right: 0px !important;"> <!-- Main navbar --> <div class="navbar navbar-inverse"> <div class="navbar-header"> <a class="navbar-brand gradient-text " href="{% url 'apps:dashboard' %}"> <!-- <h3>NationalAddress</h3> --> <i> <img src="{% static 'img/logo-ok.png' %}" alt="" style="position: absolute; width: 26px; top: 7px;"> </i> <!-- <i class="icon-location4 fa-gradient"></i> --> <b style="margin-left: 12px;"> Teman-KU </b> (Sistem Informasi Pembangunan OKU) </a> <ul class="nav navbar-nav pull-right visible-xs-block"> <li><a data-toggle="collapse" data-target="#navbar-mobile"><i class="icon-tree5"></i></a></li> </ul> </div> <div class="navbar-collapse collapse" id="navbar-mobile"> <p class="navbar-text"><span class="label bg-success-400">Online</span></p> <ul class="nav navbar-nav navbar-right"> <li class="dropdown dropdown-user"> <a class="dropdown-toggle" data-toggle="dropdown"> {% for us in thisUser %} {% if us.filepath %} <img id="placelg" src="{% static 'img/' %}{{us.filepath}}"/> {% else %} <img src="{% static 'img/placeholder.jpg' %}"/> {% endif %} {% endfor %} <span>{{user.username}}</span> <i class="caret"></i> </a> <ul class="dropdown-menu dropdown-menu-right"> {% if user.is_superuser or user.is_staff %} <li><a href="{% url 'usermanagement' %}?page=userprofile"><i class="icon-user-tie"></i>User Profile</a></li> <li><a href="{% url 'usermanagement' %}"><i class="icon-user"></i>User Management</a></li> <li><a href="{% url 'apps:perbaikan' %}"><i class="icon-list"></i>Repair & Renovation</a></li> {% endif %} <li class="divider"></li> <li><a href="{% url 'logout' %}"><i class="icon-cog5"></i> Logout</a></li> </ul> </li> </ul> </div> </div> <!-- /main navbar --> {% block content %} <!-- Page container --> <div class="page-container"> <!-- Page content --> <div class="page-content"> <!-- Main sidebar --> <div class="sidebar sidebar-main" style="height: 95vh; min-height: 607px;"> <div class="sidebar-content" style="height: 100%;"> <!-- User menu --> <div class="sidebar-user"> <div class="category-content"> <div class="media"> {% for us in thisUser %} {% if us.filepath %} <a href="?page=userprofile" class="media-left"><img src="{% static 'img/' %}{{us.filepath}}" class="img-circle img-sm" alt=""></a> {% else %} <a href="?page=userprofile" class="media-left"><img src="{% static '/img/placeholder.jpg' %}" class="img-circle img-sm" alt=""></a> {% endif %} {% endfor %} <div class="media-body"> <span class="media-heading text-semibold">{{user.username}}</span> <div class="text-size-mini text-muted"> <i class="icon-pin text-size-small"></i> </div> </div> <div class="media-right media-middle"> <ul class="icons-list"> <li> <a href="?page=userprofile"><i class="icon-cog3"></i></a> </li> </ul> </div> </div> </div> </div> <!-- /user menu --> <!-- Main navigation --> <div class="sidebar-category sidebar-category-visible"> <div class="category-content no-padding"> <ul class="navigation navigation-main navigation-accordion"> <!-- Main --> <li class="navigation-header"> <i class="icon-menu" title="Main pages"></i></li> <li><a href="?page=user" class="tablinks" id="defaultOpen"><i class="icon-user"></i><span>User Management</span></a></li> <li><a href="?page=group" class="tablinks" id="defaultOpen"><i class="icon-users4"></i><span>Group</span></a></li> <!-- <li><a class="tablinks" onclick="openInfo(event, 'info-penduduk')" id="defaultOpen"><span>Kependudukan</span></a></li> <li><a class="tablinks" onclick="openInfo(event, 'info-pendidikan')" id="defaultOpen"><span>Pendidikan</span></a></li> <li><a class="tablinks" onclick="openInfo(event, 'info-pekerjaan')" id="defaultOpen"><span>Pekerjaan</span></a></li> <li><a class="tablinks" onclick="openInfo(event, 'info-poi')" id="defaultOpen"><span>POI</span></a></li> --> <!-- /page kits --> </ul> </div> </div> <!-- /main navigation --> </div> </div> <!-- /main sidebar --> <!-- Main content --> <!-- User management Tab --> <div class="content-wrapper" id="info-maps"> <div> <!-- Page header --> <div class="page-header page-header-default" style="margin-bottom: 0px;"> <div class="breadcrumb-line"> <ul class="breadcrumb"> <li>User Management</li> </ul> </div> </div> <!-- /page header --> <!-- Content area --> <div class="content" style="padding: 15px;"> <!-- Main charts --> <!-- Sales stats --> <div class="panel panel-flat" style="display: none;"> <div class="panel-heading"> <h6 class="panel-title">Table User</h6> <button id="modalAddButton" class="btn btn-primary btn-sm" value="SAVE" style="bottom: 15px; float: right; display:none;" data-toggle="modal" data-target="#modal_theme_info"></button> </div> <hr style="margin-top: 0px;"> <div class="panel-body"> <table class="table table-responsive datatable-show-all table-sm" id="userList" style="word-wrap:break-word;"> <thead> <tr> <th>No.</th> <th>Username</th> <th>Name</th> <th>Email</th> <th>Group</th> <th>Last login</th> <th>Status</th> <th class="text-center">Actions</th> </tr> </thead> <tbody> {% for user in data %} <tr> <td>{{forloop.counter}}</td> <td>{{user.username}}</td> <td>{{user.name}}</td> <td>{{user.email}}</td> <td>{{user.group}}</td> <td>{{user.last}}</td> <td> {% if user.isactive == True %} <span class="label label-success"> Active </span> {% else %} <span class="label label-danger"> Inactive </span> {% endif %} </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('{{user.id}}, {{user.isactive}}')"><i class="icon-user-block"></i> Switch user status</a></li> <li><a onclick="loaduserbyid('{{user.id}}')"><i class="icon-users"></i> Edit user</a></li> </ul> </li> </ul> </td> </tr> {% endfor %} </tbody> </table> </div> <!-- /form validation --> </div> </div> <!-- /main charts --> </div> </div> <!-- end user management tab --> <div class="content-wrapper" id="usergroup" style="display: none;"> <div> <!-- Page header --> <div class="page-header page-header-default" style="margin-bottom: 0px;"> <div class="breadcrumb-line"> <ul class="breadcrumb"> <li>Group</li> </ul> </div> </div> <!-- /page header --> <!-- Content area --> <div class="content" style="padding: 15px;"> <!-- Main charts --> <!-- Sales stats --> <div class="panel panel-flat" style="display: none;"> <div class="panel-heading"> <h6 class="panel-title">Table Group</h6> <button id="modalAddButtong" class="btn btn-primary btn-sm" value="SAVE" style="bottom: 15px; float: right; display:none;" data-toggle="modal" data-target="#modal_group"></button> </div> <hr style="margin-top: 0px;"> <div class="panel-body"> <table class="table table-responsive datatable-groups table-sm" id="usergroup"> <thead> <tr> <th>No.</th> <th>Name</th> <th class="text-center">Actions</th> </tr> </thead> <tbody> {% for group in dataGroup %} <tr> <td>{{forloop.counter}}</td> <td>{{group.name}}</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="deletegroup('{{group.id}}', '{{group.name}}')"><i class="icon-user-block"></i> Delete group</a></li> <li><a onclick="showmodalgroup('{{group.id}}', '{{group.name}}')"><i class="icon-users"></i> Edit group</a></li> </ul> </li> </ul> </td> </tr> {% endfor %} </tbody> </table> </div> <!-- /form validation --> </div> </div> <!-- /main charts --> </div> </div> <!-- content profile --> <div class="content-wrapper" id="userprofile" style="display: none;"> <div> <!-- Page header --> <div class="page-header page-header-default" style="margin-bottom: 0px;"> <div class="breadcrumb-line"> <ul class="breadcrumb"> <li>User Profile</li> </ul> </div> </div> <!-- /page header --> <!-- Content area --> <div class="content" style="padding: 15px;"> <!-- Main charts --> <!-- Sales stats --> <div class="panel panel-flat" style="display: block;"> <div class="panel-body"> <div class="row" style="margin-top: 20px"> <div class="col-lg-3 col-md-6"> <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" width="350px"/> {% else %} <img src="{% static 'img/placeholder.jpg' %}" id="uploaded_image" class="img-responsive img-circle" width="350px"/> {% endif %} {% endfor %} <div class="overlay"> <div class="textover">Ubah Foto Profil</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 class="col-lg-9 col-md-6"> <div class="panel panel-flat"> <div class="panel-heading"> <h6 class="panel-title">Informasi Profil</h6> </div> <div class="panel-body" id="user-mahasiswa" style="display:block"> {% for us in thisUser %} <form action="#"> <div class="form-group" id="dosormhs"> <div class="row"> <div class="col-md-6"> <label>Username </label> <input type="text" id="username" class="form-control" value="{{us.username}}" readonly> </div> </div> </div> <div class="form-group" id="dosormhs"> <div class="row"> <div class="col-md-6"> <label>Nama Depan </label> <input type="text" id="namadepan" class="form-control" value="{{us.firstname}}" readonly> </div> </div> </div> <div class="form-group" id="dosormhs"> <div class="row"> <div class="col-md-6"> <label>Nama Belakang </label> <input type="text" id="namabelakang" class="form-control" value="{{us.lastname}}" readonly> </div> </div> </div> <div class="form-group" id="dosormhs"> <div class="row"> <div class="col-md-6"> <label>Email </label> <input type="text" id="useremail" class="form-control" value="{{us.email}}" readonly> </div> </div> </div> </form> {% endfor %} </div> <div class="panel-footer" style="margin-top: 20px;"> <div class="pull-right mr-5"> <button type="button" type="button" class="btn btn-primary btn-labeled btn-labeled-right " id='edit-profile-mhs' data-toggle="modal" data-target="#modal-edit-data-mhs">Edit Profile <b><i class="icon-circle-right2"></i></b></button> <button type="button" type="button" class="btn btn-primary btn-labeled btn-labeled-right " id='edit-profile-mhs' data-toggle="modal" data-target="#modal-edt-password">Edit Password <b><i class="icon-lock"></i></b></button> </div> </div> </div> </div> </div> <!-- /form validation --> </div> </div> <!-- /main charts --> </div> </div> <!-- end content profile --> <!-- /main content --> </div> <!-- /page content --> </div> <!-- /page container --> <div id="modal_theme_info" class="modal fade"> <div class="modal-dialog md" style="margin-top: 100px;"> <div class="modal-content"> <div class="modal-header bg-info" style="background-color: #1a222f !important;"> <button type="button" class="close" data-dismiss="modal" onclick="destroyfade()">×</button> <h6 class="modal-title modstit">Modal Tambah User</h6> </div> <div class="modal-body" style="max-height: 450px;overflow-y: auto;"> <input type="hidden" id="iduser"> <div class="row"> <div class="form-group"> <label class="col-lg-3 control-label lbl-top">Username</label> <div class="col-lg-9"> <input id="inUsername" type="text" class="form-control" value="" required> </div> </div> </div> <div class="row"> <div class="form-group"> <label class="col-lg-3 control-label lbl-top">First Name</label> <div class="col-lg-9"> <input id="inNameF" type="text" class="form-control" value="" required> </div> </div> </div> <div class="row"> <div class="form-group"> <label class="col-lg-3 control-label lbl-top">Last Name</label> <div class="col-lg-9"> <input id="inNameL" type="text" class="form-control" value="" required> </div> </div> </div> <div class="row"> <div class="form-group"> <label class="col-lg-3 control-label lbl-top">Email</label> <div class="col-lg-9"> <input id="inEmail" type="text" class="form-control" value="" required> </div> </div> </div> <div class="row" style="margin-top: 20px;"> <div class="form-group"> <label class="col-lg-3 control-label">Staff</label> <div class="col-lg-9"> <label class="radio-inline"> <input type="radio" class="styled" value="true" name="isStaff" checked="checked"> Ya </label> <label class="radio-inline"> <input type="radio" class="styled" value="false" name="isStaff"> Tidak </label> </div> </div> </div> <div class="row"> <div class="form-group" style="margin-top: 10px !important;"> <label class="col-lg-3 control-label lbl-top">Groups</label> <div class="col-lg-9"> <select style="border-bottom: 1px solid rgb(83, 83, 83) !important;" id="select_group" data-placeholder="select group.." class="select-size-xs"> <option value="Select Group"></option> </select> </div> </div> </div> </div> <hr> <div class="modal-footer"> <button type="button" class="btn btn-link" data-dismiss="modal" onclick="destroyfade()">Close</button> <button type="button" class="btn btn-info" id="saveuser">Save changes</button> </div> </div> </div> </div> <div id="modal-edit-data-mhs" role="dialog" class="modal fade" tabindex="-9999999" style="margin-top:5%;"> <div class="modal-dialog modal-md" role="dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header bg-primary" style="background-color: #1a222f !important;"> <button type="button" class="close" data-dismiss="modal">×</button> <h6 class="modal-title"> Edit Profile</h6> </div> <div class="modal-body"> <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 panel-flat"> <div class="panel-body" style="margin: 20px !important"> <div class="row"> {% for us in thisUser %} <input type="text" id="iduseredt" value="{{us.id}}" hidden> <div class="form-group"> <div class="col-md-12"> <label class="control-label"> Username :</label> <input type="text" id="usernamepedt" class="form-control" value="{{us.username}}" readonly> </div> <!-- <div class="col-md-6"> <label class="control-label"> Password saat ini :</label> <input type="text" id="nama-mhs-edt" class="form-control" > </div> --> </div> <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 class="col-md-6"> <label class="control-label"> Password baru :</label> <input type="text" id="nama-mhs-edt" class="form-control" > </div> --> </div> <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 class="col-md-6"> <label class="control-label"> Ulangi password baru :</label> <input type="text" id="nama-mhs-edt" class="form-control" > </div> --> </div> <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> {% endfor %} </div> </div> </div> </form> </div> <div class="modal-footer"> <button class="btn btn-lg btn-success" id="save-edit-profile"> <i class="icon-checkmark2"></i> Simpan </button> <button class="btn btn-lg" data-dismiss="modal"> <i class="icon-cross3"></i> Batal </button> </div> </div> </div> </div> <div id="modal-edt-password" role="dialog" class="modal fade" tabindex="-9999999" style="margin-top:5%;"> <div class="modal-dialog modal-md" role="dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header bg-primary" style="background-color: #1a222f !important;"> <button type="button" class="close" data-dismiss="modal">×</button> <h6 class="modal-title"> Edit Password</h6> </div> <div class="modal-body"> <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 panel-flat"> <div class="panel-body" style="margin: 20px !important"> <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="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> </div> </form> </div> <div class="modal-footer"> <button class="btn btn-lg btn-success" id="save-edt-password"> <i class="icon-checkmark2"></i> Simpan </button> <button class="btn btn-lg" data-dismiss="modal"> <i class="icon-cross3"></i> Batal </button> </div> </div> </div> </div> <div id="modal-edit-profil" role="dialog" class="modal fade" tabindex="-9999999" style="margin-top:5%;"> <div class="modal-dialog modal-lg" role="dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header bg-primary" style="background-color: #1a222f !important;"> <button type="button" class="close" data-dismiss="modal">×</button> <h6 class="modal-title"> Edit Picture</h6> </div> <div class="modal-body"> <div class="row" id="set-crop-ratio"> <div class="col-md-6 col-md-offset-3"> <div class="image-cropper-container"><img src="{% static 'img/placeholder.jpg' %}" alt="" class="crop-4-3"></div> </div> </div> </div> <div class="modal-footer"> <button class="btn btn-lg btn-success" id="save-picture"> <i class="icon-checkmark2"></i> Simpan </button> <button class="btn btn-lg" data-dismiss="modal"> <i class="icon-cross3"></i> Batal </button> </div> </div> </div> </div> <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Crop Image Before Upload</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="img-container"> <div class="row"> <div class="col-md-8"> <img src="" id="sample_image" /> </div> <div class="col-md-4"> <div class="eg-preview"> <div class="preview preview-lg"></div> <!-- <div class="preview preview-md"></div> <div class="preview preview-sm"></div> <div class="preview preview-xs"></div> --> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" id="crop" class="btn btn-primary">Crop</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> </div> </div> </div> </div> <div id="modal_group" class="modal fade"> <div class="modal-dialog md" style="margin-top: 200px;"> <div class="modal-content"> <div class="modal-header bg-info" style="background-color: #1a222f !important;"> <button type="button" class="close" data-dismiss="modal" onclick="destroyfade()">×</button> <h6 class="modal-title modstitg">Modal Tambah Group</h6> </div> <div class="modal-body" style="max-height: 450px;overflow-y: auto;"> <input type="hidden" id="idgroup"> <div class="row"> <div class="form-group"> <label class="col-lg-3 control-label lbl-top">Nama Group</label> <div class="col-lg-9"> <input id="inGroupName" type="text" class="form-control" value="" required> </div> </div> </div> <div class> <div class="row" id="container_sparent"> <div class="form-group" style="margin-top: 10px !important;"> <label class="col-lg-3 control-label lbl-top">Group Parent</label> <div class="col-lg-9"> <select style="border-bottom: 1px solid rgb(83, 83, 83) !important;" id="select_group_parent" data-placeholder="select group.." class="select-size-xs"> <option></option> </select> </div> </div> </div> </div> <hr> <div class="modal-footer"> <button type="button" class="btn btn-link" data-dismiss="modal" onclick="destroyfade()">Close</button> <button type="button" class="btn btn-info" id="savegroup">Save changes</button> </div> </div> </div> </div> {% endblock %} <div class="page_loader"></div> <!-- Core JS files --> <script type="text/javascript" src="{% static 'js/plugins/loaders/pace.min.js' %}"></script> <script type="text/javascript" src="{% static 'js/core/libraries/jquery.min.js' %}"></script> <script type="text/javascript" src="{% static 'js/core/libraries/bootstrap.min.js' %}"></script> <script type="text/javascript" src="{% static 'js/plugins/loaders/blockui.min.js' %}"></script> <script type="text/javascript" src="{% static 'js/plugins/ui/nicescroll.min.js' %}"></script> <script type="text/javascript" src="{% static 'js/plugins/ui/drilldown.js' %}"></script> <!-- /core JS files --> <script src="https://use.fontawesome.com/d232835e93.js"></script> <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script> <!-- <script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script> <script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script> --> <script src="https://unpkg.com/esri-leaflet@2.5.1/dist/esri-leaflet.js"></script> <script src="https://unpkg.com/esri-leaflet-geocoder@2.3.3/dist/esri-leaflet-geocoder.js"></script> <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw-src.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.fullscreen/1.4.2/Control.FullScreen.min.js"></script> <!-- 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/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/ui/ripple.min.js' %}"></script> --> <!-- /theme JS files --> {% include 'includes/scripts.html' %} {% include 'layout/userprofile.html' %} <script src="{% static 'js/leaflet-bing-layer.js' %}"></script> <!-- <script src="https://unpkg.com/sweetalert/dists/sweetalert.min.js"></script> --> <script type="text/javascript" src="{% static 'js/core/libraries/jquery_ui/interactions.min.js' %}"></script> <script type="text/javascript" src="{% static 'js/plugins/forms/selects/select2.min.js' %}"></script> <!-- <script type="text/javascript" src="{% static 'js/plugins/media/cropper.min.js' %}"></script> <script type="text/javascript" src="{% static 'js/pages/extension_image_cropper.js' %}"></script> --> <script type="text/javascript" src="{% static 'js/pages/form_select2.js' %}"></script> </body> </html> <script> // file.onchange = evt => { // const [fil] = file.files // if (fil) { // blah.src = URL.createObjectURL(fil) // } // } jQuery(document).ajaxSend(function(event, xhr, settings) { function getCookie(name) { var cookieValue = null; if (document.cookie && document.cookie != '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = jQuery.trim(cookies[i]); // Does this cookie string begin with the name we want? if (cookie.substring(0, name.length + 1) == (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } function sameOrigin(url) { // url could be relative or scheme relative or absolute var host = document.location.host; // host + port var protocol = document.location.protocol; var sr_origin = '//' + host; var origin = protocol + sr_origin; // Allow absolute or scheme relative URLs to same origin return (url == origin || url.slice(0, origin.length + 1) == origin + '/') || (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') || // or any other URL that isn't scheme relative or absolute i.e relative. !(/^(\/\/|http:|https:).*/.test(url)); } function safeMethod(method) { return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); } if (!safeMethod(settings.type) && sameOrigin(settings.url)) { xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken')); } }); function openInfo(evt, infName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("content-wrapper"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(infName).style.display = "block"; evt.currentTarget.className += " active"; } const queryString = window.location.search; const urlParams = new URLSearchParams(queryString); const page = urlParams.get('page') if (page == "group") { $("#usergroup").css("display", "block"); $("#info-maps").css("display", "none"); $("#userprofile").css("display", "none"); } else if (page == "user" || page == null) { $("#usergroup").css("display", "none"); $("#info-maps").css("display", "block"); $("#userprofile").css("display", "none") } else { $("#usergroup").css("display", "none"); $("#info-maps").css("display", "none"); $("#userprofile").css("display", "block"); } function destroyfade() { $(".modal-backdrop").css("display", "none") $(".modal-backdrop").removeClass('show'); $("body").css('padding-right', '0px !important') } $('.datatable-show-all').DataTable({ autoWidth: false, columnDefs: [{ orderable: false, width: '20px', targets: [0], }, // { // width: '100px', // targets: [ 4 ] // }, { orderable: false, width: '20px', targets: [6], }, { orderable: false, width: '20px', targets: [7], }, ], dom: '<"float-left"B>frtip', buttons: [{ text: 'Tambah User', action: function(e, dt, node, config) { $("#modalAddButton").click() $("#inUsername").attr("disabled", false); $("#inUsername").val(null); $("#inNameF").val(null); $("#inNameL").val(null); $("#inEmail").val(null); $("#iduser").val(null); $(".modstit").html("Tambah User") loadGroups(null) } }], language: { search: '<span>Filter:</span> _INPUT_', searchPlaceholder: 'Type to filter...', lengthMenu: '<span>Show:</span> _MENU_', paginate: { 'first': 'First', 'last': 'Last', 'next': '→', 'previous': '←' } }, drawCallback: function() { $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup'); }, preDrawCallback: function() { $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup'); } }); $('.datatable-groups').DataTable({ autoWidth: false, columnDefs: [{ orderable: false, width: '100px', targets: [2] }, { orderable: false, width: '100px', targets: [0] }], dom: '<"float-left"B>frtip', buttons: [{ text: 'Tambah Group', action: function(e, dt, node, config) { $("#modalAddButtong").click(); $("#idgroup").val(null); $(".modstitg").html("Tambah Group") $("#inGroupName").val(null) $("#container_sparent").css("display", "block") loadGroups(null) } }], language: { search: '<span>Filter:</span> _INPUT_', searchPlaceholder: 'Type to filter...', lengthMenu: '<span>Show:</span> _MENU_', paginate: { 'first': 'First', 'last': 'Last', 'next': '→', 'previous': '←' } }, drawCallback: function() { $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup'); }, preDrawCallback: function() { $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup'); } }); $("#modalAddButton").click(function() { $("body").css("padding-right", "0px !important") }) $("#saveuser").on("click", function() { addUser() }) function addUser() { var isObject = {}; var ars = '' var group = $("#select_group").val(); var iduser = $("#iduser").val(); console.log(group); if (iduser) { isObject.id = iduser; } // for(i in group){ // if(i < group.length-1){ // ars += group[i]+"~"; // }else{ // ars += group[i]; // } // } // return false isObject['username'] = $("#inUsername").val(); isObject['first_name'] = $("#inNameF").val(); isObject['last_name'] = $("#inNameL").val(); isObject['email'] = $("#inEmail").val(); isObject.group = group isObject.isStaff = $('input[name="isStaff"]:checked').val(); console.log(isObject); $.ajax({ url: "{% url 'adduser' %}", data: isObject, dataType: 'json', type: 'post', success: function(data) { let response = data; if (response.code == 0) { $("#modal_theme_info").modal('toggle'); destroyfade(); swal({ title: response.info, text: response.data, type: "success", icon: "success", confirmButtonColor: "#00BCD4" }).then((isok) => { location.reload(); }) } else { swal({ title: response.info, text: response.data, type: "alert", icon: "error", confirmButtonColor: "#00BCD4" }) } } }); } $("#select_group").on("click", function(e) { e.preventDefault() }) function loadGroups(isSelect) { var isObject = {} console.log(isSelect) isObject.func_name = "loadGroups"; $.ajax({ url: "{% url 'getallGroups' %}", data: isObject, dataType: 'json', type: 'post', success: function(data) { let response = data; console.log(response) if (response.code == 0) { var groups = response.data; var html = `<option value="null" selected disabled>-- Pilih Group --</option>`; for (i in groups) { if (isSelect) { if (isSelect.length >= 1) { for (j in isSelect) { if (isSelect[j] == groups[i]) { html += `<option value="` + groups[i] + `" selected>` + groups[i] + `</option>`; console.log(groups[i]) } else { html += `<option value="` + groups[i] + `">` + groups[i] + `</option>`; } } } else { html += `<option value="` + groups[i] + `">` + groups[i] + `</option>`; } } else { html += `<option value="` + groups[i] + `">` + groups[i] + `</option>`; } } $("#select_group").html(html); $("#select_group_parent").html(html); console.log(html) } else { $("#select_group").html("group tidak tersedia"); $("#select_group_parent").html("group tidak tersedia"); } } }); } 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 }).then((isConfirm) => { console.log(isConfirm) if (isConfirm.value) { $.ajax({ url: "{% url 'switchStatus' %}", data: isObject, dataType: 'json', type: 'post', success: function(data) { 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" }).then((isok) => { location.reload(); }) } else { alert("no data in database") } } }); } else { swal("Dibatalkan", "User status tidak berubah", "error"); } }); } function loaduserbyid(id) { var isObject = {}; $(".modstit").html("Update User") $("#inUsername").attr("disabled", true) isObject.id = id; $("#iduser").val(id) $.ajax({ url: "{% url 'loadUserbyId' %}", data: isObject, dataType: 'json', type: 'post', success: function(data) { let response = data; if (response.code == 0) { var user = response.data; console.log(user) $("#inUsername").val(user.username); $("#inNameF").val(user.firstname); $("#inNameL").val(user.lastname); $("#inEmail").val(user.email); if (user.is_staff) { $('input[name=isStaff][value=true]').attr('checked', true) } else { $('input[name=isStaff][value=false]').attr('checked', true) } loadGroups(user.group) $("#modalAddButton").click() } else { } } }); } loaderPage(false); function loaderPage(stat) { if (stat == true) { $('.page_loader').show(); } else { $('.page_loader').hide(); $(".panel-flat").css("display", "block") } }; $("#savegroup").on("click", function() { addGroup(); }) function addGroup() { var isObject = {} var idgroup = $("#idgroup").val(); isObject.parent = $("#select_group_parent").val() isObject.name = $("#inGroupName").val(); if (idgroup) { isObject.id = idgroup; } console.log(isObject) // return false $.ajax({ url: "{% url 'addGroup' %}", data: isObject, dataType: 'json', type: 'post', success: function(data) { let response = data; if (response.code == 0) { $("#modal_group").modal('toggle'); destroyfade(); swal({ title: response.info, text: response.data, type: "success", icon: "success", confirmButtonColor: "#00BCD4" }).then((isok) => { window.location.href = window.location.origin + "/usermanagement/?page=group" }) } else { swal({ title: response.info, text: response.data, type: "alert", icon: "error", confirmButtonColor: "#00BCD4" }) } } }); } function showmodalgroup(id, name) { console.log(id); console.log(name); $("#idgroup").val(id); $("#inGroupName").val(name); $(".modstitg").html("Edit Group"); // $("#modalAddButtong").click(); var isObject = {} isObject.id = id $.ajax({ url: "{% url 'getGroupById' %}", data: isObject, dataType: 'json', type: 'post', success: function(data) { let response = data; if (response.code == 0) { var datas = response.data if (datas.length == 0) { $("#container_sparent").css("display", "none") } else { $("#container_sparent").css("display", "block") } loadGroups(datas) $("#modalAddButtong").click(); } else { swal({ title: response.info, text: response.data, type: "alert", icon: "error", confirmButtonColor: "#00BCD4" }) } } }); } function deletegroup(id, group) { var isObject = {} var params = id; isObject.id = params; swal({ title: "Hapus group?", text: "Group " + group + " akan dihapus", type: "warning", showCancelButton: true, confirmButtonClass: "btn-danger", confirmButtonText: "Ya!", cancelButtonText: "Tidak!", closeOnConfirm: false, closeOnCancel: false }).then((isConfirm) => { console.log(isConfirm) if (isConfirm.value) { $.ajax({ url: "{% url 'deleteGroup' %}", data: isObject, dataType: 'json', type: 'post', success: function(data) { let response = data; if (response.code == 0) { swal({ title: "sukses", text: "Group berhasil dihapus", type: "success", icon: "success", confirmButtonColor: "#00BCD4" }).then((isok) => { location.reload(); }) } else { alert("no data in database") } } }); } else { swal("Dibatalkan", "User status tidak berubah", "error"); } }); } //user profile js $("#save-edt-password").on("click", function() { changepassword(); }) function changepassword() { var isObject = {}; isObject.id = $("#iduseredt").val(); isObject.currPass = $('#currentPass').val(); isObject.newPass = $("#newPass").val(); isObject.renewPass = $("#renewPass").val(); isObject.username = $("#usernameedt").val(); if (isObject.currPass == "" || isObject.newPass == "" || isObject.renewPass == "") { $("#notifications").css("display", "block") $("#notifications").html("Inputan tidak boleh kosong") return false; } $.ajax({ url: "{% url 'changepassword' %}", data: isObject, dataType: 'json', type: 'post', success: function(data) { let response = data; if (response.code == 0) { var datas = response.data swal({ title: response.info, text: response.data, type: "success", icon: "success", confirmButtonColor: "#00BCD4" }).then((isConfirm) => { window.location = "{% url 'apps:dashboard' %}" }) } else { $("#notifications").html(response.data) $("#notifications").css("display", "block") } } }); } $("#save-edit-profile").on("click", function() { editprofile(); }) function editprofile() { var isObject = {} isObject.id = $("#iduseredt").val(); isObject.first_name = $("#firstnameedt").val(); isObject.last_name = $("#lastnameedt").val(); isObject.email = $("#emailedts").val() if (isObject.first_name == "" || isObject.last_name == "" || isObject.email == "") { $("#notificationsprop").css("display", "block"); $("#notificationsprop").html("Inputan tidak boleh kosong") return false } else { var mail_format = /^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/; if (!isObject.email.match(mail_format)) { $("#notificationsprop").css("display", "block"); $("#notificationsprop").html("Format email tidak valid, silahkan coba kembali.") return false } } $.ajax({ url: "{% url 'editprofile' %}", data: isObject, dataType: 'json', type: 'post', success: function(data) { let response = data; if (response.code == 0) { var datas = response.data swal({ title: response.info, text: response.data, type: "success", icon: "success", confirmButtonColor: "#00BCD4" }).then((isConfirm) => { window.location.href = "/usermanagement/?page=userprofile" }) } else { $("#notifications").html(response.data) $("#notifications").css("display", "block") } } }); } function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#uploaded_image').attr('src', e.target.result); $('#uploaded_image').hide(); $('#uploaded_image').fadeIn(650); } reader.readAsDataURL(input.files[0]); } } $("#upload_image").change(function() { loaderPage(true) readURL(this); const fileupload1 = $(this).prop('files')[0]; var formData = new FormData(); formData.append("id", $("#iduseredt").val()); formData.append("inifile", fileupload1) $.ajax({ url: "{% url 'editpp' %}", data: formData, dataType: 'json', type: 'POST', processData: false, contentType: false, success: function(data) { let response = data if (response.code == 0) { swal({ title: response.info, text: response.data, type: "success", icon: "success", confirmButtonColor: "#00BCD4" }).then((isConfirm) => { location.reload() }) } else { swal({ title: 'Error', text: 'Hubungi Developer', type: "warning", icon: "error", confirmButtonColor: "#00BCD4" }) } } }) }); </script>