Feature/scroll

src/app.common/actions/DisplaySettingsActions.ts

@@ -43,4 +43,11 @@ export function change24HoursTimeFormatSetting(value: boolean): Action<boolean>
     type: "DISPLAY_SETTINGS/TOGGLE_24_HOURS",
     payload: value
   };
+}
+
+export function changeTimeSelectionStepSetting(value: number): Action<number> {
+  return {
+    type: "DISPLAY_SETTINGS/CHANGE_TIME_SELECTION_STEP",
+    payload: value
+  };
 }

src/app.common/actions/ScrollPositionActions.ts

@@ -0,0 +1,18 @@
+import { ActionCreator } from "react-redux";
+import { Action } from "./Action";
+import { DisplaySettingsInfo, DSTSetting } from "../models";
+import * as moment from "moment-timezone";
+
+export function changeScrollPostion(position: number): Action<number> {
+  return {
+    type: "SCROLL_POSITION/SET",
+    payload: position
+  };
+}
+
+export function resetScrollPostion(): Action<number> {
+  return {
+    type: "SCROLL_POSITION/RESET",
+    payload: 0
+  };
+}

src/app.common/actions/SelectedTimeSpanActions.ts

@@ -45,11 +45,7 @@ export function changeEndMinute(minute: number) {
   };
 }
 
