updates

Controllers/ApiController.cs

@@ -41,6 +41,7 @@ using static Journeys_WantHome.Controllers.AuthApiController;
 namespace Journeys_WantHome.Controllers
 {
     [Route("Api")]
+    
     public class ApiController : ControllerBase
     {
         private readonly IHttpContextAccessor _httpContextAccessor;
@@ -55,6 +56,279 @@ namespace Journeys_WantHome.Controllers
             this._httpContextAccessor = httpContextAccessor;
         }
 
+        [Route("kolAddEditDelGet")]
+        public ActionResult kolAddEditDelGet(IFormCollection obj) {
+            kolResult ret = new kolResult();
+
+            authToken token = new authToken(this._httpContextAccessor);
+            if (token.user_isLogin == false)
+            {
+                HttpContext.Response.Cookies.Delete("token_key");
+                ret.ret = "no";
+                ret.err_code = "99999";
+                ret.message = "非登入狀態!";
+                return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+            }
+
+            string method = obj["method"].ToString();
+            string kol_uid = obj["kol_uid"].ToString();
+            string kol_name = obj["kol_name"].ToString();
+            string kol_descript = obj["kol_descript"].ToString();
+            string kol_contact1 = obj["kol_contact1"].ToString();
+            string kol_contact2 = obj["kol_contact2"].ToString();
+            double kol_men_ratio = double.Parse(obj["kol_men_ratio"].ToString());
+            double kol_women_ratio = double.Parse(obj["kol_women_ratio"].ToString());
+            double kol_13_17 = double.Parse(obj["kol_13_17"].ToString());
+            double kol_18_24 = double.Parse(obj["kol_18_24"].ToString());
+            double kol_25_34 = double.Parse(obj["kol_25_34"].ToString());
+            double kol_35_44 = double.Parse(obj["kol_35_44"].ToString());
+            double kol_45_54 = double.Parse(obj["kol_45_54"].ToString());
+            double kol_55_64 = double.Parse(obj["kol_55_64"].ToString());
+            double kol_65 = double.Parse(obj["kol_65"].ToString());
+            string kol_photo = obj["kol_photo"].ToString();
+
+            string kolMakeupStr = obj["kolMakeupStr"].ToString().TrimEnd(',');
+            string kolStyleStr = obj["kolStyleStr"].ToString().TrimEnd(',');
+            string kolFansTypeStr = obj["kolFansType"].ToString().TrimEnd(',');
+            string mediaArrayJson = obj["mediaArrayJson"].ToString().TrimEnd(',');
+
+            if (method == "") {
+                ret.ret = "no";
+                ret.err_code = "0001";
+                ret.message = "無method參數!";
+                return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+            }
+
+            if (method == "add") {
+                string err_msg = "";
+                
+                if (kol_name == "") {
+                    err_msg = "請輸入KOL頻道名稱!\n";
+                }
+
+                if (kol_photo == "") {
+                    err_msg += "請選擇KOL的照片!\n";
+                }
+
+                if (err_msg != "") {
+                    ret.ret = "no";
+                    ret.err_code = "0002";
+                    ret.message = err_msg;
+                    return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+                }
+
+                kol newKol = new kol();
+
+                kol_uid = "kol_" + GlobalClass.CreateRandomCode(12);
+                
+                newKol.kol_uid = kol_uid;
+                newKol.kol_name = kol_name;
+                newKol.kol_descript = kol_descript;
+                newKol.kol_photo = kol_photo;
+                newKol.kol_contact1 = kol_contact1;
+                newKol.kol_contact2 = kol_contact2;
+                newKol.kol_men_ratio = kol_men_ratio;
+                newKol.kol_women_ratio = kol_women_ratio;
+                newKol.kol_13_17 = kol_13_17;
+                newKol.kol_18_24 = kol_18_24;
+                newKol.kol_25_34 = kol_25_34;
+                newKol.kol_35_44 = kol_35_44;
+                newKol.kol_45_54 = kol_45_54;
+                newKol.kol_55_64 = kol_55_64;
+                newKol.kol_65 = kol_65;
+                newKol.kol_create_userId = token.user_id;
+                newKol.kol_modify_userId = token.user_id;
+
+                string[] kolMakeupArr = kolMakeupStr.Split(',');
+
+                List<kolMakeup> kolMakeups = new List<kolMakeup>();
+                foreach (string makeup in kolMakeupArr)
+                {
+                    optionItem item = conn.QueryFirstOrDefault<optionItem>("select * from optionItem where optionItem_ishide = 'N' and optionItem_uid = @optionItem_uid", new { optionItem_uid = makeup });
+
+                    if (item != null)
+                    {
+                        kolMakeup makeupObj = new kolMakeup();
+                        makeupObj.kolMakeup_uid = "kmk_" + GlobalClass.CreateRandomCode(12);
+                        makeupObj.kol_uid = kol_uid;
+                        makeupObj.option_uid = item.option_uid;
+                        makeupObj.optionItem_uid = item.optionItem_uid;
+                        kolMakeups.Add(makeupObj);
+                    }
+                }
+
+                string[] kolStyleArr = kolStyleStr.Split(",");
+
+                List<kolStyle> kolStyles = new List<kolStyle>();
+                foreach (string style in kolStyleArr)
+                {
+                    optionItem item = conn.QueryFirstOrDefault<optionItem>("select * from optionItem where optionItem_ishide = 'N' and optionItem_uid = @optionItem_uid", new { optionItem_uid = style });
+
+                    if (item != null)
+                    {
+                        kolStyle styleObj = new kolStyle();
+                        styleObj.kolStyle_uid = "ks_" + GlobalClass.CreateRandomCode(12);
+                        styleObj.kol_uid= kol_uid;
+                        styleObj.option_uid = item.option_uid;
+                        styleObj.optionItem_uid= item.optionItem_uid;
+                        kolStyles.Add(styleObj);
+                    }
+                    
+                }
+
+                string[] kolFansTypeArr = kolFansTypeStr.Split(",");
+
+                List<kolFansType> kolFansTypes = new List<kolFansType>();
+                foreach(string fansType in  kolFansTypeArr)
+                {
+                    optionItem item = conn.QueryFirstOrDefault<optionItem>("select * from optionItem where optionItem_ishide = 'N' and optionItem_uid = @optionItem_uid", new { optionItem_uid = fansType });
+
+                    if (item != null)
+                    {
+                        kolFansType fansObj = new kolFansType();
+                        fansObj.kolFansType_uid = "kft_" + GlobalClass.CreateRandomCode(12);
+                        fansObj.kol_uid = kol_uid;
+                        fansObj.option_uid = item.option_uid;
+                        fansObj.optionItem_uid = item.optionItem_uid;
+                        kolFansTypes.Add(fansObj);
+                    }
+                }
+
+                dynamic mediaJsonObj;
+
+                try { 
+                    mediaJsonObj = JsonConvert.DeserializeObject(mediaArrayJson);
+                } catch (Exception ex)
+                {
+                    ret.ret = "no";
+                    ret.err_code = "0003";
+                    ret.message = "media json error" + ex.Message;
+                    return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+                }
+
+                List<kolMedia> medias = new List<kolMedia>();
+
+                foreach (dynamic item in mediaJsonObj) {
+                    kolMedia mediaObj = new kolMedia();
+
+                    mediaObj.kolMedia_uid = "km_" + GlobalClass.CreateRandomCode(12);
+                    mediaObj.kol_uid = kol_uid;
+                    mediaObj.option_uid = item.option_uid;
+                    mediaObj.optionItem_uid = item.optionItem_uid;
+                    mediaObj.kolMedia_fansNum = int.Parse(item.kolMedia_fansNum.ToString());
+                    mediaObj.kolMedia_accountName = item.kolMedia_accountName;
+                    mediaObj.kolMedia_displayName = item.kolMedia_displayName;
+                    mediaObj.kolMedia_url = item.kolMedia_url;
+
+                    medias.Add(mediaObj);
+                }
+
+                conn.Insert(kolMakeups);
+                conn.Insert(kolStyles);
+                conn.Insert(kolFansTypes);
+                conn.Insert(medias);
+
+                try
+                {
+                    conn.Insert(newKol);
+                    conn.Close();
+
+                    ret.kol = new kolDetial(kol_uid);
+                }
+                catch (Exception ex) {
+                    ret.ret = "no";
+                    ret.err_code = "1001";
+                    ret.message = ex.Message;
+                    return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+                }
+                
+
+
+                
+
+                ret.ret = "yes";
+                return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+            }
+
+            return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+        }
+
+        [Route("kolPhotoUpload")]
+        [RequestFormLimits(MultipartBodyLengthLimit = int.MaxValue)]
+        [RequestSizeLimit(int.MaxValue)]
+        public ActionResult KolPhotoUpload([FromForm(Name = "avatar")] IFormFile file) {
+            authToken token = new authToken(this._httpContextAccessor);
+            if (token.user_isLogin == false)
+            {
+                List<errFile> files = new List<errFile>();
+
+                errFile newFile = new errFile();
+                newFile.name = "";
+                newFile.size = 0;
+                newFile.error = "尚未登入";
+
+                files.Add(newFile);
+
+                fileResult obj = new fileResult();
+
+                obj.files = files;
+
+                return Content(JsonConvert.SerializeObject(files), "application/json;charset=utf-8");
+            }
+
+
+            string originFileName = file.FileName;
+            string newFileName = "avatar_" + GlobalClass.CreateRandomCode(8)  + Path.GetExtension(originFileName);
+            string fullPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/images/avatar/" + newFileName);
+            try
+            {
+                using (var stream = new FileStream(fullPath, FileMode.Create)) { 
+                    file.CopyTo(stream);
+                }
+
+                List<uploadFile> files = new List<uploadFile>();
+
+                uploadFile newFile = new uploadFile();
+
+                newFile.name = originFileName;
+                newFile.url = "/images/avatar/" + newFileName;
+                newFile.size = file.Length;
+                newFile.thumbnailUrl = "/images/avatar/" + newFileName;
+                newFile.deleteUrl = "/images/avatar/" + newFileName;
+
+                
+
+                files.Add(newFile);
+
+                fileResult obj = new fileResult();
+
+                obj.files = files;
+                  
+           
+
+          
+
+                return Content(JsonConvert.SerializeObject(obj), "application/json;charset=utf-8");
+            }
+            catch (Exception ex)
+            {
+                List<errFile> files = new List<errFile>();
+
+                errFile newFile = new errFile();
+                newFile.name = originFileName;
+                newFile.size = file.Length;
+                newFile.error = ex.Message;
+
+                files.Add(newFile);
+
+                fileResult obj = new fileResult();
+
+                obj.files = files;
+
+                return Content(JsonConvert.SerializeObject(files), "application/json;charset=utf-8");
+            }
+        }
+
         [Route("optionItemList")]
         public ActionResult OptionItemList(IFormCollection obj)
         {
@@ -89,4 +363,31 @@ namespace Journeys_WantHome.Controllers
 
         
     }
+
+    public class kolResult { 
+        public string ret { get; set; } = "";
+        public string err_code { get; set; } = "";
+        public string message { get; set; } = "";
+        public kolDetial kol { get; set; } = new kolDetial();
+    
+    }
+
+    public class fileResult {
+        public object files = new object();
+    }
+
+    public class uploadFile {
+        public string name { get; set; } = "";
+        public long size { get; set; } = 0;
+        public string url { get; set; } = "";
+        public string thumbnailUrl { get; set; } = "";
+        public string deleteUrl { get; set; } = "";
+        public string deleteType { get; set; } = "DELETE";
+    }
+
+    public class errFile {
+        public string name { get; set; } = "";
+        public long size { get; set; } = 0;
+        public string error { get; set; } = "";
+    }
 }

