Merge branch 'pushAndroid' into 'development'

Push Notification For Android

See merge request lappis-unb/projects/SMI/smi-mobile!17

.env.example

@@ -0,0 +1,9 @@
+API_KEY=api_key
+AUTH_DOMAIN=auth_domain
+DATABASE_URL=database_url
+PROJECT_ID=project_id
+STORAGE_BUCKET=storage_bucket
+MESSAGE_SENDER_ID=message_sender_id
+APP_ID=app_id
+KEY_SERVER=key_server
+VAPID_KEY=public_vapid_key

.gitignore

@@ -3,6 +3,9 @@
 node_modules
 yarn.lock
 package-lock.json
+src-pwa/pwa-flag.d.ts
+src-ssr/ssr-flag.d.ts
+src/store/store-flag.d.ts
 
 # Quasar core related directories
 .quasar
@@ -34,3 +37,7 @@ yarn-error.log*
 *.ntvs*
 *.njsproj
 *.sln
+
+# environment variable
+.env
+/src-pwa/env-sw.js

package.json

@@ -21,11 +21,14 @@
     "@quasar/extras": "^1.0.0",
     "axios": "^0.19.1",
     "es6-promise": "^4.2.8",
+    "firebase": "^7.9.2",
     "leaflet": "^1.6.0",
     "quasar": "^1.0.0",
+    "quasar-dotenv": "^1.0.5",
     "vue-axios": "^2.1.5",
     "vue2-leaflet": "^2.4.2",
