Merge pull request #164 from HSLdevcom/MM-511

MM-511 Add Pikaratikka

src/components/home.js

@@ -25,14 +25,13 @@ class Home extends React.Component {
 
   lineNumbers = (selectedLines) => {
     return selectedLines.map((line, index) => {
-      const type =
-        line.routes.nodes.length > 0 ? line.routes.nodes[0].mode : line.transportType;
       return (
         <div key={index} className={styles.row}>
           <div
             className={classnames(styles.lineNumber, {
-              [styles.tram]: type === "TRAM",
-              [styles.bus]: type !== "TRAM",
+              [styles.lrail]: line.transportType === "L_RAIL",
+              [styles.tram]: line.transportType === "TRAM",
+              [styles.bus]: line.transportType === "BUS",
               [styles.trunk]: line.trunkRoute === "1",
             })}>
             {line.lineNumber}

src/components/home.module.css

@@ -70,15 +70,19 @@
 }
 
 .bus {
-  color: rgb(0, 122, 201);
+  color: var(--busBlue)
 }
 
 .tram {
-  color: rgb(0, 152, 95);
+  color: var(--tramGreen)
+}
+
+.lrail {
+  color: var(--lrailAzure)
 }
 
 .trunk {
-  color: #ff6319;
+  color: var(--trunkOrange)
 }
 
 .row {

src/components/lineIcon.js

@@ -1,6 +1,7 @@
 import React from "react";
 import classNames from "classnames";
 import BusIcon from "../icons/icon-bus-station.js";
+import LRailIcon from "../icons/icon-lrail.js";
 import TramIcon from "../icons/icon-tram.js";
 import TrunkIcon from "../icons/icon-trunk-station.js";
 import styles from "./lineIcon.module.css";
@@ -19,13 +20,16 @@ const LineIcon = ({
         <TrunkIcon height={iconSize} />
       ) : transportType === "TRAM" ? (
         <TramIcon height={iconSize} />
+      ) : transportType === "L_RAIL" ? (
+        <LRailIcon height={iconSize} />
       ) : (
         <BusIcon height={iconSize} />
       )}
       <span
         className={classNames(styles.lineNumber, {
+          [styles.lrail]: transportType === "L_RAIL",
           [styles.tram]: transportType === "TRAM",
-          [styles.bus]: transportType !== "TRAM",
+          [styles.bus]: transportType === "BUS",
           [styles.trunk]: trunkRoute,
         })}>
         {shortName}

src/components/lineIcon.module.css

@@ -27,6 +27,10 @@
   color: var(--tramGreen);
 }
 
+.lrail {
+  color: var(--lrailAzure);
+}
+
 .trunk {
-  color: #ff6319;
+  color: var(--trunkOrange);
 }

src/components/lineList.js

@@ -8,45 +8,27 @@ import { get, groupBy, orderBy } from "lodash";
 import Line from "./line";
 import LineSearch from "./lineSearch";
 import styles from "./lineList.module.css";
-
-const transportTypeOrder = ["tram", "bus"];
+import {
+  parseLineNumber,
+  parseTransportType,
+  compareLineNameOrder,
+} from "../utils/lineDataUtils";
 
 const removeTrainsFilter = (line) => line.lineId.substring(0, 1) !== "3";
 const removeFerryFilter = (line) => {
   return line.routes.nodes[0].type !== "07";
 };
 
-const setTransportTypeMapper = (line) => {
-  if (line.lineId.substring(0, 4) >= 1001 && line.lineId.substring(0, 4) <= 1010) {
-    return { ...line, transportType: "tram" };
-  }
-  return { ...line, transportType: "bus" };
-};
-
-const parseLineNumber = (lineId) =>
-  // Remove 1st number, which represents the city
-  // Remove all zeros from the beginning
-  lineId.substring(1).replace(/^0+/, "");
+const setTransportTypeMapper = (line) => ({
+  ...line,
+  transportType: parseTransportType(line),
+});
 
 const lineNumberMapper = (line) => ({
   ...line,
   lineNumber: parseLineNumber(line.lineId),
 });
 
-const linesSorter = (a, b) => {
-  if (a.transportType !== b.transportType) {
-    return transportTypeOrder.indexOf(a.transportType) >
-      transportTypeOrder.indexOf(b.transportType)
-      ? 1
-      : -1;
-  } else if (a.lineId.substring(1, 4) !== b.lineId.substring(1, 4)) {
-    return a.lineId.substring(1, 4) > b.lineId.substring(1, 4) ? 1 : -1;
-  } else if (a.lineId.substring(0, 1) !== b.lineId.substring(0, 1)) {
-    return a.lineId.substring(0, 1) > b.lineId.substring(0, 1) ? 1 : -1;
-  }
-  return a.lineId.substring(4, 6) > b.lineId.substring(4, 6) ? 1 : -1;
-};
-
 const allLinesQuery = gql`
   query AllLinesQuery {
     allLines {
@@ -156,7 +138,7 @@ const LineList = (props) => {
       .filter((line) => isIgnoredLine(line))
       .map(setTransportTypeMapper)
       .map(lineNumberMapper)
-      .sort(linesSorter)
+      .sort(compareLineNameOrder)
       .filter((value) => {
         if (value.lineId) {
           return (
@@ -184,7 +166,7 @@ const LineList = (props) => {
             lineId={line.lineId}
             longName={line.nameFi}
             shortName={line.lineNumber}
-            transportType={line.routes.nodes[0].mode}
+            transportType={line.transportType}
             dateBegin={line.dateBegin}
             dateEnd={line.dateEnd}
             trunkRoute={line.trunkRoute === "1"}

src/components/mapContainer.js

@@ -7,17 +7,7 @@ import uniq from "lodash/uniq";
 import Map from "./map";
 import dayjs from "dayjs";
 
-const parseLineNumber = (lineId) =>
-  // Remove 1st number, which represents the city
-  // Remove all zeros from the beginning
-  lineId.substring(1).replace(/^0+/, "");
-
-const getTransportType = (line) => {
-  if (line.lineId.substring(0, 4) >= 1001 && line.lineId.substring(0, 4) <= 1010) {
-    return "tram";
-  }
-  return "bus";
-};
+import { parseLineNumber, parseTransportType } from "../utils/lineDataUtils";
 
 const lineQuery = gql`
   query lineQuery($id: String!, $dateBegin: Date!, $dateEnd: Date!) {
@@ -249,7 +239,7 @@ class MapContainer extends Component {
         lineId: line.lineId,
         nameFi: line.nameFi,
         lineKey: lineKey,
-        transportType: getTransportType(line),
+        transportType: parseTransportType(line),
         lineNumber: parseLineNumber(line.lineId),
         lineRoutes: sortBy(line.routes.nodes, "dateBegin"),
         trunkRoute: line.trunkRoute === "1",

src/components/routeFilterItem.module.css

@@ -54,14 +54,6 @@ input:checked + .slider:before {
   transform: translateX(26px);
 }
 
-input:checked + .bus {
-  background-color: var(--busBlue);
-}
-
-input:checked + .tram {
-  background-color: var(--tramGreen);
-}
-
 .stopListButtonWrapper {
   padding-left: 20px;
 }

src/components/sidebar.js

@@ -1,16 +1,16 @@
 import React from "react";
-import { FiXCircle } from "react-icons/fi";
+import { FiXCircle, FiChevronDown, FiChevronUp } from "react-icons/fi";
 import { inject, observer } from "mobx-react";
 import classnames from "classnames";
 import RouteFilter from "./routeFilter";
 import LineList from "./lineList";
-import { FiChevronDown, FiChevronUp } from "react-icons/fi";
 import Header from "./header";
 import Notes from "./notes";
 import styles from "./sidebar.module.css";
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import LineAlertList from "./lineAlertList";
 import { runInAction } from "mobx";
+import { compareLineNameOrder } from "../utils/lineDataUtils";
 
 class Sidebar extends React.Component {
   constructor() {
@@ -63,20 +63,7 @@ class Sidebar extends React.Component {
         )}
       </div>
     );
-    const sortedLines = this.props.lines.sort((a, b) => {
-      const transportTypeOrder = ["tram", "bus"];
-      if (a.transportType !== b.transportType) {
-        return transportTypeOrder.indexOf(a.transportType) >
-          transportTypeOrder.indexOf(b.transportType)
-          ? 1
-          : -1;
-      } else if (a.lineId.substring(1, 4) !== b.lineId.substring(1, 4)) {
-        return a.lineId.substring(1, 4) > b.lineId.substring(1, 4) ? 1 : -1;
-      } else if (a.lineId.substring(0, 1) !== b.lineId.substring(0, 1)) {
-        return a.lineId.substring(0, 1) > b.lineId.substring(0, 1) ? 1 : -1;
-      }
-      return a.lineId.substring(4, 6) > b.lineId.substring(4, 6) ? 1 : -1;
-    });
+    const sortedLines = this.props.lines.sort(compareLineNameOrder);
     const isMobile = this.props.isMobile;
     const mappedAlerts = this.props.alerts.map(({ lineId, alerts }) => {
       return {

src/icons/icon-lrail.js

@@ -0,0 +1,21 @@
+/* eslint-disable max-len */
+
+import React from "react";
+
+export default function LRailIcon({ height }) {
+  return (
+    <svg viewBox="0 0 200 200" height={height}>
+      <defs></defs>
+      <g id="pikaratikka">
+        <path
+          fill="#00b2a9"
+          d="M25,0H175a25,25,0,0,1,25,25V175a25,25,0,0,1-25,25H25A25,25,0,0,1,0,175V25A25,25,0,0,1,25,0Z"
+        />
+        <path
+          fill="#fff"
+          d="M149.045,124.49,138.654,51.935a15.136,15.136,0,0,0-8.3-11.75,83.719,83.719,0,0,0-25.131-6.907v-8.8h18.384a4.933,4.933,0,0,0,0-9.866H76.679a4.933,4.933,0,1,0,0,9.866H95.091v8.8a83.632,83.632,0,0,0-25.16,6.907,15.117,15.117,0,0,0-8.279,11.75L51.262,124.49a35.463,35.463,0,0,0,1.491,16.23c1.031,3.086,2.955,9.307,4.126,12.344a14.05,14.05,0,0,0,9.639,8.411c7.727,2,19.257,3.739,33.626,3.739s25.9-1.734,33.626-3.739a14.051,14.051,0,0,0,9.64-8.411c1.17-3.037,3.095-9.258,4.126-12.344A35.469,35.469,0,0,0,149.045,124.49ZM139.7,134.661l-2.622,8.073a4.148,4.148,0,0,1-3.341,3.04c-3.647,1.1-19.067,3.722-33.591,3.831-14.525-.109-29.916-2.728-33.563-3.831a4.148,4.148,0,0,1-3.341-3.04l-2.623-8.073c-.6-1.823.907-3.114,2.946-2.561,6.292,1.7,13.287,3.133,19.1,4.274a5.9,5.9,0,0,1,4.173,3.015,5.717,5.717,0,0,0,4.643,3.24c2.648.168,5.733.265,8.663.265,3,0,6.013-.1,8.66-.265a5.717,5.717,0,0,0,4.644-3.24,5.9,5.9,0,0,1,4.173-3.015c5.816-1.141,12.839-2.57,19.131-4.274C138.794,131.547,140.3,132.838,139.7,134.661Zm-4.007-14.1a122.516,122.516,0,0,1-35.548,5.592,122.514,122.514,0,0,1-35.532-5.592,3.992,3.992,0,0,1-2.732-4.372l7.347-51.306a3.993,3.993,0,0,1,3.144-3.347,135.205,135.205,0,0,1,55.563,0,3.992,3.992,0,0,1,3.143,3.347l7.348,51.306A3.994,3.994,0,0,1,135.693,120.563Zm-7.142,49.522c-3.484.709-7.392,1.28-11.376,1.708,0,0,7.561,9,9.547,11.374,2.564,3.059,4.645,4.033,7.577,4.033,3.325,0,6.28-2.454,2.78-6.821C135.364,178.237,128.551,170.085,128.551,170.085Zm-56.8,0c3.483.709,7.39,1.28,11.376,1.708,0,0-7.562,9-9.548,11.374C71.017,186.226,68.936,187.2,66,187.2c-3.325,0-6.28-2.454-2.78-6.821C64.94,178.237,71.753,170.085,71.753,170.085Z"
+        />
+      </g>
+    </svg>
+  );
+}

src/styles/common.css

@@ -11,6 +11,8 @@
   --fontColor: rgb(20, 20, 20);
   --busBlue: rgb(0, 122, 201);
   --tramGreen: rgb(0, 152, 95);
+  --lrailAzure: #00b2a9;
+  --trunkOrange: #ff6319;
   --lightGray: rgb(221, 222, 220);
   --mediumGray: rgb(102, 102, 102);
   --warningRed: rgb(220, 4, 81);