Journeys_WantHome.csproj

@@ -40,6 +40,7 @@
     <Folder Include="wwwroot\assets\vendor\particles.js\demo\" />
     <Folder Include="wwwroot\assets\vendor\stacked-menu\scss\" />
     <Folder Include="wwwroot\assets\vendor\toastr\tests\" />
+    <Folder Include="wwwroot\images\avatar\" />
   </ItemGroup>
 
   <ItemGroup>

Models/DbTableClass.cs

@@ -23,27 +23,29 @@ public class DbTableClass
 
         public string kol_descript { get; set; } = "";
 
-        public string kol_men_ratio { get; set; } = "";
+        public double kol_men_ratio { get; set; } = 0;
 
-        public string kol_women_ratio { get; set; } = "";
+        public double kol_women_ratio { get; set; } = 0;
 
-        public double kol_13_17 { get; set; }
+        public double kol_13_17 { get; set; } = 0;
 
-        public double kol_18_24 { get; set; }
+        public double kol_18_24 { get; set; } = 0;
 
-        public double kol_25_34 { get; set; }
+        public double kol_25_34 { get; set; } = 0;
 
-        public double kol_35_44 { get; set; }
+        public double kol_35_44 { get; set; } = 0;
 
-        public double kol_45_54 { get; set; }
+        public double kol_45_54 { get; set; } = 0;
 
