From 2cbe628d102711f30b0a2f50cd0f6d7e0a733edb Mon Sep 17 00:00:00 2001
From: Arno Kaimbacher <arno.kaimbacher@hotmail.de>
Date: Tue, 23 Nov 2021 17:30:19 +0100
Subject: [PATCH] - add vue router - add extra view components

---
 package-lock.json                            |  32 ++-
 package.json                                 |   5 +-
 src/App.vue                                  | 209 +--------------
 src/app.ts                                   | 256 ++-----------------
 src/assets/scss/main-styles.scss             |   2 +-
 src/main.ts                                  |   3 +-
 src/notes.txt                                |   8 +-
 src/router/index.ts                          |  23 ++
 src/views/home-view/home-view-component.scss |   0
 src/views/home-view/home-view-component.ts   | 245 ++++++++++++++++++
 src/views/home-view/home-view-component.vue  | 213 +++++++++++++++
 src/views/map-view/map-view-component.ts     |   9 +
 src/views/map-view/map-view-component.vue    |   8 +
 13 files changed, 567 insertions(+), 446 deletions(-)
 create mode 100644 src/router/index.ts
 create mode 100644 src/views/home-view/home-view-component.scss
 create mode 100644 src/views/home-view/home-view-component.ts
 create mode 100644 src/views/home-view/home-view-component.vue
 create mode 100644 src/views/map-view/map-view-component.ts
 create mode 100644 src/views/map-view/map-view-component.vue

diff --git a/package-lock.json b/package-lock.json
index e264706..7dc9dec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,8 @@
         "rxjs": "^6.6.0",
         "vue": "^3.0.0",
         "vue-class-component": "^8.0.0-0",
-        "vue-property-decorator": "^9.1.2"
+        "vue-property-decorator": "^9.1.2",
+        "vue-router": "^4.0.12"
       },
       "devDependencies": {
         "@typescript-eslint/eslint-plugin": "^4.18.0",
@@ -3232,6 +3233,11 @@
       "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
       "dev": true
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.0.0-beta.20.1",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.0.0-beta.20.1.tgz",
+      "integrity": "sha512-R2rfiRY+kZugzWh9ZyITaovx+jpU4vgivAEAiz80kvh3yviiTU3CBuGuyWpSwGz9/C7TkSWVM/FtQRGlZ16n8Q=="
+    },
     "node_modules/@vue/eslint-config-prettier": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/@vue/eslint-config-prettier/-/eslint-config-prettier-6.0.0.tgz",
@@ -15806,6 +15812,17 @@
         "vue-class-component": "*"
       }
     },
+    "node_modules/vue-router": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.12.tgz",
+      "integrity": "sha512-CPXvfqe+mZLB1kBWssssTiWg4EQERyqJZes7USiqfW9B5N2x+nHlnsM1D3b5CaJ6qgCvMmYJnz+G0iWjNCvXrg==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.0.0-beta.18"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@@ -19515,6 +19532,11 @@
         }
       }
     },
+    "@vue/devtools-api": {
+      "version": "6.0.0-beta.20.1",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.0.0-beta.20.1.tgz",
+      "integrity": "sha512-R2rfiRY+kZugzWh9ZyITaovx+jpU4vgivAEAiz80kvh3yviiTU3CBuGuyWpSwGz9/C7TkSWVM/FtQRGlZ16n8Q=="
+    },
     "@vue/eslint-config-prettier": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/@vue/eslint-config-prettier/-/eslint-config-prettier-6.0.0.tgz",
@@ -29609,6 +29631,14 @@
       "integrity": "sha512-xYA8MkZynPBGd/w5QFJ2d/NM0z/YeegMqYTphy7NJQXbZcuU6FC6AOdUAcy4SXP+YnkerC6AfH+ldg7PDk9ESQ==",
       "requires": {}
     },
+    "vue-router": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.12.tgz",
+      "integrity": "sha512-CPXvfqe+mZLB1kBWssssTiWg4EQERyqJZes7USiqfW9B5N2x+nHlnsM1D3b5CaJ6qgCvMmYJnz+G0iWjNCvXrg==",
+      "requires": {
+        "@vue/devtools-api": "^6.0.0-beta.18"
+      }
+    },
     "vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
diff --git a/package.json b/package.json
index 09f3ac1..0b92db5 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --port 3000",
+    "serve": "vue-cli-service serve --port 3000",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "format": "prettier --write 'src/**/*.{ts,tsx}'"
@@ -20,7 +20,8 @@
     "rxjs": "^6.6.0",
     "vue": "^3.0.0",
     "vue-class-component": "^8.0.0-0",
-    "vue-property-decorator": "^9.1.2"
+    "vue-property-decorator": "^9.1.2",
+    "vue-router": "^4.0.12"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^4.18.0",
diff --git a/src/App.vue b/src/App.vue
index c8776ed..5b018c5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -22,10 +22,12 @@
         <div id="navMenu" class="navbar-menu">
             <ul class="navbar-start" style="flex-grow: 1; justify-content: center">
                 <li class="navbar-item">
-                    <a class="navbar-link is-arrowless active" href="#">STARTSEITE</a>
+                    <!-- <a class="navbar-link is-arrowless active" href="#">STARTSEITE</a> -->
+                    <router-link class="navbar-link is-arrowless active" to="/test/">STARTSEITE</router-link>
                 </li>
                 <li class="navbar-item">
-                    <a class="navbar-link is-arrowless" href="#">INTRO</a>
+                    <!-- <a class="navbar-link is-arrowless" href="#">INTRO</a> -->
+                    <router-link class="navbar-link is-arrowless active" to="/test/map">INTRO</router-link>
                 </li>
                 <li class="navbar-item">
                     <a class="navbar-link is-arrowless" href="#">SEARCH</a>
@@ -59,207 +61,8 @@
         </div>
     </nav>
 
