new design and updates for PWA

snmslavk · Jan 20, 2018 · b2164ae · b2164ae
1 parent b473e55
commit b2164ae
Show file tree

Hide file tree

Showing 32 changed files with 186 additions and 63 deletions.
diff --git a/public/icons/GooglePlayStore.png b/public/icons/GooglePlayStore.png
diff --git a/public/icons/android-icon-144x144.png b/public/icons/android-icon-144x144.png
diff --git a/public/icons/android-icon-192x192.png b/public/icons/android-icon-192x192.png
diff --git a/public/icons/android-icon-36x36.png b/public/icons/android-icon-36x36.png
diff --git a/public/icons/android-icon-48x48.png b/public/icons/android-icon-48x48.png
diff --git a/public/icons/android-icon-72x72.png b/public/icons/android-icon-72x72.png
diff --git a/public/icons/android-icon-96x96.png b/public/icons/android-icon-96x96.png
diff --git a/public/icons/apple-icon-114x114.png b/public/icons/apple-icon-114x114.png
diff --git a/public/icons/apple-icon-120x120.png b/public/icons/apple-icon-120x120.png
diff --git a/public/icons/apple-icon-144x144.png b/public/icons/apple-icon-144x144.png
diff --git a/public/icons/apple-icon-152x152.png b/public/icons/apple-icon-152x152.png
diff --git a/public/icons/apple-icon-180x180.png b/public/icons/apple-icon-180x180.png
diff --git a/public/icons/apple-icon-57x57.png b/public/icons/apple-icon-57x57.png
diff --git a/public/icons/apple-icon-60x60.png b/public/icons/apple-icon-60x60.png
diff --git a/public/icons/apple-icon-72x72.png b/public/icons/apple-icon-72x72.png
diff --git a/public/icons/apple-icon-76x76.png b/public/icons/apple-icon-76x76.png
diff --git a/public/icons/apple-icon-precomposed.png b/public/icons/apple-icon-precomposed.png
diff --git a/public/icons/apple-icon.png b/public/icons/apple-icon.png
diff --git a/public/icons/favicon-16x16.png b/public/icons/favicon-16x16.png
diff --git a/public/icons/favicon-32x32.png b/public/icons/favicon-32x32.png
diff --git a/public/icons/favicon-96x96.png b/public/icons/favicon-96x96.png
diff --git a/public/icons/favicon.ico b/public/icons/favicon.ico
diff --git a/public/icons/ms-icon-144x144.png b/public/icons/ms-icon-144x144.png
diff --git a/public/icons/ms-icon-150x150.png b/public/icons/ms-icon-150x150.png
diff --git a/public/icons/ms-icon-310x310.png b/public/icons/ms-icon-310x310.png
diff --git a/public/icons/ms-icon-70x70.png b/public/icons/ms-icon-70x70.png
diff --git a/public/index.html b/public/index.html
@@ -16,7 +16,23 @@
     <meta name="theme-color" content="#000000">
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <meta name="msapplication-TileColor" content="#FFFFFF">
+    <meta name="msapplication-TileImage" content="%PUBLIC_URL%/icons/ms-icon-144x144.png">
+    <meta name="theme-color" content="#FFFFFF">
+
+    <link rel="apple-touch-icon" sizes="57x57" href="%PUBLIC_URL%/icons/apple-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="%PUBLIC_URL%/icons/apple-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="%PUBLIC_URL%/icons/apple-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="%PUBLIC_URL%/icons/apple-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="%PUBLIC_URL%/icons/apple-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="%PUBLIC_URL%/icons/apple-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="%PUBLIC_URL%/icons/apple-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="%PUBLIC_URL%/icons/apple-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/icons/apple-icon-180x180.png">
+    <link rel="icon" type="image/png" sizes="192x192"  href="%PUBLIC_URL%/icons/android-icon-192x192.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/icons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="%PUBLIC_URL%/icons/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/icons/favicon-16x16.png">
 
     <title>Online interactive metro map</title>
     <meta name="description" content="Find your route using map or list with stations on your mobile,desktop and tablet device! Interactive online metro/subway/underground map allows you to create your own route and find an optimal path within Metro. Enjoy!" />
@@ -44,56 +60,64 @@
         <!-- End Single Page Apps for GitHub Pages -->
   </head>
   <body>
