IntelSight/v2-Docker
3
0
Fork 0
Code Issues Pull-Requests Actions Pakete Projekte Releases Wiki Aktivität

Initial commit

Quellcode durchsuchen
Dieser Commit ist enthalten in:
Claude Project Manager
2025-07-05 17:51:16 +02:00
Commit 0d7d888502
1594 geänderte Dateien mit 122839 neuen und 0 gelöschten Zeilen
Patch-Datei herunterladen Vergleichs-Datei herunterladen Alle Dateien ausklappen Alle Dateien einklappen

578
v2_adminpanel/templates/index.html Normale Datei
Datei anzeigen

@ -0,0 +1,578 @@
{% extends "base.html" %}
{% block title %}Admin Panel{% endblock %}
{% block content %}
<div class="container py-5">
<div class="d-flex justify-content-between align-items-center mb-4">
<h2>Neue Lizenz erstellen</h2>
<a href="{{ url_for('customers.customers_licenses') }}" class="btn btn-secondary">← Zurück zur Übersicht</a>
</div>
<!-- Customer Type Indicator -->
<div id="customerTypeIndicator" class="alert d-none mb-3" role="alert">
<i class="fas fa-info-circle"></i> <span id="customerTypeMessage"></span>
</div>
<form method="post" action="{{ url_for('licenses.create_license') }}" accept-charset="UTF-8">
<div class="row g-3">
<div class="col-md-12">
<label for="customerSelect" class="form-label">Kunde auswählen</label>
<select class="form-select" id="customerSelect" name="customer_id" required>
<option value="">🔍 Kunde suchen oder neuen Kunden anlegen...</option>
<option value="new">➕ Neuer Kunde</option>
</select>
</div>
<div class="col-md-6" id="customerNameDiv" style="display: none;">
<label for="customerName" class="form-label">Kundenname</label>
<input type="text" class="form-control" id="customerName" name="customer_name" accept-charset="UTF-8">
</div>
<div class="col-md-6" id="emailDiv" style="display: none;">
<label for="email" class="form-label">E-Mail</label>
<input type="email" class="form-control" id="email" name="email" accept-charset="UTF-8">
</div>
<div class="col-md-4">
<label for="licenseKey" class="form-label">Lizenzschlüssel</label>
<div class="input-group">
<input type="text" class="form-control" id="licenseKey" name="license_key"
placeholder="AF-F-YYYYMM-XXXX-YYYY-ZZZZ" required
pattern="AF-[FT]-\d{6}-[A-Z0-9]{4}-[A-Z0-9]{4}-[A-Z0-9]{4}"
title="Format: AF-F-YYYYMM-XXXX-YYYY-ZZZZ">
<button type="button" class="btn btn-outline-primary" onclick="generateLicenseKey()">
🔑 Generieren
</button>
</div>
<div class="form-text">Format: AF-F-YYYYMM-XXXX-YYYY-ZZZZ (F=Full, T=Test)</div>
</div>
<div class="col-md-4">
<label for="licenseType" class="form-label">Lizenztyp</label>
<select class="form-select" id="licenseType" name="license_type" required>
<option value="full">Vollversion</option>
<option value="test">Testversion</option>
</select>
</div>
<div class="col-md-2">
<label for="validFrom" class="form-label">Kaufdatum</label>
<input type="date" class="form-control" id="validFrom" name="valid_from" required>
</div>
<div class="col-md-1">
<label for="duration" class="form-label">Laufzeit</label>
<input type="number" class="form-control" id="duration" name="duration" value="1" min="1" required>
</div>
<div class="col-md-1">
<label for="durationType" class="form-label">Einheit</label>
<select class="form-select" id="durationType" name="duration_type" required>
<option value="days">Tage</option>
<option value="months">Monate</option>
<option value="years" selected>Jahre</option>
</select>
</div>
<div class="col-md-2">
<label for="validUntil" class="form-label">Ablaufdatum</label>
<input type="date" class="form-control" id="validUntil" name="valid_until" readonly style="background-color: #e9ecef;">
</div>
</div>
<!-- Resource Pool Allocation -->
<div class="card mt-4">
<div class="card-header">
<h5 class="mb-0">
<i class="fas fa-server"></i> Ressourcen-Zuweisung
<small class="text-muted float-end" id="resourceStatus"></small>
</h5>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-4">
<label for="domainCount" class="form-label">
<i class="fas fa-globe"></i> Domains
</label>
<select class="form-select" id="domainCount" name="domain_count" required>
{% for i in range(11) %}
<option value="{{ i }}" {% if i == 1 %}selected{% endif %}>{{ i }}</option>
{% endfor %}
</select>
<small class="form-text text-muted">
Verfügbar: <span id="domainsAvailable" class="fw-bold">-</span>
</small>
</div>
<div class="col-md-4">
<label for="ipv4Count" class="form-label">
<i class="fas fa-network-wired"></i> IPv4-Adressen
</label>
<select class="form-select" id="ipv4Count" name="ipv4_count" required>
{% for i in range(11) %}
<option value="{{ i }}" {% if i == 1 %}selected{% endif %}>{{ i }}</option>
{% endfor %}
</select>
<small class="form-text text-muted">
Verfügbar: <span id="ipv4Available" class="fw-bold">-</span>
</small>
</div>
<div class="col-md-4">
<label for="phoneCount" class="form-label">
<i class="fas fa-phone"></i> Telefonnummern
</label>
<select class="form-select" id="phoneCount" name="phone_count" required>
{% for i in range(11) %}
<option value="{{ i }}" {% if i == 1 %}selected{% endif %}>{{ i }}</option>
{% endfor %}
</select>
<small class="form-text text-muted">
Verfügbar: <span id="phoneAvailable" class="fw-bold">-</span>
</small>
</div>
</div>
<div class="alert alert-info mt-3 mb-0" role="alert">
<i class="fas fa-info-circle"></i>
Die Ressourcen werden bei der Lizenzerstellung automatisch aus dem Pool zugewiesen.
Wählen Sie 0, wenn für diesen Typ keine Ressourcen benötigt werden.
</div>
</div>
</div>
<!-- Device Limit -->
<div class="card mt-4">
<div class="card-header">
<h5 class="mb-0">
<i class="fas fa-laptop"></i> Gerätelimit
</h5>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<label for="deviceLimit" class="form-label">
Maximale Anzahl Geräte
</label>
<select class="form-select" id="deviceLimit" name="device_limit" required>
{% for i in range(1, 11) %}
<option value="{{ i }}" {% if i == 3 %}selected{% endif %}>{{ i }} {% if i == 1 %}Gerät{% else %}Geräte{% endif %}</option>
{% endfor %}
</select>
<small class="form-text text-muted">
Anzahl der Geräte, auf denen die Lizenz gleichzeitig aktiviert sein kann.
</small>
</div>
</div>
</div>
</div>
<div class="mt-4">
<button type="submit" class="btn btn-primary">➕ Lizenz erstellen</button>
</div>
</form>
</div>
<!-- Flash Messages -->
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
{% for category, message in messages %}
<div class="toast show align-items-center text-white bg-{{ 'danger' if category == 'error' else 'success' }} border-0" role="alert">
<div class="d-flex">
<div class="toast-body">
{{ message }}
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
</div>
</div>
{% endfor %}
</div>
{% endif %}
{% endwith %}
<script>
// License Key Generator
function generateLicenseKey() {
const licenseType = document.getElementById('licenseType').value;
// Zeige Ladeindikator
const button = event.target;
const originalText = button.innerHTML;
button.disabled = true;
button.innerHTML = '⏳ Generiere...';
// API-Call
fetch('{{ url_for('api.api_generate_key') }}', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({type: licenseType})
})
.then(response => response.json())
.then(data => {
if (data.success) {
document.getElementById('licenseKey').value = data.key;
// Visuelles Feedback
document.getElementById('licenseKey').classList.add('border-success');
setTimeout(() => {
document.getElementById('licenseKey').classList.remove('border-success');
}, 2000);
} else {
alert('Fehler bei der Key-Generierung: ' + (data.error || 'Unbekannter Fehler'));
}
})
.catch(error => {
console.error('Fehler:', error);
alert('Netzwerkfehler bei der Key-Generierung');
})
.finally(() => {
// Button zurücksetzen
button.disabled = false;
button.innerHTML = originalText;
});
}
// Event Listener für Lizenztyp-Änderung
document.getElementById('licenseType').addEventListener('change', function() {
const keyField = document.getElementById('licenseKey');
if (keyField.value && keyField.value.startsWith('AF-')) {
// Prüfe ob der Key zum neuen Typ passt
const currentType = this.value;
const keyType = keyField.value.charAt(3); // Position des F/T im Key (AF-F-...)
if ((currentType === 'full' && keyType === 'T') ||
(currentType === 'test' && keyType === 'F')) {
if (confirm('Der aktuelle Key passt nicht zum gewählten Lizenztyp. Neuen Key generieren?')) {
generateLicenseKey();
}
}
}
});
// Auto-Uppercase für License Key Input
document.getElementById('licenseKey').addEventListener('input', function(e) {
e.target.value = e.target.value.toUpperCase();
});
// Funktion zur Berechnung des Ablaufdatums
function calculateValidUntil() {
const validFrom = document.getElementById('validFrom').value;
const duration = parseInt(document.getElementById('duration').value) || 1;
const durationType = document.getElementById('durationType').value;
if (!validFrom) return;
const startDate = new Date(validFrom);
let endDate = new Date(startDate);
switch(durationType) {
case 'days':
endDate.setDate(endDate.getDate() + duration);
break;
case 'months':
endDate.setMonth(endDate.getMonth() + duration);
break;
case 'years':
endDate.setFullYear(endDate.getFullYear() + duration);
break;
}
// Kein Tag abziehen - die Lizenz ist bis einschließlich des Enddatums gültig
document.getElementById('validUntil').value = endDate.toISOString().split('T')[0];
}
// Event Listener für Änderungen
document.getElementById('validFrom').addEventListener('change', calculateValidUntil);
document.getElementById('duration').addEventListener('input', calculateValidUntil);
document.getElementById('durationType').addEventListener('change', calculateValidUntil);
// Setze heutiges Datum als Standard für valid_from
document.addEventListener('DOMContentLoaded', function() {
const today = new Date().toISOString().split('T')[0];
document.getElementById('validFrom').value = today;
// Berechne initiales Ablaufdatum
calculateValidUntil();
// Initialisiere Select2 für Kundenauswahl
$('#customerSelect').select2({
theme: 'bootstrap-5',
placeholder: '🔍 Kunde suchen oder neuen Kunden anlegen...',
allowClear: true,
ajax: {
url: '{{ url_for('api.api_customers') }}',
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term,
page: params.page || 1
};
},
processResults: function (data, params) {
params.page = params.page || 1;
// "Neuer Kunde" Option immer oben anzeigen
const results = data.results || [];
if (params.page === 1) {
results.unshift({
id: 'new',
text: '➕ Neuer Kunde',
isNew: true
});
}
return {
results: results,
pagination: data.pagination
};
},
cache: true
},
minimumInputLength: 0,
language: {
inputTooShort: function() { return ''; },
noResults: function() { return 'Keine Kunden gefunden'; },
searching: function() { return 'Suche...'; },
loadingMore: function() { return 'Lade weitere Ergebnisse...'; }
}
});
// Vorausgewählten Kunden setzen (falls von kombinierter Ansicht kommend)
{% if preselected_customer_id %}
// Lade Kundendetails und setze Auswahl
fetch('{{ url_for('api.api_customers') }}?id={{ preselected_customer_id }}')
.then(response => response.json())
.then(data => {
if (data.results && data.results.length > 0) {
const customer = data.results[0];
// Erstelle Option und setze sie als ausgewählt
const option = new Option(customer.text, customer.id, true, true);
$('#customerSelect').append(option).trigger('change');
// Verstecke die Eingabefelder
document.getElementById('customerNameDiv').style.display = 'none';
document.getElementById('emailDiv').style.display = 'none';
}
});
{% endif %}
// Event Handler für Kundenauswahl
$('#customerSelect').on('select2:select', function (e) {
const selectedValue = e.params.data.id;
const nameDiv = document.getElementById('customerNameDiv');
const emailDiv = document.getElementById('emailDiv');
const nameInput = document.getElementById('customerName');
const emailInput = document.getElementById('email');
if (selectedValue === 'new') {
// Zeige Eingabefelder für neuen Kunden
nameDiv.style.display = 'block';
emailDiv.style.display = 'block';
nameInput.required = true;
emailInput.required = true;
// New customers are currently hardcoded as fake (TODO in backend)
window.selectedCustomerIsFake = true;
// Zeige Indikator für neuen Kunden
showCustomerTypeIndicator('new');
} else {
// Verstecke Eingabefelder bei bestehendem Kunden
nameDiv.style.display = 'none';
emailDiv.style.display = 'none';
nameInput.required = false;
emailInput.required = false;
nameInput.value = '';
emailInput.value = '';
// Store customer's is_fake status
window.selectedCustomerIsFake = e.params.data.is_fake || false;
// Zeige Indikator basierend auf Kundendaten
if (e.params.data.is_fake !== undefined) {
showCustomerTypeIndicator(e.params.data.is_fake ? 'fake' : 'real');
}
}
// Update resource availability check with new customer status
checkResourceAvailability();
});
// Clear handler
$('#customerSelect').on('select2:clear', function (e) {
document.getElementById('customerNameDiv').style.display = 'none';
document.getElementById('emailDiv').style.display = 'none';
document.getElementById('customerName').required = false;
document.getElementById('email').required = false;
window.selectedCustomerIsFake = false;
checkResourceAvailability();
hideCustomerTypeIndicator();
});
// Store selected customer's is_fake status
window.selectedCustomerIsFake = false;
// Resource Availability Check
checkResourceAvailability();
// Event Listener für Resource Count Änderungen
document.getElementById('domainCount').addEventListener('change', checkResourceAvailability);
document.getElementById('ipv4Count').addEventListener('change', checkResourceAvailability);
document.getElementById('phoneCount').addEventListener('change', checkResourceAvailability);
});
// Funktion zur Prüfung der Ressourcen-Verfügbarkeit
function checkResourceAvailability() {
const domainCount = parseInt(document.getElementById('domainCount').value) || 0;
const ipv4Count = parseInt(document.getElementById('ipv4Count').value) || 0;
const phoneCount = parseInt(document.getElementById('phoneCount').value) || 0;
// Include is_fake parameter based on selected customer
const isFake = window.selectedCustomerIsFake ? 'true' : 'false';
// API-Call zur Verfügbarkeitsprüfung
fetch(`{{ url_for('api.check_resource_availability') }}?domain=${domainCount}&ipv4=${ipv4Count}&phone=${phoneCount}&is_fake=${isFake}`)
.then(response => response.json())
.then(data => {
// Update der Verfügbarkeitsanzeigen
updateAvailabilityDisplay('domainsAvailable', data.domain_available, domainCount);
updateAvailabilityDisplay('ipv4Available', data.ipv4_available, ipv4Count);
updateAvailabilityDisplay('phoneAvailable', data.phone_available, phoneCount);
// Gesamtstatus aktualisieren
updateResourceStatus(data, domainCount, ipv4Count, phoneCount);
})
.catch(error => {
console.error('Fehler bei Verfügbarkeitsprüfung:', error);
});
}
// Hilfsfunktion zur Anzeige der Verfügbarkeit
function updateAvailabilityDisplay(elementId, available, requested) {
const element = document.getElementById(elementId);
const container = element.parentElement;
// Verfügbarkeit mit Prozentanzeige
const percent = Math.round((available / (available + requested + 50)) * 100);
let statusHtml = `<strong>${available}</strong>`;
if (requested > 0 && available < requested) {
element.classList.remove('text-success', 'text-warning');
element.classList.add('text-danger');
statusHtml += ` <i class="bi bi-exclamation-triangle"></i>`;
// Füge Warnung hinzu
if (!container.querySelector('.availability-warning')) {
const warning = document.createElement('div');
warning.className = 'availability-warning text-danger small mt-1';
warning.innerHTML = `<i class="bi bi-x-circle"></i> Nicht genügend Ressourcen verfügbar!`;
container.appendChild(warning);
}
} else {
// Entferne Warnung wenn vorhanden
const warning = container.querySelector('.availability-warning');
if (warning) warning.remove();
if (available < 20) {
element.classList.remove('text-success');
element.classList.add('text-danger');
statusHtml += ` <span class="badge bg-danger">Kritisch</span>`;
} else if (available < 50) {
element.classList.remove('text-success', 'text-danger');
element.classList.add('text-warning');
statusHtml += ` <span class="badge bg-warning text-dark">Niedrig</span>`;
} else {
element.classList.remove('text-danger', 'text-warning');
element.classList.add('text-success');
statusHtml += ` <span class="badge bg-success">OK</span>`;
}
}
element.innerHTML = statusHtml;
// Zeige Fortschrittsbalken
updateResourceProgressBar(elementId.replace('Available', ''), available, requested);
}
// Fortschrittsbalken für Ressourcen
function updateResourceProgressBar(resourceType, available, requested) {
const progressId = `${resourceType}Progress`;
let progressBar = document.getElementById(progressId);
// Erstelle Fortschrittsbalken wenn nicht vorhanden
if (!progressBar) {
const container = document.querySelector(`#${resourceType}Available`).parentElement.parentElement;
const progressDiv = document.createElement('div');
progressDiv.className = 'mt-2';
progressDiv.innerHTML = `
<div class="progress" style="height: 20px;" id="${progressId}">
<div class="progress-bar bg-success" role="progressbar" style="width: 0%">
<span class="progress-text"></span>
</div>
</div>
`;
container.appendChild(progressDiv);
progressBar = document.getElementById(progressId);
}
const total = available + requested;
const availablePercent = total > 0 ? (available / total) * 100 : 100;
const bar = progressBar.querySelector('.progress-bar');
const text = progressBar.querySelector('.progress-text');
// Setze Farbe basierend auf Verfügbarkeit
bar.classList.remove('bg-success', 'bg-warning', 'bg-danger');
if (requested > 0 && available < requested) {
bar.classList.add('bg-danger');
} else if (availablePercent < 30) {
bar.classList.add('bg-warning');
} else {
bar.classList.add('bg-success');
}
// Animiere Fortschrittsbalken
bar.style.width = `${availablePercent}%`;
text.textContent = requested > 0 ? `${available} von ${total}` : `${available} verfügbar`;
}
// Gesamtstatus der Ressourcen-Verfügbarkeit
function updateResourceStatus(data, domainCount, ipv4Count, phoneCount) {
const statusElement = document.getElementById('resourceStatus');
let hasIssue = false;
let message = '';
if (domainCount > 0 && data.domain_available < domainCount) {
hasIssue = true;
message = '⚠️ Nicht genügend Domains';
} else if (ipv4Count > 0 && data.ipv4_available < ipv4Count) {
hasIssue = true;
message = '⚠️ Nicht genügend IPv4-Adressen';
} else if (phoneCount > 0 && data.phone_available < phoneCount) {
hasIssue = true;
message = '⚠️ Nicht genügend Telefonnummern';
} else {
message = '✅ Alle Ressourcen verfügbar';
}
statusElement.textContent = message;
statusElement.className = hasIssue ? 'text-danger' : 'text-success';
}
// Funktion zur Anzeige des Kundentyp-Indikators
function showCustomerTypeIndicator(type) {
const indicator = document.getElementById('customerTypeIndicator');
const message = document.getElementById('customerTypeMessage');
indicator.classList.remove('d-none', 'alert-info', 'alert-warning', 'alert-success');
if (type === 'new') {
indicator.classList.add('alert-info');
message.textContent = 'Neue Kunden werden in der Testphase als TEST-Kunden erstellt. Die Lizenz wird automatisch als TEST-Lizenz markiert.';
} else if (type === 'fake') {
indicator.classList.add('alert-warning');
message.textContent = 'Dies ist ein TEST-Kunde. Die Lizenz wird automatisch als TEST-Lizenz markiert und von der Software ignoriert.';
} else if (type === 'real') {
indicator.classList.add('alert-success');
message.textContent = 'Dies ist ein PRODUKTIV-Kunde. Die Lizenz wird als produktive Lizenz erstellt.';
}
}
function hideCustomerTypeIndicator() {
document.getElementById('customerTypeIndicator').classList.add('d-none');
}
</script>
{% endblock %}