Georg Spar
1 year ago
commit
d6925b1130
20 changed files with 12194 additions and 0 deletions
@ -0,0 +1,11 @@ |
|||||||
|
node_modules |
||||||
|
*.log* |
||||||
|
.nuxt |
||||||
|
.nitro |
||||||
|
.cache |
||||||
|
.output |
||||||
|
.env |
||||||
|
dist |
||||||
|
.DS_Store |
||||||
|
.fleet |
||||||
|
.idea |
@ -0,0 +1,42 @@ |
|||||||
|
# Nuxt 3 Minimal Starter |
||||||
|
|
||||||
|
Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. |
||||||
|
|
||||||
|
## Setup |
||||||
|
|
||||||
|
Make sure to install the dependencies: |
||||||
|
|
||||||
|
```bash |
||||||
|
# yarn |
||||||
|
yarn install |
||||||
|
|
||||||
|
# npm |
||||||
|
npm install |
||||||
|
|
||||||
|
# pnpm |
||||||
|
pnpm install |
||||||
|
``` |
||||||
|
|
||||||
|
## Development Server |
||||||
|
|
||||||
|
Start the development server on `http://localhost:3000` |
||||||
|
|
||||||
|
```bash |
||||||
|
npm run dev |
||||||
|
``` |
||||||
|
|
||||||
|
## Production |
||||||
|
|
||||||
|
Build the application for production: |
||||||
|
|
||||||
|
```bash |
||||||
|
npm run build |
||||||
|
``` |
||||||
|
|
||||||
|
Locally preview production build: |
||||||
|
|
||||||
|
```bash |
||||||
|
npm run preview |
||||||
|
``` |
||||||
|
|
||||||
|
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. |
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,39 @@ |
|||||||
|
<template> |
||||||
|
<section |
||||||
|
class="w-50 vh-30 m-auto d-flex align-items-center justify-content-center" |
||||||
|
> |
||||||
|
<ClientOnly fallbackTag="div"> |
||||||
|
<MDBCarousel v-model="carousel" :items="items1" fade /> |
||||||
|
<template #fallback> |
||||||
|
<MDBSpinner /> |
||||||
|
</template> |
||||||
|
</ClientOnly> |
||||||
|
</section> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup lang="ts"> |
||||||
|
import { MDBCarousel, MDBSpinner } from "mdb-vue-ui-kit"; |
||||||
|
|
||||||
|
const items1 = [ |
||||||
|
{ |
||||||
|
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(15).webp", |
||||||
|
alt: "...", |
||||||
|
label: "First slide label", |
||||||
|
caption: "Nulla vitae elit libero, a pharetra augue mollis interdum.", |
||||||
|
}, |
||||||
|
{ |
||||||
|
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(22).webp", |
||||||
|
alt: "...", |
||||||
|
label: "Second slide label", |
||||||
|
caption: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", |
||||||
|
}, |
||||||
|
{ |
||||||
|
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(23).webp", |
||||||
|
alt: "...", |
||||||
|
label: "Third slide label", |
||||||
|
caption: "Praesent commodo cursus magna, vel scelerisque nisl consectetur.", |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
const carousel = useState("carousel", () => 0); |
||||||
|
</script> |
@ -0,0 +1,101 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<!--Main Navigation--> |
||||||
|
<header> |
||||||
|
<ClientOnly> |
||||||
|
<!-- Navbar --> |
||||||
|
<nav style="z-index: 1;" class="navbar navbar-expand-lg navbar-light bg-light"> |
||||||
|
<!-- Container wrapper --> |
||||||
|
<div class="container"> |
||||||
|
<!-- Toggle button --> |
||||||
|
<button class="navbar-toggler" type="button" data-mdb-toggle="collapse" |
||||||
|
data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" |
||||||
|
aria-label="Toggle navigation"> |
||||||
|
<i class="fas fa-bars"></i> |
||||||
|
</button> |
||||||
|
|
||||||
|
<!-- Collapsible wrapper --> |
||||||
|
<div class="collapse navbar-collapse" id="navbarSupportedContent"> |
||||||
|
<!-- Navbar brand --> |
||||||
|
<a class="navbar-brand mt-2 mt-lg-0" href="#"> |
||||||
|
<img src="../assets/sc_logo_icon.png" height="15" alt="spargcom IT logo" |
||||||
|
loading="lazy" /> |
||||||
|
</a> |
||||||
|
<!-- Left links --> |
||||||
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0"> |
||||||
|
<li class="nav-item"> |
||||||
|
<Nuxt-Link class="nav-link text-secondary fw-bold" to="/about">About</Nuxt-Link> |
||||||
|
</li> |
||||||
|
<li class="nav-item"> |
||||||
|
<Nuxt-Link class="nav-link text-secondary fw-bold" to="/bought">Bought</Nuxt-Link> |
||||||
|
</li> |
||||||
|
<li class="nav-item"> |
||||||
|
<Nuxt-Link class="nav-link text-secondary fw-bold" to="/evaluated">Evaluated</Nuxt-Link> |
||||||
|
</li> |
||||||
|
<li class="nav-item"> |
||||||
|
<MDBDropdown class="nav-item text-secondary fw-bold" v-model="dropdown1"> |
||||||
|
<MDBDropdownToggle |
||||||
|
tag="a" |
||||||
|
class="nav-link text-secondary fw-bold" |
||||||
|
@click="dropdown1 = !dropdown1" |
||||||
|
>Maintain</MDBDropdownToggle |
||||||
|
> |
||||||
|
<MDBDropdownMenu aria-labelledby="dropdownMenuButton"> |
||||||
|
<MDBDropdownItem href="/typ">Clothing-Type</MDBDropdownItem> |
||||||
|
<MDBDropdownItem href="/measure">Measures</MDBDropdownItem> |
||||||
|
<MDBDropdownItem href="/photos" |
||||||
|
>Photos</MDBDropdownItem |
||||||
|
> |
||||||
|
</MDBDropdownMenu> |
||||||
|
</MDBDropdown> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
<!-- Left links --> |
||||||
|
</div> |
||||||
|
<!-- Collapsible wrapper --> |
||||||
|
|
||||||
|
<!-- Right elements --> |
||||||
|
<div class="d-flex align-items-center"> |
||||||
|
<!-- Icon --> |
||||||
|
<a class="text-secondary me-3" href="https://www.youtube.com/c/Mdbootstrap/videos" rel="nofollow" target="_blank"> |
||||||
|
<i class="fab fa-youtube"></i> |
||||||
|
</a> |
||||||
|
<!-- Icon --> |
||||||
|
<a class="text-secondary me-3" href="https://twitter.com/ascensus_mdb" rel="nofollow" target="_blank"> |
||||||
|
<i class="fab fa-twitter"></i> |
||||||
|
</a> |
||||||
|
<!-- Icon --> |
||||||
|
<a class="text-secondary me-3" href="https://github.com/mdbootstrap/mdb-ui-kit" rel="nofollow" target="_blank"> |
||||||
|
<i class="fab fa-github"></i> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
<!-- Right elements --> |
||||||
|
</div> |
||||||
|
<!-- Container wrapper --> |
||||||
|
</nav> |
||||||
|
<!-- Navbar --> |
||||||
|
</ClientOnly> |
||||||
|
</header> |
||||||
|
<!--Main Navigation--> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup lang="ts"> |
||||||
|
import { |
||||||
|
MDBBtn, |
||||||
|
MDBNavbar, |
||||||
|
MDBNavbarToggler, |
||||||
|
MDBNavbarBrand, |
||||||
|
MDBNavbarNav, |
||||||
|
MDBNavbarItem, |
||||||
|
MDBCollapse, |
||||||
|
MDBDropdown, |
||||||
|
MDBDropdownToggle, |
||||||
|
MDBDropdownMenu, |
||||||
|
MDBDropdownItem |
||||||
|
} from 'mdb-vue-ui-kit'; |
||||||
|
import { ref } from 'vue'; |
||||||
|
|
||||||
|
const collapse1 = ref(false); |
||||||
|
const dropdown1 = ref(false); |
||||||
|
</script> |
@ -0,0 +1,106 @@ |
|||||||
|
<template> |
||||||
|
<div class="bg-image vh-100" style="height:500px; margin-top: -58.59px; background-image: url('/images/background_wardrobe.jpg');"> |
||||||
|
<!-- Mask --> |
||||||
|
<div class="mask" style="background-color: hsla(0, 0%, 0%, 0.6)"> |
||||||
|
<div class="container d-flex justify-content-center align-items-center h-100"> |
||||||
|
<div > |
||||||
|
<ClientOnly> |
||||||
|
<MDBCard> |
||||||
|
<MDBCardBody> |
||||||
|
<MDBCardTitle>Login</MDBCardTitle> |
||||||
|
<MDBCardText> |
||||||
|
|
||||||
|
<MDBRow tag="form" class="g-3 needs-validation" novalidate @submit.prevent="checkForm"> |
||||||
|
<MDBCol md="4"> |
||||||
|
<MDBInput |
||||||
|
label="First name" |
||||||
|
v-model="input1" |
||||||
|
invalidFeedback="Please provide your first name" |
||||||
|
validFeedback="Looks good!" |
||||||
|
required |
||||||
|
/> |
||||||
|
</MDBCol> |
||||||
|
<MDBCol md="4"> |
||||||
|
<MDBInput |
||||||
|
label="Last name" |
||||||
|
v-model="input2" |
||||||
|
invalidFeedback="Please provide your last name" |
||||||
|
validFeedback="Looks good!" |
||||||
|
required |
||||||
|
/> |
||||||
|
</MDBCol> |
||||||
|
<MDBCol md="4"> |
||||||
|
<MDBInput |
||||||
|
inputGroup |
||||||
|
aria-label="Username" |
||||||
|
aria-describedby="basic-addon1" |
||||||
|
placeholder="Username" |
||||||
|
v-model="input3" |
||||||
|
invalidFeedback="Please choose a username." |
||||||
|
validFeedback="Looks good!" |
||||||
|
required |
||||||
|
> |
||||||
|
<template v-slot:prepend> |
||||||
|
<span class="input-group-text" id="basic-addon1">@</span> |
||||||
|
</template></MDBInput |
||||||
|
> |
||||||
|
</MDBCol> |
||||||
|
<MDBCol md="6"> |
||||||
|
<MDBInput |
||||||
|
label="City" |
||||||
|
v-model="input4" |
||||||
|
invalidFeedback="Please provide a valid city." |
||||||
|
validFeedback="Looks good!" |
||||||
|
required |
||||||
|
/> |
||||||
|
</MDBCol> |
||||||
|
<MDBCol md="6"> |
||||||
|
<MDBInput |
||||||
|
label="Zip" |
||||||
|
v-model="input5" |
||||||
|
invalidFeedback="Please provide a valid zip." |
||||||
|
validFeedback="Looks good!" |
||||||
|
required |
||||||
|
/> |
||||||
|
</MDBCol> |
||||||
|
<MDBCol col="12"> |
||||||
|
<MDBCheckbox |
||||||
|
label="Agree to terms and conditions" |
||||||
|
v-model="checkbox1" |
||||||
|
invalidFeedback="You must agree before submitting." |
||||||
|
validFeedback="Looks good!" |
||||||
|
required |
||||||
|
/> |
||||||
|
</MDBCol> |
||||||
|
<MDBCol col="12"> |
||||||
|
<MDBBtn color="primary" type="submit">Submit form</MDBBtn> |
||||||
|
</MDBCol> |
||||||
|
</MDBRow> |
||||||
|
|
||||||
|
</MDBCardText> |
||||||
|
</MDBCardBody> |
||||||
|
</MDBCard> |
||||||
|
</ClientOnly> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup lang="ts"> |
||||||
|
import { MDBCard, MDBCardBody, MDBCardTitle, MDBCardText, MDBBtn, MDBCol, MDBCheckbox, MDBInput, MDBRow } from "mdb-vue-ui-kit"; |
||||||
|
import { ref } from "vue"; |
||||||
|
|
||||||
|
const checkForm = (event: Event) => { |
||||||
|
event.target.classList.add("was-validated"); |
||||||
|
}; |
||||||
|
const input1 = ref("Mark"); |
||||||
|
const input2 = ref("Otto"); |
||||||
|
const input3 = ref(""); |
||||||
|
const input4 = ref(""); |
||||||
|
const input5 = ref(""); |
||||||
|
const checkbox1 = ref(false); |
||||||
|
</script> |
@ -0,0 +1,147 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<div style="margin-bottom: 20px;"> |
||||||
|
<ClientOnly> |
||||||
|
<MDBRow tag="form" class="g-3 needs-validation" novalidate @submit.prevent="checkForm"> |
||||||
|
<MDBCol md="12"> |
||||||
|
<MDBInput |
||||||
|
label="Description" |
||||||
|
v-model="bezeichnung" |
||||||
|
invalidFeedback="Please provide a description of the clothing-type" |
||||||
|
validFeedback="Looks good!" |
||||||
|
required |
||||||
|
/> |
||||||
|
</MDBCol> |
||||||
|
|
||||||
|
<MDBBtn variant="primary" @click="onSubmit()">Neu eintragen</MDBBtn> |
||||||
|
<b-button variant="secondary" @click="onUpdate()">Aktualisieren</b-button> |
||||||
|
<b-button variant="danger" @click="onDelete()">Löschen</b-button> |
||||||
|
<b-button type="reset" variant="danger">Reset</b-button> |
||||||
|
</MDBRow> |
||||||
|
</ClientOnly> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<ClientOnly> |
||||||
|
<MDBTable striped hover bordered> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th scope="col">#</th> |
||||||
|
<th scope="col">Description</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
<tr v-for="t in typen"> |
||||||
|
<td>{{ t.id }}</td> |
||||||
|
<td>{{ t.bezeichnung }}</td> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
</MDBTable> |
||||||
|
<template #fallback> |
||||||
|
<!-- this will be rendered on server side --> |
||||||
|
<p>Loading comments...</p> |
||||||
|
</template> |
||||||
|
</ClientOnly> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup lang="ts"> |
||||||
|
import { MDBCard, MDBCardBody, MDBCardTitle, MDBCardText, MDBBtn, MDBCol, MDBCheckbox, MDBInput, MDBRow, MDBTable } from "mdb-vue-ui-kit"; |
||||||
|
import { ref } from "vue"; |
||||||
|
|
||||||
|
const bezeichnung = ref("e.g. Shirt"); |
||||||
|
|
||||||
|
|
||||||
|
const checkForm = (event: Event) => { |
||||||
|
event.target.classList.add("was-validated"); |
||||||
|
}; |
||||||
|
const {data: typen } = await useFetch('http://ubodroid-2:8080/api/v1/typ'); |
||||||
|
|
||||||
|
/*export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
selectMode: 'single', |
||||||
|
componentKey: 0, |
||||||
|
certs: [], |
||||||
|
form:{ |
||||||
|
id: "", |
||||||
|
bezeichnung: "", |
||||||
|
}, |
||||||
|
fields: [ |
||||||
|
{ |
||||||
|
key: 'id', |
||||||
|
sortable: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
key: 'bezeichnung', |
||||||
|
sortable: true |
||||||
|
}, |
||||||
|
] |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.fetch(); |
||||||
|
} |
||||||
|
, |
||||||
|
methods: { |
||||||
|
onRowSelect(items) { |
||||||
|
this.selected = items; |
||||||
|
// alert(JSON.stringify(this.selected)); |
||||||
|
this.onFill(this.selected); |
||||||
|
}, |
||||||
|
async fetch() { |
||||||
|
console.log("fetching..."); |
||||||
|
this.certs = await fetch( |
||||||
|
'http://ubodroid-2:8080/api/v1/typ' |
||||||
|
).then(res => res.json()) |
||||||
|
}, |
||||||
|
async onSubmit() { |
||||||
|
// event.preventDefault(); |
||||||
|
this.form.id = ""; |
||||||
|
console.log("submitting..."); |
||||||
|
await this.$http.$post('http://ubodroid-2:8080/api/v1/typ', this.form); |
||||||
|
// return result; |
||||||
|
// this.subm(this.form); |
||||||
|
this.fetch(); |
||||||
|
|
||||||
|
}, |
||||||
|
|
||||||
|
async onUpdate() { |
||||||
|
// event.preventDefault(); |
||||||
|
console.log("updating..."); |
||||||
|
console.log("Laufzeit: ", this.form.laufzeit) |
||||||
|
console.log(this.form); |
||||||
|
await this.$http.$put('http://ubodroid-2:8080/api/v1/typ/'+this.form.id, this.form); |
||||||
|
// return result; |
||||||
|
// this.subm(this.form); |
||||||
|
this.fetch(); |
||||||
|
|
||||||
|
}, |
||||||
|
|
||||||
|
async onDelete() { |
||||||
|
// event.preventDefault(); |
||||||
|
console.log("updating..."); |
||||||
|
await this.$http.$delete('http://ubodroid-2:8080/api/v1/typ/'+this.form.id); |
||||||
|
// return result; |
||||||
|
// this.subm(this.form); |
||||||
|
this.fetch(); |
||||||
|
|
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
onReset(event) { |
||||||
|
event.preventDefault(); |
||||||
|
this.form.bezeichnung = ''; |
||||||
|
}, |
||||||
|
|
||||||
|
onFill(item) { |
||||||
|
// alert(JSON.stringify(item)); |
||||||
|
if(item.length !== 0) { |
||||||
|
this.form.bezeichnung = item[0].bezeichnung; |
||||||
|
this.form.id = item[0].id; |
||||||
|
console.log(JSON.stringify(item[0].bezeichnung)); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}*/ |
||||||
|
</script> |
@ -0,0 +1,6 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<Header /> |
||||||
|
<slot /> |
||||||
|
</div> |
||||||
|
</template> |
@ -0,0 +1,24 @@ |
|||||||
|
// https://v3.nuxtjs.org/api/configuration/nuxt.config
|
||||||
|
export default defineNuxtConfig({ |
||||||
|
app: { |
||||||
|
head: { |
||||||
|
link: [ |
||||||
|
{ |
||||||
|
rel: "stylesheet", |
||||||
|
href: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap", |
||||||
|
}, |
||||||
|
{ |
||||||
|
rel: "stylesheet", |
||||||
|
href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css", |
||||||
|
}, |
||||||
|
], |
||||||
|
|
||||||
|
|
||||||
|
}, |
||||||
|
|
||||||
|
}, |
||||||
|
css: ["~/assets/scss/index.scss"], |
||||||
|
build: { |
||||||
|
transpile: ["mdb-vue-ui-kit"], |
||||||
|
}, |
||||||
|
}); |
@ -0,0 +1,21 @@ |
|||||||
|
{ |
||||||
|
"name": "nuxt-app", |
||||||
|
"private": true, |
||||||
|
"scripts": { |
||||||
|
"build": "nuxt build", |
||||||
|
"dev": "nuxt dev", |
||||||
|
"generate": "nuxt generate", |
||||||
|
"preview": "nuxt preview", |
||||||
|
"postinstall": "nuxt prepare" |
||||||
|
}, |
||||||
|
"devDependencies": { |
||||||
|
"@nuxt/devtools": "latest", |
||||||
|
"@types/node": "^18", |
||||||
|
"nuxt": "^3.5.2", |
||||||
|
"sass": "^1.62.1", |
||||||
|
"sass-loader": "^13.3.1" |
||||||
|
}, |
||||||
|
"dependencies": { |
||||||
|
"mdb-vue-ui-kit": "^4.0.0" |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,7 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<h1>Typ</h1> |
||||||
|
<Typ /> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
After Width: | Height: | Size: 4.2 KiB |
After Width: | Height: | Size: 3.9 MiB |
@ -0,0 +1,3 @@ |
|||||||
|
{ |
||||||
|
"extends": "../.nuxt/tsconfig.server.json" |
||||||
|
} |
Loading…
Reference in new issue