-    <div id="fb-root"></div>
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-      <a class="navbar-brand" href="/">Navbar</a>
+      <a class="navbar-brand" href="/">Online metro map</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
 
       <div class="collapse navbar-collapse" id="navbarSupportedContent">
         <ul class="navbar-nav mr-auto">
-          <li class="nav-item active">
-            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
-          </li>
           <li class="nav-item">
-            <a class="nav-link" href="#">Link</a>
+            <a class="nav-link" href="/about">About</a>
           </li>
+          <li class="nav-item">
+            <a class="nav-link" href="/faq">FAQ</a>
+          </li>          
           <li class="nav-item dropdown">
             <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-              Dropdown
+              Cities
             </a>
             <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <div class="dropdown-divider"></div>
-              <a class="dropdown-item" href="#">Something else here</a>
+              <a class="dropdown-item" href="/prague">Prague</a>
             </div>
           </li>
-          <li class="nav-item">
-            <a class="nav-link disabled" href="#">Disabled</a>
-          </li>
         </ul>
-        <form class="form-inline my-2 my-lg-0">
-          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
-          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
-        </form>
       </div>
     </nav>
+
     <div id="root"></div>
-    <div class="product-social-links text-center">
-      <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-text="Hi! I&#39;m using online metro map" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
-      <div class="fb-share-button" data-href="https://mymetromap.com" data-layout="button_count" data-size="small" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmymetromap.com%2F&amp;src=sdkpreparse">Share</a></div>
-    </div>
-    <script>(function(d, s, id) {
-        var js, fjs = d.getElementsByTagName(s)[0];
-        if (d.getElementById(id)) return;
-        js = d.createElement(s); js.id = id;
-        js.src = 'https://connect.facebook.net/ru_RU/sdk.js#xfbml=1&version=v2.11';
-        fjs.parentNode.insertBefore(js, fjs);
-      }(document, 'script', 'facebook-jssdk'));</script>
+    <footer class="container py-5">
+      <div class="row">
+        <div class="col-12 col-md">
+          <!-- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-block mb-2"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg> -->
+          <small class="d-block mb-3 text-muted">© 2018</small>
+        </div>
+        <div class="col-6 col-md">
+          <h5>Usefull links</h5>
+          <ul class="list-unstyled text-small">
+            <li><a class="text-muted" href="/prague">Prague Metro Map</a></li>
+            <li><a class="text-muted" href="/about">About</a></li>
+            <li><a class="text-muted" href="/prague">FAQ</a></li>
+          </ul>
+        </div>
+        <div class="col-6 col-md">
+          <h5>Download this app to your phone</h5>
+          <ul class="list-unstyled text-small">
+            <li><a class="text-muted" href="#">What is it?</a></li>
+            <li><a class="text-muted" href="#">Progressive web app</a></li>
+          </ul>
+        </div>
+        <div class="col-6 col-md">
+
+        </div>
+        <div class="col-6 col-md">
+
+        </div>
+      </div>
+    </footer>
   </body>
 </html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,15 +1,46 @@
 {
-  "short_name": "Metro Map",
-  "name": "Online interactive metro map",
+  "name": "Online Metro Map",
+  "short_name": "Metro Map",  
   "icons": [
     {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    }
+      "src": "/icons/android-icon-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png",
+      "density": "0.75"
+     },
+     {
+      "src": "/icons/android-icon-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "density": "1.0"
+     },
+     {
+      "src": "/icons/android-icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "density": "1.5"
+     },
+     {
+      "src": "/icons/android-icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "density": "2.0"
+     },
+     {
+      "src": "/icons/android-icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "density": "3.0"
+     },
+     {
+      "src": "/icons/android-icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "density": "4.0"
+     }
   ],
   "start_url": "./index.html",
   "display": "standalone",
-  "theme_color": "#000000",
+  "theme_color": "#ffffff",
   "background_color": "#ffffff"
 }
diff --git a/src/App.js b/src/App.js
@@ -35,10 +35,16 @@ class App extends Component {
   }
 
   handleSelectStationFrom(station) {
-    this.setState({stationFrom: station});
+    if (station !== '') {
+      this.setState({stationFrom: station});
+    }
   }
 
   handleSelectStationTo(station) {
+    let {stationFrom} = this.state;
+    if (typeof stationFrom === "undefined") {
+      station = '';
+    }
     this.setState({stationTo: station});
   }
 
