g.spar
/
wdb-web2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

merge into: g.spar:master
Branches Tags
g.spar:master
g.spar:versuch1
...
pull from: g.spar:versuch1
Branches Tags
g.spar:master
g.spar:versuch1

2 Commits
master ... versuch1

Author SHA1 Message Date
Georg Spar f0a96bed71 Test Again
1 year ago
Georg Spar 9a9dffed2c Design-Anpassung und Funktionstest
1 year ago
5 changed files with 100 additions and 56 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats
  1. 2
      components/Header.vue
  2. 9
      components/Login.vue
  3. 136
      components/Typ.vue
  4. 10
      layouts/default.vue
  5. 1
      pages/typ.vue

2
components/Header.vue
Unescape View File

@ -6,7 +6,7 @@
<!-- Navbar --> <!-- Navbar -->
<nav style="z-index: 1;" class="navbar navbar-expand-lg navbar-light bg-light"> <nav style="z-index: 1;" class="navbar navbar-expand-lg navbar-light bg-light">
<!-- Container wrapper --> <!-- Container wrapper -->
<div class="container"> <div class="container-xl">
<!-- Toggle button --> <!-- Toggle button -->
<button class="navbar-toggler" type="button" data-mdb-toggle="collapse" <button class="navbar-toggler" type="button" data-mdb-toggle="collapse"
data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"

9
components/Login.vue
Unescape View File

@ -1,9 +1,5 @@
<template> <template>
<div class="bg-image vh-100" style="height:500px; margin-top: -58.59px; background-image: url('/images/background_wardrobe.jpg');"> <div >
<!-- 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> <ClientOnly>
<MDBCard> <MDBCard>
<MDBCardBody> <MDBCardBody>
@ -81,10 +77,7 @@
</MDBCardBody> </MDBCardBody>
</MDBCard> </MDBCard>
</ClientOnly> </ClientOnly>
</div>
</div> </div>
</div>
</div>

136
components/Typ.vue
Unescape View File

@ -1,61 +1,105 @@
<template> <template>
<div>
<div style="margin-bottom: 20px;"> <MDBContainer class="bg-white vh-100 rounded-4" style="margin-top: 70px;">
<ClientOnly> <h3 class="text-secondary mb-4 pt-3" style="border-bottom: 3px solid black;">Type</h3>
<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> <ClientOnly>
<MDBTable striped hover bordered> <MDBRow tag="form" class="g-3 mb-20 needs-validation" novalidate @submit.prevent="checkForm">
<thead> <MDBCol md="4">
<tr> <p>Image Galery</p>
<th scope="col">#</th> </MDBCol>
<th scope="col">Description</th> <MDBCol md="8">
</tr> <MDBRow style="margin-bottom:20px;">
</thead> <MDBCol md="12">
<tbody> <MDBInput
<tr v-for="t in typen"> label="Description *"
<td>{{ t.id }}</td> v-model="bezeichnung"
<td>{{ t.bezeichnung }}</td> invalidFeedback="Please provide a description of the clothing-type"
</tr> validFeedback="Looks good!"
</tbody> required
</MDBTable> />
<template #fallback> </MDBCol>
<!-- this will be rendered on server side --> </MDBRow>
<p>Loading comments...</p> <MDBRow style="margin-bottom:40px;">
</template> <MDBCol md="12">
</ClientOnly> <MDBBtn class="" color="primary" @click="onSubmit()">NEW</MDBBtn>
</div> <MDBBtn color="secondary" @click="onUpdate()">UPDATE</MDBBtn>
</div> <MDBBtn color="danger" @click="onDelete()">DELETE</MDBBtn>
<MDBBtn type="reset" color="dark">Reset</MDBBtn>
</MDBCol>
</MDBRow>
</MDBCol>
</MDBRow>
<!--<MDBContainer class="bg-white rounded-4"> -->
<MDBRow style="margin-bottom:40px;">
<MDBCol md="12">
<div id="datatable" data-mdb-loading="true"></div>
<!-- <MDBTable striped hover border="primary" sm class="rounded-4">
<thead class="table-dark">
<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> -->
</MDBCol>
</MDBRow>
<!--</MDBContainer>-->
<template #fallback>
<!-- this will be rendered on server side -->
<p>Loading comments...</p>
</template>
</ClientOnly>
</MDBContainer>
</template> </template>
<style>
@import 'bootstrap';
@import 'datatables.net-bs5';
</style>
<script setup lang="ts"> <script setup lang="ts">
import { MDBCard, MDBCardBody, MDBCardTitle, MDBCardText, MDBBtn, MDBCol, MDBCheckbox, MDBInput, MDBRow, MDBTable } from "mdb-vue-ui-kit"; import { MDBCard, MDBCardBody, MDBCardTitle, MDBCardText, MDBBtn, MDBCol, MDBCheckbox, MDBInput, MDBRow, MDBTable, MDBContainer, mdbClickOutside, } from "mdb-vue-ui-kit";
import { DataTable } from 'datatables.net-vue3';
import { DataTablesCore } from 'datatables.net-bs5';
import { ref } from "vue"; import { ref } from "vue";
const bezeichnung = ref("e.g. Shirt"); const bezeichnung = ref("");
const checkForm = (event: Event) => { const checkForm = (event: Event) => {
event.target.classList.add("was-validated"); event.target.classList.add("was-validated");
}; };
const {data: typen } = await useFetch('http://ubodroid-2:8080/api/v1/typ'); const {data: typen } = await useFetch('http://ubodroid-2:8081/api/v1/typ');
const columns = [
{ label: '#', field: 'id' },
{ label: 'Description', field: 'bezeichnung'},
];
const asyncTable = new MDBTable(
document.getElementById('datatable'),
{}
)
async function onSubmit() {
let fd = new FormData();
fd.append('bezeichnung', bezeichnung.value);
await $fetch('http://ubodroid-2:8081/api/v1/typ',{
method: 'POST',
body: fd
});
console.log('POST ausgeführt...'+ bezeichnung);
}
/*export default { /*export default {
data() { data() {

10
layouts/default.vue
Unescape View File

@ -1,6 +1,14 @@
<template> <template>
<div> <div>
<Header /> <Header />
<slot /> <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 justify-content-center align-items-center h-100">
<slot />
</div>
</div>
</div>
</div> </div>
</template> </template>

1
pages/typ.vue
Unescape View File

@ -1,6 +1,5 @@
<template> <template>
<div> <div>
<h1>Typ</h1>
<Typ /> <Typ />
</div> </div>
</template> </template>

Write Preview
Loading…
Cancel
Save