nodebb-plugin-niki-loyalty 1.3.1 → 1.3.3

package/static/widgets/niki-kasa-simple.html

@@ -1,623 +0,0 @@
-<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;
-    }
-
-    .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;
-        border-bottom: 1px solid #333;
-    }
-
-    .hist-head-title {
-        font-weight: 700;
-        font-size: 18px;
-    }
-
-    .hist-body {
-        flex: 1;
-        overflow-y: auto;
-        padding: 15px;
-    }
-
-    .hist-row {
-        display: flex;
-        align-items: center;
-        padding: 15px;
-        margin-bottom: 10px;
-        border-radius: 12px;
-        background: #1a1a1a;
-        border: 1px solid #2a2a2a;
-    }
-
-    .hist-u-img {
-        width: 50px;
-        height: 50px;
-        border-radius: 50%;
-        margin-right: 15px;
-        object-fit: cover;
-        background: #333;
-    }
-
-    .hist-info {
-        flex: 1;
-    }
-
-    .hist-u-name {
-        display: block;
-        font-weight: 700;
-        font-size: 15px;
-        color: #fff;
-        margin-bottom: 4px;
-    }
-
-    .hist-time {
-        font-size: 12px;
-        color: #888;
-    }
-
-    .hist-val {
-        background: rgba(198, 40, 40, 0.2);
-        color: #ef5350;
-        padding: 8px 14px;
-        border-radius: 10px;
-        font-size: 15px;
-        font-weight: 700;
-    }
-
-    .hist-empty {
-        text-align: center;
-        padding: 60px 20px;
-        color: #666;
-    }
-
-    .hist-empty i {
-        font-size: 50px;
-        margin-bottom: 15px;
-        display: block;
-    }
-
-    .hist-loading {
-        text-align: center;
-        padding: 50px;
-        color: #888;
-    }
-
-    .hist-loading .spinner {
-        display: inline-block;
-        width: 40px;
-        height: 40px;
-        border: 4px solid #333;
-        border-top-color: #C5A065;
-        border-radius: 50%;
-        animation: spin 1s linear infinite;
-    }
-
-    @keyframes spin {
-        to {
-            transform: rotate(360deg);
-        }
-    }
-
-    .btn-group {
-        display: grid;
-        gap: 12px;
-    }
-</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" id="btn-start-session"><i class="fa fa-camera"></i> OTURUMU BAŞLAT</button>
-        <button class="btn-hist" id="btn-open-history"><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" id="btn-stop-session"><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" id="btn-resume-scan">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 id="btn-close-history"
-            style="background:none; border:none; color:#fff; font-size:22px; cursor:pointer;"><i
-                class="fa fa-times"></i></button>
-    </div>
-    <div class="hist-body" id="hist-list-container">
-        <!-- Liste buraya yüklenecek -->
-    </div>
-</div>
-
-<script>
-    (function () {
-        'use strict';
-
-        var html5QrCode = null;
-        var isProcessing = false;
-        var sessionTimer = null;
-
-        moment.locale('tr');
-
-        // DOM hazır olunca event listener'ları bağla
-        $(document).ready(function () {
-            console.log('[NIKI] Document ready, binding events...');
-
-            // Yetki kontrolü
-            if (typeof app !== 'undefined' && !app.user.isAdmin && !app.user.isGlobalMod) {
-                $('#start-view').html('<div style="text-align:center;padding:50px;"><h3>⛔ Yetkisiz Giriş</h3></div>');
-                return;
-            }
-
-            // Event Listeners
-            $('#btn-start-session').on('click', initSession);
-            $('#btn-stop-session').on('click', stopSession);
-            $('#btn-resume-scan').on('click', resumeScan);
-            $('#btn-open-history').on('click', openHistory);
-            $('#btn-close-history').on('click', closeHistory);
-
-            console.log('[NIKI] Events bound successfully');
-        });
-
-        function initSession() {
-            console.log('[NIKI] Starting session...');
-            $('#start-view').fadeOut(200);
-            $('#camera-ui').fadeIn(300);
-            startTimer(600);
-
-            html5QrCode = new Html5Qrcode("reader");
-
-            Html5Qrcode.getCameras().then(function (devices) {
-                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.indexOf('back') > -1 || label.indexOf('environment') > -1) {
-                            cameraId = devices[i].id;
-                            break;
-                        }
-                    }
-                    html5QrCode.start(cameraId, { fps: 15, aspectRatio: window.innerWidth / window.innerHeight }, onScanSuccess);
-                } else {
-                    alert('Kamera bulunamadı!');
-                    stopSession();
-                }
-            }).catch(function (err) {
-                alert('Kamera Hatası: ' + err);
-                stopSession();
-            });
-        }
-
-        function startTimer(duration) {
-            var timeLeft = duration;
-            $('#timer-bar').css('width', '100%');
-            clearInterval(sessionTimer);
-            sessionTimer = setInterval(function () {
-                timeLeft--;
-                $('#timer-bar').css('width', (timeLeft / duration * 100) + '%');
-                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 || 'Bilinmeyen hata');
-                }
-                $('#res-view').addClass('active');
-            }).fail(function () {
-                alert('Sunucu Hatası!');
-                resumeScan();
-            });
-        }
-
-        function resumeScan() {
-            $('#res-view').removeClass('active');
-            setTimeout(function () {
-                isProcessing = false;
-                if (html5QrCode) 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;
-        }
-
-        // =============================
-        // İŞLEM GEÇMİŞİ - ÇALIŞAN VERSİYON
-        // =============================
-
-        function openHistory() {
-            console.log('[NIKI] Opening history...');
-            $('#hist-view').css('display', 'flex');
-            loadHistory();
-        }
-
-        function closeHistory() {
-            $('#hist-view').hide();
-        }
-
-        function loadHistory() {
-            var $container = $('#hist-list-container');
-
-            // Loading göster
-            $container.html('<div class="hist-loading"><div class="spinner"></div><br>Yükleniyor...</div>');
-
-            console.log('[NIKI] Fetching history...');
-
-            $.ajax({
-                url: '/api/niki-loyalty/kasa-history',
-                method: 'GET',
-                dataType: 'json',
-                success: function (response) {
-                    console.log('[NIKI] API response received:', response);
-
-                    var items = [];
-
-                    // Hem eski format (array) hem yeni format ({data:[]}) destekle
-                    if (Array.isArray(response)) {
-                        items = response;
-                    } else if (response && response.data && Array.isArray(response.data)) {
-                        items = response.data;
-                    }
-
-                    console.log('[NIKI] Items to render:', items.length);
-
-                    if (items.length === 0) {
-                        $container.html('<div class="hist-empty"><i class="fa fa-inbox"></i>İşlem bulunamadı</div>');
-                        return;
-                    }
-
-                    // Listeyi oluştur
-                    var html = '';
-                    for (var i = 0; i < items.length; i++) {
-                        var item = items[i];
-                        var timeAgo = moment(item.ts).fromNow();
-                        var customerName = item.cust || 'Bilinmeyen';
-                        var amount = item.amt || 250;
-                        var picture = item.picture || 'https://via.placeholder.com/50';
-
-                        html += '<div class="hist-row">' +
-                            '<img src="' + picture + '" class="hist-u-img" onerror="this.src=\'https://via.placeholder.com/50\'">' +
-                            '<div class="hist-info">' +
-                            '<span class="hist-u-name">' + customerName + '</span>' +
-                            '<span class="hist-time">' + timeAgo + '</span>' +
-                            '</div>' +
-                            '<div class="hist-val">-' + amount + '</div>' +
-                            '</div>';
-                    }
-
-                    $container.html(html);
-                    console.log('[NIKI] History rendered successfully!');
-                },
-                error: function (xhr, status, error) {
-                    console.error('[NIKI] API error:', error);
-                    $container.html('<div class="hist-empty"><i class="fa fa-exclamation-circle"></i>Yükleme hatası</div>');
-                }
-            });
-        }
-
-        // Sayfa değişince temizle
-        $(window).on('action:ajaxify.start', function () {
-            stopSession();
-            closeHistory();
-        });
-
-    })();
-</script>