-    <div id="page_style" class="rows site-content page__style page__description" autocomplete="off">
-        <!-- <div class="col-6 offset-6 content column is-half is-offset-6" style="text-align: right">
-            <a class="button" href="/test" target="_self">
-                <img class="icon-spacing" src="./assets/fa/firefox.svg" style="width: 16px; height: 16px" />
-                <img class="icon-spacing" src="./assets/fa/chrome.svg" style="width: 16px; height: 16px" />
-                <img class="icon-spacing" src="./assets/fa/opera.svg" style="width: 16px; height: 16px" />
-                <img src="./assets/fa/plus.svg" style="width: 16px; height: 16px" />
-            </a>
-            <a class="button" href="/test" target="_self">
-                <img src="./assets/fa/user.svg" style="width: 16px; height: 16px" />
-            </a>
-        </div> -->
-
-        <!-- <div class="column" style="text-align: center">
-            <a href="/test" id="logo_home" target="_self">
-                <img id="logo_img_home" src="./assets/images/tethys-icon-mono.png" width="240px" style="min-width: 140px" />
-            </a>
-        </div> -->
-
-        <!-- <div class="column">
-            <div class="col text-center py-3">
-                <h1>Tethys Research Data Repository</h1>
-                <p class="lead">Data Publisher for Geoscience Austria</p>
-                <hr class="center-line" />
-            </div>
-        </div> -->
-        <div class="column">
-            <div class="col text-center py-3">
-                <h1>Tethys Research Data Repository</h1>
-                <p class="lead">Data Publisher for Geoscience Austria</p>
-                <hr class="center-line" />
-            </div>
-        </div>
-
-        <!-- <div class="column header-image align-items-center h-100">
-            <div class="col mt-3 mx-auto">
-                <div class="search-box mx-auto">
-                    <form class="my-2 my-lg-0 main-search-from-bg d-flex d-row">
-                        <input class="form-control mr-sm-2 border-0" type="text" placeholder="Search" aria-label="Search" />
-                        <button class="btn btn-secondary m-0" type="submit"><i class="fas fa-search text-white"></i></button>
-                    </form>
-                </div>
-            </div>
-        </div> -->
-        <!-- <figure class="image is-128x128">
-            <img src="https://bulma.io/images/placeholders/256x256.png" />
-        </figure> -->
-        <section data-sr id="help" class="help u-full-width featured-bg-image"></section>
-
-        <!-- <div class="columns">
-            <div class="column text-center">
-                <h1>ÜBER TETHYS</h1>
-                <p class="lead">Was sind unsere Schwerpunkte</p>
-                <hr class="center-line" />
-            </div>
-        </div> -->
-        <section class="section">
-            <div class="column is-full text-center">
-                <h1>ÜBER TETHYS</h1>
-                <p class="lead">Was sind unsere Schwerpunkte</p>
-                <hr class="center-line" />
-            </div>
-            <div class="column is-full text-left">
-                <p>
-                    TETHYS RDR ist ein publizierendes Forschungsdatenrepositorium der Geologischen Bundesanstalt (GBA), das an der GBA generierte geowisse nschaftliche
-                    Forschungsdaten veröffentlicht.
-                </p>
-                <p>
-                    Zum derzeitigen Stand wird TETHYS RDR in deutscher Sprache bereitgestellt. Die englische Version befindet sich in Vorbereitung und wird sukzessive ebenfalls zur
-                    Verfügung gestellt. Die Forschungsdatenpublikationen und die dazugehörigen Metadaten können in Deutsch und in Englisch veröffentlicht werden. Tethys RDR hat den
-                    Anspruch, publizierte Datensätze unverändert, langfristig und nachhaltig bereitzustellen. Dadurch ist Tethys ein Forschungsdatenrepositorium, das ein
-                    permanentes Referenzieren ermöglicht und somit die darin publizierten Datensätze zitierfähig macht.
-                </p>
-                <p>
-                    Der Name Tethys kommt ursprünglich aus der griechischen Mythologie und benennt eine Titanin und Meeresgöttin. Ende des 19. Jahrhunderts entdeckte Eduard Suess
-                    (1831–1914), ein bedeutender österreichischer Geologe, den mesozoischen Ozean und benannte ihn nach dieser Tethys.
-                </p>
-            </div>
-        </section>
-
-        <vs-input v-on:search-change="onSearch" v-bind:placeholder="'Enter your search term...'"></vs-input>
-
-        <div class="column is-half is-offset-one-quarter" style="padding-top: 0; margin-top: 0">
-            <!-- <div class="tabs is-centered">
-                <ul id="id-results-tabs">
-                    <li class="search_tab is-active">
-                        <a target="_self">Web</a>
-                    </li>
-                    <li class="search_tab">
-                        <a target="_self">Images</a>
-                    </li>
-                    <li class="search_tab">
-                        <a target="_self">Videos</a>
-                    </li>
-                    <li class="search_tab">
-                        <a target="_self">Homepages</a>
-                    </li>
-                    <li class="search_tab">
-                        <a target="_self">Food</a>
-                    </li>
-                    <li class="search_tab">
-                        <a target="_self">Books</a>
-                    </li>
-                </ul>
-            </div> -->
-            <div v-if="results.length > 0" class="result-list-info">
-                <div class="resultheader">
-                    Your search yielded
-                    <strong>{{ numFound }}</strong> results:
-                </div>
-            </div>
-            <div v-else-if="results.length == 0">
-                <div class="resultheader">
-                    Your search yielded
-                    <strong> 0</strong> results:
-                </div>
-            </div>
-
-            <!-- <div id="id-pro-sign-in" class="notification" style="">
-                    <button
-                        class="delete"
-                        onclick="dismissProNotification();"
-                    ></button>
-                    It appears that you're not signed in. You'll need to
-                    <a href="/pro" target="_self">signup for Pro</a> or become a
-                    <a
-                        href="https://coil.com/?ref=InfinitySearch2229"
-                        target="_self"
-                        >Coil member</a
-                    >
-                    to access our results.
-                </div> -->
-        </div>
-
-        <div class="columns">
-            <div id="id-side-bar" class="column is-4 sidebar_column" style="padding-top: 1.2rem; padding-right: 1.5rem">
-                <div id="externals" class="">
-                    <div class="card" v-for="(facetItems, key, index) in facets" :key="index" name="external_card" style="margin-bottom: 0px">
-                        <facet-category v-bind:facetItems="facetItems" v-bind:filterName="key" @filter="onFilter"></facet-category>
-                    </div>
-                    <!-- <div class="card" name="external_card" style="margin-bottom: 0px">
-                        <header class="card-header">
-                            <p class="card-header-title" style="font-weight: normal; padding-right: 5px">
-                                <a
-                                    id="https://en.wikipedia.org/w/index.php?search="
-                                    href="https://en.wikipedia.org/w/index.php?search=test"
-                                    name="external_link_0"
-                                    style="display: block"
-                                    rel="noreferrer noopener"
-                                    target="_self"
-                                >
-                                    <img src="/static/images/favicons/wikipedia.ico" name="external_icon_0'" class="external-icon" />
-                                    <span hidden="" class="external-text" name="external_text_0" style="font-size: 0.95rem; display: inline"> Wikipedia Results </span>
-                                </a>
-                            </p>
-                        </header>
-                    </div>
-                    <div class="card" name="external_card" style="margin-bottom: 0px">
-                        <header class="card-header">
-                            <p class="card-header-title" style="font-weight: normal; padding-right: 5px">
-                                <a
-                                    id="https://duckduckgo.com/?q="
-                                    href="https://duckduckgo.com/?q=test"
-                                    name="external_link_1"
-                                    style="display: block"
-                                    rel="noreferrer noopener"
-                                    target="_self"
-                                >
-                                    <img src="/static/images/favicons/duckduckgo.ico" name="external_icon_1'" class="external-icon" />
-                                    <span hidden="" class="external-text" name="external_text_1" style="font-size: 0.95rem; display: inline"> DuckDuckGo Results </span>
-                                </a>
-                            </p>
-                            <span
-                                class="clickableIcon"
-                                onclick="removeExternalClickable(this)"
-                                style="cursor: pointer; display: block; margin: auto; margin-right: 6px; min-width: 0.5em"
-                            >
-                                <img
-                                    class="handle fa-ellipsis-v"
-                                    src="/static/images/fa/ellipsis-v.svg"
-                                    style="cursor: pointer; display: block; margin: auto; margin-right: 12px; min-width: 0.5em; width: 16px; height: 16px"
-                                />
-                            </span>
-                        </header>
-                    </div> -->
-                </div>
-            </div>
-
-            <div class="col col-8 column is-8 results_column" style="padding-top: 1.2rem; padding-right: 0.5rem">
-                <div class="column" v-if="activeFilterCategories && Object.keys(activeFilterCategories).length > 0">
-                    <span class="active-filter-items" v-for="(values, key, index) in activeFilterCategories" :key="index">
-                        <active-facet-category v-bind:filterItems="values" :categoryName="key" @clearFacetCategory="onClearFacetCategory"></active-facet-category>
-                    </span>
-                </div>
-                <div class="results">
-                    <!-- Results section -->
-                    <vs-result v-bind:datasets="results"></vs-result>
-                </div>
-            </div>
-        </div>
-    </div>
+    <!-- <home-view-component></home-view-component> -->
+    <router-view />
 
     <!-- <vs-input
         @search="onSearch"