-        public double kol_55_64 { get; set; }
+        public double kol_55_64 { get; set; } = 0;
 
-        public double kol_65 { get; set; }
+        public double kol_65 { get; set; } = 0;
 
-        public DateTime kol_createdate { get; set; }
+        public string kol_contact1 { get; set; } = "";
+        public string kol_contact2 { get; set; } = "";
+        public DateTime kol_createdate { get; set; } = DateTime.Now;
 
-        public DateTime kol_modifydate { get; set; }
+        public DateTime kol_modifydate { get; set; } = DateTime.Now;
 
         public string kol_create_userId { get; set; } = "";
 
@@ -119,6 +121,8 @@ public class DbTableClass
 
         public string optionItem_uid { get; set; } = "";
 
+        public string kolMedia_url { get; set; } = "";
+
         public string kolMedia_displayName { get; set; } = "";
 
         public string kolMedia_accountName { get; set; } = "";

Models/kolCooperateTypeDetail.cs

@@ -37,7 +37,7 @@ public class kolCooperateTypeDetail : kolCooperateType {
                 this.GetType().GetProperty(propName).SetValue(this, propValue);
             }
 
-            var result = conn.QueryFirstOrDefault("select A.option_name, B.optionItem_name from from option A, optionItem B where A.option_uid = B.option_uid and B.option_uid = @option_uid and B.optionItem_uid = @optionItem_uid ", new { option_uid = this.option_uid, optionItem_uid = this.optionItem_uid });
+            var result = conn.QueryFirstOrDefault("select A.option_name, B.optionItem_name from  [option] A, optionItem B where A.option_uid = B.option_uid and B.option_uid = @option_uid and B.optionItem_uid = @optionItem_uid ", new { option_uid = this.option_uid, optionItem_uid = this.optionItem_uid });
 
             if (result != null)
             {
@@ -65,7 +65,7 @@ public class kolCooperateTypeDetail : kolCooperateType {
             this.GetType().GetProperty(propName).SetValue(this, propValue);
         }
 
-        var result = conn.QueryFirstOrDefault("select A.option_name, B.optionItem_name from from option A, optionItem B where A.option_uid = B.option_uid and B.option_uid = @option_uid and B.optionItem_uid = @optionItem_uid ", new { option_uid = this.option_uid, optionItem_uid = this.optionItem_uid });
+        var result = conn.QueryFirstOrDefault("select A.option_name, B.optionItem_name from  [option] A, optionItem B where A.option_uid = B.option_uid and B.option_uid = @option_uid and B.optionItem_uid = @optionItem_uid ", new { option_uid = this.option_uid, optionItem_uid = this.optionItem_uid });
 
         if (result != null)
         {

Models/kolDetial.cs

@@ -86,19 +86,19 @@ public class kolDetial : kol
             foreach (kolMakeup objItem in kolMakeups)
             {
                 kolMakeupDetail objDetail = new kolMakeupDetail(objItem);
-                kolMakeups.Add(objDetail);
+                makeups.Add(objDetail);
             }
 
             foreach (kolMedia objItem in kolMedias) 
             { 
                 kolMediaDetail objDetail = new kolMediaDetail(objItem);
-                kolMedias.Add(objDetail);
+                medias.Add(objDetail);
             }
 
             foreach (kolStyle objItem in kolStyles)
             {
                 kolStyleDetail objDetail = new kolStyleDetail(objItem);
-                kolStyles.Add(objDetail);
+                styles.Add(objDetail);
             }
         }
     }

Models/kolFansTypeDetail.cs

@@ -37,7 +37,7 @@ public class kolFansTypeDetail : kolFansType
                 this.GetType().GetProperty(propName).SetValue(this, propValue);
             }
 
-            var result = conn.QueryFirstOrDefault("select A.option_name, B.optionItem_name from from option A, optionItem B where A.option_uid = B.option_uid and B.option_uid = @option_uid and B.optionItem_uid = @optionItem_uid ", new { option_uid = this.option_uid, optionItem_uid = this.optionItem_uid });
+            var result = conn.QueryFirstOrDefault("select A.option_name, B.optionItem_name from [option] A, optionItem B where A.option_uid = B.option_uid and B.option_uid = @option_uid and B.optionItem_uid = @optionItem_uid ", new { option_uid = this.option_uid, optionItem_uid = this.optionItem_uid });
 
             if (result != null)
             {
@@ -65,7 +65,7 @@ public class kolFansTypeDetail : kolFansType
             this.GetType().GetProperty(propName).SetValue(this, propValue);
         }
 
-        var result = conn.QueryFirstOrDefault("select A.option_name, B.optionItem_name from from option A, optionItem B where A.option_uid = B.option_uid and B.option_uid = @option_uid and B.optionItem_uid = @optionItem_uid ", new { option_uid = this.option_uid, optionItem_uid = this.optionItem_uid });
+        var result = conn.QueryFirstOrDefault("select A.option_name, B.optionItem_name from [option] A, optionItem B where A.option_uid = B.option_uid and B.option_uid = @option_uid and B.optionItem_uid = @optionItem_uid ", new { option_uid = this.option_uid, optionItem_uid = this.optionItem_uid });
 
         if (result != null)
         {

Models/kolMakeupDetail.cs

@@ -36,7 +36,7 @@ public class kolMakeupDetail : kolMakeup
                 this.GetType().GetProperty(propName).SetValue(this, propValue);
             }
 
