Offline mode is online

* removed the daylight icon
* added settings icon
* updated HabitatFont with 1 new glyph
* the daylight option was moved to the settings page
* the app will now store the latest position data and use
  it when network is not available.
* added loading bar at starta (indicating applicationCache progress)
* added option to force refresh applicationCache
* added option to have station placed on the map as well as
  a chase car
* updated README

Author: rossengeorgiev

README.md

@@ -6,14 +6,29 @@ Also, works great on desktops, laptops or netbooks. It is build upon
 
 [Live version](http://habhub.org/mt/)
 
-## Geo position
+## Features
+
+* HAB tracking with Habitat
+* Map tracker with Google Maps API 3
+* Chase Car functionality
+* Daylight cycle overlay, for long flights
+
+### Geo position
 
 The app will ask for permission to use your location.
-This is requird for some of the features. It is **important** to note that
+This is required for some of the features. It is **important** to note that
 your location will not be made available or send to anyone. Unless you enable
  the `chase car mode`, which will periodically upload it to habitat. _The app
 will always start with `chase car mode` disabled._
 
+### Offline storage
+
+The app will ask to use offline storage. You will need to accept in order to
+use the offline capabilities. The app will cache all files making it available
+even when there is no network coverage. Latest position data will also be stored
+and used when you start up with no network. When you get back online, the app
+will fetch the latest position data.
+
 ## Design
 
 Author: Daniel Saul [@danielsaul](https://github.com/danielsaul)
@@ -24,11 +39,11 @@ Author: Daniel Saul [@danielsaul](https://github.com/danielsaul)
 
 ## Currently Supported Devices
 
-### iOS, Anroid, Deskstops
+### iOS, Android, Deskstops
 
 * Modern browser required (IE not supported)
 * Browsers supporting _Geolocation API_ will have `Chase car mode` available
-* For best expirence on _iOS devices_, add the webapp to your home screen.
+* For best experience on _iOS devices_, add the webapp to your home screen.
 This will hide Safari's UI and make it look like a native app. I think it also allows it to run in the background.
 
 

cache.manifest

@@ -1,6 +1,16 @@
 CACHE MANIFEST
-# version 3
+# version 11
 
+# gogole maps files
+http://maps.google.com/maps/api/js?v=3.10&sensor=false&key=AIzaSyCOqkcNey4CCyG4X0X5qxHAhCgD8g5DwXg
+http://maps.gstatic.com/intl/en_us/mapfiles/api-3/10/20/main.js
+http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/10/20/%7Bcommon,map,util,geometry,poly,overlay%7D.js
+http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/10/20/%7Bstats%7D.js
+http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/10/20/%7Bonion%7D.js
+http://maps.gstatic.com/mapfiles/openhand_8_8.cur
+http://maps.gstatic.com/mapfiles/transparent.png
+
+# app files
 img/logo.png
 img/marker-you.png
 img/markers/antenna-green.png

css/habitat-font.css

@@ -75,4 +75,5 @@
 .icon-target:before           { content: "\f006"; }
 .icon-earth:before            { content: "\f007"; }
 .icon-daylight:before         { content: "\f008"; }
+.icon-settings:before         { content: "\f010"; }
 

css/main.css

@@ -20,7 +20,29 @@ html, body {
     z-index: 99;
     width: 100%;
     height: 100%;
-    background: #00A3D3 url('../img/logo.png') no-repeat center center;
+    background: #00A3D3;
+}
+#loading > div {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 198px;
+    height: 200px;
+    margin-top: -100px;
+    margin-left: -99px;
+}
+#loading .bar {
+    position: relative;
+    width: 200px;
+    height: 5px; 
+    border-radius: 3px;
+    background: #005C76;
+}
+#loading .complete {
+    width: 0px;
+    height: 5px;
+    border-radius: 3px;
+    background: #fff;
 }
 
 header {
@@ -115,8 +137,13 @@ header > div {
 .row .header .arrow:after { content: "▲"; }
 .row.active .header .arrow:after { content: "▼"; }
 
-#main .row { background-color: #f4f4f4; margin: 0; padding: 0; position: relative; }
-#main .row  .header {
+#main .row {
+    background-color: #f4f4f4;
+    margin: 0;
+    padding: 0;
+    position: relative;
+}
+#main .row .header {
     position: relative;
     z-index: 4;
     cursor: pointer;
@@ -160,6 +187,7 @@ header > div {
 #cc_callsign {
     text-align: right;
     padding: 4px 10px;
+    margin: 0;
 }
 .slimContainer {
     margin: 20px auto;
@@ -173,15 +201,21 @@ header > div {
     width: 100%;
     display: block;
     margin: 5px;
+    vertical-align: middle;
+}
+.slimContainer .row.info {
+    margin-top: 10px;
 }
 .slimContainer .row > span {
     float: left;
 }
+.slimContainer .row.option > span {
+    line-height: 30px;
+}
 .slimContainer .row > span.r {
     float: right;
 }
 
-
 /* iOS styled switch buttons
  */
 .switch {
@@ -190,7 +224,6 @@ header > div {
     width: 77px;
     border: 1px solid #979797;
     border-radius: 20px;
-    margin-top: -5px;
     box-shadow: inset 0 1px 3px #BABABA, inset 0 12px 3px 2px rgba(232, 232, 232, 0.5);
     cursor: pointer;
     overflow: hidden;
@@ -310,11 +343,11 @@ header > div {
         line-height: 11px;
         font-size: 11px;
     }
-    #main .data dl > dt.recievers { 
+    #main .data dl > dt.receivers { 
         font-size: 10px;
         font-weight: normal;
     }
-    #main .data dl > dd.recievers { 
+    #main .data dl > dd.receivers { 
         font-size: 10px;
     }
     #main .row .data img {
@@ -364,11 +397,11 @@ header > div {
         line-height: 11px;
         font-size: 11px;
     }
-    #main .data dl > dt.recievers { 
+    #main .data dl > dt.receivers { 
         font-size: 10px;
         font-weight: normal;
     }
-    #main .data dl > dd.recievers { 
+    #main .data dl > dd.receivers { 
         font-size: 10px;
     }
 }