diff --git a/src/app.ts b/src/app.ts
index b8bcc21..f0da401 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -1,245 +1,27 @@
 import { Options, Vue } from "vue-class-component";
 import HelloWorld from "./components/HelloWorld/HelloWorld.vue";
-import VsInput from "./components/vs-input/vs-input.vue";
-import VsResult from "./components/vs-result/vs-result.vue";
-import FacetCategory from "./components/face-category/facet-category.vue";
-import ActiveFacetCategory from "./components/active-facet-category/active-facet-category.vue";
-import { SolrSettings } from "@/models/solr";
-import { DatasetService } from "./services/dataset.service";
-import { Suggestion } from "./models/dataset";
-import { SolrResponse, FacetFields, FacetItem, FacetResults, FacetInstance } from "./models/headers";
-import { ActiveFilterCategories } from "@/models/solr";
+import HomeViewComponent from "./views/home-view/home-view-component.vue";
+import MapViewComponent from "./views/map-view/map-view-component.vue";
+// import VsInput from "./components/vs-input/vs-input.vue";
+// import VsResult from "./components/vs-result/vs-result.vue";
+// import FacetCategory from "./components/face-category/facet-category.vue";
+// import ActiveFacetCategory from "./components/active-facet-category/active-facet-category.vue";
+
+// import { SolrSettings } from "@/models/solr";
+// import { DatasetService } from "./services/dataset.service";
+// import { Suggestion } from "./models/dataset";
+// import { SolrResponse, FacetFields, FacetItem, FacetResults, FacetInstance } from "./models/headers";
+// import { ActiveFilterCategories } from "@/models/solr";
 
 @Options({
     components: {
         HelloWorld,
-        VsInput,
-        VsResult,
-        FacetCategory,
-        ActiveFacetCategory,
+        HomeViewComponent,
+        // VsInput,
+        // VsResult,
+        // FacetCategory,
+        // ActiveFacetCategory,
+        MapViewComponent,
     },
 })
