(wip) introduce routing

src/App.vue

@@ -1,16 +1,24 @@
 <script lang="ts">
-import MainMenu from './components/MainMenu.vue'
-import SearchBar from './components/SearchBar.vue'
-import FilterView from './components/papers/FilterView.vue'
-import PaperList from './components/papers/PaperList.vue'
-import FooterMenu from './components/FooterMenu.vue'
+import MainMenu from '@/components/MainMenu.vue'
+import SearchBar from '@/components/SearchBar.vue'
+import FooterMenu from '@/components/FooterMenu.vue'
+
+export type Papers = {
+  body: string
+  content: string
+  name: string
+  resolution: string
+  originator: string
+  paper_type: string
+  published_at: string
+  reference: string
+  url: string
+}
 
 export default {
   components: {
     MainMenu,
     SearchBar,
-    FilterView,
-    PaperList,
     FooterMenu,
   },
   data() {
@@ -21,20 +29,30 @@ export default {
         value: '',
         type: '',
       },
-      papers: [],
+      apiUri: 'https://raw.githubusercontent.com/CodeforLeipzig/stadtratmonitor/master/input.json', 
+      papers: [] as Papers[],
       paperFilter: {
         type: '',
         originator: '',
       },
     }
-  }
+  },
+  methods: {
+    async fetchData() {
+      this.papers = await (await fetch(this.apiUri)).json()
+    }, 
+  },
+  created() {
+    this.fetchData()
+  },
 }
 </script>
 
 <template>
   <header class="w-screen flex flex-col place-content-center bg-background-100 dark:bg-background-900 text-text-900 dark:text-text-100">
     <div class="flex flex-row place-content-center">
-      <h1 class="p-2 text-xl">{{ applicationName }} {{ cityName }}</h1>
+      <h1 class="p-2 text-xl">
+        <RouterLink to="/">{{ applicationName }} {{ cityName }}</RouterLink></h1>
       <MainMenu />
     </div>
     <SearchBar
@@ -44,18 +62,10 @@ export default {
   </header>
 
   <main class="flex flex-row max-w-5xl m-auto">
-    <FilterView
-      @paperFilter="(filter) => paperFilter = filter"
-      :papers="papers"
-    />
-    <PaperList
-      @papers="(p) => papers = p"
-      :paperQuery="search"
-      :paperFilter="paperFilter"
-    />
-  </main>
 
+  </main>
+    <RouterView :papers="papers"></RouterView>
   <footer>
-    <FooterMenu />
+    <!-- <FooterMenu /> -->
   </footer>
 </template>

src/components/MainMenu.vue

@@ -2,16 +2,20 @@
 export default {
   data() {
     return {
-      menuEntries: this.mainMenuEntries,
+      entries: this.mainMenuEntries
     }
-  }, 
+  }
 }
 </script>
 
 <template>
   <ul class="flex flex-row place-content-center">
-    <li class="p-2 place-content-center" v-for="(entry, i) of menuEntries" :key="i">
-      <a :href="entry.uri">{{ entry.name }}</a>
+    <li
+      class="p-2 place-content-center"
+      v-for="(entry, i) of entries"
+      :key="i"
+    >
+      <RouterLink :to="entry.uri">{{ entry.name }}</RouterLink>
     </li>
   </ul>
 </template>

src/components/papers/FilterView.vue

@@ -1,6 +1,4 @@
 <script lang="ts">
