butler_ddochi/butler/templates/butler/ip_mgmt.html

{% extends "components/base.html" %}

{% block title %}IP Management{% endblock %}

{% block main_area %}
<h2 class="fw-bold pt-3 pb-2">IP 관리 대장</h2>
{% if not request.user.is_authenticated %}
<p class="text-danger">비로그인 익명사용자로 접근 중입니다.
  <br>로그인시 로그인 사용자가 등록한 데이터만 조회됩니다.
</p>
{% endif %}
<!-- 검색 폼 -->
<div class="row">
  <div class="col-4">
  </div>
  <div class="col-4">
  </div>
  <div class="col-4">
    <form method="get" class="mb-3">
      <div class="input-group">
        <input type="text" name="var_search" class="form-control" placeholder="Search by Author or Network Name..."
          value="{{ var_search }}">
        <button type="submit" class="btn btn-outline-primary">Search</button>
      </div>
    </form>
  </div>
</div>
<!-- IP 레코드 목록 -->
<form id="recordForm" method="post" action="">
  {% csrf_token %}
  <table class="table table-striped table-hover table-bordered">
    <thead class="table-dark">
      <tr>
        <th scope="col">Select</th>
        <th scope="col">Network Name</th>
        <th scope="col">IP Address</th>
        <th scope="col">Server Name</th>
        <th scope="col">Description</th>
        <th scope="col">Remark</th>
        <th scope="col">Author</th>
        <th scope="col">Updated At</th>
      </tr>
    </thead>
    <tbody>
      {% for record in records %}
      <tr data-record-id="{{ record.id }}">
        <td class="text-center">
          <input type="checkbox" name="selected_records" value="{{ record.id }}"
            class="form-check-input record-checkbox">
        </td>
        <td>{{ record.network_nm }}</td>
        <td>{{ record.ip_addrs }}</td>
        <td>{{ record.svr_nm }}</td>
        <td>{{ record.desc }}</td>
        <td>{{ record.remark }}</td>
        <td>{{ record.author }}</td>
        <td>{{ record.updated_at|date:"Y-m-d H:i" }}</td>
      </tr>

      <!-- 수정 모달 -->
      <div class="modal fade" id="editDataModal-{{ record.id }}" tabindex="-1"
        aria-labelledby="editDataModalLabel-{{ record.id }}" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header bg-warning text-dark">
              <h5 class="modal-title" id="editDataModalLabel-{{ record.id }}">Edit IP Record</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <!-- 데이터 수정 폼 -->
              <form id="editDataForm-{{ record.id }}" method="post" action="{% url 'butler:ip_mgmt_edit' record.id %}">
                {% csrf_token %}
                <div class="mb-3">
                  <label for="networkNm-{{ record.id }}" class="form-label">Network Name</label>
                  <input type="text" class="form-control" id="networkNm-{{ record.id }}" name="network_nm"
                    value="{{ record.network_nm }}" required="required">
                </div>
                <div class="mb-3">
                  <label for="ipAddrs-{{ record.id }}" class="form-label">IP Address</label>
                  <input type="text" class="form-control" id="ipAddrs-{{ record.id }}" name="ip_addrs"
                    value="{{ record.ip_addrs }}" required="required">
                </div>
                <div class="mb-3">
                  <label for="svrNm-{{ record.id }}" class="form-label">Server Name</label>
                  <input type="text" class="form-control" id="svrNm-{{ record.id }}" name="svr_nm"
                    value="{{ record.svr_nm }}" required="required">
                </div>
                <div class="mb-3">
                  <label for="desc-{{ record.id }}" class="form-label">Description</label>
                  <textarea class="form-control" id="desc-{{ record.id }}" name="desc">{{ record.desc }}</textarea>
                </div>
                <div class="mb-3">
                  <label for="remark-{{ record.id }}" class="form-label">Remark</label>
                  <textarea class="form-control" id="remark-{{ record.id }}"
                    name="remark">{{ record.remark }}</textarea>
                </div>
                <button type="submit" class="btn btn-primary">Save Changes</button>
              </form>
            </div>
          </div>
        </div>
      </div>
      {% empty %}
      <tr>
        <td colspan="9" class="text-center">No records found.</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% if request.user.is_authenticated %}
  <!-- 버튼 컨테이너 -->
  <div class="d-flex justify-content-between align-items-center mb-3">
    <!-- 데이터 등록 버튼 -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addDataModal">
      <i class="bi bi-plus-lg"></i>
      Add New IP Record
    </button>

    <!-- 전체 삭제 버튼 -->
    <button type="submit" formaction="{% url 'butler:ip_mgmt_delete' %}" class="btn btn-danger">
      <i class="bi bi-trash"></i>
      Delete Selected
    </button>

    <!-- 수정 버튼 -->
    <button type="button" id="editSelectedButton" class="btn btn-warning" disabled="disabled">
      <i class="bi bi-pencil-square"></i>
      Edit Selected
    </button>
  </div>
  {% endif %}
</form>

<!-- 데이터 등록 모달 -->
<div class="modal fade" id="addDataModal" tabindex="-1" aria-labelledby="addDataModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-success text-white">
        <h5 class="modal-title" id="addDataModalLabel">Add New IP Record</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- 데이터 등록 폼 -->
        <form id="addDataForm" method="post" action="{% url 'butler:ip_mgmt_add' %}">
          {% csrf_token %}
          <div class="mb-3">
            <label for="networkNm" class="form-label">Network Name</label>
            <input type="text" class="form-control" id="networkNm" name="network_nm" required="required">
          </div>
          <div class="mb-3">
            <label for="ipAddrs" class="form-label">IP Address</label>
            <input type="text" class="form-control" id="ipAddrs" name="ip_addrs" required="required">
          </div>
          <div class="mb-3">
            <label for="svrNm" class="form-label">Server Name</label>
            <input type="text" class="form-control" id="svrNm" name="svr_nm" required="required">
          </div>
          <div class="mb-3">
            <label for="desc" class="form-label">Description</label>
            <textarea class="form-control" id="desc" name="desc"></textarea>
          </div>
          <div class="mb-3">
            <label for="remark" class="form-label">Remark</label>
            <textarea class="form-control" id="remark" name="remark"></textarea>
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const editButton = document.getElementById('editSelectedButton');
    const checkboxes = document.querySelectorAll('.record-checkbox');

    // Event listener to enable/disable the edit button
    document.addEventListener('change', function () {
      const selected = [...checkboxes].filter(checkbox => checkbox.checked);
      if (selected.length === 1) {
        editButton.disabled = false;
        editButton.dataset.recordId = selected[0].value;
      } else {
        editButton.disabled = true;
        delete editButton.dataset.recordId;
      }
    });

    // Event listener to open the edit modal
    editButton.addEventListener('click', function () {
      const recordId = editButton.dataset.recordId;
      if (recordId) {
        const modal = new bootstrap.Modal(document.getElementById(`editDataModal-${recordId}`));
        modal.show();
      }
    });
  });
</script>
{% endblock %}