Conitnue detail page.

yuxiaoyong · Oct 20, 2015 · 29f54c8 · 29f54c8
1 parent 27c90a0
commit 29f54c8
Show file tree

Hide file tree

Showing 14 changed files with 1,678 additions and 24 deletions.
diff --git a/src/EventCloud.Application/Events/Dtos/EventRegistrationDto.cs b/src/EventCloud.Application/Events/Dtos/EventRegistrationDto.cs
@@ -11,8 +11,8 @@ public class EventRegistrationDto : CreationAuditedEntityDto
 
         public virtual long UserId { get; protected set; }
 
-        public virtual long UserName { get; protected set; }
+        public virtual string UserName { get; protected set; }
 
-        public virtual long UserSurname { get; protected set; }
+        public virtual string UserSurname { get; protected set; }
     }
 }
diff --git a/src/EventCloud.Application/Events/EventAppService.cs b/src/EventCloud.Application/Events/EventAppService.cs
@@ -45,6 +45,7 @@ public async Task<EventDetailOutput> GetDetail(EntityRequestInput<Guid> input)
             var @event = await _eventRepository
                 .GetAll()
                 .Include(e => e.Registrations)
+                .Where(e => e.Id == input.Id)
                 .FirstOrDefaultAsync();
 
             if (@event == null)

diff --git a/src/EventCloud.Web/App/Main/views/events/detail.cshtml b/src/EventCloud.Web/App/Main/views/events/detail.cshtml
@@ -2,21 +2,25 @@
 
     <h2>{{vm.event.title}} <span class="event-date"><i class="fa fa-calendar-times-o"></i> {{vm.event.date | momentFormat:'DD.MM.YYYY'}}</span></h2>
 
+    <div class="event-actions">
+        <a class="btn btn-sm btn-primary" ng-if="!vm.isRegistered()" ng-click="vm.register()">Register</a>
+        <a class="btn btn-sm btn-warning" ng-if="vm.isRegistered()" ng-click="vm.cancelRegistertration()">Cancel registration</a>
+        <a class="btn btn-sm btn-danger" ng-if="vm.isEventCreator()" ng-click="vm.cancelEvent()">Cancel the event</a>
+    </div>
+
     <p>{{vm.event.description}}</p>
 
-    <div class="event-registration-info">
-        <span ng-if="vm.event.registrationsCount < vm.event.maxRegistrationCount">
-            {{vm.event.registrationsCount}} of {{vm.event.maxRegistrationCount}} registred.
-        </span>
-        <span ng-if="vm.event.registrationsCount >= vm.event.maxRegistrationCount">
-            No registration available
-        </span>
-    </div>
+    <hr/>
 
-    <div class="event-actions">
-        <a class="btn btn-sm btn-primary" ng-click="register()">Register</a>
-        <a class="btn btn-sm btn-warning" ng-click="cancelRegistertration()">Cancel registration</a>
-        <a class="btn btn-sm btn-danger" ng-click="cancelRegistertration()">Cancel the event</a>
+    <div>
+        <h5>{{vm.event.registrationsCount}} registered users (of total {{vm.event.maxRegistrationCount}} available registration)</h5>
+        <div class="registrar" ng-repeat="registration in vm.event.registrations">
+            <div class="registrar-thumbnail">{{vm.getUserThumbnail(registration)}}</div>
+            <div class="registrar-body">
+                <span class="registrar-name">{{registration.userName}} {{registration.userSurname}}</span>
+                <span class="registrar-time">{{registration.creationTime | fromNow}}</span>
+            </div>
+        </div>
     </div>
 
 </div>
