From b9a482d0c7c59dd354925fb1a8daa981715f85ac Mon Sep 17 00:00:00 2001 From: berkansasmaz Date: Fri, 17 Dec 2021 11:46:25 +0300 Subject: [PATCH] fix: cover image problem --- .../CreateEventArea/_addTrackSection.cshtml | 2 +- .../CreateEventArea/_newEventSection.cshtml | 17 +- .../CreateEventArea/_previewSection.cshtml | 8 +- .../CreateEventArea/create-event-area.js | 168 ++++++++++++++++-- src/EventHub.Web/Pages/Events/New.js | 94 ---------- 5 files changed, 177 insertions(+), 112 deletions(-) diff --git a/src/EventHub.Web/Pages/Events/Components/CreateEventArea/_addTrackSection.cshtml b/src/EventHub.Web/Pages/Events/Components/CreateEventArea/_addTrackSection.cshtml index 6949117..baf348f 100644 --- a/src/EventHub.Web/Pages/Events/Components/CreateEventArea/_addTrackSection.cshtml +++ b/src/EventHub.Web/Pages/Events/Components/CreateEventArea/_addTrackSection.cshtml @@ -43,7 +43,7 @@
- +
diff --git a/src/EventHub.Web/Pages/Events/Components/CreateEventArea/_newEventSection.cshtml b/src/EventHub.Web/Pages/Events/Components/CreateEventArea/_newEventSection.cshtml index 45ced9d..fe36e60 100644 --- a/src/EventHub.Web/Pages/Events/Components/CreateEventArea/_newEventSection.cshtml +++ b/src/EventHub.Web/Pages/Events/Components/CreateEventArea/_newEventSection.cshtml @@ -1,11 +1,16 @@ +@using EventHub.Web @using EventHub.Web.Pages.Events.Components.CreateEventArea @using Microsoft.AspNetCore.Http +@using Microsoft.Extensions.Options @model EventHub.Web.Pages.Events.Components.CreateEventArea.CreateEventAreaViewComponent.NewEventViewModel +@inject IOptions UrlOptions @{ var organizations = new List(); var countries = new List(); var languages = new List(); + var eventId = ViewData["EventId"] as Guid?; + @if (ViewData["StepType"]!.ToString() == CreateEventAreaViewComponent.ProgressStepType.NewEvent.ToString()) { organizations = ViewData["Organizations"] as List; @@ -82,7 +87,14 @@

Cover Image

-
+ @if (eventId.HasValue) + { +
+ } + else + { +
+ }
@@ -136,7 +148,8 @@
-
diff --git a/src/EventHub.Web/Pages/Events/Components/CreateEventArea/_previewSection.cshtml b/src/EventHub.Web/Pages/Events/Components/CreateEventArea/_previewSection.cshtml index 208d046..4452114 100644 --- a/src/EventHub.Web/Pages/Events/Components/CreateEventArea/_previewSection.cshtml +++ b/src/EventHub.Web/Pages/Events/Components/CreateEventArea/_previewSection.cshtml @@ -1,13 +1,19 @@ +@using EventHub.Web @using EventHub.Web.Pages.Events @using EventHub.Web.Pages.Events.Components.CreateEventArea @using Microsoft.AspNetCore.Http +@using Microsoft.Extensions.Options @model EventHub.Web.Pages.Events.Components.CreateEventArea.CreateEventAreaViewComponent.NewEventViewModel +@inject IOptions UrlOptions @{ var organizationName = ""; var countryName = ""; + Guid? eventId = null; @if (ViewData["StepType"]!.ToString() == CreateEventAreaViewComponent.ProgressStepType.Preview.ToString()) { + eventId = ViewData["EventId"] as Guid?; + organizationName = ViewData["OrganizationName"] as string; if (organizationName.IsNullOrWhiteSpace()) { @@ -74,7 +80,7 @@ Cover Image:
- +
@if (Model.IsOnline != null && Model.IsOnline!.Value) diff --git a/src/EventHub.Web/Pages/Events/Components/CreateEventArea/create-event-area.js b/src/EventHub.Web/Pages/Events/Components/CreateEventArea/create-event-area.js index b14c15f..cca2eab 100644 --- a/src/EventHub.Web/Pages/Events/Components/CreateEventArea/create-event-area.js +++ b/src/EventHub.Web/Pages/Events/Components/CreateEventArea/create-event-area.js @@ -1,5 +1,6 @@ (function () { abp.widgets.CreateEventArea = function ($wrapper) { + var l = abp.localization.getResource('EventHub'); toastr.options.timeOut = 500; toastr.options.preventDuplicates = true; @@ -28,7 +29,9 @@ $('#CreateEventButton').removeAttr('disabled') FocusTrackNameInputInModalEventHandler("AddTrackModal") FocusTrackNameInputInModalEventHandler("EditTrackModal") - + NewEventFormInputAreaChangeHandler(); + FilFileInputChangeEventHandler(); + if (eventIdInput.val().length === 36) { // TODO: Add organization in UppdateEventDto $('#OrganizationId').prop("disabled", true).removeAttr('name'); @@ -39,21 +42,46 @@ if (!$(this).valid()) { return false; } - var input = $(this).serializeFormToObject(); + + var formData = new FormData(); + formData = FillNewEventFormData(formData); + var httpMetod = 'POST' if (eventIdInput.val().length === 36) { - eventApiService.update(eventIdInput.val(), input).then(function () { - abp.notify.success('Updated event'); - SwitchToTrackCreation() - }); - } else { - eventApiService.create(input).then(function (eventCreatedResponse) { - abp.notify.success('Created event as a draft'); - eventIdInput.val(eventCreatedResponse.id); - eventUrlCodeInput.val(eventCreatedResponse.urlCode); - SwitchToTrackCreation() - }); + httpMetod = 'PUT' } + + $.ajax({ + xhr: function() { + var xhr = new window.XMLHttpRequest(); + xhr.upload.addEventListener("progress", function(evt) { + if (evt.lengthComputable) { + var percentComplete = evt.loaded / evt.total; + percentComplete = parseInt(percentComplete * 100); + if(percentComplete !== 100){ + $('#CreateEventButton').prop( "disabled", true); + } + } + }, false); + + return xhr; + }, + url: $('#CreateEventButton').data('url'), + data: formData, + type: httpMetod, + contentType: false, + processData: false, + success: function(response){ + if (eventIdInput.val().length === 36) { + abp.notify.success('Updated event'); + }else{ + abp.notify.success('Created event as a draft'); + eventIdInput.val(response.id); + eventUrlCodeInput.val(response.urlCode); + } + SwitchToTrackCreation() + } + }); }); function SwitchToTrackCreation() { @@ -61,7 +89,7 @@ $('#CreateTrackContainer').css('display', ''); ScrollToWrapperBegin(); } - + AddNewTrackSubmitFormEventHandler(); OpenEditTrackModalClickEventHandler(); EditTrackSubmitFormEventHandler(); @@ -75,6 +103,23 @@ PrevieousOrNextStepTransitionEventHandler() }; + + function FillNewEventFormData(formData) { + var fileInput = document.getElementById('Event_CoverImageFile'); + formData.append("OrganizationId", $('#OrganizationId').val().trim()); + formData.append("Title", $('#inputTitle').val().trim()); + formData.append("StartTime", $('#inputStartdate').val().trim()); + formData.append("EndTime", $('#inputEnddate').val().trim()); + formData.append("Description", $('#inputDescription').val().trim()); + formData.append("CoverImageStreamContent", fileInput.files[0]); + formData.append("IsOnline", $('#IsOnline').val().trim()); + formData.append("OnlineLink", $('#inputOnlineLink').val().trim()); + formData.append("CountryId", $('#CountryId').val().trim()); + formData.append("City", $('#inputCity').val().trim()); + formData.append("Language", $('#Language').val().trim()); + formData.append("Capacity", $('#inputCapacity').val().trim()); + return formData; + } function AddNewTrackSubmitFormEventHandler() { var addNewTrackForm = $('#AddNewTrackForm'); @@ -328,6 +373,101 @@ $('button[type=submit]').removeAttr('disabled') } } + + function NewEventFormInputAreaChangeHandler() { + var isOnline = $("#IsOnline option:selected").val() + if (isOnline === "True") { + $(".event-link-group").show(); + $(".event-location-group").hide(); + } else { + $(".event-link-group").hide(); + $(".event-location-group").show(); + } + + $('#IsOnline').on('change', '', function () { + var isOnline = $("#IsOnline option:selected").val() + if (isOnline === "True") { + $("#CountryId").attr("required", false); + $("#inputCity").attr("required", false); + $(".event-link-group").show(); + $(".event-location-group").hide(); + } else { + $("#CountryId").attr("required", true); + $("#inputCity").attr("required", true); + $(".event-link-group").hide(); + $(".event-location-group").show(); + } + }); + } + + function FilFileInputChangeEventHandler() { + var file; + var infoArea = document.getElementById('upload-label'); + var fileInput = document.getElementById('Event_CoverImageFile'); + + if (fileInput !== null) { + fileInput.addEventListener('change', function () { + var showFile = true; + + file = fileInput.files[0]; + + if (file === undefined) { + $('#Event_CoverImageFile').val(''); + $('#imageResult').attr('src', '#'); + infoArea.textContent = 'Choose file' + return; + } + + var permittedExtensions = ["jpg", "jpeg", "png"] + var fileExtension = $(this).val().split('.').pop(); + if (permittedExtensions.indexOf(fileExtension) === -1) { + showFile = false; + abp.message.error(l('EventCoverImageExtensionNotAllowed')) + .then(() => { + $('#Event_CoverImageFile').val(''); + file = null; + }); + } else if (file.size > 1024 * 1024) { + showFile = false; + abp.message.error(l('EventCoverImageSizeExceedMessage')) + .then(() => { + $('#Event_CoverImageFile').val(''); + file = null; + }); + } + + var img = new Image(); + img.onload = function () { + var imageError = true; + var sizes = { + width: this.width, + height: this.height + }; + URL.revokeObjectURL(this.src); + + if (showFile && imageError) { + readURL(file); + } + } + + var objectURL = URL.createObjectURL(file); + img.src = objectURL; + }); + + function readURL(input) { + if (input) { + var reader = new FileReader(); + + reader.onload = function (e) { + $('#imageResult').attr('src', e.target.result); + infoArea.textContent = 'File name: ' + input.name; + } + + reader.readAsDataURL(input); + } + } + } + } return { getFilters: getFilters, diff --git a/src/EventHub.Web/Pages/Events/New.js b/src/EventHub.Web/Pages/Events/New.js index cbb895e..e69de29 100644 --- a/src/EventHub.Web/Pages/Events/New.js +++ b/src/EventHub.Web/Pages/Events/New.js @@ -1,94 +0,0 @@ -$(function () { - var l = abp.localization.getResource('EventHub'); - - var isOnline = $("#Event_IsOnline option:selected").val() - if (isOnline === "True") { - $(".event-link-group").show(); - $(".event-location-group").hide(); - } else { - $(".event-link-group").hide(); - $(".event-location-group").show(); - } - - $('#Event_IsOnline').on('change', '', function () { - var isOnline = $("#Event_IsOnline option:selected").val() - if (isOnline === "True") { - $("#Event_CountryId").attr("required", false); - $("#inputCity").attr("required", false); - $(".event-link-group").show(); - $(".event-location-group").hide(); - } else { - $("#Event_CountryId").attr("required", true); - $("#inputCity").attr("required", true); - $(".event-link-group").hide(); - $(".event-location-group").show(); - } - }); - - var infoArea = document.getElementById('upload-label'); - var fileInput = document.getElementById('Event_CoverImageFile'); - var file; - - if (fileInput !== null) { - fileInput.addEventListener('change', function () { - var showFile = true; - - file = fileInput.files[0]; - - if (file === undefined) { - $('#Event_CoverImageFile').val(''); - $('#imageResult').attr('src', '#'); - infoArea.textContent = 'Choose file' - return; - } - - var permittedExtensions = ["jpg", "jpeg", "png"] - var fileExtension = $(this).val().split('.').pop(); - if (permittedExtensions.indexOf(fileExtension) === -1) { - showFile = false; - abp.message.error(l('EventCoverImageExtensionNotAllowed')) - .then(() => { - $('#Event_CoverImageFile').val(''); - file = null; - }); - } else if (file.size > 1024 * 1024) { - showFile = false; - abp.message.error(l('EventCoverImageSizeExceedMessage')) - .then(() => { - $('#Event_CoverImageFile').val(''); - file = null; - }); - } - - var img = new Image(); - img.onload = function () { - var imageError = true; - var sizes = { - width: this.width, - height: this.height - }; - URL.revokeObjectURL(this.src); - - if (showFile && imageError) { - readURL(file); - } - } - - var objectURL = URL.createObjectURL(file); - img.src = objectURL; - }); - - function readURL(input) { - if (input) { - var reader = new FileReader(); - - reader.onload = function (e) { - $('#imageResult').attr('src', e.target.result); - infoArea.textContent = 'File name: ' + input.name; - } - - reader.readAsDataURL(input); - } - } - } -}); \ No newline at end of file