-import { type Papers } from './PaperList.vue'
-
 export default {
   updated() {
     this.$emit('paperFilter', this.paperFilter)
@@ -63,11 +61,11 @@ export default {
     }
   },
   props: {
-    papers: Array<Papers>,
+    papers: Array<any>,
   },
   computed: {
     paperOriginators() {
-      return [...new Set(this.papers?.map((paper: Papers) => paper.originator))].sort()
+      return [...new Set(this.papers?.map((paper: any) => paper.originator))].sort()
     },
     /* paperType() {
       return this.paperTypes.filter((type) => type.key == )

src/components/papers/PaperList.vue

@@ -1,31 +1,9 @@
 <script lang="ts">
-
-export type Papers = {
-  body: string
-  content: string
-  name: string
-  resolution: string
-  originator: string
-  paper_type: string
-  published_at: string
-  reference: string
-  url: string
-}
+import { type Papers } from '@/App.vue'
 
 export default {
-  created() {
-    this.fetchData()
-  },
-  updated() {
-    this.$emit('papers', this.papers)
-  },
-  data() {
-    return {
-      apiUri: 'https://raw.githubusercontent.com/CodeforLeipzig/stadtratmonitor/master/input.json', 
-      papers: [] as Papers[],
-    }
-  }, 
   props: {
+    papers: Array<any>,
     paperQuery: Object,
     paperFilter: Object,
   },
@@ -52,9 +30,6 @@ export default {
     }, 
   },
   methods: {
-    async fetchData() {
-      this.papers = await (await fetch(this.apiUri)).json()
-    }, 
     openPaper() {
 
     },

src/main.ts

@@ -1,7 +1,8 @@
-import './assets/main.css'
+import '@/assets/main.css'
 
 import { createApp } from 'vue'
-import App from './App.vue'
+import App from '@/App.vue'
+import router from '@/router'
 
 const app = createApp(App)
 
@@ -10,10 +11,10 @@ app.config.globalProperties = {
   apiUri: 'https://joergreichert.de/srm/input.json',
   applicationName: 'Stadtratmonitor',
   cityName: 'Leipzig',
-  mainMenuEntries: {
+    mainMenuEntries: {
     0: {
-      name: 'Startseite',
-      uri: '/',
+      name: 'Themen',
+      uri: '/themen',
     }, 
     1: {
       name: 'Karte',
@@ -36,4 +37,4 @@ app.config.globalProperties = {
   },
 }
 
-app.mount('#app')
+app.use(router).mount('#app')

src/router/index.ts

@@ -0,0 +1,16 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Landing from '@/views/TheLanding.vue'
+
+const routes: Array<any> = [
+    { path: '/', name: 'landing', component: Landing },
+    { path: '/themen/', name: 'topics', component: ()=>import("@/views/TheTopics.vue") },
+    { path: '/themen/:reference', name: 'topics.show', component: ()=>import("@/views/TopicsShow.vue") },
+    { path: '/karte', name: 'map', component: ()=>import("@/views/TheMap.vue") },
+    { path: '/doku', name: 'documentation', component: ()=>import("@/views/TheDocumentation.vue") },
+]
+
+const router: any = createRouter({
+    history: createWebHistory(),
+    routes
+})
+export default router

src/views/TheAbout.vue

@@ -0,0 +1,7 @@
+<script lang="ts">
+export default {}
+</script>
+
+<template>
+    About
+</template>

src/views/TheDocumentation.vue

@@ -0,0 +1,7 @@
+<script lang="ts">
+export default {}
+</script>
+
+<template>
+    {{ $route.name }}
+</template>

src/views/TheImprint.vue

@@ -0,0 +1,7 @@
+<script lang="ts">
+export default {}
+</script>
+
+<template>
+    Imprint
+</template>

src/views/TheLanding.vue

@@ -0,0 +1,7 @@
+<script lang="ts">
+export default {}
+</script>
+
+<template>
+    Landing Page
+</template>

src/views/TheMap.vue

@@ -0,0 +1,7 @@
+<script lang="ts">
+export default {}
+</script>
+
+<template>
+    Map
+</template>

src/views/TheTopics.vue

@@ -0,0 +1,33 @@
+<script lang="ts">
+import FilterView from '@/components/papers/FilterView.vue'
+import PaperList from '@/components/papers/PaperList.vue'
+
+export default {
+  components: {
+    FilterView,
+    PaperList,
+  },
+  data() {
+    return {
+      papers: this.papers,
+    }
+  },
+  computed: {
+    topics() {
+      return [...new Set(this.papers?.map((paper: any) => paper.reference))]
+    }
+  }
+}
+</script>
+
+<template>
+  <FilterView
+    @paperFilter="(filter) => paperFilter = filter"
+    :papers="papers"
+  />
+  <PaperList
+    :paperQuery="search"
+    :paperFilter="paperFilter"
+  />
+  {{ topics }}
+</template>

src/views/TopicsShow.vue

@@ -0,0 +1,16 @@
+<script lang="ts">
+export default {
+  computed: {
+    topicId() {
+      return this.$route.params.id
+    },
+    topic() {
+      this.papers?.find( (paper: any) => paper.reference == this.topicId )
+    }
+  },
+}
+</script>
+
+<template>
+  {{ $route.name }}
+</template>

src/vue-shim.d.ts

@@ -0,0 +1,4 @@
+declare module "*.vue" {
+    import Vue from "vue";
+    export default Vue;
+}