diff --git a/.gitignore b/.gitignore
index 5cdf1d9ecf1453108502a2aaab5eaaec0c198641..b65b701b807e5c55cd2323778a9a8687119aa8b6 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 a0dbbf7abdaf92ec7de77518db049b50b9df8a5e..cde5f70706e89066012e59a72104f9a0daff5c17 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 1e4c65bef565b3cc47786800b324a83ace54ed66..47599fdb222b091ac0fa6b6463c3d08fa131cc64 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 2d07f24ed5ccedefaa9d76d5c355478650cf68f6..86772fbfd860ca06b42929d41b3267304113a302 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 bc955a8daebddf983f8248da260a09af74ee693b..ae7eb6e1f3053f3b4c2ca898276340820f563eda 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 83f13d26b7948f253d336cb61dfdbc3c8479e1e6..3da19d93d40cf8af5c7c0cd0ce1e8a01b6e14d45 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 9c78f02e5e26df64ecc9d5d69e800a14bd6ce3ac..a4d594913b295003bcca7b2f4913a0d1617b5211 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 0000000000000000000000000000000000000000..e985c28d9c3cbd090997e689317bffcf714c4710
--- /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