From 3770a4111a8d5b109366456fcb6e63b28dcfbe4a Mon Sep 17 00:00:00 2001
From: Torben Indorf <t.indorf@28apps.de>
Date: Sun, 9 Feb 2020 16:00:12 +0100
Subject: [PATCH] added some map stuff

added a few backend routes
---
 package-lock.json                | 223 ++++++++++++++++++++++++++-----
 package.json                     |  16 ++-
 public/index.html                |   6 +-
 src/App.vue                      |  62 ++++++---
 src/api/AreaRepository.ts        |  15 +++
 src/api/EntityBaseRepository.ts  |  69 ++++++++++
 src/api/RepositoryFactory.ts     |  16 ++-
 src/api/error/ApiError.ts        |  26 ++++
 src/main.ts                      |   4 +
 src/models/Area.ts               |  19 +++
 src/models/User.ts               |  22 +++
 src/plugins/defaultLight.ts      |  17 +++
 src/store/area.store.ts          |  42 ++++++
 src/store/auth.store.ts          |   5 +-
 src/store/global.store.ts        |  27 ++++
 src/store/store.ts               |  23 ++--
 src/views/AreaSelection.view.vue |  66 +++++++--
 src/views/Login.view.vue         |  59 ++++++--
 src/views/MapOverview.view.vue   |  96 ++++++++++++-
 tsconfig.json                    |   4 +-
 20 files changed, 718 insertions(+), 99 deletions(-)
 create mode 100644 src/api/AreaRepository.ts
 create mode 100644 src/api/EntityBaseRepository.ts
 create mode 100644 src/api/error/ApiError.ts
 create mode 100644 src/models/Area.ts
 create mode 100644 src/models/User.ts
 create mode 100644 src/plugins/defaultLight.ts
 create mode 100644 src/store/area.store.ts
 create mode 100644 src/store/global.store.ts

diff --git a/package-lock.json b/package-lock.json
index d211a1f..62ed1e2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -944,6 +944,7 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@capacitor/cli/-/cli-1.5.0.tgz",
       "integrity": "sha512-xd82ZM6WHuAJcsGJA/CLz/g/XWM69iwJ1hDhObu1dkjUSjKkuh4m0yCCRTtgwIonDDyedNrcysKkBi7j4o/VIA==",
