Sindbad~EG File Manager

{% extends "scan_signup/signup_layout.html" %}
{% block title %}
Scan to Signup
{% endblock %}  
{% block head %}
{% endblock %}  
{% block style %}
 <style>
    #video {
        width: 100%;
        max-width: 500px;
        height: 300px; /* Set your desired height here */
        object-fit: cover; /* This ensures the video covers the entire area */
    }
    #canvas {
        display: none;
    }


</style>
{% endblock %}  
{% block content %}
<input type="text" class="form-control" name="conf_id" id="conf_id" value="{{conf.conf_id}}" hidden />
<input type="text" class="form-control" name="conf_key" id="conf_key" value="{{conf.conf_key}}" hidden />
<div class="container-fluid mt-1">
    <div class="row">
        <div class="col-lg-3 col-md-3 col-offset-md-3 col-sm-12"></div>
        <div class="col-lg-6 col-md-6 col-offset-md-3 col-sm-12">
            <div class="row" id="controls">
                <div class="col-lg-12">
                    <button id="start" class="btn btn-primary block" style="width: 100%; height: 35px; padding: 3; font-size: 17px;"><i class="fa-solid fa-camera"></i>&nbsp; Start Scanning</button>
                    <button id="stop" class="btn btn-danger block" style="display: none; width: 100%; height: 35px; padding: 3; font-size: 17px;"><i class="fa-solid fa-camera"></i>&nbsp; Stop Scanning</button>
                </div>
                <div class="col-lg-12 mt-3">
                    <label id="search_label">Search delegate no / reference no</label><br />
                    <div class="input-group mb-3">
                        <div class="input-group-text">
                            <label class="toggleSwitch nolabel" onclick="">
                                <input type="checkbox" id="choose_search_type" name="choose_search_type" checked />
                                <span>
                                    <span class="text-right"><i class="fa-solid fa-at text-right"></i></span>
                                    <span class="text-left"><i class="fa-solid fa-hashtag"></i></span>
                                </span>
                                <a></a>
                            </label>
                        </div>
                        <input type="search" class="form-control" style="height: 30px; font-size: small;" placeholder="Search delegate no / reference no.." id="search_input" name="search_input" autofocus />
                        <div class="input-group-append">
                            <button class="btn btn-success" id="search_btn" type="button" style="height: 30px; border-radius: 0px 12px 12px 0px;"><i class="fa-solid fa-magnifying-glass mb-3"></i></button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="div_video">
                <video id="video" autoplay style="display: none;"></video>
                <canvas id="canvas"></canvas>
                <div class="w-100 text-center">
                    <!--<h4 id="output">Delegate No. : <span id="qr-result">None</span></h4>    -->
                </div>
            </div>
            <div class="div_search_data" style="font-size: 12px;"></div>
        </div>
        <div class="col-lg-3 col-md-3 col-offset-md-3 col-sm-12"></div>
    </div>
</div>


{% endblock %}
{% block footer %}
<div><span> Total signup : </span> <span class="h4">{{ total_signup_count or 0 }}&nbsp;&nbsp;<a href="{{ url_for('scan_signup.OverallSignupCount',conf_id=conf_id,conf_key=conf_key) }}"  >view more..</a></span></div>
{% endblock %}
{% block bottomscript %}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.js"></script>
<!--<script src="/static/js/qrcode-scanner.js"></script>-->

