katja/WebAdmin3.0
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Suchfunktion Adresse, Hilfe und Info Links

Browse Source
This commit is contained in:
Katja Hedemann
2023-04-20 10:38:55 +02:00
parent 2b8ad2b416
commit d48a51f0e3
12 changed files with 176 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app.vue
View File

@ -1,5 +1,15 @@
<template>
<div class="main-container">
<div class="header">
<p>
<router-link to="/header/help">
HILFE
</router-link>
<router-link to="/header/info">
INFO
</router-link>
</p>
</div>
<div class="sidenav">
<div class="sidenav-content">
<h1 class="menu-heading">
@ -9,7 +19,7 @@
<router-link to="/">
Home
</router-link>
<router-link to="/adresses">
<router-link to="/adresses/adresses_index">
Adressverwaltung
</router-link>
</p>
@ -22,6 +32,7 @@
</template>
<script></script>
<style scoped>
.main-container {
max-width: 70vw;

45
public/main.css → assets/main.css
View File

@ -1,3 +1,14 @@
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "TimesNewRoman";
}
.heading {
background-color: beige;
}
.main-container {
max-width: 45vw;
margin: auto;
@ -66,3 +77,37 @@
.sidenav a {font-size: 18px;}
}
/* Styling for adresses */
input {
display: block;
width: 350px;
margin: 20px auto;
padding: 10px 45px;
background: white url("assets/search.svg") no-repeat 15px center;
background-size: 15px 15px;
font-size: 16px;
border: none;
border-radius: 5px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.item {
width: 350px;
margin: 0 auto 10px auto;
padding: 10px 20px;
color: white;
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}
.adresses {
background-color: #a5aeb5;
cursor: pointer;
}
.error {
background-color: tomato;
}

22
assets/search.svg Normal file
View File

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 513.749 513.749" style="enable-background:new 0 0 513.749 513.749;" xml:space="preserve" width="512" height="512">
<g>
<path d="M504.352,459.061l-99.435-99.477c74.402-99.427,54.115-240.344-45.312-314.746S119.261-9.277,44.859,90.15 S-9.256,330.494,90.171,404.896c79.868,59.766,189.565,59.766,269.434,0l99.477,99.477c12.501,12.501,32.769,12.501,45.269,0 c12.501-12.501,12.501-32.769,0-45.269L504.352,459.061z M225.717,385.696c-88.366,0-160-71.634-160-160s71.634-160,160-160 s160,71.634,160,160C385.623,314.022,314.044,385.602,225.717,385.696z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 850 B

2
index.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-witdh, initial-scale=1.0" />
<link rel="stylesheet" href="/main.css" />
<link rel="stylesheet" href="assets/main.css">
<title>WebAdmin</title>
</head>
<body>

2
main.js
View File

@ -0,0 +1,2 @@
import './assets/main.css'
// require('@/assets/main.css')

33
pages/adresses/adresses_index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="main-container">
<div class="heading">
<h1>
Willkommen in der Adressverwaltung
</h1>
</div>
<div class="content">
<input v-model="input" type="text" placeholder="Suche...">
<div v-for="adresses in filteredList()" :key="adresses" class="adresses">
<p>{{ adresses }}</p>
</div>
<div v-if="input&&!filteredList().length" class="item error">
<p>Nicht gefunden</p>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const input = ref('')
const adresses = ['Hedemann', 'Nietiedt', 'Schoon']
function filteredList () {
return adresses.filter(adresses =>
adresses.toLowerCase().includes(input.value.toLowerCase())
)
}
</script>
<style scoped src="@/assets/main.css">
</style>

14
pages/adresses/customer_mask.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<div class="main-container">
<div class="heading">
<h1>
Kundenname
</h1>
</div>
<div class="content">
<p>Hier findest einen Kunden</p>
</div>
</div>
</template>
<style scoped src="@/assets/main.css"></style>

14
pages/header/help.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<div class="main-container">
<div class="heading">
<h1>
Hilfe
</h1>
</div>
<div class="content">
<p>Hier findest du Hilfe</p>
</div>
</div>
</template>
<style scoped src="@/assets/main.css"></style>

6
pages/adresses.vue → pages/header/info.vue
View File

@ -2,11 +2,13 @@
<div class="main-container">
<div class="heading">
<h1>
Willkommen in der Adressverwaltung
Info
</h1>
</div>
<div class="content">
<p>fill this with content</p>
<p>Hier findest du Infos</p>
</div>
</div>
</template>
<style scoped src="@/assets/main.css"></style>

6
pages/index.vue
View File

@ -1,5 +1,9 @@
<template>
<div class="index">
<div class="main-container">
<div class="heading">
<h1>Willkommen</h1>
</div>
</div>
</template>
<style scoped src="@/assets/main.css"></style>

19
router/index.js
View File

@ -1,19 +0,0 @@
import { createRouter, createWebHistory } from 'vue-router'
import index from '@/pages/index.vue'
import adresses from '@/pages/adresses.vue'
const routes = [
{ path: '/', name: 'Home', component: index },
{ path: '/adresses', name: 'Adressverwaltung', component: adresses }
]
const router = createRouter({
history: createWebHistory(),
routes
})
const app = createApp({})
app.use(router)
export default router

23
server/trpc/routers/index.js Normal file
View File

@ -0,0 +1,23 @@
import { createRouter, createWebHistory } from 'vue-router'
import index from '@/pages/index.vue'
import adresses from '@/pages/adresses/adresses_index.vue'
import help from '@/pages/header/help'
import info from '@/pages/header/info'
const routes = [
{ path: '/', name: 'Home', component: index },
{ path: 'adresses/adresses_index', name: 'Adressverwaltung', component: adresses },
{ path: 'header/help', name: 'Hilfe', component: help },
{ path: 'header/info', name: 'Info', component: info }
]
const router = createRouter({
history: createWebHistory(),
routes
})
const app = createApp({})
app.use(router)
export default router