From a15d6106d9b041fca8f6904ccb1151b5912de446 Mon Sep 17 00:00:00 2001
From: Tor-Einar Skog <tor-einar.skog@nibio.no>
Date: Mon, 1 Feb 2021 13:50:46 +0100
Subject: [PATCH] First version with basic layout in place

---
 .gitignore                |  2 +
 README.md                 | 25 +++++++++--
 config.xml                | 47 +++++++++++----------
 index.html                | 88 +++++++++++----------------------------
 package-lock.json         | 18 ++++++++
 package.json              | 14 ++++++-
 static/css/offcanvas.css  | 26 +++++++++---
 static/css/vipsobsapp.css | 24 +++++++++++
 8 files changed, 148 insertions(+), 96 deletions(-)
 create mode 100644 static/css/vipsobsapp.css

diff --git a/.gitignore b/.gitignore
index 5cdf1d9..b65b701 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,3 +14,5 @@ yarn-error.log*
 *.ntvs*
 *.njsproj
 *.sln
+.project
+.settings/
diff --git a/README.md b/README.md
index a0dbbf7..cde5f70 100644
--- a/README.md
+++ b/README.md
@@ -1,17 +1,17 @@
-# vipsobservationapp
+# VIPS Field Observation App
 
 > The Field Pest Observation App for VIPS users
 
-## Build Setup
+## Build Setup (vuejs)
 
 ``` bash
 # install dependencies
 npm install
 
-# serve with hot reload at localhost:8080
+# serve with hot reload at localhost:8080 - only for testing view layer
 npm run dev
 
-# build for production with minification
+# build for production with minification - before building with Cordova
 npm run build
 
 # build for production and view the bundle analyzer report
@@ -19,3 +19,20 @@ npm run build --report
 ```
 
 For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
+
+## Build/emulate with cordova
+
+``` bash
+# Add browser and android platforms (haven't tested iOS yet)
+cordova platform add browser
+cordova platform add android
+
+# Test in browser
+cordova emulate browser
+
+# Test on Android. Requires correct setup of the Android SDK. 
+# Read more here: https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html
+cordova emulate android
+```
+
+
diff --git a/config.xml b/config.xml
index 1e4c65b..47599fd 100644
--- a/config.xml
+++ b/config.xml
@@ -1,25 +1,26 @@
 <?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">
-    <name>HelloCordova</name>
-    <description>
-        A sample Apache Cordova application that responds to the deviceready event.
-    </description>
-    <author email="dev@cordova.apache.org" href="http://cordova.io">
-        Apache Cordova Team
-    </author>
-    <content src="index.html" />
-    <access origin="*" />
-    <allow-intent href="http://*/*" />
-    <allow-intent href="https://*/*" />
-    <allow-intent href="tel:*" />
-    <allow-intent href="sms:*" />
-    <allow-intent href="mailto:*" />
-    <allow-intent href="geo:*" />
-    <platform name="android">
-        <allow-intent href="market:*" />
-    </platform>
-    <platform name="ios">
-        <allow-intent href="itms:*" />
-        <allow-intent href="itms-apps:*" />
-    </platform>
+<widget id="no.nibio.vips.observation" version="0.0.1"
+	xmlns="http://www.w3.org/ns/widgets"
+	xmlns:cdv="http://cordova.apache.org/ns/1.0">
+	<name>VIPS Field Observation Aapp</name>
+	<description>The Field Observation app for VIPS users. 
+Build it with 'npm run build' before any cordova
+specific actions - so that vuejs can
+compile to www folder</description>
+	<author email="tor-einar.skog@nibio.no" href="https://www.nibio.no/en/employees/tor-einar-skog">Tor-Einar Skog</author>
+	<content src="index.html" />
+	<access origin="*" />
+	<allow-intent href="http://*/*" />
+	<allow-intent href="https://*/*" />
+	<allow-intent href="tel:*" />
+	<allow-intent href="sms:*" />
+	<allow-intent href="mailto:*" />
+	<allow-intent href="geo:*" />
+	<platform name="android">
+		<allow-intent href="market:*" />
+	</platform>
+	<platform name="ios">
+		<allow-intent href="itms:*" />
+		<allow-intent href="itms-apps:*" />
+	</platform>
 </widget>
