wdb-web2/components/Typ.vue

<template>

      <MDBContainer class="bg-white vh-100 rounded-4" style="margin-top: 70px;">
        <h3 class="text-secondary mb-4 pt-3" style="border-bottom: 3px solid black;">Type</h3>
        <ClientOnly>
          <MDBRow tag="form" class="g-3 mb-20 needs-validation" novalidate @submit.prevent="checkForm">
            <MDBCol md="4">
              <p>Image Galery</p>
            </MDBCol>
            <MDBCol md="8">
              <MDBRow style="margin-bottom:20px;"> 
                <MDBCol md="12">
                  <MDBInput
                                          label="Description *"
                                          v-model="bezeichnung"
                                          invalidFeedback="Please provide a description of the clothing-type"
                                          validFeedback="Looks good!"
                                          required
                                      />
                </MDBCol>
              </MDBRow> 
              <MDBRow style="margin-bottom:40px;">
                <MDBCol md="12">
                  <MDBBtn class="" color="primary" @click="onSubmit()">NEW</MDBBtn>
                  <MDBBtn color="secondary" @click="onUpdate()">UPDATE</MDBBtn>
                  <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>
  
  <style>
    @import 'bootstrap';
    @import 'datatables.net-bs5';
  </style>

  <script setup lang="ts">
    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";

    const bezeichnung = ref("");
     
    
    const checkForm = (event: Event) => {
    event.target.classList.add("was-validated");
  };
    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 {
      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>