-    "vuex": "^3.1.2"
+    "vuex": "^3.1.2",
+    "vuex-persistedstate": "^2.7.1"
   },
   "devDependencies": {
     "@quasar/app": "^1.0.0",

quasar.conf.js

@@ -1,12 +1,26 @@
 // Configuration for your app
 // https://quasar.dev/quasar-cli/quasar-conf-js
+const fs = require('fs')
+const env = require('quasar-dotenv').config()
+
+fs.writeFileSync('./src-pwa/env-sw.js',  `const process = ${JSON.stringify({
+  env: env
+}, null, 2)}`)
 
 module.exports = function (ctx) {
   return {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
     // https://quasar.dev/quasar-cli/cli-documentation/boot-files
     boot: [
+      {
+        path: 'vuex_persist',
+        server: false
+      },
+      {
+        path: 'firebase',
+        server: false
+      }
     ],
 
     preFetch: true,
@@ -47,14 +61,18 @@ module.exports = function (ctx) {
       directives: [],
 
       // Quasar plugins
-      plugins: []
+      plugins: [
+        'Cookies',
+        'Notify'
+      ]
     },
 
     // https://quasar.dev/quasar-cli/cli-documentation/supporting-ie
     supportIE: false,
 
     // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
     build: {
+      env: env,
       scopeHoisting: true,
       // vueRouterMode: 'history',
       // showProgress: false,
@@ -65,6 +83,31 @@ module.exports = function (ctx) {
 
       // https://quasar.dev/quasar-cli/cli-documentation/handling-webpack
       extendWebpack (cfg) {
+        cfg.module.rules.push({
+          enforce: 'pre',
+          test: /\.(js|vue)$/,
+          loader: 'eslint-loader',
+          exclude: /node_modules/,
+          options: {
+            formatter: require('eslint').CLIEngine.getFormatter('stylish')
+          }
+        })
+      },
+      chainWebpack(chain) {
+        if (ctx.mode.pwa) {
+          chain
+            .plugin('copy-static-files')
+            .use(require('copy-webpack-plugin'), [
+              [{
+                from: 'src-pwa/firebase-messaging-sw.js',
+                to: '',
+              },
+              {
+                from: 'src-pwa/env-sw.js',
+                to: '',
+              }]
+            ])
+        }
       }
     },
 
@@ -89,9 +132,9 @@ module.exports = function (ctx) {
       // workboxPluginMode: 'InjectManifest',
       // workboxOptions: {}, // only for NON InjectManifest
       manifest: {
-        // name: 'SMI',
-        // short_name: 'SMI',
-        // description: 'A Quasar Framework app',
+        name: 'SMI',
+        short_name: 'SMI',
+        description: 'Sistema de Monitoramento de Insumos - Universidade de Brasília.',
         display: 'standalone',
         orientation: 'portrait',
         background_color: '#ffffff',
@@ -122,7 +165,8 @@ module.exports = function (ctx) {
             'sizes': '512x512',
             'type': 'image/png'
           }
-        ]
+        ],
+        gcm_sender_id: "103953800507" 
       }
     },
 

src-pwa/firebase-messaging-sw.js

@@ -0,0 +1,44 @@
+importScripts('https://www.gstatic.com/firebasejs/7.7.0/firebase-app.js');
+importScripts('https://www.gstatic.com/firebasejs/7.7.0/firebase-messaging.js');
+importScripts('env-sw.js');
+
+var firebaseConfig = {
+  apiKey: process.env.API_KEY,
+  authDomain: process.env.AUTH_DOMAIN,
+  databaseURL: process.env.DATABASE_URL,
+  projectId: process.env.PROJECT_ID,
+  storageBucket: process.env.STORAGE_BUCKET,
+  messagingSenderId: process.env.MESSAGE_SENDER_ID,
+  appId: process.env.APP_ID
+};
+
+firebase.initializeApp(firebaseConfig);
+
+if (firebase.messaging.isSupported()) {
+
+  const messaging = firebase.messaging();
+
+}
+
+// if event listener receive a notification object in background it show more than one push
+self.addEventListener('push', function(event) {
+  //console.log('[Service Worker] Push Received.');
+  //console.log('[Service Worker] Push had this data:', event.data.json());
+
+  const title = event.data.json().data['title'];
+  const options = {
+    body: event.data.json().data['body'],
+    icon: '/statics/icons/icon-512x512.png',
+    badge: '/statics/icons/notification-96x96.png',
+    vibrate: [100,50,100]
+  };
+
+  event.waitUntil(self.registration.showNotification(title, options));
+}); 
+
+
+self.addEventListener('notificationclick', function(event) {
+  event.notification.close();
+  clients.openWindow("/");
+  //handle click event onClick on Web Push Notification
+});

src/boot/firebase.js

@@ -0,0 +1,18 @@
+import * as firebase from 'firebase/app'
+import 'firebase/messaging'
+
+export default ({ Vue }) => {
+  var config = {
+    apiKey: process.env.API_KEY,
+    authDomain: process.env.AUTH_DOMAIN,
+    databaseURL: process.env.DATABASE_URL,
+    projectId: process.env.PROJECT_ID,
+    storageBucket: process.env.STORAGE_BUCKET,
+    messagingSenderId: process.env.MESSAGE_SENDER_ID,
+    appId: process.env.APP_ID
+  }
+
+  firebase.initializeApp(config)
+
+  Vue.prototype.$firebase = firebase
+}

src/boot/vuex_persist.js

@@ -0,0 +1,27 @@
+import { Cookies } from 'quasar'
+import createPersistedState from 'vuex-persistedstate'
+
+export default function ({ store, ssrContext }) {
+  const cookies = process.env.SERVER
+    ? Cookies.parseSSR(ssrContext)
+    : Cookies
+
+  createPersistedState({
+    key: 'storedData',
+    paths: ['storedData'],
+    filter ({ type }) {
+      return type.startsWith('storedData')
+    },
+    storage: {
+      getItem (key) {
+        return JSON.stringify(cookies.get(key))
+      },
+      setItem (key, value) {
+        cookies.set(key, value, { path: '/' })
+      },
+      removeItem (key) {
+        cookies.remove(key)
+      }
+    }
+  })(store)
+}

src/components/occurenceItem.vue

@@ -50,31 +50,25 @@ export default {
 
  <style lang="scss" scoped>
 .title-1 {
-  width: 205px;
-  height: 24px;
   font-family: Roboto;
-  font-size: 16px;
+  font-size: 3vh;
   line-height: 1.5;
   letter-spacing: 0.15px;
   color: rgba(0, 0, 0, 0.87);
   margin-bottom: 5%;
 }
 
 .subtitle-1 {
-  width: 290px;
-  height: 20px;
   font-family: Roboto;
-  font-size: 14px;
+  font-size: 2.5vh;
   line-height: 1.43;
   letter-spacing: 0.25px;
   color: rgba(0, 0, 0, 0.6);
 }
 
 .label-1 {
-  width: 78px;
-  height: 16px;
   font-family: Roboto;
-  font-size: 12px;
+  font-size: 2vh;
   line-height: 1.33;
   letter-spacing: 0.4px;
   text-align: right;

src/components/pageHeader.vue

@@ -31,6 +31,8 @@
 </template>
 <script>
 import MASTER from '../services/masterApi/http-common'
+import { mapActions } from 'vuex'
+
 export default {
   name: 'pageHeader',
   props: {
@@ -65,9 +67,10 @@ export default {
       })
   },
   methods: {
+    ...mapActions('campusData', ['changeCampus']),
     onItemClick (id) {
       this.selected = this.options.findIndex(x => x.id === id)
-      this.$store.commit('change', this.options[this.selected])
+      this.changeCampus(this.options[this.selected])
     }
   }
 }

src/components/setting.vue

@@ -5,7 +5,7 @@
             <q-item-label class="text">Notificações</q-item-label>
           </q-item-section>
           <q-item-section avatar>
-            <q-toggle color="positive" v-model="permission" val="Serious occurrences"  size="md"/>
+            <q-toggle color="positive" :value="notifyEnabled" @input="toggle()" val="Serious occurrences"  size="md"/>
           </q-item-section>
         </q-item>
       <q-separator spaced inset class="bar" />
@@ -21,15 +21,43 @@
 </template>
 
 <script>
+import { mapGetters, mapActions } from 'vuex'
 
 export default {
   name: 'Setting',
-  components: {
-  },
+  components: {},
   props: {},
   data () {
-    return {
-      permission: true
+    return {}
+  },
+  computed: {
+    ...mapGetters('storedData', ['notifyEnabled', 'pushIsBlocked'])
+  },
+  methods: {
+    ...mapActions('storedData', ['togglePermission']),
+    toggle () {
+      if (this.pushIsBlocked) {
+        this.triggerNegative()
+        this.triggerInfo()
+      } else {
+        this.togglePermission()
+      }
+    },
+    triggerNegative () {
+      this.$q.notify({
+        type: 'negative',
+        message: `Você bloqueou as notificações`,
+        progress: true
+      })
+    },
+    triggerInfo () {
+      this.$q.notify({
+        type: 'info',
+        message: `Acesse as configurações do seu navegador para desbloquear as notificações.`,
+        multiline: true,
+        progress: true,
+        color: '#ffffff'
+      })
     }
   }
 }

src/components/transducerList.vue

@@ -11,6 +11,7 @@
 <script>
 import simpleList from '../components/simpleList.vue'
 import MASTER from '../services/masterApi/http-common'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'TransducerList',
@@ -58,6 +59,9 @@ export default {
       })
     this.loading = false
   },
+  computed: {
+    ...mapGetters('campusData', ['campus'])
+  },
   methods: {
     async addInfos (item) {
       let id = parseInt(item.campus.split('/')[4], 10)
@@ -104,7 +108,7 @@ export default {
 
     filterTransducers () {
       let arr = this.transducers
-      let campus = this.$store.state.campus
+      let campus = this.campus
       let transducers = []
       arr.forEach((elem) => {
         if (campus.id === null || elem.campus_id === campus.id) {