From 7a6c227fa4c1fa7985cf2cc0fa51b9f564561ee3 Mon Sep 17 00:00:00 2001 From: Vinoth Kannan Date: Tue, 9 Oct 2018 20:15:32 +0530 Subject: [PATCH] UX: Use local timezone for insert date modal result --- .../javascripts/discourse-local-dates.js | 30 ++++++++++++------- .../discourse-local-dates-create-form.js.es6 | 21 ++++++------- .../discourse-local-dates.js.es6 | 18 ++++++----- .../common/discourse-local-dates.scss | 4 +++ .../spec/integration/local_dates_spec.rb | 20 ++++++++++--- 5 files changed, 58 insertions(+), 35 deletions(-) diff --git a/plugins/discourse-local-dates/assets/javascripts/discourse-local-dates.js b/plugins/discourse-local-dates/assets/javascripts/discourse-local-dates.js index 24ab1cb7c61..fd21d38db62 100644 --- a/plugins/discourse-local-dates/assets/javascripts/discourse-local-dates.js +++ b/plugins/discourse-local-dates/assets/javascripts/discourse-local-dates.js @@ -11,19 +11,27 @@ clearTimeout(this.timeout); } - var relativeTime = moment.utc( - options.date + " " + options.time, - "YYYY-MM-DD HH:mm:ss" - ); + var relativeTime; + if (options.forceTimezone) { + relativeTime = moment + .tz(options.date + " " + options.time, options.forceTimezone) + .utc(); + } else { + relativeTime = moment.utc(options.date + " " + options.time); + } - if (options.recurring && relativeTime < moment().utc()) { - var parts = options.recurring.split("."); - var count = parseInt(parts[0], 10); - var type = parts[1]; - var diff = moment().diff(relativeTime, type); - var add = Math.ceil(diff + count); + if (relativeTime < moment().utc()) { + if (options.recurring) { + var parts = options.recurring.split("."); + var count = parseInt(parts[0], 10); + var type = parts[1]; + var diff = moment().diff(relativeTime, type); + var add = Math.ceil(diff + count); - relativeTime = relativeTime.add(add, type); + relativeTime = relativeTime.add(add, type); + } else { + $element.addClass("past"); + } } var previews = options.timezones.split("|").map(function(timezone) { diff --git a/plugins/discourse-local-dates/assets/javascripts/discourse/components/discourse-local-dates-create-form.js.es6 b/plugins/discourse-local-dates/assets/javascripts/discourse/components/discourse-local-dates-create-form.js.es6 index 832cbc4f63d..c6e3712de5e 100644 --- a/plugins/discourse-local-dates/assets/javascripts/discourse/components/discourse-local-dates-create-form.js.es6 +++ b/plugins/discourse-local-dates/assets/javascripts/discourse/components/discourse-local-dates-create-form.js.es6 @@ -98,26 +98,20 @@ export default Ember.Component.extend({ const timezones = this.get("timezones"); const timeInferred = time ? false : true; const toTimeInferred = toTime ? false : true; + const timezone = this.get("currentUserTimezone"); let dateTime; if (!timeInferred) { - dateTime = moment - .tz(`${date} ${time}`, this.get("currentUserTimezone")) - .utc(); + dateTime = moment.tz(`${date} ${time}`, timezone); } else { - dateTime = moment.tz(date, this.get("currentUserTimezone")).utc(); + dateTime = moment.tz(date, timezone); } let toDateTime; if (!toTimeInferred) { - toDateTime = moment - .tz(`${toDate} ${toTime}`, this.get("currentUserTimezone")) - .utc(); + toDateTime = moment.tz(`${toDate} ${toTime}`, timezone); } else { - toDateTime = moment - .tz(toDate, this.get("currentUserTimezone")) - .endOf("day") - .utc(); + toDateTime = moment.tz(toDate, timezone).endOf("day"); } let config = { @@ -125,7 +119,8 @@ export default Ember.Component.extend({ dateTime, recurring, format, - timezones + timezones, + timezone }; config.time = dateTime.format(this.timeFormat); @@ -168,6 +163,7 @@ export default Ember.Component.extend({ text += `time=${config.time} `; } + text += `timezone="${config.timezone}" `; text += `format="${config.format}" `; text += `timezones="${config.timezones.join("|")}"`; text += `]`; @@ -180,6 +176,7 @@ export default Ember.Component.extend({ text += `time=${config.toTime} `; } + text += `timezone="${config.timezone}" `; text += `format="${config.format}" `; text += `timezones="${config.timezones.join("|")}"`; text += `]`; diff --git a/plugins/discourse-local-dates/assets/javascripts/lib/discourse-markdown/discourse-local-dates.js.es6 b/plugins/discourse-local-dates/assets/javascripts/lib/discourse-markdown/discourse-local-dates.js.es6 index 6d5763d3ca8..78002b29a34 100644 --- a/plugins/discourse-local-dates/assets/javascripts/lib/discourse-markdown/discourse-local-dates.js.es6 +++ b/plugins/discourse-local-dates/assets/javascripts/lib/discourse-markdown/discourse-local-dates.js.es6 @@ -6,6 +6,7 @@ function addLocalDate(buffer, matches, state) { let config = { date: null, time: null, + forceTimezone: null, format: "YYYY-MM-DD HH:mm:ss", timezones: "" }; @@ -18,7 +19,7 @@ function addLocalDate(buffer, matches, state) { config.date = parsed.attrs.date; config.time = parsed.attrs.time; - config.forceTimezone = parsed.attrs.forceTimezone; + config.forceTimezone = parsed.attrs.forceTimezone || parsed.attrs.timezone; config.recurring = parsed.attrs.recurring; config.format = parsed.attrs.format || config.format; config.timezones = parsed.attrs.timezones || config.timezones; @@ -32,11 +33,15 @@ function addLocalDate(buffer, matches, state) { ["data-timezones", state.md.utils.escapeHtml(config.timezones)] ]; + let dateTime; if (config.forceTimezone) { token.attrs.push([ "data-force-timezone", state.md.utils.escapeHtml(config.forceTimezone) ]); + dateTime = moment.tz(`${config.date} ${config.time}`, config.forceTimezone); + } else { + dateTime = moment.utc(`${config.date} ${config.time}`); } if (config.recurring) { @@ -51,17 +56,14 @@ function addLocalDate(buffer, matches, state) { .split("|") .filter(t => t) .map(timezone => { - const dateTime = moment - .utc(`${config.date} ${config.time}`, "YYYY-MM-DD HH:mm:ss") - .tz(timezone) - .format(config.format); + const formattedDateTime = dateTime.tz(timezone).format(config.format); const formattedTimezone = timezone.replace("/", ": ").replace("_", " "); - if (dateTime.match(/TZ/)) { - return dateTime.replace("TZ", formattedTimezone); + if (formattedDateTime.match(/TZ/)) { + return formattedDateTime.replace("TZ", formattedTimezone); } else { - return `${dateTime} (${formattedTimezone})`; + return `${formattedDateTime} (${formattedTimezone})`; } }); diff --git a/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss b/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss index a73fd9bee0f..6cf31f3b289 100644 --- a/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss +++ b/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss @@ -19,6 +19,10 @@ &:hover .d-icon-globe { color: $primary-high; } + + &.past { + font-weight: normal; + } } } diff --git a/plugins/discourse-local-dates/spec/integration/local_dates_spec.rb b/plugins/discourse-local-dates/spec/integration/local_dates_spec.rb index 97554305e61..19dd8dd36d8 100644 --- a/plugins/discourse-local-dates/spec/integration/local_dates_spec.rb +++ b/plugins/discourse-local-dates/spec/integration/local_dates_spec.rb @@ -5,9 +5,9 @@ RSpec.describe "Local Dates" do freeze_time end - it "should work" do + it "should work without timezone" do post = Fabricate(:post, raw: <<~SQL) - [date=2018-05-08 time=22:00 format="L LTS" forceTimezone="UTC" timezones="Europe/Paris|America/Los_Angeles"] + [date=2018-05-08 time=22:00 format="L LTS" timezones="Europe/Paris|America/Los_Angeles"] SQL cooked = post.cooked @@ -15,7 +15,7 @@ RSpec.describe "Local Dates" do expect(cooked).to include('class="discourse-local-date"') expect(cooked).to include('data-date="2018-05-08"') expect(cooked).to include('data-format="L LTS"') - expect(cooked).to include('data-force-timezone="UTC"') + expect(cooked).not_to include('data-force-timezone=') expect(cooked).to include( 'data-timezones="Europe/Paris|America/Los_Angeles"' @@ -25,6 +25,18 @@ RSpec.describe "Local Dates" do expect(cooked).to include('05/09/2018 12:00:00 AM (Europe: Paris)') end + it "should work with timezone" do + post = Fabricate(:post, raw: <<~SQL) + [date=2018-05-08 time=22:00 format="L LTS" timezone="Asia/Calcutta" timezones="Europe/Paris|America/Los_Angeles"] + SQL + + cooked = post.cooked + + expect(cooked).to include('data-force-timezone="Asia/Calcutta"') + expect(cooked).to include('05/08/2018 9:30:00 AM (America: Los Angeles)') + expect(cooked).to include('05/08/2018 6:30:00 PM (Europe: Paris)') + end + it 'requires the right attributes to convert to a local date' do post = Fabricate(:post, raw: <<~SQL) [date] @@ -33,6 +45,6 @@ RSpec.describe "Local Dates" do cooked = post.cooked expect(post.cooked).to include("

[date]

") - expect(cooked).to_not include('data-force-timezone=') + expect(cooked).to_not include('data-date=') end end