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

<?php $this->layout('layouts/admin', [
    'page_title'         => 'Vorlage des Leistungsnachweises',
    'current_admin_page' => 'tickets',
]); ?>
<?php
/**
 * Gestaltung eines Leistungsnachweises.
 * Erwartete Variablen: $template, $placeholders.
 */
$key = (string)($template['template_key'] ?? '');
?>

<div class="settings-page">

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

    <form action="/admin/tickets/service-reports/template/<?= urlencode($key) ?>" method="POST">
        <input type="hidden" name="_csrf" value="<?= $this->csrf() ?>">

        <section class="settings-card">
            <div class="settings-card-header">
                <span class="settings-card-icon">&#128221;</span>
                <div>
                    <h2><?= $this->e((string)($template['name'] ?? $key)) ?></h2>
                    <p class="settings-card-desc">
                        <?= $this->t('Aufbau des Dokuments. <code>{{platzhalter}}</code> werden beim Erstellen ersetzt; <code>{{entries_table}}</code> setzt die Tabelle der erfassten Zeiten, <code>{{signature_block}}</code> den Unterschriftenbereich (bei einem Nachweis zur Information bleibt er leer).') ?>
                    </p>
                </div>
            </div>
            <div class="settings-card-body">

                <div style="margin-bottom:.75rem;">
                    <span style="font-size:.78rem;font-weight:700;color:var(--gray-500);margin-right:.4rem;"><?= $this->te('Einfügen:') ?></span>
                    <?php foreach (($placeholders ?? []) as $p): ?>
                    <button type="button" class="var-chip" onclick="insertPlaceholder('{{<?= $this->e($p) ?>}}')"
                            title="<?= $this->te('In Editor einfügen') ?>">{{<?= $this->e($p) ?>}}</button>
                    <?php endforeach; ?>
                </div>

                <label class="visually-hidden" for="body_html"><?= $this->te('Aufbau des Dokuments') ?></label>
                <textarea id="body_html" name="body_html" style="width:100%;min-height:350px;"><?= $this->e((string)($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/tickets/service-reports" class="btn btn-secondary"><?= $this->te('Abbrechen') ?></a>
        </div>
    </form>

</div>

<style>
.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._srEditor = new OpenNIT.WysiwygEditor(wrap, {
        uploadUrl: '/upload/image',
        csrfToken: document.querySelector('input[name="_csrf"]')?.value || ''
    });
}());

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