diff --git a/index.html b/index.html
index 2d07f24..86772fb 100644
--- a/index.html
+++ b/index.html
@@ -7,95 +7,57 @@
 	<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
 	<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' https://code.jquery.com 'unsafe-inline' 'unsafe-eval'; media-src *; img-src 'self' data: content:; connect-src 'self' ws:;">
     <meta name="description" content="">
-    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
-    <title>Offcanvas template ยท Bootstrap v4.6</title>
+    <meta name="author" content="Tor-Einar Skog">
+    <title>VIPS Feltobservasjoner</title>
     <!-- Bootstrap core CSS -->
     <link href="static/css/bootstrap.min.css" rel="stylesheet">
-
-    <style>
-      .bd-placeholder-img {
-        font-size: 1.125rem;
-        text-anchor: middle;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-      }
-
-      @media (min-width: 768px) {
-        .bd-placeholder-img-lg {
-          font-size: 3.5rem;
-        }
-      }
-    </style>
-
-    
-    <!-- Custom styles for this template -->
+    <!-- Custom styles for this Boostrap template -->
     <link href="static/css/offcanvas.css" rel="stylesheet">
+	<!-- Custom styles for this app -->
+	<link href="static/css/vipsobsapp.css" rel="stylesheet">
     <script src="cordova.js"></script>
   </head>
   <body class="bg-light">
     
 <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
-  <a class="navbar-brand mr-auto mr-lg-0" href="#">Offcanvas navbar</a>
+
+  <a class="navbar-brand mr-auto mr-lg-0" href="#">
+<img src="static/css/images/logo_vips_hvit.png" style="height: 27px; position: relative; top: -3px; margin-right: 15px"/>Feltobservasjoner</a>
   <button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
     <span class="navbar-toggler-icon"></span>
   </button>
 
-  <div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
+  <div class="navbar-collapse offcanvas-collapse" id="vipsobsappmenu">
+	<form class="my-2 my-lg-0">
+      <div class="form-group">
+      <input class="form-control mr-sm-2" type="text" placeholder="Brukernavn" aria-label="Brukernavn">
+      </div>
+      <div class="form-group">
+      <input class="form-control mr-sm-2" type="password" placeholder="Passord" aria-label="Passord">
+      </div>
+      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Logg inn</button>
+    </form>
+	<hr/>
     <ul class="navbar-nav mr-auto">
-      <li class="nav-item active">
-        <a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
-      </li>
       <li class="nav-item">
-        <a class="nav-link" href="#">Notifications</a>
+        <a class="nav-link" href="#">Mine observasjoner</a>
       </li>
       <li class="nav-item">
-        <a class="nav-link" href="#">Profile</a>
+        <a class="nav-link" href="#">Mine steder</a>
       </li>
       <li class="nav-item">
-        <a class="nav-link" href="#">Switch account</a>
-      </li>
-      <li class="nav-item dropdown">
-        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Settings</a>
-        <div class="dropdown-menu" aria-labelledby="dropdown01">
-          <a class="dropdown-item" href="#">Action</a>
-          <a class="dropdown-item" href="#">Another action</a>
-          <a class="dropdown-item" href="#">Something else here</a>
-        </div>
+        <a class="nav-link" href="#">Innstillinger</a>
       </li>
     </ul>
-    <form class="form-inline my-2 my-lg-0">
-      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
-      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
-    </form>
+    
   </div>
 </nav>
 
-<!--div class="nav-scroller bg-white shadow-sm">
-  <nav class="nav nav-underline">
-    <a class="nav-link active" href="#">Dashboard</a>
-    <a class="nav-link" href="#">
-      Friends
-      <span class="badge badge-pill bg-light align-text-bottom">27</span>
-    </a>
-    <a class="nav-link" href="#">Explore</a>
-    <a class="nav-link" href="#">Suggestions</a>
-    <a class="nav-link" href="#">Link</a>
-    <a class="nav-link" href="#">Link</a>
-    <a class="nav-link" href="#">Link</a>
-    <a class="nav-link" href="#">Link</a>
-    <a class="nav-link" href="#">Link</a>
-  </nav>
-</div-->
-
 <main role="main" class="container">
 	<div id="app"></div>
 </main>
-
-    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
-      <script>window.jQuery || document.write('<script src="static/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="static/js/bootstrap.bundle.min.js"></script>
-     
+    <script src="static/js/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+      <script>window.jQuery || document.write('<script src="static/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="static/js/bootstrap.bundle.min.js"></script>     
         <script src="static/js/offcanvas.js"></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
index bc955a8..ae7eb6e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2333,6 +2333,24 @@
         }
       }
     },
