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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142

<?php $this->layout('layouts/portal', [
    'page_title' => $page_title ?? 'Leihgerät',
    'ssp_active' => 'loans',
]);
$du = ($portal_address ?? 'du') !== 'sie';

$maxAdvance  = (int)($rules['max_advance_days']  ?? 90);
$maxDuration = (int)($rules['max_duration_days'] ?? 14);
$needsOk     = !empty($rules['require_approval']);

$today   = date('Y-m-d');
$maxDate = date('Y-m-d', strtotime('+' . $maxAdvance . ' days'));

$meta = array_filter([
    trim((string)($device['type'] ?? '')) !== '' ? (string)$device['type'] : null,
    !empty($device['serial_number']) ? 'S/N ' . (string)$device['serial_number'] : null,
]);
?>
<div class="ssp-hello">
    <h1><?= $this->e($device['title']) ?></h1>
    <?php if ($meta): ?>
    <p><?= $this->e(implode(' · ', $meta)) ?></p>
    <?php endif; ?>
</div>

<p><a href="/portal/leihgeraete" class="ssp-back"><i class="fas fa-arrow-left" aria-hidden="true"></i> <?= $this->te('Zurück zur Übersicht') ?></a></p>

<?php if (!empty($device['description'])): ?>
<div class="ssp-card">
    <p style="margin:0;white-space:pre-wrap;"><?= $this->e($device['description']) ?></p>
</div>
<?php endif; ?>

<div class="ssp-card">
    <h2 class="ssp-card-title">
        <i class="fas fa-calendar-check" aria-hidden="true"></i>
        <?= $needsOk ? 'Gerät anfragen' : 'Gerät reservieren' ?>
    </h2>
    <p class="ssp-hint" style="margin-top:0;">
        <?= $needsOk
            ? ($du
                ? $this->te('Deine Anfrage wird von der IT geprüft und freigegeben.')
                : $this->te('Ihre Anfrage wird von der IT geprüft und freigegeben.'))
            : ($du
                ? $this->te('Das Gerät wird sofort für dich reserviert.')
                : $this->te('Das Gerät wird sofort für Sie reserviert.')) ?>
        Buchbar bis <?= date('d.m.Y', strtotime($maxDate)) ?>, maximal <?= $maxDuration ?> Tage am Stück.
    </p>

    <form method="POST" action="/portal/leihgeraete/<?= (int)$device['id'] ?>/anfragen" class="ssp-form">
        <input type="hidden" name="_csrf" value="<?= $this->csrf() ?>">

        <div class="ssp-form-row">
            <label for="planned_start"><?= $du ? 'Von' : 'Von' ?> <span class="text-danger">*</span></label>
            <input type="date" id="planned_start" name="planned_start" required
                   min="<?= $today ?>" max="<?= $maxDate ?>" value="<?= $today ?>">
        </div>

        <div class="ssp-form-row">
            <label for="planned_end"><?= $du ? 'Bis' : 'Bis' ?> <span class="text-danger">*</span></label>
            <input type="date" id="planned_end" name="planned_end" required
                   min="<?= $today ?>" max="<?= $maxDate ?>" value="<?= $today ?>">
        </div>

        <div class="ssp-form-row">
            <label for="purpose"><?= $du ? $this->te('Wofür brauchst du das Gerät?') : $this->te('Wofür benötigen Sie das Gerät?') ?></label>
            <textarea id="purpose" name="purpose" rows="3" maxlength="500"
                      placeholder="<?= $du ? $this->te('z. B. Messe, Homeoffice, Projekt …') : $this->te('z. B. Messe, Homeoffice, Projekt …') ?>"></textarea>
        </div>

        <div class="ssp-form-actions">
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-calendar-check" aria-hidden="true"></i>
                <?= $needsOk ? 'Anfrage senden' : 'Jetzt reservieren' ?>
            </button>
        </div>
    </form>
</div>

<div class="ssp-card">
    <h2 class="ssp-card-title"><i class="fas fa-clock" aria-hidden="true"></i> <?= $this->te('Belegte Zeiträume') ?></h2>
    <?php if (empty($slots)): ?>
        <p style="margin:0;color:var(--gray-500);"><?= $this->te('Aktuell ist das Gerät durchgehend frei.') ?></p>
    <?php else: ?>
        <ul class="ssp-slots">
            <?php foreach ($slots as $s): ?>
            <li>
                <i class="fas fa-lock" aria-hidden="true"></i>
                <?= date('d.m.Y', strtotime((string)$s['planned_start'])) ?>
                &ndash; <?= date('d.m.Y', strtotime((string)$s['planned_end'])) ?>
            </li>
            <?php endforeach; ?>
        </ul>
        <p class="ssp-hint" style="margin-bottom:0;">
            <?= $du
                ? $this->te('Bitte wähle einen Zeitraum außerhalb dieser Termine.')
                : $this->te('Bitte wählen Sie einen Zeitraum außerhalb dieser Termine.') ?>
        </p>
    <?php endif; ?>
</div>

<script>
(function () {
    // Enddatum folgt dem Startdatum und respektiert die maximale Ausleihdauer.
    var start = document.getElementById('planned_start');
    var end   = document.getElementById('planned_end');
    var maxDays = <?= $maxDuration ?>;
    if (!start || !end) return;

    function clampEnd() {
        if (!start.value) return;
        if (!end.value || end.value < start.value) end.value = start.value;
        end.min = start.value;
        var limit = new Date(start.value + 'T00:00:00');
        limit.setDate(limit.getDate() + maxDays);
        var iso = limit.toISOString().slice(0, 10);
        end.max = iso < end.getAttribute('data-hardmax') ? iso : end.getAttribute('data-hardmax');
        if (end.value > end.max) end.value = end.max;
    }
    end.setAttribute('data-hardmax', end.max);
    start.addEventListener('change', clampEnd);
    clampEnd();
})();
</script>

<style>
.ssp-card { background:var(--color-bg); border:1px solid var(--gray-200); border-radius:.5rem; padding:1rem; margin-bottom:1rem; }
.ssp-card-title { font-size:1rem; font-weight:700; margin:0 0 .5rem; display:flex; align-items:center; gap:.4rem; }
.ssp-back { text-decoration:none; font-size:.85rem; }
.ssp-form-row { display:flex; flex-direction:column; gap:.25rem; margin-bottom:.75rem; }
.ssp-form-row label { font-size:.8rem; font-weight:600; color:var(--gray-600); }
.ssp-form-row input, .ssp-form-row textarea {
    padding:.5rem .6rem; border:1px solid var(--gray-300); border-radius:.4rem;
    font-size:.9rem; font-family:inherit; background:var(--color-bg); color:var(--gray-900);
}
.ssp-form-row textarea { resize:vertical; }
.ssp-form-actions { margin-top:.5rem; }
.ssp-slots { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.35rem; }
.ssp-slots li { font-size:.88rem; color:var(--gray-700); display:flex; align-items:center; gap:.45rem; }
.ssp-slots i { color:var(--gray-400); font-size:.75rem; }
.ssp-hint { font-size:.8rem; color:var(--gray-500); }
</style>