OpenNIT

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

<?php $this->layout('layouts/admin', [
    'page_title'         => 'PDF-Vorlage bearbeiten',
    'current_admin_page' => 'notifications',
]); ?>

<?php $key = $template['template_key'] ?? ''; ?>

<div class="settings-page">

    <div class="page-back-nav">
        <a href="/admin/assets/pdf-templates" class="btn btn-sm btn-secondary"><?= $this->te('&larr; Zurück zur Übersicht') ?></a>
    </div>

    <form action="/admin/assets/pdf-templates/<?= urlencode($key) ?>/update" method="POST">
        <input type="hidden" name="_csrf" value="<?= $this->csrf() ?>">

        <section class="settings-card">
            <div class="settings-card-header">
                <span class="settings-card-icon"><?= $key === 'handout' ? '&#128221;' : '&#8617;' ?></span>
                <div>
                    <h2><?= $this->e($template['name'] ?? $key) ?></h2>
                    <p class="settings-card-desc">
                        <?= $this->t('WYSIWYG-Editor für das PDF-Layout. Nutzen Sie <code>{{platzhalter}}</code> für dynamische Werte (z.B. <code>{{person_name}}</code>, <code>{{asset_inventory_number}}</code>{zusatz}).', ['zusatz' => $key === 'handout' ? ', <code>{{signature_image}}</code>' : '']) ?>
                    </p>
                </div>
            </div>
            <div class="settings-card-body">

                <!-- Platzhalter-Chips -->
                <div style="margin-bottom:.75rem;">
                    <span style="font-size:.78rem;font-weight:700;color:#6b7280;margin-right:.4rem;"><?= $this->te('Einfügen:') ?></span>
                    <?php
                    if ($key === 'handout') {
                        $placeholders = ['person_name','person_email','asset_inventory_number','asset_serial_number','asset_manufacturer','asset_model','asset_category','handout_date','signature_image','terms'];
                    } elseif ($key === 'loan_receipt') {
                        $placeholders = ['lending_id','status','borrower_name','borrower_email','borrower_phone','purpose','planned_start','planned_end','actual_start','actual_end','devices_table','accessories_section','notes_section','signature_block','terms'];
                    } elseif ($key === 'loan_return_receipt') {
                        $placeholders = ['lending_id','status','borrower_name','borrower_email','borrower_phone','purpose','planned_start','planned_end','handout_date','return_date','returned_by','devices_table','accessories_return_table','return_notes_section'];
                    } else {
                        $placeholders = ['person_name','person_email','asset_inventory_number','asset_serial_number','asset_manufacturer','asset_model','asset_category','return_date','notes_section'];
                    }
                    foreach ($placeholders as $p): ?>
                    <button type="button" class="var-chip" onclick="insertPlaceholder('{{<?= $p ?>}}')"
                            title="<?= $this->te('In Editor einfügen') ?>">{{<?= $p ?>}}</button>
                    <?php endforeach; ?>
                </div>

                <!-- TinyMCE Editor -->
                <textarea id="body_html" name="body_html" style="width:100%;min-height:350px;"><?= htmlspecialchars($template['body_html'] ?? '') ?></textarea>

            </div>
        </section>

        <div class="form-actions-bar" style="margin-top:1rem;">
            <button type="submit" class="btn btn-primary"><?= $this->te('Vorlage speichern') ?></button>
            <a href="/admin/assets/pdf-templates" class="btn btn-secondary"><?= $this->te('Abbrechen') ?></a>
            <a href="/inventory/handovers/preview/<?= urlencode($key) ?>" target="_blank" rel="noopener"
               class="btn btn-default" style="margin-left:auto;"><?= $this->te('&#128196; Vorschau-PDF') ?></a>
        </div>
    </form>

</div>

<style>
.var-chips { display:flex; flex-wrap:wrap; gap:.375rem; }
.var-chip  { display:inline-block; padding:.25rem .55rem; background:var(--blue-50); color:var(--blue-600);
             border:1px solid var(--blue-200); border-radius:.375rem; font-size:.72rem;
             font-family:monospace; cursor:pointer; transition:background .12s; }
.var-chip:hover { background:var(--blue-100); }
</style>

<?php if (TINYMCE_INSTALLED): ?>
<script src="<?= $this->asset('/assets/tinymce/tinymce.min.js') ?>"></script>
<script>
tinymce.init({
    selector: '#body_html',
    height: 480,
    menubar: false,
    plugins: 'lists table link code',
    toolbar: 'undo redo | bold italic underline | forecolor backcolor | '
           + 'alignleft aligncenter alignright | bullist numlist | '
           + 'table | link | code',
    content_style: 'body { font-family: Arial, sans-serif; font-size: 11pt; line-height: 1.5; color: #1a1a1a; }',
    language: 'de',
    license_key: 'gpl',
    setup: function (editor) {
        editor.on('change', function () { editor.save(); });
    }
});

function insertPlaceholder(text) {
    if (typeof tinymce !== 'undefined' && tinymce.activeEditor) {
        tinymce.activeEditor.execCommand('mceInsertContent', false, text);
    }
}
</script>
<?php else: ?>
<link rel="stylesheet" href="<?= $this->asset('/assets/css/wysiwyg.css') ?>">
<script src="<?= $this->asset('/assets/js/wysiwyg.js') ?>"></script>
<script>
(function() {
    var ta   = document.getElementById('body_html');
    var wrap = document.createElement('div');
    wrap.className = 'wysiwyg-editor-container';
    ta.parentNode.insertBefore(wrap, ta);
    wrap.appendChild(ta);
    window._fallbackEditor = new OpenNIT.WysiwygEditor(wrap, {
        uploadUrl: '/upload/image',
        csrfToken: document.querySelector('input[name="_csrf"]')?.value || ''
    });
}());

function insertPlaceholder(text) {
    if (window._fallbackEditor) {
        window._fallbackEditor.focus();
        document.execCommand('insertHTML', false, text);
    }
}
</script>
<?php endif; ?>