feat: Add timezone picker (#4860)

Co-authored-by: iamareebjamal <jamal.areeb@gmail.com>

Author: maze-runnar

app/components/schedule.ts

@@ -10,6 +10,7 @@ import { isTesting } from 'open-event-frontend/utils/testing';
 import { getTextColor } from 'open-event-frontend/utils/color';
 
 interface ScheduleArgs {
+  timezone: string | undefined,
   event: Event,
   sessions: Session[],
   rooms: Microlocation[]
@@ -43,7 +44,7 @@ export default class Schedule extends Component<ScheduleArgs> {
   }
 
   get timezone(): string {
-    return this.args.event.timezone;
+    return this.args.timezone || this.args.event.timezone;
   }
 
   get minTime(): string {

app/components/widgets/time-zone-picker.hbs

@@ -0,0 +1,25 @@
+<UiDropdown
+  ...attributes
+  class="search selection"
+  @selected={{@eventTimezone}}
+  @forceSelection={{false}}
+  @fullTextSearch={{true}}>
+  <Input
+    @type="hidden"
+    @value={{@timezone}} />
+  <i class="dropdown icon"></i>
+  <div class="default text">{{@timezone}}</div>
+  <div class="menu">
+    <div class="divider"></div>
+    <div class="item" data-value="{{@eventTimezone}}">{{@eventTimezone}} (Event)</div>
+    <div class="item" data-value="{{this.localTimezone}}">{{this.localTimezone}} (Local)</div>
+    <div class="divider"></div>
+    <div class="header">
+      <i class="time icon"></i>
+      Other Timezones
+    </div>
+    {{#each this.timezones as |timezone|}}
+      <div class="item" data-value="{{timezone}}">{{timezone}}</div>
+    {{/each}}
+  </div>
+</UiDropdown>

app/components/widgets/time-zone-picker.ts

@@ -0,0 +1,17 @@
+import Component from '@glimmer/component';
+import moment from 'moment';
+import 'moment-timezone';
+import { timezones } from 'open-event-frontend/utils/dictionary/date-time';
+
+interface Args {
+  eventTimezone: string,
+  timezone: string
+}
+
+export default class TimeZonePicker extends Component<Args> {
+  localTimezone = moment.tz.guess();
+
+  get timezones(): string[] {
+    return timezones.filter(item => ![this.localTimezone, this.args.eventTimezone].includes(item));
+  }
+}

app/controllers/public/sessions.js

@@ -5,16 +5,18 @@ import moment from 'moment';
 
 @classic
 export default class SessionsController extends Controller {
+
   queryParams = ['sort'];
   sort = 'starts-at';
   isTrackVisible = false;
+  timezone = null;
 
-  @computed('model.event.startsAt', 'model.event.endsAt')
+  @computed('model.event.startsAt', 'model.event.endsAt', 'timezone')
   get allDates() {
     const arr = [];
     const difference = (this.model.event.endsAt).diff(this.model.event.startsAt, 'days');
     for (let i = 0; i <= Math.abs(difference); i++) {
-      arr.push(moment.tz(this.model.event.startsAt, this.model.event.timezone).add(i, 'days').toISOString());
+      arr.push(moment.tz(this.model.event.startsAt, this.timezone).add(i, 'days').toISOString());
     }
     return arr;
   }

app/styles/partials/utils.scss

@@ -76,3 +76,7 @@
 .ml-auto {
   margin-left: auto !important;
 }
+
+.mr-2 {
+  margin-right: .5rem !important;
+}

app/templates/public/schedule.hbs

@@ -1,5 +1,12 @@
 {{#if this.isSchedulePublished}}
+  <div class="d-flex">
+    <Widgets::TimeZonePicker
+      class="mb-2 ml-auto"
+      @eventTimezone={{this.model.event.timezone}}
+      @timezone={{this.timezone}} />
+  </div>
   <Schedule
+    @timezone={{this.timezone}}
     @event={{this.model.event}}
     @sessions={{this.model.sessions}}
     @rooms={{this.model.microlocations}} 

app/templates/public/sessions.hbs

@@ -6,7 +6,12 @@
     <LinkTo @route="public.sessions" @models={{array this.model.event.id}} @query={{hash date=(moment-format date "YYYY-MM-DD")}} class="ui button mb-2">{{moment-format date 'ddd, MMM Do'}}</LinkTo>
   {{/each}}
 
-  <UiDropdown class="labeled icon button mb-2 ml-auto">
+  <Widgets::TimeZonePicker
+    class="mb-2 ml-auto mr-2"
+    @eventTimezone={{this.model.event.timezone}}
+    @timezone={{this.timezone}} />
+
+  <UiDropdown class="labeled icon button mb-2">
     <i class="sort amount down icon"></i>
     <span class="default text">{{t (if (eq this.sort 'title') 'By Title' 'By Time')}}</span>
     <div class="menu">
@@ -41,7 +46,7 @@
 
 <div class="mt-8">
   {{#each this.model.session as |session|}}
-    <Public::SessionItem @session={{session}} @timezone={{this.model.event.timezone}} />
+    <Public::SessionItem @session={{session}} @timezone={{this.timezone}} />
   {{else}}
     <div class="ui disabled header">{{t 'No Sessions exist for this time period'}}</div>
   {{/each}}

app/utils/dictionary/date-time.js renamed to app/utils/dictionary/date-time.ts

@@ -1,4 +1,5 @@
 import moment from 'moment';
+import 'moment-timezone';
 
 export const timezones = moment.tz.names();
 

package.json

@@ -42,6 +42,7 @@
     "@types/ember-qunit": "^3.4.9",
     "@types/ember__test-helpers": "^1.7.2",
     "@types/lodash-es": "^4.17.3",
+    "@types/moment": "^2.13.0",
     "@types/qunit": "^2.9.1",
     "@types/rsvp": "^4.0.3",
     "@typescript-eslint/eslint-plugin": "^3.9.1",
@@ -138,6 +139,7 @@
     "loader.js": "^4.7.0",
     "lodash-es": "^4.17.15",
     "mini-css-extract-plugin": "^0.10.0",
+    "moment-timezone": "^0.5.31",
     "npm-run-all": "^4.1.5",
     "object-to-formdata": "^4.1.0",
     "paypal-checkout": "^4.0.317",

yarn.lock

@@ -1906,6 +1906,13 @@
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
 
+"@types/moment@^2.13.0":
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/@types/moment/-/moment-2.13.0.tgz#604ebd189bc3bc34a1548689404e61a2a4aac896"
+  integrity sha1-YE69GJvDvDShVIaJQE5hoqSqyJY=
+  dependencies:
+    moment "*"
+
 "@types/node@*":
   version "12.0.2"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-12.0.2.tgz#3452a24edf9fea138b48fad4a0a028a683da1e40"
@@ -11746,6 +11753,18 @@ moment-timezone@^0.5.13:
   dependencies:
     moment ">= 2.9.0"
 
+moment-timezone@^0.5.31:
+  version "0.5.31"
+  resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.31.tgz#9c40d8c5026f0c7ab46eda3d63e49c155148de05"
+  integrity sha512-+GgHNg8xRhMXfEbv81iDtrVeTcWt0kWmTEY1XQK14dICTXnWJnT0dxdlPspwqF3keKMVPXwayEsk1DI0AA/jdA==
+  dependencies:
+    moment ">= 2.9.0"
+
+moment@*:
+  version "2.27.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.27.0.tgz#8bff4e3e26a236220dfe3e36de756b6ebaa0105d"
+  integrity sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ==
+
 "moment@>= 2.9.0", moment@^2.18.1, moment@^2.19.3, moment@^2.20.1:
   version "2.22.0"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.0.tgz#7921ade01017dd45186e7fee5f424f0b8663a730"