+      "dev": true,
       "requires": {
         "chalk": "^2.3.0",
         "commander": "^2.12.2",
@@ -961,12 +962,14 @@
         "cli-spinners": {
           "version": "1.3.1",
           "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-1.3.1.tgz",
-          "integrity": "sha512-1QL4544moEsDVH9T/l6Cemov/37iv1RtoKf7NJ04A60+4MREXNfx/QvavbH6QoGdsD4N4Mwy49cmaINR/o2mdg=="
+          "integrity": "sha512-1QL4544moEsDVH9T/l6Cemov/37iv1RtoKf7NJ04A60+4MREXNfx/QvavbH6QoGdsD4N4Mwy49cmaINR/o2mdg==",
+          "dev": true
         },
         "fs-extra": {
           "version": "4.0.3",
           "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz",
           "integrity": "sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==",
+          "dev": true,
           "requires": {
             "graceful-fs": "^4.1.2",
             "jsonfile": "^4.0.0",
@@ -977,6 +980,7 @@
           "version": "6.3.1",
           "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-6.3.1.tgz",
           "integrity": "sha512-MmL624rfkFt4TG9y/Jvmt8vdmOo836U7Y0Hxr2aFk3RelZEGX4Igk0KabWrcaaZaTv9uzglOqWh1Vly+FAWAXA==",
+          "dev": true,
           "requires": {
             "ansi-escapes": "^3.2.0",
             "chalk": "^2.4.2",
@@ -997,6 +1001,7 @@
           "version": "1.4.0",
           "resolved": "https://registry.npmjs.org/ora/-/ora-1.4.0.tgz",
           "integrity": "sha512-iMK1DOQxzzh2MBlVsU42G80mnrvUhqsMh74phHtDlrcTZPK0pH6o7l7DRshK+0YsxDyEuaOkziVdvM3T0QTzpw==",
+          "dev": true,
           "requires": {
             "chalk": "^2.1.0",
             "cli-cursor": "^2.1.0",
@@ -1008,6 +1013,7 @@
           "version": "5.2.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
           "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
           "requires": {
             "ansi-regex": "^4.1.0"
           }
@@ -2051,7 +2057,8 @@
     "ansi-escapes": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz",
-      "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ=="
+      "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==",
+      "dev": true
     },
     "ansi-html": {
       "version": "0.0.7",
@@ -2062,12 +2069,14 @@
     "ansi-regex": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-      "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
+      "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+      "dev": true
     },
     "ansi-styles": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
       "requires": {
         "color-convert": "^1.9.0"
       }
@@ -2500,7 +2509,8 @@
     "base64-js": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.1.tgz",
-      "integrity": "sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g=="
+      "integrity": "sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g==",
+      "dev": true
     },
     "batch": {
       "version": "0.6.1",
@@ -3017,6 +3027,7 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
       "requires": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -3026,7 +3037,8 @@
     "chardet": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
-      "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA=="
+      "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
+      "dev": true
     },
     "check-types": {
       "version": "8.0.3",
@@ -3135,6 +3147,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
       "integrity": "sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=",
+      "dev": true,
       "requires": {
         "restore-cursor": "^2.0.0"
       }
@@ -3214,7 +3227,8 @@
     "cli-width": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz",
-      "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk="
+      "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=",
+      "dev": true
     },
     "clipboardy": {
       "version": "2.1.0",
@@ -3282,6 +3296,17 @@
       "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
       "dev": true
     },
+    "clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "dev": true,
+      "requires": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      }
+    },
     "coa": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
@@ -3323,6 +3348,7 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
       "requires": {
         "color-name": "1.1.3"
       }
@@ -3330,7 +3356,8 @@
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "dev": true
     },
     "color-string": {
       "version": "1.5.3",
@@ -3354,7 +3381,8 @@
     "commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true
     },
     "commondir": {
       "version": "1.0.1",
@@ -3365,7 +3393,8 @@
     "compare-versions": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-3.5.1.tgz",
-      "integrity": "sha512-9fGPIB7C6AyM18CJJBHt5EnCZDG3oiTJYy0NjfIAGjKpzv0tkxWko7TNQHF5ymqm7IH03tqmeuBxtvD+Izh6mg=="
+      "integrity": "sha512-9fGPIB7C6AyM18CJJBHt5EnCZDG3oiTJYy0NjfIAGjKpzv0tkxWko7TNQHF5ymqm7IH03tqmeuBxtvD+Izh6mg==",
+      "dev": true
     },
     "component-emitter": {
       "version": "1.3.0",
@@ -4553,7 +4582,8 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true
     },
     "eslint": {
       "version": "5.16.0",
@@ -5147,6 +5177,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
       "integrity": "sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==",
+      "dev": true,
       "requires": {
         "chardet": "^0.7.0",
         "iconv-lite": "^0.4.24",
@@ -5275,6 +5306,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
       "integrity": "sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=",
+      "dev": true,
       "requires": {
         "escape-string-regexp": "^1.0.5"
       }
@@ -6229,7 +6261,8 @@
     "graceful-fs": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
-      "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ=="
+      "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==",
+      "dev": true
     },
     "gzip-size": {
       "version": "5.1.1",
@@ -6292,7 +6325,8 @@
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "dev": true
     },
     "has-symbols": {
       "version": "1.0.1",
@@ -6631,6 +6665,7 @@
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
       "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dev": true,
       "requires": {
         "safer-buffer": ">= 2.1.2 < 3"
       }
@@ -6986,7 +7021,8 @@
     "is-fullwidth-code-point": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
+      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+      "dev": true
     },
     "is-glob": {
       "version": "4.0.1",
@@ -7065,7 +7101,8 @@
     "is-promise": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz",
-      "integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o="
+      "integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=",
+      "dev": true
     },
     "is-regex": {
       "version": "1.0.5",
@@ -7127,7 +7164,8 @@
     "is-wsl": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
-      "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0="
+      "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=",
+      "dev": true
     },
     "isarray": {
       "version": "1.0.0",
@@ -7138,7 +7176,8 @@
     "isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA="
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
+      "dev": true
     },
     "isobject": {
       "version": "3.0.1",
@@ -7277,6 +7316,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
       "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+      "dev": true,
       "requires": {
         "graceful-fs": "^4.1.6"
       }
@@ -7490,7 +7530,8 @@
     "lodash": {
       "version": "4.17.15",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
+      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
+      "dev": true
     },
     "lodash.defaultsdeep": {
       "version": "4.6.1",
@@ -7543,6 +7584,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
       "integrity": "sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==",
+      "dev": true,
       "requires": {
         "chalk": "^2.0.1"
       }
@@ -7617,6 +7659,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "material-design-icons-iconfont": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/material-design-icons-iconfont/-/material-design-icons-iconfont-5.0.1.tgz",
+      "integrity": "sha512-Xg6rIdGrfySTqiTZ6d+nQbcFepS6R4uKbJP0oAqyeZXJY/bX6mZDnOmmUJusqLXfhIwirs0c++a6JpqVa8RFvA=="
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -7771,7 +7818,8 @@
     "mimic-fn": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
-      "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ=="
+      "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
+      "dev": true
     },
     "mini-css-extract-plugin": {
       "version": "0.8.2",
@@ -7976,7 +8024,8 @@
     "mute-stream": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz",
-      "integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s="
+      "integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=",
+      "dev": true
     },
     "mz": {
       "version": "2.7.0",
@@ -8346,6 +8395,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz",
       "integrity": "sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=",
+      "dev": true,
       "requires": {
         "mimic-fn": "^1.0.0"
       }
@@ -8354,6 +8404,7 @@
       "version": "6.4.0",
       "resolved": "https://registry.npmjs.org/open/-/open-6.4.0.tgz",
       "integrity": "sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg==",
+      "dev": true,
       "requires": {
         "is-wsl": "^1.1.0"
       }
@@ -8441,7 +8492,8 @@
     "os-tmpdir": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
-      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
+      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
+      "dev": true
     },
     "p-defer": {
       "version": "1.0.0",
@@ -8721,6 +8773,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/plist/-/plist-3.0.1.tgz",
       "integrity": "sha512-GpgvHHocGRyQm74b6FWEZZVRroHKE1I0/BTjAmySaohK+cUn+hZpbqXkc3KWgW3gQYkqcQej35FohcT0FRlkRQ==",
+      "dev": true,
       "requires": {
         "base64-js": "^1.2.3",
         "xmlbuilder": "^9.0.7",
@@ -9597,6 +9650,15 @@
         "readable-stream": "^2.0.2"
       }
     },
+    "rechoir": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
+      "integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=",
+      "dev": true,
+      "requires": {
+        "resolve": "^1.1.6"
+      }
+    },
     "regenerate": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
@@ -9872,6 +9934,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz",
       "integrity": "sha1-n37ih/gv0ybU/RYpI9YhKe7g368=",
+      "dev": true,
       "requires": {
         "onetime": "^2.0.0",
         "signal-exit": "^3.0.2"
@@ -9924,6 +9987,7 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.3.0.tgz",
       "integrity": "sha1-A3GrSuC91yDUFm19/aZP96RFpsA=",
+      "dev": true,
       "requires": {
         "is-promise": "^2.1.0"
       }
@@ -9941,6 +10005,7 @@
       "version": "6.5.4",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.4.tgz",
       "integrity": "sha512-naMQXcgEo3csAEGvw/NydRA0fuS2nDZJiw1YUWFKU7aPPAPGZEsD4Iimit96qwCieH6y614MCLYwdkrWx7z/7Q==",
+      "dev": true,
       "requires": {
         "tslib": "^1.9.0"
       }
@@ -9963,12 +10028,44 @@
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true
+    },
+    "sass": {
+      "version": "1.25.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.25.0.tgz",
+      "integrity": "sha512-uQMjye0Y70SEDGO56n0j91tauqS9E1BmpKHtiYNQScXDHeaE9uHwNEqQNFf4Bes/3DHMNinB6u79JsG10XWNyw==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=2.0.0 <4.0.0"
+      }
+    },
+    "sass-loader": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-8.0.2.tgz",
+      "integrity": "sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==",
+      "dev": true,
+      "requires": {
+        "clone-deep": "^4.0.1",
+        "loader-utils": "^1.2.3",
+        "neo-async": "^2.6.1",
+        "schema-utils": "^2.6.1",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
+      }
     },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
