add info about app

Author: felluksch

config.xml

@@ -1,8 +1,8 @@
 <?xml version='1.0' encoding='utf-8'?>
-<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+<widget id="io.github.fieldmapper" version="1.0.0-beta" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
     <name>FieldMapper</name>
     <description>
-        Default description.
+        Geotagged data collection made easy.
     </description>
     <author email="felix-schott@gmx.de">
         Felix Schott

webpack.config.js

@@ -3,7 +3,7 @@ const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = {
-  mode: 'development',
+  mode: 'production',
   entry: './www/main/index.js',
   output: {
     path: path.resolve(__dirname, 'www'),
@@ -43,5 +43,5 @@ module.exports = {
       ignoreOrder: false, // Enable to remove warnings about conflicting order
     }), 
   ],
-  devtool: 'inline-source-map',
+  //devtool: 'inline-source-map',
 };

www/css/index.css

@@ -9,4 +9,41 @@ body, button {
 input[type="checkbox"]:checked {
     box-shadow: inset 0 0 0 2px rgba(0,0,0,0.5);    
     background-color: lightslategray !important;
+}
+#tabSettings {
+    height: 100%;
+    width: 100%;
+}
+#about {
+    position: relative;
+    color: grey;
+    font-weight: lighter;
+}
+#about-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+}
+#about a {
+    color: black;
+}
+#imprint {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    width: 100%;
+    bottom: 0; 
+    left: 0;
+    right: 0;
+    position: absolute; 
+    font-size: smaller;
+    margin-bottom: 5px;
+}
+#imprint p {
+    border-top: .5px solid lightgrey;
+    padding: 5px 2px;
 }

www/index.html

@@ -26,13 +26,12 @@
   <div class="footer grey-900 shadow tab">
     <button class="icon ion-android-map active" id="mapBtn" onclick="openTab('map')"> Map</button>
     <button class="icon ion-ios-gear" id="settingsBtn" onclick="openTab('tabSettings')"> Settings</button>
-    <button class="icon ion-ios-information" id="aboutBtn" onclick="openTab('tabAbout')"> About</button>
   </div>
   <div class="content has-header has-footer">
     <div class="tab-content active" id="map"></div>
     <div class="tab-content padding" id="tabSettings">
 
-      <div class="list radius" style="margin-top: 5px">
+      <div id="settingsList" class="list radius" style="margin-top: 5px">
         <div class="item" onclick="openPage('./main/settings/variables/managevariables')">
           <h2>Variable Management</h2>
           <div class="right">
@@ -59,16 +58,19 @@ <h2>Reset</h2>
         </div>
       </div>
 
-    </div>
-    <div class="tab-content padding" id="tabAbout">
-      <div class="list radius" style="margin-top: 10px">
-        <div class="item no-border" style="text-align: center">
-          Thanks for using FieldMapper. Visit the PROJECT WEBSITE for an extensive documentation. The source code is
-          available ON GITHUB&mdash;contributions welcome! 
+      <div id="about">
+        <div id="about-content">
+          <p>Thanks for using FieldMapper.</p>
+          <p>Visit the <a href="https://fieldmapper.github.io">project website</a> for an
+            extensive
+            documentation.</p>
         </div>
-        <div class="item no-border" style="text-align: center">
-          Do not hesitate to GET IN TOUCH if you encounter bugs or feel like FieldMapper is lacking an important
-          feature.
+        <div id="imprint">
+          <p>FieldMapper v1.0.0-beta | &copy; <a href="mailto:felix-schott@gmx.de">Felix Schott</a> 2020
+            |
+            Published
+            under
+            <a href="https://github.com/felluksch/FieldMapper/blob/master/LICENSE">GNU GPLv3</a></p>
         </div>
       </div>
     </div>

www/main/index.js

@@ -7,7 +7,7 @@ import 'leaflet-easybutton';
 import './utils/easybutton-ext';
 
 import './utils/db';
-import { updateStatus, onOnline, onOffline, hideStatus, showStatus } from './utils';
+import { updateStatus, onOnline, onOffline, hideStatus, showStatus, onLoadAbout } from './utils';
 import { addControls } from './controls/controls';
 import { getLayers, getOptions } from './settings/utils';
 import { onLoadReset } from './settings/reset/reset';
@@ -120,8 +120,7 @@ window.app = {
         let OSM = app.OSM;
 
         document.getElementById('mapBtn').addEventListener('click', showStatus);
-        document.getElementById('settingsBtn').addEventListener('click', hideStatus);
-        document.getElementById('aboutBtn').addEventListener('click', hideStatus);
+        document.getElementById('settingsBtn').addEventListener('click', () => { onLoadAbout(); hideStatus() });
 
         document.getElementById('mapBtn').addEventListener('click', app.loadMap);
         document.addEventListener('openPage', function (ev) {

www/main/utils.js

@@ -20,4 +20,14 @@ export function hideStatus() {
 
 export function showStatus() {
     document.getElementById('status').style.display = "inline";
+}
+
+export function onLoadAbout() {
+    let container = document.getElementById('tabSettings').getBoundingClientRect().bottom;
+    let list = document.getElementById('settingsList').getBoundingClientRect().bottom;
+    let imprint = document.getElementById('imprint').offsetHeight;
+    let about = document.getElementById('about');
+    let content = document.getElementById('about-content');
+    about.style.height = (container - list).toString() + "px";
+    content.style.height = (container - list - imprint).toString() + "px";
 }

www/main/utils/db.js

@@ -44,16 +44,16 @@ window.db = {
             this.root.getDirectory('db', { create: false }, dirEntry => {
                 dirEntry.getFile(key, { create: false }, function (fileEntry) {
                     fileEntry.remove(resolve())
-                }, onError);
-            }, onError);
+                }, (e) => { onError(e), resolve(null) });
+            }, (e) => { onError(e), resolve(null) });
         })
 
     },
     clear: () => {
         return new Promise(resolve => {
-            this.root.getDirectory('db', { create: true }, dirEntry => {
-                dirEntry.removeRecursively(resolve());
-            }, onError);
+            this.root.getDirectory('db', { create: false }, dirEntry => {
+                dirEntry.removeRecursively(resolve(null));
+            }, (e) => { onError(e), resolve(null) });
         })
     },
     getSize: () => {
@@ -68,5 +68,5 @@ window.db = {
 }
 
 function onError(error) {
-    console.log(error)
+    console.log(error.code)
 };