codeforleipzig/stadtratmonitor-vue
3
0
Fork 0
Code Issues Activity

Compare commits

base: codeforleipzig:0ce9cbaeeef7ded5ab815d41fce1837004c748f1
Branches Tags
codeforleipzig:main
..
compare: codeforleipzig:8129ae3ee01cf4232e45d0dd3a47e5858dc4b7d1
Branches Tags
codeforleipzig:main

No commits in common. "0ce9cbaeeef7ded5ab815d41fce1837004c748f1" and "8129ae3ee01cf4232e45d0dd3a47e5858dc4b7d1" have entirely different histories.
0ce9cbaeee ... 8129ae3ee0

7 changed files with 101 additions and 178 deletions
Show stats Expand all files Collapse all files

2
index.html
View file

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stadtratmonitor</title> <title>Stadtratmonitor</title>
</head> </head>
<body class="bg-background-50 dark:bg-background-950 text-text-950 dark:text-text-50"> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>

8
src/App.vue
View file

@ -29,11 +29,11 @@ export default {
} }
} }
} }
</script> </script>search.value
<template> <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"> <header class="w-screen flex flex-col place-content-center">
<div class="flex flex-row place-content-center"> <div class="flex flex-row place-content-center bg-amber-300 text-sky-700">
<h1 class="p-2 text-xl">{{ applicationName }} {{ cityName }}</h1> <h1 class="p-2 text-xl">{{ applicationName }} {{ cityName }}</h1>
<MainMenu /> <MainMenu />
</div> </div>
@ -50,7 +50,7 @@ export default {
/> />
<Papers <Papers
@papers="(p) => papers = p" @papers="(p) => papers = p"
:paperQuery="search" :filterValue="search.value"
:paperFilter="paperFilter" :paperFilter="paperFilter"
/> />
</main> </main>

58
src/assets/base.css
View file

@ -1,3 +1,55 @@
/* color palette from <https://github.com/vuejs/theme> */
:root {
--vt-c-white: #ffffff;
--vt-c-white-soft: #f8f8f8;
--vt-c-white-mute: #f2f2f2;
--vt-c-black: #181818;
--vt-c-black-soft: #222222;
--vt-c-black-mute: #282828;
--vt-c-indigo: #2c3e50;
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
--vt-c-text-light-1: var(--vt-c-indigo);
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
--vt-c-text-dark-1: var(--vt-c-white);
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}
/* semantic color variables for this project */
:root {
--color-background: var(--vt-c-white);
--color-background-soft: var(--vt-c-white-soft);
--color-background-mute: var(--vt-c-white-mute);
--color-border: var(--vt-c-divider-light-2);
--color-border-hover: var(--vt-c-divider-light-1);
--color-heading: var(--vt-c-text-light-1);
--color-text: var(--vt-c-text-light-1);
--section-gap: 160px;
}
@media (prefers-color-scheme: dark) {
:root {
--color-background: var(--vt-c-black);
--color-background-soft: var(--vt-c-black-soft);
--color-background-mute: var(--vt-c-black-mute);
--color-border: var(--vt-c-divider-dark-2);
--color-border-hover: var(--vt-c-divider-dark-1);
--color-heading: var(--vt-c-text-dark-1);
--color-text: var(--vt-c-text-dark-2);
}
}
*, *,
*::before, *::before,
*::after { *::after {
@ -8,7 +60,13 @@
body { body {
min-height: 100vh; min-height: 100vh;
color: var(--color-text);
background: var(--color-background);
transition: color 0.5s, background-color 0.5s; transition: color 0.5s, background-color 0.5s;
line-height: 1.6;
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-size: 15px;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;

100
src/components/Filter.vue
View file

@ -1,63 +1,26 @@
<script lang="ts"> <script lang="ts">
import { type Papers } from './Papers.vue' import { toValue } from 'vue'
import { Papers } from './Papers.vue'
export default { export default {
updated() { updated() {
this.$emit('paperFilter', this.paperFilter) this.$emit('paperFilter', this.paperFilter)
/* this.paperFilter.type = this.paperTypes.key this.paperFilter.type. */
}, },
data() { data() {
return { return {
paperTypes: [ 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', key: 'DS',
value: 'Beschlussvorlage',
}, },
{ {
value: 'Informationsvorlage', key: 'A',
key: 'Ifo', value: 'Antrag',
}, }
{
value: 'Neufassung',
key: 'NF',
},
{
value: 'Petition',
key: 'P',
},
{
value: 'Verwaltungsstandpunkt',
key: 'VSP',
},
{
value: 'Wichtige Angelegenheit',
key: 'WA',
},
], ],
paperFilter: { paperFilter: {
type: { type: '',
key: '',
value: '',
},
originator: '', originator: '',
}, },
} }
@ -81,38 +44,19 @@ export default {
<template> <template>
<form class="mr-4 mt-4"> <form class="mr-4 mt-4">
<fieldset class="flex flex-row mb-4"> <select
<legend>Kategorie</legend> class="w-40"
<select v-model="paperFilter.type">
class="w-40 p-2 bg-background-100 rounded-lg" <option
v-model="paperFilter.type"> v-for="(type, i) of paperTypes"
<option :key="i"
v-for="(type, i) of paperTypes" >{{ type.value }}
:key="i" </option>
:value="type" </select>
>{{ type.value }} <select
</option> class="w-40"
</select> v-model="paperFilter.originator">
<button <option v-for="(originator, i) of paperOriginators" :key="i">{{ originator }}</option>
class="pl-2" </select>
@click.prevent="paperFilter.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 rounded-lg"
v-model="paperFilter.originator">
<option v-for="(originator, i) of paperOriginators" :key="i">{{ originator }}</option>
</select>
<button
class="pl-2"
@click.prevent="paperFilter.originator = ''"
title="zurücksetzen"
>✖
</button>
</fieldset>
</form> </form>
</template> </template>

23
src/components/Papers.vue
View file

@ -25,26 +25,21 @@ export default {
} }
}, },
props: { props: {
paperQuery: Object, filterValue: String,
paperFilter: Object, paperFilter: Array,
}, },
computed: { computed: {
filteredData() { filteredData() {
const paperQuery: String = this.paperQuery?.value const filterValue: String = this.filterValue
let filteredPapers: Papers[] = this.papers let filteredPapers: Papers[] = this.papers
if (paperQuery !== '') { if (filterValue !== '') {
filteredPapers = this.papers.filter((paper) => { filteredPapers = this.papers.filter((paper) => {
return paper.name.toLowerCase().includes(paperQuery.toLowerCase()) return paper.name.toLowerCase().includes(filterValue.toLowerCase())
}) })
} }
if (this.paperFilter?.type !== '') { if (this.paperFilter?.type !== '') {
filteredPapers = filteredPapers.filter((paper) => { filteredPapers = filteredPapers.filter((paper) => {
return paper.reference.includes(this.paperFilter?.type.key) && paper.paper_type.includes(this.paperFilter?.type.value) return paper.reference.includes(this.paperFilter?.type)
})
}
if (this.paperFilter?.originator !== '') {
filteredPapers = filteredPapers.filter((paper) => {
return paper.originator.includes(this.paperFilter?.originator)
}) })
} }
return filteredPapers return filteredPapers
@ -60,10 +55,8 @@ export default {
</script> </script>
<template> <template>
<ul {{ paperFilter }}
v-if="filteredData.length" <ul v-if="filteredData.length">
class="w-full"
>
<li v-for="(paper, i) in filteredData" :key="i"> <li v-for="(paper, i) in filteredData" :key="i">
<article <article
class="my-4 p-2 border border-solid border-amber-300 rounded-md" class="my-4 p-2 border border-solid border-amber-300 rounded-md"

14
src/components/Search.vue
View file

@ -21,29 +21,29 @@ export default {
</script> </script>
<template> <template>
<form class="sticky top-0 flex flex-row place-content-center"> <form class="sticky top-0 flex flex-row place-content-center bg-amber-200">
<div class="flex flex-row w-full max-w-5xl"> <div class="flex flex-row w-full max-w-5xl">
<input <input
class="p-6 grow bg-transparent placeholder:text-text-200 text-2xl text-center focus-visible:outline focus-visible:outline-current" class="p-6 grow bg-transparent placeholder:text-amber-400 text-sky-700 text-2xl text-center focus-visible:outline focus-visible:outline-current"
type="search" type="search"
placeholder="z. B. XY" placeholder="Suche z. B. nach XY"
v-model="search.value" v-model="search.value"
@keyup.alt.enter.exact="submit('assist')" @keyup.alt.enter.exact="submit('assist')"
@keyup.enter.exact="submit('filter')" @keyup.enter.exact="submit('filter')"
/> />
<div class="flex flex-row p-4 place-content-center"> <div class="flex flex-row p-4 place-content-center">
<button <button
class="py-2 px-4 bg-primary-button-500 hover:bg-primary-button-600 rounded-l-lg text-white" class="py-2 px-4 bg-amber-400 hover:bg-amber-500 rounded-l-lg border-r-2 border-amber-500 text-white"
@click.prevent="submit('filter')" @click.prevent="submit('filter')"
aria-keyshortcuts="Enter" aria-keyshortcuts="Enter"
>Suchen >Filter
</button> </button>
<button <button
class="py-2 px-4 bg-secondary-button-500 hover:bg-secondary-button-600 rounded-r-lg text-white" class="py-2 px-4 bg-amber-400 hover:bg-amber-500 rounded-r-lg text-white"
@click.prevent="submit('assist')" @click.prevent="submit('assist')"
aria-keyshortcuts="Alt+Enter" aria-keyshortcuts="Alt+Enter"
title="Tastenkürzel: Alt + Enter" title="Tastenkürzel: Alt + Enter"
>Fragen >Assistent
</button> </button>
</div> </div>
</div> </div>

74
tailwind.config.js
View file

@ -1,83 +1,11 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
const colors = require('tailwindcss/colors')
export default { export default {
content: [ content: [
"./index.html", "./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}", "./src/**/*.{vue,js,ts,jsx,tsx}",
], ],
theme: { theme: {
extend: { extend: {},
colors: {
'text': { // hand-choosen
50: '#FDFDFD',
100: '#F3F3F6',
200: '#DCDCE7',
300: '#C0BFD9',
400: '#AAA8CF',
500: '#8A86BB',
600: '#6C68A1',
700: '#554F84',
800: '#403B67',
900: '#2C2849',
950: '#1A182C',
},
'background': { // hand-choosen
50: '#FDFDFD',
100: '#F3F3F6',
200: '#DCDCE7',
300: '#C0BFD9',
400: '#AAA8CF',
500: '#8A86BB',
600: '#6C68A1',
700: '#554F84',
800: '#403B67',
900: '#2C2849',
950: '#1A182C',
},
'primary-button': { // hand-choosen
DEFAULT: '#1550A3',
50: '#F7FBFF',
100: '#B2DBFF',
200: '#75B3F1',
300: '#4185D2',
400: '#2562B9',
500: '#1550A3',
600: '#0C428E',
700: '#043078',
800: '#012668',
900: '#001E58',
950: '#000C24',
},
'secondary-button': colors.slate,
'accent': colors.amber,
/* 'secondary-button': {
DEFAULT: '#e2e5e9',
100: '#d8dade',
200: '#ced0d3',
300: '#c4c6c8',
400: '#babbbe',
500: '#b0b1b3',
600: '#a6a7a9',
700: '#9c9d9e',
800: '#939394',
900: '#898a8a',
},
'accent': {
DEFAULT: '#f8d841',
100: '#fdf8df',
200: '#fdf4cf',
300: '#fcf1bf',
400: '#fbedae',
500: '#fbe99c',
600: '#fae589',
700: '#f9e175',
800: '#f9dc5e',
900: '#f8d841',
}, */
}
}
}, },
plugins: [], plugins: [],
} }