-      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
+      "dev": true
     },
     "schema-utils": {
       "version": "2.6.4",
@@ -9998,7 +10095,8 @@
     "semver": {
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "dev": true
     },
     "send": {
       "version": "0.17.1",
@@ -10177,6 +10275,15 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "dev": true,
+      "requires": {
+        "kind-of": "^6.0.2"
+      }
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -10198,10 +10305,22 @@
       "integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==",
       "dev": true
     },
+    "shelljs": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.3.tgz",
+      "integrity": "sha512-fc0BKlAWiLpwZljmOvAOTE/gXawtCoNrP5oaY7KIaQbbyHeQVg01pSEuEGvGh3HEdBU4baCD7wQBwADmM/7f7A==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.0.0",
+        "interpret": "^1.0.0",
+        "rechoir": "^0.6.2"
+      }
+    },
     "signal-exit": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
-      "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0="
+      "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
+      "dev": true
     },
     "simple-swizzle": {
       "version": "0.2.2",
@@ -10668,6 +10787,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
       "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+      "dev": true,
       "requires": {
         "is-fullwidth-code-point": "^2.0.0",
         "strip-ansi": "^4.0.0"
@@ -10676,12 +10796,14 @@
         "ansi-regex": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+          "dev": true
         },
         "strip-ansi": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
           "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "dev": true,
           "requires": {
             "ansi-regex": "^3.0.0"
           }
@@ -10792,6 +10914,7 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
       "requires": {
         "has-flag": "^3.0.0"
       }
@@ -10962,7 +11085,8 @@
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
+      "dev": true
     },
     "through2": {
       "version": "2.0.5",
@@ -10999,6 +11123,7 @@
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
       "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
+      "dev": true,
       "requires": {
         "os-tmpdir": "~1.0.2"
       }
@@ -11347,7 +11472,8 @@
     "universalify": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
-      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "dev": true
     },
     "unpipe": {
       "version": "1.0.0",
@@ -11575,6 +11701,24 @@
       "resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-7.2.2.tgz",
       "integrity": "sha512-QjVfjRffux0rUBNtxr1hvUxDrfifDvk9q/OSdB/sKIlfxAudDF2E1YTeiEC+qOYIOOBGWkgSKQSnast6H+S38w=="
     },
+    "vue-cli-plugin-vuetify": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.0.4.tgz",
+      "integrity": "sha512-pqldJgaoMWwkpuoncCVU85IdKkJP8rblvw2CYHpyDx3+eY+dJgPhL3cAxEjuY1LC5evAfF/C2LqxyAL+KeLf0w==",
+      "dev": true,
+      "requires": {
+        "semver": "^6.3.0",
+        "shelljs": "^0.8.3"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
+      }
+    },
     "vue-eslint-parser": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz",
