tsai
/
eventhub
mirror of https://github.com/abpframework/eventhub
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

fix: cover image problem

pull/79/head
berkansasmaz 5 years ago
parent
93c57a9fcd
commit
b9a482d0c7
No known key found for this signature in database GPG Key ID: 884D815C3F32BE00
5 changed files with 177 additions and 112 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/EventHub.Web/Pages/Events/Components/CreateEventArea/_addTrackSection.cshtml
  2. 17
      src/EventHub.Web/Pages/Events/Components/CreateEventArea/_newEventSection.cshtml
  3. 8
      src/EventHub.Web/Pages/Events/Components/CreateEventArea/_previewSection.cshtml
  4. 168
      src/EventHub.Web/Pages/Events/Components/CreateEventArea/create-event-area.js
  5. 94
      src/EventHub.Web/Pages/Events/New.js

2
src/EventHub.Web/Pages/Events/Components/CreateEventArea/_addTrackSection.cshtml
View File

@ -43,7 +43,7 @@
</div>
<div class="col-6 text-end">
<button id="SkipThisStepButtonInTrackSection" data-target-step="@CreateEventAreaViewComponent.ProgressStepType.Preview" class="btn btn-link step-transition text-decoration-none">Skip This Step</button>
<button id="NextStepButtonInTrackSection" data-target-step="@CreateEventAreaViewComponent.ProgressStepType.NewSession" class="btn btn-primary step-transition">Next Step <i class="fa fa-arrow-right ms-2"></i></button>
<button id="NextStepButtonInTrackSection" data-target-step="@CreateEventAreaViewComponent.ProgressStepType.NewSession" class="btn btn-primary step-transition" @(Model.Any() ? "" : "disabled")>Next Step <i class="fa fa-arrow-right ms-2"></i></button>
</div>
</div>
</div>

17
src/EventHub.Web/Pages/Events/Components/CreateEventArea/_newEventSection.cshtml
View File

@ -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<EventHubUrlOptions> UrlOptions
@{
var organizations = new List<SelectListItem>();
var countries = new List<SelectListItem>();
var languages = new List<SelectListItem>();
var eventId = ViewData["EventId"] as Guid?;
@if (ViewData["StepType"]!.ToString() == CreateEventAreaViewComponent.ProgressStepType.NewEvent.ToString())
{
organizations = ViewData["Organizations"] as List<SelectListItem>;
@ -82,7 +87,14 @@
<h4 class="mb-4">Cover Image</h4>
<div class="row">
<div class="col-6">
<div class="image-area"><img id="imageResult" src="#" alt="" class="img-fluid rounded shadow-sm mx-auto d-block"></div>
@if (eventId.HasValue)
{
<div class="image-area img-fluid rounded shadow-sm mx-auto d-block" style="background-image: url(@(UrlOptions.Value.Api.EnsureEndsWith('/') + $"api/eventhub/event/cover-image/{eventId}")" alt="@Model.Title"></div>
}
else
{
<div class="image-area"><img id="imageResult" src="#" alt="" class="img-fluid rounded shadow-sm mx-auto d-block"></div>
}
</div>
<div class="col-6">
<div>
@ -136,7 +148,8 @@
<span asp-validation-for="@Model.Language" class="text-danger"></span>
</div>
<div class="col-md-12 text-end">
<button id="CreateEventButton" disabled type="submit" class="btn btn-primary btn-lg">
<button id="CreateEventButton" disabled type="submit" class="btn btn-primary btn-lg"
data-url="@(eventId.HasValue ? Url.ActionLink("Update", "Event", new {Area = "eventhub", id = eventId!.Value}, null) : Url.ActionLink("Create", "Event", new {Area = "eventhub"}, null))">
Next Step
</button>
</div>

8
src/EventHub.Web/Pages/Events/Components/CreateEventArea/_previewSection.cshtml
View File

@ -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<EventHubUrlOptions> 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 @@
<span>Cover Image:</span>
</div>
<div class="col-md-8">
<img src="https://api.openeventhub.com/api/eventhub/event/cover-image/3a003fb9-611a-db0c-82b2-7299ff8e8ce7" class="w-100 rounded-3">
<div class="w-100 rounded-3 event-thumbnail" style="background-image: url(@(UrlOptions.Value.Api.EnsureEndsWith('/') + $"api/eventhub/event/cover-image/{eventId}")" alt="@Model.Title"></div>
</div>
</div>
@if (Model.IsOnline != null && Model.IsOnline!.Value)

168
src/EventHub.Web/Pages/Events/Components/CreateEventArea/create-event-area.js
View File

@ -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,

94
src/EventHub.Web/Pages/Events/New.js
View File

@ -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);
}
}
}
});
Write Preview
Loading…
Cancel
Save