templates/dashboard/lecturer.html

{% extends 'dashboard/base.html' %} {% block title %}Dosen{% endblock title %}
{% block content %}
<div class="row g-3 mb-4 align-items-center justify-content-between">
  <div class="col-auto">
    <h1 class="app-page-title mb-0">Dosen</h1>
  </div>
  <div class="col-auto">
    <div class="page-utilities">
      <div
        class="row g-2 justify-content-start justify-content-md-end align-items-center"
      >
        <div class="col-auto">
          <select
            class="form-select w-auto"
            id="filter"
            style="font-size: 0.95rem"
          >
            <option selected value="">Semua</option>
            <option value="Sistem Cerdas">Sistem Cerdas</option>
            <option value="Rekayasa Perangkat Lunak">
              Rekayasa Perangkat Lunak
            </option>
            <option value="Jaringan & IoT">Jaringan & IoT</option>
            <option value="Multimedia & Teknologi: AI Game">
              Multimedia & Teknologi: AI Game
            </option>
          </select>
        </div>
        <div class="col-auto">
          <a
            class="btn app-btn-primary"
            href="#"
            data-bs-toggle="modal"
            data-bs-target="#modal"
            >Tambah</a
          >
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row g-4">
  {% for lecturer in lecturers %}
  <div
    class="col-6 col-md-4 col-xl-3 col-xxl-2 lecturer"
    data-kbk="{{ lecturer.kelompok_bidang_keahlian }}"
  >
    <div class="app-card app-card-doc shadow-sm h-100">
      <div class="app-card-thumb-holder p-3 d-flex justify-content-center">
        <div
          style="
            width: 95px;
            height: 95px;
            overflow: hidden;
            border-radius: 50%;
            border: 2px solid white;
          "
        >
          <img
            src="{{ lecturer.foto }}"
            style="width: 100%; height: 100%; object-fit: cover"
          />
        </div>
      </div>

      <div class="app-card-body p-3 has-card-actions">
        <h4 class="app-doc-title truncate mb-0">
          <a href="#">{{ lecturer.nama }}</a>
        </h4>
        <div class="app-doc-meta">
          <ul class="list-unstyled mb-0">
            <li>
              Kelompok Bidang Keahlian:
              <span class="text-unmuted"
                >{{ lecturer.kelompok_bidang_keahlian }}</span
              >
            </li>
          </ul>
        </div>

        <div class="app-card-actions">
          <div class="dropdown">
            <div
              class="dropdown-toggle no-toggle-arrow"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              <svg
                width="1em"
                height="1em"
                viewBox="0 0 16 16"
                class="bi bi-three-dots-vertical"
                fill="currentColor"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill-rule="evenodd"
                  d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"
                />
              </svg>
            </div>

            <ul class="dropdown-menu">
              <li>
                <a
                  data-bs-toggle="modal"
                  data-bs-target="#modal"
                  class="dropdown-item"
                  href="#"
                  onclick="setModalData('{{ lecturer.id }}', '{{ lecturer.nama }}', '{{ lecturer.kelompok_bidang_keahlian }}', '{{ lecturer.foto }}')"
                  ><svg
                    width="1em"
                    height="1em"
                    viewBox="0 0 16 16"
                    class="bi bi-pencil me-2"
                    fill="currentColor"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5L13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175l-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"
                    /></svg
                  >Edit</a
                >
              </li>
              <li><hr class="dropdown-divider" /></li>
              <li>
                <a
                  class="dropdown-item"
                  href="#"
                  onclick="deleteLecturer('{{ lecturer.id }}', '{{ lecturer.foto }}')"
                  ><svg
                    width="1em"
                    height="1em"
                    viewBox="0 0 16 16"
                    class="bi bi-trash me-2"
                    fill="currentColor"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"
                    />
                    <path
                      fill-rule="evenodd"
                      d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"
                    /></svg
                  >Delete</a
                >
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  {% endfor %}
  <p class="text-center mt-5 d-none" id="noData">
    <span class="text-unmuted">Tidak ada</span> data yang ditemukan
  </p>
</div>

<form id="deleteForm" method="post" action="{{ url_for('lecturer.delete') }}">
  <input type="hidden" name="id" id="lecturerId" />
  <input type="hidden" name="foto" id="lecturerFoto" />
</form>