@@ -11660,6 +11804,20 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuetify": {
+      "version": "2.2.11",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.2.11.tgz",
+      "integrity": "sha512-lqhW7UIEx742G0VRAgXS1q2h4aAAGC7QTh2gxha+w12NsF5lrNXy2/ob5qvdklzCk6qS0ij7zbh2FooDdGP/QQ=="
+    },
+    "vuetify-loader": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/vuetify-loader/-/vuetify-loader-1.4.3.tgz",
+      "integrity": "sha512-fS0wRil682Ebsj2as+eruBoMPKaQYDhu/fDAndnTItzSY4RK4LOEIsssVL4vD6QY8dvUgoGL84SUQ6vGr777CA==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.2.0"
+      }
+    },
     "vuex": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.2.tgz",
@@ -12046,6 +12204,7 @@
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
       "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dev": true,
       "requires": {
         "isexe": "^2.0.0"
       }
@@ -12163,6 +12322,7 @@
       "version": "0.4.23",
       "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",
       "integrity": "sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==",
+      "dev": true,
       "requires": {
         "sax": ">=0.6.0",
         "xmlbuilder": "~11.0.0"
@@ -12171,19 +12331,22 @@
         "xmlbuilder": {
           "version": "11.0.1",
           "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
-          "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA=="
+          "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==",
+          "dev": true
         }
       }
     },
     "xmlbuilder": {
       "version": "9.0.7",
       "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz",
-      "integrity": "sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0="
+      "integrity": "sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0=",
+      "dev": true
     },
     "xmldom": {
       "version": "0.1.31",
       "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.31.tgz",
-      "integrity": "sha512-yS2uJflVQs6n+CyjHoaBmVSqIDevTAWrzMmjG1Gc7h1qQ7uVozNhEPJAwZXWyGQ/Gafo3fCwrcaokezLPupVyQ=="
+      "integrity": "sha512-yS2uJflVQs6n+CyjHoaBmVSqIDevTAWrzMmjG1Gc7h1qQ7uVozNhEPJAwZXWyGQ/Gafo3fCwrcaokezLPupVyQ==",
+      "dev": true
     },
     "xtend": {
       "version": "4.0.2",
diff --git a/package.json b/package.json
index 49e935d..d0f38aa 100644
--- a/package.json
+++ b/package.json
@@ -5,11 +5,12 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "ionic:build": "vue-cli-service build",
+    "ionic:serve": "vue-cli-service serve"
   },
   "dependencies": {
-    "@capacitor/cli": "^1.3.0",
-    "@capacitor/core": "^1.3.0",
+    "@capacitor/core": "1.5.0",
     "@capacitor/ios": "^1.3.0",
     "@ionic/core": "^4.11.5",
     "@ionic/vue": "0.0.9",
@@ -20,12 +21,15 @@
     "vue": "^2.6.10",
     "vue-class-component": "^7.0.2",
     "vue-property-decorator": "^8.3.0",
+    "material-design-icons-iconfont": "^5.0.1",
     "vue-router": "^3.1.5",
+    "vuetify": "^2.1.0",
     "vuex": "^3.1.2",
     "vuex-class": "^0.3.2",
     "vuex-persist": "^2.2.0"
   },
   "devDependencies": {
+    "@capacitor/cli": "1.5.0",
     "@vue/cli-plugin-babel": "^4.1.0",
     "@vue/cli-plugin-eslint": "^4.1.0",
     "@vue/cli-plugin-router": "^4.1.0",
@@ -36,7 +40,11 @@
     "@vue/eslint-config-typescript": "^4.0.0",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
+    "sass": "^1.19.0",
+    "sass-loader": "^8.0.0",
     "typescript": "~3.5.3",
-    "vue-template-compiler": "^2.6.10"
+    "vue-cli-plugin-vuetify": "^2.0.4",
+    "vue-template-compiler": "^2.6.10",
+    "vuetify-loader": "^1.3.0"
   }
 }
diff --git a/public/index.html b/public/index.html
index c7155d7..0e95330 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover" />
     <link
       rel="stylesheet"
       href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
@@ -11,7 +11,9 @@
       crossorigin=""
     />
     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
-    <title>gelegeapp-ionic</title>
+    <title>GelegeApp</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
   </head>
   <body>
     <noscript>
diff --git a/src/App.vue b/src/App.vue
index 0ac2281..20bed79 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,30 +1,50 @@
 <template>
   <div id="app">
-    <ion-app>
-      <ion-vue-router />
-    </ion-app>
+    <v-app>
+      <ion-app>
+        <ion-vue-router/>
+      </ion-app>
+    </v-app>
   </div>
 </template>
 
-<style>
-#app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
+<style lang="scss">
+  #app {
+    font-family: "Avenir", Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
+    color: #2c3e50;
+    height: 100%;
+  }
 
