feat: Addition of Event End Date on Public Event Page (#3019)

* Event End Time on Public Pages

Co-Authored-By: Niranjan Rajendran <[email protected]>

* Remoal of extra parenthesis

Author: kushthedude

app/controllers/public.js

@@ -1,4 +1,5 @@
 import Controller from '@ember/controller';
+import moment from 'moment';
 import { computed } from '@ember/object';
 
 export default Controller.extend({
@@ -7,6 +8,9 @@ export default Controller.extend({
       return this.get('session.currentRouteName') !== 'public.index';
     }
   }),
+  displayEndDate: computed('model.startsAtDate', 'model.endsAtDate', function() {
+    return !moment(this.model.startsAtDate).isSame(this.model.endsAtDate, 'minute');
+  }),
   actions: {
     toggleMenu() {
       this.toggleProperty('isMenuOpen');

app/styles/pages/public-event.scss

@@ -73,6 +73,12 @@
             margin: 0;
           }
 
+          .event.time.ends {
+            font-size: 1.25rem;
+            margin: 0;
+          }
+
+
           .event.location {
             font-size: 1.5rem;
             margin: 0;
@@ -91,6 +97,10 @@
               font-size: 1.25rem;
             }
 
+            .event.time.ends {
+              font-size: 1.15rem;
+             }
+
             .event.location {
               font-size: 1.25rem;
             }

app/templates/public.hbs

@@ -12,6 +12,9 @@
           <div class="one wide column"></div>
           <div class="fifteen wide column">
             <h4 class="event time">{{header-date model.startsAt model.timezone}}</h4>
+            {{#if displayEndDate}}
+              <h5 class="event time ends">{{t 'To'}} {{header-date model.endsAt model.timezone}}</h5>
+            {{/if}}
             <h1 class="event name">{{model.name}}</h1>
             <h4 class="event location"><i class="marker icon"></i>{{model.locationName}}</h4>
           </div>