預約系統 IOS / Android Windows

index.html 14KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  5. <meta name="description" content="">
  6. <meta name="author" content="">
  7. <script src="js/mqttws31.min.js" type="text/javascript"></script>
  8. <script src="js/jquery-3.5.1.min.js"></script>
  9. <script type="text/javascript">
  10. window.addEventListener( "pageshow",function ( event ) {
  11. var historyTraversal = event.persisted ||
  12. ( typeof window.performance != "undefined" &&
  13. window.performance.navigation.type === 2 );
  14. if ( historyTraversal ) {
  15. // Handle page restore.
  16. window.location.reload();
  17. }
  18. });
  19. </script>
  20. <script type="text/javascript">
  21. var CID = '';
  22. var ID = '';
  23. var PW = '';
  24. var TYPE = '';
  25. var client;
  26. var isconn=false;
  27. var vmqtt='';
  28. var SN='';
  29. var SubID='';
  30. var myclientid='';
  31. var callist = '';
  32. var isget = false;
  33. var webSocket;
  34. var isget2=false;
  35. var vsn='';
  36. //var vii=1;
  37. function init()
  38. {
  39. try
  40. {
  41. //alert('test version 2023-5-17 001 ');
  42. //updateOutput('init');
  43. CID = getUrlParameter('CID');
  44. ID = getUrlParameter('ID');
  45. PW= getUrlParameter('PW');
  46. TYPE= getUrlParameter('TYPE');
  47. SN = getUrlParameter('SN');
  48. vmqtt = getUrlParameter('MQTT');
  49. SubID = getUrlParameter('SubID');
  50. //alert(SubID);
  51. /*
  52. CID = '886999000230';
  53. ID = '00000000';
  54. PW= 'CMM87krWqj8Ltt00';
  55. TYPE='IOS';
  56. SN='2501100080027';
  57. MQTT='aws.gigatech.tw';
  58. */
  59. // updateOutput('CID='+CID);
  60. // updateOutput('ID='+ID);
  61. // updateOutput('PW='+PW);
  62. //updateOutput('TYPE='+TYPE);
  63. if (TYPE=='ANDROID')
  64. {
  65. connect();
  66. }
  67. if (TYPE=='IOS')
  68. {
  69. var vivi = 0;
  70. var intervalID = setInterval(() => {
  71. if (isget)
  72. {
  73. // break;
  74. }
  75. else
  76. {
  77. if (vivi>5)
  78. {
  79. clearInterval(intervalID);
  80. alert('連線異常');
  81. }
  82. else
  83. {
  84. vivi++;
  85. getdoorlist() ;
  86. }
  87. // vii++;
  88. }
  89. }, 400);
  90. }
  91. //myclientid="Giga8869990002301";
  92. //myclientid="Giga"+CID+"1";
  93. //myclientid="Giga"+CID+"1-"+ parseInt(Math.random() * 100000000, 10);
  94. myclientid="Giga"+CID+"1-"+ SubID;
  95. client = new Paho.MQTT.Client(vmqtt, Number(8083), myclientid);
  96. //client = new Paho.MQTT.Client("aws.gigatech.tw", Number(8083), myclientid);
  97. client.onMessageArrived = onMessageArrived;
  98. client.onConnectionLost = onConnectionLost;
  99. client.connect( {onSuccess: onConnect, onFailure : onFailedConnect,timeout: 6,keepAliveInterval: 30});
  100. }catch(e)
  101. {
  102. alert(e);
  103. }
  104. }
  105. function onConnectionLost(message)
  106. {
  107. updateOutput('onConnectionLost');
  108. client.connect( {onSuccess: onConnect, onFailure : onFailedConnect,timeout: 6,keepAliveInterval: 30});
  109. //client.connect( {onSuccess: onConnect, onFailure : onFailedConnect});
  110. }
  111. function onMessageArrived(message)
  112. {
  113. //alert(message.payloadString);
  114. var errda = message.payloadString;
  115. //isget=true;
  116. isget2=true;
  117. var vobj = JSON.parse( errda);
  118. var jsonString = "{\"action\":\"decode\", \"serial\":\"002\",\"data\":\""+vobj.data+"\"}";
  119. // updateOutput('onMessageArrived');
  120. // updateOutput('----------------------------------------------');
  121. // updateOutput(jsonString);
  122. vsn='002';
  123. /// "WebToApp". 為我們和前端開發人員的約定
  124. if (TYPE=='IOS')
  125. {
  126. window.webkit.messageHandlers.WebToApp.postMessage(jsonString);
  127. }
  128. if (TYPE=='ANDROID')
  129. {
  130. webSocket.send(jsonString);
  131. }
  132. }
  133. function onFailedConnect()
  134. {
  135. //alert('連線異常');
  136. updateOutput('onFailedConnect');
  137. }
  138. function onConnect()
  139. {
  140. //client.subscribe('Reserve8869990002301');
  141. client.subscribe('Reserve'+CID+'1-'+SubID);
  142. updateOutput('onConnect');
  143. isconn=true;
  144. //alert('c');
  145. }
  146. </script>
  147. <title>預約 QR Code</title>
  148. <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  149. </head>
  150. <body class="text-center" onload="init()">
  151. <div id="cardadmin" class="card" style="box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1);margin: 21px 20px 0;">
  152. <div style="margin: 0 0 0 0;background-color:#dcdcdc;" ><div style="margin: 10px 35px 10px 10px;" ><img src="image/qttitle.png" width="40" height="40" ><button id="btn100" style="outline:none;line-height:40px;vertical-align: middle; text-align: left;width:80%;border:0px white none;background-color:#dcdcdc;font-family:Roboto_Light;font-size:24px;color:#646464;height:42px;">預約 QR Code</button></div></div>
  153. <div style="width: 100%;">
  154. <button id="addneworder" style="border-color: #dcdcdc;border-width: 1px;width: 95%;
  155. height: 56px;
  156. margin: 10px 0px 10px 0px ;
  157. padding: 11px 0 22px;
  158. border-radius: 3px;
  159. font-family:Roboto_Light;font-size:24px;color:#646464;
  160. background-color: #e6e6e6;" onclick="Addpay99()" >
  161. 電腦密碼設定 <img src="image/TwoPerson.png" width="40" height="40" style=" margin: -8px 0px 0px 10px ;" alt=""/></button></div>
  162. <div id="doorlist" >
  163. </div>
  164. </div>
  165. <div>
  166. </div>
  167. <div>
  168. <div>
  169. V.231222-1
  170. </div>
  171. <div id="output" style="display:none">
  172. <h2>Output</h2>
  173. </div>
  174. <script type="text/javascript">
  175. function Addpay99()
  176. {
  177. document.location = "index5.html?CID="+CID+"&PW="+PW+"&TYPE="+TYPE+"&SN="+SN+"&MQTT="+vmqtt+"&SubID="+SubID;
  178. }
  179. function getdoorlist()
  180. {
  181. var vt=new Date().format("yyyy/MM/dd_HH:mm:ss")
  182. //var edata ="{\"action\":\"mqttqueryCallList\",\"data\":{\"Command\":\"PassWord=CMM87krWqj8Ltt00\",\"SerialNo\":\"Reserve8869990002301\",\"TimeStamp\":\""+vt+"\",\"Token\":\"Gigatech23634857\"}}";
  183. // var edata ="{\"action\":\"mqttqueryCallList\",\"data\":{\"Command\":\"PassWord=CMM87krWqj8Ltt00\",\"SerialNo\":\"Reserve"+CID+"1-"+SubID+"\",\"TimeStamp\":\""+vt+"\",\"Token\":\"Gigatech23634857\"}}";
  184. var edata ="{\"action\":\"mqttqueryCallList\",\"data\":{\"Command\":\"PassWord="+PW+"\",\"SerialNo\":\"Reserve"+CID+"1-"+SubID+"\",\"TimeStamp\":\""+vt+"\",\"Token\":\"Gigatech23634857\"}}";
  185. var jsonString = "{\"action\":\"encode\", \"serial\":\"001\",\"data\":"+edata+"}";
  186. vsn='001';
  187. // updateOutput(jsonString);
  188. if (TYPE=='IOS')
  189. {
  190. window.webkit.messageHandlers.WebToApp.postMessage(jsonString);
  191. }
  192. if (TYPE=='ANDROID')
  193. {
  194. webSocket.send(jsonString);
  195. /*
  196. isget=false;
  197. setTimeout(() => {
  198. if (isget)
  199. {
  200. }else
  201. {
  202. }
  203. }, 500);
  204. */
  205. }
  206. }
  207. </script>
  208. <script type="text/javascript">
  209. var input = document.getElementById("input")
  210. var output = document.getElementById("output");
  211. var vdata="";
  212. var isok=true;
  213. //var wsUrl = "ws://localhost:2980/";
  214. // var wsUrl = "ws://192.168.0.25:2980/";
  215. var wsUrl = "ws://127.0.0.1:2980/";
  216. function connect() {
  217. // open the connection if one does not exist
  218. if (webSocket !== undefined && webSocket.readyState !== WebSocket.CLOSED) {
  219. updateOutput('webSocket fail');
  220. return;
  221. }
  222. // updateOutput("Trying to establish a WebSocket connection to <code>" + wsUrl + "</code>");
  223. // Create a websocket
  224. webSocket = new WebSocket(wsUrl);
  225. webSocket.onopen = function(event) {
  226. // updateOutput("Connected!");
  227. // getdoorlist() ;
  228. //isget=false;
  229. var vivi = 0;
  230. var intervalID = setInterval(() => {
  231. if (isget)
  232. {
  233. // break;
  234. }
  235. else
  236. {
  237. if (vivi>15)
  238. {
  239. updateOutput('vivi 6');
  240. clearInterval(intervalID);
  241. alert('連線異常');
  242. }
  243. else
  244. {
  245. vivi++;
  246. updateOutput('call webSocket send msg');
  247. if (isconn)
  248. {
  249. getdoorlist() ;
  250. }
  251. }
  252. // vii++;
  253. }
  254. }, 400);
  255. };
  256. webSocket.onmessage = function(event)
  257. {
  258. updateOutput('webSocket return msg');
  259. // alert(event.data);
  260. if (vsn=='002')
  261. {
  262. var ress = event.data;
  263. //alert('ress='+ress);
  264. // ress=ress.replace(/[^a-z0-9\s]/gi, 'a').replace(/[_\s]/g, '-');
  265. // ress=ress+"}";
  266. // alert('webSocket finish');
  267. // alert('retry'+vii);
  268. // ress= ress.substring(1300,ress.length);
  269. //alert( ress.substring(1300,ress.length));
  270. // alert( event.data.trim().substring(1300,event.data.length) );
  271. callist.innerHTML ='';
  272. try
  273. {
  274. var vobj = JSON.parse(ress);
  275. callist = vobj.data.data.calllist;
  276. //alert(callist.length);
  277. for (i=0;i<callist.length;i++)
  278. {
  279. var kk = callist[i].split(';');
  280. var tttxt='';
  281. //alert(kk[0]);
  282. if (kk[4].length!=0)
  283. {
  284. // alert(kk[4]);
  285. tttxt=kk[4];
  286. }
  287. else
  288. {
  289. // alert(kk[0]);
  290. tttxt=kk[0];
  291. }
  292. if (kk[0].startsWith('000'))
  293. {
  294. }else
  295. {
  296. doorlist.innerHTML =doorlist.innerHTML+'<div style="margin: 10px 35px 0px -14px;"><button id="doorsin'+i+'" style="line-height:28px;vertical-align: middle; text-align: left;width:80%;border:0px white none;background-color:white;font-family:Roboto_Light;font-size:24px;outline:none;color:#646464;height:28px;" onclick="btnitemback2(\''+i+'\')">'+tttxt+'</button></div><br>';
  297. }
  298. //doorlist.innerHTML =doorlist.innerHTML+ '<div style="margin: 10px 35px 10px -18px;" ><button id="'+i+' style="line-height:40px;vertical-align: middle; text-align: left;width:80%;border:0px white none;background-color:white;font-family:Roboto_Light;font-size:24px;outline:none;color:#646464;height:42px;" onclick="btnGGTT('SingPush.html')">'+tttxt+'</button> </div>";
  299. }
  300. // var sevobj = JSON.parse( vobj);
  301. // alert( sevobj.data);
  302. }catch(e)
  303. {
  304. //alert(e);
  305. }
  306. }
  307. if (vsn=='001')
  308. {
  309. try
  310. {
  311. //alert( event.data );
  312. var ress = event.data;
  313. isget=true;
  314. var vobj = JSON.parse( ress);
  315. vdata = "{\"encrypt\":\"1\",\"data\":\""+vobj.data+"\"}";
  316. }catch(e)
  317. {
  318. alert(e);
  319. }
  320. // updateOutput('---------------------------');
  321. // updateOutput(vdata);
  322. updateOutput('mqtt send before');
  323. isget2=false;
  324. var payload =vdata;
  325. var message = new Paho.MQTT.Message(payload);
  326. // message.destinationName = '2501100080027' ;
  327. message.destinationName = SN ;
  328. message.qos = 2;
  329. message.retained = false;
  330. var vivi=0;
  331. var intervalID = setInterval(() => {
  332. if (isget2)
  333. {
  334. // break;
  335. }
  336. else
  337. {
  338. if (vivi>5)
  339. {
  340. clearInterval(intervalID);
  341. alert('連線異常');
  342. }
  343. else
  344. {
  345. vivi++;
  346. updateOutput('mqtt send');
  347. client.send(message);
  348. }
  349. // vii++;
  350. }
  351. }, 400);
  352. }
  353. // updateOutput('------------xxx------------');
  354. // updateOutput(event.data);
  355. };
  356. webSocket.onclose = function(event) {
  357. updateOutput("Connection Closed");
  358. // sendBtn.disabled = true;
  359. };
  360. }
  361. function AppToWeb(message) {
  362. if (vsn=='002')
  363. {
  364. var ress = message;
  365. // alert('ress='+ress);
  366. callist.innerHTML ='';
  367. try
  368. {
  369. var vobj = JSON.parse(ress);
  370. callist = vobj.data.data.calllist;
  371. for (i=0;i<callist.length;i++)
  372. {
  373. var kk = callist[i].split(';');
  374. var tttxt='';
  375. if (kk[4].length!=0)
  376. {
  377. tttxt=kk[4];
  378. }
  379. else
  380. {
  381. tttxt=kk[0];
  382. }
  383. if (kk[0].startsWith('000'))
  384. {
  385. }else
  386. {
  387. doorlist.innerHTML =doorlist.innerHTML+'<div style="margin: 10px 35px 0px -14px;"><button id="doorsin'+i+'" style="line-height:28px;vertical-align: middle; text-align: left;width:80%;border:0px white none;background-color:white;font-family:Roboto_Light;font-size:24px;outline:none;color:#646464;height:28px;" onclick="btnitemback2(\''+i+'\')">'+tttxt+'</button></div><br>';
  388. }
  389. }
  390. }catch(e)
  391. {
  392. alert(e);
  393. }
  394. }
  395. if (vsn=='001')
  396. {
  397. try
  398. {
  399. isget=true;
  400. var ress = message;
  401. var vobj = JSON.parse( ress);
  402. vdata = "{\"encrypt\":\"1\",\"data\":\""+vobj.data+"\"}";
  403. }catch(e)
  404. {
  405. alert(e);
  406. }
  407. var payload =vdata;
  408. var message = new Paho.MQTT.Message(payload);
  409. // message.destinationName = '2501100080027' ;
  410. message.destinationName = SN ;
  411. message.qos = 2;
  412. message.retained = false;
  413. client.send(message);
  414. }
  415. return "Got it"
  416. }
  417. function decode() {
  418. var text = input.value;
  419. var jsonString = "{\"action\":\"decode\", \"serial\":\"001\",\"data\":\""+text+"\"}";
  420. // updateOutput(jsonString);
  421. /// "WebToApp". 為我們和前端開發人員的約定
  422. if (TYPE=='IOS')
  423. {
  424. window.webkit.messageHandlers.AppToWeb.postMessage(jsonString);
  425. }
  426. if (TYPE=='ANDROID')
  427. {
  428. webSocket.send(jsonString);
  429. }
  430. }
  431. function updateOutput(text) {
  432. output.innerHTML += "<br/>" + text;
  433. }
  434. </script>
  435. <script type="text/javascript">
  436. function btnitemback2(i)
  437. {
  438. var vk = callist[i].split(';');
  439. var tttxt='';
  440. // alert(callist[i]);
  441. if (vk[4].length!=0)
  442. {
  443. // alert(kk[4]);
  444. tttxt=vk[4];
  445. }
  446. else
  447. {
  448. // alert(kk[0]);
  449. tttxt=vk[0];
  450. }
  451. //alert(vk[0]+' '+vk[7]);
  452. document.location = "index2.html?KID="+vk[0]+"&name="+tttxt+"&CID="+CID+"&ID="+vk[0]+"&PW="+PW+"&TYPE="+TYPE+"&SN="+SN+"&MQTT="+vmqtt+"&SubID="+SubID;
  453. }
  454. </script>
  455. <script>
  456. var getUrlParameter = function getUrlParameter(sParam) {
  457. var sPageURL = decodeURIComponent(window.location.search.substring(1)),
  458. sURLVariables = sPageURL.split('&'),
  459. sParameterName,
  460. i;
  461. for (i = 0; i < sURLVariables.length; i++) {
  462. sParameterName = sURLVariables[i].split('=');
  463. if (sParameterName[0] === sParam) {
  464. return sParameterName[1] === undefined ? true : sParameterName[1];
  465. }
  466. }
  467. };
  468. Date.prototype.format = function (format) {
  469. //eg:format="yyyy-MM-dd hh:mm:ss";
  470. if (!format) {
  471. format = "yyyy-MM-dd hh:mm:ss";
  472. }
  473. var o = {
  474. "M+": this.getMonth() + 1, // month
  475. "d+": this.getDate(), // day
  476. "H+": this.getHours(), // hour
  477. "h+": this.getHours(), // hour
  478. "m+": this.getMinutes(), // minute
  479. "s+": this.getSeconds(), // second
  480. "q+": Math.floor((this.getMonth() + 3) / 3), // quarter
  481. "S": this.getMilliseconds()
  482. };
  483. if (/(y+)/.test(format)) {
  484. format = format.replace(RegExp.$1, (this.getFullYear() + "")
  485. .substr(4 - RegExp.$1.length));
  486. }
  487. for (var k in o) {
  488. if (new RegExp("(" + k + ")").test(format)) {
  489. format = format.replace(RegExp.$1, RegExp.$1.length == 1
  490. ? o[k]
  491. : ("00" + o[k]).substr(("" + o[k]).length));
  492. }
  493. }
  494. return format;
  495. };
  496. </script>
  497. <br>
  498. </body>
  499. </html>