@@ -59,26 +65,22 @@ class App extends Component {
 
         <div className="container-fluid">
           <div className="row">
-          </div>
-          <div className="row">
-            <div className="col-md-10    col-md-offset-2">
-              <div className="row">
+            <div className="col-md-10  offset-md-2">
+              <div className="row pt-2">
                 <div className="col-md-6">
-                  <label htmlFor="cmbFrom">From</label>
-                  <StationCombobox onChangeSelection={this.handleSelectStationFrom.bind(this)} stationName={stationFrom} stationList={stationList}/>
+                  <StationCombobox onChangeSelection={this.handleSelectStationFrom.bind(this)} stationName={stationFrom} stationList={stationList} stationType="from"/>
                 </div>
                 <div className="col-md-6">
-                  <label htmlFor="cmbTo">To</label>
-                  <StationCombobox onChangeSelection={this.handleSelectStationTo.bind(this)} stationName={stationTo} stationList={stationList}/>
+                  <StationCombobox onChangeSelection={this.handleSelectStationTo.bind(this)} stationName={stationTo} stationList={stationList} stationType="to"/>
                 </div>
               </div> 
             </div>
           </div>
-          <div className="row fill">
+          <div className="row">
             <div className="col-md-2">
               <StationList city={city} stations={stationPath}/>
             </div>
-            <div className="col-md-10 fill">
+            <div className="col-md-10">
                {/* hidden-xs */}
               <MainMap onMapSelectStation={this.handleMapSelectStation.bind(this)} 
                 stationOne={stationFrom} stationTwo={stationTo} stationList={stationList} city={city}
@@ -87,9 +89,64 @@ class App extends Component {
           </div>
 
           <div className="row">
-            <div className="col-md-8 col-md-offset-2">
+
+            <div className="col-lg-6">
+            <div className="mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
+              <div className="my-3 p-3">
+                <h2 className="display-5">General information</h2>
+                <p className="lead">This is interactive online metro(underground) map of Prague.It allows you to easily find the needed route between stations. Even though the scheme of the prague metro map is not too complex and contains only 3 main line, we hope that this website with prague metro map would be useful for you in the future. Please don’t forget that Prague metro openings hours: 5:00am - 12:00pm. The average time that it requires to reach one station from another is about 2 minutes. During working hours prague metro has 2-3 minutes interval between trains, but during weekends and public holidays it could be up to 10 minutes, because of that be carefull with prague online metro map and plan your trip in advance. Prague online metro map has 3 lines: Line A (color green), Line B (color yellow) and Line C (color red). If you want to switch between lines during your trip within prague metro you can use three key transfer station: Muzeum (red-green), Mustek(yellow-green), Florenc(yellow-red)..</p>
+              </div>
+              </div>
+              </div>
+
+              <div className="col-lg-6">
+              <div className="mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
+              <div className="my-3 p-3">
+                <h2 className="display-5">Prices</h2>
+                <p className="lead">Individual fares for 1 person in Prague</p>
+                <table className="table table-striped">
+                  <thead>
+                    <tr>
+                      <th scope="col">Ticket type</th>
+                      <th scope="col">Adult</th>
+                      <th scope="col">Child</th>
+                      <th scope="col">Senior</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <th scope="row">Basic (90min.)</th>
+                      <td>32</td>
+                      <td>16</td>
+                      <td>16</td>
+                    </tr>
+                    <tr>
+                      <th scope="row">Short-term (30min.)</th>
+                      <td>24</td>
+                      <td>12</td>
+                      <td>12</td>
+                    </tr>
+                    <tr>
+                      <th scope="row">1 day (24hrs.)</th>
+                      <td>110</td>
+                      <td>55</td>
+                      <td>55</td>
+                    </tr>
+                    <tr>
+                      <th scope="row">3 days (72hrs.)</th>
+                      <td>310</td>
+                      <td>-</td>
+                      <td>-</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              </div>
+              </div>
+
+            {/* <div className="col-md-8 offset-md-2">
               <p>This is interactive online metro(underground) map of Prague.It allows you to easily find the needed route between stations. Even though the scheme of the prague metro map is not too complex and contains only 3 main line, we hope that this website with prague metro map would be useful for you in the future. Please don’t forget that Prague metro openings hours: 5:00am - 12:00pm. The average time that it requires to reach one station from another is about 2 minutes. During working hours prague metro has 2-3 minutes interval between trains, but during weekends and public holidays it could be up to 10 minutes, because of that be carefull with prague online metro map and plan your trip in advance. Prague online metro map has 3 lines: Line A (color green), Line B (color yellow) and Line C (color red). If you want to switch between lines during your trip within prague metro you can use three key transfer station: Muzeum (red-green), Mustek(yellow-green), Florenc(yellow-red).</p>
-            </div>
+            </div> */}
           </div>
 
           <div className="row">
@@ -100,6 +157,7 @@ class App extends Component {
           </nav> */}
           </div>           
         </div>
+
       </div>
     );
   }

