update ui

Controllers/ApiController.cs

@@ -76,6 +76,84 @@ namespace Journeys_WantHome.Controllers
             return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
         }
 
+        [Route("subPhotoUpload")]
+        [RequestFormLimits(MultipartBodyLengthLimit = int.MaxValue)]
+        [RequestSizeLimit(int.MaxValue)]
+        public ActionResult SubPhotoUpload([FromForm(Name = "subPhoto")] 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 = "cutPhoto_" + GlobalClass.CreateRandomCode(8) + Path.GetExtension(originFileName);
+            string fullPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/images/cut/" + 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/cut/" + newFileName;
+                newFile.size = file.Length;
+                newFile.thumbnailUrl = "/images/cut/" + newFileName;
+                newFile.deleteUrl = "/images/cut/" + 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("updateTags")]
         public ActionResult UpdateTags(IFormCollection obj) {
             updatTagResult ret = new updatTagResult();

Journeys_WantHome.csproj

@@ -41,6 +41,7 @@
     <Folder Include="wwwroot\assets\vendor\stacked-menu\scss\" />
     <Folder Include="wwwroot\assets\vendor\toastr\tests\" />
     <Folder Include="wwwroot\images\avatar\" />
+    <Folder Include="wwwroot\images\cut\" />
   </ItemGroup>
 
   <ItemGroup>

Models/DbTableClass.cs

@@ -51,6 +51,8 @@ public class DbTableClass
         public string kolProjectImage_uid { get; set; } = "";
         public string kolProject_uid { get; set; } = "";
         public string kolProjectImage_photo { get; set; } = "";
+
+        public string kolProjectImage_desc { get; set; } = "";
         public DateTime kolProjectImage_createdate { get; set; } = DateTime.Now;
     }
 

Views/Home/KolList.cshtml

@@ -518,7 +518,8 @@
                                             <thead>
                                                 <tr>
 
-                                                    <th> 截圖 </th>
+                                                    <th style ="width: 30%;"> 截圖 </th>
+                                                    <th> 說明文字</th>
                                                     <th style="width: 20%;"></th>
                                                 </tr>
                                             </thead>
@@ -621,3 +622,98 @@
         </div><!-- /.modal-dialog -->
     </div>
 </form><!-- /.modal -->
+<!-- .modal -->
+<form id="clientKolProjectUrlForm" name="clientKolProjectUrlForm">
+    <div class="modal fade" id="clientKolProjectUrlModal" tabindex="-1" role="dialog" aria-labelledby="clientKolProjectUrlLabel" 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="optionCooper_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="kolProjectUrl_method" />
+                    <input type="hidden" id="kolProjectUrl_uid" />
+           
+                    
+                    <!-- .form-group -->
+                    <div class="form-group">
+                        <div class="form-label-group">
+                            <input type="text" id="kolProjectLink_url" class="form-control" value="" placeholder="連結" required=""> <label for="kolProjectLink_url">連結</label>
+                        </div>
+                    </div><!-- /.form-group -->
+                    <!-- .form-group -->
+                    <div class="form-group">
+                        <div class="form-label-group">
+                            <input type="text" id="kolProjectLink_text" class="form-control" value="" placeholder="連結名稱" maxlength="45" required=""> <label for="kolProjectLink_text">連結名稱</label>
+                        </div>
+                    </div><!-- /.form-group -->
+                    
+
+
+                </div><!-- /.modal-body -->
+                <!-- .modal-footer -->
+                <div class="modal-footer">
+                    <button type="button" id="clientKolProjectUrlDialogSaveBtn" class="btn btn-primary">Save</button> <button type="button" class="btn btn-light" data-toggle="modal" data-target="#clientKolProjectUrlModal">Close</button>
+                </div><!-- /.modal-footer -->
+            </div><!-- /.modal-content -->
+        </div><!-- /.modal-dialog -->
+    </div>
+</form><!-- /.modal -->
+
+<!-- .modal -->
+<form id="clientCutPhotoForm" name="clientCutPhotoForm">
+    <div class="modal fade" id="clientCutPhotoModal" tabindex="-1" role="dialog" aria-labelledby="clientCutPhotoModalLabel" 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="optionPhoto_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="photo_method" />
+                    <input type="hidden" id="photo_uid" />
+            
+                    <div class="form-group">
+                        <div class="card-body">
+                            <!-- .media -->
+                            <div class="media">
+                                <div class="user-avatar user-avatar-xxl fileinput-button">
+                                    <div class="fileinput-button-label"> Change photo </div><img src="~/BackEnd/assets/images/avatars/unknown-profile.jpg" alt=""> <input id="fileupload-subPhoto" type="file" accept="image/*" name="subPhoto">
+                                </div>
+                                <div class="media-body pl-3">
+                                    <h3 class="card-title"> 輪播圖片 </h3>
+                                    <p class="card-text"> 點擊圖片可更換照片. </p>
+                                    <p class="card-text text-muted"> 最大容許檔案大小為 5MB. </p>
+                                </div>
+                            </div><!-- /.media -->
+                        </div>
+                    </div>
+
+                    <!-- .form-group -->
+                    <div class="form-group">
+                        <div class="form-label-group">
+                            <input type="text" id="photo_title" class="form-control" value="" placeholder="圖片說明" maxlength="50" required=""> <label for="photo_title">圖片說明</label>
+                        </div>
+                    </div><!-- /.form-group -->
+
+
+                </div><!-- /.modal-body -->
+                <!-- .modal-footer -->
+                <div class="modal-footer">
+                    <button type="button" id="clientCutPhotoSaveBtn" class="btn btn-primary">Save</button> <button type="button" class="btn btn-light" data-toggle="modal" data-target="#clientCutPhotoModal">Close</button>
+                </div><!-- /.modal-footer -->
+            </div><!-- /.modal-content -->
+        </div><!-- /.modal-dialog -->
+    </div>
+</form><!-- /.modal -->

