131 lines
9.5 KiB
HTML
131 lines
9.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{ device.name }} - Device Details</title>
|
|
<link rel="icon" type="image/png" href="{{ LOGO_PNG }}">
|
|
<link href="/static/css/output.css" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
|
|
</head>
|
|
<body class="bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 min-h-screen flex flex-col">
|
|
{% include 'header.html' %}
|
|
<div class="flex-1 flex items-center justify-center mx-4">
|
|
<div class="container py-8 max-w-2xl pt-20">
|
|
<div class="flex items-center mb-8 relative justify-between gap-4">
|
|
<a href="/devices" class="hidden sm:flex bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 flex items-center justify-center rounded-full w-11 h-11 shrink-0"><i class="fas fa-arrow-left"></i></a>
|
|
<h1 class="text-3xl font-bold text-center flex-1 min-w-0 truncate">{{ device.name }}</h1>
|
|
<form action="/update_device_type" method="POST" class="hidden md:inline ml-2">
|
|
<input type="hidden" name="device_id" value="{{ device.id }}">
|
|
<select name="device_type_id" class="border p-2 rounded bg-gray-200 dark:bg-zinc-800 border-gray-600" onchange="this.form.submit()">
|
|
{% for dtype in device_types %}
|
|
<option value="{{ dtype[0] }}" {% if device.device_type_id == dtype[0] %}selected{% endif %}>{{ dtype[1] }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</form>
|
|
<div class="flex items-center shrink-0">
|
|
<form action="/rename_device" method="POST" class="inline">
|
|
<input type="hidden" name="device_id" value="{{ device.id }}">
|
|
<input type="text" name="new_name" value="{{ device.name }}" class="hidden border p-1 rounded bg-gray-200 dark:bg-zinc-800 border-gray-600 w-32 mr-2" style="vertical-align: middle;" required>
|
|
<button type="button" class="text-blue-400 hover:text-blue-600 hover:cursor-pointer ml-2 rename-btn" title="Rename Device"><i class="fas fa-pencil-alt"></i></button>
|
|
<button type="submit" class="text-green-400 hover:text-green-600 hover:cursor-pointer ml-2 save-btn hidden" title="Save Name"><i class="fas fa-check"></i></button>
|
|
<button type="button" class="text-gray-400 hover:text-gray-600 hover:cursor-pointer ml-2 cancel-btn hidden" title="Cancel"><i class="fas fa-times"></i></button>
|
|
</form>
|
|
<form action="/delete_device" method="POST" onsubmit="return confirm('Are you sure you want to delete this device?');">
|
|
<input type="hidden" name="device_id" value="{{ device.id }}">
|
|
<button type="submit" class="ml-4 text-red-500 hover:text-red-700 hover:cursor-pointer" title="Delete Device">
|
|
<i class="fas fa-trash fa-lg"></i>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<form action="/device/{{ device.id }}/add_ip" method="POST" class="mb-6">
|
|
<div class="flex flex-col space-y-4">
|
|
<select name="site" id="site-select" class="border p-3 rounded-lg bg-gray-200 dark:bg-zinc-800 border-gray-600 w-full" required>
|
|
<option value="" disabled selected>Select Site...</option>
|
|
{% set sites = subnets | map(attribute='site') | unique | list %}
|
|
{% for site in sites %}
|
|
<option value="{{ site }}">{{ site }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<select name="subnet_id" id="subnet-select" class="border p-3 rounded-lg bg-gray-200 dark:bg-zinc-800 border-gray-600 w-full" required>
|
|
<option value="" disabled selected>Select Subnet...</option>
|
|
{% for subnet in subnets %}
|
|
<option value="{{ subnet.id }}" data-site="{{ subnet.site }}">{{ subnet.name }} ({{ subnet.cidr }})</option>
|
|
{% endfor %}
|
|
</select>
|
|
<select name="ip_id" id="ip-select" class="border p-3 rounded-lg bg-gray-200 dark:bg-zinc-800 border-gray-600 w-full" required>
|
|
<option value="" disabled selected>Select IP...</option>
|
|
</select>
|
|
<button type="submit" class="bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer px-4 py-2 rounded-lg w-full">Add IP</button>
|
|
</div>
|
|
</form>
|
|
<div class="allocated-ips mb-6">
|
|
<h3 class="text-lg font-bold mb-2">Allocated IPs:</h3>
|
|
<ul class="space-y-2">
|
|
{% for ip in device_ips %}
|
|
<li class="flex justify-between items-center bg-gray-200 dark:bg-zinc-700 p-2 rounded-lg">
|
|
<span class="allocated-ip">{{ ip.ip }}</span>
|
|
<form action="/device/{{ device.id }}/delete_ip" method="POST" class="inline">
|
|
<input type="hidden" name="device_ip_id" value="{{ ip.device_ip_id }}">
|
|
<button type="submit" class="text-red-500 hover:text-red-600 hover:cursor-pointer py-1 mr-2 text-lg"><i class="fas fa-trash"></i></button>
|
|
</form>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Tags Section -->
|
|
<div class="tags-section mb-6">
|
|
<h3 class="text-lg font-bold mb-2">Tags:</h3>
|
|
<div class="flex flex-wrap gap-2 mb-4">
|
|
{% if device_tags %}
|
|
{% for tag in device_tags %}
|
|
<div class="flex items-center space-x-1 px-3 py-1 rounded-full text-sm" style="background-color: {{ tag.color }}20; border: 1px solid {{ tag.color }}">
|
|
<div class="w-2 h-2 rounded-full" style="background-color: {{ tag.color }}"></div>
|
|
<span>{{ tag.name }}</span>
|
|
{% if can_remove_device_tag %}
|
|
<form action="/device/{{ device.id }}/remove_tag" method="POST" class="inline">
|
|
<input type="hidden" name="tag_id" value="{{ tag.id }}">
|
|
<button type="submit" class="ml-1 text-red-500 hover:text-red-700 text-xs" title="Remove tag">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<span class="text-gray-500">No tags assigned</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if can_assign_device_tag and all_tags %}
|
|
<form action="/device/{{ device.id }}/assign_tag" method="POST" class="flex gap-2">
|
|
<select name="tag_id" class="border p-2 rounded-lg bg-gray-200 dark:bg-zinc-800 border-gray-600 flex-1" required>
|
|
<option value="" disabled selected>Select a tag to assign...</option>
|
|
{% for tag in all_tags %}
|
|
{% set already_assigned = device_tags|selectattr('id', 'equalto', tag.id)|list|length > 0 %}
|
|
{% if not already_assigned %}
|
|
<option value="{{ tag.id }}">{{ tag.name }}</option>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</select>
|
|
<button type="submit" class="bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer px-4 py-2 rounded-lg">
|
|
<i class="fas fa-plus mr-1"></i>Assign Tag
|
|
</button>
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<form action="/update_device_description" method="POST" class="mb-6 mt-4">
|
|
<input type="hidden" name="device_id" value="{{ device.id }}">
|
|
<label for="description" class="block mb-2 text-lg font-bold">Description</label>
|
|
<textarea id="description" name="description" rows="3" class="border p-2 rounded-lg bg-gray-200 dark:bg-zinc-800 border-gray-600 w-full resize-y" placeholder="Enter device description...">{{ device.description or '' }}</textarea>
|
|
<button type="submit" class="bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer px-4 py-2 rounded-lg w-full mt-2">Save Description</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<script src="/static/js/device.js"></script>
|
|
</body>
|
|
</html>
|