https://www.zumstein.ch/shop/assets/js/ui/session_expiry_notifier.js?v=835

1/**
2 *
3 *
4 * Autoren: Jose Fontanil & Reto Glanzmann & Roland Bruehwiler & Glarotech GmbH
5 *
6 * CVS-Version / Datum: $Id: session_expiry_notifier.js,v c474c8665 2025/08/07 13:09:01 gitlabv1 $ $Dl: #dl_eu#$
7 *
8 * -----------------------------------------------------------------------
9 * #lizenz#
10 * -----------------------------------------------------------------------
11 */
12
13/**
14 * BroadcastChannel fuer Window/Tab uebergreifender state/synchronisation
15 * @type {BroadcastChannel}
16 */
17const bc = new BroadcastChannel('pps_session_extended');
18// Direkt bei pageload eine broadcast message senden zum alle andere tabs zuruecksetzen
19bc.postMessage('extend_session');
20
21bc.onmessage = (ev) => {
22    if (ev.data === 'extend_session') {
23        on_extend_session();
24    }
25    else if (ev.data === 'leave_session') {
26        on_leave_session();
27    }
28    else if (ev.data === 'destroy_session') {
29        on_destroy_session();
30    }
31}
32
33const session_duration_ms = PepperShop.config.sessionTime * 1000;
34const warning_threshold   = Math.ceil(PepperShop.config.sessionTime * 0.1) * 1000;
35let session_start_time    = Date.now();
36let alert_interval        = null;
37let session_countdown_interval;
38let alert_open            = false;
39
40async function check_session() {
41    const elapsed = Date.now() - session_start_time;
42
43    const time_until_expiry = session_duration_ms - elapsed;
44
45    // falls session bald ablaueft meldung anzeigen
46    if (time_until_expiry <= warning_threshold && !swal.isVisible()) {
47        this.show_session_warning(time_until_expiry);
48        return;
49    }
50}
51
52function show_session_warning(remainingTime) {
53    const minutes = Math.ceil(remainingTime / 60000);
54    // Focus zwischenspeichern
55    PepperShop.UI.Accessibility.FocusRestore.register_focus();
56    alert_open    = true;
57    if (minutes <= 0) {
58        show_session_ended();
59        return;
60    }
61    Swal.fire({
62                  title            : '<div id="popup-title">' + PepperShop.locale['sitzung_laueft_bald_ab'] + '</div>',
63                  html             : '<div id="session-time-text" aria-live="polite">' + PepperShop.locale['ihre_sitzung_lauft_in_x_minuten_ab'].replace('%s', minutes) + '</div>',
64                  icon             : 'warning',
65                  showCancelButton : true,
66                  showDenyButton   : true,
67                  confirmButtonText: PepperShop.locale['sitzung_verlaengern'],
68                  denyButtonText   : PepperShop.locale['sitzung_beenden'],
69                  cancelButtonText : PepperShop.locale['schliessen'],
70                  focusConfirm     : true,
71                  allowEscapeKey   : true,
72                  allowEnterKey    : true,
73                  didOpen          : () => {
74                      // Fokus auf den confirm butten setzen
75                      $('.swal2-confirm').focus();
76                  }
77              }).then((result) => {
78        clearInterval(session_countdown_interval);
79        // Focus wiederherstellen
80        PepperShop.UI.Accessibility.FocusRestore.restore_focus();
81
82        if (result.isConfirmed) {
83            extend_session();
84            return;
85        }
86        else if (result.isDenied) {
87            destroy_session();
88            return;
89        }
90        // Session sterben lassen, interval loeschen
91        leave_session();
92    });
93    const delay = 500;
94    let minute_last_displayed;
95    session_countdown_interval = setInterval(() => {
96        remainingTime -= delay;
97        const minutes_left = Math.max(Math.ceil(remainingTime / 60000), 0);
98        if (minutes_left <= 0) {
99            show_session_ended();
100            clearInterval(session_countdown_interval);
101            return;
102        }
103        if (minute_last_displayed && minutes_left === minute_last_displayed) {
104            return;
105        }
106        minute_last_displayed = minutes_left;
107        $('#session-time-text').html(PepperShop.locale['ihre_sitzung_lauft_in_x_minuten_ab'].replace('%s', minutes_left));
108    }, delay);
109
110    function show_session_ended() {
111        Swal.fire(
112            {
113                title            : PepperShop.locale['sitzung_abgelaufen'],
114                html             : PepperShop.locale['ihre_sitzung_ist_abgelaufen'],
115                icon             : 'warning',
116                confirmButtonText : PepperShop.locale['schliessen'],
117                focusConfirm     : true,
118                allowEscapeKey   : true,
119                allowEnterKey    : true,
120                didOpen          : () => {
121                    // Fokus auf den confirm butten setzen
122                    $('.swal2-confirm').focus();
123                }
124            }
125        ).then(() => {
126                   // Focus wiederherstellen
127                   PepperShop.UI.Accessibility.FocusRestore.restore_focus();
128                   leave_session();
129               }
130        )
131    }
132    
133}
134
135async function extend_session() {
136    await fetch(PepperShop.config.shopWebrootUrl + 'session/extend', {method: 'POST'})
137    bc.postMessage('extend_session');
138    on_extend_session();
139}
140
141function on_extend_session() {
142    clearInterval(session_countdown_interval);

143    if (alert_open) {
144        toast(PepperShop.locale['sitzung_wurde_verlaengert'])
145    }
146    // Startpunk neu setzen
147    session_start_time = Date.now();
148}
149
150async function destroy_session() {
151    await fetch(PepperShop.config.shopWebrootUrl + 'session/destroy', {method: 'POST'})
152    bc.postMessage('destroy_session'); // Andere Tabes benachrichtigen
153    on_destroy_session();
154}
155
156function on_destroy_session() {
157    clearInterval(alert_interval);
158    clearInterval(session_countdown_interval);
159    if (alert_open) {
160        toast(PepperShop.locale['sitzung_wurde_beendet'])
161    }
162}
163
164async function leave_session() {
165    bc.postMessage('leave_session');// Andere Tabes benachrichtigen
166    on_leave_session();
167}
168
169function on_leave_session() {
170    clearInterval(alert_interval);
171    if (alert_open) {
172        swal.close();
173    }
174}
175
176function toast(message, icon = '') {
177    Swal.fire({
178                  position         : 'top-end',
179                  icon             : 'success',
180                  title            : '<p>' + message + '</p>',
181                  timer            : 6000,
182                  toast            : true,
183                  iconColor        : PepperShop.config.color,
184                  color            : PepperShop.config.color,
185                  background       : PepperShop.config.backgroundcolor,

186                  showConfirmButton: false,
187                  showCloseButton  : true,
188              });
189}
190
191document.addEventListener('DOMContentLoaded', () => {
192    alert_interval = setInterval(check_session, 5000);
193});