-export function changeSelectedTimeSpan(start: number, end: number): Action<TimeSpanInfo> {
-  const startHour = Math.floor(start / 2);
-  const startMinute = (start % 2) * 30;
-  const endHour = Math.floor(end / 2);
-  const endMinute = (end % 2) * 30;
+export function changeSelectedTimeSpan(startHour: number, startMinute: number, endHour: number, endMinute: number): Action<TimeSpanInfo> {
   return {
     type: "SELECTED_TIMESPAN/CHANGE_SELECTED_TIMESPAN",
     payload: { startHour, startMinute, endHour, endMinute }

src/app.common/actions/index.ts

@@ -3,4 +3,5 @@ export * from "./TimeLineActions";
 export * from "./TimeLineFormActions";
 export * from "./DisplaySettingsActions";
 export * from "./ThemeSettingsActions";
-export * from "./SelectedTimeSpanActions";
+export * from "./SelectedTimeSpanActions";
+export * from "./ScrollPositionActions";

src/app.common/components/Range.tsx

@@ -23,13 +23,28 @@ export class Range extends React.Component<IRangeProps, IRangeState> {
 
   constructor(props: IRangeProps) {
     super(props);
+    const { rangeSize, valueMin, valueMax } = props;
     this.state = {
-      valueMin: props.rangeSize ? props.valueMin / props.rangeSize * 100 : props.valueMin,
-      valueMax: props.rangeSize ? props.valueMax / props.rangeSize * 100 : props.valueMax,
+      valueMin: rangeSize ? valueMin / rangeSize * 100 : valueMin,
+      valueMax: rangeSize ? valueMax / rangeSize * 100 : valueMax,
       hold: false
     };
   }
 
+  componentWillReceiveProps(props: IRangeProps) {
+    if (props) {
+      this.updateState(props);
+    }
+  }
+
+  updateState(props: IRangeProps) {
+    const { valueMax, valueMin, rangeSize } = props;
+    this.setState({
+      valueMin: rangeSize ? valueMin / rangeSize * 100 : valueMin,
+      valueMax: rangeSize ? valueMax / rangeSize * 100 : valueMax,
+    });
+  }
+
   onChange(valueMin: number, valueMax: number) {
     if (this.props.onChange) {
       this.props.onChange(this.convertValues(valueMin, valueMax));
@@ -65,7 +80,15 @@ export class Range extends React.Component<IRangeProps, IRangeState> {
     event.preventDefault();
     const { valueMin, valueMax } = this.state;
     const x = this.getCoordinateInRange(event);
-    const hold = Math.abs(x - valueMin) <= Math.abs(x - valueMax) ? "min" : "max";
+    const distToMin = Math.abs(x - valueMin);
+    const distToMax = Math.abs(x - valueMax);
+    const hold = distToMin == distToMax
+      ? x > valueMax
+        ? "max"
+        : "min"
+      : distToMin < distToMax
+        ? "min"
+        : "max";
     this.onHold(hold);
     this.movePointer(x, hold);
   }
@@ -108,7 +131,6 @@ export class Range extends React.Component<IRangeProps, IRangeState> {
   }
 
   getRangeRect() {
-    // tslint:disable-next-line:no-string-literal
     return ReactDOM.findDOMNode(this.refs["rangeBase"]).getBoundingClientRect();
   }
 
@@ -122,9 +144,9 @@ export class Range extends React.Component<IRangeProps, IRangeState> {
       <div className="range-material-container">
         <div ref="rangeBase" className="range-material-base-clickable" onMouseDown={(event) => this.onRangeBaseClick(event)}>
           <div ref="rangeBase" className="range-material-base">
-            <div className="range-material-min-selector" style={{left: min, background: color}} onMouseDown={() => this.onHold("min")}></div>
-            <div className="range-material-range-selected" style={{left: min, width, background: color}}></div>
-            <div className="range-material-max-selector" style={{left: max, background: color}} onMouseDown={() => this.onHold("max")}></div>
+            <div className="range-material-min-selector" style={{ left: min, background: color }} onMouseDown={() => this.onHold("min")}></div>
+            <div className="range-material-range-selected" style={{ left: min, width, background: color }}></div>
+            <div className="range-material-max-selector" style={{ left: max, background: color }} onMouseDown={() => this.onHold("max")}></div>
           </div>
         </div>
       </div>

src/app.common/components/TimeLine.tsx

@@ -5,14 +5,15 @@ import Typography from "material-ui/Typography";
 import { withTheme, Theme } from "material-ui/styles";
 const style = require("./TimeLine.css");
 
-import { TimeZoneInfo, getOffset, DisplaySettingsInfo } from "../models";
+import { TimeZoneInfo, getOffset, DisplaySettingsInfo, ScrollPosition } from "../models";
 
 interface TimeLineProps {
   timeLine: TimeZoneInfo;
   offset: number;
   hours: number[];
   displaySettings: DisplaySettingsInfo;
   theme: Theme;
+  scrollPosition: number;
 }
 
 interface TimeLineState {
@@ -54,15 +55,12 @@ class TimeLineImpl extends React.Component<TimeLineProps, TimeLineState> {
       // classes.push(style.timeLineBorderRight);
     }
     if (h < 8 || h > 21) {
-      // classes.push(style.nightHour);
       background = theme.palette.primary[100];
     }
     if (h === 0) {
-      // classes.push(style.hourMidnight);
       background = theme.palette.primary[200];
     }
     if (h === currentHour) {
-      // classes.push(style.currentHour);
       background = theme.palette.primary[700];
     }
     const color = theme.palette.getContrastText(background);
@@ -93,8 +91,10 @@ class TimeLineImpl extends React.Component<TimeLineProps, TimeLineState> {
     const currentHour = +moment().utcOffset(offset).format("HH");
     const uiOffset = (offset % 60) / 60;
     const oneDay = 100 / 3;
+    const oneHour = oneDay / 24;
+    const position = this.props.scrollPosition;
     const inlineStyle = {
-      transform: `translateX(${-oneDay - oneDay / 24 * uiOffset}%)`
+      transform: `translateX(${-oneDay + oneHour * position - oneHour * uiOffset}%)`
     };
     return (
       <div className={style.timeLine} style={inlineStyle}>

src/app.common/components/TimeSelector.tsx

@@ -5,15 +5,17 @@ const style = require("./TimeSelector.css");
 import { TimeZoneInfo, TimeSpanInfo } from "../models";
 
 interface TimeSelectorProps {
-  selectedTimeSpan: TimeSpanInfo;
+  valueMin: number;
+  valueMax: number;
+  rangeSize: number;
   color: string;
 }
 
 export class TimeSelector extends React.Component<TimeSelectorProps, any> {
   render() {
-    const { selectedTimeSpan, color } = this.props;
-    const left = (selectedTimeSpan.startHour * 2 + selectedTimeSpan.startMinute / 30) / 48 * 100;
-    const right = (selectedTimeSpan.endHour * 2 + selectedTimeSpan.endMinute / 30) / 48 * 100;
+    const { valueMin, valueMax, rangeSize, color } = this.props;
+    const left = valueMin / rangeSize * 100;
+    const right = valueMax / rangeSize * 100;
     const visibilityLeft = left <= 0.001 ? "hidden" : "visible";
     const visibilityRight = right >= 99.999 ? "hidden" : "visible";
     return (

src/app.common/localstorage-enchancer.ts

@@ -0,0 +1,27 @@
+import { compose } from "redux";
+import * as persistState from "redux-localstorage";
+import * as _ from "lodash";
+import { IAppState } from "./reducers";
+
+function merge(initialState: IAppState, persistedState: IAppState) {
+    const mergedState = _.cloneDeep(initialState);
+    if (!persistedState) {
+        return initialState;
+    }
+    if (persistedState.timeLines) {
+        mergedState.timeLines = persistedState.timeLines;
+    }
+    if (persistedState.displaySettings) {
+        mergedState.displaySettings = _.merge(mergedState.displaySettings, persistedState.displaySettings);
+    }
+    if (persistedState.theme) {
+        mergedState.theme = _.merge(mergedState.theme, persistedState.theme);
+    }
+    return mergedState;
+}
+
+export const localStorageEnchancer = [
+    persistState("timeLines", { key: "timeLines@0.0.259", merge }),
+    persistState("displaySettings", { key: "displaySettings@0.1.265", merge }),
+    persistState("theme", { key: "theme@1.2.45", merge }),
+];

src/app.common/models/DisplaySettingsInfo.ts

@@ -5,6 +5,7 @@ export interface DisplaySettingsInfo {
   showControlPanel: boolean;
   useDarkTheme: boolean;
   use24HoursTime: boolean;
+  selectionStep: number;
 }
 
 export type DSTSetting = "hide" | "DST" | "Summer/Winter";

src/app.common/models/ScrollPosition.ts

@@ -0,0 +1,6 @@
+export interface ScrollPosition {
+    minLimit: number;
+    maxLimit: number;
+    position: number;
+    step: number;
+}

src/app.common/models/index.ts

@@ -3,4 +3,5 @@ export * from "./TimeZoneInfo";
 export * from "./TimeZoneShort";
 export * from "./DisplaySettingsInfo";
 export * from "./CalendarEvent";
-export * from "./AppTheme";
+export * from "./AppTheme";
+export * from "./ScrollPosition";

src/app.common/reducers/DisplaySettingsReducer.ts

@@ -2,9 +2,21 @@ import { updateState } from "./UpdateStateHelper";
 import { DisplaySettingsInfo } from "../models";
 import { Action } from "../actions";
 
-export const displaySettings = function (state: DisplaySettingsInfo = {} as DisplaySettingsInfo, action: Action<any>): DisplaySettingsInfo {
-  switch(action.type) {
-    case "DISPLAY_SETTINGS/SHOW_DST":{
+export type State = DisplaySettingsInfo;
+
+export const initialState: State = {
+    showDST: "hide",
+    showTimeZoneId: false,
+    showUTCOffset: true,
+    showControlPanel: true,
+    useDarkTheme: false,
+    use24HoursTime: true,
+    selectionStep: 30,
+}
+
+export const reducer = function (state: State = initialState, action: Action<any>): State {
+  switch (action.type) {
+    case "DISPLAY_SETTINGS/SHOW_DST": {
       return updateState(state, { showDST: action.payload });
     }
     case "DISPLAY_SETTINGS/SHOW_UTC_OFFSET": {
@@ -22,6 +34,9 @@ export const displaySettings = function (state: DisplaySettingsInfo = {} as Disp
     case "DISPLAY_SETTINGS/TOGGLE_24_HOURS": {
       return updateState(state, { use24HoursTime: action.payload });
     }
+    case "DISPLAY_SETTINGS/CHANGE_TIME_SELECTION_STEP": {
+      return updateState(state, { selectionStep: action.payload });
+    }
     default:
       return state;
   }

src/app.common/reducers/EditTimeLineFormReducer.ts

@@ -2,7 +2,14 @@ import { updateState } from "./UpdateStateHelper";
 import { TimeZoneInfo } from "../models";
 import { Action } from "../actions";
 
-export const editTimeLineForm = function (state: TimeZoneInfo = {} as TimeZoneInfo, action: Action<any>): TimeZoneInfo {
+export type State = TimeZoneInfo;
+
+export const initialState: State = {
+  name: "",
+  timeZoneId: ""
+} as State;
+
+export const reducer = function (state: State = initialState, action: Action<any>): State {
   switch(action.type) {
     case "EDIT_TIMELINE/CHANGE_DISPLAY_NAME":
       return updateState(state, { name: action.payload })

src/app.common/reducers/ScrollPositionReducer.ts

@@ -0,0 +1,28 @@
+import { Action } from "../actions";
+import { AppTheme, ScrollPosition } from "../models";
+import { getColorById } from "../themes/themes";
+import { updateState } from "./UpdateStateHelper";
+
+export type State = ScrollPosition;
+
+export const initialState: State = {
+  maxLimit: 23,
+  minLimit: -23,
+  position: 0,
+  step: 6,
+};
+
+export const reducer = function (state: State = initialState, action: Action<any>): State {
+  switch (action.type) {
+    case "SCROLL_POSITION/RESET":
+      return updateState(state, { position: 0 });
+    case "SCROLL_POSITION/SET":
+      if (action.payload > state.maxLimit || action.payload < state.minLimit) {
+        return state;
+      } else {
+        return updateState(state, { position: action.payload });
+      }
+    default:
+      return state;
+  }
+};

src/app.common/reducers/SelectedTimeSpanReducer.ts

@@ -1,8 +1,18 @@
 import { updateState } from "./UpdateStateHelper";
 import { TimeSpanInfo } from "../models";
 import { Action } from "../actions";
+import * as moment from "moment";
 
-export const selectedTimeSpan = function (state: TimeSpanInfo = {} as TimeSpanInfo, action: Action<any>): TimeSpanInfo {
+export type State = TimeSpanInfo;
+
+export const initialState: State = {
+  startHour: moment().hours(),
+  startMinute: moment().minutes(),
+  endHour: 24,
+  endMinute: 0
+};
+
+export const reducer = function (state: State = initialState, action: Action<any>): State {
   switch(action.type) {
     case "SELECTED_TIMESPAN/CHANGE_SELECTED_TIMESPAN": {
       return updateState(state, action.payload)

src/app.common/reducers/ThemeReducer.ts

@@ -1,8 +1,14 @@
 import { Action } from "../actions";
 import { AppTheme } from "../models";
-import { getColorById } from "../themes/themes";
+import { getColorById, initialPalette } from "../themes/themes";
 
-export const theme = function (state: AppTheme = {} as AppTheme, action: Action<any>): AppTheme {
+export type State = AppTheme;
+
+export const initialState: State = {
+  palette: initialPalette,
+};
+
+export const reducer = function (state: State = initialState, action: Action<any>): State {
   switch (action.type) {
     case "THEME/SET_PRIMARY_COLOR":
       const newState = Object.assign({}, state);

src/app.common/reducers/TimeLineReducer.ts

@@ -1,8 +1,19 @@
-import { TimeZoneInfo } from "../models";
+import { TimeZoneInfo, createTimeZoneInfo } from "../models";
 import { Action } from "../actions";
 
-export const timeLines = function (state: TimeZoneInfo[] = [], action: Action<any>): TimeZoneInfo[] {
-  switch(action.type) {
+export type State = TimeZoneInfo[];
+
+export const initialState: State = [
+  createTimeZoneInfo("Europe/Warsaw", "Kraków"),
+  createTimeZoneInfo("US/Pacific", "San Francisco"),
+  createTimeZoneInfo("Europe/Moscow", "Saint Petersburg"),
+  createTimeZoneInfo("Australia/Melbourne", "Melbourne"),
+  createTimeZoneInfo("Asia/Calcutta", "India")
+  // createTimeZoneInfo("Asia/Yekaterinburg", "Yekaterinburg")
+];
+
+export const reducer = function (state: State = initialState, action: Action<any>): State {
+  switch (action.type) {
     case "REPLACE_TIMELINES":
       return action.payload;
     case "CREATE_OR_UPDATE": {
@@ -13,7 +24,7 @@ export const timeLines = function (state: TimeZoneInfo[] = [], action: Action<an
       }
       const i = state.findIndex(x => x.timeLineid === action.payload.timeLineid);
       const timeLines = i > -1
-        ? state.slice(0, i).concat([ action.payload ]).concat(state.slice(i + 1))
+        ? state.slice(0, i).concat([action.payload]).concat(state.slice(i + 1))
         : state.concat([action.payload]);
       return timeLines;
     }