Merge pull request #69 from HSLdevcom/stage

MM-188 and other tasks
HSLdevcom · Mar 12, 2021 · 3531c5b · 3531c5b
2 parents c1876d1 + dd6dde3
commit 3531c5b
Show file tree

Hide file tree

Showing 16 changed files with 19,760 additions and 120 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,7 +8,6 @@
     "apollo-client": "^2.6.3",
     "apollo-fetch": "^0.7.0",
     "apollo-link-http": "^1.5.15",
-    "chroma-js": "^2.0.4",
     "classnames": "^2.2.6",
     "eslint-config-prettier": "^5.0.0",
     "eslint-plugin-prettier": "^3.1.0",
@@ -17,6 +16,7 @@
     "graphql-tag": "^2.10.1",
     "leaflet": "^1.5.1",
     "lodash": "^4.17.11",
+    "material-ui": "^0.20.2",
     "mobx": "^5.15.4",
     "mobx-react": "^6.2.2",
     "prop-types": "^15.7.2",
@@ -25,6 +25,7 @@
     "react-apollo": "^2.5.6",
     "react-apollo-hooks": "^0.5.0",
     "react-dom": "^16.8.6",
+    "react-icons": "^4.1.0",
     "react-router-dom": "^5.0.1",
     "react-scripts": "3.0.1",
     "redux": "^4.0.1",

diff --git a/src/components/app.js b/src/components/app.js
@@ -6,6 +6,8 @@ import { ApolloProvider as ApolloHooksProvider } from "react-apollo-hooks";
 import { ApolloClient } from "apollo-client";
 import { HttpLink } from "apollo-link-http";
 import { InMemoryCache } from "apollo-cache-inmemory";
+import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
+
 import Home from "./home";
 import MapContainer from "./mapContainer";
 import style from "./app.module.css";
