templates/dashboard/file.html

{% extends 'dashboard/base.html' %} {% block title %}Berkas{% 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">Berkas</h1>
  </div>
  <div class="col-auto">
    <div class="page-utilities">
      <select id="pick_type" class="form-select form-select-sm w-auto">
        <option selected value="F1">F1</option>
        <option value="F2">F2</option>
        <option value="F3">F3</option>
        <option value="F4">F4</option>
        <option value="F5">F5</option>
        <option value="F6">F6</option>
        <option value="F7">F7</option>
        <option value="F8">F8</option>
        <option value="F9">F9</option>
        <option value="F10">F10</option>
        <option value="F11">F11</option>
        <option value="F12">F12</option>
        <option value="F13">F13</option>
        <option value="F14">F14</option>
      </select>
    </div>
  </div>
</div>

<div class="row g-4 settings-section">
  <div class="col-12">
    <div class="app-card app-card-settings shadow-sm p-4">
      <div class="app-card-body">
        <h3 class="section-title mb-4" id="type"></h3>
        <form method="post" action="{{ url_for('file.ekspor') }}">
          <input type="hidden" name="created_at" id="created_at" />
          <input type="hidden" name="year" id="year" />
          <input type="hidden" name="prev_year" id="prev_year" />
          <input type="hidden" name="file_type" id="file_type" />
          <input
            type="hidden"
            name="tempat_tanggal_lahir"
            id="tempat_tanggal_lahir"
          />

          <div class="mb-4">
            <label for="nama" class="form-label">Nama</label>
            <input
              id="nama"
              name="nama"
              type="text"
              class="form-control"
              placeholder="Masukkan nama"
              required
            />
          </div>

          <div class="mb-4">
            <label for="nim" class="form-label">NIM</label>
            <input
              id="nim"
              name="nim"
              type="text"
              class="form-control"
              placeholder="Masukkan NIM"
              required
            />
          </div>

          <div
            class="mb-4"
            data-type="F1 F3 F4 F5 F6 F7 F8 F10 F11 F12 F13 F14"
          >
            <label for="prodi" class="form-label">Program Studi</label>
            <select id="prodi" name="prodi" class="form-control" required>
              <option value="TI" selected>TI</option>
              <option value="TMJ">TMJ</option>
              <option value="TMD">TMD</option>
            </select>
          </div>

          <div
            class="mb-4"
            data-type="F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12 F14"
          >
            <label for="judul" class="form-label">Judul Skripsi</label>
            <input
              id="judul"
              name="judul"
              type="text"
              class="form-control"
              placeholder="Masukkan judul skripsi"
              required
            />
          </div>

          <div class="mb-4" data-type="F13">
            <label for="tempat_lahir" class="form-label">Tempat Lahir</label>
            <input
              id="tempat_lahir"
              name="tempat_lahir"
              type="text"
              class="form-control"
              placeholder="Masukkan tempat lahir"
              required
            />
          </div>

          <div class="mb-4" data-type="F13">
            <label for="tanggal_lahir" class="form-label">Tanggal Lahir</label>
            <input
              id="tanggal_lahir"
              name="tanggal_lahir"
              type="date"
              class="form-control"
              required
            />
          </div>

          <div class="mb-4" data-type="F1 F3 F4 F5 F6 F8">
            <label for="dosen" class="form-label">Nama Pembimbing</label>
            <input
              id="dosen"
              name="dosen"
              type="text"
              class="form-control"
              placeholder="Masukkan nama pembimbing"
              required
            />
          </div>

          <div class="mb-5" data-type="F1 F4 F6">
            <label for="nip" class="form-label">NIP Pembimbing</label>
            <input
              id="nip"
              name="nip"
              type="text"
              class="form-control"
              placeholder="Masukkan NIP pembimbing"
              required
            />
          </div>

          <div class="row justify-content-between">
            <div class="col-auto">
              <button
                class="btn app-btn-secondary"
                type="button"
                id="bersihkanBtn"
              >
                Reset
              </button>
            </div>
            <div class="col-auto">
              <button class="btn app-btn-primary" type="submit">Ekspor</button>
            </div>
          </div>
        </form>
      </div>
      <!--//app-card-body-->
    </div>
    <!--//app-card-->
  </div>
</div>
{% endblock content %} {% block script %}
<script>
  function updateType() {
    var selectedType = $("#pick_type").val();
    $("#type").text(selectedType);

    $("[data-type]").each(function () {
      var types = $(this).data("type").split(" ");
      if (types.includes(selectedType)) {
        $(this).show();
        $(this).find("input, select").attr("required", true);
      } else {
        $(this).hide();
        $(this).find("input, select").removeAttr("required");
      }
    });
  }

  updateType();

  $("#pick_type").change(function () {
    updateType();
  });

  function formatDate(date) {
    const day = date.getDate();
    const monthNames = [
      "Januari",
      "Februari",
      "Maret",
      "April",
      "Mei",
      "Juni",
      "Juli",
      "Agustus",
      "September",
      "Oktober",
      "November",
      "Desember",
    ];
    const month = monthNames[date.getMonth()];
    const year = date.getFullYear();

    return `${day} ${month} ${year}`;
  }

  function setHiddenValues() {
    const currentDate = new Date();
    const formattedDate = formatDate(currentDate);
    const currentYear = currentDate.getFullYear();
    const previousYear = currentYear - 1;

    $("#created_at").val(formattedDate);
    $("#year").val(currentYear);
    $("#prev_year").val(previousYear);
    $("#file_type").val($("#pick_type").val());

    const tempatLahir = $("#tempat_lahir").val();
    const tanggalLahir = new Date($("#tanggal_lahir").val());
    if (tempatLahir && !isNaN(tanggalLahir)) {
      const formattedTanggalLahir = formatDate(tanggalLahir);
      $("#tempat_tanggal_lahir").val(
        `${tempatLahir}, ${formattedTanggalLahir}`
      );
    }
  }

  $("form").submit(function (event) {
    setHiddenValues();
  });

  $("#bersihkanBtn").click(function () {
    $("input[type='text']").val("");
    $("select").prop("selectedIndex", 0);
    $("#tanggal_lahir").val("");
    $("#type").text("F1");
    updateType();
  });
</script>
{% endblock script %}