{% endblock content %} {% block modal %}
<div
  class="modal fade"
  id="modal"
  data-bs-backdrop="static"
  data-bs-keyboard="false"
  tabindex="-1"
  aria-labelledby="modalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="modalLabel">Data Dosen</h1>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <form
          id="dataForm"
          method="post"
          action="{{ url_for('lecturer.create') }}"
          enctype="multipart/form-data"
        >
          <input type="hidden" id="lecturer-id" name="id" />
          <input type="hidden" id="modalType" value="create" />
          <input type="hidden" id="prevFoto" name="prev_foto" />

          <div class="d-flex justify-content-center mt-2">
            <div
              style="
                width: 130px;
                height: 130px;
                overflow: hidden;
                border-radius: 50%;
                position: relative;
              "
            >
              <img
                id="image-display"
                src="{{ url_for('static', filename='images/placeholder.jpg') }}"
                style="width: 100%; height: 100%; object-fit: cover"
              />
            </div>
          </div>

          <div class="d-flex justify-content-center mt-2">
            <a
              class="btn app-btn-primary"
              href="#"
              style="font-size: 0.77rem"
              id="uploadFile"
            >
              <svg
                width="1em"
                height="1em"
                viewBox="0 0 16 16"
                class="bi bi-upload"
                fill="currentColor"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill-rule="evenodd"
                  d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"
                ></path>
                <path
                  fill-rule="evenodd"
                  d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z"
                ></path></svg
              >&nbsp;&nbsp;Upload</a
            >

            <input
              type="file"
              id="file-input"
              class="d-none"
              accept="image/*"
              onchange="previewImage(event)"
              name="foto"
            />
          </div>

          <div class="mb-3">
            <label for="nama" class="form-label">Nama Dosen</label>
            <input
              type="text"
              class="form-control"
              id="nama"
              placeholder="Masukkan nama dosen"
              oninput="removeNumbers(this)"
              name="nama"
            />
          </div>
          <div class="mb-5">
            <label for="kbk" class="form-label"
              >Kelompok Bidang Keahlian Dosen</label
            >
            <select class="form-select" id="kbk" name="kbk">
              <option selected value="" disabled>Pilih</option>
              <option value="Sistem Cerdas">Sistem Cerdas</option>
              <option value="Rekayasa Perangkat Lunak">
                Rekayasa Perangkat Lunak
              </option>
              <option value="Jaringan & IoT">Jaringan & IoT</option>
              <option value="Multimedia & Teknologi: AI Game">
                Multimedia & Teknologi: AI Game
              </option>
            </select>
          </div>

          <div class="row justify-content-between">
            <div class="col-auto">
              <a class="btn app-btn-secondary" href="#" data-bs-dismiss="modal"
                >Batal</a
              >
            </div>
            <div class="col-auto">
              <a
                class="btn app-btn-primary"
                href="#"
                onclick="submitForm('create')"
                >Simpan</a
              >
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock modal %} {% block script %}
<script>
  function previewImage(event) {
    const file = event.target.files[0];
    if (file && file.type.startsWith("image/")) {
      const reader = new FileReader();
      reader.onload = function (e) {
        $("#image-display").attr("src", e.target.result);
      };
      reader.readAsDataURL(file);
    } else {
      alertMessage(
        "Upload File Gagal",
        "Hanya menerima format file gambar",
        "error"
      );
    }
  }

  function submitForm() {
    const form = $("#dataForm");
    const fileInput = $("#file-input");
    const nama = $("#nama");
    const kbk = $("#kbk");
    const modalType = $("#modalType").val();

    let fileExist = true;

    if (modalType === "create" && fileInput[0].files.length === 0) {
      fileExist = false;
    }

    if (fileExist && nama.val() !== "" && kbk.val() !== null) {
      $(".spinner").removeClass("d-none");
      $(".overlay").removeClass("d-none");
      form.submit();
    } else {
      alertMessage("Simpan Data Gagal", "Seluruh isian harus lengkap", "error");
    }
  }

  function removeNumbers(input) {
    input.value = input.value.replace(/[0-9]/g, "");
  }

  $("#file-input").change(previewImage);

  $("#uploadFile").click(function () {
    $("#file-input").click();
  });

  $("#modal").on("hidden.bs.modal", function () {
    $("#nama").val("");
    $("#kbk").val("");

    $("#file-input").val("");
    $("#modalType").val("create");

    $("#image-display").attr(
      "src",
      "{{ url_for('static', filename='images/placeholder.jpg') }}"
    );

    $("#dataForm").attr("action", "{{ url_for('lecturer.create') }}");
  });

  function toggleNoData() {
    if ($(".lecturer:visible").length === 0) {
      $("#noData").removeClass("d-none");
    } else {
      $("#noData").addClass("d-none");
    }
  }

  toggleNoData();

  $("#filter").change(function () {
    var selectedKbk = $(this).val();
    $(".lecturer").each(function () {
      var lecturerKbk = $(this).data("kbk");
      if (selectedKbk === "" || lecturerKbk === selectedKbk) {
        $(this).show();
      } else {
        $(this).hide();
      }
    });

    toggleNoData();
  });

  function deleteLecturer(lecturerId, lecturerFoto) {
    Swal.fire({
      title: "Konfirmasi Hapus",
      text: "Apakah anda yakin untuk menghapus data ini?",
      icon: "warning",
      showCancelButton: true,
      cancelButtonColor: "grey",
      confirmButtonText: "Ya, hapus",
      cancelButtonText: "Batal",
      customClass: {
        confirmButton: "swt-alert-btn",
      },
    }).then((result) => {
      if (result.isConfirmed) {
        $(".spinner").removeClass("d-none");
        $(".overlay").removeClass("d-none");

        $("#lecturerId").val(lecturerId);
        $("#lecturerFoto").val(lecturerFoto);

        $("#deleteForm").submit();
      }
    });
  }

  function setModalData(lecturerId, lecturerName, lecturerKbk, lecturerFoto) {
    $("#lecturer-id").val(lecturerId);
    $("#nama").val(lecturerName);
    $("#kbk").val(lecturerKbk);
    $("#modalType").val("update");
    $("#prevFoto").val(lecturerFoto);

    $("#image-display").attr("src", lecturerFoto);
    $("#dataForm").attr("action", "{{ url_for('lecturer.update') }}");
  }
</script>
{% endblock script %}