css/mobile.css

@@ -15,14 +15,19 @@
     </head>
     <body>
 
-    <div id="loading"></div>
+    <div id="loading">
+        <div>
+            <img src="img/logo.png" />
+            <div class="bar" style="display: none"><div class="complete"></div></div>
+        </div>
+    </div>
 
     <header style="display: none">
         <div class="container">
             <ol class="nav">
                 <li class="home"><i class="icon-habhub"></i></li>
                 <li class="chasecar" style="display: none"><i class="icon-car"></i></li>
-                <li class="daylight"><i class="icon-daylight"></i></li>
+                <li class="settings"><i class="icon-settings"></i></li>
                 <li class="about last"><i class="icon-question"></i></li>
             </ol>
             <span id="locate-me" style="display: none"><i class="icon-target"></i></span>
@@ -47,18 +52,64 @@ <h2>Contribute</h2>
             </span>
         </div>
     </div>
+    <div id="settingsbox" style="display: none">
+        <div class="slimContainer">
+            <h2>Settings</h2>
+            <hr>
+            <div class="row option">
+                <span><b>Daylight overlay</b></span>
+                <div class="switch off" id="sw_daylight">
+                    <span class="thumb"></span>
+                    <input type="checkbox" id="opt_daylight">
+                </div> 
+            </div>
+            <div class="row option">
+                <span><b>Availability offline</b></span>
+                <div class="switch off" id="sw_offline">
+                    <span class="thumb"></span>
+                    <input type="checkbox" id="opt_offline">
+                </div> 
+            </div>
+            <div class="row option">
+                <span><b>Mobile station</b></span>
+                <div class="switch off" id="sw_station">
+                    <span class="thumb"></span>
+                    <input type="checkbox" id="opt_station">
+                </div> 
+            </div>
+            <div class="row info">
+                <span>
+                In Chase Car mode, a station will appear together with the chase car on the map.
+                </span>
+            </div>
+            <div class="row option">
+                <span><b>Force refresh cache</b></span>
+                <div class="switch off" id="sw_cache">
+                    <span class="thumb"></span>
+                    <input type="checkbox" id="opt_cache">
+                </div> 
+            </div>
+            <div class="row info">
+                <span>
+                Make sure you have a stable internet connection.
+                The size of cache files is around 600 KB.
+                </span>
+            </div>
+            <span>&nbsp;</span>
+        </div>
+    </div>
     <div id="chasecarbox" style="display: none">
         <div class="slimContainer">
             <h2>Chase car mode</h2>
             <hr>
-            <div class="row">
+            <div class="row option">
                 <span>Enable</span>
-                <div class="switch off">
+                <div class="switch off" id="sw_chasecar">
                     <span class="thumb"></span>
                     <input type="checkbox" id="chasecar_on">
                 </div> 
             </div>
-            <div class="row">
+            <div class="row option">
                 <span>Callsign</span>
                 <span class="r"><input type="text" id="cc_callsign" style="width: 140px;"/></span>
             </div>
@@ -103,7 +154,7 @@ <h2>Chase car mode</h2>
         </div>
     </div>
     </div>
-    <script src="http://maps.google.com/maps/api/js?sensor=false&key=AIzaSyCOqkcNey4CCyG4X0X5qxHAhCgD8g5DwXg" type="text/javascript"></script>
+    <script src="http://maps.google.com/maps/api/js?v=3.10&sensor=false&key=AIzaSyCOqkcNey4CCyG4X0X5qxHAhCgD8g5DwXg" type="text/javascript"></script>
     <script type="text/javascript" language="javascript" src="js/mobile.js"></script>
 <!--
     <script type="text/javascript" language="javascript" src="js/jquery-1.8.3-min.js"></script>