├── README.md
├── config
    ├── dev.env.js
    ├── index.js
    └── prod.env.js
├── index.html
├── package.json
├── src
    ├── App.vue
    ├── main.js
    ├── pages
    │   ├── Admin.vue
    │   ├── Driver.vue
    │   ├── Signin.vue
    │   └── Signup.vue
    └── router
    │   └── index.js
└── static
    └── .gitkeep


/README.md:
--------------------------------------------------------------------------------
 1 | # Track Multiple Users' Location Real-Time
 2 | 
 3 | > A Vue.js project
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | npm install
10 | 
11 | # serve with hot reload at localhost:8080
12 | npm run dev
13 | 
14 | # build for production with minification
15 | npm run build
16 | 
17 | # build for production and view the bundle analyzer report
18 | npm run build --report
19 | ```
20 | 
21 | 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).
22 | 


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const merge = require('webpack-merge')
3 | const prodEnv = require('./prod.env')
4 | 
5 | module.exports = merge(prodEnv, {
6 |   NODE_ENV: '"development"'
7 | })
8 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | // Template version: 1.3.1
 3 | // see http://vuejs-templates.github.io/webpack for documentation.
 4 | 
 5 | const path = require('path')
 6 | 
 7 | module.exports = {
 8 |   dev: {
 9 | 
10 |     // Paths
11 |     assetsSubDirectory: 'static',
12 |     assetsPublicPath: '/',
13 |     proxyTable: {},
14 | 
15 |     // Various Dev Server settings
16 |     host: 'localhost', // can be overwritten by process.env.HOST
17 |     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
18 |     autoOpenBrowser: false,
19 |     errorOverlay: true,
20 |     notifyOnErrors: true,
21 |     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
22 | 
23 |     
24 |     /**
25 |      * Source Maps
26 |      */
27 | 
28 |     // https://webpack.js.org/configuration/devtool/#development
29 |     devtool: 'cheap-module-eval-source-map',
30 | 
31 |     // If you have problems debugging vue-files in devtools,
32 |     // set this to false - it *may* help
33 |     // https://vue-loader.vuejs.org/en/options.html#cachebusting
34 |     cacheBusting: true,
35 | 
36 |     cssSourceMap: true
37 |   },
38 | 
39 |   build: {
40 |     // Template for index.html
41 |     index: path.resolve(__dirname, '../dist/index.html'),
42 | 
43 |     // Paths
44 |     assetsRoot: path.resolve(__dirname, '../dist'),
45 |     assetsSubDirectory: 'static',
46 |     assetsPublicPath: '/',
47 | 
48 |     /**
49 |      * Source Maps
50 |      */
51 | 
52 |     productionSourceMap: true,
53 |     // https://webpack.js.org/configuration/devtool/#production
54 |     devtool: '#source-map',
55 | 
56 |     // Gzip off by default as many popular static hosts such as
57 |     // Surge or Netlify already gzip all static assets for you.
58 |     // Before setting to `true`, make sure to:
59 |     // npm install --save-dev compression-webpack-plugin
60 |     productionGzip: false,
61 |     productionGzipExtensions: ['js', 'css'],
62 | 
63 |     // Run the build command with an extra argument to
64 |     // View the bundle analyzer report after build finishes:
65 |     // `npm run build --report`
66 |     // Set to `true` or `false` to always turn it on or off
67 |     bundleAnalyzerReport: process.env.npm_config_report
68 |   }
69 | }
70 | 


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 |   NODE_ENV: '"production"'
4 | }
5 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
 8 |   <script src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]&libraries=places">
 9 |   </script>
10 |   <title>Vue.js + Firebase: Track Multiple Users Real Time</title>
11 | </head>
12 | 
13 | <body>
14 |   <div id="app"></div>
15 |   <!-- built files will be auto injected -->
16 | </body>
17 | 
18 | </html>
19 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "real-time-tracker",
 3 |   "version": "1.0.0",
 4 |   "description": "A Vue.js project",
 5 |   "author": "SoftAuthor <info@softauthor.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 9 |     "start": "npm run dev",
10 |     "build": "node build/build.js"
11 |   },
12 |   "dependencies": {
13 |     "axios": "^0.19.2",
14 |     "firebase": "^7.14.0",
15 |     "firebaseui": "^4.5.0",
16 |     "vue": "^2.5.2",
17 |     "vue-router": "^3.0.1"
18 |   },
19 |   "devDependencies": {
20 |     "autoprefixer": "^7.1.2",
21 |     "babel-core": "^6.22.1",
22 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
23 |     "babel-loader": "^7.1.1",
24 |     "babel-plugin-syntax-jsx": "^6.18.0",
25 |     "babel-plugin-transform-runtime": "^6.22.0",
26 |     "babel-plugin-transform-vue-jsx": "^3.5.0",
27 |     "babel-preset-env": "^1.3.2",
28 |     "babel-preset-stage-2": "^6.22.0",
29 |     "chalk": "^2.0.1",
30 |     "copy-webpack-plugin": "^4.0.1",
31 |     "css-loader": "^0.28.0",
32 |     "extract-text-webpack-plugin": "^3.0.0",
33 |     "file-loader": "^1.1.4",
34 |     "friendly-errors-webpack-plugin": "^1.6.1",
35 |     "html-webpack-plugin": "^2.30.1",
36 |     "node-notifier": "^5.1.2",
37 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
38 |     "ora": "^1.2.0",
39 |     "portfinder": "^1.0.13",
40 |     "postcss-import": "^11.0.0",
41 |     "postcss-loader": "^2.0.8",
42 |     "postcss-url": "^7.2.1",
43 |     "rimraf": "^2.6.0",
44 |     "semver": "^5.3.0",
45 |     "shelljs": "^0.7.6",
46 |     "uglifyjs-webpack-plugin": "^1.1.1",
47 |     "url-loader": "^0.5.8",
48 |     "vue-loader": "^13.3.0",
49 |     "vue-style-loader": "^3.0.1",
50 |     "vue-template-compiler": "^2.5.2",
51 |     "webpack": "^3.6.0",
52 |     "webpack-bundle-analyzer": "^2.9.0",
53 |     "webpack-dev-server": "^2.9.1",
54 |     "webpack-merge": "^4.1.0"
55 |   },
56 |   "engines": {
57 |     "node": ">= 6.0.0",
58 |     "npm": ">= 3.0.0"
59 |   },
60 |   "browserslist": [
61 |     "> 1%",
62 |     "last 2 versions",
63 |     "not ie <= 8"
64 |   ]
65 | }
66 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: "App"
10 | };
11 | </script>
12 | 
13 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | // The Vue build version to load with the `import` command
 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 | import Vue from 'vue'
 4 | import App from './App'
 5 | import router from './router'
 6 | 
 7 | import * as firebase from 'firebase/app'
 8 | 
 9 | 
10 | Vue.config.productionTip = false
11 | 
12 | 
13 | 
14 | 
15 | // Your web app's Firebase configuration
16 | var firebaseConfig = {
17 |   YOUR_CONFIGURATIONP_CODE_HERE
18 | };
19 | // Initialize Firebase
20 | firebase.initializeApp(firebaseConfig);
21 | 
22 | 
23 | /* eslint-disable no-new */
24 | new Vue({
25 |   el: '#app',
26 |   router,
27 |   components: {
28 |     App
29 |   },
30 |   template: '<App/>'
31 | })
32 | 


--------------------------------------------------------------------------------
/src/pages/Admin.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="admin-view">
  3 |     <h1>Admin View</h1>
  4 |   </div>
  5 | </template>
  6 | 
  7 | <script>
  8 | import firebase from "firebase";
  9 | export default {
 10 |   data() {
 11 |     return {
 12 |       user: null,
 13 |       drivers: [],
 14 |       map: null
 15 |     };
 16 |   },
 17 |   async mounted() {
 18 |     firebase.auth().onAuthStateChanged(user => {
 19 |       this.user = user;
 20 |     });
 21 | 
 22 |     this.map = new google.maps.Map(this.$refs["map"], {
 23 |       zoom: 10,
 24 |       center: new google.maps.LatLng(37.33446146, -122.04380955),
 25 |       mapTypeId: google.maps.MapTypeId.ROADMAP
 26 |     });
 27 | 
 28 |     const { docs } = await firebase
 29 |       .firestore()
 30 |       .collection("users")
 31 |       .where("active", "==", true)
 32 |       .get();
 33 | 
 34 |     const markers = [];
 35 |     const infoWindows = [];
 36 | 
 37 |     for (let i = 0; i < docs.length; i++) {
 38 |       markers.push(
 39 |         new google.maps.Marker({
 40 |           map: this.map
 41 |         })
 42 |       );
 43 | 
 44 |       infoWindows.push(new google.maps.InfoWindow({ disableAutoPan: true }));
 45 |     }
 46 | 
 47 |     firebase
 48 |       .firestore()
 49 |       .collection("users")
 50 |       .where("active", "==", true)
 51 |       .onSnapshot(snap => {
 52 |         this.drivers = [];
 53 |         for (let i = 0; i < snap.docs.length; i++) {
 54 |           var driver = snap.docs[i].data();
 55 |           this.drivers.push(driver);
 56 | 
 57 |           markers[i].setPosition(
 58 |             new google.maps.LatLng(driver.lat, driver.lng)
 59 |           );
 60 | 
 61 |           infoWindows[i].setContent(
 62 |             `<div class="ui header">${driver.email} </div>`
 63 |           );
 64 |           infoWindows[i].open(this.map, markers[i]);
 65 |         }
 66 |       });
 67 |   },
 68 | 
 69 |   methods: {
 70 |     signOutButtonPressed() {
 71 |       firebase
 72 |         .auth()
 73 |         .signOut()
 74 |         .then(user => {
 75 |           this.$router.push({
 76 |             name: "Signin"
 77 |           });
 78 |         })
 79 |         .catch(error => {
 80 |           console.log(error.message);
 81 |         });
 82 |     }
 83 |   }
 84 | };
 85 | </script>
 86 | 
 87 | <style>
 88 | .admin-view {
 89 |   width: 100%;
 90 |   height: 100vh;
 91 |   display: flex;
 92 |   flex-direction: row;
 93 | }
 94 | .left-view {
 95 |   width: 250px;
 96 |   padding: 12px;
 97 | }
 98 | 
 99 | .right-view {
100 |   flex-grow: 1;
101 | }
102 | </style>


--------------------------------------------------------------------------------
/src/pages/Driver.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="driver-view">
  3 |     <section class="top-bar">
  4 |       <div v-if="user">{{user.email}}</div>
  5 |       <div>Driver</div>
  6 |       <button class="ui button red" @click="signOutButtonPressed">Signout</button>
  7 |     </section>
  8 | 
  9 |     <section ref="map" class="map"></section>
 10 | 
 11 |     <section class="bottom-bar">
 12 |       <div class="latLngLabel">{{lat}}, {{lng}}</div>
 13 |       <button class="ui button green" @click="startLocationUpdates">
 14 |         <i class="circle dot outline icon large"></i>
 15 |         Start Location
 16 |       </button>
 17 | 
 18 |       <button class="ui button red" @click="stopLocationUpdates">
 19 |         <i class="circle dot outline icon large"></i>
 20 |         Stop Location
 21 |       </button>
 22 |     </section>
 23 |   </div>
 24 | </template>
 25 | 
 26 | <script>
 27 | import firebase from "firebase";
 28 | export default {
 29 |   data() {
 30 |     return {
 31 |       user: null,
 32 |       lat: 0,
 33 |       lng: 0,
 34 |       watchPositionId: null
 35 |     };
 36 |   },
 37 | 
 38 |   mounted() {
 39 |     firebase.auth().onAuthStateChanged(user => {
 40 |       this.user = user;
 41 |     });
 42 |   },
 43 | 
 44 |   methods: {
 45 |     startLocationUpdates() {
 46 |       var map = new google.maps.Map(this.$refs["map"], {
 47 |         zoom: 15,
 48 |         mapTypeId: google.maps.MapTypeId.ROADMAP
 49 |       });
 50 | 
 51 |       var marker = new google.maps.Marker({
 52 |         map: map
 53 |       });
 54 | 
 55 |       this.watchPositionId = navigator.geolocation.watchPosition(
 56 |         position => {
 57 |           this.lat = position.coords.latitude;
 58 |           this.lng = position.coords.longitude;
 59 | 
 60 |           map.setCenter(new google.maps.LatLng(this.lat, this.lng));
 61 |           marker.setPosition(new google.maps.LatLng(this.lat, this.lng));
 62 |           this.updateLocation(this.lat, this.lng);
 63 |         },
 64 |         error => {
 65 |           console.log(error.message);
 66 |         }
 67 |       );
 68 |     },
 69 | 
 70 |     stopLocationUpdates() {
 71 |       navigator.geolocation.clearWatch(this.watchPositionId);
 72 |     },
 73 | 
 74 |     signOutButtonPressed() {
 75 |       firebase
 76 |         .auth()
 77 |         .signOut()
 78 |         .then(user => {
 79 |           this.$router.push({
 80 |             name: "Signin"
 81 |           });
 82 |         })
 83 |         .catch(error => {
 84 |           console.log(error.message);
 85 |         });
 86 |     },
 87 |     updateLocation(lat, lng) {
 88 |       const db = firebase.firestore();
 89 |       db.collection("users")
 90 |         .doc(this.user.uid)
 91 |         .set({ lat: lat, lng: lng, active: true }, { merge: true });
 92 |     }
 93 |   }
 94 | };
 95 | </script>
 96 | 
 97 | 
 98 | <style>
 99 | .driver-view {
100 |   display: flex;
101 |   flex-direction: column;
102 |   height: 100vh;
103 | }
104 | 
105 | .top-bar {
106 |   height: 100px;
107 |   text-align: center;
108 |   background: white;
109 | }
110 | 
111 | .map {
112 |   flex-grow: 1;
113 |   background-color: rgba(0, 0, 0, 0.1);
114 | }
115 | 
116 | .bottom-bar {
117 |   padding: 20px 0px;
118 |   text-align: center;
119 |   background: white;
120 | }
121 | </style>
122 | 
123 | 


--------------------------------------------------------------------------------
/src/pages/Signin.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="ui centered grid" style="margin-top:30px;">
 3 |     <div class="column" style="max-width:450px;">
 4 |       <form class="ui segment large form">
 5 |         <img class="ui centered medium image" src="@/assets/rt-logo.png" style="max-width:150px;" />
 6 |         <div class="ui segment">
 7 |           <div class="field">
 8 |             <div class="ui left icon input large">
 9 |               <input type="text" placeholder="Enter your email" v-model="email" />
10 |               <i class="ui icon user"></i>
11 |             </div>
12 |           </div>
13 |           <div class="field">
14 |             <div class="ui left icon input large">
15 |               <input type="password" placeholder="Enter your password" v-model="password" />
16 |               <i class="ui icon key"></i>
17 |             </div>
18 |           </div>
19 |           <button class="ui button fluid large red" @click="loginButtonPressed">Log in</button>
20 |         </div>
21 |         <router-link :to="{ name: 'SignUp' }" tag="a" class="ui button basic">Sign up</router-link>
22 |       </form>
23 |     </div>
24 |   </section>
25 | </template>
26 | <script>
27 | import firebase from "firebase";
28 | export default {
29 |   data() {
30 |     return {
31 |       email: "",
32 |       password: ""
33 |     };
34 |   },
35 |   methods: {
36 |     loginButtonPressed() {
37 |       firebase
38 |         .auth()
39 |         .signInWithEmailAndPassword(this.email, this.password)
40 |         .then(user => {
41 |           console.log("user is singed in ");
42 |         })
43 |         .catch(error => {
44 |           console.log(error.message);
45 |         });
46 |     }
47 |   }
48 | };
49 | </script>
50 | 
51 | 


--------------------------------------------------------------------------------
/src/pages/Signup.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="ui centered grid" style="margin-top:30px;">
 3 |     <div class="column" style="max-width:450px;">
 4 |       <form class="ui segment large form">
 5 |         <div class="ui segment">
 6 |           <div class="field">
 7 |             <div class="ui left icon input large">
 8 |               <input type="text" placeholder="Enter your email" v-model="email" />
 9 |               <i class="ui icon user"></i>
10 |             </div>
11 |           </div>
12 |           <div class="field">
13 |             <div class="ui left icon input large">
14 |               <input type="password" placeholder="Enter your password" v-model="password" />
15 |               <i class="ui icon key"></i>
16 |             </div>
17 |           </div>
18 |           <button class="ui button fluid large green" @click="signUpButtonPressed">Sign up</button>
19 |         </div>
20 |       </form>
21 |       <router-link :to="{ name: 'Signin' }" tag="a" class="ui button basic">Log in</router-link>
22 |     </div>
23 |   </section>
24 | </template>
25 | <script>
26 | import firebase from "firebase";
27 | export default {
28 |   data() {
29 |     return {
30 |       email: "",
31 |       password: ""
32 |     };
33 |   },
34 |   mounted() {},
35 |   methods: {
36 |     signUpButtonPressed() {
37 |       firebase
38 |         .auth()
39 |         .createUserWithEmailAndPassword(this.email, this.password)
40 |         .then(user => {
41 |           this.addUserToDB(user);
42 |         })
43 |         .catch(error => {
44 |           this.error = error.message;
45 |         });
46 |     },
47 |     async addUserToDB({ user }) {
48 |       try {
49 |         const db = firebase.firestore();
50 |         _ = await db
51 |           .collection("users")
52 |           .doc(user.uid)
53 |           .set({
54 |             email: user.email,
55 |             active: false
56 |           });
57 |         this.$router.push({
58 |           name: "Driver"
59 |         });
60 |       } catch (error) {
61 |         console.log(error.message);
62 |       }
63 |     }
64 |   }
65 | };
66 | </script>
67 | 
68 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | 
 4 | import firebase from 'firebase'
 5 | 
 6 | import Driver from '@/pages/Driver'
 7 | import Signin from '@/pages/Signin'
 8 | import SignUp from '@/pages/SignUp'
 9 | import Admin from '@/pages/Admin'
10 | 
11 | 
12 | Vue.use(Router)
13 | 
14 | let router = new Router({
15 |   routes: [{
16 |       path: '/driver',
17 |       name: 'Driver',
18 |       component: Driver,
19 |       meta: {
20 |         requiresAuth: true
21 |       }
22 |     },
23 | 
24 |     {
25 |       path: '/signin',
26 |       name: 'Signin',
27 |       component: Signin,
28 |       meta: {
29 |         guest: true
30 |       }
31 |     },
32 |     {
33 |       path: '/signup',
34 |       name: 'SignUp',
35 |       component: SignUp,
36 |       meta: {
37 |         guest: true
38 |       }
39 |     },
40 |     {
41 |       path: '/admin',
42 |       name: 'Admin',
43 |       component: Admin,
44 |       meta: {
45 |         requiresAuth: true
46 |       }
47 |     }
48 |   ]
49 | })
50 | 
51 | router.beforeEach((to, from, next) => {
52 | 
53 |   firebase.auth().onAuthStateChanged(userAuth => {
54 |     if (!userAuth && to.matched.some(record => record.meta.requiresAuth)) {
55 |       next({
56 |         name: 'Signin'
57 |       })
58 |     } else if (userAuth) {
59 |       if (to.matched.some(record => record.meta.guest)) {
60 |         next(from.fullPath)
61 |       } else {
62 |         firebase.firestore().collection("roles").doc(userAuth.uid).get().then(snapShot => {
63 |           if (snapShot.data().isAdmin) {
64 |             next({
65 |               name: 'Admin'
66 |             })
67 |           } else {
68 |             next({
69 |               name: 'Driver'
70 |             })
71 |           }
72 |         })
73 |       }
74 | 
75 |     } else {
76 |       next()
77 |     }
78 |   })
79 | 
80 |   next()
81 | 
82 | })
83 | 
84 | 
85 | export default router
86 | 


--------------------------------------------------------------------------------
/static/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------