refactor event track and session system

5 years ago · 273d41775b
7 changed files with 156 additions and 47 deletions
--- a/src/EventHub.Domain.Shared/Localization/EventHub/en.json
+++ b/src/EventHub.Domain.Shared/Localization/EventHub/en.json
@ -18,7 +18,7 @@
    "DisplayName:Capacity": "Capacity",
    "EventHub:OrganizationNameAlreadyExists": "The organization {Name} already exists. Please use another name.",
    "EventHub:NotAuthorizedToCreateEventInThisOrganization": "You are not authorized to create events for the organization {0}.",
-    "EventHub:EventEndTimeCantBeEarlierThanStartTime": "Event end time can not be earlier than the start time.",
+    "EventHub:EndTimeCantBeEarlierThanStartTime": "Event end time can not be earlier than the start time.",
    "EventHub:CantRegisterOrUnregisterForAPastEvent": "Can not register to or unregister from an event in the past.",
    "Events": "Events",
    "Members": "Members",
--- a/src/EventHub.Web/Pages/Events/Components/CreateEventArea/_addSessionSection.cshtml
+++ b/src/EventHub.Web/Pages/Events/Components/CreateEventArea/_addSessionSection.cshtml
@ -66,12 +66,12 @@
                                                    <span class="d-block mb-2">@speaker.UserName</span>
                                                }
                                                <abp-row>
-                                                    <abp-column size="_3">
+                                                    <abp-column size="_5">
                                                        <a id="@session.Id" data-track-id="@track.Id" href="javascript:;" data-bs-toggle="modal" data-bs-target="#EditSessionModal" class="mt-3 d-block text-info edit-session-button">
                                                            <small><i class="fa fa-edit me-1"></i>Edit</small>
                                                        </a>
                                                    </abp-column>
-                                                    <abp-column size="_3">
+                                                    <abp-column size="_6">
                                                        <a id="@session.Id" data-track-id="@track.Id" href="javascript:;" class="mt-3 d-block text-info delete-session-button">
                                                            <small><i class="fa fa-trash me-1"></i>Delete</small>
                                                        </a>
--- a/src/EventHub.Web/Pages/Events/Components/CreateEventArea/_newEventSection.cshtml
+++ b/src/EventHub.Web/Pages/Events/Components/CreateEventArea/_newEventSection.cshtml
@ -89,12 +89,14 @@
                      <div class="col-6">
                        @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>
+                          <div id="" 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>
+                          <div class="image-area result-area" style="display: none"><img id="imageResult" src="#" alt="" class="img-fluid rounded shadow-sm mx-auto d-block"></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>
--- a/src/EventHub.Web/Pages/Events/Components/CreateEventArea/_previewSection.cshtml
+++ b/src/EventHub.Web/Pages/Events/Components/CreateEventArea/_previewSection.cshtml
@ -193,7 +193,7 @@
                                        {
                                            <div class="track-item text-center">
                                                <span class="track-name text-primary"><i class="fas fa-exclamation-circle"></i> There is no session!</span>
-                                                 <span class="d-block mb-2 mt-3">Please add session.</span>
+                                                <span class="d-block mb-2 mt-3">Tracks without Session are not visible after the event is published.</span>
                                            </div>
                                        }
                                    </td>
--- a/src/EventHub.Web/Pages/Events/Components/CreateEventArea/create-event-area.js
+++ b/src/EventHub.Web/Pages/Events/Components/CreateEventArea/create-event-area.js
@ -79,6 +79,15 @@
                            eventUrlCodeInput.val(response.urlCode);
                        }
                        SwitchToTrackCreation()
+                    },
+                    error: function (errorRaw) {
+                        abp.notify.error(errorRaw.responseJSON.error.message, 'Error', 
+                            toastr.options = {
+                                timeOut: 2500,
+                                progressBar: true,
+                                positionClass: "toast-bottom-right"
+                            }
+                        );
                    }
                });
            });
@ -392,9 +401,13 @@
        function NewEventFormInputAreaChangeHandler() {
            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();
            }
@ -464,7 +477,7 @@
                            readURL(file);
                        }
                    }
-
+                    
                    var objectURL = URL.createObjectURL(file);
                    img.src = objectURL;
                });
@ -474,6 +487,10 @@
                        var reader = new FileReader();

                        reader.onload = function (e) {
+                            if (eventIdInput.val().length === 36){
+                                $('.image-area').css('display', 'none').removeClass('d-block');
+                                $('.result-area').css('display', '');
+                            }
                            $('#imageResult').attr('src', e.target.result);
                            infoArea.textContent = 'File name: ' + input.name;
                        }
