Compare commits
11 commits
8129ae3ee0
...
0ce9cbaeee
| Author | SHA1 | Date | |
|---|---|---|---|
0ce9cbaeee
|
|||
|
9bbb1f3e03
|
|||
|
d08a2cfdc2
|
|||
|
7203110a55
|
|||
|
8e852e7041
|
|||
|
2fb3aada97
|
|||
|
f21308a003
|
|||
|
780bf270ef
|
|||
|
e5f28fede7
|
|||
|
db6358b0b7
|
|||
|
98f8647b64
|
7 changed files with 178 additions and 101 deletions
|
|
@ -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>
|
<body class="bg-background-50 dark:bg-background-950 text-text-950 dark:text-text-50">
|
||||||
<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>
|
||||||
|
|
|
||||||
|
|
@ -29,11 +29,11 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>search.value
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<header class="w-screen flex flex-col place-content-center">
|
<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 bg-amber-300 text-sky-700">
|
<div class="flex flex-row place-content-center">
|
||||||
<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"
|
||||||
:filterValue="search.value"
|
:paperQuery="search"
|
||||||
:paperFilter="paperFilter"
|
:paperFilter="paperFilter"
|
||||||
/>
|
/>
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
|
|
@ -1,55 +1,3 @@
|
||||||
/* 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 {
|
||||||
|
|
@ -60,13 +8,7 @@
|
||||||
|
|
||||||
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;
|
||||||
|
|
|
||||||
|
|
@ -1,26 +1,63 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { toValue } from 'vue'
|
import { type Papers } from './Papers.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: [
|
||||||
{
|
{
|
||||||
key: 'DS',
|
value: 'Anfrage',
|
||||||
value: 'Beschlussvorlage',
|
key: 'F',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'Einwohneranfrage',
|
||||||
|
key: 'EF',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'A',
|
|
||||||
value: 'Antrag',
|
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',
|
||||||
|
},
|
||||||
],
|
],
|
||||||
paperFilter: {
|
paperFilter: {
|
||||||
type: '',
|
type: {
|
||||||
|
key: '',
|
||||||
|
value: '',
|
||||||
|
},
|
||||||
originator: '',
|
originator: '',
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
@ -44,19 +81,38 @@ export default {
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<form class="mr-4 mt-4">
|
<form class="mr-4 mt-4">
|
||||||
<select
|
<fieldset class="flex flex-row mb-4">
|
||||||
class="w-40"
|
<legend>Kategorie</legend>
|
||||||
v-model="paperFilter.type">
|
<select
|
||||||
<option
|
class="w-40 p-2 bg-background-100 rounded-lg"
|
||||||
v-for="(type, i) of paperTypes"
|
v-model="paperFilter.type">
|
||||||
:key="i"
|
<option
|
||||||
>{{ type.value }}
|
v-for="(type, i) of paperTypes"
|
||||||
</option>
|
:key="i"
|
||||||
</select>
|
:value="type"
|
||||||
<select
|
>{{ type.value }}
|
||||||
class="w-40"
|
</option>
|
||||||
v-model="paperFilter.originator">
|
</select>
|
||||||
<option v-for="(originator, i) of paperOriginators" :key="i">{{ originator }}</option>
|
<button
|
||||||
</select>
|
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"
|
||||||
|
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>
|
||||||
|
|
@ -25,21 +25,26 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
filterValue: String,
|
paperQuery: Object,
|
||||||
paperFilter: Array,
|
paperFilter: Object,
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
filteredData() {
|
filteredData() {
|
||||||
const filterValue: String = this.filterValue
|
const paperQuery: String = this.paperQuery?.value
|
||||||
let filteredPapers: Papers[] = this.papers
|
let filteredPapers: Papers[] = this.papers
|
||||||
if (filterValue !== '') {
|
if (paperQuery !== '') {
|
||||||
filteredPapers = this.papers.filter((paper) => {
|
filteredPapers = this.papers.filter((paper) => {
|
||||||
return paper.name.toLowerCase().includes(filterValue.toLowerCase())
|
return paper.name.toLowerCase().includes(paperQuery.toLowerCase())
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
if (this.paperFilter?.type !== '') {
|
if (this.paperFilter?.type !== '') {
|
||||||
filteredPapers = filteredPapers.filter((paper) => {
|
filteredPapers = filteredPapers.filter((paper) => {
|
||||||
return paper.reference.includes(this.paperFilter?.type)
|
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 filteredPapers
|
return filteredPapers
|
||||||
|
|
@ -55,8 +60,10 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
{{ paperFilter }}
|
<ul
|
||||||
<ul v-if="filteredData.length">
|
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"
|
||||||
|
|
|
||||||
|
|
@ -21,29 +21,29 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<form class="sticky top-0 flex flex-row place-content-center bg-amber-200">
|
<form class="sticky top-0 flex flex-row place-content-center">
|
||||||
<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-amber-400 text-sky-700 text-2xl text-center focus-visible:outline focus-visible:outline-current"
|
class="p-6 grow bg-transparent placeholder:text-text-200 text-2xl text-center focus-visible:outline focus-visible:outline-current"
|
||||||
type="search"
|
type="search"
|
||||||
placeholder="Suche z. B. nach XY"
|
placeholder="z. B. 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-amber-400 hover:bg-amber-500 rounded-l-lg border-r-2 border-amber-500 text-white"
|
class="py-2 px-4 bg-primary-button-500 hover:bg-primary-button-600 rounded-l-lg text-white"
|
||||||
@click.prevent="submit('filter')"
|
@click.prevent="submit('filter')"
|
||||||
aria-keyshortcuts="Enter"
|
aria-keyshortcuts="Enter"
|
||||||
>Filter
|
>Suchen
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="py-2 px-4 bg-amber-400 hover:bg-amber-500 rounded-r-lg text-white"
|
class="py-2 px-4 bg-secondary-button-500 hover:bg-secondary-button-600 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"
|
||||||
>Assistent
|
>Fragen
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,83 @@
|
||||||
/** @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: [],
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue