Smopp_v2/locations.js

var xOffset = 20;
var yOffset = 20;
var canvas;
var ctx;
var height = 600;
var width = 500;


body.on('click','#add_location',function(){AddLocation();});
body.on('click','#add_loc_dialog',function(){AddNewLocationDialog();});
body.on('click','#del_loc',function(){DeleteLocation(GetSelectedLocId() );});
body.on('change','#locations',function(){GetSelectedLocId();});
body.on('click','#button_beacons_draw',function(){getTestCoordinate();});
body.on('change','#users_position_loc',function(){getUserTasks(this);});
body.on('change','#tasks_select',function(){tasksSelect(this);});


var canvas = $("#canvas")[0];
$(function() {
    canvas = document.getElementById('canvas');
    if (canvas.getContext)
        ctx = canvas.getContext('2d');
    else
        alert('canvas unsupported');
    LoadLocations();
    MainLoop();//chatLoop();
    // DrawRect();
});

var parseQueryString = function (strQuery) {
    var strSearch   = strQuery.substr(1),
        strPattern  = /([^=]+)=([^&]+)&?/ig,
        arrMatch    = strPattern.exec(strSearch),
        objRes      = {};
    while (arrMatch != null) {
        objRes[arrMatch[1]] = arrMatch[2];
        arrMatch = strPattern.exec(strSearch);
    }
    return objRes;
};
var getParam = parseQueryString(window.location.search);


function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

function tasksSelect(select) {
    var user = select.options[select.selectedIndex];
    // alert(user.value);
    var str = user.value;
    //var json = JSON.parse(user.value);
    var myarr = str.split(",");
    // alert('uval'+myarr[0]);
    $('#date_timepicker_start').val(myarr[2]);
    $('#date_timepicker_end').val(myarr[3]);

}

function getUserTasks(select) {
    var user = select.options[select.selectedIndex];

    var dict = new Object();    //or Map()
    dict[ 'get_user_tasks' ] = user.value;
    sendAjax('', dict, UserTasks);
}

function ToggleDisplay() {
    // if (series.value == 0)
    // {
    //     $("#sections_container").css("display", "none");
    // }
    // else {
    //     $("#sections_container").css("display", "block");
    // }
}

function UserTasks(data) {
    // alert(data);
    var json = JSON.parse(data);
    var htm = "<option value='0'><Выберите Задачу></option>";
    for (var i =0;i<json.length; i++) {
        htm += "<option value='"+json[i]+"'>"+json[i][0] +" Проект:"+json[i][1]+"</option>";
    }
    $("#tasks_сont").css("display", "flex");
    $('#tasks_select').html(htm);
}

function DrawRect(x, y) {
        ctx.fillStyle = 'rgb(200, 0, 0)';
        ctx.strokeRect(xOffset, yOffset, x, y);
}

function ClearRect() {
        ctx.clearRect(0, 0, width, height);
}

