新增NFT

nft.html

@@ -644,7 +644,7 @@ $(document).ready(function($) {
   // 檢查是否可存取該頁面
   checkRoute();
 
-  var url = 'https://api.ptt.cx:8750/api/v1/nft/?skip=0&limit=100';
+  var url = 'https://api.ptt.cx:8750/api/v1/nft';
   var access_token = get_access_token();
   var headers = {'Authorization': 'Bearer ' + access_token}
 

nft_add.html

@@ -560,25 +560,26 @@
             <div class="card-body">
               <h5 class="card-title">NFT</h5>
 
-              <form>
+              <form id="nft_add_form" method="post" enctype="multipart/form-data">
                 <div class="row mb-3">
                   <label for="inputText" class="col-sm-2 col-form-label">名稱</label>
                   <div class="col-sm-10">
-                    <input type="text" class="form-control">
+                    <input id="title" name="title" type="text" class="form-control">
                   </div>
                 </div>
                 <div class="row mb-3">
                   <label for="inputNumber" class="col-sm-2 col-form-label">圖片</label>
                   <div class="col-sm-10">
-                    <input class="form-control" type="file" id="formFile">
+                    <input id="image" name="image" class="form-control" type="file">
                   </div>
                 </div>              
                 <div class="row mb-3">
                   <legend class="col-form-label col-sm-2 pt-0">顯示</legend>
                   <div class="col-sm-10">
                     <div class="form-check">
-                      <input class="form-check-input" type="checkbox" id="gridCheck1" checked>
-                      <label class="form-check-label" for="gridCheck1"></label>
+                      <input id="is_active_checkbox" name="is_active_checkbox" class="form-check-input" type="checkbox">
+                      <!-- <label class="form-check-label" for="is_active"></label> -->
+                      <input id="is_active" name="is_active" type="text" class="form-control d-none">
                     </div>
                   </div>
                 </div>
@@ -893,18 +894,73 @@
 // 檢查是否可存取該頁面
 checkRoute();
 
-$("#btn_nft_add").click(function() {
-  // 導頁進NFT管理介面
-  Swal.fire({
-      title: '功能開發中',
-      icon: 'success',
-      text: '敬請期待!',
+var url = 'https://api.ptt.cx:8750/api/v1/nft/';
+var access_token = get_access_token();
+var headers = {'Authorization': 'Bearer ' + access_token}
+
+$("#nft_add_form").submit(function(e) {
+  e.preventDefault();
+  
+  var title = $('#title').val();
+  var image = $('#image').val();
+
+  console.log('title = ' + title + ', image = ' + image); // test
+
+  if (!title) {
+    Swal.fire({
+      title: '注意',
+      icon: 'error',
+      text: '請輸入NFT名稱',
       confirmButtonColor: '#3085d6'
+    })
+    
+    return false;
+  }
+
+  if (!image) {
+    Swal.fire({
+      title: '注意',
+      icon: 'error',
+      text: '請上傳NFT圖片',
+      confirmButtonColor: '#3085d6'
+    })
+    
+    return false;
+  }
+
+  // 資料庫欄位型態是tinyint(1)，所以另外用is_active_checkbox、is_active欄位來做轉換
+  if ($("#is_active_checkbox").is(':checked')) {
+    $('#is_active').val(1);
+  } else {
+    $('#is_active').val(0);
+  }
+
+  var formData = new FormData($("#nft_add_form")[0]);
+
+  $.ajax({
+      url: url,
+      headers: headers,
+      type: 'POST',
+      data: formData,
+      cache: false,
+      contentType: false,
+      processData: false,
+      success: function (res, status) {
+        console.log(res); // test
+        Swal.fire({
+            title: '新增NFT',
+            icon: 'success',
+            text: 'NFT新增成功',
+            confirmButtonColor: '#3085d6'
+        });
+        window.setTimeout(() => {
+            window.location.href = 'nft.html';
+        }, 2000);
+      }, error: function(xhr, status, error) {
+        console.log(xhr.responseText); // test
+      }      
   });
-  window.setTimeout(() => {
-      window.location.href = 'nft.html';
-  }, 2000);
-
+  
   return false;
 });
 </script>