<!-- Barcode-->
<script src="https://unpkg.com/@zxing/library@latest"></script>
<script>
var BaseUrl = document.location.origin;    
var conf_id = $("#conf_id").val();
var conf_key= $("#conf_key").val();
$(document).ready(function() {
    
    const video = document.getElementById('video');
    const canvasElement = document.getElementById('canvas');
    const canvas = canvasElement.getContext('2d');
    const outputData = document.getElementById('qr-result');
    
    let scanning = false;
    let stream = null;

    // Barcode
    const codeReader = new ZXing.BrowserBarcodeReader();
    
    
    // Start scanning
    $('#start').on('click', function() {
        startScanning();
        $("#video").show();
        // $('#start').prop('disabled', true);
        // $('#stop').prop('disabled', false);
        $('#start').hide();
        $('#stop').show();
        $(".div_search_data").empty();
        $(".div_search_data").hide();
    });

    // Stop scanning
    $('#stop').on('click', function() {
        stopScanning();
        $("#video").hide();
        // $('#start').prop('disabled', false);
        // $('#stop').prop('disabled', true);
        $('#start').show();
        $('#stop').hide();
        $(".div_search_data").empty();
        $(".div_search_data").hide();
    });
    
    function startScanning() {
        scanning = true;
        navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function(s) {
            stream = s;
            video.srcObject = stream;
            video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
            video.play();
            requestAnimationFrame(tick);
        });
    }

    function stopScanning() {
        scanning = false;
        if (stream) {
            stream.getTracks().forEach(track => track.stop());
        }
        video.srcObject = null;
        // outputData.innerText = "None";
    }
   function tick() {
    if (scanning) {
        if (video.readyState === video.HAVE_ENOUGH_DATA) {
            canvasElement.height = video.videoHeight;
            canvasElement.width = video.videoWidth;
            canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
            const imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
            const qrcode = jsQR(imageData.data, imageData.width, imageData.height, {
                inversionAttempts: "dontInvert",
            });
            if (qrcode) {
                scan_val =  qrcode.data;
                stopScanning();
                $('#start').prop('disabled', false);
                $('#stop').prop('disabled', true);
                
                    if (parseInt(scan_val)){
                        // only delegate_no
                        url_new = BaseUrl+"/"+conf_id+"/"+conf_key+"/signup/"+ scan_val; 
                    }
                    else if (scan_val.search("/scan_to_signup")){
                        
                        //  url Scan value
                        url_new = scan_val;
                        
                    }
                    else {
                        alert("Invalid URL");
                        return false;
                    }
                    window.location.replace(url_new);
            }
            
            else
                {
                    
                    const img = new Image();
                    img.src = canvasElement.toDataURL();

                    img.onload = function() {
                        codeReader.decodeFromImageElement(img)
                        .then(result => {
                            if (result) {
                                scan_val = result.text; // Get barcode data
                                
                                var scan_val = trimNumber(scan_val);
                                // alert("1. Barcode detected: " + scan_val);
                                
                                stopScanning();
                                $('#start').prop('disabled', false);
                                $('#stop').prop('disabled', true);
        
                                url_new = BaseUrl+"/"+conf_id+"/"+conf_key+"/signup/" + scan_val; // Process barcode data in URL
                                // alert("url_new = "+url_new);
                                window.location.replace(url_new);
                            }
                        })
                        .catch(err => {
                            // Handle ZXing errors (except no barcode found)
                            if (!(err instanceof ZXing.NotFoundException)) {
                                console.error(err);
                            }
                        });
                    }
                }
        }
        requestAnimationFrame(tick);
    }
}
});

function trimNumber(s) {
  while (s.substr(0,1) == '0' && s.length>1) { s = s.substr(1,9999); }
  return s;
}


$(document).on("change", "#choose_search_type",function(e){
    e.preventDefault();
    if($(this).prop('checked') == false){
        $("#search_input").attr("placeholder", "Search full name, email or mobile..");
        $("#search_label").empty().text("Search full name, email or mobile :");
    }else{
        $("#search_input").attr("placeholder", "Search delegate no / reference no..");
        $("#search_label").empty().text("Search delegate no / reference no :");
    }
});

$(document).on("click", "#search_btn",function(e){
    e.preventDefault();
    var conf_id     = $("#conf_id").val();
    var conf_key    = $("#conf_key").val();
    var search_data = $("#search_input").val();

    var choosed_search_type = $("#choose_search_type").prop('checked');
    if (choosed_search_type== false){
        var search_type = 0;
    }else{
        var search_type = 1;
    }
    $.ajax({
        type     : "POST", // <-- get method of form
        url      : BaseUrl +"/"+conf_id+"/"+conf_key+ "/search_signup", // <-- get action of form
        data     : {'search_data':search_data,'search_type':search_type},
        dataType : 'html',
        success  : function(reposnse) {
            var data_1    = JSON.parse(reposnse);
            var html_data = data_1.html_data;
            if (data_1.status == 1) {
                $(".div_search_data").empty();
                $(".div_search_data").show();
                $(".div_search_data").html(html_data);
            }
            else {
                alert(data_1.msg);
                return false;
            }
        },
    });


    
});

var input = document.getElementById("search_input");
input.addEventListener("keypress", function(event) {
  // If the user presses the "Enter" key on the keyboard
  if (event.key === "Enter") {
    // Cancel the default action, if needed
    event.preventDefault();
    // Trigger the button element with a click
    document.getElementById("search_btn").click();
  }
});

</script>

{% endblock %}