mirror of https://github.com/abpframework/eventhub
Berkan Sasmaz
6 years ago
9 changed files with 317 additions and 39 deletions
@ -1,7 +1,110 @@ |
|||||
@page "/organizations/new" |
@page "/organizations/new" |
||||
@inject IHtmlLocalizer<EventHubResource> L |
@inject IHtmlLocalizer<EventHubResource> L |
||||
@using EventHub.Localization |
@using EventHub.Localization |
||||
|
@using EventHub.Organizations |
||||
@using Microsoft.AspNetCore.Mvc.Localization |
@using Microsoft.AspNetCore.Mvc.Localization |
||||
@model EventHub.Web.Pages.Organizations.NewPageModel |
@model EventHub.Web.Pages.Organizations.NewPageModel |
||||
<h1>@L["NewOrganization"]</h1> |
|
||||
<abp-dynamic-form abp-model="Organization" submit-button="true" /> |
@section scripts { |
||||
|
<abp-script-bundle> |
||||
|
<abp-script src="/Pages/Organizations/New.js"/> |
||||
|
</abp-script-bundle> |
||||
|
} |
||||
|
|
||||
|
<div class="container pt-4"> |
||||
|
<div class="row py-4"> |
||||
|
<div class="col-md-9 mx-auto profile-content"> |
||||
|
<div class="card"> |
||||
|
<div class="card-body" style="min-height: 496px"> |
||||
|
<h3 class="mb-4">Create New Organization</h3> |
||||
|
<form method="post" enctype="multipart/form-data"> |
||||
|
<div class="form"> |
||||
|
<div class="row"> |
||||
|
|
||||
|
<div class="col-md-12"> |
||||
|
<h4 class="mb-4">Profile Image</h4> |
||||
|
<div class="row"> |
||||
|
<div class="col-4"> |
||||
|
<div class="image-area"> |
||||
|
<img id="imageResult" src="#" alt="" class="img-fluid rounded shadow-sm mx-auto d-block"> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="col-8"> |
||||
|
<div> |
||||
|
<p class="mb-3">Photo size should be <span class="text-primary">max @(OrganizationConsts.MaxProfilePictureFileSize / (1024 * 1024)) MB.</span></p> |
||||
|
<input type="file" id="Organization_ProfilePictureFile" asp-for="Organization.ProfilePictureFile" class="form-control border-0" hidden> |
||||
|
<label id="upload-label" for="Organization_ProfilePictureFile" class="btn btn-primary btn-lg text-white">Upload</label> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="col-md-6"> |
||||
|
<div class="form-label-group"> |
||||
|
<input type="text" id="inputName" asp-for="Organization.Name" class="form-control" placeholder="Name *" required=""> |
||||
|
<label for="inputName">Name*</label> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="col-md-6"> |
||||
|
<div class="form-label-group"> |
||||
|
<input type="text" id="inputDisplayname" asp-for="Organization.DisplayName" class="form-control" placeholder="Display Name*" required=""> |
||||
|
<label for="inputDisplayname">Display Name*</label> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="col-md-12"> |
||||
|
<div class="form-label-group"> |
||||
|
<input type="text" id="inputDescription" asp-for="Organization.Description" class="form-control" placeholder="Description*" required=""> |
||||
|
<label for="inputDescription">Description*</label> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="col-md-6"> |
||||
|
<div class="form-label-group"> |
||||
|
<input type="text" id="inputWebsite" class="form-control" asp-for="Organization.Website" placeholder="Website"> |
||||
|
<label for="inputWebsite">Website</label> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="col-md-6"> |
||||
|
<div class="form-label-group"> |
||||
|
<input type="text" id="inputTwitterusername" asp-for="Organization.TwitterUsername" class="form-control" placeholder="Twitter Username"> |
||||
|
<label for="inputTwitterusername">Twitter Username</label> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="col-md-6"> |
||||
|
<div class="form-label-group"> |
||||
|
<input type="text" id="inputGitHubusername" asp-for="Organization.GitHubUsername" class="form-control" placeholder="GitHub Username"> |
||||
|
<label for="inputGitHubusername">GitHub Username</label> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="col-md-6"> |
||||
|
<div class="form-label-group"> |
||||
|
<input type="text" id="inputFacebookusername" asp-for="Organization.FacebookUsername" class="form-control" placeholder="Facebook Username"> |
||||
|
<label for="inputFacebookusername">Facebook Username</label> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="col-md-6"> |
||||
|
<div class="form-label-group"> |
||||
|
<input type="text" id="inputInstagramusername" asp-for="Organization.InstagramUsername" class="form-control" placeholder="Instagram Username"> |
||||
|
<label for="inputInstagramusername">Instagram Username</label> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="col-md-6"> |
||||
|
<div class="form-label-group"> |
||||
|
<input type="text" id="inputMediumusername" asp-for="Organization.MediumUsername" class="form-control" placeholder="Medium Username"> |
||||
|
<label for="inputMediumusername">Medium Username</label> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="col-md-12 text-right"> |
||||
|
<button type="submit" class="btn btn-primary btn-lg"> |
||||
|
Submit Organization |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,56 @@ |
|||||
|
$(function () { |
||||
|
var l = abp.localization.getResource('EventHub'); |
||||
|
|
||||
|
var fileInput = document.getElementById('Organization_ProfilePictureFile'); |
||||
|
var file; |
||||
|
|
||||
|
fileInput.addEventListener('change', function () { |
||||
|
|
||||
|
file = fileInput.files[0]; |
||||
|
|
||||
|
var permittedExtensions = ["jpg", "jpeg", "png"] |
||||
|
var fileExtension = $(this).val().split('.').pop(); |
||||
|
if (permittedExtensions.indexOf(fileExtension) === -1) { |
||||
|
abp.message.error(l('OrganizationCoverImageExtensionNotAllowed')) |
||||
|
.then(() => { |
||||
|
$('#Organization_ProfilePictureFile').val(''); |
||||
|
file = null; |
||||
|
}); |
||||
|
} else if (file.size > 1024 * 1024) { |
||||
|
abp.message.error(l('OrganizationCoverImageSizeExceedMessage')) |
||||
|
.then(() => { |
||||
|
$('#Organization_ProfilePictureFile').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 (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); |
||||
|
} |
||||
|
|
||||
|
reader.readAsDataURL(input); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
Loading…
Reference in new issue