diff --git a/src/EventCloud.Web/App/Main/views/events/detail.css b/src/EventCloud.Web/App/Main/views/events/detail.css
diff --git a/src/EventCloud.Web/App/Main/views/events/detail.css.map b/src/EventCloud.Web/App/Main/views/events/detail.css.map
diff --git a/src/EventCloud.Web/App/Main/views/events/detail.js b/src/EventCloud.Web/App/Main/views/events/detail.js
@@ -5,11 +5,55 @@
         function ($scope, $stateParams, eventService) {
             var vm = this;
 
-            eventService.getDetail({
-                id: $stateParams.id
-            }).success(function(result) {
-                vm.event = result;
-            });
+            function loadEvent() {
+                eventService.getDetail({
+                    id: $stateParams.id
+                }).success(function (result) {
+                    vm.event = result;
+                });
+            }
+
+            vm.isRegistered = function () {
+                if (!vm.event) {
+                    return false;
+                }
+
+                return _.find(vm.event.registrations, function(registration) {
+                    return registration.userId == abp.session.userId;
+                });
+            };
+
+            vm.isEventCreator = function() {
+                return vm.event && vm.event.creatorUserId == abp.session.userId;
+            };
+
+            vm.getUserThumbnail = function(registration) {
+                return registration.userName.substr(0, 1).toLocaleUpperCase();
+            };
+
+            vm.register = function() {
+                eventService.register({
+                    id: vm.event.id
+                }).success(function (result) {
+                    abp.notify.info('Successfully registered to event. Your registration id: ' + result.registrationId + ".");
+                    loadEvent();
+                });
+            };
+
+            vm.cancelRegistertration = function() {
+                eventService.cancelRegistration({
+                    id: vm.event.id
+                }).success(function () {
+                    abp.notify.info('Cancelled your registration.');
+                    loadEvent();
+                });
+            };
+
+            vm.cancelEvent = function() {
+
+            };
+
+            loadEvent();
         }
     ]);
 })();
diff --git a/src/EventCloud.Web/App/Main/views/events/detail.less b/src/EventCloud.Web/App/Main/views/events/detail.less
@@ -1,10 +1,40 @@
 #EventDetail {
     .event-date {
         font-size: 0.5em;
-        color:#999;
+        color: #999;
     }
 
-    .event-actions{
+    .event-actions {
         margin-top: 10px;
+        margin-bottom: 10px;
     }
-}
+
+    .registrar {
+        position: relative;
+        background-color: #f5f5f5;
+        height: 40px;
+
+        .registrar-thumbnail {
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            width: 40px;
+            background-color: red;
+            color: white;
+            text-align: center;
+            padding-top: 8px;
+        }
+
+        .registrar-body {
+            margin-left: 50px;
+            padding-top: 8px;
+
+            .registrar-time {
+                font-size: 0.9em;
+                color: #999;
+                font-style: italic;
+            }
+        }
+    }
+}
diff --git a/src/EventCloud.Web/App/Main/views/events/detail.min.css b/src/EventCloud.Web/App/Main/views/events/detail.min.css
diff --git a/src/EventCloud.Web/App_Start/BundleConfig.cs b/src/EventCloud.Web/App_Start/BundleConfig.cs
@@ -37,6 +37,8 @@ public static void RegisterBundles(BundleCollection bundles)
 
                         "~/Scripts/bootstrap.min.js",
 
+                        "~/Scripts/underscore.min.js",
+
                         "~/Scripts/moment-with-locales.min.js",
                         "~/Scripts/jquery.blockUI.js",
                         "~/Scripts/toastr.min.js",

diff --git a/src/EventCloud.Web/EventCloud.Web.csproj b/src/EventCloud.Web/EventCloud.Web.csproj
@@ -1203,6 +1203,8 @@
     <Content Include="Scripts\sweetalert\sweet-alert.min.js" />
     <Content Include="Scripts\toastr.js" />
     <Content Include="Scripts\toastr.min.js" />
+    <Content Include="Scripts\underscore.js" />
+    <Content Include="Scripts\underscore.min.js" />
     <Content Include="Views\Account\Login.css">
       <DependentUpon>Login.less</DependentUpon>
     </Content>
@@ -1247,6 +1249,7 @@
     <Content Include="Views\Account\RegisterResult.cshtml" />
     <Content Include="Views\Account\TenantSelection.cshtml" />
     <Content Include="Scripts\version.json" />
+    <Content Include="Scripts\underscore.min.map" />
     <None Include="Web.Debug.config">
       <DependentUpon>Web.config</DependentUpon>
     </None>