diff --git a/package-lock.json b/package-lock.json
index 2dc3b33..eb79792 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -150,6 +150,147 @@
         }
       }
     },
+    "@firebase/app": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.2.0.tgz",
+      "integrity": "sha512-hu+HGRXER3URCb8sZdd4f3QzvVWfuKvJoqd1mlEx9vWQ0fMpFqMeYgOaO7+x7PkNzamMHetItfws5TK9pmnStQ==",
+      "requires": {
+        "@firebase/app-types": "0.2.0",
+        "@firebase/util": "0.1.11",
+        "tslib": "1.9.0"
+      }
+    },
+    "@firebase/app-types": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.2.0.tgz",
+      "integrity": "sha512-0hTbuFmTr5sBvn9r2w5nk9FeMkuscj+ClPUBimtOkOnoLvIWRICILRiPTV1CX+7Th4EJ7y17UWx8jieY0f8GtA=="
+    },
+    "@firebase/auth": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-0.4.2.tgz",
+      "integrity": "sha512-gMEKuKDdO2oB9c2zmj6NlFOY1ynzummXuUWz6cFgUdNd/Pw5ZpkOlGzS7yxZ7NI0dZXV/xccamN7CN9/vol+cA==",
+      "requires": {
+        "@firebase/auth-types": "0.2.1"
+      }
+    },
+    "@firebase/auth-types": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-types/-/auth-types-0.2.1.tgz",
+      "integrity": "sha512-zjObje4RYJ7RJHt1z8A6xGnfLw/5RwUvk7AHrYwS4N3Mq17j/ZumBvYlAQz4k8sNe9GFDmjmHa30ezFWOglLEQ=="
+    },
+    "@firebase/database": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@firebase/database/-/database-0.2.2.tgz",
+      "integrity": "sha512-iTNEN33D3V0hAG2hdx+guFBXaN4hcFS2k2EGp/bzNviAG7n2AotMscdbkS6xDS2e3Uk2/D3lfibHQO4zgJ3LIg==",
+      "requires": {
+        "@firebase/database-types": "0.2.1",
+        "@firebase/logger": "0.1.1",
+        "@firebase/util": "0.1.11",
+        "faye-websocket": "0.11.1",
+        "tslib": "1.9.0"
+      }
+    },
+    "@firebase/database-types": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@firebase/database-types/-/database-types-0.2.1.tgz",
+      "integrity": "sha512-LyvTpLImnhSTyHfPGcBxhD0tHw+R7FUb+als23Ad5hPCcGxlRgLhA+ukrhFIGA8Mt8FYHWgFm7TCX4YDRDxK6w=="
+    },
+    "@firebase/firestore": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-0.4.1.tgz",
+      "integrity": "sha512-RsceKkGQyiTJq/9odss6v+6KgJVLr5H8hgVO/u+d1Is20cQXJFpDjrgcoGairVb4S/jav2LV1/bHXj3HVLObvw==",
+      "requires": {
+        "@firebase/firestore-types": "0.3.0",
+        "@firebase/logger": "0.1.1",
+        "@firebase/webchannel-wrapper": "0.2.8",
+        "grpc": "1.10.1",
+        "tslib": "1.9.0"
+      }
+    },
+    "@firebase/firestore-types": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore-types/-/firestore-types-0.3.0.tgz",
+      "integrity": "sha512-pWqIALmvp91ELeFiiAOIDVvcCxkLxXffp5KYNL1I/mNgqe2CyGoNB6+pUb/S+FH3oCh/HWHBW+0lXDszcP42aA=="
+    },
+    "@firebase/functions": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@firebase/functions/-/functions-0.1.1.tgz",
+      "integrity": "sha512-olSryAPNcH47WFCUmooNgO4P61dmlUEPVYOa0urTLiQh+8M8E7RuDWcqxxxiPk4BCN/l2ZeO0uCDsrzBMX4OqA==",
+      "requires": {
+        "@firebase/functions-types": "0.1.1",
+        "@firebase/messaging-types": "0.1.3",
+        "isomorphic-fetch": "2.2.1"
+      }
+    },
+    "@firebase/functions-types": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@firebase/functions-types/-/functions-types-0.1.1.tgz",
+      "integrity": "sha512-DMCQAuSafYChef2Wa4yYNPeToEDggnlaUHvseKxPzUwOVVmPdr9dxmqQW+UKeGYeUHfiTWFzvsrk8u1ifyvTZA=="
+    },
+    "@firebase/logger": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@firebase/logger/-/logger-0.1.1.tgz",
+      "integrity": "sha512-5jn3HHbEfdOwychyIEIkP1cik+MW/vvoOavTOzwDkH+fv6Bx+HBUOzh09M7sCYzXFtKzjbUax9+g39mJNBLklQ=="
+    },
+    "@firebase/messaging": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging/-/messaging-0.2.4.tgz",
+      "integrity": "sha512-bgnIhKETgA8ZgWXFmF0+RLqr93/nxqnncRndxNcKTPyq4syah703NeTtaJCMR3LWrfKGV9blpEBogtX3JmJK1g==",
+      "requires": {
+        "@firebase/messaging-types": "0.1.3",
+        "@firebase/util": "0.1.11",
+        "tslib": "1.9.0"
+      }
+    },
+    "@firebase/messaging-types": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging-types/-/messaging-types-0.1.3.tgz",
+      "integrity": "sha512-kDixnQujUuwvqc12iFLd6ygb+cdCCXCNeJpQD7jV0mnYMbE1Sp4Y7sl2G7N7r0kcoJPHUQHERBkZlw2N3xyJCw=="
+    },
+    "@firebase/polyfill": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@firebase/polyfill/-/polyfill-0.3.1.tgz",
+      "integrity": "sha512-TkmIU4OZeE+rZoQFvq9qYsHv3IYeWahvPUTknUiqN14XJ1777ZEZ+oHBM116/R/Ej3kA5EZxhahqlRHOOD/Dwg==",
+      "requires": {
+        "core-js": "2.5.5",
+        "promise-polyfill": "7.1.2",
+        "whatwg-fetch": "2.0.4"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.5.5",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.5.tgz",
+          "integrity": "sha1-sU3ek2xkDAV5prUMq8wTLdYSfjs="
+        }
+      }
+    },
+    "@firebase/storage": {
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/@firebase/storage/-/storage-0.1.9.tgz",
+      "integrity": "sha512-CrlreoXIlWNAAHnOAlP0KpZ2aM8s4QFOcrIhBE3f7vE6h30TuBuhFFra4slUykCuUflyVjBYlea6ph0fJsJr0w==",
+      "requires": {
+        "@firebase/storage-types": "0.1.3",
+        "tslib": "1.9.0"
+      }
+    },
+    "@firebase/storage-types": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@firebase/storage-types/-/storage-types-0.1.3.tgz",
+      "integrity": "sha512-xM939ObH7MLDhhrEi/UyEDj87b3AGypGp5YPpEOwvtL2KpF7VQf7g715LoaWmhGd4+e1MHFMCktQbejkpkj63A=="
+    },
+    "@firebase/util": {
+      "version": "0.1.11",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-0.1.11.tgz",
+      "integrity": "sha512-xUMugOJBSKVKOjrKJIVeIr4Z/6iDxSuOlOJRdz0xsOBJ9+lZVxGZs0U4oZmszWhQER1zzR+EQWIYFYePt6/QMQ==",
+      "requires": {
+        "tslib": "1.9.0"
+      }
+    },
+    "@firebase/webchannel-wrapper": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.2.8.tgz",
+      "integrity": "sha512-ToJbeJnxDc3O325FvcKVb3yHO1hvgHjCFvhKol6Z17GiB7vL104POjFQT4RnlLiAGSRCBAMxinDec9y9vQYdyg=="
+    },
     "accepts": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz",
@@ -259,8 +400,7 @@
     "ansi-regex": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-      "dev": true
+      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
     },
     "ansi-styles": {
       "version": "3.2.1",
@@ -614,6 +754,15 @@
       "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
       "dev": true
     },
+    "ascli": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ascli/-/ascli-1.0.1.tgz",
+      "integrity": "sha1-vPpZdKYvGOgcq660lzKrSoj5Brw=",
+      "requires": {
+        "colour": "0.7.1",
+        "optjs": "3.2.2"
+      }
+    },
     "asn1.js": {
       "version": "4.10.1",
       "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-4.10.1.tgz",
@@ -681,6 +830,15 @@
         "postcss-value-parser": "3.3.0"
       }
     },
+    "axios": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
+      "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
+      "requires": {
+        "follow-redirects": "1.4.1",
+        "is-buffer": "1.1.6"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -1506,8 +1664,7 @@
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
-      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-      "dev": true
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
     },
     "base": {
       "version": "0.11.2",
@@ -1633,7 +1790,6 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
       "requires": {
         "balanced-match": "1.0.0",
         "concat-map": "0.0.1"
@@ -1765,6 +1921,14 @@
       "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=",
       "dev": true
     },
+    "bytebuffer": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/bytebuffer/-/bytebuffer-5.0.1.tgz",
+      "integrity": "sha1-WC7qSxqHO20CCkjVjfhfC7ps/d0=",
+      "requires": {
+        "long": "3.2.0"
+      }
+    },
     "bytes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
@@ -1845,8 +2009,7 @@
     "camelcase": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
-      "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=",
-      "dev": true
+      "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8="
     },
     "camelcase-keys": {
       "version": "2.1.0",
@@ -2301,8 +2464,7 @@
     "code-point-at": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
-      "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-      "dev": true
+      "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
     },
     "collection-visit": {
       "version": "1.0.0",
@@ -2366,6 +2528,11 @@
       "integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM=",
       "dev": true
     },
+    "colour": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/colour/-/colour-0.7.1.tgz",
+      "integrity": "sha1-nLFpkX7F0SwHNtPoaFdG3xyt93g="
+    },
     "commander": {
       "version": "2.14.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.14.1.tgz",
@@ -2387,8 +2554,7 @@
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-      "dev": true
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
     },
     "concat-stream": {
       "version": "1.6.1",
@@ -2975,8 +3141,7 @@
     "decamelize": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
-      "dev": true
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
     },
     "decode-uri-component": {
       "version": "0.2.0",
@@ -3153,6 +3318,11 @@
         }
       }
     },
+    "dom-storage": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/dom-storage/-/dom-storage-2.1.0.tgz",
+      "integrity": "sha512-g6RpyWXzl0RR6OTElHKBl7nwnK87GUyZMYC7JWsB/IA73vpqK2K6LT39x4VepLxlSsWBFrPVLnsSR5Jyty0+2Q=="
+    },
     "dom-urls": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/dom-urls/-/dom-urls-1.1.0.tgz",
@@ -3271,6 +3441,14 @@
       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
       "dev": true
     },
+    "encoding": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
+      "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
+      "requires": {
+        "iconv-lite": "0.4.19"
+      }
+    },
     "end-of-stream": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
@@ -3973,6 +4151,14 @@
       "integrity": "sha1-0eJkOzipTXWDtHkGDmxK/8lAcfg=",
       "dev": true
     },
+    "faye-websocket": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.1.tgz",
+      "integrity": "sha1-8O/hjE9W5PQK/H4Gxxn9XuYYjzg=",
+      "requires": {
+        "websocket-driver": "0.7.0"
+      }
+    },
     "figures": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
@@ -4091,6 +4277,23 @@
         "locate-path": "2.0.0"
       }
     },
+    "firebase": {
+      "version": "4.13.1",
+      "resolved": "https://registry.npmjs.org/firebase/-/firebase-4.13.1.tgz",
+      "integrity": "sha512-vi+DbUPRrsUaLxuMLgCuyISTBNQ/TqrEwWzUpMqyABPwE6YhGplNnCDPs+/kRDXxdqWUdwrUEXo1ansBSimoNw==",
+      "requires": {
+        "@firebase/app": "0.2.0",
+        "@firebase/auth": "0.4.2",
+        "@firebase/database": "0.2.2",
+        "@firebase/firestore": "0.4.1",
+        "@firebase/functions": "0.1.1",
+        "@firebase/messaging": "0.2.4",
+        "@firebase/polyfill": "0.3.1",
+        "@firebase/storage": "0.1.9",
+        "dom-storage": "2.1.0",
+        "xmlhttprequest": "1.8.0"
+      }
+    },
     "flat-cache": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-1.3.0.tgz",
@@ -4119,6 +4322,24 @@
         "readable-stream": "2.3.5"
       }
     },