function DrawCircle(x, y, radius)
{
    x = parseInt(x);
    y = parseInt(y);

    ctx.fillStyle = 'rgb(200, 0, 0)';
    ctx.beginPath();
    ctx.arc(x+xOffset, y+yOffset, radius, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.stroke();
}

function AddNewLocationDialog()
{
    $("#cont").show();
}

function GetSelectedLocId() {
    var select = $("#locations")[0];
    //var id = select.options[select.selectedIndex].value;
    var id = $('#locations').val();
    if (id == 0) {
        canvas.width = 0;
        canvas.height = 0;
    }
    return id;
}

var iCount = 0;
var listItems = [];
async function MainLoop()
{
    while (true) {
        await sleep(500);
        var locid = GetSelectedLocId();
        GetBeacons(locid);
        GetUsers(locid);
        
        
        ///////// CHAT
        if ( 'locations' == getParam) {
            iCount = 0;
            $('#scrollFieldChat > div').each(function(){
                listItems[iCount] = $(this).attr('id');
                    
                iCount++;
            
            });
            
            count_massages = $('#new_massage_count').text();
            if ( 0 < Number(count_massages)) {
                $('#new_massage_count').removeClass("label-default");
                $('#new_massage_count').addClass("label-success");
            } else {
                $('#new_massage_count').removeClass("label-success");
                $('#new_massage_count').addClass("label-default");
            }
            getNewMassage(listItems[iCount-1]);
        }   
        /////////
    }
}

function ReDraw() {
    if (canvas.width == 0) {
        canvas.width = 500;
        canvas.height = 600;
    }
    ClearRect();
    DrawRect(400, 500);
    for (var i =0;i<beaconData.length; i++) {
        DrawCircle(beaconData[i].x, beaconData[i].y, 5);
    }
    DrawCircle(userdata.x, userdata.y, 10);
}

function GetBeacons(loc_id) {
    var dict = new Object();    //or Map()
    dict[ 'beacons_loc' ] = loc_id;
    sendAjax('location_beacons', dict, DrawBeacons);
}

function GetUsers(loc_id) {
    var dict = new Object();    //or Map()
    dict[ 'users_loc' ] = loc_id; 
    sendAjax('location_users', dict, DrawUsers);
}

var beaconData;
var userdata;

function DrawBeacons(data) {
    data = JSON.parse(data);
    beaconData = data;
    $('#' + 'location_beacons').html('');
    for (var i =0;i<data.length; i++) {
        $('#' + 'location_beacons').append(data[i].id + " X:" + data[i].x + " Y:" + data[i].y + " <br>");
    }
}


function DrawUsers(data) { 
    data = JSON.parse(data);
    userdata = data;
    console.log(data);
    $('#'+'location_users').html(data.name+" X:"+data.x+" Y:"+data.y+" <b>Зона:</b> "+data.Zone);
    ReDraw();
}

function DeleteLocation(id) {
    var dict = new Object();    //or Map()
    dict[ 'del_loc' ] = id;
    sendAjax('result', dict, LoadLocations);
}

function LoadLocations() {
    $.ajax({
        type: "POST",
        url: "response.php",
        data: { "load_locs": 1},
        dataType: "html",
        success: function(data){
            $("#location_div").html(data);
        },
        failure: function(errMsg) {
            alert(errMsg);
        }
    });
}

function AddLocation() {

    var name = $('#loc_name').val();
    var desc = $('#loc_desc').val();

    sendAjaxForm('result', 'ajax_form', 'response.php?add_loc='+name+'&desc='+desc);
    LoadLocations();
}


//////////////////////////// Отрисовка пути /////////////
/* var hotspots=[
  {x:100,y:100,radius:20,tip:'You are over 100,100'},
  {x:100,y:200,radius:20,tip:'You are over 100,200'},
]; */
var hotspots=[];
var numbers;
function MyFunc(data){
    var canvas = document.getElementById('canvasa');
    var ctx = canvas.getContext('2d');
    numbers = JSON.parse(data);
    //ctx.clearRect(0, 0, width, height);
    
    drawPath();
    
}
var myFunc2Data;
function MyFunc2 (data){
    
    var canvas=document.getElementById("canvasa");
    var ctx=canvas.getContext("2d");
    ctx.clearRect(0,0,width, height);
    
    data = JSON.parse(data);
    myFunc2Data = data;
    drawZones(data.point_zones);
    drawBeacons(data.point_beacons);
    
    $('#canvasa').css("background-image", "url(images/depo_img/" + data.image);
}

function getTestCoordinate( loc_id = 22 ) {

    var dict = new Object();    //or Map()
    dict = { 
            users_markers: document.getElementById('users_position_loc').value,  
            //time_markers: document.getElementById('time_position_loc').value,
            depo_markers: document.getElementById('depo_position_loc').value,
            date_start: document.getElementById('date_timepicker_start').value,
            date_stop: document.getElementById('date_timepicker_end').value,
            };
            
    img = {get_img: 1,depo_markers: document.getElementById('depo_position_loc').value};        
    sendAjax('location_users_', img, MyFunc2);
    sendAjax('location_users_', dict, MyFunc);
    
}

var timer;
var counter = 1;
var counterI = 0;


var StopLoop = false;
var tempColor_x = '';
var tempColor_y = '';
function drawPath(){    
    
    var canvas = document.getElementById('canvasa');
    var ctx = canvas.getContext('2d');
    
    
    var myColor = '';
    
    if ( null == numbers){
        return true;
    }
    
    numbers.forEach( function(item, i, arr) {
            
            //console.log('y = '+item.coord_y);
        if( i == counter) {
            tempColor_x = item.coord_x;
            tempColor_y = item.coord_y;
            myColor = item.rgb;
            return;
        }
    });
        ctx.fillStyle = myColor;
        ctx.fillRect(tempColor_x,tempColor_y, 5 , 5 );
        counterI += 1;
        counter += 1;
    if ( true == StopLoop){
        numbers = null;
        return true;
    }    
        //console.log(StopLoop);
        setTimeout(drawPath,50);
    return true;   
    
}

function drawBeacons(data) {
    
    ctxa.strokeStyle = "blue"; 
    data.forEach( function(item, i, arr) {
        tempColor_x = item.x;
        tempColor_y = item.y;    
        
        ctxa.beginPath();
        ctxa.arc(item.x,item.y,5,0,Math.PI*2);
        ctxa.closePath();
        ctxa.stroke();     
    });
    ctxa.strokeStyle = "black";
    return true;  
}
/////////////////////////// !!!!!!!!!!!!!! /////////////
/*
var canvas=document.getElementById("canvasa");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
  var BB=canvas.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;        
}

reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }
*//*
var offsetX,offsetY;


$("#canvasa").mousemove(function(e){handleMouseMove(e);});

function draw(numbers){
    
    for(var i=0;i < numbers.length;i++){
        
    var h=numbers[i];
    
    ctx.beginPath();
    ctx.arc(h.coord_x,h.coord_y,h.radius,0,Math.PI*2);
    ctx.closePath();
    ctx.stroke();
    }
}
function handleMouseMove(e){
    var canvas = document.getElementById('canvasa');
    var ctx = canvas.getContext('2d');
    var cw=canvas.width;
    //var ch=canvas.height;
  // tell the browser we're handling this event
    console.log(e.preventDefault());
  e.preventDefault();
  e.stopPropagation();

  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  //ctx.clearRect(0,0,cw,ch);
  
  //draw();
  for(var i=0;i<hotspots.length;i++){
    var h=hotspots[i];
    var dx=mouseX-h.x;
    var dy=mouseY-h.y;
    if(dx*dx+dy*dy<h.radius*h.radius){
      ctx.fillText(h.tip,h.x,h.y);
    }
  }

}
*/
var canvasa = document.getElementById('canvasa');
var ctxa = canvasa.getContext('2d');
function reOffset(){
  var BB=canvasa.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;         
}

var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }



