| Thành viên | Nội dung | 
| hung 
  
 10  bài
 | //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 :
 =======
 
 <!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>
 
 
           
           | 
| aspnet 
  Lập trình không biên giới
 607  bài
 | Vòng lặp for 
 for (i = 0; i < this.wks.length; i++) {
 var m_worker = this.wks;
 if (m_worker.id.localeCompare(id) == 0) {
 return m_worker.name;
 }
 }
 
 Tốc độ chậm hơn câu lệnh :
 
 let wk = this.wks.find(x => x.id === id);
 
 ===
 javascript thật kỳ diệu
 ---
 Cây sẽ cho lộc và cây sẽ cho hoa  ...
 
           
           | 
| aspnet 
  Lập trình không biên giới
 607  bài
 | function walking() {
 console.log('+++');
 if (wk.loaded == 0)
 loadData();
 else
 wk.walk();
 
 setTimeout(walking, 3000);
 }
 walking();
 
 
 Khi setInterval(foo, 3000); không hoạt động ta phải dùng cách này
 ---
 Cây sẽ cho lộc và cây sẽ cho hoa  ...
 
           
           | 
| aspnet 
  Lập trình không biên giới
 607  bài
 | function setCookie(cname, cvalue, exdays) { var d = new Date();
 d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
 var expires = "expires=" + d.toUTCString();
 document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
 }
 
 function getCookie(cname) {
 var name = cname + "=";
 var decodedCookie = decodeURIComponent(document.cookie);
 var ca = decodedCookie.split(';');
 for (var i = 0; i < ca.length; i++) {
 var c = ca;
 while (c.charAt(0) == ' ') {
 c = c.substring(1);
 }
 if (c.indexOf(name) == 0) {
 return c.substring(name.length, c.length);
 }
 }
 return "";
 }
 ---
 Cây sẽ cho lộc và cây sẽ cho hoa  ...
 
           
           | 
| aspnet 
  Lập trình không biên giới
 607  bài
 | obj.imageExists = function (image_url) { var http = new XMLHttpRequest();
 
 http.open('HEAD', image_url, false);
 http.send();
 
 return (http.status != 404);
 }
 ---
 Cây sẽ cho lộc và cây sẽ cho hoa  ...
 
           
           | 
| aspnet 
  Lập trình không biên giới
 607  bài
 | $.ajax({ type: "GET",
 url: "http://192.168.40.148:3001/api/place/places",
 beforeSend: function (xhr) { xhr.setRequestHeader('access_token', token); },
 success: function (resp) {
 console.log('data ', resp.data);
 for (i = 0; i < resp.data.length; i++) {
 var li = document.createElement("LI");
 li.innerHTML = '<a href="/live2.html?token=' + token + '&place_id=' + resp.data._id + '">' + resp.data.name + '</a>';
 document.getElementById("places").appendChild(li);
 
 if (resp.data._id === place_id) {
 $('#myKhucvuc').html(resp.data.name);
 imgurl = 'http://192.168.40.148:3001/resource/place/' + resp.data.mapImage.name;
 if (obj.imageExists(imgurl)) $('#fmap').attr('src', imgurl);
 }
 }
 }
 });
 
 api post with headers
 ---
 Cây sẽ cho lộc và cây sẽ cho hoa  ...
 
           
           | 
| aspnet 
  Lập trình không biên giới
 607  bài
 | WebClient wc = new WebClient(); byte  []   bytes = wc.DownloadData(imgurl);
 MemoryStream ms = new MemoryStream(bytes);
 Image img = Image.FromStream(ms);
 return img;
 
 Get Image from url
 ---
 Cây sẽ cho lộc và cây sẽ cho hoa  ...
 
           
           | 
|  |