First version working with camera plugin!

f5ec0bb8 · Tor-Einar Skog · e4e5f2e4 · f5ec0bb8 · f5ec0bb8 · f5ec0bb8
Commit f5ec0bb8 authored 4 years ago by Tor-Einar Skog
--- a/index.html
+++ b/index.html
 <!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>

--- a/src/components/Observation.vue
+++ b/src/components/Observation.vue
+<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
--- a/src/components/ObservationList.vue
+++ b/src/components/ObservationList.vue
 <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>


--- 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", {}));
+}
+
--- 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
    }
  ]
 })
--- 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;
-   }
-}
+