This commit is contained in:
Vri 🌈 2023-06-26 21:41:56 +02:00
parent 92ab1d5d46
commit 71dc064ab6
Signed by: vrifox
GPG key ID: D40098E5B60B2197
18 changed files with 316 additions and 289 deletions

View file

@ -1,63 +1,38 @@
<script lang="ts">
<script setup lang="ts">
import type { Paper, Search, Filter } from '@/types'
import { papers, topics, papersfetch } from '@/store'
import MainMenu from '@/components/MainMenu.vue'
import SearchBar from '@/components/SearchBar.vue'
import FilterView from './components/papers/FilterView.vue'
import FooterMenu from '@/components/FooterMenu.vue'
import { onMounted } from 'vue'
export type Papers = {
body: string
content: string
name: string
resolution: string
originator: string
paper_type: string
published_at: string
reference: string
url: string
const applicationName: string = 'Stadtratmonitor'
const cityName: string = 'Leipzig'
let search: Search = {
value: '',
type: '',
}
export default {
components: {
MainMenu,
SearchBar,
FilterView,
FooterMenu,
},
data() {
return {
applicationName: this.applicationName,
cityName: this.cityName,
search: {
value: '',
type: '',
},
filter: {
type: {
key: '',
value: '',
},
originator: '',
},
apiUri: 'https://raw.githubusercontent.com/CodeforLeipzig/stadtratmonitor/master/input.json',
papers: [] as Papers[],
}
},
methods: {
async fetchData() {
this.papers = await (await fetch(this.apiUri)).json()
},
},
created() {
this.fetchData()
let filter: Filter = {
type: {
key: '',
value: '',
},
originator: '',
}
onMounted (() => papersfetch() )
/* onMounted(() => topics.process() ) */
</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">
<RouterLink to="/">{{ applicationName }} {{ cityName }}</RouterLink></h1>
<RouterLink
to="/"
>{{ applicationName }} {{ cityName }}
</RouterLink>
</h1>
<MainMenu />
</div>
<SearchBar
@ -67,11 +42,12 @@ export default {
</header>
<main class="flex flex-row max-w-5xl m-auto">
{{ papers }}
<RouterView
:papers="papers"
:search="search"
:filter="filter"
></RouterView>
>
</RouterView>
</main>
<footer>
<!-- <FooterMenu /> -->

View file

@ -0,0 +1,106 @@
<script setup lang="ts">
import type { Paper, Filter } from '@/types'
import { computed, onUpdated } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute()
const props = defineProps<{
papers: Array<Paper>,
}>()
const paperTypes = [
{
value: 'Anfrage',
key: 'F',
}, {
value: 'Einwohneranfrage',
key: 'EF',
}, {
value: 'Antrag',
key: 'A',
}, {
value: 'Antwort zur Anfrage',
key: 'AW',
}, {
value: 'Änderungsantrag',
key: 'ÄA',
}, {
value: 'Beschlussvorlage',
key: 'DS',
}, {
value: 'Informationsvorlage',
key: 'Ifo',
}, {
value: 'Neufassung',
key: 'NF',
}, {
value: 'Petition',
key: 'P',
}, {
value: 'Verwaltungsstandpunkt',
key: 'VSP',
}, {
value: 'Wichtige Angelegenheit',
key: 'WA',
},
]
const filter: Filter = {
type: {
key: '',
value: '',
},
originator: '',
}
const paperOriginators = computed(() => {
return [...new Set(props.papers?.map((paper: Paper) => paper.originator))].sort()
})
/* const paperType = computed(() => {
return paperTypes.filter((type) => type.key == )
}) */
onUpdated(() => {
route.$emit('filter', filter)
})
</script>
<template>
<form class="mr-4 mt-4">
<fieldset class="flex flex-row mb-4">
<legend>Kategorie</legend>
<select
class="w-40 p-2 bg-background-100 dark:bg-background-900 rounded-lg"
v-model="filter.type"
>
<option
v-for="(type, i) of paperTypes"
:key="i"
:value="type"
>{{ type.value }}
</option>
</select>
<button
class="pl-2"
@click.prevent="filter.type = { key: '', value: ''}"
title="zurücksetzen"
>
</button>
</fieldset>
<fieldset class="flex flex-row mb-4">
<legend>Einreicher</legend>
<select
class="w-40 p-2 bg-background-100 dark:bg-background-900 rounded-lg"
v-model="filter.originator">
<option
v-for="(originator, i) of paperOriginators"
:key="i"
>{{ originator }}
</option>
</select>
<button
class="pl-2"
@click.prevent="filter.originator = ''"
title="zurücksetzen"
>
</button>
</fieldset>
</form>
</template>

View file

@ -1,116 +0,0 @@
<script lang="ts">
export default {
updated() {
this.$emit('filter', this.filter)
},
data() {
return {
paperTypes: [
{
value: 'Anfrage',
key: 'F',
},
{
value: 'Einwohneranfrage',
key: 'EF',
},
{
value: 'Antrag',
key: 'A',
},
{
value: 'Antwort zur Anfrage',
key: 'AW',
},
{
value: 'Änderungsantrag',
key: 'ÄA',
},
{
value: 'Beschlussvorlage',
key: 'DS',
},
{
value: 'Informationsvorlage',
key: 'Ifo',
},
{
value: 'Neufassung',
key: 'NF',
},
{
value: 'Petition',
key: 'P',
},
{
value: 'Verwaltungsstandpunkt',
key: 'VSP',
},
{
value: 'Wichtige Angelegenheit',
key: 'WA',
},
],
filter: {
type: {
key: '',
value: '',
},
originator: '',
},
}
},
props: {
papers: Array<any>,
},
computed: {
paperOriginators() {
return [...new Set(this.papers?.map((paper: any) => paper.originator))].sort()
},
/* paperType() {
return this.paperTypes.filter((type) => type.key == )
}, */
},
methods: {
}
}
</script>
<template>
<form class="mr-4 mt-4">
<fieldset class="flex flex-row mb-4">
<legend>Kategorie</legend>
<select
class="w-40 p-2 bg-background-100 dark:bg-background-900 rounded-lg"
v-model="filter.type">
<option
v-for="(type, i) of paperTypes"
:key="i"
:value="type"
>{{ type.value }}
</option>
</select>
<button
class="pl-2"
@click.prevent="filter.type = { key: '', value: ''}"
title="zurücksetzen"
>
</button>
</fieldset>
<fieldset class="flex flex-row mb-4">
<legend>Einreicher</legend>
<select
class="w-40 p-2 bg-background-100 dark:bg-background-900 rounded-lg"
v-model="filter.originator">
<option v-for="(originator, i) of paperOriginators" :key="i">{{ originator }}</option>
</select>
<button
class="pl-2"
@click.prevent="filter.originator = ''"
title="zurücksetzen"
>
</button>
</fieldset>
</form>
</template>

View file

@ -1,8 +1,6 @@
<script lang="ts">
export default {
}
<script setup lang="ts">
</script>
<template>
<div></div>
Paper
</template>

View file

@ -1,67 +1,61 @@
<script lang="ts">
import { type Papers } from '@/App.vue'
<script setup lang="ts">
import type { Topic, Search, Filter } from '@/types'
import { computed } from 'vue';
export default {
props: {
search: Object,
filter: Object,
topics: Array<Object>,
},
computed: {
filteredData(): Array<Object> {
const paperQuery: String = this.search?.value
let filteredTopics: Array<Object> = this.topics as Array<Object>
/* if (paperQuery !== '') {
filteredTopics = this.topics?.filter((topic: Object) => {
return topic.papers?.filter().name.toLowerCase().includes(paperQuery.toLowerCase()) || paper.content.toLowerCase().includes(paperQuery.toLowerCase()) || paper.reference.toLowerCase().includes(paperQuery.toLowerCase())
}) as Array<Object>
} */
const props = defineProps<{
topics: Array<Topic>,
search: Search,
filter: Filter,
}>()
const filteredData = computed(() => {
//const searchValue: string = search['value'];
let filteredTopics = props.topics
/* if (searchValue !== '') {
filteredTopics = this.topics?.filter((topic: Object) => {
return topic.papers?.filter().name.toLowerCase().includes(searchValue.toLowerCase()) || paper.content.toLowerCase().includes(searchValue.toLowerCase()) || paper.reference.toLowerCase().includes(searchValue.toLowerCase())
}) as Array<Object>
} */
/* if (this.filter?.type !== '') {
filteredTopics = filteredTopics.filter((topic: any) => {
return topic.reference.includes(this.filter?.type.key) && topic.paper_type.includes(this.filter?.type.value)
})
}
if (this.filter?.originator !== '') {
filteredTopics = filteredTopics.filter((topic: any) => {
return topic.originator.includes(this.filter?.originator)
})
} */
return filteredTopics
},
},
methods: {
openPaper() {
filteredTopics = filteredTopics.filter((topic: any) => {
return topic.reference.includes(this.filter?.type.key) && topic.paper_type.includes(this.filter?.type.value)
})
}
if (this.filter?.originator !== '') {
filteredTopics = filteredTopics.filter((topic: any) => {
return topic.originator.includes(this.filter?.originator)
})
} */
return filteredTopics
})
const filteredDataLength = computed(() => {
if (filteredData.value !== undefined) {
return Object.keys(filteredData).length
} else {
return 0
}
})
},
date(paperDate: string) {
const date = new Date(paperDate)
return new Intl.DateTimeFormat('de-DE', { dateStyle: 'full' }).format(date)
},
filteredDataLength(): Number {
return Object.keys(this.filteredData).length
},
},
function date(paperDate: Date) {
const date = new Date(paperDate)
return new Intl.DateTimeFormat('de-DE', { dateStyle: 'full' }).format(date)
}
</script>
<template>
{{ topics }}
<ul
v-if="filteredDataLength"
class="w-full grid grid-flow-row gap-2 my-2"
>
<p>Wir konnten {{ filteredDataLength }} Einträge finden</p>
{{ filteredData }}
<li
v-for="(topic, i) in filteredData"
:key="i"
>
<article
class="p-4 rounded-lg bg-background-100 dark:bg-background-900"
@click.prevent="openPaper()"
>
<h4 class="text-xl">{{ topic }}</h4>
<p>{{ date(topic.papers[0].published_at) }}: <a :href="topic.papers[0].url" class="text-secondary-button-500">{{ paper.paper_type}} von {{ paper.originator }}</a></p>
<h4 class="text-xl">{{ topic.papers[0].name }}</h4>
<!-- <p>{{ date(topic.papers[0].published_at) }}: <a :href="topic.papers[0].url" class="text-secondary-button-500">{{ paper.paper_type}} von {{ paper.originator }}</a></p> -->
</article>
</li>
</ul>

View file

@ -8,10 +8,7 @@ const app = createApp(App)
app.config.globalProperties = {
...app.config.globalProperties,
apiUri: 'https://joergreichert.de/srm/input.json',
applicationName: 'Stadtratmonitor',
cityName: 'Leipzig',
mainMenuEntries: {
mainMenuEntries: {
0: {
name: 'Themen',
uri: '/themen',

View file

@ -2,16 +2,28 @@ 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"),
props: { topics: true },
},
{ 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") },
{
path: '/',
name: 'landing',
component: Landing
}, {
path: '/themen/',
name: 'topics',
component: ()=>import("@/views/TheTopics.vue"),
props: { topics: true, search: true },
}, {
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({

34
src/store/index.ts Normal file
View file

@ -0,0 +1,34 @@
import { reactive, ref } from 'vue'
import type { Paper, Topic } from '@/types'
const apiUrl: URL = new URL('https://raw.githubusercontent.com/CodeforLeipzig/stadtratmonitor/master/input.json')
export let papers: Array<Paper> = reactive([])
export let topics: Array<Topic> = reactive([])
export async function papersfetch() {
papers = await (await fetch(apiUrl)).json()
/* const topicReferences = await [...new Set(papers?.map((paper: Paper) => paper.reference))]
topics = await topicReferences.map( (reference: string) => {
return {
'reference': reference,
'papers': papers?.filter( (paper: Paper) => paper.reference === reference),
}
}) */
}
/* export function paperprocess() */
/* export const test = reactive({
testi: papers.papers,
funk() {
return [...new Set(papers.papers?.map((paper: Paper) => paper.reference))]
}
}) */
/* export const = reactive({
topics: Array<Topic>,
topicReferences: Set<String>,
async process() {
},
}) */

29
src/types.ts Normal file
View file

@ -0,0 +1,29 @@
export interface Topic {
reference: string,
papers: Array<Paper>,
}
export interface Paper {
body: string,
content: string,
name: string,
resolution: any,
originator: string,
paper_type: string,
published_at: string,
reference: string,
url: string,
}
export interface Search {
value: string,
type: string,
}
export interface Filter {
type: {
key: string,
value: string,
},
originator: string,
}

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -1,39 +1,31 @@
<script lang="ts">
import FilterView from '@/components/papers/FilterView.vue'
<script setup lang="ts">
import type { Topic, Paper, Search, Filter } from '@/types'
import { papers } from '@/store'
import { computed } from 'vue';
import FilterSidebar from '@/components/papers/FilterSidebar.vue'
import TopicList from '@/components/papers/TopicList.vue'
export default {
components: {
FilterView,
TopicList,
},
computed: {
topics(): Array<Object> {
const topicReferences = [...new Set(this.papers?.map((paper: any) => paper.reference))]
return topicReferences.map( (ref: String) => {
return {
'ref': ref,
'papers': this.papers?.filter( (paper: any) => paper.reference === ref) as Object,
}
})
},
},
props: {
papers: Array,
search: Object,
filter: Object,
}
}
const props = defineProps<{
search: Search,
filter: Filter,
}>()
const topics = computed(() => {
const topicReferences = [...new Set(papers.papers?.map((paper: Paper) => paper.reference))]
return topicReferences.map( (reference: string) => {
return {
'reference': reference,
'papers': papers.papers?.filter( (paper: Paper) => paper.reference === reference),
}
}) as Array<Topic>
})
</script>
<template>
<FilterView
@filter="(filter: any) => filter = filter"
:papers="papers"
/>
<FilterSidebar
@filter="(filter: Filter) => filter = filter"
/>
<TopicList
:topics="topics"
:search="search"
:filter="filter"
></TopicList>
:searchProp="search"
:filterProp="filter"
/>
</template>

View file

@ -1,17 +1,19 @@
<script lang="ts">
export default {
computed: {
topicId() {
return this.$route.params.id
},
topic() {
this.papers?.find( (paper: any) => paper.reference == this.topicId )
}
},
props: {
papers: Array,
},
}
<script setup lang="ts">
import { computed } from 'vue'
import type { Paper } from '@/types'
import { useRouter, useRoute } from 'vue-router'
const props = defineProps({
papers: Array<Paper>,
})
const router = useRouter()
const route = useRoute()
const topicId = computed(() => {
return route.params.id
})
const topic = computed(() => {
props.papers?.find( (paper: any) => paper.reference == topicId )
})
</script>
<template>

View file

@ -0,0 +1,8 @@
{
"folders": [
{
"path": "."
}
],
"settings": {}
}

View file

@ -7,6 +7,6 @@
"baseUrl": ".",
"paths": {
"@/*": [ "./src/*" ]
}
},
}
}