init

nhnc_mgmt/templates/nhnc_mgmt/network_igw.html

@@ -0,0 +1,116 @@
+{% extends "components/base.html" %}
+
+{% block igw_name %}IP Management{% endblock %}
+
+{% block main_area %}
+<h2 class="fw-bold pt-3 pb-2">Igw 관리 대장</h2>
+{% if not request.user.is_authenticated %}
+<p class="text-danger">비로그인 익명사용자로 접근 중입니다.
+  {% endif %}
+<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">Igw Name</th>
+        <th scope="col">Igw ID</th>
+        <th scope="col">routing_table</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.igw_name }}</td>
+          <td>{{ record.igw_id }}</td>
+          <td>{{ record.routing_table }}</td>
+        </tr>
+
+        {% 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 Igw Record
+    </button>
+
+    <!-- 전체 삭제 버튼 -->
+    <button type="submit" formaction="{% url 'nhnc_mgmt:igw_delete' %}" class="btn btn-danger">
+      <i class="bi bi-trash"></i>
+      Delete 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-igw_name" 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 'nhnc_mgmt:igw_add' %}">
+          {% csrf_token %}
+          <div class="mb-3">
+            <label for="igw_name" class="form-label">Igw Name</label>
+            <input type="text" class="form-control" id="igw_name" name="igw_name" required="required">
+          </div>
+          <div class="mb-3">
+            <label for="routing_table" class="form-label">routing_table</label>
+            <input type="text" class="form-control" id="routing_table" name="routing_table" required="required">
+          </div>
+          <div class="mb-3">
+            <label for="igw_id" class="form-label">igw_id</label>
+            <input type="text" class="form-control" id="igw_id" name="igw_id" required="required">
+          </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 %}