wwwroot/assets/javascript/custom/kollist.js

@@ -5,6 +5,8 @@ var mainTable;
 var mainRowID;
 var mainPos;
 var specTr;
+var linkTr;
+var photoTr;
 $(document).ready(function () {
     delMedia = '';
     loadTagsInput();
@@ -17,6 +19,7 @@ $(document).ready(function () {
     loadyearmonth();
     loadprojectList();
     clearKolProjectTable();
+    initSubPhotoUpload();
 
     $('#kolSaveBtn').on('click', function () {
         var method = $('#method').val();
@@ -252,6 +255,130 @@ $(document).ready(function () {
         $('#clientNewModal').modal('toggle');
     });
 
+    $('#addCutBtn').on('click', function () {
+        //var src = $('#fileupload-avatar').parent().children('img').prop('src');
+        //var origin = location.origin;
+        //src = src.replace(origin, '');
+        //alert(src);
+        $('#fileupload-subPhoto').parent().children('img').prop('src', '/assets/images/avatars/unknown-profile.jpg');
+
+        $('#photo_method').val('add');
+        $('#photo_title').val('').trigger('change');
+        $('#clientCutPhotoModal').modal('toggle');
+    });
+
+    $('#kolProjectLink_url').on('change', function () {
+        if ($('#kolProjectLink_text').val() == '') { 
+            $('#kolProjectLink_text').val($('#kolProjectLink_url').val()).trigger('change');
+        }   
+    });
+
+    //截圖儲存
+    $('#clientCutPhotoSaveBtn').on('click', function () {
+        var method = $('#photo_method').val();
+       
+        var photo_uid = $('#photo_uid').val();
+        var photo_title = $('#photo_title').val();
+        var sub_photo = "";
+
+        var src = $('#fileupload-subPhoto').parent().children('img').prop('src');
+        var origin = location.origin;
+        src = src.replace(origin, '');
+        sub_photo = src;
+
+        var err_msg = "";
+
+        
+
+        if (src == '/assets/images/avatars/unknown-profile.jpg') {
+            err_msg += "請選擇要顯示的圖片!\n";
+        }
+
+        if (err_msg != "") {
+            alert(err_msg);
+            return;
+        }
+
+        if (method == "add") {
+            var ret = '';
+            ret += '<div class="user-avatar user-avatar-xxl">';
+            ret += '    <a href="' + sub_photo + '" target="_blank"><img style="border: 0;" src="' + sub_photo + '" alt=""></a>';
+            ret += '</div>';
+
+            var trHtml = "";
+            trHtml += '<tr>';
+            trHtml += '     <td class="align-middle">  ' + ret + ' </td>';
+
+            trHtml += '     <td class="align-middle"> ' + photo_title + ' </td>';
+            trHtml += '     <td class="align-middle text-right">';
+            trHtml += '         <button type="button" data-uid="" media-uid="' + photo_uid + '" data-method="edit" onclick="buttonPhotoClick(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="' + photo_uid + '" data-method="del" onclick="buttonPhotoClick(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>';
+
+            $('#cut_table tbody').append(trHtml);
+            $('#clientCutPhotoModal').modal('toggle');
+
+        }
+
+        if (method == "edit") {
+            photoTr.find('td').eq(0).find('a').prop('href', sub_photo);
+            photoTr.find('td').eq(0).find('img').prop('src', sub_photo);
+            photoTr.find('td').eq(1).text(photo_title);
+
+
+
+            $('#clientCutPhotoModal').modal('toggle');
+        }
+    });
+
+    //上刊連結儲存
+    $('#clientKolProjectUrlDialogSaveBtn').on('click', function () {
+        var method = $('#kolProjectUrl_method').val();
+        var url = $('#kolProjectLink_url').val();
+        var url_text = $('#kolProjectLink_text').val();
+
+        var err_msg = "";
+
+        if (url == "") {
+            err_msg += "請輸入網址\n";
+        }
+
+        if (err_msg != "") {
+            alert(err_msg);
+            return;
+        }
+
+        if (url_text == "") {
+            url_text = url;
+        }
+
+        if (method == 'add') {
+            var trHtml = "";
+            trHtml += '<tr>';
+            trHtml += '     <td class="align-middle">  <a href="' + url + '" target="_blank" class="link">' + url_text + '</a></td>';
+            trHtml += '     <td class="align-middle" style="display: none;"> ' + url + ' </td>';
+            trHtml += '     <td class="align-middle" style="display: none;"> ' + url_text + ' </td>';
+           
+            trHtml += '     <td class="align-middle text-right">';
+            trHtml += '         <button type="button" data-uid="" media-uid="" data-method="edit" onclick="linkEditClick(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="" data-method="del" onclick="linkEditClick(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>';
+
+            $('#link_table tbody').append(trHtml);
+            $('#clientKolProjectUrlModal').modal('toggle');
+        }
+
+        if (method == 'edit') {
+            linkTr.find('td').eq(0).children('a').eq(0).attr('href', url).text(url_text);
+            linkTr.find('td').eq(1).text(url);
+            linkTr.find('td').eq(2).text(url_text);
+            $('#clientKolProjectUrlModal').modal('toggle');
+        }
+
+    });
+
     //報價規則儲存
     $('#kolProjectPriceDialogSaveBtn').on('click', function () {
         var method = $('#kolProjectPrice_method').val();
@@ -358,6 +485,13 @@ $(document).ready(function () {
         loadkolMediaSpec();
         $('#clientKolProjectMediaPriceEditModal').modal('toggle');
     });
+
+    $('#addLinkBtn').on('click', function () {
+        $('#kolProjectUrl_method').val('add');
+        $('#kolProjectLink_url').val('').trigger('change');
+        $('#kolProjectLink_text').val('').trigger('change');
+        $('#clientKolProjectUrlModal').modal('toggle');
+    });
     function loadDataTable() {
         var dataTables = {
             init: function init() {
@@ -716,6 +850,57 @@ function loadCooperateItem() {
     });
 }
 
+function buttonPhotoClick(obj) {
+    photoTr = $(obj).closest('tr');
+
+    var dataMethod = obj.getAttribute('data-method');
+    var dataUid = obj.getAttribute('data-uid');
+    var photo_uid = obj.getAttribute('media-uid');
+    var photo_src = photoTr.find('td').eq(0).find('img').prop('src').trim();
+    var photo_title = photoTr.find('td').eq(1).text().trim();
+
+    var origin = location.origin;
+    photo_src = photo_src.replace(origin, '');
+
+    if (dataMethod == 'edit') {
+        $('#photo_method').val('edit');
+        $('#photo_uid').val(photo_uid);
+
+        $('#fileupload-subPhoto').parent().children('img').prop('src', photo_src);
+
+        $('#photo_title').val(photo_title).trigger('change');
+
+        $('#clientCutPhotoModal').modal('toggle');
+    }
+
+    if (dataMethod == "del") {
+        if (confirm('確定刪除此筆資料?')) {
+
+
+            photoTr.remove();
+        }
+    }
+}
+function linkEditClick(obj) {
+    linkTr = $(obj).closest('tr');
+    var dataMethod = obj.getAttribute('data-method');
+    var url = linkTr.find('td').eq(1).text().trim();
+    var url_text = linkTr.find('td').eq(2).text().trim();
+
+    if (dataMethod == 'edit') {
+        $('#kolProjectUrl_method').val('edit');
+        $('#kolProjectLink_url').val(url).trigger('change');
+        $('#kolProjectLink_text').val(url_text).trigger('change');
+        $('#clientKolProjectUrlModal').modal('toggle');
+    }
+
+    if (dataMethod == "del") {
+        if (confirm('確定刪除此筆資料?')) {
+            
+            linkTr.remove();
+        }
+    }
+}
 function specButtonClick(obj) {
     specTr = $(obj).closest('tr');
 
@@ -1238,3 +1423,42 @@ function clearKolProjectTable() {
         $(item).remove();
     });
 }
+
+function initSubPhotoUpload() {
+    var url = "/Api/subPhotoUpload";
+
+    // =============================================================
+
+    $('#fileupload-subPhoto').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
+    // =============================================================
+}