Compare commits
9 Commits
main
...
kundenverw
| Author | SHA1 | Date | |
|---|---|---|---|
| 01f949ca03 | |||
| b35facc343 | |||
| b9299e2cdf | |||
| 43c2f1e841 | |||
| 35407b034f | |||
| 4edf59fd4c | |||
| cd8918f21b | |||
| d48a51f0e3 | |||
| 2b8ad2b416 |
10
app.vue
10
app.vue
@ -1,5 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<NuxtLayout>
|
||||
<NuxtPage />
|
||||
</div>
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style src="@/assets/main.css"></style>
|
||||
|
||||
124
assets/main.css
Normal file
124
assets/main.css
Normal file
@ -0,0 +1,124 @@
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Helvetica";
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-left: 275px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
|
||||
@media screen and (max-height: 450px) {
|
||||
.sidenav {padding-top: 15px;}
|
||||
.sidenav a {font-size: 18px;}
|
||||
}
|
||||
|
||||
#title {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
background-color: #a5aeb5;
|
||||
width: 100%;
|
||||
margin-left: 250px;
|
||||
}
|
||||
|
||||
#header-table th {
|
||||
text-transform: uppercase;
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
min-width: 20px;
|
||||
}
|
||||
|
||||
#header-table tr {
|
||||
min-width: 20px;
|
||||
}
|
||||
|
||||
#header-table td {
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
/* The navigation menu links */
|
||||
.header a {
|
||||
text-decoration: none;
|
||||
font-size: 18px;
|
||||
color: #e0e2e3;
|
||||
display: block;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
/* When you mouse over the navigation links, change their color */
|
||||
.header a:hover {
|
||||
color: #f1f1f1;
|
||||
}
|
||||
|
||||
/* The side navigation menu */
|
||||
.sidenav {
|
||||
height: 100%;
|
||||
width: 250px;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: #a5aeb5;
|
||||
overflow-x: hidden;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.sidenav-content {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
/* The menu title */
|
||||
.menu-heading {
|
||||
color: #f1f1f1;
|
||||
width: 200px;
|
||||
height: 75px;
|
||||
font-weight: 600;
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* The navigation menu links */
|
||||
.sidenav a {
|
||||
text-decoration: none;
|
||||
font-size: 25px;
|
||||
color: #e0e2e3;
|
||||
display: block;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
/* When you mouse over the navigation links, change their color */
|
||||
.sidenav a:hover {
|
||||
color: #f1f1f1;
|
||||
}
|
||||
|
||||
/* Address Table */
|
||||
.address-table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.address-table th,
|
||||
.address-table td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.address-table th {
|
||||
background-color: #f2f2f2;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
22
assets/search.svg
Normal file
22
assets/search.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 850 B |
19
components/HeaderNav.vue
Normal file
19
components/HeaderNav.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div class="header">
|
||||
<table id="header-table">
|
||||
<tr>
|
||||
<th>
|
||||
<NuxtLink to="/header/help">
|
||||
Hilfe
|
||||
</NuxtLink>
|
||||
</th>
|
||||
<th>
|
||||
<NuxtLink to="/header/info">
|
||||
Info
|
||||
</NuxtLink>
|
||||
</th>
|
||||
<th> Logout </th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
15
components/SideNav.vue
Normal file
15
components/SideNav.vue
Normal file
@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="sidenav">
|
||||
<div class="sidenav-content">
|
||||
<h1 class="menu-heading">
|
||||
WebAdmin
|
||||
</h1>
|
||||
<NuxtLink to="/">
|
||||
Home
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/address-management/address_index">
|
||||
Adressverwaltung
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
36
data/addressData.json
Normal file
36
data/addressData.json
Normal file
@ -0,0 +1,36 @@
|
||||
{
|
||||
"items":
|
||||
[
|
||||
{
|
||||
"id": 1,
|
||||
"customernumber": "0000",
|
||||
"name": "Dieter Hillers",
|
||||
"company": "Hedemann GmbH",
|
||||
"street": "Oldenburger Str. 28",
|
||||
"postalcode": "26639",
|
||||
"location": "Wiesmoor",
|
||||
"phone": "04944-1450"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"customernumber": "1111",
|
||||
"name": "Holger Hedemann",
|
||||
"company": "Hedemann GmbH",
|
||||
"street": "Oldenburger Str. 28",
|
||||
"postalcode": "26639",
|
||||
"location": "Wiesmoor",
|
||||
"phone": "04944-1450"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"customernumber": "2222",
|
||||
"name": "Hilko Hartmann",
|
||||
"company": "Hedemann GmbH",
|
||||
"street": "Oldenburger Str. 28",
|
||||
"postalcode": "26639",
|
||||
"location": "Wiesmoor",
|
||||
"phone": "04944-1450"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
14
index.html
Normal file
14
index.html
Normal file
@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-witdh, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="assets/main.css">
|
||||
<title>WebAdmin</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<script type="module" src="/main.js"></script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
7
layouts/default.vue
Normal file
7
layouts/default.vue
Normal file
@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<HeaderNav />
|
||||
<SideNav />
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
2
main.jsx
Normal file
2
main.jsx
Normal file
@ -0,0 +1,2 @@
|
||||
import './assets/main.css'
|
||||
// require('@/assets/main.css')
|
||||
@ -3,6 +3,9 @@ export default defineNuxtConfig({
|
||||
modules: [
|
||||
'@huntersofbook/naive-ui-nuxt'
|
||||
],
|
||||
css: [
|
||||
'@/assets/main.css'
|
||||
],
|
||||
build: {
|
||||
transpile: [
|
||||
'trpc-nuxt'
|
||||
|
||||
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "webadmin3.0",
|
||||
"name": "WebAdmin3.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
|
||||
11
pages/address-management/address_index.vue
Normal file
11
pages/address-management/address_index.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div class="main-content">
|
||||
<h1 id="title">
|
||||
Willkommen in der Adressverwaltung
|
||||
</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
</script>
|
||||
10
pages/header/help.vue
Normal file
10
pages/header/help.vue
Normal file
@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<div class="main-content">
|
||||
<h1 id="title">
|
||||
Hilfe
|
||||
</h1>
|
||||
<div class="content">
|
||||
<p>Hier findest du Hilfe</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
11
pages/header/info.vue
Normal file
11
pages/header/info.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div class="main-content">
|
||||
<h1 id="title">
|
||||
Info
|
||||
</h1>
|
||||
|
||||
<div class="content">
|
||||
<p>Hier findest du Infos</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
194
pages/index.vue
194
pages/index.vue
@ -1,195 +1,7 @@
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<div class="heading">
|
||||
<h1 class="heading__title">
|
||||
Welcome to your new <span class="gradient__text">sidebase</span> app!
|
||||
<div class="main-content">
|
||||
<h1 id="title">
|
||||
Willkommen
|
||||
</h1>
|
||||
<p class="heading__credits">
|
||||
Read our documentation <a href="https://sidebase.io/sidebase/welcome" target="_blank">here</a>.
|
||||
Get started in no time with the following amazing modules:
|
||||
</p>
|
||||
</div>
|
||||
<div class="cards">
|
||||
<div class="card prisma__card">
|
||||
<div class="card__body">
|
||||
<h2 class="card__title">
|
||||
Prisma ORM
|
||||
</h2>
|
||||
<p>
|
||||
Prisma unlocks a new level of developer experience when working with databases thanks to its intuitive data model, automated migrations, type-safety & auto-completion.
|
||||
</p>
|
||||
</div>
|
||||
<p class="card__action">
|
||||
<a class="card__link" href="https://sidebase.io/sidebase/components/prisma" target="_blank">
|
||||
TEST
|
||||
</a>
|
||||
<a class="card__link" href="/prisma" target="_blank">
|
||||
See example
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="card trpc__card">
|
||||
<div class="card__body">
|
||||
<h2 class="card__title">
|
||||
tRPC
|
||||
</h2>
|
||||
<p>
|
||||
tRPC allows you to easily build & consume fully typesafe APIs without schemas or code generation.
|
||||
</p>
|
||||
</div>
|
||||
<p class="card__action">
|
||||
<a class="card__link" href="https://sidebase.io/sidebase/components/trpc" target="_blank">
|
||||
Read documentation
|
||||
</a>
|
||||
<a class="card__link" href="/trpc" target="_blank">
|
||||
See example
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="card naiveui__card">
|
||||
<div class="card__body">
|
||||
<h2 class="card__title">
|
||||
NaiveUI
|
||||
</h2>
|
||||
<p>
|
||||
A Vue 3 Component Library. Complete, Customizable, Uses TypeScript, Fast.
|
||||
</p>
|
||||
</div>
|
||||
<p class="card__action">
|
||||
<a class="card__link" href="https://www.naiveui.com/en-US/os-theme" target="_blank">
|
||||
Read documentation
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
|
||||
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
background-color: #eefbfc;
|
||||
color: #484848;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
max-width: 45vw;
|
||||
margin: auto;
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
/* HEADING */
|
||||
|
||||
.heading {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.heading__title {
|
||||
font-weight: 600;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.gradient__text {
|
||||
background: linear-gradient(to right, #7bceb6 10%, #12a87b 40%, #0FCF97 60%, #7bceb6 90%);
|
||||
background-size: 200% auto;
|
||||
color: #000;
|
||||
background-clip: text;
|
||||
text-fill-color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: shine 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
to {
|
||||
background-position: 200% center;
|
||||
}
|
||||
}
|
||||
|
||||
.heading__credits {
|
||||
color: #888888;
|
||||
font-size: 25px;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.heading__credits a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
.cards {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
min-height: 200px;
|
||||
display: grid;
|
||||
grid-template-rows: 20px 50px 1fr 50px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.25);
|
||||
transition: all 0.2s;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.4);
|
||||
transform: scale(1.01);
|
||||
}
|
||||
|
||||
.card__link {
|
||||
position: relative;
|
||||
text-decoration: underline;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.card__title {
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.card__body {
|
||||
grid-row: 2/4;
|
||||
}
|
||||
|
||||
.card__body p {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card__action {
|
||||
grid-row: 5/6;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
gap: 20px
|
||||
}
|
||||
|
||||
/* RESPONSIVE */
|
||||
|
||||
@media (max-width: 1600px) {
|
||||
.main-container {
|
||||
max-width: 100vw;
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
.cards {
|
||||
justify-content: center;
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.prisma__card { background: radial-gradient(#3fbafe, #5A67D8FF); }
|
||||
.trpc__card { background: radial-gradient(#a07ccf, #926dc2); }
|
||||
.naiveui__card { background: radial-gradient(#ad6434, #995020); }
|
||||
</style>
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
const { data: examples } = useFetch('/api/examples')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
Prisma ORM Data from the database, received {{ examples?.length || 0 }} records: <pre>{{ examples }}</pre>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,12 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
const { $client } = useNuxtApp()
|
||||
|
||||
const hello = await $client.hello.useQuery({ text: 'client' })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- As `superjson` is already pre-configured, we can use `time` as a `Date` object without further deserialization 🎉 -->
|
||||
tRPC Data: "{{ hello.data.value?.greeting }}" send at "{{ hello.data.value?.time.toLocaleDateString('en-EN') }}".
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user