189 lines
9.2 KiB
HTML
189 lines
9.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{.title}}</title>
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
|
|
<!-- Stylesheets -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
<link href="/static/style.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="container mt-4">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="app-header mb-4">
|
|
<img src="/static/logo.png" alt="medisoftware Logo" />
|
|
<h1>{{.title}}</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Neuen PC hinzufügen -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-plus-circle"></i> Neuen PC hinzufügen
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form id="addPCForm">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="mb-3">
|
|
<label for="pcName" class="form-label">PC-Name</label>
|
|
<input type="text" class="form-control" id="pcName" required>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="mb-3">
|
|
<label for="macAddress" class="form-label">MAC-Adresse</label>
|
|
<input type="text" class="form-control" id="macAddress"
|
|
placeholder="XX:XX:XX:XX:XX:XX" required>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="mb-3">
|
|
<label for="ipAddress" class="form-label">IP-Adresse</label>
|
|
<input type="text" class="form-control" id="ipAddress"
|
|
placeholder="192.168.1.100" required>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-save"></i> PC hinzufügen
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PC-Liste -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-desktop"></i> Gespeicherte PCs
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Suchfeld -->
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<div class="input-group">
|
|
<span class="input-group-text">
|
|
<i class="fas fa-search"></i>
|
|
</span>
|
|
<input type="text" class="form-control" id="searchInput"
|
|
placeholder="PC-Namen suchen..."
|
|
aria-label="PC-Namen suchen">
|
|
<button class="btn btn-outline-secondary" type="button" id="clearSearchBtn"
|
|
style="display: none;">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 text-end">
|
|
<button class="btn btn-outline-info me-2" id="refreshStatusBtn" title="Online-Status aktualisieren">
|
|
<i class="fas fa-sync-alt"></i> Status aktualisieren
|
|
</button>
|
|
<span class="badge bg-primary" id="resultCount">0 PCs gefunden</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="pcList" class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>MAC-Adresse</th>
|
|
<th>IP-Adresse</th>
|
|
<th>Status</th>
|
|
<th>Erstellt am</th>
|
|
<th>Aktionen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="pcTableBody">
|
|
<!-- PCs werden hier dynamisch eingefügt -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div id="noPCs" class="text-center text-muted" style="display: none;">
|
|
<i class="fas fa-info-circle fa-2x mb-2"></i>
|
|
<p>Noch keine PCs hinzugefügt.</p>
|
|
</div>
|
|
<div id="noSearchResults" class="text-center text-muted" style="display: none;">
|
|
<i class="fas fa-search fa-2x mb-2"></i>
|
|
<p>Keine PCs gefunden, die "<span id="searchTerm"></span>" enthalten.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit PC Modal -->
|
|
<div class="modal fade" id="editPCModal" tabindex="-1" aria-labelledby="editPCModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="editPCModalLabel">
|
|
<i class="fas fa-edit"></i> PC bearbeiten
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="editPCForm">
|
|
<input type="hidden" id="editPCId">
|
|
<div class="mb-3">
|
|
<label for="editPCName" class="form-label">PC-Name</label>
|
|
<input type="text" class="form-control" id="editPCName" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="editMACAddress" class="form-label">MAC-Adresse</label>
|
|
<input type="text" class="form-control" id="editMACAddress"
|
|
placeholder="XX:XX:XX:XX:XX:XX" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="editIPAddress" class="form-label">IP-Adresse</label>
|
|
<input type="text" class="form-control" id="editIPAddress"
|
|
placeholder="192.168.1.100" required>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
|
|
<button type="button" class="btn btn-primary" id="saveEditBtn">
|
|
<i class="fas fa-save"></i> Speichern
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast für Benachrichtigungen -->
|
|
<div class="toast-container position-fixed bottom-0 end-0 p-3">
|
|
<div id="notificationToast" class="toast" role="alert">
|
|
<div class="toast-header">
|
|
<strong class="me-auto" id="toastTitle">Benachrichtigung</strong>
|
|
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
|
|
</div>
|
|
<div class="toast-body" id="toastMessage">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="/static/script.js"></script>
|
|
</body>
|
|
</html>
|