From f5ec0bb84fb6f501bf373ada4051a46d049c01c4 Mon Sep 17 00:00:00 2001
From: Tor-Einar Skog <tor-einar.skog@nibio.no>
Date: Tue, 2 Feb 2021 13:55:45 +0100
Subject: [PATCH] First version working with camera plugin!
---
index.html | 23 +++++++++----------
src/components/Observation.vue | 37 ++++++++++++++++++++++++++++++
src/components/ObservationList.vue | 4 ++++
src/main.js | 37 +++++++++++++++++++++++++-----
src/router/index.js | 6 +++++
static/css/offcanvas.css | 10 +++-----
6 files changed, 92 insertions(+), 25 deletions(-)
create mode 100644 src/components/Observation.vue
diff --git a/index.html b/index.html
index 09d3ae3..fdc46ef 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,6 @@
<!doctype html>
<html lang="en">
- <head>
+<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
@@ -16,14 +16,14 @@
<!-- Custom styles for this app -->
<link href="static/css/vipsobsapp.css" rel="stylesheet">
<script src="cordova.js"></script>
- </head>
- <body class="bg-light">
+</head>
+<body class="bg-light">
-<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" id="vipsobsappmenu">
+<nav class="navbar fixed-top navbar-dark bg-dark" id="vipsobsappmenu">
- <router-link class="navbar-brand mr-auto mr-lg-0" to="/">
-<img src="static/css/images/logo_vips_hvit.png" style="height: 27px; position: relative; top: -3px; margin-right: 15px"/>Feltobservasjoner</router-link>
- <button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
+ <router-link class="navbar-brand" to="/">
+ <img src="static/css/images/logo_vips_hvit.png" style="height: 27px; position: relative; top: -3px; margin-right: 15px"/>Feltobservasjoner</router-link>
+ <button class="navbar-toggler border-0" type="button" data-toggle="offcanvas">
<span class="navbar-toggler-icon"></span>
</button>
@@ -35,7 +35,7 @@
<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>
+ <button class="btn btn-primary" type="submit">Logg inn</button>
</form>
<hr/>
<ul class="navbar-nav mr-auto">
@@ -53,10 +53,9 @@
</div>
</nav>
-<main id="app" role="main" class="container">
-
-</main>
- <script src="static/js/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+<main id="app" role="main" class="container"></main>
+
+<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>
diff --git a/src/components/Observation.vue b/src/components/Observation.vue
new file mode 100644
index 0000000..40bfc05
--- /dev/null
+++ b/src/components/Observation.vue
@@ -0,0 +1,37 @@
+<template>
+ <div class="hello">
+ <h1>{{ msg }}</h1>
+ <button type="button" class="btn btn-primary" id="cameraLauncher" @click="launchCamera">{{ take_photo }}</button>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'Observation',
+ data () {
+ return {
+ msg: 'Observasjon',
+ take_photo: "Ta bilde"
+ }
+ },
+ methods:{
+ onfail: function(message) {
+ alert(message);
+ },
+ renderPhoto: function(imageURI) {
+ console.info("Image info: " + imageURI);
+ },
+ launchCamera: function() {
+ console.info("The camera should launch now");
+ navigator.camera.getPicture(this.renderPhoto, this.onFail, {
+ quality: 50,
+ destinationType: Camera.DestinationType.FILE_URI ,
+ correctOrientation: true
+ });
+ }
+ },
+ created () {
+ console.info("The observation component was initialized");
+ }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/ObservationList.vue b/src/components/ObservationList.vue
index 24e514b..a467c7c 100644
--- a/src/components/ObservationList.vue
+++ b/src/components/ObservationList.vue
@@ -1,6 +1,10 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
+ <router-link to="/observation" custom v-slot="{navigate}">
+ <button type="button" class="btn btn-primary" @click="navigate">+</button>
+ </router-link>
+
</div>
</template>
diff --git a/src/main.js b/src/main.js
index c9fc9ba..d90b191 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,12 +7,23 @@ import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
-new Vue({
- el: '#app',
- router,
- components: { App },
- template: '<App/>'
-});
+const init = () => {
+ new Vue({
+ el: '#app',
+ router,
+ components: { App },
+ template: '<App/>',
+ data: {
+ deviceIsReady: false
+ },
+ methods: {
+
+ },
+ created() {
+ console.info("Vue is ready")
+ }
+ });
+};
/**
* Hope this works. It's for adding router functionality to the menu,
@@ -22,3 +33,17 @@ new Vue({
el: '#vipsobsappmenu',
router
});
+
+// Wait for the deviceready event to start the render
+document.addEventListener("deviceready", () => {
+ // eslint-disable-next-line
+ console.log("Cordova ready, Render the App");
+ init();
+});
+
+// If we are not in Cordova, manually trigger the deviceready event
+const isCordovaApp = (typeof window.cordova !== "undefined");
+if (!isCordovaApp){
+ document.dispatchEvent(new CustomEvent("deviceready", {}));
+}
+
diff --git a/src/router/index.js b/src/router/index.js
index 5d2ade0..31aa676 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,6 +3,7 @@ import Router from 'vue-router'
import ObservationList from '@/components/ObservationList'
import PlacesList from '@/components/PlacesList'
import Settings from '@/components/Settings'
+import Observation from '@/components/Observation'
Vue.use(Router)
@@ -22,6 +23,11 @@ export default new Router({
path: '/settings',
name: 'Settings',
component: Settings
+ },
+ {
+ path: '/observation',
+ name: 'Observation',
+ component: Observation
}
]
})
diff --git a/static/css/offcanvas.css b/static/css/offcanvas.css
index a4d5949..70af1ec 100644
--- a/static/css/offcanvas.css
+++ b/static/css/offcanvas.css
@@ -7,7 +7,7 @@ body {
padding-top: 56px;
}
-@media (max-width: 991.98px) {
+
.offcanvas-collapse {
position: fixed;
top: 56px; /* Height of navbar */
@@ -29,7 +29,7 @@ body {
-webkit-transform: translateX(-80%);
transform: translateX(-80%);
}
-}
+
.nav-scroller {
position: relative;
@@ -85,8 +85,4 @@ body {
user-select: none;
}
-@media (min-width: 768px) {
- .bd-placeholder-img-lg {
- font-size: 3.5rem;
- }
-}
+
--
GitLab