AstraOS-Panel/AstraOS/Frontend/HTML/dashboard.html

{% extends "sidebar.html" %}

{% block title %}AstraOS — Dashboard{% endblock %}

{% block head %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<style>
.glow-card {
    transition: 0.2s ease;
}
.glow-card:hover {
    box-shadow: 0 0 20px rgba(192,132,252,0.3);
    transform: translateY(-4px);
}
#system-status-text.small {
    font-size: 2rem;
    text-align: center;
    margin: 0 auto;
    display: block;
}
#system-status-desc .wartung-desc {
    font-size: 0.75rem;
    display: block;
    text-align: center;
    margin: 0 auto;
    font-weight: 500;
}
</style>
{% endblock %}

{% block content %}
<header class="flex justify-between items-center mb-6 opacity-0">
    <h2 class="text-4xl font-bold tracking-wide {% if maintenance_active %}text-yellow-300{% else %}text-purple-300{% endif %}">Dashboard</h2>
</header>

<div class="grid grid-cols-1 gap-8">
    <div class="glow-card opacity-0 translate-y-8 lg:col-span-2 bg-black/40 p-6 rounded-xl backdrop-blur
                {% if maintenance_active %}border border-yellow-500/30{% else %}border border-purple-500/20{% endif %}">
        <h3 class="text-2xl font-semibold mb-4">🚀 Willkommen bei AstraOS!</h3>
        <p class="text-gray-300">
            AstraOS ist da! Wir haben alles von Grund auf neu gebaut, damit du deine Systeme noch intuitiver und effizienter verwalten kannst. Wir hoffen, dir gefallen das neue Design und die vielen praktischen Funktionen.
        </p>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
    <div class="glow-card opacity-0 translate-y-8 bg-black/40 rounded-xl p-6 backdrop-blur
                {% if maintenance_active %}border border-yellow-500/30{% else %}border border-purple-500/20{% endif %}">
        <h3 class="text-xl font-semibold mb-2 {% if maintenance_active %}text-yellow-300{% else %}text-purple-300{% endif %}">Aktive Benutzer</h3>
        <p class="text-4xl font-bold" id="active-users">{{ stats.active_users.value }}</p>
        <p class="text-green-400 text-sm mt-1" id="active-users-percent">
            {% set pct = stats.active_users.percent %}
            {% if pct is not none %}
                {{ '+' if pct>=0 else '' }}{{ pct }}% seit letzter Woche
            {% else %}
                -
            {% endif %}
        </p>
    </div>

    <div id="server-load-card" class="glow-card opacity-0 translate-y-8 bg-black/40 border border-red-500/40 rounded-xl p-6 backdrop-blur">
        <h3 class="text-xl font-semibold mb-2 {% if maintenance_active %}text-yellow-300{% else %}text-purple-300{% endif %}">Server-Auslastung</h3>
        <p class="text-4xl font-bold" id="server-load">{{ stats.server_load.percent }}%</p>
        <p class="text-red-400 text-sm mt-1" id="server-load-status">{{ stats.server_load.status }}</p>
    </div>

    <div class="glow-card opacity-0 translate-y-8 bg-black/40 rounded-xl p-6 backdrop-blur
                {% if maintenance_active %}border border-yellow-500/30{% else %}border border-purple-500/20{% endif %}">
        <h3 class="text-xl font-semibold mb-2 {% if maintenance_active %}text-yellow-300{% else %}text-purple-300{% endif %}">Offene Tickets</h3>
        <p class="text-4xl font-bold" id="open-tickets">{{ stats.open_tickets.count }}</p>
        <p class="text-gray-400 text-sm mt-1">Keine offenen Anfragen</p>
    </div>

    <div id="system-status-card" class="glow-card opacity-0 translate-y-8 bg-black/40 border border-green-500/40 rounded-xl p-6 backdrop-blur">
        <h3 class="text-xl font-semibold mb-2 {% if maintenance_active %}text-yellow-300{% else %}text-purple-300{% endif %}">Systemstatus</h3>
        {% set status = stats.system_status.status %}
        <p id="system-status-text"
           class="text-4xl font-bold
            {% if 'online' in status.lower() %}text-green-400
            {% elif 'wartung' in status.lower() or 'systeme im wartungsmodus' in status.lower() %}text-yellow-400 small
            {% else %}text-red-400{% endif %}">
            {{ status }}
        </p>
        <p class="text-gray-400 text-sm mt-1" id="system-status-desc">
            {% if 'wartung' in status.lower() or 'systeme im wartungsmodus' in status.lower() %}
                <span class="wartung-desc">Systeme im Wartungsmodus</span>
            {% elif 'online' in status.lower() %}
                Alle Systeme funktionsfähig
            {% else %}
                Teilweise oder komplett offline
            {% endif %}
        </p>
    </div>

    <div class="glow-card opacity-0 translate-y-8 bg-black/40 rounded-xl p-6 backdrop-blur
                {% if maintenance_active %}border border-yellow-500/30{% else %}border border-purple-500/20{% endif %}">
        <h3 class="text-xl font-semibold mb-2 {% if maintenance_active %}text-yellow-300{% else %}text-purple-300{% endif %}">Geplante Wartung</h3>
        {% set maint = stats.scheduled_maintenance %}
        {% if maint and maint.enabled %}
            <p class="text-2xl font-bold text-yellow-400">Aktiv</p>
            <p class="text-yellow-400 text-sm mt-1">{{ maint.status if maint.status else 'Wartungsarbeiten laufen' }}</p>
        {% elif maint and maint.time_str %}
            <p class="text-2xl font-bold">{{ maint.time_str }}</p>
            <p class="text-yellow-400 text-sm mt-1">{{ maint.status if maint and maint.status else 'Geplant' }} {% if maint and maint.duration_minutes %}— Dauer: {{ maint.duration_minutes }} Min.{% endif %}</p>
        {% else %}
            <p class="text-2xl font-bold">Keine geplant</p>
            <p class="text-gray-400 text-sm mt-1">Alle Systeme sind betriebsbereit.</p>
        {% endif %}
    </div>

    <div class="glow-card opacity-0 translate-y-8 bg-black/40 rounded-xl p-6 backdrop-blur
                {% if maintenance_active %}border border-yellow-500/30{% else %}border border-purple-500/20{% endif %}">
        <h3 class="text-xl font-semibold mb-2 {% if maintenance_active %}text-yellow-300{% else %}text-purple-300{% endif %}">Letzte Benutzererstellung</h3>
        {% set last = stats.last_user_created %}
        <p class="text-2xl font-bold" id="last-user-time">{{ last.time_str if last and last.time_str else 'Keine Daten' }}</p>
        <p class="text-gray-400 text-sm mt-1" id="last-user-by">Erstellter Benutzer: {{ last.by if last and last.by else 'N/A' }}</p>
    </div>
