Kunden & Lizenzen + Ressourcen - Nicht so zufrieden

v2_adminpanel/templates/index.html

@@ -403,18 +403,89 @@ function checkResourceAvailability() {
 // Hilfsfunktion zur Anzeige der Verfügbarkeit
 function updateAvailabilityDisplay(elementId, available, requested) {
     const element = document.getElementById(elementId);
-    element.textContent = available;
+    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');
+        element.classList.remove('text-success', 'text-warning');
         element.classList.add('text-danger');
-    } else if (available < 50) {
-        element.classList.remove('text-success', 'text-danger');
-        element.classList.add('text-warning');
+        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 {
-        element.classList.remove('text-danger', 'text-warning');
-        element.classList.add('text-success');
+        // 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