+    "follow-redirects": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.4.1.tgz",
+      "integrity": "sha512-uxYePVPogtya1ktGnAAXOacnbIuRMB4dkvqeNz2qTtTQsuzSfbDolV+wMMKxAmCx0bLgAKLbBOkjItMbbkR1vg==",
+      "requires": {
+        "debug": "3.1.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        }
+      }
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -4218,8 +4439,7 @@
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
-      "dev": true
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
     },
     "fsevents": {
       "version": "1.1.3",
@@ -5165,7 +5385,6 @@
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
       "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
-      "dev": true,
       "requires": {
         "fs.realpath": "1.0.0",
         "inflight": "1.0.6",
@@ -5191,97 +5410,802 @@
           "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
           "dev": true
         },
-        "is-glob": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
-          "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
-          "dev": true,
+        "is-glob": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
+          "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "1.0.0"
+          }
+        }
+      }
+    },
+    "glob-parent": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-2.0.0.tgz",
+      "integrity": "sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=",
+      "dev": true,
+      "requires": {
+        "is-glob": "2.0.1"
+      },
+      "dependencies": {
+        "is-extglob": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
+          "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
+          "dev": true
+        },
+        "is-glob": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
+          "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "1.0.0"
+          }
+        }
+      }
+    },
+    "global-dirs": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-0.1.1.tgz",
+      "integrity": "sha1-sxnA3UYH81PzvpzKTHL8FIxJ9EU=",
+      "dev": true,
+      "requires": {
+        "ini": "1.3.5"
+      }
+    },
+    "globals": {
+      "version": "9.18.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz",
+      "integrity": "sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==",
+      "dev": true
+    },
+    "globby": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-7.1.1.tgz",
+      "integrity": "sha1-+yzP+UAfhgCUXfral0QMypcrhoA=",
+      "dev": true,
+      "requires": {
+        "array-union": "1.0.2",
+        "dir-glob": "2.0.0",
+        "glob": "7.1.2",
+        "ignore": "3.3.7",
+        "pify": "3.0.0",
+        "slash": "1.0.0"
+      }
+    },
+    "got": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/got/-/got-6.7.1.tgz",
+      "integrity": "sha1-JAzQV4WpoY5WHcG0S0HHY+8ejbA=",
+      "dev": true,
+      "requires": {
+        "create-error-class": "3.0.2",
+        "duplexer3": "0.1.4",
+        "get-stream": "3.0.0",
+        "is-redirect": "1.0.0",
+        "is-retry-allowed": "1.1.0",
+        "is-stream": "1.1.0",
+        "lowercase-keys": "1.0.0",
+        "safe-buffer": "5.1.1",
+        "timed-out": "4.0.1",
+        "unzip-response": "2.0.1",
+        "url-parse-lax": "1.0.0"
+      }
+    },
+    "graceful-fs": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
+      "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
+      "dev": true
+    },
+    "grpc": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/grpc/-/grpc-1.10.1.tgz",
+      "integrity": "sha512-xmhA11h2XhqpSVzDAmoQAYdNQ+swILXpKOiRpAEQ2kX55ioxVADc6v7SkS4zQBxm4klhQHgGqpGKvoL6LGx4VQ==",
+      "requires": {
+        "lodash": "4.17.5",
+        "nan": "2.10.0",
+        "node-pre-gyp": "0.7.0",
+        "protobufjs": "5.0.2"
+      },
+      "dependencies": {
+        "abbrev": {
+          "version": "1.1.1",
+          "bundled": true
+        },
+        "ajv": {
+          "version": "5.5.2",
+          "bundled": true,
+          "requires": {
+            "co": "4.6.0",
+            "fast-deep-equal": "1.1.0",
+            "fast-json-stable-stringify": "2.0.0",
+            "json-schema-traverse": "0.3.1"
+          }
+        },
+        "ansi-regex": {
+          "version": "2.1.1",
+          "bundled": true
+        },
+        "aproba": {
+          "version": "1.2.0",
+          "bundled": true
+        },
+        "are-we-there-yet": {
+          "version": "1.1.4",
+          "bundled": true,
+          "requires": {
+            "delegates": "1.0.0",
+            "readable-stream": "2.3.5"
+          }
+        },
+        "asn1": {
+          "version": "0.2.3",
+          "bundled": true
+        },
+        "assert-plus": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "asynckit": {
+          "version": "0.4.0",
+          "bundled": true
+        },
+        "aws-sign2": {
+          "version": "0.7.0",
+          "bundled": true
+        },
+        "aws4": {
+          "version": "1.6.0",
+          "bundled": true
+        },
+        "balanced-match": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "bcrypt-pbkdf": {
+          "version": "1.0.1",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "tweetnacl": "0.14.5"
+          }
+        },
+        "block-stream": {
+          "version": "0.0.9",
+          "bundled": true,
+          "requires": {
+            "inherits": "2.0.3"
+          }
+        },
+        "boom": {
+          "version": "4.3.1",
+          "bundled": true,
+          "requires": {
+            "hoek": "4.2.1"
+          }
+        },
+        "brace-expansion": {
+          "version": "1.1.8",
+          "bundled": true,
+          "requires": {
+            "balanced-match": "1.0.0",
+            "concat-map": "0.0.1"
+          }
+        },
+        "caseless": {
+          "version": "0.12.0",
+          "bundled": true
+        },
+        "co": {
+          "version": "4.6.0",
+          "bundled": true
+        },
+        "code-point-at": {
+          "version": "1.1.0",
+          "bundled": true
+        },
+        "combined-stream": {
+          "version": "1.0.6",
+          "bundled": true,
+          "requires": {
+            "delayed-stream": "1.0.0"
+          }
+        },
+        "concat-map": {
+          "version": "0.0.1",
+          "bundled": true
+        },
+        "console-control-strings": {
+          "version": "1.1.0",
+          "bundled": true
+        },
+        "core-util-is": {
+          "version": "1.0.2",
+          "bundled": true
+        },
+        "cryptiles": {
+          "version": "3.1.2",
+          "bundled": true,
+          "requires": {
+            "boom": "5.2.0"
+          },
+          "dependencies": {
+            "boom": {
+              "version": "5.2.0",
+              "bundled": true,
+              "requires": {
+                "hoek": "4.2.1"
+              }
+            }
+          }
+        },
+        "dashdash": {
+          "version": "1.14.1",
+          "bundled": true,
+          "requires": {
+            "assert-plus": "1.0.0"
+          }
+        },
+        "debug": {
+          "version": "2.6.9",
+          "bundled": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "deep-extend": {
+          "version": "0.4.2",
+          "bundled": true
+        },
+        "delayed-stream": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "delegates": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "detect-libc": {
+          "version": "1.0.3",
+          "bundled": true
+        },
+        "ecc-jsbn": {
+          "version": "0.1.1",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "jsbn": "0.1.1"
+          }
+        },
+        "extend": {
+          "version": "3.0.1",
+          "bundled": true
+        },
+        "extsprintf": {
+          "version": "1.3.0",
+          "bundled": true
+        },
+        "fast-deep-equal": {
+          "version": "1.1.0",
+          "bundled": true
+        },
+        "fast-json-stable-stringify": {
+          "version": "2.0.0",
+          "bundled": true
+        },
+        "forever-agent": {
+          "version": "0.6.1",
+          "bundled": true
+        },
+        "form-data": {
+          "version": "2.3.2",
+          "bundled": true,
+          "requires": {
+            "asynckit": "0.4.0",
+            "combined-stream": "1.0.6",
+            "mime-types": "2.1.18"
+          }
+        },
+        "fs.realpath": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "fstream": {
+          "version": "1.0.11",
+          "bundled": true,
+          "requires": {
+            "graceful-fs": "4.1.11",
+            "inherits": "2.0.3",
+            "mkdirp": "0.5.1",
+            "rimraf": "2.6.2"
+          }
+        },
+        "fstream-ignore": {
+          "version": "1.0.5",
+          "bundled": true,
+          "requires": {
+            "fstream": "1.0.11",
+            "inherits": "2.0.3",
+            "minimatch": "3.0.4"
+          }
+        },
+        "gauge": {
+          "version": "2.7.4",
+          "bundled": true,
+          "requires": {
+            "aproba": "1.2.0",
+            "console-control-strings": "1.1.0",
+            "has-unicode": "2.0.1",
+            "object-assign": "4.1.1",
+            "signal-exit": "3.0.2",
+            "string-width": "1.0.2",
+            "strip-ansi": "3.0.1",
+            "wide-align": "1.1.2"
+          }
+        },
+        "getpass": {
+          "version": "0.1.7",
+          "bundled": true,
+          "requires": {
+            "assert-plus": "1.0.0"
+          }
+        },
+        "glob": {
+          "version": "7.1.2",
+          "bundled": true,
+          "requires": {
+            "fs.realpath": "1.0.0",
+            "inflight": "1.0.6",
+            "inherits": "2.0.3",
+            "minimatch": "3.0.4",
+            "once": "1.4.0",
+            "path-is-absolute": "1.0.1"
+          }
+        },
+        "graceful-fs": {
+          "version": "4.1.11",
+          "bundled": true
+        },
+        "har-schema": {
+          "version": "2.0.0",
+          "bundled": true
+        },
+        "har-validator": {
+          "version": "5.0.3",
+          "bundled": true,
+          "requires": {
+            "ajv": "5.5.2",
+            "har-schema": "2.0.0"
+          }
+        },
+        "has-unicode": {
+          "version": "2.0.1",
+          "bundled": true
+        },
+        "hawk": {
+          "version": "6.0.2",
+          "bundled": true,
+          "requires": {
+            "boom": "4.3.1",
+            "cryptiles": "3.1.2",
+            "hoek": "4.2.1",
+            "sntp": "2.1.0"
+          }
+        },
+        "hoek": {
+          "version": "4.2.1",
+          "bundled": true
+        },
+        "http-signature": {
+          "version": "1.2.0",
+          "bundled": true,
+          "requires": {
+            "assert-plus": "1.0.0",
+            "jsprim": "1.4.1",
+            "sshpk": "1.14.1"
+          }
+        },
+        "inflight": {
+          "version": "1.0.6",
+          "bundled": true,
+          "requires": {
+            "once": "1.4.0",
+            "wrappy": "1.0.2"
+          }
+        },
+        "inherits": {
+          "version": "2.0.3",
+          "bundled": true
+        },
+        "ini": {
+          "version": "1.3.5",
+          "bundled": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "bundled": true,
+          "requires": {
+            "number-is-nan": "1.0.1"
+          }
+        },
+        "is-typedarray": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "isarray": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "isstream": {
+          "version": "0.1.2",
+          "bundled": true
+        },
+        "jsbn": {
+          "version": "0.1.1",
+          "bundled": true,
+          "optional": true
+        },
+        "json-schema": {
+          "version": "0.2.3",
+          "bundled": true
+        },
+        "json-schema-traverse": {
+          "version": "0.3.1",
+          "bundled": true
+        },
+        "json-stringify-safe": {
+          "version": "5.0.1",
+          "bundled": true
+        },
+        "jsprim": {
+          "version": "1.4.1",
+          "bundled": true,
+          "requires": {
+            "assert-plus": "1.0.0",
+            "extsprintf": "1.3.0",
+            "json-schema": "0.2.3",
+            "verror": "1.10.0"
+          }
+        },
+        "mime-db": {
+          "version": "1.33.0",
+          "bundled": true
+        },
+        "mime-types": {
+          "version": "2.1.18",
+          "bundled": true,
+          "requires": {
+            "mime-db": "1.33.0"
+          }
+        },
+        "minimatch": {
+          "version": "3.0.4",
+          "bundled": true,
+          "requires": {
+            "brace-expansion": "1.1.8"
+          }
+        },
+        "minimist": {
+          "version": "1.2.0",
+          "bundled": true
+        },
+        "mkdirp": {
+          "version": "0.5.1",
+          "bundled": true,
+          "requires": {
+            "minimist": "0.0.8"
+          },
+          "dependencies": {
+            "minimist": {
+              "version": "0.0.8",
+              "bundled": true
+            }
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "bundled": true
+        },
+        "nan": {
+          "version": "2.10.0",
+          "resolved": "https://registry.npmjs.org/nan/-/nan-2.10.0.tgz",
+          "integrity": "sha512-bAdJv7fBLhWC+/Bls0Oza+mvTaNQtP+1RyhhhvD95pgUJz6XM5IzgmxOkItJ9tkoCiplvAnXI1tNmmUD/eScyA=="
+        },
+        "node-pre-gyp": {
+          "version": "0.7.0",
+          "bundled": true,
+          "requires": {
+            "detect-libc": "1.0.3",
+            "mkdirp": "0.5.1",
+            "nopt": "4.0.1",
+            "npmlog": "4.1.2",
+            "rc": "1.2.6",
+            "request": "2.83.0",
+            "rimraf": "2.6.2",
+            "semver": "5.5.0",
+            "tar": "2.2.1",
+            "tar-pack": "3.4.1"
+          }
+        },
+        "nopt": {
+          "version": "4.0.1",
+          "bundled": true,
+          "requires": {
+            "abbrev": "1.1.1",
+            "osenv": "0.1.5"
+          }
+        },
+        "npmlog": {
+          "version": "4.1.2",
+          "bundled": true,
+          "requires": {
+            "are-we-there-yet": "1.1.4",
+            "console-control-strings": "1.1.0",
+            "gauge": "2.7.4",
+            "set-blocking": "2.0.0"
+          }
+        },
+        "number-is-nan": {
+          "version": "1.0.1",
+          "bundled": true
+        },
+        "oauth-sign": {
+          "version": "0.8.2",
+          "bundled": true
+        },
+        "object-assign": {
+          "version": "4.1.1",
+          "bundled": true
+        },
+        "once": {
+          "version": "1.4.0",
+          "bundled": true,
+          "requires": {
+            "wrappy": "1.0.2"
+          }
+        },
+        "os-homedir": {
+          "version": "1.0.2",
+          "bundled": true
+        },
+        "os-tmpdir": {
+          "version": "1.0.2",
+          "bundled": true
+        },
+        "osenv": {
+          "version": "0.1.5",
+          "bundled": true,
+          "requires": {
+            "os-homedir": "1.0.2",
+            "os-tmpdir": "1.0.2"
+          }
+        },
+        "path-is-absolute": {
+          "version": "1.0.1",
+          "bundled": true
+        },
+        "performance-now": {
+          "version": "2.1.0",
+          "bundled": true
+        },
+        "process-nextick-args": {
+          "version": "2.0.0",
+          "bundled": true
+        },
+        "punycode": {
+          "version": "1.4.1",
+          "bundled": true
+        },
+        "qs": {
+          "version": "6.5.1",
+          "bundled": true
+        },
+        "rc": {
+          "version": "1.2.6",
+          "bundled": true,
+          "requires": {
+            "deep-extend": "0.4.2",
+            "ini": "1.3.5",
+            "minimist": "1.2.0",
+            "strip-json-comments": "2.0.1"
+          }
+        },
+        "readable-stream": {
+          "version": "2.3.5",
+          "bundled": true,
+          "requires": {
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.3",
+            "isarray": "1.0.0",
+            "process-nextick-args": "2.0.0",
+            "safe-buffer": "5.1.1",
+            "string_decoder": "1.0.3",
+            "util-deprecate": "1.0.2"
+          }
+        },
+        "request": {
+          "version": "2.83.0",
+          "bundled": true,
+          "requires": {
+            "aws-sign2": "0.7.0",
+            "aws4": "1.6.0",
+            "caseless": "0.12.0",
+            "combined-stream": "1.0.6",
+            "extend": "3.0.1",
+            "forever-agent": "0.6.1",
+            "form-data": "2.3.2",
+            "har-validator": "5.0.3",
+            "hawk": "6.0.2",
+            "http-signature": "1.2.0",
+            "is-typedarray": "1.0.0",
+            "isstream": "0.1.2",
+            "json-stringify-safe": "5.0.1",
+            "mime-types": "2.1.18",
+            "oauth-sign": "0.8.2",
+            "performance-now": "2.1.0",
+            "qs": "6.5.1",
+            "safe-buffer": "5.1.1",
+            "stringstream": "0.0.5",
+            "tough-cookie": "2.3.4",
+            "tunnel-agent": "0.6.0",
+            "uuid": "3.2.1"
+          }
+        },
+        "rimraf": {
+          "version": "2.6.2",
+          "bundled": true,
+          "requires": {
+            "glob": "7.1.2"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.1",
+          "bundled": true
+        },
+        "semver": {
+          "version": "5.5.0",
+          "bundled": true
+        },
+        "set-blocking": {
+          "version": "2.0.0",
+          "bundled": true
+        },
+        "signal-exit": {
+          "version": "3.0.2",
+          "bundled": true
+        },
+        "sntp": {
+          "version": "2.1.0",
+          "bundled": true,
+          "requires": {
+            "hoek": "4.2.1"
+          }
+        },
+        "sshpk": {
+          "version": "1.14.1",
+          "bundled": true,
+          "requires": {
+            "asn1": "0.2.3",
+            "assert-plus": "1.0.0",
+            "bcrypt-pbkdf": "1.0.1",
+            "dashdash": "1.14.1",
+            "ecc-jsbn": "0.1.1",
+            "getpass": "0.1.7",
+            "jsbn": "0.1.1",
+            "tweetnacl": "0.14.5"
+          }
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "bundled": true,
+          "requires": {
+            "code-point-at": "1.1.0",
+            "is-fullwidth-code-point": "1.0.0",
+            "strip-ansi": "3.0.1"
+          }
+        },
+        "string_decoder": {
+          "version": "1.0.3",
+          "bundled": true,
           "requires": {
-            "is-extglob": "1.0.0"
+            "safe-buffer": "5.1.1"
           }
-        }
-      }
-    },
-    "glob-parent": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-2.0.0.tgz",
-      "integrity": "sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=",
-      "dev": true,
-      "requires": {
-        "is-glob": "2.0.1"
-      },
-      "dependencies": {
-        "is-extglob": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
-          "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
-          "dev": true
         },