-            var result = conn.QueryFirstOrDefault("select A.option_name, B.optionItem_name from from option A, optionItem B where A.option_uid = B.option_uid and B.option_uid = @option_uid and B.optionItem_uid = @optionItem_uid ", new { option_uid = this.option_uid, optionItem_uid = this.optionItem_uid });
+            var result = conn.QueryFirstOrDefault("select A.option_name, B.optionItem_name from  [option] A, optionItem B where A.option_uid = B.option_uid and B.option_uid = @option_uid and B.optionItem_uid = @optionItem_uid ", new { option_uid = this.option_uid, optionItem_uid = this.optionItem_uid });
 
             if (result != null)
             {
@@ -65,7 +65,7 @@ public class kolMakeupDetail : kolMakeup
             this.GetType().GetProperty(propName).SetValue(this, propValue);
         }
 
-        var result = conn.QueryFirstOrDefault("select A.option_name, B.optionItem_name from from option A, optionItem B where A.option_uid = B.option_uid and B.option_uid = @option_uid and B.optionItem_uid = @optionItem_uid ", new { option_uid = this.option_uid, optionItem_uid = this.optionItem_uid });
+        var result = conn.QueryFirstOrDefault("select A.option_name, B.optionItem_name from  [option] A, optionItem B where A.option_uid = B.option_uid and B.option_uid = @option_uid and B.optionItem_uid = @optionItem_uid ", new { option_uid = this.option_uid, optionItem_uid = this.optionItem_uid });
 
         if (result != null)
         {

Models/kolMediaDetail.cs

@@ -37,7 +37,7 @@ public class kolMediaDetail : kolMedia
                 this.GetType().GetProperty(propName).SetValue(this, propValue);
             }
 
-            var result = conn.QueryFirstOrDefault("select A.option_name, B.optionItem_name from from option A, optionItem B where A.option_uid = B.option_uid and B.option_uid = @option_uid and B.optionItem_uid = @optionItem_uid ", new { option_uid = this.option_uid, optionItem_uid = this.optionItem_uid });
+            var result = conn.QueryFirstOrDefault("select A.option_name, B.optionItem_name from  [option] A, optionItem B where A.option_uid = B.option_uid and B.option_uid = @option_uid and B.optionItem_uid = @optionItem_uid ", new { option_uid = this.option_uid, optionItem_uid = this.optionItem_uid });
 
             if (result != null)
             {
@@ -66,7 +66,7 @@ public class kolMediaDetail : kolMedia
             this.GetType().GetProperty(propName).SetValue(this, propValue);
         }
 
-        var result = conn.QueryFirstOrDefault("select A.option_name, B.optionItem_name from from option A, optionItem B where A.option_uid = B.option_uid and B.option_uid = @option_uid and B.optionItem_uid = @optionItem_uid ", new { option_uid = this.option_uid, optionItem_uid = this.optionItem_uid });
+        var result = conn.QueryFirstOrDefault("select A.option_name, B.optionItem_name from  [option] A, optionItem B where A.option_uid = B.option_uid and B.option_uid = @option_uid and B.optionItem_uid = @optionItem_uid ", new { option_uid = this.option_uid, optionItem_uid = this.optionItem_uid });
 
         if (result != null)
         {

Models/kolStyleDetail.cs

@@ -37,7 +37,7 @@ public class kolStyleDetail : kolStyle
                 this.GetType().GetProperty(propName).SetValue(this, propValue);
             }
 
-            var result = conn.QueryFirstOrDefault("select A.option_name, B.optionItem_name from from option A, optionItem B where A.option_uid = B.option_uid and B.option_uid = @option_uid and B.optionItem_uid = @optionItem_uid ", new { option_uid = this.option_uid, optionItem_uid = this.optionItem_uid });
+            var result = conn.QueryFirstOrDefault("select A.option_name, B.optionItem_name from  [option] A, optionItem B where A.option_uid = B.option_uid and B.option_uid = @option_uid and B.optionItem_uid = @optionItem_uid ", new { option_uid = this.option_uid, optionItem_uid = this.optionItem_uid });
 
             if (result != null)
             {
@@ -66,7 +66,7 @@ public class kolStyleDetail : kolStyle
             this.GetType().GetProperty(propName).SetValue(this, propValue);
         }
 
