Quelltext des aktuellen Standes
<?php
/**
* Template: Leihgeräte-Übersicht (Alles-in-einem)
*
* Verfügbare Variablen:
* $devices – Array mit allen Leihgeräten
* $device_types – Array mit allen Gerätetypen
* $my_loans – Array mit eigenen aktiven/reservierten Leihen
* $nonce – WordPress Nonce für AJAX
*/
if (!defined('ABSPATH')) exit;
$status_labels = [
'available' => ($text_available ?? 'Verfügbar'),
'lent' => 'Ausgeliehen',
'reserved' => 'Reserviert',
'maintenance' => 'In Wartung',
'retired' => 'Ausgemustert',
];
$loan_status_labels = [
'pending' => 'Anfrage offen',
'reserved' => 'Reserviert',
'active' => 'Aktiv',
];
?>
<div class="opennit-wrap" id="opennit-loan-wrap"
data-ajax-url="<?= esc_attr(admin_url('admin-ajax.php')) ?>"
data-nonce="<?= esc_attr($nonce) ?>"
data-success-text="<?= esc_attr($text_reservation_success ?? 'Erfolgreich reserviert. Zur Abholung vereinbaren Sie bitte mit der IT-Abteilung einen Termin.') ?>"
data-request-text="<?= esc_attr($text_request_success ?? 'Ihre Anfrage wurde übermittelt. Die Freigabe erfolgt durch das IT-Team – Sie erhalten anschließend eine E-Mail.') ?>"
data-text-available="<?= esc_attr($text_available ?? 'Verfügbar') ?>"
data-text-request="<?= esc_attr($text_request ?? 'Anfragen') ?>"
data-text-contact-it="<?= esc_attr($text_contact_it ?? 'Bitte IT-Team direkt kontaktieren') ?>"
data-max-advance-days="<?= esc_attr($max_advance_days ?? 90) ?>"
data-max-duration-days="<?= esc_attr($max_duration_days ?? 14) ?>"
data-error-too-far-ahead="<?= esc_attr($text_error_too_far_ahead ?? 'Das gewählte Datum liegt zu weit in der Zukunft. Bitte wählen Sie einen früheren Zeitraum.') ?>"
data-error-too-long="<?= esc_attr($text_error_too_long ?? 'Der gewählte Zeitraum ist zu lang. Bitte wählen Sie einen kürzeren Zeitraum.') ?>">
<?php if (!empty($my_loans)): ?>
<!-- Bereich A: Meine aktiven Leihen -->
<div class="opennit-card">
<div class="opennit-card__head">
<div class="opennit-card__head-icon" aria-hidden="true">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.59 13.41 13.42 20.59a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82Z"/><path d="M16 8h.01"/></svg>
</div>
<div class="opennit-card__head-text">
<h2 class="opennit-card__title"><?= esc_html($text_my_loans ?? 'Meine Leihen') ?></h2>
<p class="opennit-card__subtitle">Ihre aktuellen Reservierungen und Ausleihen.</p>
</div>
</div>
<div class="opennit-card__body">
<div class="opennit-loans-grid">
<?php foreach ($my_loans as $loan):
$ls = $loan['status'] ?? 'reserved';
$ls_class = ($ls === 'active') ? 'opennit-badge-active'
: (($ls === 'pending') ? 'opennit-badge-pending' : 'opennit-badge-reserved');
$ls_label = $loan_status_labels[$ls] ?? $ls;
?>
<div class="opennit-loan-card" data-status="<?= esc_attr($ls) ?>">
<div class="opennit-loan-card-header">
<strong><?= esc_html($loan['device_title']) ?></strong>
<span class="opennit-badge <?= esc_attr($ls_class) ?>"><?= esc_html($ls_label) ?></span>
</div>
<div class="opennit-loan-card-body">
<?php if (!empty($loan['device_type'])): ?>
<span class="opennit-device-type"><?= esc_html($loan['device_type']) ?></span>
<?php endif; ?>
<div class="opennit-loan-dates">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
<span><?= esc_html(date('d.m.Y', strtotime($loan['planned_start']))) ?></span>
<span class="opennit-loan-dates-sep">–</span>
<span><?= esc_html(date('d.m.Y', strtotime($loan['planned_end']))) ?></span>
</div>
<?php if (!empty($loan['purpose'])): ?>
<p class="opennit-loan-purpose"><?= esc_html($loan['purpose']) ?></p>
<?php endif; ?>
<?php if ($ls === 'pending' || $ls === 'reserved'): ?>
<button class="opennit-btn opennit-btn-cancel"
data-lending-id="<?= esc_attr($loan['id']) ?>"
onclick="opennitCancelLoan(this)">
<?= esc_html($text_cancel ?? 'Stornieren') ?>
</button>
<?php endif; ?>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<?php endif; ?>
<!-- Bereich B: Leihgeräte-Übersicht -->
<div class="opennit-card">
<div class="opennit-card__head">
<div class="opennit-card__head-icon" aria-hidden="true">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="14" rx="2"/><path d="M2 10h20"/><path d="M8 21h8"/><path d="M12 18v3"/></svg>
</div>
<div class="opennit-card__head-text">
<h2 class="opennit-card__title"><?= esc_html($text_loan_devices ?? 'Leihgeräte') ?></h2>
<p class="opennit-card__subtitle">Verfügbarkeit prüfen und ein Gerät reservieren.</p>
</div>
</div>
<div class="opennit-card__body">
<!-- Verfügbarkeitsfilter -->
<div class="opennit-filter-box">
<div class="opennit-filter-row">
<div class="opennit-filter-group">
<label for="opennit-f-type">Gerätetyp</label>
<select id="opennit-f-type" class="opennit-filter-select">
<option value="">– Alle Typen –</option>
<?php foreach ($device_types as $t): ?>
<option value="<?= esc_attr($t) ?>"><?= esc_html($t) ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="opennit-filter-group">
<label for="opennit-f-from">Von</label>
<input type="date" id="opennit-f-from" class="opennit-filter-date"
min="<?= date('Y-m-d') ?>">
</div>
<div class="opennit-filter-group">
<label for="opennit-f-to">Bis</label>
<input type="date" id="opennit-f-to" class="opennit-filter-date"
min="<?= date('Y-m-d') ?>">
</div>
<div class="opennit-filter-group opennit-filter-btn-group">
<label> </label>
<button type="button" class="opennit-btn opennit-btn-primary"
onclick="opennitFilterDevices()">
Verfügbarkeit prüfen
</button>
</div>
</div>
<div id="opennit-filter-status" class="opennit-filter-status" hidden></div>
</div>
</div><!-- /opennit-card__body -->
<!-- Gerätelist-Container (initial PHP-gerendert, bei Filter per JS ersetzt) -->
<div id="opennit-devices-container">
<?php if (empty($devices)): ?>
<div class="opennit-notice opennit-notice-info">Keine Leihgeräte vorhanden.</div>
<?php else: ?>
<div class="opennit-devices-list" id="opennit-devices-list">
<?php foreach ($devices as $device):
$device_id = (int)($device['id'] ?? 0);
$status = $device['status'] ?? 'available';
$is_available = ($status === 'available');
$wp_requestable = !empty($device['wp_requestable']);
$occupied_until = $device['occupied_until'] ?? null;
?>
<div class="opennit-device-item" id="opennit-device-<?= $device_id ?>">
<?php if (!empty($device['image_url'])): ?>
<div class="opennit-device-image">
<img src="<?= esc_url($device['image_url']) ?>"
alt="<?= esc_attr($device['title']) ?>"
loading="lazy">
</div>
<?php endif; ?>
<div class="opennit-device-info">
<div class="opennit-device-title-row">
<span class="opennit-device-name"><?= esc_html($device['title']) ?></span>
<?php if (!empty($device['type'])): ?>
<span class="opennit-device-type"><?= esc_html($device['type']) ?></span>
<?php endif; ?>
</div>
<?php if (!empty($device['inventory_number'])): ?>
<span class="opennit-device-inv"><?= esc_html($device['inventory_number']) ?></span>
<?php endif; ?>
<?php if (!empty($device['description'])): ?>
<p class="opennit-device-desc"><?= esc_html($device['description']) ?></p>
<?php endif; ?>
</div>
<div class="opennit-device-status-col">
<?php if ($is_available): ?>
<span class="opennit-badge opennit-badge-available"><?= esc_html($text_available ?? 'Verfügbar') ?></span>
<?php elseif ($occupied_until): ?>
<span class="opennit-badge opennit-badge-occupied">Belegt bis <?= esc_html(date('d.m.Y', strtotime($occupied_until))) ?></span>
<?php else: ?>
<span class="opennit-badge opennit-badge-occupied"><?= esc_html($status_labels[$status] ?? $status) ?></span>
<?php endif; ?>
<?php if ($is_available && $wp_requestable): ?>
<button type="button"
class="opennit-btn opennit-btn-request"
data-device-id="<?= $device_id ?>"
data-device-name="<?= esc_attr($device['title']) ?>"
aria-expanded="false">
<?= esc_html($text_request ?? 'Anfragen') ?>
</button>
<?php elseif ($is_available && !$wp_requestable): ?>
<span class="opennit-hint"><?= esc_html($text_contact_it ?? 'Bitte IT-Team direkt kontaktieren') ?></span>
<?php endif; ?>
</div>
</div>
<?php if ($is_available && $wp_requestable): ?>
<!-- Anfrageformular (eingeklappt) -->
<div class="opennit-request-form" id="opennit-form-<?= $device_id ?>" hidden>
<form class="opennit-form" data-device-id="<?= $device_id ?>">
<h3 class="opennit-form-title">Leihgerät anfragen: <em><?= esc_html($device['title']) ?></em></h3>
<div class="opennit-accessory-note">
📦 Die Reservierung umfasst das Gerät inklusive des gesamten Zubehörs (Netzteil, Kabel, Tasche u. ä.).
</div>
<!-- Kalender-Widget (wird per AJAX befüllt) -->
<div class="opennit-calendar-wrap" id="opennit-cal-<?= $device_id ?>">
<div class="opennit-cal-loading">Verfügbarkeit wird geladen…</div>
</div>
<div class="opennit-form-row">
<div class="opennit-form-group">
<label for="opennit-start-<?= $device_id ?>">Von</label>
<input type="date" id="opennit-start-<?= $device_id ?>" name="planned_start"
min="<?= date('Y-m-d') ?>"
max="<?= date('Y-m-d', strtotime('+' . (int)($max_advance_days ?? 90) . ' days')) ?>"
required>
</div>
<div class="opennit-form-group">
<label for="opennit-end-<?= $device_id ?>">Bis</label>
<input type="date" id="opennit-end-<?= $device_id ?>" name="planned_end"
min="<?= date('Y-m-d') ?>"
max="<?= date('Y-m-d', strtotime('+' . (int)($max_advance_days ?? 90) . ' days')) ?>"
required>
</div>
</div>
<div class="opennit-form-group">
<label for="opennit-purpose-<?= $device_id ?>">Verwendungszweck</label>
<textarea id="opennit-purpose-<?= $device_id ?>" name="purpose" rows="2"
placeholder="Wofür benötigen Sie das Gerät?"></textarea>
</div>
<div class="opennit-form-actions">
<button type="submit" class="opennit-btn opennit-btn-primary">Anfrage senden</button>
<button type="button" class="opennit-btn opennit-btn-cancel" data-device-id="<?= $device_id ?>"
onclick="opennitCloseForm(this.dataset.deviceId)">Abbrechen</button>
</div>
<div class="opennit-form-feedback" id="opennit-feedback-<?= $device_id ?>" hidden></div>
</form>
</div>
<?php endif; ?>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div><!-- /opennit-devices-container -->
</div>
</div>
<?php /* JS ist in assets/js/loan-devices.js ausgelagert und wird per wp_enqueue_script eingebunden */ ?>