</div>
<script>
gsap.registerPlugin(ScrollTrigger);

setTimeout(() => {
    const tl = gsap.timeline({ defaults: { duration: 0.4, ease: "power3.out" } });

    tl.to("header", { opacity: 1, y: 0 });

    tl.to(".glow-card", { opacity: 1, y: 0, stagger: 0.08 });

    // Header Parallax
    gsap.to("header", {
        y: 8,
        ease: "none",
        scrollTrigger: {
            trigger: "header",
            start: "top top",
            scrub: true
        }
    });
}, 800);

document.querySelectorAll(".glow-card").forEach(card => {
    card.addEventListener("mouseenter", () => {
        gsap.to(card, { boxShadow: "0 0 30px rgba(192,132,252,0.4)", duration: 0.2 });
    });
    card.addEventListener("mouseleave", () => {
        gsap.to(card, { boxShadow: "0 0 0 rgba(0,0,0,0)", duration: 0.2 });
    });
});

function updateServerLoad() {
    fetch('/api/server_load')
        .then(res => res.json())
        .then(data => {
            const loadCard = document.getElementById('server-load-card');
            const loadStatus = document.getElementById('server-load-status');

            document.getElementById('server-load').textContent = data.percent + '%';
            loadStatus.textContent = data.status;

            // Klassen für Farben entfernen
            loadCard.classList.remove('border-red-500/40', 'border-green-500/40', 'border-yellow-500/40');
            loadStatus.classList.remove('text-red-400', 'text-green-400', 'text-yellow-400');

            if (data.status === 'Online') {
                if (data.percent > 75) {
                    // Gelb bei hoher Auslastung
                    loadCard.classList.add('border-yellow-500/40');
                    loadStatus.classList.add('text-yellow-400');
                } else {
                    // Grün bei normaler Auslastung
                    loadCard.classList.add('border-green-500/40');
                    loadStatus.classList.add('text-green-400');
                }
            } else {
                // Rot bei Fehler/Offline
                loadCard.classList.add('border-red-500/40');
                loadStatus.classList.add('text-red-400');
            }
        });
}
setInterval(updateServerLoad, 5000);
updateServerLoad();

function updateSystemStatusCard() {
    const card = document.getElementById('system-status-card');
    const statusText = document.getElementById('system-status-text');
    if (!card || !statusText) return;
    card.classList.remove('border-green-500/40', 'border-yellow-500/40', 'border-red-500/40');
    statusText.classList.remove('small');
    const status = statusText.textContent.toLowerCase();
    if (status.includes('wartung') || status.includes('systeme im wartungsmodus')) {
        card.classList.add('border-yellow-500/40');
        statusText.classList.add('small');
    } else if (status.includes('online')) {
        card.classList.add('border-green-500/40');
    } else {
        card.classList.add('border-red-500/40');
    }
}
setTimeout(updateSystemStatusCard, 100);
setInterval(updateSystemStatusCard, 2000);
</script>
{% endblock %}