-export default class App extends Vue {
-    results: Array<any> = [];
-
-    // facets: FacetFields = new FacetFields();
-    facets: FacetResults = new FacetResults();
-    searchTerm!: string | Suggestion;
-    // activeFilterCategories: Object = {};
-    activeFilterCategories: ActiveFilterCategories = new ActiveFilterCategories(); // = new Array<ActiveFilterCategory>();
-    pagination: any = {
-        total: 0,
-        per_page: 2,
-        current_page: 0,
-        // last_page: 0,
-        data: [],
-    };
-    loaded = false;
-    numFound!: number;
-    private solr: SolrSettings = {
-        core: "rdr_data", // SOLR.core;
-        host: "tethys.at",
-    };
-    private rdrAPI!: DatasetService;
-    private error = "";
-
-    mounted() {
-        this.rdrAPI = new DatasetService();
-    }
-
-    // onSearch(term: string): void {
-    onSearch(suggestion: Suggestion | string): void {
-        // let queryOperator;
-        // if (typeof suggestion === "string") {
-        //     suggestion = suggestion + "*";
-        //     queryOperator = "or";
-        // } else if (suggestion instanceof Suggestion) {
-        //     // term = suggestion.value;
-        //     queryOperator = "and";
-        // }
-
-        // if (term) {
-        //     term = term.trim();
-        // } else {
-        //     term = "*%3A*";
-        // }
-
-        this.activeFilterCategories = new ActiveFilterCategories();
-        this.facets = new FacetResults();
-
-        // this.facets = {};
-        this.searchTerm = suggestion;
-        this.rdrAPI.facetedSearch(suggestion, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
-            (res: SolrResponse) => this.dataHandler(res),
-            (error: any) => this.errorHandler(error),
-        );
-    }
-
-    private dataHandler(res: SolrResponse, filterItem?: FacetItem): void {
-        // this.results = datasets;
-        this.results = res.response.docs;
-        this.numFound = res.response.numFound;
-
-        // pagination
-        this.pagination["total"] = res.response.numFound;
-        this.pagination["per_page"] = res.responseHeader.params.rows;
-        this.pagination["current_page"] = 1;
-        this.pagination["data"] = res.response.docs;
-
-        // facets
-        // const facet_fields = res.facet_counts.facet_fields;
-        // for (const prop in facet_fields) {
-        //     const facetCategory: FacetCategory<any> = facet_fields[prop];
-        //     const facetValues = facetCategory.key.values.map((facet_value: any, i: number) => {
-        //         if (i % 2 === 0 && typeof facet_value == "string") {
-        //             //var rObj = { value: facet, count: facet_fields[prop][i + 1] };
-        //             // FiletrItem with value and count
-        //             const rObj = new FilterItem(facet_value, facetCategory.key.values[i + 1]);
-        //             return rObj;
-        //         }
-        //     });
-        //     .filter(function (el: FilterItem) {
-        //         return el != null && el.count > 0;
-        //     });
-        //     //this.facets.push({ filterName: prop, values: facetValues });
-        //     this.facets[prop] = facetValues;
-        // }
-
-        const facet_fields: FacetFields = res.facets;
-        let prop: keyof typeof facet_fields;
-        for (prop in facet_fields) {
-            const facetCategory = facet_fields[prop];
-            if (facetCategory.buckets) {
-                const facetItems: Array<FacetItem> = facetCategory.buckets;
-
-                let facetValues = facetItems.map((facetItem, index) => {
-                    let rObj: FacetItem;
-                    if (filterItem?.val == facetItem.val) {
-                        rObj = filterItem;
-                    } else if (this.facets[prop]?.some((e) => e.val === facetItem.val)) {
-                        // console.log(facetValue + " is included")
-                        const indexOfFacetValue = this.facets[prop].findIndex((i) => i.val === facetItem.val);
-                        // console.log(indexOfFacetValue);
-                        rObj = this.facets[prop][indexOfFacetValue];
-                        rObj.count = facetItem.count;
-                        // rObj = new FacetItem(val, count);
-                    } else {
-                        rObj = new FacetItem(facetItem.val, facetItem.count);
-                    }
-                    return rObj;
-                });
-
-                facetValues = facetValues.filter(function (el) {
-                    return el != null && el.count > 0;
-                });
-                // this.facets[prop] = facetCategory;
-                this.facets[prop] = facetValues;
-            }
-        }
-    }
-
-    private errorHandler(err: any): void {
-        this.error = err;
-        // this.loading = false;
-    }
-
-    onFilter(facetItem: FacetItem): void {
-        // console.log(facetItem.val);
-        // if (!this.activeFilterCategories.hasOwnProperty(facetItem.category)) {
-        if (!Object.prototype.hasOwnProperty.call(this.activeFilterCategories, facetItem.category)) {
-            this.activeFilterCategories[facetItem.category] = new Array<string>();
-        }
-        // if (!this.activeFilterCategories[facetItem.category].some((e) => e === facetItem.val)) {
-        if (!this.activeFilterCategories[facetItem.category].some((e) => e === facetItem.val)) {
-            this.activeFilterCategories[facetItem.category].push(facetItem.val);
-
-            this.rdrAPI.facetedSearch(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
-                (res: SolrResponse) => this.dataHandler(res, facetItem),
-                (error: any) => this.errorHandler(error),
-            );
-            // alert(this.activeFilterCategories[filter.Category]);
-            // var res = await rdrApi.search(this.searchTerm, this.activeFilterCategories, this.solrCore, this.solrHost);
-            // this.results = res.response.docs;
-            // this.numFound = res.response.numFound;
-
-            // // pagination
-            // this.pagination['total'] = res.response.numFound;
-            // this.pagination['per_page'] = res.responseHeader.params.rows;
-            // this.pagination['current_page'] = 1;
-            // this.pagination['data'] = res.response.docs;
-
-            // var facet_fields = res.facet_counts.facet_fields;
-            // for (var prop in facet_fields) {
-            //   var facetValues = facet_fields[prop].map((facetValue, i) => {
-            //     if (i % 2 === 0) {
-            //       // var rObj = { value: facetValue, count: facet_fields[prop][i + 1] };
-            //       var rObj;
-            //       if (filter.value == facetValue) {
-            //         rObj = filter;
-            //       } else if (this.facets[prop].some(e => e.value === facetValue)) {
-            //         // console.log(facetValue + " is included")
-            //         var indexOfFacetValue = this.facets[prop].findIndex(i => i.value === facetValue);
-            //         // console.log(indexOfFacetValue);
-            //         rObj = this.facets[prop][indexOfFacetValue];
-            //         rObj.count = facet_fields[prop][i + 1];
-            //       } else {
-            //         rObj = new FilterItem(facetValue, facet_fields[prop][i + 1]);
-            //       }
-            //       return rObj;
-            //     }
-            //   }).filter(function (el) {
-            //     return el != null && el.count > 0;
-            //   });
-            //   // this.facets.push({ filterName: prop, values: facetValues });
-            //   this.facets[prop] = facetValues;
-        }
-    }
-
-    onClearFacetCategory(categoryName: string): void {
-        // alert(categoryName);
-        delete this.activeFilterCategories[categoryName];
-
-        this.rdrAPI.facetedSearch(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
-            (res: SolrResponse) => {
-                this.results = res.response.docs;
-                this.numFound = res.response.numFound;
-
-                // pagination
-                this.pagination["total"] = res.response.numFound;
-                this.pagination["per_page"] = res.responseHeader.params.rows;
-                this.pagination["current_page"] = 1;
-                this.pagination["data"] = res.response.docs;
-
-                const facet_fields: FacetFields = res.facets;
-                let prop: keyof typeof facet_fields;
-                for (prop in facet_fields) {
-                    const facetCategory: FacetInstance = facet_fields[prop];
-                    if (facetCategory.buckets) {
-                        const facetItems: Array<FacetItem> = facetCategory.buckets;
-
-                        const facetValues = facetItems.map((facetItem, index) => {
-                            let rObj: FacetItem;
-                            if (this.facets[prop]?.some((e) => e.val === facetItem.val)) {
-                                // console.log(facetValue + " is included")
-                                const indexOfFacetValue = this.facets[prop].findIndex((i) => i.val === facetItem.val);
-                                // console.log(indexOfFacetValue);
-                                rObj = this.facets[prop][indexOfFacetValue];
-                                rObj.count = facetItem.count;
-                                // rObj = new FacetItem(val, count);
-                                //if facet ccategory is reactivated category, deactivate all filter items
-                                if (prop == categoryName) {
-                                    rObj.active = false;
-                                }
-                            } else {
-                                rObj = new FacetItem(facetItem.val, facetItem.count);
-                            }
-                            return rObj;
-                        });
-                        this.facets[prop] = facetValues;
-                    }
-                }
-            },
-            (error: any) => this.errorHandler(error),
-        );
-    }
-}
+export default class App extends Vue {}
diff --git a/src/assets/scss/main-styles.scss b/src/assets/scss/main-styles.scss
index 66653f3..114ce21 100644
--- a/src/assets/scss/main-styles.scss
+++ b/src/assets/scss/main-styles.scss
@@ -378,7 +378,7 @@ svg,
 .navbar-light .navbar-link:hover {
     color: rgba(0, 0, 0, 0.7);
 }
