Projektarbeit-MYP/backend/templates/components/printer_status.html

<!-- Drucker-Status-Komponente für wiederverwendbare Status-Anzeige -->

{% macro printer_status_badge(status, size='sm') %}
    {% set status_config = {
        'online': {
            'color': 'green',
            'icon': 'fa-check-circle',
            'text': 'Online',
            'description': 'Drucker ist einsatzbereit'
        },
        'offline': {
            'color': 'red', 
            'icon': 'fa-times-circle',
            'text': 'Offline',
            'description': 'Drucker ist nicht erreichbar'
        },
        'busy': {
            'color': 'blue',
            'icon': 'fa-spinner',
            'text': 'Beschäftigt',
            'description': 'Drucker druckt gerade'
        },
        'idle': {
            'color': 'yellow',
            'icon': 'fa-pause-circle',
            'text': 'Bereit',
            'description': 'Drucker ist online aber inaktiv'
        },
        'available': {
            'color': 'green',
            'icon': 'fa-check-circle',
            'text': 'Verfügbar',
            'description': 'Drucker ist verfügbar'
        },
        'error': {
            'color': 'red',
            'icon': 'fa-exclamation-triangle',
            'text': 'Fehler',
            'description': 'Drucker hat einen Fehler'
        }
    } %}
    
    {% set config = status_config.get(status, status_config['offline']) %}
    {% set size_classes = {
        'xs': 'px-2 py-1 text-xs',
        'sm': 'px-3 py-1 text-sm', 
        'md': 'px-4 py-2 text-base',
        'lg': 'px-6 py-3 text-lg'
    } %}
    
    <span class="inline-flex items-center {{ size_classes.get(size, size_classes['sm']) }} rounded-full font-medium
                 bg-{{ config.color }}-100 dark:bg-{{ config.color }}-900/20 
                 text-{{ config.color }}-800 dark:text-{{ config.color }}-300"
          title="{{ config.description }}">
        <i class="fas {{ config.icon }} mr-1{% if config.icon == 'fa-spinner' %} fa-spin{% endif %}"></i>
        {{ config.text }}
    </span>
{% endmacro %}

{% macro printer_status_indicator(status, show_text=true) %}
    {% set status_config = {
        'online': {
            'color': 'green',
            'icon': 'fa-circle',
            'text': 'Online'
        },
        'offline': {
            'color': 'red',
            'icon': 'fa-circle', 
            'text': 'Offline'
        },
        'busy': {
            'color': 'blue',
            'icon': 'fa-circle',
            'text': 'Beschäftigt'
        },
        'idle': {
            'color': 'yellow',
            'icon': 'fa-circle',
            'text': 'Bereit'
        },
        'available': {
            'color': 'green',
            'icon': 'fa-circle',
            'text': 'Verfügbar'
        }
    } %}
    
    {% set config = status_config.get(status, status_config['offline']) %}
    
    <div class="flex items-center space-x-2">
        <i class="fas {{ config.icon }} text-{{ config.color }}-500 dark:text-{{ config.color }}-400"></i>
        {% if show_text %}
        <span class="text-sm text-slate-700 dark:text-slate-300">{{ config.text }}</span>
        {% endif %}
    </div>
{% endmacro %}

{% macro printer_power_status(is_powered, plug_available=false) %}
    {% if plug_available %}
        <div class="flex items-center space-x-2">
            {% if is_powered %}
                <i class="fas fa-plug text-green-500 dark:text-green-400" title="Smart Plug: Eingeschaltet"></i>
                <span class="text-xs text-green-600 dark:text-green-400">An</span>
            {% else %}
                <i class="fas fa-plug text-red-500 dark:text-red-400" title="Smart Plug: Ausgeschaltet"></i>
                <span class="text-xs text-red-600 dark:text-red-400">Aus</span>
            {% endif %}
        </div>
    {% else %}
        <div class="flex items-center space-x-2">
            <i class="fas fa-plug text-slate-400 dark:text-slate-500" title="Kein Smart Plug konfiguriert"></i>
            <span class="text-xs text-slate-500 dark:text-slate-400">N/A</span>
        </div>
    {% endif %}
{% endmacro %}

{% macro printer_status_card(printer, show_jobs=true) %}
    <div class="bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-slate-200 dark:border-slate-700 p-4">
        <!-- Header -->
        <div class="flex items-center justify-between mb-3">
            <div class="flex items-center space-x-3">
                <div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center">
                    <i class="fas fa-print text-white"></i>
                </div>
                <div>
                    <h3 class="font-semibold text-slate-900 dark:text-white">{{ printer.name }}</h3>
                    <p class="text-sm text-slate-600 dark:text-slate-400">{{ printer.location or 'Kein Standort' }}</p>
                </div>
            </div>
            {{ printer_status_badge(printer.status) }}
        </div>
        
        <!-- Status Details -->
        <div class="grid grid-cols-2 gap-4 mb-3">
            <div>
                <span class="text-xs text-slate-600 dark:text-slate-400">Verbindung:</span>
                {{ printer_status_indicator(printer.status, false) }}
            </div>
            <div>
                <span class="text-xs text-slate-600 dark:text-slate-400">Strom:</span>
                {{ printer_power_status(printer.plug_ip and printer.status != 'offline', printer.plug_ip != null) }}
            </div>
        </div>
        
        <!-- IP Address -->
        {% if printer.ip_address %}
        <div class="text-xs text-slate-600 dark:text-slate-400 mb-3">
            <i class="fas fa-network-wired mr-1"></i>
            {{ printer.ip_address }}
        </div>
        {% endif %}
        
        <!-- Jobs -->
        {% if show_jobs and printer.jobs %}
        <div class="border-t border-slate-200 dark:border-slate-600 pt-3">
            <div class="flex items-center justify-between">
                <span class="text-xs font-medium text-slate-600 dark:text-slate-400">
                    Aktive Jobs: {{ printer.jobs|length }}
                </span>
                <a href="{{ url_for('jobs_page', printer_id=printer.id) }}" 
                   class="text-xs text-blue-600 dark:text-blue-400 hover:underline">
                    Details →
                </a>
            </div>
        </div>
        {% endif %}
        
        <!-- Last Updated -->
        {% if printer.last_checked %}
        <div class="text-xs text-slate-500 dark:text-slate-400 mt-3">
            Zuletzt geprüft: {{ printer.last_checked.strftime('%H:%M') }}
        </div>
        {% endif %}
    </div>
{% endmacro %}