feat: ✨ vlan management
This commit is contained in:
+17
-1
@@ -107,6 +107,7 @@
|
||||
<th class="text-center p-3">Name</th>
|
||||
<th class="text-center p-3">CIDR</th>
|
||||
<th class="text-center p-3">Site</th>
|
||||
<th class="text-center p-3">VLAN ID</th>
|
||||
<th class="text-center p-3">Utilisation</th>
|
||||
<th class="text-center p-3">Actions</th>
|
||||
</tr>
|
||||
@@ -119,6 +120,13 @@
|
||||
<td class="p-3 text-center">
|
||||
<span class="px-2 py-1 bg-gray-300 dark:bg-zinc-700 rounded text-sm">{{ subnet.site }}</span>
|
||||
</td>
|
||||
<td class="p-3 text-center">
|
||||
{% if subnet.vlan_id %}
|
||||
<span class="px-2 py-1 bg-gray-300 dark:bg-zinc-700 rounded text-sm font-mono">{{ subnet.vlan_id }}</span>
|
||||
{% else %}
|
||||
<span class="text-sm text-gray-500">—</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="p-3 text-center">
|
||||
{% if subnet.utilization %}
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">{{ subnet.utilization.percent }}%</span>
|
||||
@@ -133,7 +141,7 @@
|
||||
<i class="fas fa-eye"></i>
|
||||
</a>
|
||||
{% if can_edit_subnet %}
|
||||
<button onclick="editSubnet({{ subnet.id }}, '{{ subnet.name|replace("'", "\\'") }}', '{{ subnet.cidr|replace("'", "\\'") }}', '{{ subnet.site|replace("'", "\\'") }}')" class="text-gray-900 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-300 hover:cursor-pointer" title="Edit Subnet">
|
||||
<button onclick="editSubnet({{ subnet.id }}, '{{ subnet.name|replace("'", "\\'") }}', '{{ subnet.cidr|replace("'", "\\'") }}', '{{ subnet.site|replace("'", "\\'") }}', {{ subnet.vlan_id if subnet.vlan_id else 'null' }}, '{{ subnet.vlan_description|replace("'", "\\'") if subnet.vlan_description else "" }}', '{{ subnet.vlan_notes|replace("'", "\\'")|replace("\n", "\\n") if subnet.vlan_notes else "" }}')" class="text-gray-900 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-300 hover:cursor-pointer" title="Edit Subnet">
|
||||
<i class="fas fa-edit"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
@@ -176,7 +184,11 @@
|
||||
<input type="text" name="name" id="add-subnet-name" placeholder="Subnet Name" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600 w-full" required>
|
||||
<input type="text" name="cidr" id="add-subnet-cidr" placeholder="CIDR (e.g., 192.168.1.0/24)" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600 w-full" required>
|
||||
<input type="text" name="site" id="add-subnet-site" placeholder="Site/Location" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600 w-full" required>
|
||||
<input type="number" name="vlan_id" id="add-subnet-vlan-id" placeholder="VLAN ID (1-4094, optional)" min="1" max="4094" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600 w-full">
|
||||
<input type="text" name="vlan_description" id="add-subnet-vlan-description" placeholder="VLAN Description (optional)" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600 w-full">
|
||||
<textarea name="vlan_notes" id="add-subnet-vlan-notes" placeholder="VLAN Notes (optional)" rows="3" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600 w-full resize-y"></textarea>
|
||||
<span id="cidr-error" class="text-red-500 text-sm hidden"></span>
|
||||
<span id="vlan-id-error" class="text-red-500 text-sm hidden"></span>
|
||||
</div>
|
||||
<div class="flex justify-end space-x-2 mt-6">
|
||||
<button type="button" onclick="closeAddSubnetModal()" class="px-4 py-2 bg-gray-300 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer rounded-lg">Cancel</button>
|
||||
@@ -201,7 +213,11 @@
|
||||
<input type="text" name="name" id="edit-subnet-name" placeholder="Subnet Name" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600 w-full" required>
|
||||
<input type="text" name="cidr" id="edit-subnet-cidr" placeholder="CIDR (e.g., 192.168.1.0/24)" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600 w-full" required>
|
||||
<input type="text" name="site" id="edit-subnet-site" placeholder="Site/Location" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600 w-full" required>
|
||||
<input type="number" name="vlan_id" id="edit-subnet-vlan-id" placeholder="VLAN ID (1-4094, optional)" min="1" max="4094" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600 w-full">
|
||||
<input type="text" name="vlan_description" id="edit-subnet-vlan-description" placeholder="VLAN Description (optional)" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600 w-full">
|
||||
<textarea name="vlan_notes" id="edit-subnet-vlan-notes" placeholder="VLAN Notes (optional)" rows="3" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600 w-full resize-y"></textarea>
|
||||
<span id="edit-cidr-error" class="text-red-500 text-sm hidden"></span>
|
||||
<span id="edit-vlan-id-error" class="text-red-500 text-sm hidden"></span>
|
||||
</div>
|
||||
<div class="flex justify-end space-x-2 mt-6">
|
||||
<button type="button" onclick="closeEditSubnetModal()" class="px-4 py-2 bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer rounded-lg">Cancel</button>
|
||||
|
||||
+190
-135
@@ -19,152 +19,207 @@
|
||||
<i class="fas fa-file-csv fa-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
{% if utilization %}
|
||||
<div class="hidden sm:flex justify-center mb-4">
|
||||
<div class="bg-gray-200 dark:bg-zinc-800 px-4 py-2 rounded-lg text-sm">
|
||||
<span class="font-medium">{{ utilization.percent }}% used</span>
|
||||
<span class="text-gray-600 dark:text-gray-400 mx-2">•</span>
|
||||
<span class="text-gray-600 dark:text-gray-400">{{ utilization.assigned }} assigned</span>
|
||||
<span class="text-gray-600 dark:text-gray-400 mx-2">•</span>
|
||||
<span class="text-gray-600 dark:text-gray-400">{{ utilization.dhcp }} DHCP</span>
|
||||
<span class="text-gray-600 dark:text-gray-400 mx-2">•</span>
|
||||
<span class="text-gray-600 dark:text-gray-400">{{ utilization.available }} available</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="flex justify-center mb-4">
|
||||
<a href="/subnet/{{ subnet.id }}/dhcp" class="hidden sm:flex bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 px-4 py-2 rounded-lg shadow items-center gap-2">
|
||||
<i class="fas fa-network-wired"></i> Define DHCP Pool
|
||||
</a>
|
||||
</div>
|
||||
<button id="toggle-desc" class="sm:hidden bg-gray-300 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer px-4 py-2 rounded-lg mb-4 w-full">Show Descriptions</button>
|
||||
|
||||
<!-- Custom Fields Section -->
|
||||
{% if custom_fields %}
|
||||
<div class="custom-fields-section mb-6 max-w-md mx-auto">
|
||||
{% if can_edit_subnet %}
|
||||
<form action="/subnet/{{ subnet.id }}/update_custom_fields" method="POST" id="custom-fields-form">
|
||||
<div class="space-y-4">
|
||||
<!-- Info Grid: 3 columns on desktop, 1 on mobile -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
||||
<!-- Utilisation Stats Column -->
|
||||
{% if utilization %}
|
||||
<div class="bg-gray-200 dark:bg-zinc-800 p-4 rounded-lg">
|
||||
<h3 class="text-lg font-bold mb-3 flex items-center gap-2">
|
||||
<i class="fas fa-chart-pie"></i>
|
||||
Utilisation
|
||||
</h3>
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-600 dark:text-gray-400">Used:</span>
|
||||
<span class="font-medium">{{ utilization.percent }}%</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-600 dark:text-gray-400">Assigned:</span>
|
||||
<span>{{ utilization.assigned }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-600 dark:text-gray-400">DHCP:</span>
|
||||
<span>{{ utilization.dhcp }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-600 dark:text-gray-400">Available:</span>
|
||||
<span>{{ utilization.available }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between border-t border-gray-600 pt-2 mt-2">
|
||||
<span class="text-gray-600 dark:text-gray-400">Total:</span>
|
||||
<span class="font-medium">{{ utilization.total }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- VLAN Information Column -->
|
||||
{% if subnet.vlan_id or subnet.vlan_description or subnet.vlan_notes %}
|
||||
<div class="bg-gray-200 dark:bg-zinc-800 p-4 rounded-lg">
|
||||
<h3 class="text-lg font-bold mb-3 flex items-center gap-2">
|
||||
<i class="fas fa-network-wired"></i>
|
||||
VLAN
|
||||
</h3>
|
||||
<div class="space-y-2 text-sm">
|
||||
{% if subnet.vlan_id %}
|
||||
<div>
|
||||
<span class="text-gray-600 dark:text-gray-400">ID:</span>
|
||||
<span class="ml-2 px-2 py-1 bg-gray-300 dark:bg-zinc-700 rounded text-sm font-mono">{{ subnet.vlan_id }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if subnet.vlan_description %}
|
||||
<div>
|
||||
<span class="text-gray-600 dark:text-gray-400 block mb-1">Description:</span>
|
||||
<span>{{ subnet.vlan_description }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if subnet.vlan_notes %}
|
||||
<div>
|
||||
<span class="text-gray-600 dark:text-gray-400 block mb-1">Notes:</span>
|
||||
<div class="whitespace-pre-wrap text-xs">{{ subnet.vlan_notes }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Custom Fields Column -->
|
||||
{% if custom_fields %}
|
||||
<div class="bg-gray-200 dark:bg-zinc-800 p-4 rounded-lg">
|
||||
<h3 class="text-lg font-bold mb-3 flex items-center gap-2">
|
||||
<i class="fas fa-list-ul"></i>
|
||||
Custom Fields
|
||||
</h3>
|
||||
{% if can_edit_subnet %}
|
||||
<form action="/subnet/{{ subnet.id }}/update_custom_fields" method="POST" id="custom-fields-form">
|
||||
<div class="space-y-3">
|
||||
{% for field in custom_fields %}
|
||||
<div class="custom-field-item">
|
||||
<label for="custom_field_{{ field.field_key }}" class="block mb-1 text-xs font-medium">
|
||||
{{ field.name }}
|
||||
{% if field.required %}<span class="text-red-500">*</span>{% endif %}
|
||||
</label>
|
||||
{% if field.field_type == 'textarea' %}
|
||||
<textarea name="custom_field_{{ field.field_key }}"
|
||||
id="custom_field_{{ field.field_key }}"
|
||||
class="border p-2 rounded-lg bg-gray-300 dark:bg-zinc-900 border-gray-600 w-full resize-y text-sm"
|
||||
{% if field.required %}required{% endif %}
|
||||
placeholder="{{ field.help_text or '' }}">{{ field.current_value or field.default_value or '' }}</textarea>
|
||||
{% elif field.field_type == 'boolean' %}
|
||||
<div class="flex items-center space-x-2">
|
||||
<input type="checkbox" name="custom_field_{{ field.field_key }}"
|
||||
id="custom_field_{{ field.field_key }}"
|
||||
value="true"
|
||||
{% if field.current_value or (not field.current_value and field.default_value == 'true') %}checked{% endif %}
|
||||
class="w-4 h-4">
|
||||
<label for="custom_field_{{ field.field_key }}" class="text-sm">Yes</label>
|
||||
</div>
|
||||
{% elif field.field_type == 'select' %}
|
||||
{% set options = [] %}
|
||||
{% if field.validation_rules and field.validation_rules.select_options %}
|
||||
{% set options = field.validation_rules.select_options %}
|
||||
{% endif %}
|
||||
<select name="custom_field_{{ field.field_key }}"
|
||||
id="custom_field_{{ field.field_key }}"
|
||||
class="border p-2 rounded-lg bg-gray-300 dark:bg-zinc-900 border-gray-600 w-full text-sm"
|
||||
{% if field.required %}required{% endif %}>
|
||||
{% if not field.required %}
|
||||
<option value="">-- None --</option>
|
||||
{% endif %}
|
||||
{% for option in options %}
|
||||
<option value="{{ option }}" {% if field.current_value == option or (not field.current_value and field.default_value == option) %}selected{% endif %}>{{ option }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% elif field.field_type == 'date' %}
|
||||
<input type="date" name="custom_field_{{ field.field_key }}"
|
||||
id="custom_field_{{ field.field_key }}"
|
||||
class="border p-2 rounded-lg bg-gray-300 dark:bg-zinc-900 border-gray-600 w-full text-sm"
|
||||
value="{{ field.current_value or field.default_value or '' }}"
|
||||
{% if field.required %}required{% endif %}>
|
||||
{% elif field.field_type == 'datetime' %}
|
||||
<input type="datetime-local" name="custom_field_{{ field.field_key }}"
|
||||
id="custom_field_{{ field.field_key }}"
|
||||
class="border p-2 rounded-lg bg-gray-300 dark:bg-zinc-900 border-gray-600 w-full text-sm"
|
||||
value="{{ field.current_value or field.default_value or '' }}"
|
||||
{% if field.required %}required{% endif %}>
|
||||
{% elif field.field_type == 'number' %}
|
||||
<input type="number" name="custom_field_{{ field.field_key }}"
|
||||
id="custom_field_{{ field.field_key }}"
|
||||
class="border p-2 rounded-lg bg-gray-300 dark:bg-zinc-900 border-gray-600 w-full text-sm"
|
||||
value="{{ field.current_value or field.default_value or '' }}"
|
||||
{% if field.required %}required{% endif %}
|
||||
{% if field.validation_rules and field.validation_rules.min_value %}min="{{ field.validation_rules.min_value }}"{% endif %}
|
||||
{% if field.validation_rules and field.validation_rules.max_value %}max="{{ field.validation_rules.max_value }}"{% endif %}>
|
||||
{% elif field.field_type == 'decimal' %}
|
||||
<input type="number" step="any" name="custom_field_{{ field.field_key }}"
|
||||
id="custom_field_{{ field.field_key }}"
|
||||
class="border p-2 rounded-lg bg-gray-300 dark:bg-zinc-900 border-gray-600 w-full text-sm"
|
||||
value="{{ field.current_value or field.default_value or '' }}"
|
||||
{% if field.required %}required{% endif %}
|
||||
{% if field.validation_rules and field.validation_rules.min_value %}min="{{ field.validation_rules.min_value }}"{% endif %}
|
||||
{% if field.validation_rules and field.validation_rules.max_value %}max="{{ field.validation_rules.max_value }}"{% endif %}>
|
||||
{% elif field.field_type == 'ip_address' %}
|
||||
<input type="text" name="custom_field_{{ field.field_key }}"
|
||||
id="custom_field_{{ field.field_key }}"
|
||||
class="border p-2 rounded-lg bg-gray-300 dark:bg-zinc-900 border-gray-600 w-full font-mono text-sm"
|
||||
value="{{ field.current_value or field.default_value or '' }}"
|
||||
placeholder="192.168.1.1"
|
||||
{% if field.required %}required{% endif %}>
|
||||
{% elif field.field_type == 'email' %}
|
||||
<input type="email" name="custom_field_{{ field.field_key }}"
|
||||
id="custom_field_{{ field.field_key }}"
|
||||
class="border p-2 rounded-lg bg-gray-300 dark:bg-zinc-900 border-gray-600 w-full text-sm"
|
||||
value="{{ field.current_value or field.default_value or '' }}"
|
||||
placeholder="user@example.com"
|
||||
{% if field.required %}required{% endif %}>
|
||||
{% elif field.field_type == 'url' %}
|
||||
<input type="url" name="custom_field_{{ field.field_key }}"
|
||||
id="custom_field_{{ field.field_key }}"
|
||||
class="border p-2 rounded-lg bg-gray-300 dark:bg-zinc-900 border-gray-600 w-full text-sm"
|
||||
value="{{ field.current_value or field.default_value or '' }}"
|
||||
placeholder="https://example.com"
|
||||
{% if field.required %}required{% endif %}>
|
||||
{% else %}
|
||||
<input type="text" name="custom_field_{{ field.field_key }}"
|
||||
id="custom_field_{{ field.field_key }}"
|
||||
class="border p-2 rounded-lg bg-gray-300 dark:bg-zinc-900 border-gray-600 w-full text-sm"
|
||||
value="{{ field.current_value or field.default_value or '' }}"
|
||||
placeholder="{{ field.help_text or '' }}"
|
||||
{% if field.required %}required{% endif %}
|
||||
{% if field.validation_rules and field.validation_rules.min_length %}minlength="{{ field.validation_rules.min_length }}"{% endif %}
|
||||
{% if field.validation_rules and field.validation_rules.max_length %}maxlength="{{ field.validation_rules.max_length }}"{% endif %}>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</form>
|
||||
{% else %}
|
||||
<div class="space-y-3">
|
||||
{% for field in custom_fields %}
|
||||
<div class="custom-field-item">
|
||||
<label for="custom_field_{{ field.field_key }}" class="block mb-1 text-sm font-medium">
|
||||
{{ field.name }}
|
||||
{% if field.required %}<span class="text-red-500">*</span>{% endif %}
|
||||
{% if field.help_text %}
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400 ml-2" title="{{ field.help_text }}">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</span>
|
||||
{% endif %}
|
||||
</label>
|
||||
{% if field.field_type == 'textarea' %}
|
||||
<textarea name="custom_field_{{ field.field_key }}"
|
||||
id="custom_field_{{ field.field_key }}"
|
||||
class="border p-2 rounded-lg bg-gray-200 dark:bg-zinc-800 border-gray-600 w-full resize-y"
|
||||
{% if field.required %}required{% endif %}
|
||||
placeholder="{{ field.help_text or '' }}">{{ field.current_value or field.default_value or '' }}</textarea>
|
||||
{% elif field.field_type == 'boolean' %}
|
||||
<div class="flex items-center space-x-2">
|
||||
<input type="checkbox" name="custom_field_{{ field.field_key }}"
|
||||
id="custom_field_{{ field.field_key }}"
|
||||
value="true"
|
||||
{% if field.current_value or (not field.current_value and field.default_value == 'true') %}checked{% endif %}
|
||||
class="w-4 h-4">
|
||||
<label for="custom_field_{{ field.field_key }}" class="text-sm">Yes</label>
|
||||
<label class="block mb-1 text-xs font-medium">{{ field.name }}</label>
|
||||
<div class="border p-2 rounded-lg bg-gray-300 dark:bg-zinc-900 border-gray-600 w-full text-sm">
|
||||
{{ field.current_value or field.default_value or '-' }}
|
||||
</div>
|
||||
{% elif field.field_type == 'select' %}
|
||||
{% set options = [] %}
|
||||
{% if field.validation_rules and field.validation_rules.select_options %}
|
||||
{% set options = field.validation_rules.select_options %}
|
||||
{% endif %}
|
||||
<select name="custom_field_{{ field.field_key }}"
|
||||
id="custom_field_{{ field.field_key }}"
|
||||
class="border p-2 rounded-lg bg-gray-200 dark:bg-zinc-800 border-gray-600 w-full"
|
||||
{% if field.required %}required{% endif %}>
|
||||
{% if not field.required %}
|
||||
<option value="">-- None --</option>
|
||||
{% endif %}
|
||||
{% for option in options %}
|
||||
<option value="{{ option }}" {% if field.current_value == option or (not field.current_value and field.default_value == option) %}selected{% endif %}>{{ option }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% elif field.field_type == 'date' %}
|
||||
<input type="date" name="custom_field_{{ field.field_key }}"
|
||||
id="custom_field_{{ field.field_key }}"
|
||||
class="border p-2 rounded-lg bg-gray-200 dark:bg-zinc-800 border-gray-600 w-full"
|
||||
value="{{ field.current_value or field.default_value or '' }}"
|
||||
{% if field.required %}required{% endif %}>
|
||||
{% elif field.field_type == 'datetime' %}
|
||||
<input type="datetime-local" name="custom_field_{{ field.field_key }}"
|
||||
id="custom_field_{{ field.field_key }}"
|
||||
class="border p-2 rounded-lg bg-gray-200 dark:bg-zinc-800 border-gray-600 w-full"
|
||||
value="{{ field.current_value or field.default_value or '' }}"
|
||||
{% if field.required %}required{% endif %}>
|
||||
{% elif field.field_type == 'number' %}
|
||||
<input type="number" name="custom_field_{{ field.field_key }}"
|
||||
id="custom_field_{{ field.field_key }}"
|
||||
class="border p-2 rounded-lg bg-gray-200 dark:bg-zinc-800 border-gray-600 w-full"
|
||||
value="{{ field.current_value or field.default_value or '' }}"
|
||||
{% if field.required %}required{% endif %}
|
||||
{% if field.validation_rules and field.validation_rules.min_value %}min="{{ field.validation_rules.min_value }}"{% endif %}
|
||||
{% if field.validation_rules and field.validation_rules.max_value %}max="{{ field.validation_rules.max_value }}"{% endif %}>
|
||||
{% elif field.field_type == 'decimal' %}
|
||||
<input type="number" step="any" name="custom_field_{{ field.field_key }}"
|
||||
id="custom_field_{{ field.field_key }}"
|
||||
class="border p-2 rounded-lg bg-gray-200 dark:bg-zinc-800 border-gray-600 w-full"
|
||||
value="{{ field.current_value or field.default_value or '' }}"
|
||||
{% if field.required %}required{% endif %}
|
||||
{% if field.validation_rules and field.validation_rules.min_value %}min="{{ field.validation_rules.min_value }}"{% endif %}
|
||||
{% if field.validation_rules and field.validation_rules.max_value %}max="{{ field.validation_rules.max_value }}"{% endif %}>
|
||||
{% elif field.field_type == 'ip_address' %}
|
||||
<input type="text" name="custom_field_{{ field.field_key }}"
|
||||
id="custom_field_{{ field.field_key }}"
|
||||
class="border p-2 rounded-lg bg-gray-200 dark:bg-zinc-800 border-gray-600 w-full font-mono"
|
||||
value="{{ field.current_value or field.default_value or '' }}"
|
||||
placeholder="192.168.1.1"
|
||||
{% if field.required %}required{% endif %}>
|
||||
{% elif field.field_type == 'email' %}
|
||||
<input type="email" name="custom_field_{{ field.field_key }}"
|
||||
id="custom_field_{{ field.field_key }}"
|
||||
class="border p-2 rounded-lg bg-gray-200 dark:bg-zinc-800 border-gray-600 w-full"
|
||||
value="{{ field.current_value or field.default_value or '' }}"
|
||||
placeholder="user@example.com"
|
||||
{% if field.required %}required{% endif %}>
|
||||
{% elif field.field_type == 'url' %}
|
||||
<input type="url" name="custom_field_{{ field.field_key }}"
|
||||
id="custom_field_{{ field.field_key }}"
|
||||
class="border p-2 rounded-lg bg-gray-200 dark:bg-zinc-800 border-gray-600 w-full"
|
||||
value="{{ field.current_value or field.default_value or '' }}"
|
||||
placeholder="https://example.com"
|
||||
{% if field.required %}required{% endif %}>
|
||||
{% else %}
|
||||
<input type="text" name="custom_field_{{ field.field_key }}"
|
||||
id="custom_field_{{ field.field_key }}"
|
||||
class="border p-2 rounded-lg bg-gray-200 dark:bg-zinc-800 border-gray-600 w-full"
|
||||
value="{{ field.current_value or field.default_value or '' }}"
|
||||
placeholder="{{ field.help_text or '' }}"
|
||||
{% if field.required %}required{% endif %}
|
||||
{% if field.validation_rules and field.validation_rules.min_length %}minlength="{{ field.validation_rules.min_length }}"{% endif %}
|
||||
{% if field.validation_rules and field.validation_rules.max_length %}maxlength="{{ field.validation_rules.max_length }}"{% endif %}>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</form>
|
||||
{% else %}
|
||||
<div class="space-y-4">
|
||||
{% for field in custom_fields %}
|
||||
<div class="custom-field-item">
|
||||
<label class="block mb-1 text-sm font-medium">{{ field.name }}</label>
|
||||
<div class="border p-2 rounded-lg bg-gray-200 dark:bg-zinc-800 border-gray-600 w-full">
|
||||
{{ field.current_value or field.default_value or '-' }}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Actions Row -->
|
||||
<div class="flex justify-center mb-4 gap-2">
|
||||
<a href="/subnet/{{ subnet.id }}/dhcp" class="bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 px-4 py-2 rounded-lg shadow items-center gap-2 flex">
|
||||
<i class="fas fa-network-wired"></i> <span class="hidden sm:inline">Define </span>DHCP Pool
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<button id="toggle-desc" class="sm:hidden bg-gray-300 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer px-4 py-2 rounded-lg mb-4 w-full">Show Descriptions</button>
|
||||
|
||||
<!-- IP Address Table -->
|
||||
<form action="" method="POST">
|
||||
<table class="table-auto w-full mb-6">
|
||||
<thead>
|
||||
|
||||
Reference in New Issue
Block a user