Files

97 lines
5.0 KiB
Plaintext

<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= device ? 'Bewerk' : 'Nieuw' %> Netwerk Device — Mek-Tech</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/dynamic.css">
<link rel="icon" href="/img/favicon.svg" type="image/svg+xml">
</head>
<body>
<nav class="navbar"><div class="nav-inner"><a href="/" class="nav-brand"><img src="/img/logo.svg" class="nav-logo" alt="Mek-Tech"></a><div style="display:flex;align-items:center;gap:.4rem"><a href="/" class="nav-icon-btn" title="Dashboard"><i data-lucide="layout-dashboard" style="width:15px;height:15px"></i> Dashboard</a><button class="theme-toggle" id="themeToggle" onclick="toggleTheme()"></button><a href="/auth/logout" class="nav-icon-btn" style="color:var(--red)"><i data-lucide="log-out" style="width:15px;height:15px"></i> Uitloggen</a></div></div></nav>
<div class="container">
<a href="javascript:history.back()" class="back-link"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg> Terug</a>
<div class="page-header">
<div>
<a href="/networking" class="back-link">← Terug</a>
<h1><%= device ? 'Bewerk: ' + device.name : 'Nieuw Netwerk Device' %></h1>
</div>
</div>
<form action="/networking/devices/<%= device ? device.id + '/edit' : 'new' %>" method="POST" class="form-card">
<% if (!device) { %>
<div class="field">
<label for="client_id">Cliënt *</label>
<select name="client_id" required>
<option value="">Selecteer...</option>
<% clients.forEach(function(c) { %>
<option value="<%= c.id %>"><%= c.name %></option>
<% }) %>
</select>
</div>
<% } %>
<div class="form-grid">
<div class="field">
<label>Naam *</label>
<input type="text" name="name" value="<%= device ? device.name : '' %>" required>
</div>
<div class="field">
<label>Type</label>
<select name="device_type">
<option value="switch" <%= device && device.device_type === 'switch' ? 'selected' : '' %>>Switch</option>
<option value="router" <%= device && device.device_type === 'router' ? 'selected' : '' %>>Router</option>
<option value="firewall" <%= device && device.device_type === 'firewall' ? 'selected' : '' %>>Firewall</option>
<option value="loadbalancer" <%= device && device.device_type === 'loadbalancer' ? 'selected' : '' %>>Load Balancer</option>
<option value="ap" <%= device && device.device_type === 'ap' ? 'selected' : '' %>>Access Point</option>
<option value="other" <%= device && device.device_type === 'other' ? 'selected' : '' %>>Other</option>
</select>
</div>
<div class="field">
<label>Model</label>
<input type="text" name="model" value="<%= device ? device.model : '' %>" placeholder="Bv. Cisco 9300">
</div>
<div class="field">
<label>Manufacturer</label>
<input type="text" name="manufacturer" value="<%= device ? device.manufacturer : '' %>" placeholder="Cisco, Juniper, etc.">
</div>
<div class="field">
<label>IP Adres</label>
<input type="text" name="ip_address" value="<%= device ? device.ip_address : '' %>">
</div>
<div class="field">
<label>Mgmt IP</label>
<input type="text" name="mgmt_ip" value="<%= device ? device.mgmt_ip : '' %>">
</div>
<div class="field">
<label>Aantal Poorten</label>
<input type="number" name="ports_count" value="<%= device ? device.ports_count : 24 %>" min="1" max="256">
</div>
<div class="field">
<label>OS Versie</label>
<input type="text" name="os_version" value="<%= device ? device.os_version : '' %>">
</div>
<div class="field">
<label>Status</label>
<select name="status">
<option value="active" <%= device && device.status === 'active' ? 'selected' : '' %>>Active</option>
<option value="standby" <%= device && device.status === 'standby' ? 'selected' : '' %>>Standby</option>
<option value="decommissioned" <%= device && device.status === 'decommissioned' ? 'selected' : '' %>>Decommissioned</option>
</select>
</div>
</div>
<div class="field">
<label>Notities</label>
<textarea name="notes" rows="3"><%= device ? device.notes : '' %></textarea>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-accent"><%= device ? 'Opslaan' : 'Aanmaken' %></button>
<a href="/networking" class="btn btn-secondary">Annuleren</a>
</div>
</form>
</div>
<script src="/js/theme.js"></script></body>
</html>