-        "is-glob": {
+        "stringstream": {
+          "version": "0.0.5",
+          "bundled": true
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "bundled": true,
+          "requires": {
+            "ansi-regex": "2.1.1"
+          }
+        },
+        "strip-json-comments": {
           "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
-          "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
-          "dev": true,
+          "bundled": true
+        },
+        "tar": {
+          "version": "2.2.1",
+          "bundled": true,
           "requires": {
-            "is-extglob": "1.0.0"
+            "block-stream": "0.0.9",
+            "fstream": "1.0.11",
+            "inherits": "2.0.3"
+          }
+        },
+        "tar-pack": {
+          "version": "3.4.1",
+          "bundled": true,
+          "requires": {
+            "debug": "2.6.9",
+            "fstream": "1.0.11",
+            "fstream-ignore": "1.0.5",
+            "once": "1.4.0",
+            "readable-stream": "2.3.5",
+            "rimraf": "2.6.2",
+            "tar": "2.2.1",
+            "uid-number": "0.0.6"
+          }
+        },
+        "tough-cookie": {
+          "version": "2.3.4",
+          "bundled": true,
+          "requires": {
+            "punycode": "1.4.1"
+          }
+        },
+        "tunnel-agent": {
+          "version": "0.6.0",
+          "bundled": true,
+          "requires": {
+            "safe-buffer": "5.1.1"
+          }
+        },
+        "tweetnacl": {
+          "version": "0.14.5",
+          "bundled": true,
+          "optional": true
+        },
+        "uid-number": {
+          "version": "0.0.6",
+          "bundled": true
+        },
+        "util-deprecate": {
+          "version": "1.0.2",
+          "bundled": true
+        },
+        "uuid": {
+          "version": "3.2.1",
+          "bundled": true
+        },
+        "verror": {
+          "version": "1.10.0",
+          "bundled": true,
+          "requires": {
+            "assert-plus": "1.0.0",
+            "core-util-is": "1.0.2",
+            "extsprintf": "1.3.0"
+          }
+        },
+        "wide-align": {
+          "version": "1.1.2",
+          "bundled": true,
+          "requires": {
+            "string-width": "1.0.2"
           }
+        },
+        "wrappy": {
+          "version": "1.0.2",
+          "bundled": true
         }
       }
     },
-    "global-dirs": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-0.1.1.tgz",
-      "integrity": "sha1-sxnA3UYH81PzvpzKTHL8FIxJ9EU=",
-      "dev": true,
-      "requires": {
-        "ini": "1.3.5"
-      }
-    },
-    "globals": {
-      "version": "9.18.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz",
-      "integrity": "sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==",
-      "dev": true
-    },
-    "globby": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-7.1.1.tgz",
-      "integrity": "sha1-+yzP+UAfhgCUXfral0QMypcrhoA=",
-      "dev": true,
-      "requires": {
-        "array-union": "1.0.2",
-        "dir-glob": "2.0.0",
-        "glob": "7.1.2",
-        "ignore": "3.3.7",
-        "pify": "3.0.0",
-        "slash": "1.0.0"
-      }
-    },
-    "got": {
-      "version": "6.7.1",
-      "resolved": "https://registry.npmjs.org/got/-/got-6.7.1.tgz",
-      "integrity": "sha1-JAzQV4WpoY5WHcG0S0HHY+8ejbA=",
-      "dev": true,
-      "requires": {
-        "create-error-class": "3.0.2",
-        "duplexer3": "0.1.4",
-        "get-stream": "3.0.0",
-        "is-redirect": "1.0.0",
-        "is-retry-allowed": "1.1.0",
-        "is-stream": "1.1.0",
-        "lowercase-keys": "1.0.0",
-        "safe-buffer": "5.1.1",
-        "timed-out": "4.0.1",
-        "unzip-response": "2.0.1",
-        "url-parse-lax": "1.0.0"
-      }
-    },
-    "graceful-fs": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
-      "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
-      "dev": true
-    },
     "gzip-size": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-4.1.0.tgz",
@@ -5542,6 +6466,11 @@
         }
       }
     },
+    "http-parser-js": {
+      "version": "0.4.11",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.4.11.tgz",
+      "integrity": "sha512-QCR5O2AjjMW8Mo4HyI1ctFcv+O99j/0g367V3YoVnrNw5hkDvAWZD0lWGcc+F4yN3V55USPCVix4efb75HxFfA=="
+    },
     "http-proxy": {
       "version": "1.16.2",
       "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.16.2.tgz",
@@ -5584,8 +6513,7 @@
     "iconv-lite": {
       "version": "0.4.19",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz",
-      "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ==",
-      "dev": true
+      "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ=="
     },
     "icss-replace-symbols": {
       "version": "1.1.0",
@@ -5657,7 +6585,6 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
-      "dev": true,
       "requires": {
         "once": "1.4.0",
         "wrappy": "1.0.2"
@@ -5666,8 +6593,7 @@
     "inherits": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-      "dev": true
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
     },
     "ini": {
       "version": "1.3.5",
@@ -5732,8 +6658,7 @@
     "invert-kv": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
-      "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=",
-      "dev": true
+      "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY="
     },
     "ipaddr.js": {
       "version": "1.6.0",
@@ -5782,8 +6707,7 @@
     "is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-      "dev": true
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
     },
     "is-builtin-module": {
       "version": "1.0.0",
@@ -6021,8 +6945,7 @@
     "is-stream": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
-      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
-      "dev": true
+      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
     },
     "is-svg": {
       "version": "2.1.0",
@@ -6072,6 +6995,15 @@
         "isarray": "1.0.0"
       }
     },
+    "isomorphic-fetch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+      "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
+      "requires": {
+        "node-fetch": "1.7.3",
+        "whatwg-fetch": "2.0.4"
+      }
+    },
     "js-base64": {
       "version": "2.4.3",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.3.tgz",
@@ -6162,7 +7094,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
       "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=",
-      "dev": true,
       "requires": {
         "invert-kv": "1.0.0"
       }
@@ -6278,8 +7209,7 @@
     "lodash": {
       "version": "4.17.5",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
-      "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw==",
-      "dev": true
+      "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw=="
     },
     "lodash._reinterpolate": {
       "version": "3.0.0",
@@ -6339,6 +7269,11 @@
         "chalk": "2.3.2"
       }
     },
+    "long": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/long/-/long-3.2.0.tgz",
+      "integrity": "sha1-2CG3E4yhy1gcFymQ7xTbIAtcR0s="
+    },
     "longest": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
@@ -6688,7 +7623,6 @@
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
       "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-      "dev": true,
       "requires": {
         "brace-expansion": "1.1.11"
       }
@@ -6764,8 +7698,7 @@
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-      "dev": true
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
     "mute-stream": {
       "version": "0.0.7",
@@ -6856,6 +7789,15 @@
         "lower-case": "1.1.4"
       }
     },
+    "node-fetch": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+      "requires": {
+        "encoding": "0.1.12",
+        "is-stream": "1.1.0"
+      }
+    },
     "node-libs-browser": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-2.1.0.tgz",
@@ -6953,8 +7895,7 @@
     "number-is-nan": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
-      "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-      "dev": true
+      "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
     },
     "object-assign": {
       "version": "4.1.1",
@@ -7084,7 +8025,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-      "dev": true,
       "requires": {
         "wrappy": "1.0.2"
       }
@@ -7137,6 +8077,11 @@
         "wordwrap": "1.0.0"
       }
     },
+    "optjs": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/optjs/-/optjs-3.2.2.tgz",
+      "integrity": "sha1-aabOicRCpEQDFBrS+bNwvVu29O4="
+    },
     "ora": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/ora/-/ora-1.4.0.tgz",
@@ -7336,8 +8281,7 @@
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
-      "dev": true
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
     },
     "path-is-inside": {
       "version": "1.0.2",
@@ -9423,6 +10367,84 @@
       "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
       "dev": true
     },
+    "promise-polyfill": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-7.1.2.tgz",
+      "integrity": "sha512-FuEc12/eKqqoRYIGBrUptCBRhobL19PS2U31vMNTfyck1FxPyMfgsXyW4Mav85y/ZN1hop3hOwRlUDok23oYfQ=="
+    },
+    "protobufjs": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-5.0.2.tgz",
+      "integrity": "sha1-WXSNfc8D0tsiwT2p/rAk4Wq4DJE=",
+      "requires": {
+        "ascli": "1.0.1",
+        "bytebuffer": "5.0.1",
+        "glob": "7.1.2",
+        "yargs": "3.32.0"
+      },
+      "dependencies": {
+        "cliui": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
+          "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
+          "requires": {
+            "string-width": "1.0.2",
+            "strip-ansi": "3.0.1",
+            "wrap-ansi": "2.1.0"
+          }
+        },
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "requires": {
+            "number-is-nan": "1.0.1"
+          }
+        },
+        "os-locale": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
+          "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
+          "requires": {
+            "lcid": "1.0.0"
+          }
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "requires": {
+            "code-point-at": "1.1.0",
+            "is-fullwidth-code-point": "1.0.0",
+            "strip-ansi": "3.0.1"
+          }
+        },
+        "window-size": {
+          "version": "0.1.4",
+          "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.4.tgz",
+          "integrity": "sha1-+OGqHuWlPsW/FR/6CXQqatdpeHY="
+        },
+        "y18n": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
+          "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE="
+        },
+        "yargs": {
+          "version": "3.32.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.32.0.tgz",
+          "integrity": "sha1-AwiOnr+edWtpdRYR0qXvWRSCyZU=",
+          "requires": {
+            "camelcase": "2.1.1",
+            "cliui": "3.2.0",
+            "decamelize": "1.2.0",
+            "os-locale": "1.4.0",
+            "string-width": "1.0.2",
+            "window-size": "0.1.4",
+            "y18n": "3.2.1"
+          }
+        }
+      }
+    },
     "proxy-addr": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.3.tgz",
@@ -10699,7 +11721,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
       "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-      "dev": true,
       "requires": {
         "ansi-regex": "2.1.1"
       }
@@ -11007,6 +12028,11 @@
       "integrity": "sha1-Antp+oIyJeVRys4+8DsR9qs3wdc=",
       "dev": true
     },
+    "tslib": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.0.tgz",
+      "integrity": "sha512-f/qGG2tUkrISBlQZEjEqoZ3B2+npJjIf04H1wuAv9iA8i04Icp+61KRXxFdha22670NJopsZCIjhC3SnjPRKrQ=="
+    },
     "tty-browserify": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
@@ -11415,9 +12441,9 @@
       }
     },
     "vue": {
-      "version": "2.5.15",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.15.tgz",
-      "integrity": "sha512-uUcDI147VCQYA/9AqoEECddWdTQgrhnwAd6KDsl0pF1hiLpxqaYqIgArhnegU+QZ18DQrKvZNcR3x2QM1iaroQ=="
+      "version": "2.5.16",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.16.tgz",
+      "integrity": "sha512-/ffmsiVuPC8PsWcFkZngdpas19ABm5mh2wA7iDqcltyCTwlgZjHGeJYOXkBMo422iPwIcviOtrTCUpSfXmToLQ=="
     },
     "vue-hot-reload-api": {
       "version": "2.3.0",
@@ -11462,9 +12488,9 @@
       }
     },
     "vue-template-compiler": {
-      "version": "2.5.15",
-      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.5.15.tgz",
-      "integrity": "sha512-v3GRVovW8fWO01SAJ+1MbdzbCN+hVBusoqUOBE5FR9dVMGo3p/WDO2gRS/+gEgAALtL7i5pxi+V2l6EauM3XDA==",
+      "version": "2.5.16",
+      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.5.16.tgz",
+      "integrity": "sha512-ZbuhCcF/hTYmldoUOVcu2fcbeSAZnfzwDskGduOrnjBiIWHgELAd+R8nAtX80aZkceWDKGQ6N9/0/EUpt+l22A==",
       "dev": true,
       "requires": {
         "de-indent": "1.0.2",
@@ -11478,9 +12504,9 @@
       "dev": true
     },
     "vue2-google-maps": {
-      "version": "0.8.11",
-      "resolved": "https://registry.npmjs.org/vue2-google-maps/-/vue2-google-maps-0.8.11.tgz",
-      "integrity": "sha512-dK8Ekjc2MZN7Yc60MhXu5+Kj5ItruSP+jvwzF5+d32UpTV06g5aLgmHs4riv9Kfpc4kRTQMalDaYHUFS0NxZ7g==",
+      "version": "0.8.12",
+      "resolved": "https://registry.npmjs.org/vue2-google-maps/-/vue2-google-maps-0.8.12.tgz",
+      "integrity": "sha512-tMyn+3X0ekAAccuHzLho7/gJGZDzQ+1CQy5FFfcDIc18wPdcDBKOAfBhqvbebTkfZeURZ7b61D+pN2fbdOvyuw==",
       "requires": {
         "babel-runtime": "5.8.38",
         "marker-clusterer-plus": "2.1.4"
@@ -11501,10 +12527,20 @@
         }
       }
     },
+    "vuefire": {
+      "version": "2.0.0-alpha.9",
+      "resolved": "https://registry.npmjs.org/vuefire/-/vuefire-2.0.0-alpha.9.tgz",
+      "integrity": "sha512-+u8NyuG7/w7O53kE88LwWchBDOOZOCPFM+ucNZeh8JYO24ybHw7OVnaE/jcFz2vYjhQ9iovOKDX3f6+d1Gm0Wg=="
+    },
     "vuetify": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-1.0.6.tgz",
-      "integrity": "sha512-utUF9z0nlc8Aw33ytYCBc8fUzVbbUVGy/ejgHEuRAh81DE1eQwsyGkRIWq/DOT4JSXJPrkId2Nk/SSNbP+yoEQ=="
+      "version": "1.0.17",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-1.0.17.tgz",
+      "integrity": "sha512-Tlvb/9mCQEpUJvq2Y7VyXqoxpl+Of93DRwQKlvrvLCYp6wxLqUgMN08poXR6wJt7c+uSFK2BPhXzggnms3Gz8w=="
+    },
+    "vuex": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.0.1.tgz",
+      "integrity": "sha512-wLoqz0B7DSZtgbWL1ShIBBCjv22GV5U+vcBFox658g6V0s4wZV9P4YjCNyoHSyIBpj1f29JBoNQIqD82cR4O3w=="
     },
     "watchpack": {
       "version": "1.5.0",
@@ -11659,6 +12695,25 @@
         "source-map": "0.6.1"
       }
     },
