發送/購買NFT程式修正

ArkCard-web/goto.js

@@ -38,7 +38,7 @@ function collection(collectuserid='') {
         for(var j in msg[i]) {
           collectcontent += '\
             <div class="collectcontent col">\
-              <input style="display: none;" type="checkbox" value="'+ msg[i][j].id + '" name="nftid" id="' + msg[i][j].id + '">\
+              <input style="display: none;" type="radio" value="'+ msg[i][j].id + '" name="nftid" id="' + msg[i][j].id + '">\
               <label for="'+ msg[i][j].id + '">\
                 <div class="collectcard card h-100">\
                   <a target="_blank">\
@@ -52,35 +52,6 @@ function collection(collectuserid='') {
                 </div>\
               </label>\
             </div>';
-          /*
-          collectcontent += '\
-            <div class="collectcontent col">\
-            <input style="display: none;" type="checkbox" value="'+ msg[i][j].id + '" name="nftid" id="' + msg[i][j].id + '">\
-            <label for="'+ msg[i][j].id + '">\
-            <div class="collectcard card h-100">\
-                <a target="_blank">\
-                    <img src="'+ msg[i][j].imgurl + '"class="card-img-top" alt="...">\
-                </a>\
-                <div class="card-body p-2">\
-                    <a target="_blank">\
-                        <h5 class="card-title pt-3">'+ msg[i][j].title + '</h5>\
-                    </a>\
-                    <p class="card-text">\
-                        '+ msg[i][j].context + ' \
-                    </p>\
-                    <p class="card-text row">\
-                        <small class="text-muted col-6 px-1">\
-                            <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "\
-                                src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>'+ msg[i][j].cost + '</span>\
-                        </small>\
-                        <small class="price col-6 px-0 text-center">\
-                            <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><sp    an>'+ msg[i][j].likes + '</span></small>\
-                          </p>\
-                  </div>\
-              </div>\
-              </label>\
-            </div>';
-          */
         }
       }
     }
@@ -108,7 +79,7 @@ function shop(collectuserid='') {
     for (var i = 0; i < msgLen; i++) {
       nftmall += '\
         <div class="nftmall col">\
-          <input style="display:none" type="checkbox" value="'+ msg[i].id + '" name="nftid" class="nftname" id="' + msg[i].id + '">\
+          <input style="display:none" type="radio" value="'+ msg[i].id + '" name="nftid" class="nftname" id="' + msg[i].id + '">\
           <label for="'+ msg[i].id + '">\
             <div class="collectcard card h-100">\
                 <a target="_blank">\
@@ -122,40 +93,10 @@ function shop(collectuserid='') {
             </div>\
           </label>\
       </div>';
-      /*
-      nftmall += '\
-        <div class="nftmall col">\
-        <input style="display:none" type="checkbox" value="'+ msg[i].id + '" name="nftid" class="nftname" id="' + msg[i].id + '">\
-        <label for="'+ msg[i].id + '">\
-        <div class="collectcard card h-100">\
-            <a target="_blank">\
-                <img src="'+ msg[i].imgurl + '"class="card-img-top" alt="...">\
-            </a>\
-            <div class="card-body p-2">\
-                <a target="_blank">\
-                    <h5 class="card-title pt-3">'+ msg[i].title + '</h5>\
-                </a>\
-                <p class="card-text">\
-                    '+ msg[i].context + ' \
-                </p>\
-                <p class="card-text row">\
-                    <small class="text-muted col-6 px-1">\
-                        <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "\
-                            src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>'+ msg[i].cost + '</span>\
-                    </small>\
-                    <small class="price col-6 px-0 text-center">\
-                        <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>'+ msg[i].likes + '</span>\
-                    </small>\
-                </p>\
-            </div>\
-        </div>\
-        </label>\
-      </div>';
-      */
     }
     buybox += '\
     <div class="p-2">\
-        <input style="border-radius: 10px; border:none; display: none;" class="p-2 w-100 mb-3" type="text" name="userid" value="' + collectuserid + '" placeholder="請輸入您的userid" required>\
+        <input id="userid" style="border-radius: 10px; border:none; display: none;" class="p-2 w-100 mb-3" type="text" name="userid" value="' + collectuserid + '" placeholder="請輸入您的userid" required>\
         <div class="text-end px-2">\
             <p class="text-start text-white mb-2">※一次只能購買一則NFT收藏品</p>\
             <button type="button" style="border:1px solid #fff; border-radius: 30px;" class="close btn text-white px-3">取消</button>\
@@ -194,17 +135,6 @@ function get_data(collectuserid='') {
   });
 }
 