//draw();

$("#canvasa").mousemove(function(e){handleMouseMove(e);});
function draw() {
    var tempColor_x = '';
    var tempColor_y = '';
    var myColor = 'black';
    
    numbers.forEach( function(item, i, arr) {
        tempColor_x = item.coord_x;
        tempColor_y = item.coord_y;    
        //ctxa.fillStyle = myColor;
        //ctxa.fillRect(tempColor_x,tempColor_y, 5 , 5 );
        ctxa.beginPath();
        ctxa.arc(item.coord_x,item.coord_y,item.radius,0,Math.PI*2);
        ctxa.closePath();
        ctxa.stroke();     
    });
    ctxa.strokeStyle = "black";
    ctxa.lineWidth = "1";
    return true;  
    
    /*
    
    if ( hotspots.length > 0 ) {
        for(var i=0;i<hotspots.length;i++){
        var h=hotspots[i];
        ctxa.beginPath();
        ctxa.arc(h.x,h.y,h.radius,0,Math.PI*2);
        ctxa.closePath();
        ctxa.stroke();
        
        }
    }
    */
}

$("#button_beacons_add").on('click', function(){
    $("#add_zone_depo").attr('data', 0);
    $("#add_zone_depo").css('display', 'none');
    $("#add_beacon_depo").toggle( "slow", function() {
        if ( 1 == $("#toggle_val_add").attr('value') ){
            $("#toggle_val_add").attr('value', 0);
        } else {
            $("#toggle_val_add").attr('value',1);
        }
        
    });

});
/// ================ Zones ========================
$("#button_zones_add").on('click', function(){
    $("#add_beacon_depo").attr('value', 0);
    $("#add_beacon_depo").css('display', 'none');
    $("#add_zone_depo").toggle( "slow", function() {
        if ( 1 == $('#button_zones_add').attr('data') ){
            $('#button_zones_add').attr('data', 0);
        } else {
            $('#button_zones_add').attr('data',1);
        }
        
    });

});
var parsePointsArray;
function drawZones(data) {
    
    data.forEach( function(item, i, arr) {
        if ( null != item.borders ) {    
            parsePointsArray = JSON.parse(item.borders);
            
            if ( 1 < parsePointsArray.coordinates.length) {
                var c1 = parsePointsArray.coordinates[parsePointsArray.coordinates.length-1];   
                var c2 = parsePointsArray.coordinates[parsePointsArray.coordinates.length-2];
//ctxa.strokeStyle = "red";
//ctxa.lineWidth = "5";
                //d1 = Math.abs(c1.X - c2.X)/2;
                //d2 = Math.abs(c1.Y - c2.Y)/2;
                d1 = (Number(c1.X) + Number(c2.X))/2;
                d2 = (Number(c1.Y) + Number(c2.Y))/2;
                ctxa.beginPath();
                //console.log(typeof Math.round(d1));
                //console.log(typeof Math.round(c1.X));
                //console.log(Math.round(d1) + c1.X);
                //console.log(parsePointsArray);
                //console.log(d1);
                //console.log(typeof Math.round(c1.Y));
                
                //var t = Number(Math.round(d2)) + Number(c1.Y);
                //console.log(t);
                ctxa.fillText(item.description,d1,d2);
                //ctxa.arc(d1 ,d2 ,5,0,Math.PI*2);
                ctxa.closePath();
                ctxa.stroke();
                
                
                ctxa.moveTo(c1.X,c1.Y);
                ctxa.lineTo(c1.X,c2.Y);
                ctxa.lineTo(c2.X,c2.Y);
                ctxa.lineTo(c2.X,c1.Y);
                ctxa.closePath();
                ctxa.stroke();
            }
        }
    });
    ctxa.strokeStyle = "black";
    ctxa.lineWidth = "1";
    return true;  
    
    
}

