(wip) introduce routing

This commit is contained in:
Vri 🌈 2023-06-21 18:51:54 +02:00
parent 24782c2d08
commit 08e07f5963
Signed by: vrifox
GPG key ID: D40098E5B60B2197
18 changed files with 182 additions and 69 deletions

22
package-lock.json generated
View file

@ -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",

View file

@ -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",

View file

@ -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>

View file

@ -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>

View file

@ -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 == )

View file

@ -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() {
},

View file

@ -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')

16
src/router/index.ts Normal file
View file

@ -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

7
src/views/TheAbout.vue Normal file
View file

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

View file

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

7
src/views/TheImprint.vue Normal file
View file

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

7
src/views/TheLanding.vue Normal file
View file

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

7
src/views/TheMap.vue Normal file
View file

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

33
src/views/TheTopics.vue Normal file
View file

@ -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>

16
src/views/TopicsShow.vue Normal file
View file

@ -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>

4
src/vue-shim.d.ts vendored Normal file
View file

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

View file

@ -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/*" ]
}
}
}

View file

@ -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" ]
}
}