(wip) introduce routing

package-lock.json

@@ -8,7 +8,8 @@
       "name": "stadtratmonitor-vue",
       "version": "0.0.0",
       "dependencies": {
-        "vue": "^3.3.2"
+        "vue": "^3.3.2",
+        "vue-router": "^4.2.2"
       },
       "devDependencies": {
         "@rushstack/eslint-patch": "^1.2.0",
@@ -1478,6 +1479,11 @@
         "@vue/shared": "3.3.4"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
+      "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
+    },
     "node_modules/@vue/eslint-config-prettier": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/@vue/eslint-config-prettier/-/eslint-config-prettier-7.1.0.tgz",
@@ -5081,6 +5087,20 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/vue-router": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.2.tgz",
+      "integrity": "sha512-cChBPPmAflgBGmy3tBsjeoe3f3VOSG6naKyY5pjtrqLGbNEXdzCigFUHgBvp9e3ysAtFtEx7OLqcSDh/1Cq2TQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vue-template-compiler": {
       "version": "2.7.14",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",

package.json

@@ -12,7 +12,8 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "vue": "^3.3.2"
+    "vue": "^3.3.2",
+    "vue-router": "^4.2.2"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",

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;
+}

tsconfig.app.json

@@ -1,12 +1,12 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
-  "exclude": ["src/**/__tests__/*"],
+  "include": [ "env.d.ts", "src/**/*", "src/**/*.vue" ],
+  "exclude": [ "src/**/__tests__/*" ],
   "compilerOptions": {
     "composite": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [ "./src/*" ]
     }
   }
 }

tsconfig.node.json

@@ -1,9 +1,9 @@
 {
   "extends": "@tsconfig/node18/tsconfig.json",
-  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
+  "include": [ "vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*" ],
   "compilerOptions": {
     "composite": true,
     "module": "ESNext",
-    "types": ["node"]
+    "types": [ "node" ]
   }
 }