-        var result = conn.QueryFirstOrDefault("select A.option_name, B.optionItem_name from from option A, optionItem B where A.option_uid = B.option_uid and B.option_uid = @option_uid and B.optionItem_uid = @optionItem_uid ", new { option_uid = this.option_uid, optionItem_uid = this.optionItem_uid });
+        var result = conn.QueryFirstOrDefault("select A.option_name, B.optionItem_name from  [option] A, optionItem B where A.option_uid = B.option_uid and B.option_uid = @option_uid and B.optionItem_uid = @optionItem_uid ", new { option_uid = this.option_uid, optionItem_uid = this.optionItem_uid });
 
         if (result != null)
         {

Views/Home/KolList.cshtml

@@ -57,7 +57,7 @@
     <div class="modal fade" id="clientNewModal" tabindex="-1" role="dialog" aria-labelledby="clientNewModalLabel" data-backdrop="static"
          data-keyboard="false" aria-hidden="true">
         <!-- .modal-dialog -->
-        <div class="modal-dialog" role="document">
+        <div class="modal-dialog modal-lg" role="document">
             <!-- .modal-content -->
             <div class="modal-content">
                 <!-- .modal-header -->
@@ -88,6 +88,16 @@
                                 <textarea class="form-control" id="kol_descript" rows="5"></textarea>
                             </div>
                         </div>
+                        <div class="col-md-12">
+                            <div class="form-group">
+                                <label for="kol_contact1">聯繫方式1</label> <input type="text" id="kol_contact1" class="form-control">
+                            </div>
+                        </div>
+                        <div class="col-md-12">
+                            <div class="form-group">
+                                <label for="kol_contact2">聯繫方式2</label> <input type="text" id="kol_contact2" class="form-control">
+                            </div>
+                        </div>
                         <div class="col-md-12" id="kolMakeup_div">
                             <div class="form-group">
                                
@@ -101,27 +111,56 @@
                             <div class="form-group"></div>
                             <div class="row">
                                 <div class="col-md-6">
-                               
-                                     
-                                        <!-- .form-group -->
-                                        
-                                            <label class="control-label" for="kol_men_ratio">男女比</label> <input type="text" value="50" id="kol_men_ratio" data-toggle="touchspin" data-min="0" data-max="100" data-step="0.1" data-decimals="1" data-boostat="5" data-maxboostedstep="10" data-postfix="%" data-verticalbuttons="true">
-                                       <!-- /.form-group -->
-                            
+                                    <label class="control-label" for="kol_men_ratio">男女比</label> <input type="text" value="50" id="kol_men_ratio" data-toggle="touchspin" data-min="0" data-max="100" data-step="0.1" data-decimals="1" data-boostat="5" data-maxboostedstep="10" data-prefix="男" data-postfix="%" data-verticalbuttons="false">              
                                 </div>
 
                                 <div class="col-md-6">
-                             
-                                    
-                                        <!-- .form-group -->
-                                       
-                                            <label class="control-label" for="kol_women_ratio">　</label> <input type="text" value="50" id="kol_women_ratio" data-toggle="touchspin" data-min="0" data-max="100" data-step="0.1" data-decimals="1" data-boostat="5" data-maxboostedstep="10" data-postfix="%" data-verticalbuttons="true">
-                                        <!-- /.form-group -->
-                              
+                                    <label class="control-label" for="kol_women_ratio">　</label> <input type="text" value="50" id="kol_women_ratio" data-toggle="touchspin" data-min="0" data-max="100" data-step="0.1" data-decimals="1" data-boostat="5" data-maxboostedstep="10" data-prefix="女" data-postfix="%" data-verticalbuttons="false">
                                 </div>
                             </div>
                             <div class="form-group"></div>    
-                            
+                        </div>
+                        <div class="col-md-6">
+                            <div class="form-group">
+                                <label class="control-label" for="kol_13_17">13-17歲占比</label>
+                                <input type="text" value="0" id="kol_13_17" data-toggle="touchspin" data-min="0" data-max="100" data-step="0.1" data-decimals="1" data-boostat="5" data-maxboostedstep="10" data-postfix="%" data-verticalbuttons="false">
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="form-group">
+                                <label class="control-label" for="kol_18_24">18-24歲占比</label>
+                                <input type="text" value="0" id="kol_18_24" data-toggle="touchspin" data-min="0" data-max="100" data-step="0.1" data-decimals="1" data-boostat="5" data-maxboostedstep="10" data-postfix="%" data-verticalbuttons="false">
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="form-group">
+                                <label class="control-label" for="kol_25_34">25-34歲占比</label>
+                                <input type="text" value="0" id="kol_25_34" data-toggle="touchspin" data-min="0" data-max="100" data-step="0.1" data-decimals="1" data-boostat="5" data-maxboostedstep="10" data-postfix="%" data-verticalbuttons="false">
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="form-group">
+                                <label class="control-label" for="kol_35_44">35-44歲占比</label>
+                                <input type="text" value="0" id="kol_35_44" data-toggle="touchspin" data-min="0" data-max="100" data-step="0.1" data-decimals="1" data-boostat="5" data-maxboostedstep="10" data-postfix="%" data-verticalbuttons="false">
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="form-group">
+                                <label class="control-label" for="kol_45_54">45-54歲占比</label>
+                                <input type="text" value="0" id="kol_45_54" data-toggle="touchspin" data-min="0" data-max="100" data-step="0.1" data-decimals="1" data-boostat="5" data-maxboostedstep="10" data-postfix="%" data-verticalbuttons="false">
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="form-group">
+                                <label class="control-label" for="kol_55_64">55-64歲占比</label>
+                                <input type="text" value="0" id="kol_55_64" data-toggle="touchspin" data-min="0" data-max="100" data-step="0.1" data-decimals="1" data-boostat="5" data-maxboostedstep="10" data-postfix="%" data-verticalbuttons="false">
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="form-group">
+                                <label class="control-label" for="kol_65">65歲以上占比</label>
+                                <input type="text" value="0" id="kol_65" data-toggle="touchspin" data-min="0" data-max="100" data-step="0.1" data-decimals="1" data-boostat="5" data-maxboostedstep="10" data-postfix="%" data-verticalbuttons="false">
+                            </div>
                         </div>
                         <div class="col-md-12">
                             <div class="card-body">
@@ -138,13 +177,111 @@
                                 </div><!-- /.media -->
                             </div>
                         </div>
-                        
+                        <div class="col-md-12">
+                            <!-- .card-body -->
+                            <div class="card-body">
+                                <h2 class="card-title"> 社群平台 </h2><!-- .table-responsive -->
+                                <div class="table-responsive">
+                                    <table class="table table-hover" style="min-width: 678px" id="media_table">
+                                        <thead>
+                                            <tr>
+                                                <th style="width: 10%;"> 平台 </th>
+                                                <th style="width: 25%;"> 網址 </th>
+                                                <th style="width: 12%;"> 帳號 </th>
+                                                <th style="width: 12%;"> 名稱 </th>
+                                                <th> 粉絲數</th>
+                                                <th style="width: 18%;"></th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr>
+                                                <td class="align-middle">  Instagram </td>
+                                                <td class="align-middle"> https://www.instagram.com/zamy_ding/ </td>
+                                                <td class="align-middle"> zamy_ding </td>
+                                                <td class="align-middle"> 奎丁 </td>
+                                                <td class="align-middle"> 754000 </td>
+                                                <td class="align-middle text-right">
+                                                    <button type="button" data-uid="" data-method="" class="btn btn-sm btn-icon btn-secondary" data-toggle="modal" data-target="#clientContactEditModal"><i class="fa fa-pencil-alt"></i> <span class="sr-only">Edit</span></button> <button type="button" class="btn btn-sm btn-icon btn-secondary"><i class="far fa-trash-alt"></i> <span class="sr-only">Remove</span></button>
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div><!-- /.table-responsive -->
+                            </div><!-- /.card-body -->
+                            <!-- .card-footer -->
+                            <div class="card-footer">
+                                <a href="javascript: void();" id="socialNewBtn" class="card-footer-item"><i class="fa fa-plus-circle mr-1"></i> 新增社群平台資料</a>
+                            </div><!-- /.card-footer -->
+                        </div>
 
                     </div><!-- /.form-row -->
                 </div><!-- /.modal-body -->
                 <!-- .modal-footer -->
                 <div class="modal-footer">
-                    <button type="button" id="saveBtn" class="btn btn-primary">儲存</button> <button id="closeBtn" type="button" class="btn btn-light" data-dismiss="modal">關閉</button>
+                    <button type="button" id="kolSaveBtn" class="btn btn-primary">儲存</button> <button id="closeBtn" type="button" class="btn btn-light" data-dismiss="modal">關閉</button>
+                </div><!-- /.modal-footer -->
+            </div><!-- /.modal-content -->
+        </div><!-- /.modal-dialog -->
+    </div>
+</form><!-- /.modal -->
+
+
+<!-- .modal -->
+<form id="clientSocialEditForm" name="clientSocialEditForm">
+    <div class="modal fade" id="socialItemModal" tabindex="-1" role="dialog" aria-labelledby="socialModalLabel" data-backdrop="static" aria-hidden="true">
+        <!-- .modal-dialog -->
+        <div class="modal-dialog" role="document">
+            <!-- .modal-content -->
+            <div class="modal-content">
+                <!-- .modal-header -->
+                <div class="modal-header">
+                    <h6 id="socialModalLabel" class="modal-title inline-editable">
+                        <span class="sr-only">項目名稱</span> <input id="option_name" type="text" class="form-control form-control-lg" value="" placeholder="項目名稱" readonly="readonly " required="">
+                    </h6>
+                </div><!-- /.modal-header -->
+                <!-- .modal-body -->
+                <div class="modal-body">
+                    <input type="hidden" id="media_method" />
+                    <input type="hidden" id="option_uid" />
+                    <input type="hidden" id="optionItem_uid" />
+                    <input type="hidden" id="kolMedia_uid" />
+                    <div class="form-group">
+                        <label for="cnCountry"> 社群平台 </label> <select id="media_select" class="custom-select d-block w-100">
+                            <option value=""> Choose... </option>
+
+                        </select>
+                    </div>
+
+                    <!-- .form-group -->
+                    <div class="form-group">
+                        <div class="form-label-group">
+                            <input type="text" id="kolMedia_url" class="form-control" value="" placeholder="網址" maxlength="50" required=""> <label for="kolMedia_url">網址</label>
+                        </div>
+                    </div><!-- /.form-group -->
+
+                    <!-- .form-group -->
+                    <div class="form-group">
+                        <div class="form-label-group">
+                            <input type="text" id="kolMedia_accountName" class="form-control" value="" placeholder="社群帳號" maxlength="20" required=""> <label for="kolMedia_accountName">社群帳號</label>
+                        </div>
+                    </div><!-- /.form-group -->
+                    <!-- .form-group -->
+                    <div class="form-group">
+                        <div class="form-label-group">
+                            <input type="text" id="kolMedia_displayName" class="form-control" value="" placeholder="社群名稱" maxlength="20" required=""> <label for="kolMedia_displayName">社群名稱</label>
+                        </div>
+                    </div><!-- /.form-group -->
+                    <!-- .form-group -->
+                    <div class="form-group">
+                        <div class="form-label-group">
+                            <input type="text" id="kolMedia_fansNum" class="form-control" value="0" placeholder="粉絲數" maxlength="20" required=""> <label for="kolMedia_fansNum">粉絲數</label>
+                        </div>
+                    </div><!-- /.form-group -->
+
+                </div><!-- /.modal-body -->
+                <!-- .modal-footer -->
+                <div class="modal-footer">
+                    <button type="button" id="optionItemDialogSaveBtn" class="btn btn-primary">Save</button> <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
                 </div><!-- /.modal-footer -->
             </div><!-- /.modal-content -->
         </div><!-- /.modal-dialog -->

wwwroot/assets/javascript/custom/globalJS.js

@@ -278,3 +278,13 @@ String.prototype.isEmail = function () {
             strr = RegExp.$1;
     return (strr == mail);
 }
+
+function checkUrl(url) {
+    var pattern = new RegExp('^(https?:\\/\\/)?' + // protocol
+        '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
+        '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
+        '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
+        '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
+        '(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator
+    return !!pattern.test(url);
+}

wwwroot/assets/javascript/custom/kollist.js

@@ -1,17 +1,368 @@
 
-$(document).ready(function () {
+var mediaTr;
+var delMedia;
 
+$(document).ready(function () {
+    delMedia = '';
+
+    loadMedia();
     loadKolMakeupCheckboxItem();
     loadKolStyleCheckboxItem();
     loadKolFansTypeCheckboxItem();
 
+    $('#kolSaveBtn').on('click', function () {
+        var method = $('#method').val();
+        var kol_uid = $('#kol_uid').val();
+        var kol_name = $('#kol_name').val();
+        var kol_descript = $('#kol_descript').val();
+        var kol_contact1 = $('#kol_contact1').val();
+        var kol_contact2 = $('#kol_contact2').val();
+        var kol_men_ratio = $('#kol_men_ratio').val();
+        var kol_women_ratio = $('#kol_women_ratio').val();
+        var kol_13_17 = $('#kol_13_17').val();
+        var kol_18_24 = $('#kol_18_24').val();
+        var kol_25_34 = $('#kol_25_34').val();
+        var kol_35_44 = $('#kol_35_44').val();
+        var kol_45_54 = $('#kol_45_54').val();
+        var kol_55_64 = $('#kol_55_64').val();
+        var kol_65 = $('#kol_65').val();
+        var kol_photo = ""
+        var kolMakeupStr = "";
+        var kolStyleStr = "";
+        var kolFansType = "";
+        var mediaArray = [];
+
+        var src = $('#fileupload-avatar').parent().children('img').prop('src');
+        var origin = location.origin;
+        src = src.replace(origin, '');
+        kol_photo = src;
+
+
+        $.each($('input[name="kolMakeup[]"]:checked'), function () {
+            kolMakeupStr = kolMakeupStr + $(this).val() + ",";
+        });
+
+        $.each($('input[name="kolStyle[]"]:checked'), function () {
+            kolStyleStr = kolStyleStr + $(this).val() + ",";
+        });
+
+        $.each($('input[name="fansType[]"]:checked'), function () {
+            kolFansType = kolFansType + $(this).val() + ",";
+        });
+
+        $('#media_table tbody tr').each(function () {
+            var item = {
+                kolMedia_uid: $(this).find('td').eq(5).children('button').eq(0).attr('data-uid'),
+                option_uid: 'media',
+                optionItem_uid: $(this).find('td').eq(5).children('button').eq(0).attr('media-uid'),
+                kolMedia_url: $(this).find('td').eq(1).text().trim(),
+                kolMedia_displayName: $(this).find('td').eq(3).text().trim(),
+                kolMedia_accountName: $(this).find('td').eq(2).text().trim(),
+                kolMedia_fansNum: $(this).find('td').eq(4).text().trim()
+            }
+
+            mediaArray.push(item);
+        });
+
+        var err_msg = "";
+
+        if (kol_name == "") {
+            err_msg += "KOL頻道名稱未填!\n";
+        }
+
+        if (kolMakeupStr == "") {
+            err_msg += "未勾選成員\n";
+        }
+
+        if (kolStyleStr == "") {
+            err_msg += "未勾選KOL 類型\n";
+        }
+
+        if (kolFansType == "") {
+            err_msg += "未勾選粉絲輪廓\n";
+        }
+
+        if (mediaArray.length == 0) {
+            err_msg += "無此KOL社群平台資料!";
+        }
+
+        if (err_msg != "") {
+            alert(err_msg);
+            return;
+        }
+
+        var formData = {
+            method: method,
+            kol_uid: kol_uid,
+            kol_name: kol_name,
+            kol_descript: kol_descript,
+            kol_contact1: kol_contact1,
+            kol_contact2: kol_contact2,
+            kol_men_ratio: kol_men_ratio,
+            kol_women_ratio: kol_women_ratio,
+            kol_13_17: kol_13_17,
+            kol_18_24: kol_18_24,
+            kol_25_34: kol_25_34,
+            kol_35_44: kol_35_44,
+            kol_45_54: kol_45_54,
+            kol_55_64: kol_55_64,
+            kol_65: kol_65,
+            kol_photo: kol_photo,
+            kolMakeupStr: kolMakeupStr,
+            kolStyleStr: kolStyleStr,
+            kolFansType: kolFansType,
+            mediaArrayJson: JSON.stringify(mediaArray)
+        }
+
+        $.ajax({
+            url: "/Api/kolAddEditDelGet",
+            type: "post",
+            data: formData,
+            success: function (data, textStatus, jqXHR) {
+                if (data.ret == "yes") {
+                    
+
+                } else {
+                    alert(data.message);
+
+                    if (data.err_code == "99999") {
+                        location.href = "/Root/Login";
+                    }
+                }
+            },
+            error: function (jqXHR, textStatus, errorThrown) {
+                alert('網路或伺服器發生錯誤，請稍後重試!');
+            }
+        });
+
+    });
+
+    $('#optionItemDialogSaveBtn').on('click', function () {
+        var method = $('#media_method').val();
+        var option_uid = 'media';
+        var kolMedia_name = $("#media_select option:selected").text();
+        var optionItem_uid = $("#media_select").val();
+        var media_uid = $('#media_select').val();
+        var kolMedia_url = $('#kolMedia_url').val();
+        var kolMedia_accountName = $('#kolMedia_accountName').val();
+        var kolMedia_displayName = $('#kolMedia_displayName').val();
+        var kolMedia_fansNum = $('#kolMedia_fansNum').val();
+
+        var err_msg = "";
+
+        if (optionItem_uid == "") {
+            err_msg += "請選擇社群平台\n";
+        }
+
+        if (kolMedia_url == "") {
+            err_msg += "請填入KOL的社群平台網址!\n";
+        }
+
+        if (checkUrl(kolMedia_url) == false) {
+            err_msg += "請填入正確的社群平台網址!\n";
+        }
+
+        if (kolMedia_fansNum.isNumber() == false) {
+            kolMedia_fansNum = 0;
+        }
+
+        if (err_msg != "") {
+            alert(err_msg);
+            return;
+        }
+
+        if (method == "add") {
+            var trHtml = "";
+            trHtml += '<tr>';
+            trHtml += '     <td class="align-middle">  ' + kolMedia_name + ' </td>';
+            trHtml += '     <td class="align-middle"> ' + kolMedia_url + ' </td>';
+            trHtml += '     <td class="align-middle"> ' + kolMedia_accountName + ' </td>';
+            trHtml += '     <td class="align-middle"> ' + kolMedia_displayName + ' </td>';
+            trHtml += '     <td class="align-middle"> ' + kolMedia_fansNum + ' </td>';
+            trHtml += '     <td class="align-middle text-right">';
+            trHtml += '         <button type="button" data-uid="" media-uid="' + optionItem_uid + '" data-method="edit" onclick="buttonClick(this);" class="btn btn-sm btn-icon btn-secondary" data-toggle="modal" data-target="#clientContactEditModal"><i class="fa fa-pencil-alt"></i> <span class="sr-only">Edit</span></button>'; 
+            trHtml += '         <button type="button" data-uid="" media-uid="' + optionItem_uid + '" data-method="del" onclick="buttonClick(this);" class="btn btn-sm btn-icon btn-secondary"><i class="far fa-trash-alt"></i> <span class="sr-only">Remove</span></button>';
+            trHtml += '     </td>';
+            trHtml += '</tr>';
+
+            $('#media_table tbody').append(trHtml);
+            $('#socialItemModal').modal('toggle');
+
+        }
+
+        if (method == "edit") {
+            mediaTr.find('td').eq(0).text(kolMedia_name);
+            mediaTr.find('td').eq(1).text(kolMedia_url);
+            mediaTr.find('td').eq(2).text(kolMedia_accountName);
+            mediaTr.find('td').eq(3).text(kolMedia_displayName);
+            mediaTr.find('td').eq(4).text(kolMedia_fansNum);
+            var method1 = mediaTr.find('td').eq(5).children('button').eq(0).attr('media-uid', optionItem_uid);
+            var mehtod2 = mediaTr.find('td').eq(5).children('button').eq(1).attr('media-uid', optionItem_uid);
+
+            $('#socialItemModal').modal('toggle');
+        }
+
+        
+    });
+
+    $('#socialNewBtn').on('click', function () {
+        //var src = $('#fileupload-avatar').parent().children('img').prop('src');
+        //var origin = location.origin;
+        //src = src.replace(origin, '');
+        //alert(src);
+        $('#media_method').val('add');
+        $('#socialItemModal').modal('toggle');
+    });
+
     $('#kolNewModal').on('click', function () {
+
+
+
+        cleanModalData();
+
         $('#method').val('add');
    
         $('#clientNewModal').modal('toggle');
     });
+
+
+    var url = "/Api/KolPhotoUpload";
+
+    // =============================================================
+
+    $('#fileupload-avatar').fileupload({
+        url: url,
+        dropZone: null,
+        dataType: 'json',
+        autoUpload: true,
+        acceptFileTypes: /(\.|\/)(jpe?g|png)$/i,
+        maxFileSize: 5000000
+    }).on('fileuploadprocessalways', function (e, data) {
+        var index = data.index;
+        var file = data.files[index];
+        $('#avatar-warning-container').removeClass('show').text('');
+
+        if (file.error) {
+            $('#avatar-warning-container').addClass('show').text(file.error);
+        }
+    }).on('fileuploadprogressall', function (e, data) {
+        var progress = parseInt(data.loaded / data.total * 100, 10);
+        $('#progress-avatar').addClass('show').children().css('width', progress + '%');
+    }).on('fileuploaddone', function (e, data) {
+        var file = data.result.files[0];
+        var $img = $(this).parent().children('img');
+        var $old = $img.prop('src');
+
+        if (file.url) {
+            $img.prop('src', file.url);
+        } else if (file.error) {
+            $('#avatar-warning-container').addClass('show').text(file.error);
+        }
+
+        $('#progress-avatar').removeClass('show').children().css('width', 0);
+    }); // File upload using button
+    // =============================================================
 });
 
+function buttonClick(obj) {
+    mediaTr = $(obj).closest('tr');
+
+    var dataMethod = obj.getAttribute('data-method');
+    var dataUid = obj.getAttribute('data-uid');
+    var mediaUid = obj.getAttribute('media-uid');
+    var kolMedia_url = mediaTr.find('td').eq(1).text().trim();
+    var kolMedia_accountName = mediaTr.find('td').eq(2).text().trim();
+    var kolMedia_displayName = mediaTr.find('td').eq(3).text().trim();
+    var kolMedia_fansNum = mediaTr.find('td').eq(4).text().trim();
+
+    if (dataMethod == 'edit') {
+        $('#media_method').val('edit');
+        $('#option_uid').val('media');
+        $('#optionItem_uid').val(mediaUid);
+        $('#kolMedia_uid').val(dataUid);
+        $('#media_select').val(mediaUid);
+        $('#kolMedia_url').val(kolMedia_url).trigger('change');
+        $('#kolMedia_accountName').val(kolMedia_accountName).trigger('change');
+        $('#kolMedia_displayName').val(kolMedia_displayName).trigger('change');
+        $('#kolMedia_fansNum').val(kolMedia_fansNum).trigger('change');
+
+        $('#socialItemModal').modal('toggle');
+    }
+
+    if (dataMethod == "del") {
+        if (confirm('確定刪除此筆資料?')) {
+            var kolMedia_uid = mediaTr.find('td').eq(5).children('button').eq(0).attr('data-uid');
+
+            if (kolMedia_uid != "") {
+                delMedia += kolMedia_uid + ",";
+            }
+
+            mediaTr.remove();
+        }
+    }
+
+}
+function cleanModalData() {
+    $("#method").val("");
+    $("#kol_uid").val("");
+    $("#kol_name").val("");
+    $("#kol_descript").val("");
+    $("input[type=checkbox]").each(function (index, checkbox) {
+        checkbox.checked = false;
+    });
+
+    $('#fileupload-avatar').parent().children('img').prop('src', '/assets/images/avatars/unknown-profile.jpg');
+    $("input[type=text][data-toggle=touchspin]").each(function (index, input) {
+        if ($(input).prop("id") == "kol_men_ratio" || $(input).prop("id") == "kol_women_ratio") {
+            $(input).val("50").trigger("change");
+        } else {
+            $(input).val("0").trigger("change");
+        }
+    });
+
+    var trList = $("#media_table").find("tbody").find("tr");
+    $.each(trList, function (index, item) {
+        $(item).remove();
+    });
+
+
+}
+
+function loadMedia() {
+    var formData = {
+        option_uid: 'media'
+    }
+
+    $.ajax({
+        url: "/Api/optionItemList",
+        type: "post",
+        data: formData,
+        success: function (data, textStatus, jqXHR) {
+            if (data.ret == "yes") {
+                var obj = data.optionItems;
+ 
+                $.each(obj, function (i, item) {
+                    $("#media_select").append($("<option>", {
+                        value: item.optionItem_uid,
+                        text: item.optionItem_name 
+                    }));
+                });
+
+                
+            } else {
+                alert(data.message);
+
+                if (data.err_code == "99999") {
+                    location.href = "/Root/Login";
+                }
+            }
+        },
+        error: function (jqXHR, textStatus, errorThrown) {
+            alert('網路或伺服器發生錯誤，請稍後重試!');
+        }
+    });
+}
+
 function loadKolFansTypeCheckboxItem() {
     var formData = {
         option_uid: 'fansType'
@@ -124,7 +475,7 @@ function optionItemHtml(item) {
     var html = "";
 
     html += "<div class=\"custom-control custom-control-inline custom-checkbox\">";
-    html += "   <input type=\"checkbox\" class=\"custom-control-input\" name=\"kolMakeup[]\" value=\"" + item.optionItem_uid + "\" id=\"" + item.optionItem_uid + "\"> <label class=\"custom-control-label\" for=\"" + item.optionItem_uid + "\">" + item.optionItem_name + "</label>";
+    html += "   <input type=\"checkbox\" class=\"custom-control-input\" name=\"" + item.option_uid + "[]\" value=\"" + item.optionItem_uid + "\" id=\"" + item.optionItem_uid + "\"> <label class=\"custom-control-label\" for=\"" + item.optionItem_uid + "\">" + item.optionItem_name + "</label>";
     html += "</div>";
 
     return html;