-#nav {
-  padding: 30px;
-}
+  :root {
+    --ion-color-primary: var(--v-primary-base);
+  }
 
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
+  #nav {
+    padding: 30px;
+  }
+
+  #nav a {
+    font-weight: bold;
+    color: #2c3e50;
+  }
+
+  #nav a.router-link-exact-active {
+    color: #42b983;
+  }
+
+  .v-text-field.v-text-field--enclosed:not(.v-text-field--rounded) > .v-input__control > .v-input__slot, .v-text-field.v-text-field--enclosed .v-text-field__details {
+    padding: 0 !important;
+  }
+
+  .v-text-field--rounded > .v-input__control > .v-input__slot {
+    padding: 0 !important;
+  }
+
+  .v-text-field > .v-input__control > .v-input__slot > .v-text-field__slot {
+    margin-left: 15px;
+  }
 
-#nav a.router-link-exact-active {
-  color: #42b983;
-}
 </style>
diff --git a/src/api/AreaRepository.ts b/src/api/AreaRepository.ts
new file mode 100644
index 0000000..3742c79
--- /dev/null
+++ b/src/api/AreaRepository.ts
@@ -0,0 +1,15 @@
+import EntityBaseRepository from '@/api/EntityBaseRepository';
+
+/**
+ *  Area repository
+ */
+export default class AreaRepository extends EntityBaseRepository {
+
+  public async findAll(): Promise<any> {
+    return this.axiosClient.get(`area`);
+  }
+
+  public async getGeoJson(payload: { areaId: string }): Promise<any> {
+    return this.axiosClient.get(`area/${payload.areaId}/getGeoJson`);
+  }
+}
diff --git a/src/api/EntityBaseRepository.ts b/src/api/EntityBaseRepository.ts
new file mode 100644
index 0000000..c600195
--- /dev/null
+++ b/src/api/EntityBaseRepository.ts
@@ -0,0 +1,69 @@
+import axios, { AxiosInstance, CancelTokenStatic } from 'axios';
+import store from '@/store/store';
+import { Vue } from 'vue-property-decorator';
+import router from '@/router';
+import ApiError from '@/api/error/ApiError';
+
+/**
+ * Base repository class
+ */
+export default class EntityBaseRepository {
+
+    protected axiosClient!: AxiosInstance;
+    private baseURL = process.env.VUE_APP_BASE_URL;
+
+    constructor() {
+        this.createHttpClient();
+        this.setInterceptors();
+    }
+
+    private createHttpClient() {
+        this.axiosClient = axios.create({
+            baseURL: this.baseURL,
+            headers: {'Content-Type': 'application/json'},
+        });
+    }
+
+    private setInterceptors() {
+        // -- set token for each request
+        this.axiosClient.interceptors.request.use((config) => {
+            // OPTIMIZE this is not optimal, the token could be expired ...
+            if (store.getters['auth/token']) {
+                config.headers.token = `Bearer ${store.getters['auth/token']}`;
+            }
+            return config;
+        }, (error) => {
+            throw Promise.reject(error);
+        });
+
+        // -- normalize response
+        this.axiosClient.interceptors.response.use(
+            (response) => response.data,
+            (error) => {
+                if (axios.isCancel(error)) {
+                    return new Promise(() => {
+                        // cancels process of the interceptor chain
+                    });
+                } else {
+                    if (error.response) {
+                        console.log(error, error.response);
+                        // handle invalid (or expired) token ...
+                        if (error.response.status === 401) {
+                            store.commit('auth/clearLogin');
+                            router.push({name: 'login'});
+                        } else if (error.response.status === 500) {
+                            return new Promise(() => {
+                                // cancels process of the interceptor chain
+                            });
+                        } else {
+                            throw new ApiError(error.response.status, error.message, error.response.data);
+                        }
+                    } else {
+                        return new Promise(() => {
+                            // cancels processing of the interceptor chain
+                        });
+                    }
+                }
+            });
+    }
+}
diff --git a/src/api/RepositoryFactory.ts b/src/api/RepositoryFactory.ts
index 2b1ab89..25a3f4d 100644
--- a/src/api/RepositoryFactory.ts
+++ b/src/api/RepositoryFactory.ts
@@ -1,18 +1,20 @@
 import AuthRepository from '@/api/AuthRepository';