+    "cordova-plugin-camera": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-camera/-/cordova-plugin-camera-5.0.1.tgz",
+      "integrity": "sha512-9gXyZvI8u9KzsZuqmB8Yw+uheF+7f+usMAwvOMw7L7pqbykg+bm9US5zjhJbwit3A1cSblgZkpBafe5cFiMcTA==",
+      "dev": true
+    },
+    "cordova-plugin-geolocation": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-geolocation/-/cordova-plugin-geolocation-4.1.0.tgz",
+      "integrity": "sha512-y5io/P10xGMxSn2KEqfv/fExK47eA1pmSonJdmDqDsaSADV9JpgdPx0mUSA08+5pzma/OS9R0LoODeDPx7Jvjg==",
+      "dev": true
+    },
+    "cordova-plugin-whitelist": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-whitelist/-/cordova-plugin-whitelist-1.3.4.tgz",
+      "integrity": "sha512-EYC5eQFVkoYXq39l7tYKE6lEjHJ04mvTmKXxGL7quHLdFPfJMNzru/UYpn92AOfpl3PQaZmou78C7EgmFOwFQQ==",
+      "dev": true
+    },
     "cordova-serve": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cordova-serve/-/cordova-serve-3.0.0.tgz",
diff --git a/package.json b/package.json
index 83f13d2..3da19d9 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,9 @@
     "copy-webpack-plugin": "^4.0.1",
     "cordova-android": "^9.0.0",
     "cordova-browser": "^6.0.0",
+    "cordova-plugin-camera": "^5.0.1",
+    "cordova-plugin-geolocation": "^4.1.0",
+    "cordova-plugin-whitelist": "^1.3.4",
     "css-loader": "^0.28.0",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^1.1.4",
@@ -65,6 +68,15 @@
     "platforms": [
       "browser",
       "android"
-    ]
+    ],
+    "plugins": {
+      "cordova-plugin-geolocation": {
+        "GPS_REQUIRED": "true"
+      },
+      "cordova-plugin-whitelist": {},
+      "cordova-plugin-camera": {
+        "ANDROID_SUPPORT_V4_VERSION": "27.+"
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/static/css/offcanvas.css b/static/css/offcanvas.css
index 9c78f02..a4d5949 100644
--- a/static/css/offcanvas.css
+++ b/static/css/offcanvas.css
@@ -12,21 +12,22 @@ body {
     position: fixed;
     top: 56px; /* Height of navbar */
     bottom: 0;
-    left: 100%;
-    width: 100%;
+    left: 80%;
+    width: 80%;
     padding-right: 1rem;
     padding-left: 1rem;
     overflow-y: auto;
     visibility: hidden;
-    background-color: #343a40;
+    background-color: white;
+	border-left: 1px solid #3d8052;
     transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
     transition: transform .3s ease-in-out, visibility .3s ease-in-out;
     transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
   }
   .offcanvas-collapse.open {
     visibility: visible;
-    -webkit-transform: translateX(-100%);
-    transform: translateX(-100%);
+    -webkit-transform: translateX(-80%);
+    transform: translateX(-80%);
   }
 }
 
@@ -74,3 +75,18 @@ body {
 .lh-100 { line-height: 1; }
 .lh-125 { line-height: 1.25; }
 .lh-150 { line-height: 1.5; }
+
+.bd-placeholder-img {
+        font-size: 1.125rem;
+        text-anchor: middle;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+      }
+
+@media (min-width: 768px) {
+   .bd-placeholder-img-lg {
+          font-size: 3.5rem;
+   }
+}
diff --git a/static/css/vipsobsapp.css b/static/css/vipsobsapp.css
new file mode 100644
index 0000000..e985c28
--- /dev/null
+++ b/static/css/vipsobsapp.css
@@ -0,0 +1,24 @@
+.navbar {
+	background-color: #3d8052 !important;
+}
+
+.offcanvas-collapse {
+	background-color: white;
+	border-left: 1px solid #3d8052;
+	
+}
+
+a.nav-link{
+	color: black !important;
+}
+
+.btn-outline-success {
+	color: #3d8052;
+	border-color: #3d8052;
+}
+
+.btn-outline-success:hover {
+	color: white;
+	background-color: #3d8052;
+	border-color: #3d8052;
+}
\ No newline at end of file
-- 
GitLab