-.navbar-link.active,
+.navbar-link.router-link-active,
 .navbar-link:hover {
     border-bottom: 2px solid #33cccc;
     background-color: #fff;
diff --git a/src/main.ts b/src/main.ts
index c8a8e41..bc36390 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,5 +2,6 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import "./assets/scss/main-styles.scss";
 import FontAwesomeIcon from "@/utilities/fontawesome";
+import router from "./router/index";
 
-createApp(App).component("fa", FontAwesomeIcon).mount("#app");
+createApp(App).use(router).component("fa", FontAwesomeIcon).mount("#app");
diff --git a/src/notes.txt b/src/notes.txt
index 9925cc0..e36490b 100644
--- a/src/notes.txt
+++ b/src/notes.txt
@@ -47,4 +47,10 @@ npm install --save class-transformer
 
 npm install --save @fortawesome/vue-fontawesome@prerelease
 npm install --save @fortawesome/fontawesome-svg-core
-npm install --save @fortawesome/free-solid-svg-icons
\ No newline at end of file
+npm install --save @fortawesome/free-solid-svg-icons
+
+
+
+======================= router ================================
+https://www.vuemastery.com/blog/vue-router-a-tutorial-for-vue-3/
+npm install --save vue-router@next
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
new file mode 100644
index 0000000..d7de045
--- /dev/null
+++ b/src/router/index.ts
@@ -0,0 +1,23 @@
+import { createWebHistory, createRouter } from "vue-router";
+import HomeViewComponent from "@/views/home-view/home-view-component.vue";
+import MapViewComponent from "@/views/map-view/map-view-component.vue";
+
+const routes = [
+    {
+        path: "/test/",
+        name: "Home",
+        component: HomeViewComponent,
+    },
+    {
+        path: "/test/map",
+        name: "Map",
+        component: MapViewComponent,
+    },
+];
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes,
+});
+
+export default router;
diff --git a/src/views/home-view/home-view-component.scss b/src/views/home-view/home-view-component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/home-view/home-view-component.ts b/src/views/home-view/home-view-component.ts
new file mode 100644
index 0000000..f8d25be
--- /dev/null
+++ b/src/views/home-view/home-view-component.ts
@@ -0,0 +1,245 @@
+import { Options, Vue } from "vue-class-component";
+import { Prop } from "vue-property-decorator";
+import VsInput from "@/components/vs-input/vs-input.vue";
+import VsResult from "@/components/vs-result/vs-result.vue";
+import FacetCategory from "@/components/face-category/facet-category.vue";
+import ActiveFacetCategory from "@/components/active-facet-category/active-facet-category.vue";
+import { SolrSettings } from "@/models/solr";
+import { DatasetService } from "@/services/dataset.service";
+import { Suggestion } from "@/models/dataset";
+import { SolrResponse, FacetFields, FacetItem, FacetResults, FacetInstance } from "@/models/headers";
+import { ActiveFilterCategories } from "@/models/solr";
+
+@Options({
+    name: "HomeViewComponent",
+    components: {
+        VsInput,
+        VsResult,
+        FacetCategory,
+        ActiveFacetCategory,
+    },
+})
+export default class HomeViewComponent extends Vue {
+    results: Array<any> = [];
+
+    // facets: FacetFields = new FacetFields();
+    facets: FacetResults = new FacetResults();
+    searchTerm!: string | Suggestion;
+    // activeFilterCategories: Object = {};
+    activeFilterCategories: ActiveFilterCategories = new ActiveFilterCategories(); // = new Array<ActiveFilterCategory>();
+    pagination: any = {
+        total: 0,
+        per_page: 2,
+        current_page: 0,
+        // last_page: 0,
+        data: [],
+    };
+    loaded = false;
+    numFound!: number;
+    private solr: SolrSettings = {
+        core: "rdr_data", // SOLR.core;
+        host: "tethys.at",
+    };
+    private rdrAPI!: DatasetService;
+    private error = "";
+
+    mounted() {
+        this.rdrAPI = new DatasetService();
+    }
+
+    // onSearch(term: string): void {
+    onSearch(suggestion: Suggestion | string): void {
+        // let queryOperator;
+        // if (typeof suggestion === "string") {
+        //     suggestion = suggestion + "*";
+        //     queryOperator = "or";
+        // } else if (suggestion instanceof Suggestion) {
+        //     // term = suggestion.value;
+        //     queryOperator = "and";
+        // }
+
+        // if (term) {
+        //     term = term.trim();
+        // } else {
+        //     term = "*%3A*";
+        // }
+
+        this.activeFilterCategories = new ActiveFilterCategories();
+        this.facets = new FacetResults();
+
+        // this.facets = {};
+        this.searchTerm = suggestion;
+        this.rdrAPI.facetedSearch(suggestion, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
+            (res: SolrResponse) => this.dataHandler(res),
+            (error: any) => this.errorHandler(error),
+        );
+    }
+
+    private dataHandler(res: SolrResponse, filterItem?: FacetItem): void {
+        // this.results = datasets;
+        this.results = res.response.docs;
+        this.numFound = res.response.numFound;
+
+        // pagination
+        this.pagination["total"] = res.response.numFound;
+        this.pagination["per_page"] = res.responseHeader.params.rows;
+        this.pagination["current_page"] = 1;
+        this.pagination["data"] = res.response.docs;
+
+        // facets
+        // const facet_fields = res.facet_counts.facet_fields;
+        // for (const prop in facet_fields) {
+        //     const facetCategory: FacetCategory<any> = facet_fields[prop];
+        //     const facetValues = facetCategory.key.values.map((facet_value: any, i: number) => {
+        //         if (i % 2 === 0 && typeof facet_value == "string") {
+        //             //var rObj = { value: facet, count: facet_fields[prop][i + 1] };
+        //             // FiletrItem with value and count
+        //             const rObj = new FilterItem(facet_value, facetCategory.key.values[i + 1]);
+        //             return rObj;
+        //         }
+        //     });
+        //     .filter(function (el: FilterItem) {
+        //         return el != null && el.count > 0;
+        //     });
+        //     //this.facets.push({ filterName: prop, values: facetValues });
+        //     this.facets[prop] = facetValues;
+        // }
+
+        const facet_fields: FacetFields = res.facets;
+        let prop: keyof typeof facet_fields;
+        for (prop in facet_fields) {
+            const facetCategory = facet_fields[prop];
+            if (facetCategory.buckets) {
+                const facetItems: Array<FacetItem> = facetCategory.buckets;
+
+                let facetValues = facetItems.map((facetItem, index) => {
+                    let rObj: FacetItem;
+                    if (filterItem?.val == facetItem.val) {
+                        rObj = filterItem;
+                    } else if (this.facets[prop]?.some((e) => e.val === facetItem.val)) {
+                        // console.log(facetValue + " is included")
+                        const indexOfFacetValue = this.facets[prop].findIndex((i) => i.val === facetItem.val);
+                        // console.log(indexOfFacetValue);
+                        rObj = this.facets[prop][indexOfFacetValue];
+                        rObj.count = facetItem.count;
+                        // rObj = new FacetItem(val, count);
+                    } else {
+                        rObj = new FacetItem(facetItem.val, facetItem.count);
+                    }
+                    return rObj;
+                });
+
+                facetValues = facetValues.filter(function (el) {
+                    return el != null && el.count > 0;
+                });
+                // this.facets[prop] = facetCategory;
+                this.facets[prop] = facetValues;
+            }
+        }
+    }
+
+    private errorHandler(err: any): void {
+        this.error = err;
+        // this.loading = false;
+    }
+
+    onFilter(facetItem: FacetItem): void {
+        // console.log(facetItem.val);
+        // if (!this.activeFilterCategories.hasOwnProperty(facetItem.category)) {
+        if (!Object.prototype.hasOwnProperty.call(this.activeFilterCategories, facetItem.category)) {
+            this.activeFilterCategories[facetItem.category] = new Array<string>();
+        }
+        // if (!this.activeFilterCategories[facetItem.category].some((e) => e === facetItem.val)) {
+        if (!this.activeFilterCategories[facetItem.category].some((e) => e === facetItem.val)) {
+            this.activeFilterCategories[facetItem.category].push(facetItem.val);
+
+            this.rdrAPI.facetedSearch(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
+                (res: SolrResponse) => this.dataHandler(res, facetItem),
+                (error: any) => this.errorHandler(error),
+            );
+            // alert(this.activeFilterCategories[filter.Category]);
+            // var res = await rdrApi.search(this.searchTerm, this.activeFilterCategories, this.solrCore, this.solrHost);
+            // this.results = res.response.docs;
+            // this.numFound = res.response.numFound;
+
+            // // pagination
+            // this.pagination['total'] = res.response.numFound;
+            // this.pagination['per_page'] = res.responseHeader.params.rows;
+            // this.pagination['current_page'] = 1;
+            // this.pagination['data'] = res.response.docs;
+
+            // var facet_fields = res.facet_counts.facet_fields;
+            // for (var prop in facet_fields) {
+            //   var facetValues = facet_fields[prop].map((facetValue, i) => {
+            //     if (i % 2 === 0) {
+            //       // var rObj = { value: facetValue, count: facet_fields[prop][i + 1] };
+            //       var rObj;
+            //       if (filter.value == facetValue) {
+            //         rObj = filter;
+            //       } else if (this.facets[prop].some(e => e.value === facetValue)) {
+            //         // console.log(facetValue + " is included")
+            //         var indexOfFacetValue = this.facets[prop].findIndex(i => i.value === facetValue);
+            //         // console.log(indexOfFacetValue);
+            //         rObj = this.facets[prop][indexOfFacetValue];
+            //         rObj.count = facet_fields[prop][i + 1];
+            //       } else {
+            //         rObj = new FilterItem(facetValue, facet_fields[prop][i + 1]);
+            //       }
+            //       return rObj;
+            //     }
+            //   }).filter(function (el) {
+            //     return el != null && el.count > 0;
+            //   });
+            //   // this.facets.push({ filterName: prop, values: facetValues });
+            //   this.facets[prop] = facetValues;
+        }
+    }
+
+    onClearFacetCategory(categoryName: string): void {
+        // alert(categoryName);
+        delete this.activeFilterCategories[categoryName];
+
+        this.rdrAPI.facetedSearch(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
+            (res: SolrResponse) => {
+                this.results = res.response.docs;
+                this.numFound = res.response.numFound;
+
+                // pagination
+                this.pagination["total"] = res.response.numFound;
+                this.pagination["per_page"] = res.responseHeader.params.rows;
+                this.pagination["current_page"] = 1;
+                this.pagination["data"] = res.response.docs;
+
+                const facet_fields: FacetFields = res.facets;
+                let prop: keyof typeof facet_fields;
+                for (prop in facet_fields) {
+                    const facetCategory: FacetInstance = facet_fields[prop];
+                    if (facetCategory.buckets) {
+                        const facetItems: Array<FacetItem> = facetCategory.buckets;
+
+                        const facetValues = facetItems.map((facetItem, index) => {
+                            let rObj: FacetItem;
+                            if (this.facets[prop]?.some((e) => e.val === facetItem.val)) {
+                                // console.log(facetValue + " is included")
+                                const indexOfFacetValue = this.facets[prop].findIndex((i) => i.val === facetItem.val);
+                                // console.log(indexOfFacetValue);
+                                rObj = this.facets[prop][indexOfFacetValue];
+                                rObj.count = facetItem.count;
+                                // rObj = new FacetItem(val, count);
+                                //if facet ccategory is reactivated category, deactivate all filter items
+                                if (prop == categoryName) {
+                                    rObj.active = false;
+                                }
+                            } else {
+                                rObj = new FacetItem(facetItem.val, facetItem.count);
+                            }
+                            return rObj;
+                        });
+                        this.facets[prop] = facetValues;
+                    }
+                }
+            },
+            (error: any) => this.errorHandler(error),
+        );
+    }
+}
diff --git a/src/views/home-view/home-view-component.vue b/src/views/home-view/home-view-component.vue
new file mode 100644
index 0000000..5887dd8
--- /dev/null
+++ b/src/views/home-view/home-view-component.vue
@@ -0,0 +1,213 @@
+<template>
+    <div id="page_style" class="rows site-content page__style page__description" autocomplete="off">
+        <!-- <div class="col-6 offset-6 content column is-half is-offset-6" style="text-align: right">
+            <a class="button" href="/test" target="_self">
+                <img class="icon-spacing" src="./assets/fa/firefox.svg" style="width: 16px; height: 16px" />
+                <img class="icon-spacing" src="./assets/fa/chrome.svg" style="width: 16px; height: 16px" />
+                <img class="icon-spacing" src="./assets/fa/opera.svg" style="width: 16px; height: 16px" />
+                <img src="./assets/fa/plus.svg" style="width: 16px; height: 16px" />
+            </a>
+            <a class="button" href="/test" target="_self">
+                <img src="./assets/fa/user.svg" style="width: 16px; height: 16px" />
+            </a>
+        </div> -->
+
+        <!-- <div class="column" style="text-align: center">
+            <a href="/test" id="logo_home" target="_self">
+                <img id="logo_img_home" src="./assets/images/tethys-icon-mono.png" width="240px" style="min-width: 140px" />
+            </a>
+        </div> -->
+
+        <!-- <div class="column">
+            <div class="col text-center py-3">
+                <h1>Tethys Research Data Repository</h1>
+                <p class="lead">Data Publisher for Geoscience Austria</p>
+                <hr class="center-line" />
+            </div>
+        </div> -->
+        <div class="column">
+            <div class="col text-center py-3">
+                <h1>Tethys Research Data Repository</h1>
+                <p class="lead">Data Publisher for Geoscience Austria</p>
+                <hr class="center-line" />
+            </div>
+        </div>
+
+        <!-- <div class="column header-image align-items-center h-100">
+            <div class="col mt-3 mx-auto">
+                <div class="search-box mx-auto">
+                    <form class="my-2 my-lg-0 main-search-from-bg d-flex d-row">
+                        <input class="form-control mr-sm-2 border-0" type="text" placeholder="Search" aria-label="Search" />
+                        <button class="btn btn-secondary m-0" type="submit"><i class="fas fa-search text-white"></i></button>
+                    </form>
+                </div>
+            </div>
+        </div> -->
+        <!-- <figure class="image is-128x128">
+            <img src="https://bulma.io/images/placeholders/256x256.png" />
+        </figure> -->
+        <section data-sr id="help" class="help u-full-width featured-bg-image"></section>
+
+        <!-- <div class="columns">
+            <div class="column text-center">
+                <h1>ÜBER TETHYS</h1>
+                <p class="lead">Was sind unsere Schwerpunkte</p>
+                <hr class="center-line" />
+            </div>
+        </div> -->
+        <section class="section">
+            <div class="column is-full text-center">
+                <h1>ÜBER TETHYS</h1>
+                <p class="lead">Was sind unsere Schwerpunkte</p>
+                <hr class="center-line" />
+            </div>
+            <div class="column is-full text-left">
+                <p>
+                    TETHYS RDR ist ein publizierendes Forschungsdatenrepositorium der Geologischen Bundesanstalt (GBA), das an der GBA generierte geowisse nschaftliche
+                    Forschungsdaten veröffentlicht.
+                </p>
+                <p>
+                    Zum derzeitigen Stand wird TETHYS RDR in deutscher Sprache bereitgestellt. Die englische Version befindet sich in Vorbereitung und wird sukzessive ebenfalls zur
+                    Verfügung gestellt. Die Forschungsdatenpublikationen und die dazugehörigen Metadaten können in Deutsch und in Englisch veröffentlicht werden. Tethys RDR hat den
+                    Anspruch, publizierte Datensätze unverändert, langfristig und nachhaltig bereitzustellen. Dadurch ist Tethys ein Forschungsdatenrepositorium, das ein
+                    permanentes Referenzieren ermöglicht und somit die darin publizierten Datensätze zitierfähig macht.
+                </p>
+                <p>
+                    Der Name Tethys kommt ursprünglich aus der griechischen Mythologie und benennt eine Titanin und Meeresgöttin. Ende des 19. Jahrhunderts entdeckte Eduard Suess
+                    (1831–1914), ein bedeutender österreichischer Geologe, den mesozoischen Ozean und benannte ihn nach dieser Tethys.
+                </p>
+            </div>
+        </section>
+
+        <vs-input v-on:search-change="onSearch" v-bind:placeholder="'Enter your search term...'"></vs-input>
+
+        <div class="column is-half is-offset-one-quarter" style="padding-top: 0; margin-top: 0">
+            <!-- <div class="tabs is-centered">
+                <ul id="id-results-tabs">
+                    <li class="search_tab is-active">
+                        <a target="_self">Web</a>
+                    </li>
+                    <li class="search_tab">
+                        <a target="_self">Images</a>
+                    </li>
+                    <li class="search_tab">
+                        <a target="_self">Videos</a>
+                    </li>
+                    <li class="search_tab">
+                        <a target="_self">Homepages</a>
+                    </li>
+                    <li class="search_tab">
+                        <a target="_self">Food</a>
+                    </li>
+                    <li class="search_tab">
+                        <a target="_self">Books</a>
+                    </li>
+                </ul>
+            </div> -->
+            <div v-if="results.length > 0" class="result-list-info">
+                <div class="resultheader">
+                    Your search yielded
+                    <strong>{{ numFound }}</strong> results:
+                </div>
+            </div>
+            <div v-else-if="results.length == 0">
+                <div class="resultheader">
+                    Your search yielded
+                    <strong> 0</strong> results:
+                </div>
+            </div>
+
+            <!-- <div id="id-pro-sign-in" class="notification" style="">
+                    <button
+                        class="delete"
+                        onclick="dismissProNotification();"
+                    ></button>
+                    It appears that you're not signed in. You'll need to
+                    <a href="/pro" target="_self">signup for Pro</a> or become a
+                    <a
+                        href="https://coil.com/?ref=InfinitySearch2229"
+                        target="_self"
+                        >Coil member</a
+                    >
+                    to access our results.
+                </div> -->
+        </div>
+
+        <div class="columns">
+            <div id="id-side-bar" class="column is-4 sidebar_column" style="padding-top: 1.2rem; padding-right: 1.5rem">
+                <div id="externals" class="">
+                    <div class="card" v-for="(facetItems, key, index) in facets" :key="index" name="external_card" style="margin-bottom: 0px">
+                        <facet-category v-bind:facetItems="facetItems" v-bind:filterName="key" @filter="onFilter"></facet-category>
+                    </div>
+                    <!-- <div class="card" name="external_card" style="margin-bottom: 0px">
+                        <header class="card-header">
+                            <p class="card-header-title" style="font-weight: normal; padding-right: 5px">
+                                <a
+                                    id="https://en.wikipedia.org/w/index.php?search="
+                                    href="https://en.wikipedia.org/w/index.php?search=test"
+                                    name="external_link_0"
+                                    style="display: block"
+                                    rel="noreferrer noopener"
+                                    target="_self"
+                                >
+                                    <img src="/static/images/favicons/wikipedia.ico" name="external_icon_0'" class="external-icon" />
+                                    <span hidden="" class="external-text" name="external_text_0" style="font-size: 0.95rem; display: inline"> Wikipedia Results </span>
+                                </a>
+                            </p>
+                        </header>
+                    </div>
+                    <div class="card" name="external_card" style="margin-bottom: 0px">
+                        <header class="card-header">
+                            <p class="card-header-title" style="font-weight: normal; padding-right: 5px">
+                                <a
+                                    id="https://duckduckgo.com/?q="
+                                    href="https://duckduckgo.com/?q=test"
+                                    name="external_link_1"
+                                    style="display: block"
+                                    rel="noreferrer noopener"
+                                    target="_self"
+                                >
+                                    <img src="/static/images/favicons/duckduckgo.ico" name="external_icon_1'" class="external-icon" />
+                                    <span hidden="" class="external-text" name="external_text_1" style="font-size: 0.95rem; display: inline"> DuckDuckGo Results </span>
+                                </a>
+                            </p>
+                            <span
+                                class="clickableIcon"
+                                onclick="removeExternalClickable(this)"
+                                style="cursor: pointer; display: block; margin: auto; margin-right: 6px; min-width: 0.5em"
+                            >
+                                <img
+                                    class="handle fa-ellipsis-v"
+                                    src="/static/images/fa/ellipsis-v.svg"
+                                    style="cursor: pointer; display: block; margin: auto; margin-right: 12px; min-width: 0.5em; width: 16px; height: 16px"
+                                />
+                            </span>
+                        </header>
+                    </div> -->
+                </div>
+            </div>
+
+            <div class="col col-8 column is-8 results_column" style="padding-top: 1.2rem; padding-right: 0.5rem">
+                <div class="column" v-if="activeFilterCategories && Object.keys(activeFilterCategories).length > 0">
+                    <span class="active-filter-items" v-for="(values, key, index) in activeFilterCategories" :key="index">
+                        <active-facet-category v-bind:filterItems="values" :categoryName="key" @clearFacetCategory="onClearFacetCategory"></active-facet-category>
+                    </span>
+                </div>
+                <div class="results">
+                    <!-- Results section -->
+                    <vs-result v-bind:datasets="results"></vs-result>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import HomeViewComponent from "./home-view-component";
+export default HomeViewComponent;
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+@import "./home-view-component.scss"; // $text-primary would be defined in that file
+</style>
diff --git a/src/views/map-view/map-view-component.ts b/src/views/map-view/map-view-component.ts
new file mode 100644
index 0000000..e2f4722
--- /dev/null
+++ b/src/views/map-view/map-view-component.ts
@@ -0,0 +1,9 @@
+import { Options, Vue } from "vue-class-component";
+// import { Prop } from "vue-property-decorator";
+
+@Options({
+    name: "MapViewComponent",
+})
+export default class MapViewComponent extends Vue {
+    results: Array<any> = [];
+}
diff --git a/src/views/map-view/map-view-component.vue b/src/views/map-view/map-view-component.vue
new file mode 100644
index 0000000..874a348
--- /dev/null
+++ b/src/views/map-view/map-view-component.vue
@@ -0,0 +1,8 @@
+<template>
+    <span>INTRO</span>
+</template>
+
+<script lang="ts">
+import MapViewComponent from "./map-view-component";
+export default MapViewComponent;
+</script>