+import AreaRepository from '@/api/AreaRepository';
 
 const repositories: any = {
-    auth: { Repository: AuthRepository, instance: null }
+  auth: { Repository: AuthRepository, instance: null },
+  area: { Repository: AreaRepository, instance: null }
 };
 
 /**
  *  Factory to create repositories. All created repositories are singleton instances.
  */
 export const RepositoryFactory = {
-    get: (name: string) => {
-        if (repositories[name].instance) {
-            return repositories[name].instance;
-        } else {
-            return new repositories[name].Repository();
-        }
+  get: (name: string) => {
+    if (repositories[name].instance) {
+      return repositories[name].instance;
+    } else {
+      return new repositories[name].Repository();
     }
+  }
 };
diff --git a/src/api/error/ApiError.ts b/src/api/error/ApiError.ts
new file mode 100644
index 0000000..539b6ac
--- /dev/null
+++ b/src/api/error/ApiError.ts
@@ -0,0 +1,26 @@
+/**
+ * Simple error wrapper class to normalize error cases
+ */
+export default class ApiError {
+
+    /**
+     * http status code
+     */
+    public status: number;
+
+    /**
+     * error message
+     */
+    public message: string;
+
+    /**
+     * error data
+     */
+    public data: any;
+
+    constructor(status: number, message: string, data: any) {
+        this.status = status;
+        this.message = message;
+        this.data = data;
+    }
+}
diff --git a/src/main.ts b/src/main.ts
index 01611e7..38f4673 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,6 +5,9 @@ import router from './router';
 import store from './store/store';
 import '@ionic/core/css/core.css';
 import '@ionic/core/css/ionic.bundle.css';
+import vuetify from '@/plugins/vuetify';
+
+import 'material-design-icons-iconfont/dist/material-design-icons.css';
 
 Vue.use(IonicVueRouter);
 Vue.use(Ionic);
@@ -14,5 +17,6 @@ Vue.config.productionTip = false;
 new Vue({
   router,
   store,
+  vuetify,
   render: h => h(App)
 }).$mount('#app');
diff --git a/src/models/Area.ts b/src/models/Area.ts
new file mode 100644
index 0000000..3f6b48e
--- /dev/null
+++ b/src/models/Area.ts
@@ -0,0 +1,19 @@
+import User from '@/models/User';
+
+export class Area {
+
+  public id?: string;
+  public name?: string;
+  public active: boolean = false;
+  public users: User[] = [];
+
+  constructor(data: any) {
+    Object.assign(this, data);
+
+    if (data.users) {
+      data.users.map((userData: any) => {
+        this.users.push(new User(userData));
+      });
+    }
+  }
+}
diff --git a/src/models/User.ts b/src/models/User.ts
new file mode 100644
index 0000000..3c76636
--- /dev/null
+++ b/src/models/User.ts
@@ -0,0 +1,22 @@
+/**
+ * Presents an user.
+ */
+import {Area} from '@/models/Area';
+
+export default class User {
+
+  public id!: string;
+  public email!: string;
+  public firstName!: string;
+  public lastName!: string;
+  public active: boolean = false;
+  public areas: Area[] = [];
+
+  constructor(data: any) {
+    Object.assign(this, data);
+
+    if (data.areas) {
+      this.areas = data.areas.map((areaData: any) => new Area(areaData));
+    }
+  }
+}
diff --git a/src/plugins/defaultLight.ts b/src/plugins/defaultLight.ts
new file mode 100644
index 0000000..a18bf51
--- /dev/null
+++ b/src/plugins/defaultLight.ts
@@ -0,0 +1,17 @@
+/**
+ *  These theme colors properties are a mix from material design specs:
+ *  https://material.io/design/color/#color-theme-creation
+ *  and from vuetify theme management:
+ * https://vuetifyjs.com/en/customization/theme#theme
+ */
+export default {
+    // REIN light theme colors
+    'primary': '#33b370',
+    'secondary': '#172B4D',
+    'accent': '#00A252',
+    'error': '#E02020',
+    'info': '#5CBBF6',
+    'success': '#00A252',
+    'warning': '#FFAE42',
+    'disabled': '#EDEEF0',
+};
diff --git a/src/store/area.store.ts b/src/store/area.store.ts
new file mode 100644
index 0000000..1af96af
--- /dev/null
+++ b/src/store/area.store.ts
@@ -0,0 +1,42 @@
+import { ActionTree, Module } from 'vuex';
+import AuthRepository from '@/api/AuthRepository';
+import { RepositoryFactory } from '@/api/RepositoryFactory';
+import AreaRepository from '@/api/AreaRepository';
+import { Area } from '@/models/Area';
+
+const areaRepository: AreaRepository = RepositoryFactory.get('area');
+
+const store = {
+  geoJson: undefined,
+};
+
+const actions: ActionTree<any, any> = {
+  findAll: async ({ commit }): Promise<Area[]> => {
+    const response = await areaRepository.findAll();
+    const areas: Area[] = response.map((areaData: any) =>
+      new Area(areaData));
+
+    return areas;
+  },
+  getAreaGeoJson: async ({ commit }, payload: { areaId: string }):
+    Promise<any> => {
+    const response = await areaRepository.getGeoJson(payload);
+    return response;
+  },
+};
+
+const mutations = {
+};
+
+const getters = {
+  geoJson: (state: any) => state.geoJson,
+};
+
+const areaStore: Module<any, any> = {
+  state: store,
+  actions,
+  mutations,
+  getters
+};
+
+export default areaStore;
diff --git a/src/store/auth.store.ts b/src/store/auth.store.ts
index 17352dc..bdbd8d8 100644
--- a/src/store/auth.store.ts
+++ b/src/store/auth.store.ts
@@ -6,7 +6,6 @@ const authRepository: AuthRepository = RepositoryFactory.get('auth');
 
 const store = {
   token: undefined,
-  isAdmin: false,
   lastLogin: undefined
 };
 
@@ -30,14 +29,12 @@ const mutations = {
   clearToken: (state: any) => {
     state.token = null;
     state.lastLogin = null;
-  },
-  saveAdminPermission: (state: any, isAdmin: boolean) => state.isAdmin = isAdmin
+  }
 };
 
 const getters = {
   token: (state: any) => state.token,
   lastLogin: (state: any) => state.lastLogin,
-  isAdmin: (state: any) => state.isAdmin
 };
 
 const authStore: Module<any, any> = {
diff --git a/src/store/global.store.ts b/src/store/global.store.ts
new file mode 100644
index 0000000..cf3f733
--- /dev/null
+++ b/src/store/global.store.ts
@@ -0,0 +1,27 @@
+import { ActionTree, Module } from 'vuex';
+
+const store = {
+  selectedArea: undefined,
+};
+
+const actions: ActionTree<any, any> = {
+};
+
+const mutations = {
+  saveArea: (state: any, area: any) => {
+    state.selectedArea = area;
+  }
+};
+
+const getters = {
+  selectedArea: (state: any) => state.selectedArea,
+};
+
+const globalStore: Module<any, any> = {
+  state: store,
+  actions,
+  mutations,
+  getters
+};
+
+export default globalStore;
diff --git a/src/store/store.ts b/src/store/store.ts
index dcc5a72..9fe6bf3 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -1,20 +1,16 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 import VuexPersistence from 'vuex-persist';
-import authStore from "@/store/auth.store";
+import authStore from '@/store/auth.store';
+import globalStore from '@/store/global.store';
+import areaStore from '@/store/area.store';
 
 Vue.use(Vuex);
 // set up persistence storage plugin
 const vuexPersistence = new VuexPersistence({
   key: process.env.VUE_APP_TITLE,
   storage: window.localStorage,
-  reducer: (state: any) => ({
-    auth: {
-      token: state.auth.token,
-      user: state.auth.user
-    }
-  }),
-  filter: (mutation) => ['auth/saveLogin'].includes(mutation.type)
+  filter: (mutation) => ['auth/saveToken', 'global/saveArea'].includes(mutation.type)
 });
 
 export default new Vuex.Store({
@@ -25,6 +21,15 @@ export default new Vuex.Store({
     auth: {
       namespaced: true,
       ...authStore
+    },
+    global: {
+      namespaced: true,
+      ...globalStore
+    },
+    area: {
+      namespaced: true,
+      ...areaStore
     }
-  }
+  },
+  plugins: [vuexPersistence.plugin]
 });
diff --git a/src/views/AreaSelection.view.vue b/src/views/AreaSelection.view.vue
index 5c1ab76..215d62d 100644
--- a/src/views/AreaSelection.view.vue
+++ b/src/views/AreaSelection.view.vue
@@ -1,21 +1,67 @@
 <template>
-    <div>
-      AreaSelection
-      <ion-button @click="goToLogin"></ion-button>
-    </div>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar color="primary">
+        <ion-title>Gebiet auswählen</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <v-list two-line>
+        <v-list-item
+          v-for="area in areas"
+          :key="area.name"
+          @click="selectedArea(area)"
+        >
+          <v-list-item-avatar>
+            <v-icon
+              class="grey lighten-1 white--text"
+            >mdi-map
+            </v-icon>
+          </v-list-item-avatar>
+          <v-list-item-content class="text-left">
+            <v-list-item-title v-text="area.name"></v-list-item-title>
+            <v-list-item-subtitle>Anzahl der Benutzer: {{ area.users.length }}</v-list-item-subtitle>
+          </v-list-item-content>
+          <v-list-item-action>
+            <v-btn icon>
+              <v-icon color="grey lighten-1">mdi-information</v-icon>
+            </v-btn>
+          </v-list-item-action>
+        </v-list-item>
+      </v-list>
+    </ion-content>
+  </ion-page>
 </template>
 
 <script lang="ts">
-  import {Component, Vue} from "vue-property-decorator";
+  import { Component, Vue } from 'vue-property-decorator';
+  import { Area } from '@/models/Area';
+  import { namespace } from 'vuex-class';
 
-    @Component
-    export default class AreaSelectionView extends Vue {
+  const GlobalStore = namespace('global');
+  const AreaStore = namespace('area');
 
-      public goToLogin() {
-        this.$router.push({name: 'login'});
-      }
+  @Component
+  export default class AreaSelectionView extends Vue {
 
+    @GlobalStore.Mutation('saveArea')
+    public saveArea!: (area: Area) => void;
+
+    @AreaStore.Action('findAll')
+    public findAllAreas!: () => any;
+
+    public areas: Area[] = [];
+
+    public async created() {
+      this.areas = await this.findAllAreas();
     }
+
+    public selectedArea(area: Area) {
+      this.saveArea(area);
+      this.$router.push({ name: 'mapOverview' });
+    }
+
+  }
 </script>
 
 <style scoped>
diff --git a/src/views/Login.view.vue b/src/views/Login.view.vue
index be4331e..1c12902 100644
--- a/src/views/Login.view.vue
+++ b/src/views/Login.view.vue
@@ -1,14 +1,36 @@
 <template>
-  <div>
-    <div>
-      <ion-button @click="loginClicked">Login</ion-button>
+  <div class="fill-height">
+    <div class="login d-flex align-center justify-center flex-column elevation-10">
+      <div class="title">
+        <span class="white--text display-2">GelegeApp</span>
+      </div>
+      <div class="login-form">
+        <v-text-field
+          v-model="email"
+          label="E-Mail"
+          outlined
+          type="text"
+          color="white"
+        ></v-text-field>
+        <v-text-field
+          v-model="password"
+          label="Passwort"
+          outlined
+          type="password"
+          color="white"
+        ></v-text-field>
+      </div>
+    </div>
+    <div class="button-container d-flex align-center justify-center">
+      <v-btn class="mt-3" width="250" height="50" color="primary"
+             @click="loginClicked">Login</v-btn>
     </div>
   </div>
 </template>
 
 <script lang="ts">
   import {Component, Vue} from "vue-property-decorator";
-  import { namespace } from 'vuex-class';
+  import {namespace} from 'vuex-class';
 
   const AuthStore = namespace('auth');
 
@@ -18,10 +40,13 @@
     @AuthStore.Action('loginAction')
     public login!: (payload: { email: string, password: string }) => any;
 
+    public email: string = 't.indorf@28apps.de';
+    public password: string = 'test';
+
     public async loginClicked() {
-      const response  = await this.login({
-        email: 't.indorf@28apps.de',
-        password: 'test'
+      const response = await this.login({
+        email: this.email,
+        password: this.password
       });
 
       if (response.status === 200) {
@@ -34,6 +59,24 @@
   }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 
+  .title {
+    height: 150px;
+  }
+
+  .login {
+    height: 75%;
+    background: rgb(58, 200, 121);
+    background: linear-gradient(180deg, rgba(58, 200, 107, 1) 0%, rgba(51, 179, 112, 1) 42%, rgba(42, 150, 103, 1) 100%);
+
+    .login-form {
+      width: 100%;
+      max-width: 350px;
+    }
+  }
+
+  .button-container {
+    height: 25%;
+  }
 </style>
diff --git a/src/views/MapOverview.view.vue b/src/views/MapOverview.view.vue
index 1e71e33..c639109 100644
--- a/src/views/MapOverview.view.vue
+++ b/src/views/MapOverview.view.vue
@@ -1,14 +1,104 @@
 <template>
-  <div>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar color="primary">
+        <ion-title>Home</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content padding>
+      <div
+        style="width:100%; height:100%;"
+        id="map"
+        name="map"
+      >
+      </div>
+    </ion-content>
+  </ion-page>
 
-  </div>
 </template>
 
 <script lang="ts">
-  import {Component, Vue} from "vue-property-decorator";
+  import { Component, Vue } from 'vue-property-decorator';
+  import { Map, tileLayer, marker, geoJSON, TileLayer, icon } from 'leaflet';
+  import { namespace } from 'vuex-class';
+  import { Area } from '@/models/Area';
+
+  const AreaStore = namespace('area');
+  const GlobalStore = namespace('global');
 
   @Component
   export default class MapOverviewView extends Vue {
+
+    @AreaStore.Action('getAreaGeoJson')
+    private getAreaGeoJson!: (payload: { areaId: string }) => any;
+
+    @GlobalStore.Getter('selectedArea')
+    private selectedArea!: Area;
+
+    public map?: Map | null;
+
+    public async created() {
+      this.map = null;
+      const response = await this.getAreaGeoJson({ areaId: this.selectedArea.id! });
+      this.map = new Map('map').setView(
+        [53.15190499781906, 8.827171325683596],
+        14
+      );
+
+      const osm = new TileLayer(
+        'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+        {
+          minZoom: 0,
+          maxZoom: 20,
+          attribution:
+            'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'
+        }
+      );
+
+      this.map.on('click', (e: any) => {
+        console.log('Lat, Lon : ' + e.latlng.lat + ', ' + e.latlng.lng);
+      });
+
+      this.map.addLayer(osm);
+
+      const ccIcon = icon({
+        iconUrl: 'cc-logo-black.png',
+        iconSize: [35, 35],
+        iconAnchor: [17, 17],
+        popupAnchor: [0, -28]
+      });
+
+      const geo = geoJSON(response, {
+        // Marker Icon
+        pointToLayer: (feature: any, latlng: any) => {
+          return marker(latlng, { icon: ccIcon });
+        },
+        // Style
+        style: (feature: any) => {
+          if (feature!.properties.Color) {
+            return {
+              fillColor: `#${feature!.properties.Color}`,
+              color: `#${feature!.properties.Color}`,
+              opacity: 1,
+              fillOpacity: 0.8,
+              width: 0.5
+            };
+          } else {
+            return { color: '#808080', width: 0.5 };
+          }
+        },
+        // Popup
+        onEachFeature: function(feature: any, layer: any) {
+          layer.bindPopup(
+            '<b>' +
+            feature.properties.NUTZER +
+            '</b><br />' +
+            feature.properties.Flurstck
+          );
+        }
+      });
+      geo.addTo(this.map);
+    }
   }
 </script>
 
diff --git a/tsconfig.json b/tsconfig.json
index 27e8e4a..9f203ca 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,7 +13,9 @@
     "resolveJsonModule": true,
     "baseUrl": ".",
     "types": [
-      "webpack-env"
+      "webpack-env",
+      "vuetify",
+      "ionic"
     ],
     "paths": {
       "@/*": [