Initial commit — Mek-Tech AI Consultancy Framework v2.0
This commit is contained in:
@@ -0,0 +1,151 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="nl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title><%= connection ? 'Bewerk' : 'Nieuwe' %> Connectie — 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">← Netwerk</a>
|
||||
<h1><%= connection ? 'Bewerk Connectie' : 'Nieuwe Connectie' %></h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form action="/networking/connections/<%= connection ? connection.id + '/edit' : 'new' %>" method="POST" class="form-card">
|
||||
<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 %>" <%= connection && connection.client_id == c.id ? 'selected' : '' %>><%= c.name %></option>
|
||||
<% }) %>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Connectie naam</label>
|
||||
<input type="text" name="name" value="<%= connection ? connection.name : '' %>" placeholder="Bv. Link naar core switch">
|
||||
</div>
|
||||
|
||||
<h4 style="color:#fff;margin:1rem 0 0.5rem">Van</h4>
|
||||
<div class="form-grid">
|
||||
<div class="field">
|
||||
<label>Type</label>
|
||||
<select name="from_type">
|
||||
<option value="network_device" <%= !connection || connection.from_type === 'network_device' ? 'selected' : '' %>>Netwerk Device</option>
|
||||
<option value="rack_device" <%= connection && connection.from_type === 'rack_device' ? 'selected' : '' %>>Rack Device</option>
|
||||
<option value="external" <%= connection && connection.from_type === 'external' ? 'selected' : '' %>>Extern</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Device</label>
|
||||
<select name="from_id">
|
||||
<option value="">—</option>
|
||||
<optgroup label="Netwerk Devices">
|
||||
<% netDevices.forEach(function(d) { %>
|
||||
<option value="<%= d.id %>" <%= connection && connection.from_type === 'network_device' && connection.from_id == d.id ? 'selected' : '' %>><%= d.name %> (<%= d.device_type %>)</option>
|
||||
<% }) %>
|
||||
</optgroup>
|
||||
<optgroup label="Rack Devices">
|
||||
<% rackDevices.forEach(function(d) { %>
|
||||
<option value="<%= d.id %>" <%= connection && connection.from_type === 'rack_device' && connection.from_id == d.id ? 'selected' : '' %>><%= d.name %> — <%= d.rack_name %></option>
|
||||
<% }) %>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Poort / Interface</label>
|
||||
<input type="text" name="from_port" value="<%= connection ? connection.from_port : '' %>" placeholder="Bv. Gi1/0/1">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 style="color:#fff;margin:1rem 0 0.5rem">Naar</h4>
|
||||
<div class="form-grid">
|
||||
<div class="field">
|
||||
<label>Type</label>
|
||||
<select name="to_type">
|
||||
<option value="network_device" <%= !connection || connection.to_type === 'network_device' ? 'selected' : '' %>>Netwerk Device</option>
|
||||
<option value="rack_device" <%= connection && connection.to_type === 'rack_device' ? 'selected' : '' %>>Rack Device</option>
|
||||
<option value="external" <%= connection && connection.to_type === 'external' ? 'selected' : '' %>>Extern</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Device</label>
|
||||
<select name="to_id">
|
||||
<option value="">—</option>
|
||||
<optgroup label="Netwerk Devices">
|
||||
<% netDevices.forEach(function(d) { %>
|
||||
<option value="<%= d.id %>" <%= connection && connection.to_type === 'network_device' && connection.to_id == d.id ? 'selected' : '' %>><%= d.name %> (<%= d.device_type %>)</option>
|
||||
<% }) %>
|
||||
</optgroup>
|
||||
<optgroup label="Rack Devices">
|
||||
<% rackDevices.forEach(function(d) { %>
|
||||
<option value="<%= d.id %>" <%= connection && connection.to_type === 'rack_device' && connection.to_id == d.id ? 'selected' : '' %>><%= d.name %> — <%= d.rack_name %></option>
|
||||
<% }) %>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Poort / Interface</label>
|
||||
<input type="text" name="to_port" value="<%= connection ? connection.to_port : '' %>" placeholder="Bv. Gi1/0/1">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 style="color:#fff;margin:1rem 0 0.5rem">Properties</h4>
|
||||
<div class="form-grid">
|
||||
<div class="field">
|
||||
<label>Media Type</label>
|
||||
<select name="media_type">
|
||||
<option value="copper" <%= connection && connection.media_type === 'copper' ? 'selected' : '' %>>Copper (CAT6/6A)</option>
|
||||
<option value="sfp" <%= connection && connection.media_type === 'sfp' ? 'selected' : '' %>>SFP (1GbE)</option>
|
||||
<option value="sfp+" <%= connection && connection.media_type === 'sfp+' ? 'selected' : '' %>>SFP+ (10GbE)</option>
|
||||
<option value="qsfp" <%= connection && connection.media_type === 'qsfp' ? 'selected' : '' %>>QSFP (40/100GbE)</option>
|
||||
<option value="dac" <%= connection && connection.media_type === 'dac' ? 'selected' : '' %>>DAC Kabel</option>
|
||||
<option value="fiber" <%= connection && connection.media_type === 'fiber' ? 'selected' : '' %>>Fiber (Single/Multi)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Snelheid</label>
|
||||
<select name="speed">
|
||||
<option value="100MbE" <%= connection && connection.speed === '100MbE' ? 'selected' : '' %>>100 MbE</option>
|
||||
<option value="1GbE" <%= !connection || connection.speed === '1GbE' ? 'selected' : '' %>>1 GbE</option>
|
||||
<option value="10GbE" <%= connection && connection.speed === '10GbE' ? 'selected' : '' %>>10 GbE</option>
|
||||
<option value="25GbE" <%= connection && connection.speed === '25GbE' ? 'selected' : '' %>>25 GbE</option>
|
||||
<option value="40GbE" <%= connection && connection.speed === '40GbE' ? 'selected' : '' %>>40 GbE</option>
|
||||
<option value="100GbE" <%= connection && connection.speed === '100GbE' ? 'selected' : '' %>>100 GbE</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>VLAN</label>
|
||||
<input type="text" name="vlan" value="<%= connection ? connection.vlan : '' %>" placeholder="Bv. 100">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Status</label>
|
||||
<select name="status">
|
||||
<option value="active" <%= !connection || connection.status === 'active' ? 'selected' : '' %>>Active</option>
|
||||
<option value="inactive" <%= connection && connection.status === 'inactive' ? 'selected' : '' %>>Inactive</option>
|
||||
<option value="planned" <%= connection && connection.status === 'planned' ? 'selected' : '' %>>Planned</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Notities</label>
|
||||
<textarea name="notes" rows="2"><%= connection ? connection.notes : '' %></textarea>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-accent"><%= connection ? 'Opslaan' : 'Aanmaken' %></button>
|
||||
<a href="/networking" class="btn btn-secondary">Annuleren</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<script src="/js/theme.js"></script></body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user