--- a/src/EventHub.Web/Pages/Events/Detail.cshtml
+++ b/src/EventHub.Web/Pages/Events/Detail.cshtml
@ -73,16 +73,74 @@
        </div>
        <div class="row">
            <div class="col-md-7">
-                <h5 class="detail-head mt-5 font-weight-bold">Event Description</h5>
-                <p id="EventDescription">
-                    @Model.Event.Description
-                </p>
+                @if (Model.Event.Tracks.Any())
+                {
+                    <abp-tabs>
+                        <abp-tab class="tab" title="Description">
+                            <h5 class="detail-head mt-5 font-weight-bold">Event Description</h5>
+                            <p id="EventDescription">
+                                @Model.Event.Description
+                            </p>
+
+                            <h5 class="detail-head mt-5 font-weight-bold">Date</h5>
+                            <p>
+                                @EventDateHelper.GetDateRangeText(Model.Event.StartTime, Model.Event.EndTime)
+                            </p>
+                            @await Component.InvokeAsync(typeof(AttendeesAreaViewComponent), new { eventId = Model.Event.Id })
+                        </abp-tab>
+                        <abp-tab class="tab" title=" Track / Session">
+                            <table class="table">
+                                <thead>
+                                <tr>
+                                    @foreach (var track in Model.Event.Tracks)
+                                    {
+                                        @if (track.Sessions.Any())
+                                        {
+                                            <th class="text-center" width="25%">@track.Name</th>
+                                        }
+                                    }
+                                </tr>
+                                </thead>
+                                <tbody>
+                                <tr>
+                                    @foreach (var track in Model.Event.Tracks)
+                                    {
+                                        @if (track.Sessions.Any())
+                                        {
+                                            <td>
+                                                @foreach (var session in track.Sessions)
+                                                {
+                                                    <div class="track-item">
+                                                        <span class="track-name">@session.Title.TruncateWithPostfix(25)</span>
+                                                        <small class="text-primary d-block my-2">@EventDateHelper.GetTimeRangeText(TimeOnly.FromDateTime(session.StartTime), TimeOnly.FromDateTime(session.EndTime)) | @session.Language</small>
+                                                        @foreach (var speaker in session.Speakers)
+                                                        {
+                                                            <span class="d-block mb-2">@speaker.UserName</span>
+                                                        }
+                                                    </div>
+                                                }
+                                            </td>
+                                        }
+                                    }
+                                </tr>
+                                </tbody>
+                            </table>
+                        </abp-tab>
+                    </abp-tabs> 
+                }
+                else
+                {
+                    <h5 class="detail-head mt-5 font-weight-bold">Event Description</h5>
+                    <p id="EventDescription">
+                        @Model.Event.Description
+                    </p>

-                <h5 class="detail-head mt-5 font-weight-bold">Date</h5>
-                <p>
-                    @EventDateHelper.GetDateRangeText(Model.Event.StartTime, Model.Event.EndTime)
-                </p>
-                @await Component.InvokeAsync(typeof(AttendeesAreaViewComponent), new {eventId = Model.Event.Id})
+                    <h5 class="detail-head mt-5 font-weight-bold">Date</h5>
+                    <p>
+                        @EventDateHelper.GetDateRangeText(Model.Event.StartTime, Model.Event.EndTime)
+                    </p>
+                    @await Component.InvokeAsync(typeof(AttendeesAreaViewComponent), new { eventId = Model.Event.Id })
+                }
            </div>
        </div>
    </div>
@ -102,4 +160,4 @@
        MaxResultCount = 6,
        isPagination = false
    })
-</div>
+</div>
--- a/src/EventHub.Web/wwwroot/global-styles.css
+++ b/src/EventHub.Web/wwwroot/global-styles.css
@ -3,8 +3,9 @@
 .border-light {
    border-color: #E1E5E9 !important;
 }
-.text-info { 
-    color: #6F32E2!important;
+
+.text-info {
+    color: #6F32E2 !important;
 }


@ -34,8 +35,8 @@

 .progresses ul li.create-steps.blue {
    color: #fff;
-    background-color: #00044A;  
-    border-color: #00044A;  
+    background-color: #00044A;
+    border-color: #00044A;
 }

 .progresses ul li.create-steps span {
@ -44,12 +45,12 @@
    left: -30px;
    font-size: 0.8rem;
    width: 90px;
-    color:#bfc6cd;
-} 
+    color: #bfc6cd;
+}

