nodebb-plugin-niki-loyalty 1.2.9 → 1.3.1

package/templates/niki-kasa.tpl

@@ -0,0 +1,207 @@
+<script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/locale/tr.min.js"></script>
+
+<style>
+    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
+    body.niki-kasa-body { background-color: #000; margin: 0; padding: 0; overflow: hidden; }
+    #content { padding: 0 !important; margin: 0 !important; width: 100% !important; background: #000; }
+
+    .start-view { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(1200px 700px at 50% 10%, rgba(197,160,101,0.18), transparent 60%), linear-gradient(180deg, #0b0b0b, #111 55%, #0b0b0b); z-index: 100; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; }
+    .logo-box { width: 90px; height: 90px; border-radius: 50%; border: 3px solid #C5A065; display: flex; align-items: center; justify-content: center; margin-bottom: 30px; box-shadow: 0 0 30px rgba(197, 160, 101, 0.2); background: #000; }
+    .btn-start { background: #C5A065; color: #000; padding: 18px 40px; border-radius: 14px; font-weight: 700; border: none; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 16px; margin-bottom: 15px; width: 260px; justify-content: center; box-shadow: 0 5px 15px rgba(197, 160, 101, 0.3); }
+    .btn-hist { background: #222; color: #fff; padding: 18px 40px; border-radius: 14px; font-weight: 600; border: 1px solid #333; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 14px; width: 260px; justify-content: center; }
+    .btn-group { display: grid; gap: 12px; }
+
+    .camera-ui { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; display: none; z-index: 200; }
+    #reader { width: 100% !important; height: 100% !important; border: none !important; }
+    #reader video { object-fit: cover !important; width: 100% !important; height: 100% !important; }
+    .session-bar-bg { position: absolute; top:0; left:0; width:100%; height:6px; background:rgba(255,255,255,0.2); z-index: 220; }
+    .session-bar-fill { height:100%; background:#C5A065; width:100%; transition: width 1s linear; }
+    .top-ctrl { position: absolute; top: 20px; left: 0; width: 100%; padding: 0 20px; display: flex; justify-content: space-between; z-index: 230; box-sizing: border-box; }
+    .badge-live { background: rgba(0,0,0,0.6); color: #C5A065; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; }
+    .btn-x { background: rgba(255,255,255,0.2); width: 40px; height: 40px; border-radius: 50%; border: none; color: #fff; cursor: pointer; font-size: 18px; display:flex; align-items:center; justify-content:center; }
+    .scan-guide { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70vw; height: 70vw; max-width: 300px; max-height: 300px; box-shadow: 0 0 0 4000px rgba(0,0,0,0.85); border: 2px solid rgba(255,255,255,0.3); border-radius: 24px; pointer-events: none; z-index: 210; }
+    .laser { width: 100%; height: 2px; background: #C5A065; position: absolute; top: 50%; box-shadow: 0 0 15px #C5A065; animation: scanAnim 2s infinite ease-in-out; }
+    @keyframes scanAnim { 0% { top: 10%; opacity: 0; } 50% { opacity: 1; } 100% { top: 90%; opacity: 0; } }
+    .scan-hint { position: absolute; bottom: 60px; width: 100%; text-align: center; color: #fff; font-size: 13px; opacity: 0.8; z-index: 220; }
+
+    .res-modal { position: fixed; bottom: 0; left: 0; width: 100%; background: #1a1a1a; border-radius: 30px 30px 0 0; padding: 40px 20px; text-align: center; transform: translateY(110%); transition: transform 0.3s; z-index: 600; box-sizing: border-box; }
+    .res-modal.active { transform: translateY(0); }
+    .icon-big { font-size: 60px; margin-bottom: 15px; }
+    .res-title { color: #fff; font-size: 24px; font-weight: 700; margin-bottom: 10px; }
+    .res-msg { color: #aaa; font-size: 15px; margin-bottom: 30px; }
+    .btn-new { background: #fff; color: #000; width: 100%; padding: 18px; border-radius: 16px; font-size: 16px; font-weight: 700; border: none; cursor: pointer; }
+
+    .hist-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #111; z-index: 700; display: none; flex-direction: column; font-family: 'Poppins', sans-serif; }
+    .hist-head { padding: 20px; background: #1a1a1a; color: #fff; display: flex; justify-content: space-between; align-items: center; }
+    .hist-head-title { font-weight: 700; font-size: 18px; }
+    .hist-body { flex: 1; overflow-y: auto; padding: 10px; }
+    .hist-row { display: flex; align-items: center; padding: 15px; margin-bottom: 10px; border-radius: 12px; background: #1a1a1a; }
+    .hist-u-img { width: 50px; height: 50px; border-radius: 50%; margin-right: 15px; object-fit: cover; }
+    .hist-info { flex: 1; }
+    .hist-u-name { font-weight: 700; font-size: 15px; color: #fff; }
+    .hist-time { font-size: 12px; color: #888; display: block; margin-top: 3px; }
+    .hist-val { background: rgba(198,40,40,0.2); color: #ef5350; padding: 8px 14px; border-radius: 10px; font-weight: 700; }
+    .hist-empty { text-align: center; padding: 60px; color: #666; }
+</style>
+
+<div id="start-view" class="start-view">
+    <div class="logo-box"><i class="fa fa-qrcode" style="font-size:45px; color:#C5A065;"></i></div>
+    <h2 style="margin:0 0 5px; font-size:24px;">NIKI POS</h2>
+    <p style="color:#888; font-size:13px; margin:0 0 40px;">Yetkili Personel Terminali</p>
+    <div class="btn-group">
+        <button class="btn-start" onclick="initSession()"><i class="fa fa-camera"></i> OTURUMU BAŞLAT</button>
+        <button class="btn-hist" onclick="openHistory()"><i class="fa fa-history"></i> İŞLEM GEÇMİŞİ</button>
+    </div>
+</div>
+
+<div id="camera-ui" class="camera-ui">
+    <div class="session-bar-bg"><div class="session-bar-fill" id="timer-bar"></div></div>
+    <div class="top-ctrl">
+        <div class="badge-live">● CANLI</div>
+        <button class="btn-x" onclick="stopSession()"><i class="fa fa-times"></i></button>
+    </div>
+    <div id="reader"></div>
+    <div class="scan-guide"><div class="laser"></div></div>
+    <div class="scan-hint">QR Kodu karenin içine tutun</div>
+</div>
+
+<div id="res-view" class="res-modal">
+    <div id="res-icon" class="icon-big"></div>
+    <div id="res-title" class="res-title">...</div>
+    <div id="res-msg" class="res-msg">...</div>
+    <button class="btn-new" onclick="resumeScan()">YENİ İŞLEM</button>
+</div>
+
+<div id="hist-view" class="hist-modal">
+    <div class="hist-head">
+        <span class="hist-head-title"><i class="fa fa-history"></i> İŞLEM GEÇMİŞİ</span>
+        <button onclick="closeHistory()" style="background:none; border:none; color:#fff; font-size:20px; cursor:pointer;"><i class="fa fa-times"></i></button>
+    </div>
+    <ul id="hist-list" class="hist-body" style="list-style:none; margin:0; padding:10px;"></ul>
+</div>
+
+<script>
+    var html5QrCode;
+    var isProcessing = false;
+    var sessionTimer;
+    moment.locale('tr');
+
+    async function initSession() {
+        $('#start-view').fadeOut(200);
+        $('#camera-ui').fadeIn(300);
+        startTimer(600);
+        html5QrCode = new Html5Qrcode("reader");
+        try {
+            var devices = await Html5Qrcode.getCameras();
+            if (devices && devices.length) {
+                var cameraId = devices[devices.length - 1].id;
+                for (var i = 0; i < devices.length; i++) {
+                    var label = devices[i].label.toLowerCase();
+                    if (label.includes("back") || label.includes("arka") || label.includes("environment")) {
+                        cameraId = devices[i].id;
+                        break;
+                    }
+                }
+                await html5QrCode.start(cameraId, { fps: 15, aspectRatio: window.innerWidth / window.innerHeight }, onScanSuccess);
+            } else {
+                alert("Kamera bulunamadı!");
+                stopSession();
+            }
+        } catch (err) {
+            alert("Kamera Başlatılamadı: " + err);
+            stopSession();
+        }
+    }
+
+    function startTimer(duration) {
+        var timeLeft = duration;
+        $('#timer-bar').css('width', '100%');
+        clearInterval(sessionTimer);
+        sessionTimer = setInterval(function() {
+            timeLeft--;
+            var pct = (timeLeft / duration) * 100;
+            $('#timer-bar').css('width', pct + '%');
+            if(timeLeft <= 0) { alert("Oturum doldu."); stopSession(); }
+        }, 1000);
+    }
+
+    function onScanSuccess(decodedText) {
+        if (isProcessing) return;
+        isProcessing = true;
+        if(navigator.vibrate) navigator.vibrate(200);
+        html5QrCode.pause();
+
+        $.post('/api/niki-loyalty/scan-qr', { token: decodedText, _csrf: config.csrf_token }, function(res) {
+            if(res.success) {
+                $('#res-icon').html('<i class="fa fa-check-circle" style="color:#2E7D32"></i>');
+                $('#res-title').text('ÖDEME ALINDI');
+                $('#res-msg').html('<b>'+res.customer.username+'</b><br>'+res.cost+' Puan Tahsil Edildi.');
+            } else {
+                $('#res-icon').html('<i class="fa fa-times-circle" style="color:#C62828"></i>');
+                $('#res-title').text('HATA');
+                $('#res-msg').text(res.message);
+            }
+            $('#res-view').addClass('active');
+        }).fail(function() { alert("Sunucu Hatası!"); resumeScan(); });
+    }
+
+    function resumeScan() {
+        $('#res-view').removeClass('active');
+        setTimeout(function() { isProcessing = false; html5QrCode.resume(); }, 300);
+    }
+
+    function stopSession() {
+        clearInterval(sessionTimer);
+        if(html5QrCode) html5QrCode.stop().then(function() { html5QrCode.clear(); }).catch(function(){});
+        $('#camera-ui').hide();
+        $('#res-view').removeClass('active');
+        $('#start-view').fadeIn(200);
+        isProcessing = false;
+    }
+
+    function openHistory() {
+        $('#hist-view').fadeIn().css('display','flex');
+        var list = $('#hist-list');
+        list.html('<li style="text-align:center; padding:40px; color:#888;">Yükleniyor...</li>');
+        
+        $.get('/api/niki-loyalty/kasa-history', function(response) {
+            // Hem eski (array) hem yeni ({data:[]}) formatı destekle
+            var data = Array.isArray(response) ? response : (response.data || []);
+            
+            if(data.length === 0) {
+                list.html('<li class="hist-empty"><i class="fa fa-inbox" style="font-size:40px; display:block; margin-bottom:15px;"></i>İşlem bulunamadı</li>');
+                return;
+            }
+            
+            list.empty();
+            data.forEach(function(item) {
+                var html = '<li class="hist-row">' +
+                    '<img src="'+(item.picture || 'https://via.placeholder.com/50')+'" class="hist-u-img" onerror="this.src=\'https://via.placeholder.com/50\'">' +
+                    '<div class="hist-info">' +
+                        '<span class="hist-u-name">'+(item.cust || 'Bilinmeyen')+'</span>' +
+                        '<span class="hist-time">'+moment(item.ts).fromNow()+'</span>' +
+                    '</div>' +
+                    '<div class="hist-val">-'+(item.amt || 250)+'</div>' +
+                '</li>';
+                list.append(html);
+            });
+        }).fail(function() {
+            list.html('<li class="hist-empty">Bağlantı hatası</li>');
+        });
+    }
+
+    function closeHistory() {
+        $('#hist-view').fadeOut();
+    }
+
+    $(document).ready(function() {
+        if (!app.user.isAdmin && !app.user.isGlobalMod) {
+            $('.start-view').remove(); 
+            $('body').html('<div style="text-align:center; padding:50px; color:#fff;"><h3>⛔ Yetkisiz Giriş</h3></div>');
+        }
+    });
+    
+    $(window).on('action:ajaxify.start', function() { stopSession(); closeHistory(); });
+</script>