+    "websocket-driver": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.0.tgz",
+      "integrity": "sha1-DK+dLXVdk67gSdS90NP+LMoqJOs=",
+      "requires": {
+        "http-parser-js": "0.4.11",
+        "websocket-extensions": "0.1.3"
+      }
+    },
+    "websocket-extensions": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.3.tgz",
+      "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg=="
+    },
+    "whatwg-fetch": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz",
+      "integrity": "sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng=="
+    },
     "whet.extend": {
       "version": "0.9.9",
       "resolved": "https://registry.npmjs.org/whet.extend/-/whet.extend-0.9.9.tgz",
@@ -11705,7 +12760,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
       "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
-      "dev": true,
       "requires": {
         "string-width": "1.0.2",
         "strip-ansi": "3.0.1"
@@ -11715,7 +12769,6 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-          "dev": true,
           "requires": {
             "number-is-nan": "1.0.1"
           }
@@ -11724,7 +12777,6 @@
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-          "dev": true,
           "requires": {
             "code-point-at": "1.1.0",
             "is-fullwidth-code-point": "1.0.0",
@@ -11736,8 +12788,7 @@
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-      "dev": true
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
     },
     "write": {
       "version": "0.2.1",
@@ -11781,6 +12832,11 @@
       "integrity": "sha1-ZGV4SKIP/F31g6Qq2KJ3tFErvE0=",
       "dev": true
     },
+    "xmlhttprequest": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz",
+      "integrity": "sha1-Z/4HXFwk/vOfnWX197f+dRcZaPw="
+    },
     "xtend": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
diff --git a/package.json b/package.json
index 63d4392..bcb6057 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,7 @@
     "url-loader": "^0.6.2",
     "vue-loader": "^13.3.0",
     "vue-style-loader": "^3.0.3",
-    "vue-template-compiler": "^2.5.2",
+    "vue-template-compiler": "^2.5.16",
     "webpack": "^3.7.1",
     "webpack-bundle-analyzer": "^2.9.0",
     "webpack-dev-middleware": "^1.12.0",
diff --git a/src/views/Form/index.vue b/src/views/Form/index.vue
index e491fcd..fadbcb9 100644
--- a/src/views/Form/index.vue
+++ b/src/views/Form/index.vue
@@ -1,401 +1,1666 @@
-<template>
-  <v-app>
-    <!-- Toolbar -->
-    <v-toolbar 
-      color="light-green darken-2" 
-      dark 
-      fixed
-      clipped-left
-      app
-    >
-      <!-- <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon> -->
-      <v-btn icon class="hidden-xs-only" @click.stop="goBack()">
-        <v-icon>arrow_back</v-icon>
-      </v-btn>
-      <v-toolbar-title>Grade X Inspection</v-toolbar-title>
-    </v-toolbar>
-
-    <!-- Store dialog -->
-    <v-dialog v-model="confirm_dialog" max-width="500px">
-      <v-card>
-        <v-toolbar color="light-blue" dark>
-          <v-toolbar-title>Save and Exit</v-toolbar-title>
-          <v-spacer></v-spacer>
-          <v-btn icon @click.stop="confirm_dialog = false">
-            <v-icon>close</v-icon>
-          </v-btn>
-        </v-toolbar>
-        <v-list three-line class="pa-0">
-          <v-list-tile>
-            <v-list-tile-content @click.stop="markStatus('complete')">
-              <v-list-tile-title>{{ dialog_items[0].title }}</v-list-tile-title>
-              <v-list-tile-sub-title>{{ dialog_items[0].subtitle }}</v-list-tile-sub-title>
-            </v-list-tile-content>
-          </v-list-tile>
-          <v-divider></v-divider>
-          <v-list-tile>
-            <v-list-tile-content @click.stop="markStatus('incomplete')">
-              <v-list-tile-title>{{ dialog_items[1].title }}</v-list-tile-title>
-              <v-list-tile-sub-title>{{ dialog_items[1].subtitle }}</v-list-tile-sub-title>
-            </v-list-tile-content>
-          </v-list-tile>
-        </v-list>
-      </v-card>
-    </v-dialog> 
-
-    <!-- Left Panel: navigation drawer -->
-    <v-navigation-drawer 
-      id="crosslist"
-      fixed
-      clipped
-      app
-      v-model="drawer"
-      mobile-break-point=800
-    >
-      <!-- Site Info -->
-      <v-card color="blue-grey lighten-5" id="crossing-info">
-        <v-card-title primary-title>
-          <div>
-            <div class="headline"><strong>Crossing ID: </strong>{{ crossing_info.id }}</div>
-            <div class="info-text"><strong>Type: </strong>{{ crossing_info.type }}</div>
-            <div class="info-text"><strong>Region: </strong>{{ crossing_info.region + ' - ' + crossing_info.subdivision }}</div>
-            <div class="info-text"><strong>Railway: </strong>{{ crossing_info.railway }}</div>
-            <div class="info-text"><strong>Address: </strong>{{crossing_info.address }}</div>
-            <div class="info-text"><strong>Last Inspect Date: </strong>{{crossing_info.last_inspect_date }}</div>
-            <div class="info-text" v-if="crossing_info.last_inspector !== null"
-            ><strong>Last Inspector: </strong>{{crossing_info.last_inspector }}</div>
-          </div>
-        </v-card-title>
-        <!-- <v-btn color="info">Overview</v-btn> -->
-        <v-btn large color="success" @click.native.stop="confirm_dialog = true">Finish Task</v-btn>
-        <div>
-          <v-progress-linear id="progress-bar" :value="answer_number / question_list.length * 100" height="8" color="teal"></v-progress-linear>
-          <div>{{ answer_number +'/' + question_list.length }}</div>
-        </div>
-      </v-card>
-      
-      <v-btn :color="getColor(question, index)" 
-        :outline="question.answer==null && current_question != index" 
-        fab 
-        small 
-        :dark="question.answer!=null" 
-        v-for="(question, index) in question_list" 
-        :key="index" 
-        @click.stop="selectQuestion(index)"
-      >
-        {{ question.id }}
-      </v-btn>
-    </v-navigation-drawer>
-
-    <!-- Content: Form List -->
-    <v-content>
-      <v-container fluid>
-        <v-layout>
-          <transition :name="transition" mode="out-in">
-            <v-card id="right-panel" class="pa-3 text-xs-center text-sm-center" :key="current_question">
-              <!-- <v-tabs
-                slider-color="light-green darken-2"
-                fixed-tabs
-              >
-                <v-tab v-for="item in tabs_text" :key="item.name" ripple>{{ item.name }}</v-tab>
-              </v-tabs> -->
-              
-              <!-- dialog button -->
-              <!-- <v-layout row justify-center>
-                <v-btn color="primary" dark @click.native.stop="question_dialog = true">Open Dialog</v-btn>
-                <v-dialog v-model="question_dialog" max-width="650">
-                  <v-card>
-                    <v-card-title class="headline">Select Question</v-card-title>
-                    <v-card-text>Click on the question you want to jump to:</v-card-text>
-                    <v-btn :color="getColor(question, index)" fab small :dark="question.answer!=null" v-for="(question, index) in question_list" :key="index" @click="selectQuestion(index)">
-                      {{ question.id }}
-                    </v-btn>
-                    <v-card-actions>
-                      <v-spacer></v-spacer>
-                      <v-btn color="green darken-1" flat="flat" @click.native="question_dialog = false">Confirm</v-btn>
-                    </v-card-actions>
-                  </v-card>
-                </v-dialog>
-              </v-layout> -->
-
-              <!-- question details -->
-              <div id="question-detail">
-                <div class="headline">
-                  <strong>Question ID: </strong>
-                  {{ question_list[current_question].id + ' (' + (current_question + 1) +'/' + question_list.length + ')'}}
-                </div>
-                <hr>
-                <div class="question-text mt-3">{{ question_list[current_question].text }}</div>
-              </div>
-              <div v-if="question_list[current_question].boolean == null">
-                <v-layout row>
-                  <v-flex xs4 sm4>
-                    <v-checkbox v-model="question_list[current_question].answer" value="ans1" label= "NC CA Required" ></v-checkbox>                              
-                  </v-flex>
-                  <v-flex xs4 sm4>
-                    <v-checkbox v-model="question_list[current_question].answer" value="ans2" label= "NC CA Taken"></v-checkbox>                              
-                  </v-flex>
-                  <v-flex xs4 sm4>
-                    <v-checkbox v-model="question_list[current_question].answer" value="ans3" label= "C CA Required" ></v-checkbox>                              
-                  </v-flex>                       
-                </v-layout>
-                <v-layout row>
-                  <v-flex xs4 sm4>
-                    <v-checkbox v-model="question_list[current_question].answer" value="ans4" label= "C CA Taken"></v-checkbox>                              
-                  </v-flex>
-                  <v-flex xs6 sm6>
-                    <v-checkbox v-model="question_list[current_question].answer" value="ans5" label= "C CA Developing Issue" ></v-checkbox>                              
-                  </v-flex>                                                      
-                </v-layout>  
-                <v-layout row>
-                  <v-flex xs4 sm4>
-                    <v-checkbox v-model="question_list[current_question].answer" value="ans6" label= "No Issues Noted" ></v-checkbox>                              
-                  </v-flex> 
-                  <v-flex xs4 sm4>
-                    <v-checkbox v-model="question_list[current_question].answer" value="ans7" label= "Not Applicable"></v-checkbox>                              
-                  </v-flex>
-                  <v-flex xs4 sm4>
-                    <v-checkbox v-model="question_list[current_question].answer" value="ans8" label= "Not Inspected" ></v-checkbox>                              
-                  </v-flex>                                                        
-                </v-layout>
-              </div>
-              <v-layout row v-else justify-center>
-                <v-flex xs4 sm4>
-                  <v-checkbox v-model="question_list[current_question].answer" value="ans1" label= "Yes" ></v-checkbox>                              
-                </v-flex>
-                <v-flex xs4 sm4>
-                  <v-checkbox v-model="question_list[current_question].answer" value="ans2" label= "No" ></v-checkbox>                              
-                </v-flex>
-              </v-layout>
-
-              <v-text-field
-                name="input-1"
-                label="Notes about inspections"
-                textarea
-                v-model="question_list[current_question].note"
-              ></v-text-field>
-
-              <!-- question direct -->
-              <v-layout row justify-space-between>
-                <v-btn large color="blue-grey" class="white--text" :disabled="current_question == 0" @click="movePre()">
-                  <v-icon left dark>chevron_left</v-icon>
-                  Backward
-                </v-btn>
-                <v-btn large color="blue-grey" class="white--text" :disabled="current_question == question_list.length - 1" @click="moveNext()">
-                  Forward
-                  <v-icon right dark>chevron_right</v-icon>
-                </v-btn>
-              </v-layout>
-            </v-card>
-          </transition>
-        </v-layout>
-      </v-container>
-    </v-content>
-  </v-app>
-</template>
-
-<script>
-import db from '@/utils/firestore'
-
-export default {
-  name: 'Form',
-  data () {
-    return {
-      // left drawer
-      drawer: true,
-      crossing_info: {
-        id: null,
-        type: null,
-        region: '',
-        subdivision: '',
-        railway: null,
-        address: null
-      },
-      // pop-up dialog
-      confirm_dialog: null,
-      dialog_items: [
-        {
-          title: 'Mark As Completed',
-          subtitle:
-            'The End Time stamp will be added to the checklist information.'
-        },
-        {
-          title: 'End Inspection For Now',
-          subtitle:
-            'Your inspection work will be saved. You may continue later to complete the inspection.'
-        }
-      ],
-      // question panel
-      transition: 'slide-right',
-      current_question: 0,
-      question_dialog: false,
-      question_list: [],
-      current_list: []
-    }
-  },
-  methods: {
-    selectQuestion (n) {
-      this.current_question = n
-    },
-    goBack () {
-      this.$router.go(-1)
-    },
-    getColor (question, index) {
-      if (index === this.current_question) {
-        return 'primary'
-      } else if (question.answer === null && question.color !== null) {
-        return question.color
-      } else {
-        return 'success'
-      }
-    },
-    movePre () {
-      this.transition = 'slide-left'
-      this.current_question -= 1
-    },
-    moveNext () {
-      this.transition = 'slide-right'
-      this.current_question += 1
-    },
-    markStatus (status) {
-      let data = {}
-      this.question_list.forEach((element, index) => {
-        data[index] = {
-          answer: element.answer,
-          note: element.note
-        }
-      })
-      db.doc(`/inspection_history/${this.$store.state.uid}/current_list/${this.crossing_info.id}`)
-        .set({
-          type: this.crossing_info.type,
-          record: data
-        })
-      var found = this.current_list.findIndex((element) => {
-        return element.crossing_id === this.crossing_info.id
-      })
-      this.current_list[found].status = status
-      db.collection('inspection_list').doc(this.$store.state.uid).update({
-        current_list: this.current_list
-      })
-      this.confirm_dialog = false
-      this.$router.go(-1)
-    }
-  },
-  computed: {
-    answer_number: function () {
-      return this.question_list.filter(question => {
-        return question.answer != null
-      }).length
-    }
-  },
-  created: function () {
-    const self = this
-    const crossingId = this.$route.params.id
-    const crossingType = this.$route.params.type
-    if (crossingType.includes('AWS')) {
-      this.question_list = require('./aws.json')
-    } else if (crossingType.includes('WIS')) {
-      this.question_list = require('./wis.json')
-    } else if (crossingType.includes('WSS')) {
-      this.question_list = require('./wss.json')
-    } else {
-      this.question_list = require('./passive.json')
-    }
-    let record = {}
-    db.doc(`/inspection_history/${this.$store.state.uid}/current_list/${crossingId}`)
-      .get()
-      .then((doc) => {
-        if (doc.data() !== undefined) {
-          record = doc.data().record
-          this.question_list.forEach((element, index) => {
-            element.answer = record[index].answer
-            element.note = record[index].note
-          })
-        } else {
-          this.question_list.forEach((element, index) => {
-            element.answer = null
-            element.note = ''
-          })
-        }
-      })
-    // this.question_list
-    db.collection('crossing').where('crossing_id', '==', crossingId)
-      .get()
-      .then((querySnapshot) => {
-        querySnapshot.forEach(function (doc) {
-          const data = doc.data()
-          // console.log(data)
-          self.crossing_info = {
-            id: crossingId,
-            type: crossingType,
-            region: data.region,
-            subdivision: data.subdivision,
-            railway: data.railway,
-            address: data.address,
-            last_inspector: data.last_inspector,
-            last_inspect_date: data.last_inspect_date
-          }
-        })
-      })
-      .catch(function (error) {
-        console.log('Error getting documents: ', error)
-      })
-
-    db.collection('inspection_list').doc(this.$store.state.uid).get()
-      .then((doc) => {
-        if ('current_list' in doc.data()) {
-          this.current_list = doc.data().current_list
-        }
-      })
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-#right-panel {
-  width: 100%;
-}
-
-#crossing-info {
-  width: 90%;
-  margin-left: 5%;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  text-align: center;
-}
-
-.info-text {
-  font-size: 1.3em;
-}
-
-#question-detail {
-  height: 200px;
-  max-height: 200px;
-}
-
-#progress-bar {
-  width: 90%;
-  margin-left: 5%;
-}
-
-.question-text {
-  font-size: 1.5em;
-}
-
-/* slide-fade effect */
-.slide-left-enter-active, .slide-right-leave-active {
-  transition: all .3s;
-}
-.slide-left-leave-active, .slide-right-enter-active {
-  transition: all .3s;
-}
-.slide-left-enter, .slide-right-leave-to {
-  transform: translateX(-30px);
-  opacity: 0;
-}
-.slide-left-leave-to, .slide-right-enter{
-  /* transform: translateX(30px); */
-  opacity: 0;
-}
+<template>
+  <v-app>
+    <!-- Toolbar -->
+    <v-toolbar 
+      color="light-green darken-2" 
+      dark 
+      fixed
+      clipped-left
+      app
+    >
+      <!-- <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon> -->
+      <v-btn icon class="hidden-xs-only" @click.stop="goBack()">
+        <v-icon>arrow_back</v-icon>
+      </v-btn>
+      <v-toolbar-title>Grade X Inspection</v-toolbar-title>
+    </v-toolbar>
+
+    <!-- Store dialog -->
+    <v-dialog v-model="confirm_dialog" max-width="500px">
+      <v-card>
+        <v-toolbar color="light-blue" dark>
+          <v-toolbar-title>Save and Exit</v-toolbar-title>
+          <v-spacer></v-spacer>
+          <v-btn icon @click.stop="confirm_dialog = false">
+            <v-icon>close</v-icon>
+          </v-btn>
+        </v-toolbar>
+        <v-list three-line class="pa-0">
+          <v-list-tile>
+            <v-list-tile-content @click.stop="markStatus('complete')">
+              <v-list-tile-title>{{ dialog_items[0].title }}</v-list-tile-title>
+              <v-list-tile-sub-title>{{ dialog_items[0].subtitle }}</v-list-tile-sub-title>
+            </v-list-tile-content>
+          </v-list-tile>
+          <v-divider></v-divider>
+          <v-list-tile>
+            <v-list-tile-content @click.stop="markStatus('incomplete')">
+              <v-list-tile-title>{{ dialog_items[1].title }}</v-list-tile-title>
+              <v-list-tile-sub-title>{{ dialog_items[1].subtitle }}</v-list-tile-sub-title>
+            </v-list-tile-content>
+          </v-list-tile>
+        </v-list>
+      </v-card>
+    </v-dialog> 
+
+
+    <!-- Crossing Modification dialog -->
+    <v-dialog
+      v-model="info_dialog" 
+      fullscreen 
+      hide-overlay 
+      transition="dialog-bottom-transition"
+    >
+      <v-card>
+      <v-toolbar dark color="light-blue">
+        <v-btn icon @click.native="info_dialog = false" dark>
+          <v-icon>close</v-icon>
+        </v-btn>
+        <v-toolbar-title>Crossing ID: {{crossing.id}}</v-toolbar-title>
+        <v-spacer></v-spacer>
+        <v-toolbar-items>
+          <v-btn dark flat @click.native="info_dialog = false">Save</v-btn>
+        </v-toolbar-items>
+        <v-tabs
+          centered
+          color="light-blue"
+          slot="extension"
+          slider-color="yellow"
+          grow
+          v-model="inventory_tabs"
+        >
+          <v-tab href="#tab-1">General</v-tab>
+          <v-tab href="#tab-2">Crossing General</v-tab>
+          <v-tab href="#tab-3">Crossing Geometry</v-tab>
+          <v-tab href="#tab-4">Crossing Traffic</v-tab>
+          <v-tab href="#tab-5">Crossing TSB</v-tab>
+          <v-tab href="#tab-6">Crossing Info Sharing</v-tab>
+        </v-tabs>
+      </v-toolbar>
+      <v-tabs-items v-model="inventory_tabs">
+        <v-tab-item :id="'tab-1'">
+          <v-card>
+            <v-card-text>
+              <v-container grid-list-md>
+                <v-layout wrap>
+                  <v-flex xs2 sm2>
+                    <v-subheader>Long English</v-subheader>
+                  </v-flex>
+                  <v-flex xs10 sm10>
+                    <v-text-field :label=crossing.english single-line v-model="info_dia_tab1.english"></v-text-field>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader>Long French</v-subheader>
+                  </v-flex>
+                  <v-flex xs10 sm10>
+                    <v-text-field label="cannot decoding french" single-line v-model="info_dia_tab1.french"></v-text-field>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader>Status *</v-subheader>
+                  </v-flex>
+                  <v-flex xs10 sm10>
+                    <v-select :label=crossing.status :items="status_items" single-line v-model="info_dia_tab1.status"></v-select>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader>Type *</v-subheader>
+                  </v-flex>
+                  <v-flex xs10 sm10>
+                    <v-select :label=crossing.type :items="type_items" single-line v-model="info_dia_tab1.type"></v-select>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader>In Service *</v-subheader>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-menu
+                      ref="menu1"
+                      lazy
+                      :close-on-content-click="false"
+                      v-model="menu_inservice_from"
+                      :return-value.sync="info_dia_tab1.in_service_from"
+                    >
+                      <v-text-field
+                        slot="activator"
+                        single-line
+                        :label=crossing.in_service_from
+                        v-model="info_dia_tab1.in_service_from"
+                      ></v-text-field>
+                      <v-date-picker 
+                        v-model="info_dia_tab1.in_service_from"        
+                        @change="$refs.menu1.save(info_dia_tab1.in_service_from)"
+                        >
+                      </v-date-picker>
+                    </v-menu>          
+                    <!-- <v-text-field :label=crossing.in_service_from single-line v-model="info_dia_tab1.in_service_from"></v-text-field> -->
+                  </v-flex>
+                  <v-flex xs1 sm1>
+                    <v-subheader>To</v-subheader>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-menu
+                      ref="menu2"
+                      lazy
+                      :close-on-content-click="false"
+                      v-model="menu_inservice_to"
+                      :return-value.sync="info_dia_tab1.in_service_to"
+                    >
+                      <v-text-field
+                        slot="activator"
+                        single-line
+                        :label=crossing.in_service_to
+                        v-model="info_dia_tab1.in_service_to"
+                      ></v-text-field>
+                      <v-date-picker 
+                        v-model="info_dia_tab1.in_service_to" 
+                        @change="$refs.menu2.save(info_dia_tab1.in_service_to)"
+                        >
+                      </v-date-picker>
+                    </v-menu>   
+                    <!-- <v-text-field :label=crossing.in_service_to single-line v-model="info_dia_tab1.in_service_to"></v-text-field> -->
+                  </v-flex>
+                  <v-flex xs1 sm1>
+                    <v-subheader>Key Rt</v-subheader>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-text-field :label=crossing.key_rt single-line v-model="info_dia_tab1.key_rt"></v-text-field>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader>Railway </v-subheader>
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                    <v-text-field :label=crossing.railway single-line v-model="info_dia_tab1.railway"></v-text-field>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader>Jurisdiction *</v-subheader>
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                    <v-select :label=crossing.juris :items="juris_items" single-line v-model="info_dia_tab1.juris"></v-select>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader>Subdivision </v-subheader>
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                    <v-text-field :label=crossing.subdivision single-line v-model="info_dia_tab1.subdivision"></v-text-field>
+                  </v-flex>              
+                  <v-flex xs2 sm2>
+                    <v-subheader>Mile </v-subheader>
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                    <v-text-field :label=crossing.mile single-line v-model="info_dia_tab1.mile"></v-text-field>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader>Spur </v-subheader>
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                    <v-text-field :label=crossing.spur single-line v-model="info_dia_tab1.spur"></v-text-field>
+                  </v-flex>              
+                  <v-flex xs2 sm2>
+                    <v-subheader>Mile </v-subheader>
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                    <v-text-field :label=crossing.s_mile single-line v-model="info_dia_tab1.s_mile"></v-text-field>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader>Province * </v-subheader>
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                    <v-select :label=crossing.province :items="province_items" single-line v-model="info_dia_tab1.province"></v-select>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader>Region </v-subheader>
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                    <v-select :label=crossing.region :items="region_items" single-line v-model="info_dia_tab1.region"></v-select>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader>Latitude </v-subheader>
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                    <v-text-field :label=crossing.lat single-line v-model="info_dia_tab1.lat"></v-text-field>
+                  </v-flex>              
+                  <v-flex xs2 sm2>
+                    <v-subheader>Longitude </v-subheader>
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                    <v-text-field :label=crossing.lng single-line v-model="info_dia_tab1.lng"></v-text-field>
+                  </v-flex> 
+                  <v-flex xs2 sm2>
+                    <v-subheader>Nearest Muni </v-subheader>
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                    <v-text-field :label=crossing.nearest_muni single-line v-model="info_dia_tab1.nearest_muni"></v-text-field>
+                  </v-flex>               
+                  <v-flex xs2 sm2>
+                    <v-subheader>Road/Hwy #Eng</v-subheader>
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                    <v-text-field :label=crossing.road_hwy single-line v-model="info_dia_tab1.road_hwy"></v-text-field>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader>GEO Text </v-subheader>
+                  </v-flex>
+                  <v-flex xs10 sm10>
+                    <v-text-field :label=crossing.geo_text single-line v-model="info_dia_tab1.geo_text"></v-text-field>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader>Updatedby </v-subheader>
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                    <v-text-field :label=crossing.updated_by single-line v-model="info_dia_tab1.updated_by"></v-text-field>
+                  </v-flex>               
+                  <v-flex xs2 sm2>
+                    <v-subheader>on </v-subheader>
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                  <v-menu
+                      ref="menu3"
+                      lazy
+                      :close-on-content-click="false"
+                      v-model="menu_updated_on"
+                      :return-value.sync="info_dia_tab1.on"
+                    >
+                      <v-text-field
+                        slot="activator"
+                        single-line
+                        :label=crossing.updated_on
+                        v-model="info_dia_tab1.on"
+                      ></v-text-field>
+                      <v-date-picker 
+                        v-model="info_dia_tab1.on"        
+                        @change="$refs.menu3.save(info_dia_tab1.on)"
+                        >
+                      </v-date-picker>
+                    </v-menu> 
+                    <!-- <v-text-field :label=crossing.on single-line v-model="info_dia_tab1.on"></v-text-field> -->
+                  </v-flex>    
+                  <v-flex xs2 sm2>
+                    <v-subheader>Memo </v-subheader>
+                  </v-flex>
+                  <v-flex xs10 sm10>
+                    <v-text-field :label=crossing.memo single-line v-model="info_dia_tab1.memo"></v-text-field>
+                  </v-flex>    
+                </v-layout>
+              </v-container>
+              <small>*indicates required field</small>
+            </v-card-text>
+          </v-card>
+        </v-tab-item>
+        <v-tab-item :id="'tab-2'">
+          <v-card>
+            <v-card-text>
+              <v-container grid-list-md>
+                <v-layout wrap>
+                  <v-flex xs2 sm2>
+                    <v-subheader>Type/TC ID: *</v-subheader>
+                  </v-flex>
+                  <v-flex xs6 sm6>
+                    <v-select :label=crossing.status :items="status_items" single-line v-model="info_dia_tab2.typeID"></v-select>
+                  </v-flex>
+                  <v-flex xs1 sm1>
+                    <v-subheader>   / </v-subheader>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-text-field label="  " single-line v-model="info_dia_tab2.typeID_num"></v-text-field>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader>Access: </v-subheader>
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                    <v-select :label=crossing.status :items="status_items" single-line v-model="info_dia_tab2.access"></v-select>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader> Railway: </v-subheader>
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                    <v-select :label=crossing.status :items="status_items" single-line v-model="info_dia_tab2.railway"></v-select>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader>Jurisdiction: </v-subheader>
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                    <v-select :label=crossing.status :items="juris_items" single-line v-model="info_dia_tab2.juris"></v-select>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader> Prov.: </v-subheader>
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                    <v-select :label=crossing.status :items="province_items" single-line v-model="info_dia_tab2.province"></v-select>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader>Subdivision: *</v-subheader>
+                  </v-flex>
+                  <v-flex xs1 sm1>
+                    <v-text-field label="4.500" single-line v-model="info_dia_tab2.sub_t"></v-text-field>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-select :label=crossing.status :items="province_items" single-line v-model="info_dia_tab2.sub_s"></v-select>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader> Key Route: </v-subheader>
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                    <v-select :label=crossing.status :items="province_items" single-line v-model="info_dia_tab2.keyRoute"></v-select>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader>Spur: *</v-subheader>
+                  </v-flex>
+                  <v-flex xs1 sm1>
+                    <v-text-field label="*** " single-line v-model="info_dia_tab2.spur_t"></v-text-field>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-select :label=crossing.status :items="province_items" single-line v-model="info_dia_tab2.spur_s"></v-select>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader> GCR Appl.: </v-subheader>
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                    <v-select :label=crossing.status :items="province_items" single-line v-model="info_dia_tab2.gcr"></v-select>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader>Pedestrain Protection: </v-subheader>
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                    <v-select :label=crossing.status :items="status_items" single-line v-model="info_dia_tab2.pedesP"></v-select>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader> Whis. Cess.: </v-subheader>
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                    <v-select :label=crossing.status :items="status_items" single-line v-model="info_dia_tab2.whis"></v-select>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader>Passive Protection: </v-subheader>
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                    <v-select :label=crossing.status :items="status_items" single-line v-model="info_dia_tab2.passiveP"></v-select>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader> WC Prov.: </v-subheader>
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                    <v-text-field label="*** " single-line v-model="info_dia_tab2.wcProv"></v-text-field>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader>AWS Protection: </v-subheader>
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                    <v-select :label=crossing.status :items="status_items" single-line v-model="info_dia_tab2.aws"></v-select>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader> WC Auth.: </v-subheader>
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                    <v-text-field label="*** " single-line v-model="info_dia_tab2.wcAuth"></v-text-field>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader>Track Circuit: </v-subheader>
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                    <v-select :label=crossing.status :items="status_items" single-line v-model="info_dia_tab2.trackC"></v-select>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader> Rd. Class 1: </v-subheader>
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                    <v-select :label=crossing.status :items="status_items" single-line v-model="info_dia_tab2.rdClass1"></v-select>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader>LED Lights: </v-subheader>
+                  </v-flex>
+                  <v-flex xs1 sm1>
+                    <v-select :label=crossing.status :items="status_items" single-line v-model="info_dia_tab2.led"></v-select>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader>Data Recorder: </v-subheader>
+                  </v-flex>
+                  <v-flex xs1 sm1>
+                    <v-select :label=crossing.status :items="status_items" single-line v-model="info_dia_tab2.dataR"></v-select>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader> Rd. Type: </v-subheader>
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                    <v-select :label=crossing.status :items="status_items" single-line v-model="info_dia_tab2.rdT"></v-select>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader>Road Name/Hwy#: </v-subheader>
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                    <v-text-field label="Chemin Ste-Marie" single-line v-model="info_dia_tab2.rname"></v-text-field>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader> Rd. Class 2: </v-subheader>
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                    <v-select :label=crossing.status :items="status_items" single-line v-model="info_dia_tab2.rdClass2"></v-select>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader>Road Auth. #1: </v-subheader>
+                  </v-flex>
+                  <v-flex xs8 sm8>
+                    <v-text-field label="Saint-Polucanpe (QC)" single-line v-model="info_dia_tab2.rAuth1"></v-text-field>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-checkbox label="Private" single-line v-model="info_dia_tab2.private_1"></v-checkbox>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader>Road Auth. #2: </v-subheader>
+                  </v-flex>
+                  <v-flex xs8 sm8>
+                    <v-text-field label="Chemin Ste-Marie xxxx" single-line v-model="info_dia_tab2.rAuth2"></v-text-field>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-checkbox label="Private" single-line v-model="info_dia_tab2.private_2"></v-checkbox>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader> Exemption: </v-subheader>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-select :label=crossing.status :items="status_items" single-line v-model="info_dia_tab2.exemp_s"></v-select>
+                  </v-flex>
+                  <v-flex xs8 sm8>
+                    <v-text-field label="Chemin Ste-Marie" single-line v-model="info_dia_tab2.exemp_t"></v-text-field>
+                  </v-flex>    
+                  <v-flex xs2 sm2>
+                    <v-subheader>Last Inspected</v-subheader>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-menu
+                      ref="menu2_1"
+                      lazy
+                      :close-on-content-click="false"
+                      v-model="memu_last_inspected"
+                      :return-value.sync="info_dia_tab1.last_inspected"
+                    >
+                      <v-text-field
+                        slot="activator"
+                        single-line
+                        :label=crossing.in_service_from
+                        v-model="info_dia_tab2.last_inspected"
+                      ></v-text-field>
+                      <v-date-picker 
+                        v-model="info_dia_tab2.last_inspected"        
+                        @change="$refs.menu2_1.save(info_dia_tab2.last_inspected)"
+                        >
+                      </v-date-picker>
+                    </v-menu>          
+                    <!-- <v-text-field :label=crossing.in_service_from single-line v-model="info_dia_tab2.in_service_from"></v-text-field> -->
+                  </v-flex>
+                  <v-flex xs1 sm1>
+                    <v-subheader> By: </v-subheader>
+                  </v-flex>
+                  <v-flex xs6 sm6>
+                    <v-text-field label=" Shuangsho" single-line v-model="info_dia_tab2.by_inspetec"></v-text-field>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader>Last Comp.A Insp</v-subheader>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-menu
+                      ref="menu2_2"
+                      lazy
+                      :close-on-content-click="false"
+                      v-model="menu_last_comp"
+                      :return-value.sync="info_dia_tab2.last_comp"
+                    >
+                      <v-text-field
+                        slot="activator"
+                        single-line
+                        :label=crossing.in_service_from
+                        v-model="info_dia_tab2.last_comp"
+                      ></v-text-field>
+                      <v-date-picker 
+                        v-model="info_dia_tab2.last_comp"        
+                        @change="$refs.menu2_2.save(info_dia_tab2.last_comp)"
+                        >
+                      </v-date-picker>
+                    </v-menu>          
+                    <!-- <v-text-field :label=crossing.in_service_from single-line v-model="info_dia_tab2.in_service_from"></v-text-field> -->
+                  </v-flex>
+                  <v-flex xs1 sm1>
+                    <v-subheader>By: </v-subheader>
+                  </v-flex>
+                  <v-flex xs6 sm6>
+                    <v-text-field label=" Shuangsho" single-line v-model="info_dia_tab2.by_comp"></v-text-field>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-subheader>In Service From</v-subheader>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-menu
+                      ref="menu2_3"
+                      lazy
+                      :close-on-content-click="false"
+                      v-model="menu_inservice_from_tab2"
+                      :return-value.sync="info_dia_tab1.in_service_from"
+                    >
+                      <v-text-field
+                        slot="activator"
+                        single-line
+                        :label=crossing.in_service_from
+                        v-model="info_dia_tab1.in_service_from"
+                      ></v-text-field>
+                      <v-date-picker 
+                        v-model="info_dia_tab1.in_service_from"        
+                        @change="$refs.menu2_3.save(info_dia_tab1.in_service_from)"
+                        >
+                      </v-date-picker>
+                    </v-menu>          
+                    <!-- <v-text-field :label=crossing.in_service_from single-line v-model="info_dia_tab1.in_service_from"></v-text-field> -->
+                  </v-flex>
+                  <v-flex xs1 sm1>
+                    <v-subheader>To</v-subheader>
+                  </v-flex>
+                  <v-flex xs2 sm2>
+                    <v-menu
+                      ref="menu2_4"
+                      lazy
+                      :close-on-content-click="false"
+                      v-model="menu_inservice_to_tab2"
+                      :return-value.sync="info_dia_tab1.in_service_to"
+                    >
+                      <v-text-field
+                        slot="activator"
+                        single-line
+                        :label=crossing.in_service_to
+                        v-model="info_dia_tab1.in_service_to"
+                      ></v-text-field>
+                      <v-date-picker 
+                        v-model="info_dia_tab1.in_service_to" 
+                        @change="$refs.menu2_4.save(info_dia_tab1.in_service_to)"
+                        >
+                      </v-date-picker>
+                    </v-menu>   
+                    <!-- <v-text-field :label=crossing.in_service_to single-line v-model="info_dia_tab1.in_service_to"></v-text-field> -->
+                  </v-flex>              
+                  <v-flex xs1 sm1>
+                    <v-subheader>Status: </v-subheader>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-select :label=crossing.status :items="status_items" single-line v-model="info_dia_tab2.status_s"></v-select>
+                  </v-flex>
+                </v-layout>
+              </v-container>
+              <small>*indicates required field</small>
+            </v-card-text>
+          </v-card>
+        </v-tab-item>
+        <v-tab-item :id="'tab-3'">
+          <v-card>
+            <v-card-text>
+              <v-container grid-list-md>
+                <v-layout wrap>
+                  <v-flex xs3 sm3>
+                    <v-subheader>#Track: </v-subheader>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-text-field label="1" single-line v-model="info_dia_tab3.track"></v-text-field>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-subheader>Rail Approach: </v-subheader>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-select :label=crossing.status :items="status_items" single-line v-model="info_dia_tab3.rail_app"></v-select>
+                  </v-flex>  
+                  <v-flex xs3 sm3>
+                    <v-subheader>#Lanes: </v-subheader>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-text-field label="2" single-line v-model="info_dia_tab3.lanes"></v-text-field>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-subheader>Raod Approach: </v-subheader>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-select :label=crossing.status :items="status_items" single-line v-model="info_dia_tab3.road_app"></v-select>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-subheader>Sildewalks(SW): </v-subheader>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-select :label=crossing.status :items="status_items" single-line v-model="info_dia_tab3.sw"></v-select>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-subheader>Approach Surface: </v-subheader>
+                  </v-flex>
+                  <v-flex xs1 sm1>
+                    <v-select :label=crossing.status :items="status_items" single-line v-model="info_dia_tab3.aSur1"></v-select>
+                  </v-flex>     
+                  <v-flex xs1 sm1>
+                  </v-flex>                    
+                  <v-flex xs1 sm1>
+                    <v-select :label=crossing.status :items="status_items" single-line v-model="info_dia_tab3.aSur2"></v-select>
+                  </v-flex> 
+                  <v-flex xs3 sm3>
+                    <v-subheader>SW for Assistive Dev.: </v-subheader>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-select :label=crossing.status :items="status_items" single-line v-model="info_dia_tab3.swAD"></v-select>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-subheader>Gradient SSD (Percentage): </v-subheader>
+                  </v-flex>
+                  <v-flex xs1 sm1>
+                    <v-text-field label="0.00" single-line v-model="info_dia_tab3.ssd1"></v-text-field>
+                  </v-flex>     
+                  <v-flex xs1 sm1>
+                  </v-flex>                    
+                  <v-flex xs1 sm1>
+                    <v-text-field label="200.00" single-line v-model="info_dia_tab3.ssd2"></v-text-field>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-subheader>Area Lighting: </v-subheader>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-select :label=crossing.status :items="status_items" single-line v-model="info_dia_tab3.al"></v-select>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-subheader>Gradient Stopped (Percentage): </v-subheader>
+                  </v-flex>
+                  <v-flex xs1 sm1>
+                    <v-text-field label="__" single-line v-model="info_dia_tab3.gs1"></v-text-field>
+                  </v-flex>     
+                  <v-flex xs1 sm1>
+                  </v-flex>                    
+                  <v-flex xs1 sm1>
+                    <v-text-field label="__" single-line v-model="info_dia_tab3.gs2"></v-text-field>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-subheader>Track Type: </v-subheader>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-select :label=crossing.status :items="status_items" single-line v-model="info_dia_tab3.trackType"></v-select>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-subheader>DSSD (Meters): </v-subheader>
+                  </v-flex>
+                  <v-flex xs1 sm1>
+                    <v-text-field label="__" single-line v-model="info_dia_tab3.dssd1"></v-text-field>
+                  </v-flex>     
+                  <v-flex xs1 sm1>
+                  </v-flex>                    
+                  <v-flex xs1 sm1>
+                    <v-text-field label="__" single-line v-model="info_dia_tab3.dssd2"></v-text-field>
+                  </v-flex>        
+                  <v-flex xs3 sm3>
+                    <v-subheader>Incr. Mile Direct.: </v-subheader>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-select :label=crossing.status :items="status_items" single-line v-model="info_dia_tab3.incrDirec"></v-select>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-subheader>DStoppped (Meters): </v-subheader>
+                  </v-flex>
+                  <v-flex xs1 sm1>
+                    <v-text-field label="__" single-line v-model="info_dia_tab3.dstop1"></v-text-field>
+                  </v-flex>     
+                  <v-flex xs1 sm1>
+                  </v-flex>                    
+                  <v-flex xs1 sm1>
+                    <v-text-field label="__" single-line v-model="info_dia_tab3.dstop2"></v-text-field>
+                  </v-flex>      
+                  <v-flex xs3 sm3>
+                    <v-subheader>Track Angle (Degree): </v-subheader>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-text-field label="80/00" single-line v-model="info_dia_tab3.trackAngle"></v-text-field>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-subheader>Departure (Seconds): </v-subheader>
+                  </v-flex>
+                  <v-flex xs1 sm1>
+                    <v-text-field label="__" single-line v-model="info_dia_tab3.depart1"></v-text-field>
+                  </v-flex>     
+                  <v-flex xs1 sm1>
+                  </v-flex>                    
+                  <v-flex xs1 sm1>
+                    <v-text-field label="__" single-line v-model="info_dia_tab3.depart2"></v-text-field>
+                  </v-flex>   
+                  <v-flex xs3 sm3>
+                    <v-subheader>Prepare to Stop Sign: </v-subheader>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-select :label=crossing.status :items="status_items" single-line v-model="info_dia_tab3.prepareStop"></v-select>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-subheader>Advance Activation (Seconds): </v-subheader>
+                  </v-flex>
+                  <v-flex xs1 sm1>
+                    <v-text-field label="__" single-line v-model="info_dia_tab3.aActivation1"></v-text-field>
+                  </v-flex>     
+                  <v-flex xs1 sm1>
+                  </v-flex>                    
+                  <v-flex xs1 sm1>
+                    <v-text-field label="__" single-line v-model="info_dia_tab3.aActivation2"></v-text-field>
+                  </v-flex>      
+                  <v-flex xs3 sm3>
+                    <v-subheader>Intercon. Traffic Signal: </v-subheader>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-select :label=crossing.status :items="status_items" single-line v-model="info_dia_tab3.intercon"></v-select>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-subheader>Preemption Time (Seconds): </v-subheader>
+                  </v-flex>
+                  <v-flex xs1 sm1>
+                    <v-text-field label="__" single-line v-model="info_dia_tab3.preemp1"></v-text-field>
+                  </v-flex>     
+                  <v-flex xs1 sm1>
+                  </v-flex>                    
+                  <v-flex xs1 sm1>
+                    <v-text-field label="__" single-line v-model="info_dia_tab3.preemp2"></v-text-field>
+                  </v-flex>
+                  <v-flex xs6 sm6>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-subheader>Distance to Intersections (Meters): </v-subheader>
+                  </v-flex>
+                  <v-flex xs1 sm1>
+                    <v-text-field label="__" single-line v-model="info_dia_tab3.disIntersection1"></v-text-field>
+                  </v-flex>     
+                  <v-flex xs1 sm1>
+                  </v-flex>                    
+                  <v-flex xs1 sm1>
+                    <v-text-field label="__" single-line v-model="info_dia_tab3.disIntersection2"></v-text-field>
+                  </v-flex>   
+                  <v-flex xs6 sm6>
+                  </v-flex>
+                  <v-flex xs3 sm3>
+                    <v-subheader>Clearance Distance (Meters): </v-subheader>
+                  </v-flex>
+                  <v-flex xs1 sm1>
+                    <v-text-field label="__" single-line v-model="info_dia_tab3.clearDis"></v-text-field>
+                  </v-flex>     
+                  <v-flex xs1 sm1>
+                  </v-flex>                    
+                  <v-flex xs1 sm1>
+                  </v-flex>
+                  <v-flex xs12 sm12>
+                    Comment for Approach Direction Column #1:
+                  </v-flex> 
+                  <v-flex xs12 sm12>
+                    <v-text-field label="  " single-line v-model="info_dia_tab3.comment1"></v-text-field>
+                  </v-flex>                                                                                          
+                  <v-flex xs12 sm12>
+                    Comment for Approach Direction Column #2:
+                  </v-flex> 
+                  <v-flex xs12 sm12>
+                    <v-text-field label="  " single-line v-model="info_dia_tab3.comment2"></v-text-field>
+                  </v-flex> 
+                </v-layout>
+              </v-container>
+            </v-card-text>
+          </v-card>
+        </v-tab-item>
+        <v-tab-item :id="'tab-4'">
+          <v-card>
+            <v-card-title>
+              <div>
+                <h3 class="title-text">Train Traffic</h3>
+              </div>
+            </v-card-title>
+            <v-data-table
+              :headers="headers_train"
+              :items="train_traffic"
+              class="elevation-1"
+              :pagination.sync="pagination_train"
+            >
+              <template slot="items" slot-scope="props">
+                <td>{{ props.item.effective }}</td>
+                <td class="text-xs-right">{{ props.item.nTrains }}</td>
+                <td class="text-xs-right">{{ props.item.nPTrains }}</td>
+                <td class="text-xs-right">{{ props.item.nFTrains }}</td>
+                <td class="text-xs-right">{{ props.item.maxSpeedL }}</td>
+                <td class="text-xs-right">{{ props.item.maxSpeedR }}</td>
+                <td class="text-xs-right">{{ props.item.PmaxSpeedL }}</td>
+                <td class="text-xs-right">{{ props.item.PmaxSpeedR }}</td>
+                <td class="text-xs-right">{{ props.item.FmaxSpeedL }}</td>
+                <td class="text-xs-right">{{ props.item.FmaxSpeedR }}</td>
+                <td class="text-xs-right">{{ props.item.RSpeedL }}</td>
+                <td class="text-xs-right">{{ props.item.RSpeedR }}</td>
+                <td class="text-xs-right">{{ props.item.memo }}</td>
+              </template>
+              <template slot="no-data">
+                <v-alert :value="true" color="cyan darken-1" icon="warning">
+                  Sorry, nothing to display here :(
+                </v-alert>
+              </template>
+            </v-data-table>
+          </v-card>
+          <v-card>
+            <v-card-title>
+              <div>
+                <h3 class="title-text">Vehicle Traffic</h3>
+              </div>
+            </v-card-title>
+            <v-data-table
+              :headers="headers_vehicle"
+              :items="vehicle_traffic"
+              class="elevation-1"
+              :pagination.sync="pagination_vehicle"
+            >
+              <template slot="items" slot-scope="props">
+                <td>{{ props.item.effective }}</td>
+                <td class="text-xs-right">{{ props.item.nVehicles }}</td>
+                <td class="text-xs-right">{{ props.item.nPedestrains }}</td>
+                <td class="text-xs-right">{{ props.item.RPSpeedL }}</td>
+                <td class="text-xs-right">{{ props.item.RPSpeedR }}</td>
+                <td class="text-xs-right">{{ props.item.RCSpeedL }}</td>
+                <td class="text-xs-right">{{ props.item.RCSpeedR }}</td>
+                <td class="text-xs-right">{{ props.item.DVehicle }}</td>
+                <td class="text-xs-right">{{ props.item.ISource }}</td>
+                <td class="text-xs-right">{{ props.item.memo }}</td>
+                <td class="text-xs-right">{{ props.item.CPPerdestrain }}</td>
+                <td class="text-xs-right">{{ props.item.CPVehicle }}</td>
+              </template>
+              <template slot="no-data">
+                <v-alert :value="true" color="cyan darken-1" icon="warning">
+                  Sorry, nothing to display here :(
+                </v-alert>
+              </template>
+            </v-data-table>            
+          </v-card>
+        </v-tab-item>
+        <v-tab-item :id="'tab-5'">
+          <v-card>
+            <v-card-title>
+              <div>
+                <h3 class="title-text">Vehicle / Pedestrain Accidents</h3>
+              </div>
+            </v-card-title>
+            <v-data-table
+              :headers="headers_accident"
+              :items="vpAccident"
+              class="elevation-1"
+              :pagination.sync="pagination_accident"
+            >
+              <template slot="items" slot-scope="props">
+                <td>{{ props.item.occurNum }}</td>
+                <td class="text-xs-right">{{ props.item.occurYear }}</td>
+                <td class="text-xs-right">{{ props.item.occurDate }}</td>
+                <td class="text-xs-right">{{ props.item.occurTime }}</td>
+                <td class="text-xs-right">{{ props.item.occurType }}</td>
+                <td class="text-xs-right">{{ props.item.occurIncType }}</td>
+                <td class="text-xs-right">{{ props.item.operator1 }}</td>
+                <td class="text-xs-right">{{ props.item.operator2 }}</td>
+                <td class="text-xs-right">{{ props.item.train1 }}</td>
+                <td class="text-xs-right">{{ props.item.train2 }}</td>
+                <td class="text-xs-right">{{ props.item.involvedTrain }}</td>
+                <td class="text-xs-right">{{ props.item.involvedCars }}</td>
+                <td class="text-xs-right">{{ props.item.involvedDCars }}</td>
+                <td class="text-xs-right">{{ props.item.nearestTown }}</td>
+                <td class="text-xs-right">{{ props.item.trackType }}</td>
+                <td class="text-xs-right">{{ props.item.derail }}</td>
+                <td class="text-xs-right">{{ props.item.taInjuries }}</td>
+                <td class="text-xs-right">{{ props.item.taFatal }}</td>
+                <td class="text-xs-right">{{ props.item.taSerious }}</td>
+                <td class="text-xs-right">{{ props.item.taMinor }}</td>
+                <td class="text-xs-right">{{ props.item.tfEmp }}</td>
+                <td class="text-xs-right">{{ props.item.tfPass }}</td>
+                <td class="text-xs-right">{{ props.item.tfMoto }}</td>
+                <td class="text-xs-right">{{ props.item.tfMotoPass }}</td>
+                <td class="text-xs-right">{{ props.item.tfTrespass }}</td>
+                <td class="text-xs-right">{{ props.item.tfOther }}</td>
+                <td class="text-xs-right">{{ props.item.tsEmp }}</td>
+                <td class="text-xs-right">{{ props.item.tsPass }}</td>
+                <td class="text-xs-right">{{ props.item.tsMoto }}</td>
+                <td class="text-xs-right">{{ props.item.tsMotoPass }}</td>
+                <td class="text-xs-right">{{ props.item.tsTraspass }}</td>
+                <td class="text-xs-right">{{ props.item.tsOthers }}</td>
+                <td class="text-xs-right">{{ props.item.tmEmp }}</td>
+                <td class="text-xs-right">{{ props.item.tmPass }}</td>
+                <td class="text-xs-right">{{ props.item.tmMoto }}</td>
+                <td class="text-xs-right">{{ props.item.tmMotoPass }}</td>
+                <td class="text-xs-right">{{ props.item.tmTrespass }}</td>
+                <td class="text-xs-right">{{ props.item.tmOthers }}</td>
+                <td class="text-xs-right">{{ props.item.cause1 }}</td>
+                <td class="text-xs-right">{{ props.item.cause2 }}</td>
+                <td class="text-xs-right">{{ props.item.cause3 }}</td>
+                <td class="text-xs-right">{{ props.item.occuSummary }}</td>
+              </template>
+              <template slot="no-data">
+                <v-alert :value="true" color="cyan darken-1" icon="warning">
+                  Sorry, nothing to display here :(
+                </v-alert>
+              </template>
+            </v-data-table>
+          </v-card>
+        </v-tab-item>
+        <v-tab-item :id="'tab-6'">
+          <v-card>
+            <v-card-title>
+              <div>
+                <h3 class="title-text">Information Shring Details</h3>
+              </div>
+            </v-card-title>
+            <v-data-table
+              :headers="headers_info"
+              :items="infoSharing"
+              class="elevation-1"
+              :pagination.sync="pagination_info"
+            >
+              <template slot="items" slot-scope="props">
+                <td>{{ props.item.shareby }}</td>
+                <td class="text-xs-right">{{ props.item.lastUpdated }}</td>
+                <td class="text-xs-right">{{ props.item.subDate }}</td>
+                <td class="text-xs-right">{{ props.item.reason }}</td>
+                <td class="text-xs-right">{{ props.item.memo }}</td>
+              </template>
+              <template slot="no-data">
+                <v-alert :value="true" color="cyan darken-1" icon="warning">
+                  Sorry, nothing to display here :(
+                </v-alert>
+              </template>
+            </v-data-table>
+          </v-card>
+        </v-tab-item>
+      </v-tabs-items>
+    </v-card>
+    </v-dialog>
+
+    <!-- Left Panel: navigation drawer -->
+    <v-navigation-drawer 
+      id="crosslist"
+      fixed
+      clipped
+      app
+      v-model="drawer"
+      mobile-break-point=800
+    >
+      <!-- Site Info -->
+      <v-card color="blue-grey lighten-5" id="crossing-info">
+        <v-card-title primary-title>
+          <div>
+            <div class="headline"><strong>Crossing ID: </strong>{{ crossing_info.id }}</div>
+            <div class="info-text"><strong>Type: </strong>{{ crossing_info.type }}</div>
+            <div class="info-text"><strong>Region: </strong>{{ crossing_info.region + ' - ' + crossing_info.subdivision }}</div>
+            <div class="info-text"><strong>Railway: </strong>{{ crossing_info.railway }}</div>
+            <div class="info-text"><strong>Address: </strong>{{crossing_info.address }}</div>
+            <div class="info-text"><strong>Last Inspect Date: </strong>{{crossing_info.last_inspect_date }}</div>
+            <div class="info-text" v-if="crossing_info.last_inspector !== null"
+            ><strong>Last Inspector: </strong>{{crossing_info.last_inspector }}</div>
+          </div>
+        </v-card-title>
+        <!-- <v-btn color="info">Overview</v-btn> -->
+        <v-btn large color="success" @click.native.stop="confirm_dialog = true">Finish Task</v-btn>
+        <div>
+          <v-progress-linear id="progress-bar" :value="answer_number / question_list.length * 100" height="8" color="teal"></v-progress-linear>
+          <div>{{ answer_number +'/' + question_list.length }}</div>
+        </div>
+        <v-btn
+          absolute
+          dark
+          fab
+          bottom
+          right
+          small
+          color="blue-grey"
+          @click.native.stop="info_dialog = true"
+        >
+          <v-icon>create</v-icon>
+        </v-btn>
+      </v-card>
+      
+      <v-subheader>Questions:</v-subheader>
+      
+      <v-btn :color="getColor(question, index)" 
+        :outline="question.answer==null && current_question != index" 
+        fab 
+        small 
+        :dark="question.answer!=null" 
+        v-for="(question, index) in question_list" 
+        :key="index" 
+        @click.stop="selectQuestion(index)"
+      >
+        {{ question.id }}
+      </v-btn>
+    </v-navigation-drawer>
+
+    <!-- Content: Form List -->
+    <v-content>
+      <v-container fluid>
+        <v-layout>
+          <transition :name="transition" mode="out-in">
+            <v-card id="right-panel" class="pa-3 text-xs-center text-sm-center" :key="current_question">
+              <!-- <v-tabs
+                slider-color="light-green darken-2"
+                fixed-tabs
+              >
+                <v-tab v-for="item in tabs_text" :key="item.name" ripple>{{ item.name }}</v-tab>
+              </v-tabs> -->
+              
+              <!-- dialog button -->
+              <!-- <v-layout row justify-center>
+                <v-btn color="primary" dark @click.native.stop="question_dialog = true">Open Dialog</v-btn>
+                <v-dialog v-model="question_dialog" max-width="650">
+                  <v-card>
+                    <v-card-title class="headline">Select Question</v-card-title>
+                    <v-card-text>Click on the question you want to jump to:</v-card-text>
+                    <v-btn :color="getColor(question, index)" fab small :dark="question.answer!=null" v-for="(question, index) in question_list" :key="index" @click="selectQuestion(index)">
+                      {{ question.id }}
+                    </v-btn>
+                    <v-card-actions>
+                      <v-spacer></v-spacer>
+                      <v-btn color="green darken-1" flat="flat" @click.native="question_dialog = false">Confirm</v-btn>
+                    </v-card-actions>
+                  </v-card>
+                </v-dialog>
+              </v-layout> -->
+
+              <!-- question details -->
+              <div id="question-detail">
+                <div class="headline">
+                  <strong>Question ID: </strong>
+                  {{ question_list[current_question].id + ' (' + (current_question + 1) +'/' + question_list.length + ')'}}
+                </div>
+                <hr>
+                <div class="question-text mt-3">{{ question_list[current_question].text }}</div>
+              </div>
+              <div v-if="question_list[current_question].boolean == null">
+                <v-layout row>
+                  <v-flex xs4 sm4>
+                    <v-checkbox v-model="question_list[current_question].answer" value="ans1" label= "NC CA Required" ></v-checkbox>                              
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                    <v-checkbox v-model="question_list[current_question].answer" value="ans2" label= "NC CA Taken"></v-checkbox>                              
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                    <v-checkbox v-model="question_list[current_question].answer" value="ans3" label= "C CA Required" ></v-checkbox>                              
+                  </v-flex>                       
+                </v-layout>
+                <v-layout row>
+                  <v-flex xs4 sm4>
+                    <v-checkbox v-model="question_list[current_question].answer" value="ans4" label= "C CA Taken"></v-checkbox>                              
+                  </v-flex>
+                  <v-flex xs6 sm6>
+                    <v-checkbox v-model="question_list[current_question].answer" value="ans5" label= "C CA Developing Issue" ></v-checkbox>                              
+                  </v-flex>                                                      
+                </v-layout>  
+                <v-layout row>
+                  <v-flex xs4 sm4>
+                    <v-checkbox v-model="question_list[current_question].answer" value="ans6" label= "No Issues Noted" ></v-checkbox>                              
+                  </v-flex> 
+                  <v-flex xs4 sm4>
+                    <v-checkbox v-model="question_list[current_question].answer" value="ans7" label= "Not Applicable"></v-checkbox>                              
+                  </v-flex>
+                  <v-flex xs4 sm4>
+                    <v-checkbox v-model="question_list[current_question].answer" value="ans8" label= "Not Inspected" ></v-checkbox>                              
+                  </v-flex>                                                        
+                </v-layout>
+              </div>
+              <v-layout row v-else justify-center>
+                <v-flex xs4 sm4>
+                  <v-checkbox v-model="question_list[current_question].answer" value="ans1" label= "Yes" ></v-checkbox>                              
+                </v-flex>
+                <v-flex xs4 sm4>
+                  <v-checkbox v-model="question_list[current_question].answer" value="ans2" label= "No" ></v-checkbox>                              
+                </v-flex>
+              </v-layout>
+
+              <v-text-field
+                name="input-1"
+                label="Notes about inspections"
+                textarea
+                v-model="question_list[current_question].note"
+              ></v-text-field>
+
+              <!-- question direct -->
+              <v-layout row justify-space-between>
+                <v-btn large color="blue-grey" class="white--text" :disabled="current_question == 0" @click="movePre()">
+                  <v-icon left dark>chevron_left</v-icon>
+                  Backward
+                </v-btn>
+                <v-btn large color="blue-grey" class="white--text" :disabled="current_question == question_list.length - 1" @click="moveNext()">
+                  Forward
+                  <v-icon right dark>chevron_right</v-icon>
+                </v-btn>
+              </v-layout>
+            </v-card>
+          </transition>
+        </v-layout>
+      </v-container>
+    </v-content>
+  </v-app>
+</template>
+
+<script>
+import db from '@/utils/firestore'
+
+export default {
+  name: 'Form',
+  data () {
+    return {
+      // left drawer
+      drawer: true,
+      crossing_info: {
+        id: null,
+        type: null,
+        region: '',
+        subdivision: '',
+        railway: null,
+        address: null
+      },
+      // pop-up dialog
+      confirm_dialog: null,
+      dialog_items: [
+        {
+          title: 'Mark As Completed',
+          subtitle:
+            'The End Time stamp will be added to the checklist information.'
+        },
+        {
+          title: 'End Inspection For Now',
+          subtitle:
+            'Your inspection work will be saved. You may continue later to complete the inspection.'
+        }
+      ],
+
+      // pop-up dialog for modifying crossing info
+      crossing: {
+        id: '304562',
+        component: 'AWS',
+        last_inspect_date: '01-20-2017',
+        RSI_Name: 'Jeffrey Young',
+        RSI_Region: 'ONT',
+        railway_Maintainer: 'Richky Klein',
+        attendign_railway_emp: 'Jay Price',
+        address: '8731 Leuschke Roads East Audie',
+        english: 'AWS: Mile 0 Mcmillan Bloedel Co Spur  23.9, Cartier Subdivision (Ottawa Valley Rail Link), Hwy 17  (Sturgeon Falls), (Y), CrossingID: 20517',
+        french: '',
+        status: 'Active - Currently: In use by the Railway today',
+        type: 'Signals - AWS (Active Warning System)',
+        in_service_from: '2014-06-26',
+        in_service_to: 'NaN',
+        railway: 'Ottawa Valley Railway',
+        juris: 'Federal',
+        key_rt: 'Unknown',
+        subdivision: 'Cartier',
+        mile: 23.9,
+        spur: 'Mcmillan Bloedel Co',
+        s_mile: 0,
+        province: 'Ont.',
+        region: 'ONT',
+        longitude: -79.9371,
+        latitude: 46.3662,
+        road_hwy: 'Hwy 17  (Sturgeon Falls)',
+        nearest_muni: 'ON -Ministry of Transportation',
+        GEO_text: 'NaN',
+        updated_by: 'NaN',
+        updated_on: '2017-03-27',
+        memo: '20517'
+      },
+      info_dialog: null,
+      info_dia_tab1: {
+        english: '',
+        french: '',
+        status: null,
+        types: null,
+        inservice_from: false,
+        inservice_to: false,
+        railway: '',
+        juris: null,
+        key_rt: '',
+        subdivision: '',
+        mile: '',
+        spur: '',
+        s_mile: '',
+        region: null,
+        province: null,
+        lat: '',
+        lng: '',
+        nearest_muni: '',
+        road_hwy: '',
+        geo_text: '',
+        updatedby: '',
+        updated_on: false,
+        memo: ''
+      },
+      info_dia_tab2: {
+        typeID: null,
+        typeID_num: '',
+        access: null,
+        railyway: null,
+        juris: null,
+        prov: null,
+        sub_t: '',
+        sub_s: null,
+        keyRoute: null,
+        spur_t: '',
+        spur_s: null,
+        gcr: null,
+        pedesP: null,
+        whis: null,
+        passiveP: null,
+        wcProv: '',
+        aws: null,
+        wcAuth: '',
+        trackC: null,
+        rdClass1: null,
+        led: null,
+        dataR: null,
+        rdT: null,
+        rname: '',
+        rdClass2: null,
+        rAuth1: '',
+        private_1: '',
+        rAuth2: '',
+        private_2: '',
+        exemp_s: null,
+        exemp_t: '',
+        last_inspected: false,
+        by_inspetec: '',
+        last_comp: false,
+        by_comp: '',
+        status_s: null
+      },
+      info_dia_tab3: {
+        track: '',
+        rail_app: null,
+        lanes: '',
+        road_app: null,
+        sw: null,
+        aSur1: null,
+        aSur2: null,
+        swAD: null,
+        ssd1: '',
+        ssd2: '',
+        al: null,
+        gs1: '',
+        gs2: '',
+        trackType: null,
+        dssd1: '',
+        dssd2: '',
+        incrDirec: null,
+        dstop1: '',
+        dstop2: '',
+        trackAngle: '',
+        depart1: '',
+        depart2: '',
+        prepareStop: null,
+        aActivation1: '',
+        aActivation2: '',
+        intercon: null,
+        preemp1: '',
+        preemp2: '',
+        disIntersection1: '',
+        disIntersection2: '',
+        clearDis: '',
+        comment1: '',
+        comment2: ''
+      },
+      // info lists
+      status_items: [
+        'Active - Currently: In use by the Railway today',
+        'Inactive - Permanent: Change of ownership',
+        'Inactive - Permanent: Crossing road apprch removed',
+        'Inactive - Permanent: Railway will not use again',
+        'Inactive - Permanent: Track Abandoned',
+        'Inactive - Temporary: may be re-used'
+      ],
+      type_items: [
+        'Crossing (Passive)',
+        'Signals - AWS (Active Warning System)'
+      ],
+      juris_items: [
+        'Federal',
+        'Provincial'
+      ],
+      region_items: [
+        'ATL',
+        'ONT',
+        'PAC',
+        'PNR',
+        'QUE'
+      ],
+      province_items: [
+        'Alta.',
+        'B.C.',
+        'Man.',
+        'N.B.',
+        'N.L.',
+        'N.S.',
+        'N.W.T.',
+        'Ont.',
+        'Que.',
+        'Sask.',
+        'Y.T.'
+      ],
+      // date picker menu
+      menu_inservice_from: false,
+      menu_inservice_to: false,
+      menu_inservice_from_tab2: false,
+      menu_inservice_to_tab2: false,
+      menu_updated_on: false,
+      memu_last_inspected: false,
+      menu_last_comp: false,
+      inventory_tabs: null,
+      // question panel
+      transition: 'slide-right',
+      current_question: 0,
+      question_dialog: false,
+      question_list: [],
+      current_list: [],
+      headers_train: [
+        { text: 'Effective As Of', align: 'right', value: 'effective' },
+        { text: '# of Trains Per Day', align: 'center', value: 'nTrains' },
+        { text: '# of Pass Trains Per Day', align: 'center', value: 'nPTrains' },
+        { text: '# of Freight Trains Per Day', align: 'center', value: 'nFTrains' },
+        { text: 'Overall Maximum Speed (MPH) for Rail Approach from Left', value: 'maxSpeedL', align: 'center' },
+        { text: 'Overall Maximum Speed (MPH) for Rail Approach from Right', value: 'maxSpeedR', align: 'center' },
+        { text: 'Passengers Maximum Speed (MPH) for Rail Approach from Left', value: 'PmaxSpeedL', align: 'center' },
+        { text: 'Passengers Maximum Speed (MPH) for Rail Approach from Right', value: 'PmaxSpeedR', align: 'center' },
+        { text: 'Freight Maximum Speed (MPH) for Rail Approach from Left', value: 'FmaxSpeedL', align: 'center' },
+        { text: 'Freight Maximum Speed (MPH) for Rail Approach from Right', value: 'FmaxSpeedR', align: 'center' },
+        { text: 'Rail Design Speed (MPH) for Rail Approach from Left', value: 'RSpeedL', align: 'center' },
+        { text: 'Rail Design Speed (MPH) for Rail Approach from Right', value: 'RSpeedR', align: 'center' },
+        { text: 'Memo                   ', value: 'memo', align: 'center', sortable: false }
+      ],
+      pagination_train: {},
+      train_traffic: [
+        {
+          value: false,
+          effective: '2003/01/01',
+          nTrains: 16800.00,
+          nPTrains: 1200.00,
+          nFTrains: 800.00,
+          maxSpeedL: 120.00,
+          maxSpeedR: 120.00,
+          PmaxSpeedL: 90.00,
+          PmaxSpeedR: 90.00,
+          FmaxSpeedL: 80.00,
+          FmaxSpeedR: 80.00,
+          RSpeedL: 85.00,
+          RSpeedR: 85.00,
+          memo: 'good good'
+        },
+        {
+          value: false,
+          effective: '2003/01/02',
+          nTrains: 16800.00,
+          nPTrains: 1200.00,
+          nFTrains: 800.00,
+          maxSpeedL: 120.00,
+          maxSpeedR: 120.00,
+          PmaxSpeedL: 90.00,
+          PmaxSpeedR: 90.00,
+          FmaxSpeedL: 80.00,
+          FmaxSpeedR: 80.00,
+          RSpeedL: 85.00,
+          RSpeedR: 85.00,
+          memo: 'good good'
+        },
+        {
+          value: false,
+          effective: '2003/01/03',
+          nTrains: 16800.00,
+          nPTrains: 1200.00,
+          nFTrains: 800.00,
+          maxSpeedL: 120.00,
+          maxSpeedR: 120.00,
+          PmaxSpeedL: 90.00,
+          PmaxSpeedR: 90.00,
+          FmaxSpeedL: 80.00,
+          FmaxSpeedR: 80.00,
+          RSpeedL: 85.00,
+          RSpeedR: 85.00,
+          memo: 'good good'
+        }
+      ],
+      headers_vehicle: [
+        { text: 'Effective As Of', align: 'right', value: 'effective' },
+        { text: '# of Vehicles Per Day', align: 'center', value: 'nVehicles' },
+        { text: '# of Pedestrains Per Day', align: 'center', value: 'nPedestrains' },
+        { text: 'Road Posted/Unposted Speed (KPH) for Road Approach From Left', align: 'RPSpeedL', value: 'center' },
+        { text: 'Road Posted/Unposted Speed (KPH) for Road Approach From Right', value: 'RPSpeedR', align: 'center' },
+        { text: 'Road Crossing Design Speed (KPH) for Road Approach From Left', value: 'RCSpeedL', align: 'center' },
+        { text: 'Road Crossing Design Speed (KPH) for Road Approach From Right', value: 'RCSpeedR', align: 'center' },
+        { text: 'Design Vehicle', value: 'DVehicle', align: 'center' },
+        { text: 'Information Source', value: 'ISource', align: 'center' },
+        { text: 'Memo                   ', value: 'memo', align: 'center', sortable: false },
+        { text: 'Cross Product Daily Train by Perdestrain', value: 'CPPerdestrain', align: 'center' },
+        { text: 'Cross Product Daily Train by Vehicle', value: 'CPVehicle', align: 'center' }
+      ],
+      pagination_vehicle: {},
+      vehicle_traffic: [
+        {
+          value: false,
+          effective: '2003/02/01',
+          nVehicles: 16800.00,
+          nPedestrains: 1200.00,
+          RPSpeedL: 800.00,
+          RPSpeedR: 120.00,
+          RCSpeedL: 120.00,
+          RCSpeedR: 90.00,
+          DVehicle: 90.00,
+          ISource: 80.00,
+          memo: 'good good',
+          CPPerdestrain: 85.00,
+          CPVehicle: 85.00
+        }
+      ],
+      headers_accident: [
+        { text: 'Occurence #', align: 'center', value: 'occurNum' },
+        { text: 'Occurence Year', align: 'center', value: 'occurYear' },
+        { text: 'Occurence Date', align: 'center', value: 'occurDate' },
+        { text: 'Occurence Time', align: 'center', value: 'occurTime' },
+        { text: 'Occurence Type', align: 'center', value: 'occurType' },
+        { text: 'Occurence Acc. Inc. Type', align: 'center', value: 'occurIncType' },
+        { text: 'Train Operator #1', align: 'center', value: 'operator1' },
+        { text: 'Train Operator #2', align: 'center', value: 'operator2' },
+        { text: 'Train Type #1', align: 'center', value: 'train1' },
+        { text: 'Train Type #2', align: 'center', value: 'train2' },
+        { text: 'Involved # of Trains', align: 'center', value: 'involvedTrain' },
+        { text: 'Involved # of Cars', align: 'center', value: 'involvedCars' },
+        { text: 'Involved # of Dangerous Goods Cars', align: 'center', value: 'involvedDCars' },
+        { text: 'Nearest Town / City', align: 'center', value: 'nearestTown' },
+        { text: 'Track Type', align: 'center', value: 'trackType' },
+        { text: 'Derailment', align: 'center', value: 'derail' },
+        { text: 'Total All Injuries', align: 'center', value: 'taInjuries' },
+        { text: 'Total All Fatal', align: 'center', value: 'taFatal' },
+        { text: 'Total All Serious', align: 'center', value: 'taSerious' },
+        { text: 'Total All Minor', align: 'center', value: 'taMinor' },
+        { text: 'Total Fatal Employees', align: 'center', value: 'tfEmp' },
+        { text: 'Total Fatal Passengers', align: 'center', value: 'tfPass' },
+        { text: 'Total Fatal Motorists', align: 'center', value: 'tfMoto' },
+        { text: 'Total Fatal Motorist Passengers', align: 'center', value: 'tfMotoPass' },
+        { text: 'Total Fatal Trespassers', align: 'center', value: 'tfTrespass' },
+        { text: 'Total Fatal Others', align: 'center', value: 'tfOther' },
+        { text: 'Total Serious Employees', align: 'center', value: 'tsEmp' },
+        { text: 'Total Serious Passengers', align: 'center', value: 'tsPass' },
+        { text: 'Total Serious Motorists', align: 'center', value: 'tsMoto' },
+        { text: 'Total Serious Motorist Passengers', align: 'center', value: 'tsMotoPass' },
+        { text: 'Total Serious Trespassers', align: 'center', value: 'tsTraspass' },
+        { text: 'Total Serious Others', align: 'center', value: 'tsOthers' },
+        { text: 'Total Minor Employees', align: 'center', value: 'tmEmp' },
+        { text: 'Total Minor Passengers', align: 'center', value: 'tmPass' },
+        { text: 'Total Minor Motorists', align: 'center', value: 'tmMoto' },
+        { text: 'Total Minor Motorist Passengers', align: 'center', value: 'tmMotoPass' },
+        { text: 'Total Minor Trespassers', align: 'center', value: 'tmTrespass' },
+        { text: 'Total Minor Others', align: 'center', value: 'tmOthers' },
+        { text: 'Primary Cause Level 1', align: 'center', value: 'cause1' },
+        { text: 'Primary Cause Level 2', align: 'center', value: 'cause2' },
+        { text: 'Primary Cause Level 3', align: 'center', value: 'cause3' },
+        { text: 'Occurence Summary', align: 'center', value: 'occuSummary' }
+      ],
+      pagination_accident: {},
+      vpAccident: [
+
+      ],
+      headers_info: [
+        { text: 'Shared By', align: 'left', value: 'shareby' },
+        { text: 'Last Updated Date', align: 'left', value: 'lastUpdated' },
+        { text: 'Submission Date', align: 'left', value: 'subDate' },
+        { text: 'Shared Reason', align: 'left', value: 'reason' },
+        { text: 'Shared Memo', align: 'left', value: 'memo' }
+      ],
+      pagination_info: {},
+      infoSharing: [
+
+      ]
+    }
+  },
+  methods: {
+    selectQuestion (n) {
+      this.current_question = n
+    },
+    goBack () {
+      this.$router.go(-1)
+    },
+    getColor (question, index) {
+      if (index === this.current_question) {
+        return 'primary'
+      } else if (question.answer === null && question.color !== null) {
+        return question.color
+      } else {
+        return 'success'
+      }
+    },
+    movePre () {
+      this.transition = 'slide-left'
+      this.current_question -= 1
+    },
+    moveNext () {
+      this.transition = 'slide-right'
+      this.current_question += 1
+    },
+    markStatus (status) {
+      let data = {}
+      this.question_list.forEach((element, index) => {
+        data[index] = {
+          answer: element.answer,
+          note: element.note
+        }
+      })
+      db.doc(`/inspection_history/${this.$store.state.uid}/current_list/${this.crossing_info.id}`)
+        .set({
+          type: this.crossing_info.type,
+          record: data
+        })
+      var found = this.current_list.findIndex((element) => {
+        return element.crossing_id === this.crossing_info.id
+      })
+      this.current_list[found].status = status
+      db.collection('inspection_list').doc(this.$store.state.uid).update({
+        current_list: this.current_list
+      })
+      this.confirm_dialog = false
+      this.$router.go(-1)
+    }
+  },
+  computed: {
+    answer_number: function () {
+      return this.question_list.filter(question => {
+        return question.answer != null
+      }).length
+    }
+  },
+  created: function () {
+    const self = this
+    const crossingId = this.$route.params.id
+    const crossingType = this.$route.params.type
+    if (crossingType.includes('AWS')) {
+      this.question_list = require('./aws.json')
+    } else if (crossingType.includes('WIS')) {
+      this.question_list = require('./wis.json')
+    } else if (crossingType.includes('WSS')) {
+      this.question_list = require('./wss.json')
+    } else {
+      this.question_list = require('./passive.json')
+    }
+    let record = {}
+    db.doc(`/inspection_history/${this.$store.state.uid}/current_list/${crossingId}`)
+      .get()
+      .then((doc) => {
+        if (doc.data() !== undefined) {
+          record = doc.data().record
+          this.question_list.forEach((element, index) => {
+            element.answer = record[index].answer
+            element.note = record[index].note
+          })
+        } else {
+          this.question_list.forEach((element, index) => {
+            element.answer = null
+            element.note = ''
+          })
+        }
+      })
+    // this.question_list
+    db.collection('crossing').where('crossing_id', '==', crossingId)
+      .get()
+      .then((querySnapshot) => {
+        querySnapshot.forEach(function (doc) {
+          const data = doc.data()
+          // console.log(data)
+          self.crossing_info = {
+            id: crossingId,
+            type: crossingType,
+            region: data.region,
+            subdivision: data.subdivision,
+            railway: data.railway,
+            address: data.address,
+            last_inspector: data.last_inspector,
+            last_inspect_date: data.last_inspect_date
+          }
+        })
+      })
+      .catch(function (error) {
+        console.log('Error getting documents: ', error)
+      })
+
+    db.collection('inspection_list').doc(this.$store.state.uid).get()
+      .then((doc) => {
+        if ('current_list' in doc.data()) {
+          this.current_list = doc.data().current_list
+        }
+      })
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+#right-panel {
+  width: 100%;
+}
+
+#crossing-info {
+  width: 90%;
+  margin-left: 5%;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  text-align: center;
+}
+
+.info-text {
+  font-size: 1.3em;
+}
+
+#question-detail {
+  height: 200px;
+  max-height: 200px;
+}
+
+#progress-bar {
+  width: 90%;
+  margin-left: 5%;
+}
+
+.question-text {
+  font-size: 1.5em;
+}
+
+/* slide-fade effect */
+.slide-left-enter-active, .slide-right-leave-active {
+  transition: all .3s;
+}
+.slide-left-leave-active, .slide-right-enter-active {
+  transition: all .3s;
+}
+.slide-left-enter, .slide-right-leave-to {
+  transform: translateX(-30px);
+  opacity: 0;
+}
+.slide-left-leave-to, .slide-right-enter{
+  /* transform: translateX(30px); */
+  opacity: 0;
+}
 </style>
\ No newline at end of file