@@ -26,10 +28,12 @@ const App = () => (
     <Provider {...stores}>
       <ApolloProvider client={client}>
         <ApolloHooksProvider client={client}>
-          <Router basename={rootPath}>
-            <Route component={Home} path="/" exact />
-            <Route path={"/map"} component={MapContainer} />
-          </Router>
+          <MuiThemeProvider>
+            <Router basename={rootPath}>
+              <Route component={Home} path="/" exact />
+              <Route path={"/map"} component={MapContainer} />
+            </Router>
+          </MuiThemeProvider>
         </ApolloHooksProvider>
       </ApolloProvider>
     </Provider>

diff --git a/src/components/home.js b/src/components/home.js
@@ -59,7 +59,7 @@ class Home extends React.Component {
       <div>
         <Header />
         <div className={styles.root}>
-          <LineList />
+          <LineList frontpage={true} />
         </div>
         <div className={styles.buttonContainer}>
           <div

diff --git a/src/components/lineList.js b/src/components/lineList.js
@@ -1,5 +1,6 @@
 import React, { useState, useCallback } from "react";
 import { inject, observer } from "mobx-react";
+import CircularProgress from "material-ui/CircularProgress";
 import Line from "./line";
 import LineSearch from "./lineSearch";
 import gql from "graphql-tag";
@@ -109,18 +110,48 @@ const LineList = inject("lineStore")(
       return isSelected;
     };
 
+    const isIgnoredLine = (line) => {
+      if (!props.ignoredLines) {
+        return true;
+      }
+      const ignoredLineKeys = props.ignoredLines.map(
+        (ignoredLine) => ignoredLine.lineKey
+      );
+      const lineKey = `${line.lineId}${line.dateBegin}${line.dateEnd}`;
+      return !ignoredLineKeys.includes(lineKey);
+    };
+
     return (
       <div>
-        <h3>Reitit</h3>
+        {!props.hideTitle && (
+          <div className={styles.titleContainer}>
+            <h3>Reitit</h3>
+          </div>
+        )}
+
         <LineSearch query={query} onChange={updateQuery} />
         <Query query={allLinesQuery}>
           {({ data }) => {
+            if (!data.allLines) {
+              return (
+                <div
+                  className={`${
+                    props.frontpage ? styles.frontpageLoading : styles.loading
+                  }`}>
+                  <CircularProgress
+                    size={200}
+                    style={{ display: "block", margin: "auto" }}
+                  />
+                </div>
+              );
+            }
             const lines = get(data, "allLines.nodes", []);
             const queries = query.toLowerCase().split(",");
             return lines
               .filter((node) => node.routes.totalCount !== 0)
               .filter(removeTrainsFilter)
               .filter(removeFerryFilter)
+              .filter((line) => isIgnoredLine(line))
               .map(setTransportTypeMapper)
               .map(lineNumberMapper)
               .sort(linesSorter)

diff --git a/src/components/lineList.module.css b/src/components/lineList.module.css
@@ -6,6 +6,19 @@
   border-radius: 5px;
 }
 
+.loading {
+  padding-top: 10vh;
+}
+
+.frontpageLoading {
+  padding-top: 10vh;
+  height: 50vh;
+}
+
+.titleContainer {
+  display: flex;
+}
+
 .divContainer:hover {
   border-radius: 5px;
   background-color: rgb(0, 122, 201, 0.2);

diff --git a/src/components/lineSearch.module.css b/src/components/lineSearch.module.css
@@ -6,6 +6,6 @@
   font-size: 15px;
   padding: 5px 6px 4px 6px;
   margin: var(--contentWrapperMargin);
-  width: 100%;
+  width: 95%;
   max-width: 400px;
 }
diff --git a/src/components/map.js b/src/components/map.js
@@ -3,11 +3,23 @@ import Sidebar from "./sidebar";
 import MapLeaflet from "./mapLeaflet";
 import styles from "./map.module.css";
 
+const COLORS = [
+  "66B2FF",
+  "FF3333",
+  "10864B",
+  "CDB100",
+  "1D80B2",
+  "6600CC",
+  "F7922D",
+  "DC00DC",
+];
+
 class Map extends React.Component {
   constructor() {
     super();
     this.state = {
       selectedRoutes: [],
+      routeColorSchema: {},
       showFilterFullScreen: false,
       isFullScreen: false,
       center: null,
@@ -22,7 +34,19 @@ class Map extends React.Component {
     this.setState({ center });
   }
 
+  addToColorMap(route) {
+    const routeColorSchema = this.state.routeColorSchema;
+    if (routeColorSchema[route]) return;
+
+    const routeColorSchemaValues = Object.values(routeColorSchema);
+    const routeColor = `#${COLORS[routeColorSchemaValues.length % COLORS.length]}`;
+    routeColorSchema[route] = routeColor;
+    this.setState({ routeColorSchema });
+  }
+
   addSelection(route) {
+    this.addToColorMap(route);
+
     this.setState({
       selectedRoutes: this.state.selectedRoutes.concat(route),
     });
@@ -52,21 +76,38 @@ class Map extends React.Component {
     } else this.addSelection(e.target.value);
   }
 
+  coloredRoutes(routes) {
+    const colorSchema = this.state.routeColorSchema;
+    routes.forEach((route, index) => {
+      const routeId = `${route.name}_${route.routeId}_${route.direction}_${route.dateBegin}_${route.dateEnd}`;
+      route.color = colorSchema[routeId];
+    });
+    return routes;
+  }
+
   render() {
     let routes = [];
     this.props.mapProps.forEach((props) => {
-      routes = routes.concat(props.lineRoutes);
+      const lineRoutes = props.lineRoutes.map((route) => {
+        route.name = props.nameFi;
+        return route;
+      });
+
+      routes = routes.concat(lineRoutes);
     });
     const lines = this.props.mapProps.map((props) => {
       return {
+        lineId: props.lineId,
+        lineKey: props.lineKey,
         transportType: props.transportType,
         lineNumber: props.lineNumber,
-        lineNameFi: props.lineNameFi,
+        lineNameFi: props.nameFi,
         routes: props.lineRoutes,
         notes: props.notes,
       };
     });
 
+    const coloredRoutes = this.coloredRoutes(routes);
     return (
       <div className={styles.root}>
         <Sidebar
@@ -78,10 +119,12 @@ class Map extends React.Component {
           toggleFilter={this.routeFilterToggleFilter}
           notes={lines.notes}
           setMapCenter={this.setMapCenter}
+          removeSelectedLine={this.props.mapProps.removeSelectedLine}
+          onAddLines={this.props.onAddLines}
         />
         <MapLeaflet
           center={this.state.center}
-          routes={routes}
+          routes={coloredRoutes}
           selectedRoutes={this.state.selectedRoutes}
           isFullScreen={this.state.isFullScreen}
           toggleFullscreen={this.mapLeafletToggleFullscreen}

diff --git a/src/components/mapContainer.js b/src/components/mapContainer.js
@@ -26,6 +26,8 @@ const lineQuery = `query lineQuery($id: String!, $dateBegin: Date!, $dateEnd: Da
   ) {
     lineId
     nameFi
+    dateBegin
+    dateEnd
     routes {
       nodes {
         routeId
@@ -125,15 +127,49 @@ class MapContainer extends Component {
     return lines;
   };
 
+  setUrl = (selectedLines) => {
+    let params = "?";
+    selectedLines.forEach((selectedLine, index) => {
+      const and = index === selectedLines.length - 1 ? "" : "&";
+      const lineId = selectedLine.data.line.lineId;
+      params = `${params}${lineId}[dateBegin]=${selectedLine.data.line.dateBegin}&${lineId}[dateEnd]=${selectedLine.data.line.dateEnd}${and}`;
+    });
+    this.props.history.push(`/map/${params}`);
+  };
+  addLines = async (newLines) => {
+    const existingParams = this.getQueryParamValues(this.props.location.search);
+    newLines.forEach((newLine) => {
+      existingParams.push({
+        lineId: newLine.lineId,
+        dateBegin: newLine.dateBegin,
+        dateEnd: newLine.dateEnd,
+      });
+    });
+
+    let params = "?";
+    existingParams.forEach((param, index) => {
+      const and = index === existingParams.length - 1 ? "" : "&";
+      const lineId = param.lineId;
+      params = `${params}${lineId}[dateBegin]=${param.dateBegin}&${lineId}[dateEnd]=${param.dateEnd}${and}`;
+    });
+
+    this.props.history.push(`/map/${params}`);
+
+    const lines = await this.getLines(existingParams);
+    this.setState({ lines });
+  };
+
   render() {
     if (!this.state || !this.state.lines) {
       return null;
     }
     const mapProps = this.state.lines.map((lineData) => {
       const line = lineData.data.line;
+      const lineKey = `${line.lineId}${line.dateBegin}${line.dateEnd}`;
       return {
         lineId: line.lineId,
         nameFi: line.nameFi,
+        lineKey: lineKey,
         transportType: getTransportType(line),
         lineNumber: parseLineNumber(line.lineId),
         lineRoutes: sortBy(line.routes.nodes, "dateBegin"),
@@ -147,7 +183,18 @@ class MapContainer extends Component {
         ),
       };
     });
-    return <Map mapProps={mapProps} />;
+    mapProps.removeSelectedLine = (line) => {
+      const lineKey = `${line.lineId}${line.lineNameFi}`;
+      const currentLines = this.state.lines;
+      const newLines = currentLines.filter((currentLine) => {
+        const currentLineKey = `${currentLine.data.line.lineId}${currentLine.data.line.nameFi}`;
+        if (currentLineKey !== lineKey) return currentLine;
+      });
+      this.setUrl(newLines);
+      this.setState({ lines: newLines });
+    };
+
+    return <Map onAddLines={this.addLines} mapProps={mapProps} />;
   }
 }
 export default inject("lineStore")(observer(MapContainer));
diff --git a/src/components/mapLeaflet.css b/src/components/mapLeaflet.css
@@ -14,6 +14,7 @@
 }
 
 .stopIcon {
+  display: none;
   background-color: white;
   border-radius: 24px;
 }