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">
<title>Stadtratmonitor</title>
</head>
<body class="bg-background-50 dark:bg-background-950 text-text-950 dark:text-text-50">
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>

8
src/App.vue
View file

@ -29,11 +29,11 @@ export default {
}
}
}
</script>
</script>search.value
<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">
<header class="w-screen flex flex-col 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>
<MainMenu />
</div>
@ -50,7 +50,7 @@ export default {
/>
<Papers
@papers="(p) => papers = p"
:paperQuery="search"
:filterValue="search.value"
:paperFilter="paperFilter"
/>
</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,
*::after {
@ -8,7 +60,13 @@
body {
min-height: 100vh;
color: var(--color-text);
background: var(--color-background);
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;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

76
src/components/Filter.vue
View file

@ -1,63 +1,26 @@
<script lang="ts">
import { type Papers } from './Papers.vue'
import { toValue } from 'vue'
import { Papers } from './Papers.vue'
export default {
updated() {
this.$emit('paperFilter', this.paperFilter)
/* this.paperFilter.type = this.paperTypes.key this.paperFilter.type. */
},
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: 'Beschlussvorlage',
},
{
value: 'Informationsvorlage',
key: 'Ifo',
},
{
value: 'Neufassung',
key: 'NF',
},
{
value: 'Petition',
key: 'P',
},
{
value: 'Verwaltungsstandpunkt',
key: 'VSP',
},
{
value: 'Wichtige Angelegenheit',
key: 'WA',
},
key: 'A',
value: 'Antrag',
}
],
paperFilter: {
type: {
key: '',
value: '',
},
type: '',
originator: '',
},
}
@ -81,38 +44,19 @@ export default {
<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 rounded-lg"
class="w-40"
v-model="paperFilter.type">
<option
v-for="(type, i) of paperTypes"
:key="i"
:value="type"
>{{ type.value }}
</option>
</select>
<button
class="pl-2"
@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"
class="w-40"
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>
</template>

23
src/components/Papers.vue
View file

@ -25,26 +25,21 @@ export default {
}
},
props: {
paperQuery: Object,
paperFilter: Object,
filterValue: String,
paperFilter: Array,
},
computed: {
filteredData() {
const paperQuery: String = this.paperQuery?.value
const filterValue: String = this.filterValue
let filteredPapers: Papers[] = this.papers
if (paperQuery !== '') {
if (filterValue !== '') {
filteredPapers = this.papers.filter((paper) => {
return paper.name.toLowerCase().includes(paperQuery.toLowerCase())
return paper.name.toLowerCase().includes(filterValue.toLowerCase())
})
}
if (this.paperFilter?.type !== '') {
filteredPapers = filteredPapers.filter((paper) => {
return paper.reference.includes(this.paperFilter?.type.key) && paper.paper_type.includes(this.paperFilter?.type.value)
})
}
if (this.paperFilter?.originator !== '') {
filteredPapers = filteredPapers.filter((paper) => {
return paper.originator.includes(this.paperFilter?.originator)
return paper.reference.includes(this.paperFilter?.type)
})
}
return filteredPapers
@ -60,10 +55,8 @@ export default {
</script>
<template>
<ul
v-if="filteredData.length"
class="w-full"
>
{{ paperFilter }}
<ul v-if="filteredData.length">
<li v-for="(paper, i) in filteredData" :key="i">
<article
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>
<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">
<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"
placeholder="z. B. XY"
placeholder="Suche z. B. nach XY"
v-model="search.value"
@keyup.alt.enter.exact="submit('assist')"
@keyup.enter.exact="submit('filter')"
/>
<div class="flex flex-row p-4 place-content-center">
<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')"
aria-keyshortcuts="Enter"
>Suchen
>Filter
</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')"
aria-keyshortcuts="Alt+Enter"
title="Tastenkürzel: Alt + Enter"
>Fragen
>Assistent
</button>
</div>
</div>

74
tailwind.config.js
View file

@ -1,83 +1,11 @@
/** @type {import('tailwindcss').Config} */
const colors = require('tailwindcss/colors')
export default {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
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',
}, */
}
}
extend: {},
},
plugins: [],
}