20-9-2019 8:55:51
//var cv = document.getElementById("myCanvas");
const map = theMap();
//map.createWorkers();
loadMap();
setInterval(loadMap, 8000); // 8s
document.getElementById("factorymap").addEventListener("wheel", mapZooming);
function loadMap() {
d = new Date();
$('#data').load("/positions.ashx?d=" + d.getTime(), function (response_data, status, xhr) {
//console.log('load data complete');
map.run(response_data);
});
}
function clickme(obj) {
// do some thing
var moreinfo = document.getElementById("moreinfo");
moreinfo.innerHTML = "";
moreinfo.style.left = (parseInt(obj.style.left, 10) - 40) + "px";
moreinfo.style.top = (parseInt(obj.style.top, 10) - 30) + "px";
moreinfo.innerText = map.findName(obj.id);
}
function mapZooming(event) {
var moreinfo = document.getElementById("moreinfo");
moreinfo.style.left = "-300px";
moreinfo.style.top = "-300px";
if (event.deltaY < 0) {
console.log('scrolling up');
map.zoomIn();
}
else if (event.deltaY > 0) {
console.log('scrolling down');
map.zoomOut();
}
}
// object map
function theMap() {
const obj = {};
obj.wks = new Array();
obj.scale = 100;
obj.findSetpos = function (data_pos) {
for (i = 0; i < this.wks.length; i++) {
var m_worker = this.wks
;
if (m_worker.id.localeCompare(data_pos.id) == 0) {
// found
m_worker.setNewPosition(data_pos.x, data_pos.y);
x = (m_worker.x * this.scale / 100) + 'px';
y = (m_worker.y * this.scale / 100) + 'px';
$('#' + m_worker.imgctl.id).animate({ top: y, left: x }, 700);
return true;
}
}
// not found add list
const worker = new theWorker();
if (worker) {
worker.setData(data_pos);
this.wks.push(worker);
var factorymap = document.getElementById("factorymap");
var img = document.createElement("img");
factorymap.appendChild(img);
img.src = "/theme/point3.png";
img.id = worker.id;
img.style.position = "absolute";
img.setAttribute("onclick", "clickme(this);");
worker.setControl(img);
}
return false;
}
obj.findName = function (id) {
for (i = 0; i < this.wks.length; i++) {
var m_worker = this.wks;
if (m_worker.id.localeCompare(id) == 0) {
return m_worker.name;
}
}
return '';
}
obj.run = function (response_data) {
if (response_data == null) return;
if (response_data === "") return;
var arr = JSON.parse(response_data);
for (i = 0; i < arr.length; i++) {
found = this.findSetpos(arr);
}
this.rePlace();
}
obj.rePlace = function () {
for (i = 0; i < this.wks.length; i++) {
var worker = this.wks;
x = (worker.x * this.scale / 100) + 'px';
y = (worker.y * this.scale / 100) + 'px';
$('#' + worker.imgctl.id).animate({ top: y, left: x }, 20);
}
}
obj.zoomIn = function () {
if (this.scale < 111) {
this.scale += 5;
var fmap = document.getElementById("fmap");
fmap.style.width = (this.scale * 1691 / 100) + 'px';
this.rePlace();
}
}
obj.zoomOut = function () {
if (this.scale > 39) {
this.scale -= 5;
fmap.style.width = (this.scale * 1691 / 100) + 'px';
this.rePlace();
}
}
return obj;
}
// object worker
function theWorker() {
const obj = {};
obj.name = '';
obj.id = '';
obj.x = 0;
obj.y = 0;
obj.imgctl;
obj.setNewPosition = function (x2, y2) {
obj.x = x2;
obj.y = y2;
};
obj.setControl = function (ctl) {
this.imgctl = ctl;
};
obj.setData = function (data) {
//console.log(data.id + ',' + data.name + ',' + data.x + ',' + data.y);
obj.name = data.name;
obj.id = data.id;
obj.x = data.x;
obj.y = data.y;
}
return obj;
}
=======
html đây :
=======
[code]
<!doctype html>
<html lang="en">
<head>
<title>Factory workers manager</title>
<script type="text/javascript" src="/jquery.min.js"></script>
</head>
<body>
<div id="factorymap" style="border:1px solid #ccc;position:relative;overflow:hidden;">
<img id="fmap" src="/theme/map2.jpg" />
<div id="moreinfo" class="hint-text" style="background:#f6dab2;width:160px;position:absolute;border:1px solid #ccc;top:-50px;left:-50px;z-index:30;"></div>
</div>
<div id="data" style="display:none;"></div>
<script type="text/javascript" src="/pos.js"></script>
</body>
</html>
[/code]