-.progresses ul li.create-steps.blue  span { 
-    color:#00044A;
-} 
+.progresses ul li.create-steps.blue span {
+    color: #00044A;
+}

 .progresses .progress {
    height: 2px;
@ -59,64 +60,73 @@
    background-color: #DCE0E5;
    border-radius: 10px
 }
-.progress-bar { 
-    background-color: #00044A; 
+
+.progress-bar {
+    background-color: #00044A;
 }

-.nav-pills .nav-link.active, .nav-pills .show > .nav-link { 
+.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: #00044A !important;
 }

-.big-square-btn .btn {    
+.big-square-btn .btn {
    border: 1px solid rgba(107, 126, 146, 0.20);
    min-height: 177px;
    background: rgba(107, 126, 146, 0.05);
 }
-.big-square-btn .btn:hover {    
+
+.big-square-btn .btn:hover {
    color: #E8345D;
    background: #fff;
 }
-.big-square-btn .fa-plus {    
-    border: 2px dashed; 
+
+.big-square-btn .fa-plus {
+    border: 2px dashed;
    width: 34px;
    height: 34px;
    border-radius: 34px;
    line-height: 30px;
 }

-.track-item {    
+.track-item {
    border: 1px solid rgba(107, 126, 146, 0.20);
    padding: 1.5em;
    border-radius: 10px;
    min-height: 177px;
    margin-bottom: 1em;
 }
-.track-item .track-name{    
+
+.track-item .track-name {
    font-weight: 500;
    font-size: 1.125em;
    color: #03044a;
 }
+
 .table > :not(:first-child) {
    border-top: 1px solid currentColor;
-} 
-.table td, .table th { 
+}
+
+.table td, .table th {
    font-weight: normal;
    padding: 16px 8px;
    color: #6B7E92;
 }
+
 .text-primary {
    color: #E8345D !important;
-} 
+}
+
 .preview-item {
    color: #00044A;
 }

-.price small{
+.price small {
    font-size: 20px;
    color: #00044A;
    font-weight: 800;
 }
-.price span{
+
+.price span {
    font-size: 60px;
    color: #00044A;
    font-weight: 800;
@ -127,11 +137,13 @@
    padding: 0;
    margin: 0 30px 0 40px;
 }
-.list-check-icon li{
+
+.list-check-icon li {
    margin: 1em 2em;
 }
+
 .list-check-icon .fa {
-    color:#E8345D; 
+    color: #E8345D;
    margin: 0 10px 0 -28px;
 }

@ -140,16 +152,19 @@
    border-color: #6F32E2;
    color: white;
 }
+
 .btn-info:hover {
    background: #662ad6;
    border-color: #662ad6;
    color: white;
 }
+
 .btn-check:focus + .btn-info, .btn-info:focus {
    background: #662ad6;
    border-color: #662ad6;
    color: white;
 }
+
 .faq.shown {
    background-color: #fff9f7;
 }
@ -167,17 +182,17 @@
 }

 .faq-container .faq button.btn.btn-faq.collapsed {
-    
+
 }

-.faq-container .faq button.btn.btn-faq .fas{    
+.faq-container .faq button.btn.btn-faq .fas {
    position: absolute;
    top: 15px;
    left: 0px;
 }

-.faq-container .faq button.btn.btn-faq.collapsed .fas{
-    color:#E8345D;   
+.faq-container .faq button.btn.btn-faq.collapsed .fas {
+    color: #E8345D;
    transform: rotate(180deg);
 }

@ -196,14 +211,15 @@
    padding: 15px 0 10px 0;
 }

-.btn-check:focus + .btn, .btn:focus { 
+.btn-check:focus + .btn, .btn:focus {
    box-shadow: none;
 }

 .text-dark {
    font-weight: 700;
    color: #03044a !important;
-} 
+}
+
 .modal-icon {
    display: block;
    font-size: 64px;
@ -211,6 +227,7 @@
    margin-bottom: 30px;
    color: #6F32E2;
 }
+
 .rounded-3 {
    border-radius: 1rem !important;
 }
@ -222,3 +239,18 @@
    overflow: hidden;
    width: 140px;
 }
+.nav-tabs .nav-link {
+    width: 217px !important;
+    left: 452px !important;
+    top: 567px !important;
+    border-radius: unset !important;
+    font-size: 20px !important;
+    line-height: 24px !important;
+    color: #6B7E92 !important;
+}
+
+.nav-tabs .active, .btn:hover {
+    color: #00044A !important;
+    border: unset !important;
+}
+