/// ================ Zones ========================
$("#button_beacons_clear").on('click', function(){
        ctxa.clearRect(0,0,width,height);
        points_zone_one = null;
        points_zone_all = null;
        tempColor_x = '';
        tempColor_y = '';
        myFunc2Data = null;
        numbers = null;
        data = null;
        StopLoop = true;
        //numbers = '';
    });

var add_beacon_depo_arr;
var points_zone_one = null;
var points_zone_all = [];
var points_zone;
$("#canvasa").on('click', function(){
if ( 1 == $("#toggle_val_add").attr('value') ) {
    ctxa.clearRect(0,0,width,height);
    $("#uid_beacon").val();
    add_beacon_depo_arr = {x:pointCursorX,y:pointCursorY,location_id:$("#depo_position_loc").val(),uuid:$("#uid_beacon").val(),beacon_item:1};
    add_beacon_depo_obj = [{x:pointCursorX,y:pointCursorY,location_id:$("#depo_position_loc").val(),uuid:$("#uid_beacon").val(),beacon_item:1}];
    
    ctxa.beginPath();
    ctxa.arc(pointCursorX, pointCursorY, 5, 0, Math.PI*2 );
    ctxa.closePath();
    ctxa.stroke();
    
}

if ( 1 == $('#button_zones_add').attr('data') ) {
    
    //ctxa.strokeStyle='red';
    
    if (null != points_zone_one){
        
            pointCursorX_auto_1 = {x:pointCursorX,y:points_zone_one.y};
            pointCursorX_auto_2 = {x:points_zone_one.x,y:pointCursorY};
            points_zone_two = {pointCursorX,pointCursorY};
            
            ctxa.beginPath();
            ctxa.arc(pointCursorX, pointCursorY, 5, 0, Math.PI*2 );
            ctxa.closePath();
            ctxa.stroke();
            
            ctxa.beginPath();
            ctxa.lineWidth = "5";
            ctxa.moveTo(points_zone_one.x,points_zone_one.y);
            ctxa.lineTo(pointCursorX_auto_1.x,pointCursorX_auto_1.y);
            ctxa.lineTo(pointCursorX,pointCursorY);
            ctxa.lineTo(pointCursorX_auto_2.x,pointCursorX_auto_2.y);
            ctxa.closePath();
            ctxa.stroke();
            points_zone_all = {'coordinates':[{'X':points_zone_one.x,'Y':points_zone_one.y},{'X':pointCursorX,'Y':pointCursorY}]};
            points_zone_one = null;
            //console.log(points_zone_all);
            return true;
    }
    
    if (null == points_zone_one){
        
            points_zone_one = {x:pointCursorX,y:pointCursorY};
            ctxa.beginPath();
            ctxa.arc(pointCursorX, pointCursorY, 5, 0, Math.PI*2 );
            ctxa.closePath();
            ctxa.stroke();
            
    }
    
    
    
    //ctxa.clearRect(0,0,width,height);
    
    
}
});
$("#add_beacon_depo").on('click', function(e){
    e.preventDefault();
    
    var error = '';
    add_beacon_depo_obj.forEach( function(item, i, arr) {
    
            if( '' == item.x){
                error += "Нет координаты x";
            }
            if( '' == item.y){
                error += "Нет координаты y";
            }
            if( '' == item.location_id){
                error += "Не выбрана локация";
            }
            if( '' == item.uuid){
                error += "Не заполнено поле uuid";
            }
        
        });
    if ( '' == error) {
        sendAjax('location_users_', add_beacon_depo_arr, AddBeacon);
        
    } else {
        $('#beacon_errors').text(error);
    }
    add_beacon_depo_arr = [];
});

