Merge pull request #111 from HSLdevcom/development

Development

Author: ahjyrkia

.github/dependabot.yml

@@ -0,0 +1,14 @@
+# Specify a non-default branch for pull requests for npm
+
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "daily"
+    # Raise pull requests for version updates
+    # to npm against the `development` branch
+    target-branch: "development"
+    # Labels on pull requests for version updates only
+    labels:
+      - "NPM Dependencies"

app/actions/routeMapConfiguration.js

@@ -21,6 +21,7 @@ export const TOGGLE_ONLY_NEAR_BUSES = "TOGGLE_ONLY_NEAR_BUSES";
 export const TOGGLE_ZONE_SYMBOLS = "TOGGLE_ZONE_SYMBOLS";
 export const SET_SYMBOL_SIZE = "SET_SYMBOL_SIZE";
 export const LOAD_STATE = "LOAD_STATE";
+export const TOGGLE_JORE_ID_FILTERING = "TOGGLE_JORE_ID_FILTERING";
 
 export function setBuild(id) {
     return {
@@ -138,3 +139,9 @@ export function setSymbolSize(size) {
         data: size
     };
 }
+
+export function toggleJoreIdFiltering() {
+    return {
+        type: TOGGLE_JORE_ID_FILTERING
+    };
+}

app/components/PointBuildTrigger.js

@@ -1,15 +1,19 @@
 import React, {Component} from "react";
 import moment from "moment";
+import Modal from "react-modal";
 import classNames from "classnames";
 import DayPicker from "./DayPicker";
 import Button from "./Button";
 import s from "./pointBuildTrigger.css";
 import {PointStatus} from "../reducers/publisherRequests";
+import {promptStyles} from "../utils/ui-utils";
 
 export default class RouteMapConfigurator extends Component {
     constructor(props) {
         super(props);
-
+        this.state = {
+            showPrompt: false
+        };
         this.update = this.update.bind(this);
         this.sendDate = this.sendDate.bind(this);
     }
@@ -24,6 +28,7 @@ export default class RouteMapConfigurator extends Component {
     }
 
     sendDate() {
+        this.setState({showPrompt: false});
         this.props.setConfig(moment(this.props.date));
     }
 
@@ -35,6 +40,14 @@ export default class RouteMapConfigurator extends Component {
         return this.props.config && this.props.config.status === "PENDING";
     }
 
+    showPrompt() {
+        this.setState({showPrompt: true});
+    }
+
+    hidePrompt() {
+        this.setState({showPrompt: false});
+    }
+
     render() {
         let statusColor = "#DDD";
         let statusText = "Hakee";
@@ -94,11 +107,37 @@ export default class RouteMapConfigurator extends Component {
                     />
                     <Button
                         styleClass="lightWithBorder"
-                        onClick={this.sendDate}
+                        onClick={() => this.showPrompt()}
                         disabled={this.isDisabled()}>
                         Päivitä
                     </Button>
                 </div>
+                <Modal
+                    isOpen={this.state.showPrompt}
+                    onRequestClose={() => this.hidePrompt}
+                    style={promptStyles}>
+                    <div className={s.prompt}>
+                        Generoidaan uusi poikkileikkauspäivä?
+                        <div className={s.promptButtonContainer}>
+                            <div className={s.button}>
+                                <Button
+                                    styleClass="lightWithBorder"
+                                    onClick={this.sendDate}
+                                    disabled={this.isDisabled()}>
+                                    Kyllä
+                                </Button>
+                            </div>
+                            <div className={s.button}>
+                                <Button
+                                    styleClass="lightWithBorder"
+                                    onClick={() => this.hidePrompt()}
+                                    disabled={this.isDisabled()}>
+                                    Ei
+                                </Button>
+                            </div>
+                        </div>
+                    </div>
+                </Modal>
             </div>
         );
     }

app/components/RouteMapConfigurator.js

@@ -30,6 +30,7 @@ export default class RouteMapConfigurator extends Component {
         this.setSymbolSize = this.setSymbolSize.bind(this);
         this.selectSymbol = this.selectSymbol.bind(this);
         this.addSymbol = this.addSymbol.bind(this);
+        this.toggleJoreIdFiltering = this.toggleJoreIdFiltering.bind(this);
 
         this.routesLayer = this.props.layers.find(
             (layer) => layer.id === "routes"
@@ -99,6 +100,10 @@ export default class RouteMapConfigurator extends Component {
         this.props.toggleZoneSymbols();
     }
 
+    toggleJoreIdFiltering() {
+        this.props.toggleJoreIdFiltering();
+    }
+
     openAdvancedSettings() {
         this.setState({
             advancedSettingsOpen: true
@@ -181,6 +186,18 @@ export default class RouteMapConfigurator extends Component {
                             />
                         </div>
                     </div>
+                    <div className={style.element}>
+                        <div className={style.title}>Käytä jore-id:tä</div>
+                        <div className={style.value}>
+                            <input
+                                className={style.checkbox}
+                                type="checkbox"
+                                onChange={this.toggleJoreIdFiltering}
+                                value={this.props.useJoreId}
+                                checked={this.props.useJoreId}
+                            />
+                        </div>
+                    </div>
                     <div className={style.element}>
                         <div className={style.title}>Vain lähibussit</div>
                         <div className={style.value}>

app/components/pointBuildTrigger.css

@@ -39,3 +39,20 @@
 .marginTop {
     margin-top: 20px;
 }
+
+.prompt {
+    display: flex;
+    flex-direction: column;
+}
+
+.promptButtonContainer {
+    height: 125px;
+    justify-content: space-between;
+    align-items: end;
+    display: flex;
+    flex-direction: row;
+}
+
+.button {
+    width: 150px;
+}

app/containers/Map.js

@@ -20,7 +20,8 @@ function mapStateToProps(state) {
         style: styleFromLayers(
             state.layers,
             date,
-            state.routeMapConfiguration.get("routeFilter")
+            state.routeMapConfiguration.get("routeFilter"),
+            state.routeMapConfiguration.get("useJoreId")
         ),
         mapWidth: state.layout.mapWidth,
         mapHeight: state.layout.mapHeight,

app/containers/RouteMapConfigurator.js

@@ -7,7 +7,8 @@ import {
     setRouteFilter,
     toggleOnlyNearBuses,
     toggleZoneSymbols,
-    setSymbolSize
+    setSymbolSize,
+    toggleJoreIdFiltering
 } from "../actions/routeMapConfiguration";
 import {addSymbol} from "../actions/viewport";
 import RouteMapConfigurator from "../components/RouteMapConfigurator";
@@ -24,7 +25,8 @@ function mapStateToProps(state) {
         showOnlyNearBuses: state.routeMapConfiguration.get("onlyNearBuses"),
         showZoneSymbols: state.routeMapConfiguration.get("zoneSymbols"),
         pointConfig: state.publisherRequests.pointConfig,
-        symbolSize: state.routeMapConfiguration.get("symbolSize")
+        symbolSize: state.routeMapConfiguration.get("symbolSize"),
+        useJoreId: state.routeMapConfiguration.get("useJoreId")
     };
 }
 
@@ -40,7 +42,8 @@ function mapDispatchToProps(dispatch) {
             toggleZoneSymbols,
             setSymbolSize,
             setLayer,
-            addSymbol
+            addSymbol,
+            toggleJoreIdFiltering
         },
         dispatch
     );

app/reducers/routeMapConfiguration.js

@@ -18,7 +18,8 @@ import {
     TOGGLE_ONLY_NEAR_BUSES,
     TOGGLE_ZONE_SYMBOLS,
     SET_SYMBOL_SIZE,
-    LOAD_STATE
+    LOAD_STATE,
+    TOGGLE_JORE_ID_FILTERING
 } from "../actions/routeMapConfiguration";
 
 const initialState = fromJS({
@@ -38,7 +39,8 @@ const initialState = fromJS({
     stationFontSize: 12,
     onlyNearBuses: false,
     zoneSymbols: false,
-    symbolSize: "200px"
+    symbolSize: "200px",
+    useJoreId: false
 });
 
 export default function routeMapConfiguration(state = initialState, action) {
@@ -90,6 +92,9 @@ export default function routeMapConfiguration(state = initialState, action) {
             });
             return newState;
         }
+        case TOGGLE_JORE_ID_FILTERING: {
+            return state.set("useJoreId", !state.get("useJoreId"));
+        }
         default:
             return state;
     }

app/utils/map-utils.js

@@ -35,20 +35,36 @@ const mapLayers = (layers) => {
     return ret;
 };
 
-export const styleFromLayers = memoize((layers, date, routeFilter) => {
-    const style = hslMapStyle.generateStyle({
-        components: mapLayers(layers),
-        routeFilter
-    });
-
-    sourcesWithDate.forEach((key) => {
-        if (style.sources[key] && style.sources[key].url) {
-            style.sources[key].url += `?date=${date}`;
+const parseRouteFilterIds = (routeFilter, useJoreId) => {
+    if (routeFilter && routeFilter.length >= 0) {
+        if (!useJoreId) {
+            const mappedFilter = routeFilter.map((filter) => {
+                return {idParsed: filter};
+            });
+            return mappedFilter;
         }
-    });
+        return routeFilter;
+    }
+    return [];
+};
 
-    return style;
-});
+export const styleFromLayers = memoize(
+    (layers, date, routeFilter, useJoreId) => {
+        console.log(useJoreId);
+        const style = hslMapStyle.generateStyle({
+            components: mapLayers(layers),
+            routeFilter: parseRouteFilterIds(routeFilter, useJoreId)
+        });
+
+        sourcesWithDate.forEach((key) => {
+            if (style.sources[key] && style.sources[key].url) {
+                style.sources[key].url += `?date=${date}`;
+            }
+        });
+
+        return style;
+    }
+);
 
 export const createMapOptions = (mapSelection) => {
     const tileScale = mapSelectionToTileScale(mapSelection);
@@ -88,7 +104,10 @@ export const createMapOptions = (mapSelection) => {
 export const createConfigurationOptions = (configuration, pointConfig) => ({
     date: moment(pointConfig.target_date).format("YYYY-MM-DD"),
     name: configuration.get("posterName"),
-    routeFilter: configuration.get("routeFilter"),
+    routeFilter: parseRouteFilterIds(
+        configuration.get("routeFilter"),
+        configuration.get("useJoreId")
+    ),
     scaleFontSize: configuration.get("scaleFontSize"),
     scaleLength: configuration.get("scaleLength"),
     maxAnchorLength: configuration.get("maxAnchorLineLength"),

app/utils/ui-utils.js

@@ -35,3 +35,22 @@ export const deleteModalStyles = {
             "rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.4) 0px 3px 14px"
     }
 };
+
+export const promptStyles = {
+    content: {
+        position: "fixed",
+        height: "250px",
+        width: "500px",
+        top: "30%",
+        left: "50%",
+        background: "rgba(255, 255, 255, 1)",
+        overflow: "auto",
+        borderRadius: "2px",
+        outline: "none",
+        padding: "50px",
+        transform: "translate(-40%, 0%)",
+        right: "auto",
+        boxShadow:
+            "rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.4) 0px 3px 14px"
+    }
+};