-// $(document).ready(function () {
-//   // 收藏頁面
-//   collection(collectuserid);
-
-//   // 購買頁面
-//   shop(collectuserid);
-
-//   // Qrcode頁面
-//   get_data(collectuserid);
-// });
-
 $(".buybox").hide();
 $(document).on("click", ".nftmall", function (event) {
   $(".buybox").show(500);
@@ -224,8 +154,6 @@ $(document).on("click", ".close", function (event) {
 $.fn.serializeObject = function () {
   var o = {};
   var a = this.serializeArray();
-  // o["id"] = 0;
-  // o["time_stamp"] = "";
   $.each(a, function () {
     if (o[this.name]) {
       console.log(o[this.name], o[this.value]); // test
@@ -244,90 +172,61 @@ $.fn.serializeObject = function () {
 
 // 確定發送按鈕處理
 $(".collect-send").submit(function (e) {
-  /*	var formRef = $('#form1').serializeArray();
-    var jsonString = JSON.stringify(formRef);*/
+  var nftid = $("input[name='nftid']:checked").val();
+  var address = $('#address').val();
+
+  var data = `{"nftid":"` + nftid +`","address":"` + address +`"}`;
+  
+  console.log(data); // test
   
   var url = "https://api.ptt.cx:8750/api/v1/line/send";
 
   var xhr = new XMLHttpRequest();
-  xhr.open("POST", url);
+  xhr.open("POST", url, false);
   
   xhr.setRequestHeader("accept", "application/json");
   xhr.setRequestHeader("Content-Type", "application/json");
   
   xhr.onreadystatechange = function () {
-      if (xhr.readyState === 4) {
-        console.log(xhr.status);
-        console.log(xhr.responseText);
-      }};
-  
-  var data = `{
-    "nftid": "1000",
-    "address": "0xf05cc78a5eba78775847beea5b3ab88d4694d1b6"
-  }`;
-  
-  xhr.send(data);
-  
-  // var jsonInfo = $('.collect-send').serializeObject();
-  // var jsonString = JSON.stringify(jsonInfo);
-  // console.log(jsonString);
+    if (xhr.readyState === 4) {
+      console.log(xhr.status);
+      console.log(xhr.responseText);
 
-  // $.ajax({
-  //   type: 'POST',
-  //   url: 'https://api.ptt.cx:8750/api/v1/line/send',
-  //   data: jsonString,
-  //   dataType: 'json',
-  //   async: false,
-  //   success: function (data) {
-  //     console.log('發送成功: ' + JSON.stringify(data));
-  //     alert("發送成功");
-  //     location.reload();
-  //   },
-  //   beforeSend: function () {
-  //     console.log('beforeSend');
-  //   },
-  //   complete: function () {
-  //     console.log('complete');
-  //   },
-  //   error: function (jqXHR, textStatus, errorThrown) {
-  //     console.log(JSON.stringify(jqXHR));
-  //     console.log("AJAX errr: " + textStatus + ' : ' + errorThrown);
-  //     console.log('送出失敗: ' + jqXHR.responseText);
-  //   }
-  // });
-  // return false;
+      alert("發送成功");
+      location.replace("collect.html");
+    }
+  };
+    
+  xhr.send(data);
 });
 
 $(".nft-buy").submit(function (e) {
-  /*	var formRef = $('#form1').serializeArray();
-    var jsonString = JSON.stringify(formRef);*/
-  var jsonInfo = $('.nft-buy').serializeObject();
-  var jsonString = JSON.stringify(jsonInfo);
-  console.log(jsonString);
+  var nftid = $("input[name='nftid']:checked").val();
+  var userid = $('#userid').val();
 
-    $.ajax({
-      type: 'POST',
-      url: 'https://api.ptt.cx:8750/api/v1/line/buy',
-      data: jsonString,
-      dataType: 'json',
-      success: function (data) {
-        console.log('購買成功: ' + data);
-        alert("購買成功");
-        location.reload();
-      },
-      beforeSend: function () {
-        console.log('beforeSend');
-      },
-      complete: function () {
-        console.log('complete');
-      },
-      error: function (jqXHR, textStatus, errorThrown) {
-        console.log(JSON.stringify(jqXHR));
-        console.log("AJAX errr: " + textStatus + ' : ' + errorThrown);
-        console.log('送出失敗: ' + jqXHR.responseText);
-      }
-    });
-  return false;
+  var data = `{"nftid":"` + nftid +`","userid":"` + userid +`"}`;
+  
+  console.log(data); // test
+  
+  var url = "https://api.ptt.cx:8750/api/v1/line/buy";
+
+  var xhr = new XMLHttpRequest();
+  xhr.open("POST", url, false);
+  
+  xhr.setRequestHeader("accept", "application/json");
+  xhr.setRequestHeader("Content-Type", "application/json");
+  
+  xhr.onreadystatechange = function () {
+    if (xhr.readyState === 4) {
+      console.log(xhr.status);
+      console.log(xhr.responseText);
+
+      alert("購買成功");
+      location.replace("shop.html");
+    }
+  };
+    
+  xhr.send(data);
 });
 
 function copyEvent(id) {