Merge pull request #24 from Le0Michine/feature/timezone-offset-displa…

…ying

fixed displaying time offsets

package.json

@@ -12,7 +12,8 @@
         "build": "webpack --config config/webpack.dev.js --progress --profile --display-error-details --env.clean true --watch",
         "build:prod": "webpack --config config/webpack.prod.js",
         "build:canary": "webpack --config config/webpack.canary.js -p",
-        "build:firefox": "export TARGET=firefox && webpack --config config/webpack.prod.js -p"
+        "build:firefox": "export TARGET=firefox && webpack --config config/webpack.prod.js -p",
+        "build:demo": "export TARGET=demo && webpack --config config/webpack.prod.js -p"
     },
     "dependencies": {
         "autosuggest-highlight": "^3.1.1",

src/app.common/components/TimeLine.tsx

@@ -1,11 +1,11 @@
-import { formatTime, getTimeZoneAbbreviation } from "../util/time";
-import * as React from "react";
-import * as moment from "moment";
+import { Theme, withTheme } from "material-ui/styles";
 import Typography from "material-ui/Typography";
-import { withTheme, Theme } from "material-ui/styles";
-import * as style from "./TimeLine.scss";
+import * as moment from "moment";
+import * as React from "react";
 
-import { TimeZoneInfo, getOffset, DisplaySettingsInfo, ScrollPosition } from "../models";
+import { DisplaySettingsInfo, getOffset, TimeZoneInfo } from "../models";
+import { formatTime, fromatOffset, getTimeZoneAbbreviation } from "../util/time";
+import * as style from "./TimeLine.scss";
 
 interface TimeLineProps {
   timeLine: TimeZoneInfo;
@@ -119,7 +119,7 @@ class TimeLineImpl extends React.Component<TimeLineProps, TimeLineState> {
             <Typography type="subheading" color="secondary" className="mr-2">{abbreviation}</Typography> : null
           }
           {displaySettings.showUTCOffset ?
-            <Typography type="subheading" color="secondary" className="mr-2">UTC{offset >= 0 ? "+" : ""}{offset / 60}</Typography> : null
+            <Typography type="subheading" color="secondary" className="mr-2">UTC{fromatOffset(offset)}</Typography> : null
           }
           {displaySettings.showDST !== "hide" ?
             <Typography type="subheading" color="secondary">{this.isDST(timeLine.timeZoneId) ? summer : winter}</Typography> : null

src/app.common/reducers/DisplaySettingsReducer.ts

@@ -1,6 +1,7 @@
-import { updateState } from "./UpdateStateHelper";
-import { DisplaySettingsInfo } from "../models";
 import { Action } from "../actions";
+import { DisplaySettingsInfo } from "../models";
+import { BuildTargets, getBuildTarget } from "../util/target";
+import { updateState } from "./UpdateStateHelper";
 
 export type State = DisplaySettingsInfo;
 
@@ -9,7 +10,7 @@ export const initialState: State = {
     showTimeZoneId: false,
     showTimeZoneAbbreviation: true,
     showUTCOffset: true,
-    showControlPanel: true,
+    showControlPanel: getBuildTarget() === BuildTargets.demo ? false : true,
     useDarkTheme: false,
     use24HoursTime: true,
     selectionStep: 30,

src/app.common/util/target.ts

@@ -0,0 +1,10 @@
+export function getBuildTarget(): BuildTargetType {
+    return process.env.TARGET;
+}
+
+export type BuildTargetType = "demo" | "firefox";
+export interface BuildTarget extends Record<BuildTargetType, BuildTargetType> {}
+export const BuildTargets: BuildTarget = {
+    demo: "demo",
+    firefox: "firefox",
+};

src/app.common/util/time.ts

@@ -4,6 +4,14 @@ export function formatTime(time: moment.Moment, use24HoursFormat: boolean): stri
     return moment(time).format(use24HoursFormat ? "HH:mm" : "h.mma");
 }
 
+export function fromatOffset(offset: number) {
+    const absOffset = Math.abs(offset);
+    const hours = Math.trunc(absOffset / 60);
+    const minutes = absOffset % 60;
+    const sign = offset < 0 ? "-" : "+";
+    return `${sign}${hours >= 10 ? "" : "0" }${hours}:${minutes >= 10 ? "" : "0" }${minutes}`;
+}
+
 export function getTimeZoneAbbreviation(timeZoneId: string) {
     const abbreviation = moment.tz.zone(timeZoneId).abbr(moment().unix());
     return /^[^\d]*$/.test(abbreviation) ? abbreviation : "";

src/app.options/components/AddNewTimeline.tsx

@@ -2,16 +2,16 @@ import * as _ from "lodash";
 import Button from "material-ui/Button";
 import TextField from "material-ui/TextField";
 import * as moment from "moment-timezone";
-import * as React from "react";
 import { KeyboardEvent } from "react";
+import * as React from "react";
 import { ActionCreator, connect } from "react-redux";
 
 import { changeDisplayName, changeTimezoneId, clearForm, createOrUpdateTimeLine } from "../../app.common/actions";
 import { Typeahead } from "../../app.common/components";
 import { TimeZoneInfo } from "../../app.common/models";
 import { Suggestion } from "../../app.common/models/TimeZoneShort";
 import { IAppState } from "../../app.common/store";
-import { getTimeZoneAbbreviation } from "../../app.common/util/time";
+import { fromatOffset, getTimeZoneAbbreviation } from "../../app.common/util/time";
 import { SelectTimezoneDialog } from "./SelectTimezoneDialog";
 
 let compKey = 0;
@@ -47,7 +47,7 @@ class AddNewTimeline extends React.Component<AddNewTimeLineProps, AddNewTimeLine
     })).orderBy(x => x.utcOffset, "asc").map(x => ({
       id: x.id,
       title: x.title + (Boolean(x.abbr) ? ` (${x.abbr})` : ""),
-      subheading: `UTC${x.utcOffset > 0 ? "+" : "-"}${Math.abs(x.utcOffset / 60)}`
+      subheading: `UTC${fromatOffset(x.utcOffset)}`
     } as Suggestion)).value();
     this.state = {
       timeZones: tzNames,

src/manifest.json

@@ -2,7 +2,7 @@
     "manifest_version": 2,
     "name": "Worldtime",
     "description": "All time zones in one click",
-    "version": "1.4.149",
+    "version": "1.4.151",
     "options_page": "options.html",
     "browser_action": {
         "default_icon": "icons/icon_19.png",