function AddBeacon(data){
    addInfo = JSON.parse(data);
    
    /*if(){
        $('#beacon_errors').text(addInfo);
    } else {
        $('#beacon_success').text(addInfo);
    }
    */
}
//$("#button_beacons_add").on('click', function(){
  //  $("#add_beacon_depo").show();
  //  console.log('Вы нажали на элемент "foo"');
//});
var pointCursorX;
var pointCursorY;
function handleMouseMove(e){
    
    if (numbers.length < counterI) {
    
        e.preventDefault();
        e.stopPropagation();

        mouseX = parseInt(e.clientX-offsetX,10);
        mouseY = parseInt(e.clientY-offsetY,10);
        pointCursorX = mouseX;
        pointCursorY = mouseY;
        //console.log(mouseX);
       // console.log(mouseY);
        if ( 1 != $("#toggle_val_add").attr('value') && 1 != $('#button_zones_add').attr('data')) {
            ctxa.clearRect(0,0,width,height);
        }
        draw();        
        drawZones(myFunc2Data.point_zones);
        drawBeacons(myFunc2Data.point_beacons);
        numbers.forEach( function(item, i, arr) {
            var dx = mouseX - parseInt(item.coord_x,10);
            var dy = mouseY - parseInt(item.coord_y,10);
            dx = dx*dx;
            dy = dy*dy;
            if(dx+dy < item.radius*item.radius){
                ctxa.fillStyle = 'red';
                ctxa.fillText(item.ts,item.coord_x,item.coord_y);
            }
        
        });
    }
}
/////////////////////////// !!!!!!!!!!!!!! /////////////

//////////////////////////// Отрисовка пути /////////////