OpenNIT
Quelltext des aktuellen Standes
Fassung 1.1.1
ticket-form.php
13 KB<?php if (!defined('ABSPATH')) exit;
// Initialen für den Einsender-Avatar ableiten
$initials = '';
foreach (array_slice(preg_split('/\s+/', trim((string)$user_name)) ?: [], 0, 2) as $p) {
if ($p !== '') $initials .= mb_substr($p, 0, 1);
}
$initials = mb_strtoupper($initials !== '' ? $initials : mb_substr((string)$user_email, 0, 1));
?>
<div class="opennit-wrap" id="opennit-ticket-wrap"
data-ajax-url="<?= esc_attr(admin_url('admin-ajax.php')) ?>"
data-success-text="<?= esc_attr($text_success) ?>"
data-submit-label="<?= esc_attr($text_submit_label) ?>"
data-preselect-asset="<?= esc_attr($preselect_asset_id ?: '') ?>">
<div class="opennit-card opennit-ticket-card">
<!-- Kopfbereich mit Verlaufsband -->
<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="M3 8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2 2 2 0 0 0 0 4 2 2 0 0 1-2 2H5a2 2 0 0 1-2-2 2 2 0 0 0 0-4Z"/>
<path d="M13 6v2M13 16v2"/>
</svg>
</div>
<div class="opennit-card__head-text">
<h2 class="opennit-card__title"><?= esc_html($text_form_title) ?></h2>
<p class="opennit-card__subtitle">Schildern Sie Ihr Anliegen – das IT-Team kümmert sich zeitnah darum.</p>
</div>
</div>
<?php if (empty($locations) || empty($categories)): ?>
<div class="opennit-card__body">
<div class="opennit-notice opennit-notice-info">
Das Ticketformular ist noch nicht vollständig konfiguriert. Bitte wenden Sie sich direkt an das IT-Team.
</div>
<?php if (!empty($api_error) && current_user_can('manage_options')): ?>
<div class="opennit-notice opennit-notice-error" style="margin-top:8px;font-size:13px;">
<strong>Admin-Hinweis:</strong> <?= esc_html($api_error) ?>
</div>
<?php endif; ?>
</div>
<?php else: ?>
<!-- Erfolgs-Bestätigung (erscheint nach erfolgreichem Absenden) -->
<div id="opennit-ticket-success-panel" style="display:none;">
<div class="opennit-card__body">
<div class="opennit-success-panel">
<div class="opennit-success-panel__icon">✓</div>
<div class="opennit-success-panel__body">
<div class="opennit-success-panel__title">Ticket erfolgreich erstellt!</div>
<div class="opennit-success-panel__text" id="opennit-ticket-success-msg"></div>
</div>
</div>
<button type="button" id="opennit-ticket-new-btn"
class="opennit-btn-submit opennit-btn-submit--ghost"
style="margin-top:1rem;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
Weiteres Ticket erstellen
</button>
</div>
</div>
<form id="opennit-ticket-form" class="opennit-ticket-form" novalidate>
<div class="opennit-card__body">
<input type="hidden" name="nonce" value="<?= esc_attr($nonce) ?>">
<input type="hidden" name="from_email" value="<?= esc_attr($user_email) ?>">
<input type="hidden" name="from_name" value="<?= esc_attr($user_name) ?>">
<div id="opennit-ticket-error" class="opennit-notice opennit-notice-error" style="display:none;margin-bottom:1rem;"></div>
<!-- Einsender (schreibgeschützt, nur Info) -->
<div class="opennit-sender-chip">
<span class="opennit-sender-avatar"><?= esc_html($initials) ?></span>
<span class="opennit-sender-meta">
<span class="opennit-sender-label">Einsender</span>
<span class="opennit-sender-name"><?= esc_html($user_name) ?> · <?= esc_html($user_email) ?></span>
</span>
</div>
<!-- Kategorie + Standort nebeneinander -->
<div class="opennit-field-grid">
<div class="opennit-form-row">
<label class="opennit-form-label" for="opennit-category-search">
<svg class="opennit-label-icon" 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"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>
Kategorie <span class="opennit-required">*</span>
</label>
<div class="opennit-combo" id="opennit-category-combo">
<input type="text" id="opennit-category-search"
class="opennit-form-control opennit-combo-search"
placeholder="Kategorie wählen oder suchen …" autocomplete="off">
<div class="opennit-combo-dropdown" style="display:none;">
<?php foreach ($categories as $cat): ?>
<div class="opennit-combo-option" data-value="<?= esc_attr($cat['id']) ?>"><?= esc_html($cat['name']) ?></div>
<?php endforeach; ?>
</div>
<input type="hidden" name="category_id" id="opennit-category" class="opennit-combo-hidden">
</div>
</div>
<div class="opennit-form-row">
<label class="opennit-form-label" for="opennit-location-search">
<svg class="opennit-label-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
Standort <span class="opennit-required">*</span>
</label>
<div class="opennit-combo" id="opennit-location-combo">
<input type="text" id="opennit-location-search"
class="opennit-form-control opennit-combo-search"
placeholder="Standort wählen oder suchen …" autocomplete="off">
<div class="opennit-combo-dropdown" style="display:none;">
<?php foreach ($locations as $loc): ?>
<div class="opennit-combo-option" data-value="<?= esc_attr($loc['id']) ?>"><?= esc_html($loc['name']) ?></div>
<?php endforeach; ?>
</div>
<input type="hidden" name="location_id" id="opennit-location" class="opennit-combo-hidden">
</div>
</div>
</div>
<!-- Betreff (Pflicht) -->
<div class="opennit-form-row">
<label class="opennit-form-label" for="opennit-subject">
<svg class="opennit-label-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/></svg>
Betreff <span class="opennit-required">*</span>
</label>
<input type="text" name="subject" id="opennit-subject"
class="opennit-form-control"
placeholder="<?= esc_attr($text_subject_ph) ?>"
maxlength="255" required>
</div>
<!-- Nachricht (Pflicht) -->
<div class="opennit-form-row">
<label class="opennit-form-label" for="opennit-description">
<svg class="opennit-label-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
Nachricht <span class="opennit-required">*</span>
</label>
<textarea name="description" id="opennit-description"
class="opennit-form-control"
rows="5"
placeholder="<?= esc_attr($text_desc_ph) ?>"
required></textarea>
</div>
<?php if (!empty($my_assets)): ?>
<!-- Betroffenes Gerät (optional) -->
<div class="opennit-form-row">
<label class="opennit-form-label" for="opennit-asset-search">
<svg class="opennit-label-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="1" x2="9" y2="4"/><line x1="15" y1="1" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="23"/><line x1="15" y1="20" x2="15" y2="23"/><line x1="20" y1="9" x2="23" y2="9"/><line x1="20" y1="14" x2="23" y2="14"/><line x1="1" y1="9" x2="4" y2="9"/><line x1="1" y1="14" x2="4" y2="14"/></svg>
Betroffenes Gerät <span class="opennit-optional">optional</span>
</label>
<div class="opennit-combo" id="opennit-asset-combo">
<input type="text" id="opennit-asset-search"
class="opennit-form-control opennit-combo-search"
placeholder="Gerät wählen oder suchen …" autocomplete="off">
<div class="opennit-combo-dropdown" style="display:none;">
<div class="opennit-combo-option opennit-combo-option-none" data-value="">– Kein Gerät auswählen –</div>
<?php foreach ($my_assets as $asset):
$label = $asset['inventory_number'];
$parts = array_filter([
$asset['type'] ?? '',
$asset['manufacturer'] ?? '',
]);
if ($parts) $label .= ' (' . implode(' · ', $parts) . ')';
?>
<div class="opennit-combo-option" data-value="<?= esc_attr($asset['id']) ?>"><?= esc_html($label) ?></div>
<?php endforeach; ?>
</div>
<input type="hidden" name="asset_id" id="opennit-asset" class="opennit-combo-hidden">
</div>
<p class="opennit-field-hint">Wählen Sie das Gerät aus, falls der Fehler damit zusammenhängt.</p>
</div>
<?php endif; ?>
<!-- Dateianhang (optional) -->
<div class="opennit-form-row">
<label class="opennit-form-label" for="opennit-attachment">
<svg class="opennit-label-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
Anhang <span class="opennit-optional">optional</span>
</label>
<label class="opennit-dropzone" for="opennit-attachment">
<svg class="opennit-dropzone-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
<span class="opennit-dropzone-text"><strong>Datei auswählen</strong></span>
<input type="file" id="opennit-attachment"
class="opennit-dropzone-input"
accept="image/*,.pdf,.txt,.doc,.docx">
</label>
<p class="opennit-field-hint"><?= esc_html($text_attachment_hint) ?></p>
<div id="opennit-attachment-preview" class="opennit-attachment-preview" style="display:none;"></div>
</div>
</div>
<div class="opennit-card__footer">
<button type="submit" id="opennit-ticket-submit" class="opennit-btn-submit">
<?= esc_html($text_submit_label) ?>
</button>
</div>
</form>
<?php endif; ?>
</div>
</div>
<?php /* JS ist in assets/js/ticket-form.js ausgelagert und wird per wp_enqueue_script eingebunden */ ?>