API tools faq
paste
rizsyad

view_html

rizsyad
Apr 6th, 2022 (edited)
879
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.53 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Setting Akun SLO | INKINDO</title>
  8.     <link
  9.      rel="stylesheet"
  10.      href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css"
  11.    />
  12.     <link
  13.      rel="stylesheet"
  14.      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
  15.    />
  16.     <link rel="icon" href="https://slo.inkindo.co.id/favicon.ico" />
  17.  
  18.     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  19.   </head>
  20.   <body>
  21.     <div class="container-fluid mt-5">
  22.       <div class="row">
  23.         <div class="col-md-4 col-sm-12 mb-3">
  24.           <div class="list-group" id="list-tab" role="tablist">
  25.             <a
  26.              class="list-group-item list-group-item-action active"
  27.              data-toggle="list"
  28.              href="#pjt"
  29.              role="tab"
  30.              >PJT</a
  31.            >
  32.             <a
  33.              class="list-group-item list-group-item-action"
  34.              data-toggle="list"
  35.              href="#tt"
  36.              role="tab"
  37.              >TT</a
  38.            >
  39.             <a
  40.              class="list-group-item list-group-item-action"
  41.              data-toggle="list"
  42.              href="#gm"
  43.              role="tab"
  44.              >GM/Biasa</a
  45.            >
  46.           </div>
  47.         </div>
  48.         <div class="col-md-8 col-sm-12">
  49.           <div class="tab-content">
  50.             <div class="tab-pane active" id="pjt" role="tabpanel">
  51.               <button class="btn btn-primary add-data" data-role="pjt">
  52.                 Add PJT
  53.               </button>
  54.               <div class="table-responsive mt-3">
  55.                 <table class="table table-bordered table-striped">
  56.                   <thead class="thead-dark">
  57.                     <tr>
  58.                       <th>#</th>
  59.                       <th>Nama</th>
  60.                       <th>Username</th>
  61.                       <th>Password</th>
  62.                       <th>Aksi</th>
  63.                     </tr>
  64.                   </thead>
  65.                   <tbody id="data-pjt"></tbody>
  66.                 </table>
  67.               </div>
  68.             </div>
  69.             <div class="tab-pane" id="tt" role="tabpanel">
  70.               <button class="btn btn-primary add-data" data-role="tt">
  71.                 Add TT
  72.               </button>
  73.               <div class="table-responsive mt-3">
  74.                 <table class="table table-bordered table-striped">
  75.                   <thead class="thead-dark">
  76.                     <tr>
  77.                       <th>#</th>
  78.                       <th>Nama</th>
  79.                       <th>Username</th>
  80.                       <th>Password</th>
  81.                       <th>Aksi</th>
  82.                     </tr>
  83.                   </thead>
  84.                   <tbody id="data-tt"></tbody>
  85.                 </table>
  86.               </div>
  87.             </div>
  88.             <div class="tab-pane" id="gm" role="tabpanel">
  89.               <button class="btn btn-primary add-data" data-role="gm">
  90.                 Add GM/Biasa
  91.               </button>
  92.               <div class="table-responsive mt-3">
  93.                 <table class="table table-bordered table-striped">
  94.                   <thead class="thead-dark">
  95.                     <tr>
  96.                       <th>#</th>
  97.                       <th>Nama</th>
  98.                       <th>Username</th>
  99.                       <th>Password</th>
  100.                       <th>Aksi</th>
  101.                     </tr>
  102.                   </thead>
  103.                   <tbody id="data-gm"></tbody>
  104.                 </table>
  105.               </div>
  106.             </div>
  107.           </div>
  108.         </div>
  109.       </div>
  110.     </div>
  111.  
  112.     <!-- Modal -->
  113.     <div
  114.      class="modal fade"
  115.      id="add-modal"
  116.      tabindex="-1"
  117.      role="dialog"
  118.      aria-labelledby="exampleModalLabel"
  119.      aria-hidden="true"
  120.    >
  121.       <div class="modal-dialog" role="document">
  122.         <div class="modal-content">
  123.           <div class="modal-header">
  124.             <h5 class="modal-title">semua ada Add PJT</h5>
  125.             <button
  126.              type="button"
  127.              class="close"
  128.              data-dismiss="modal"
  129.              aria-label="Close"
  130.            >
  131.               <span aria-hidden="true">&times;</span>
  132.             </button>
  133.           </div>
  134.           <div class="modal-body">
  135.             <div class="form-group">
  136.               <input type="hidden" id="role" />
  137.               <input type="hidden" id="id" />
  138.               <label for="nama">Nama</label>
  139.               <input type="text" class="form-control" id="nama" />
  140.             </div>
  141.             <div class="form-group">
  142.               <label for="username">Username</label>
  143.               <input type="text" class="form-control" id="username" />
  144.             </div>
  145.             <div class="form-group">
  146.               <label for="password">Password</label>
  147.               <input type="text" class="form-control" id="password" />
  148.             </div>
  149.           </div>
  150.           <div class="modal-footer">
  151.             <button
  152.              type="button"
  153.              class="btn btn-secondary"
  154.              data-dismiss="modal"
  155.            >
  156.               Close
  157.             </button>
  158.             <button type="button" class="btn btn-primary asd" id="save-data">
  159.               Save
  160.             </button>
  161.           </div>
  162.         </div>
  163.       </div>
  164.     </div>
  165.  
  166.     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  167.     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js"></script>
  168.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"></script>
  169.     <script>
  170.       $(document).ready(function () {
  171.         const setLocalStorage = (key, value) =>
  172.           window.localStorage.setItem(key, value);
  173.         const getLocalStorage = (key) => window.localStorage.getItem(key);
  174.         const arrayData = (role) => JSON.parse(getLocalStorage(role)) || [];
  175.  
  176.         const getAkun = (role, id) => {
  177.           const getData = JSON.parse(getLocalStorage(role));
  178.           const akun = getData.find((o) => o.id == id);
  179.  
  180.           return akun;
  181.         };
  182.  
  183.         const createList = (role, nama, username, password, id) => {
  184.           const oldData = arrayData(role);
  185.           let objData;
  186.           let newList;
  187.  
  188.           if (id) {
  189.             newList = oldData.map((item) => {
  190.               if (item.id == id) {
  191.                 objData = {
  192.                   id,
  193.                   nama,
  194.                   username,
  195.                   password,
  196.                 };
  197.                 return objData;
  198.               }
  199.  
  200.               return item;
  201.             });
  202.           } else {
  203.             objData = {
  204.               id: Math.round(Math.random() * 100),
  205.               nama,
  206.               username,
  207.               password,
  208.             };
  209.             newList = [...oldData, objData];
  210.           }
  211.  
  212.           return newList;
  213.         };
  214.  
  215.         const newAkun = (role, nama, username, password, id) => {
  216.           const listData = createList(role, nama, username, password, id);
  217.           return setLocalStorage(role, JSON.stringify(listData));
  218.         };
  219.  
  220.         const deleteAkun = (role, id) => {
  221.           const oldData = arrayData(role);
  222.           const filterData = oldData.filter((item) => item.id !== parseInt(id));
  223.           return setLocalStorage(role, JSON.stringify(filterData));
  224.         };
  225.  
  226.         const createRow = (role, select) => {
  227.           const data = arrayData(role);
  228.           let rowData = "";
  229.  
  230.           if (data.length == 0) {
  231.             return $(select).append(
  232.               `<tr class="text-center"><td colspan="5">Data ${role.toUpperCase()} tidak ada</td></tr>`
  233.             );
  234.           }
  235.  
  236.           data.forEach((el, index) => {
  237.             rowData += `<tr>
  238.             <td>${index + 1}</td>
  239.             <td>${el.nama}</td><td>${el.username}</td>
  240.             <td>${el.password}</td>
  241.             <td>
  242.               <button class="btn btn-warning btn-sm my-1 edit-data" data-role="${role}" data-id="${
  243.              el.id
  244.            }">
  245.                 <i class="fa-solid fa-pen-to-square"></i>
  246.               </button>
  247.               <button class="btn btn-danger btn-sm my-1 remove-data" data-nama="${
  248.                el.nama
  249.              }" data-role="${role}" data-id="${el.id}">
  250.                 <i class="fa-solid fa-trash"></i>
  251.               </button></td>
  252.           </tr>`;
  253.           });
  254.  
  255.           $(select).append(rowData);
  256.         };
  257.  
  258.         createRow("pjt", "#data-pjt");
  259.         createRow("tt", "#data-tt");
  260.         createRow("gm", "#data-gm");
  261.  
  262.         // add and edit
  263.         const clearInput = () => {
  264.           $("#role").val("");
  265.           $("#nama").val("");
  266.           $("#username").val("");
  267.           $("#password").val("");
  268.           $("#id").val("");
  269.         };
  270.  
  271.         $(".add-data").on("click", function () {
  272.           clearInput();
  273.           const roleData = $(this).attr("data-role");
  274.           $("#role").val(roleData);
  275.           $("#add-modal").modal("show");
  276.           $(".modal-title").text(`Add ${roleData.toUpperCase()}`);
  277.         });
  278.  
  279.         $("#save-data").on("click", function () {
  280.           const role = $("#role").val();
  281.           const nama = $("#nama").val();
  282.           const username = $("#username").val();
  283.           const password = $("#password").val();
  284.  
  285.           const idEdit = $("#id").val();
  286.           const isModeEdit = idEdit !== "";
  287.           const kataAlert = isModeEdit ? "Diedit" : "Ditambah";
  288.  
  289.           newAkun(role, nama, username, password, idEdit);
  290.  
  291.           Swal.fire("Sukses", `Akun Berhasil ${kataAlert}`, "success").then(
  292.             () => {
  293.               location.reload();
  294.             }
  295.           );
  296.         });
  297.  
  298.         $(".edit-data").on("click", function () {
  299.           let roleData = $(this).attr("data-role");
  300.           let idData = $(this).attr("data-id");
  301.  
  302.           const dataAkun = getAkun(roleData, idData);
  303.  
  304.           let { nama, role, username, password } = dataAkun;
  305.  
  306.           $("#role").val(roleData);
  307.           $("#nama").val(nama);
  308.           $("#username").val(username);
  309.           $("#password").val(password);
  310.           $("#id").val(idData);
  311.  
  312.           $("#add-modal").modal("show");
  313.           $(".modal-title").text(`Edit ${roleData.toUpperCase()}`);
  314.         });
  315.  
  316.         $(".remove-data").on("click", function () {
  317.           let roleData = $(this).attr("data-role");
  318.           let idData = $(this).attr("data-id");
  319.           let namaData = $(this).attr("data-nama");
  320.  
  321.           Swal.fire({
  322.             title: "Apakah kamu yakin?",
  323.             html: `ingin menghapus akun ${roleData.toUpperCase()} dengan nama <b>${namaData}</b>? <br/> Anda tidak akan dapat mengembalikan ini!`,
  324.             icon: "warning",
  325.             showCancelButton: true,
  326.             confirmButtonColor: "#3085d6",
  327.             cancelButtonColor: "#d33",
  328.             confirmButtonText: "Ya, Hapus!",
  329.             cancelButtonText: "Batal",
  330.           }).then((result) => {
  331.             if (result.isConfirmed) {
  332.               deleteAkun(roleData, idData);
  333.  
  334.               Swal.fire({
  335.                 title: "Dihapus!",
  336.                 html: `Akun ${roleData.toUpperCase()} dengan nama <b>${namaData}</b> telah dihapus.`,
  337.                 icon: "success",
  338.               }).then(() => {
  339.                 location.reload();
  340.               });
  341.             }
  342.           });
  343.         });
  344.       });
  345.     </script>
  346.   </body>
  347. </html>
  348.  
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!