diff --git a/src/components/MainMap.jsx b/src/components/MainMap.jsx
@@ -379,11 +379,11 @@ class MainMap extends Component {
     //console.log("render");
     let {city} = this.props;
     return (
-      <div className="mainMap div">
+      <div className="mainMap border">
 
-        <button type="button" className="btn btn-dark btn-md pull-right" onClick={this.handleZoomIn.bind(this)}>+</button>
-        <button type="button" className="btn btn-dark btn-md pull-right" onClick={this.handleZoomOut.bind(this)}>-</button>
-        <h5 className="pull-right">You can drag and zoom the metro map.</h5>
+        <button type="button" className="btn btn-dark btn-md float-right" onClick={this.handleZoomIn.bind(this)}>+</button>
+        <button type="button" className="btn btn-dark  btn-md float-right" onClick={this.handleZoomOut.bind(this)}>-</button>
+        <div className="float-right">You can drag and zoom the metro map.</div>
         <img alt="metro map" src={city.toLowerCase()+"_metro.svg"} id="mainImage" style={{display: 'none'}} ></img>
         {/* <canvas id="myCanvas" ref={ ref => { this.initMap(ref); } } resize="true"></canvas> */}
         <canvas id="myCanvas" ref={ ref => { this.canvas=ref; } } resize="true"></canvas>

diff --git a/src/components/StationCombobox.jsx b/src/components/StationCombobox.jsx
@@ -7,12 +7,13 @@ class StationCombobox extends Component {
   //   this.state = {value: stationName};
   // }
   handleChange(event) {
-    // console.log('handle change');
+    //console.log('handle change');
     //this.setState({value: event.target.value});
+    //console.log(event.target.value);
     this.props.onChangeSelection(event.target.value);
   }
   render() {
-      var {stationName,stationList} = this.props;
+      var {stationName,stationList,stationType} = this.props;
       var renderSelect = () => {
         if (stationList.length === 0) {
           return (
@@ -28,9 +29,18 @@ class StationCombobox extends Component {
             );
         });
       };
+      var renderPlaceholder = () => {
+        if (stationType === 'from') {
+          return 'From station...';
+        }
+        if (stationType === 'to') {
+          return 'To station...';
+        }
+        return '';
+      }
       return (
           <select className="form-control" onChange={this.handleChange.bind(this)} value={stationName}>
-            <option value=''></option>
+            <option value=''>{renderPlaceholder()}</option>
             {renderSelect()}
           </select>
       );

diff --git a/src/components/StationList.jsx b/src/components/StationList.jsx
@@ -8,7 +8,7 @@ class StationList extends Component {
         var renderTodos = () => {
             if (stations.length === 0) {
               return (
-                <li className="list-group-item">Choose "From" and "To" stations</li>
+                <li className="list-group-item d-flex justify-content-between align-items-center"></li>
               );
             }
             //console.log('stations');
@@ -20,23 +20,23 @@ class StationList extends Component {
                     badges = elem.line.map((element) => {
                         //console.log("MMMMM");
                         //console.log(element);
-                        return <span key={element} style={{backgroundColor: lineConfig[element].color}} className="badge">{lineConfig[element].name}</span>
+                        return <span key={element} style={{backgroundColor: lineConfig[element].color}} className="badge badge-pill">{lineConfig[element].name}</span>
 
                     });
                 } else {
-                    badges=<span style={{backgroundColor: lineConfig[elem.line].color, color: 'white'}} className="badge">{lineConfig[elem.line].name}</span>;
+                    badges=<span style={{backgroundColor: lineConfig[elem.line].color}} className="badge badge-pill">{lineConfig[elem.line].name}</span>;
                 }
                 return (
-                    <li key={elem.key} className="list-group-item">
+                    <li key={elem.key} className="list-group-item d-flex justify-content-between align-items-center">
                         {elem.name}
-                        {badges}
+                        <span>{badges}</span>
                     </li>
                 );
             });
         };
 
         return (
-            <ul className="list-group">
+            <ul className="list-group list-group-flush">
                 {renderTodos()}
             </ul>
         );