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