g.spar
/
wdm-web4
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity
Browse Source

v0.1.0: bought, about, typ

pull/1/head
Georg Spar 1 year ago
parent
53974dcf23
commit
684e94f49c
8 changed files with 156 additions and 75 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 22
      components/About.vue
  2. 44
      components/Bought.vue
  3. 152
      components/Typ.vue
  4. 5
      pages/about.vue
  5. 5
      pages/bought.vue
  6. BIN
      photos/16266842344a52797c13c72c9c769e2c6b52e827b0.webp
  7. BIN
      photos/16266842344a52797c13c72c9c769e2c6b52e827b0_thumbnail_600x.webp
  8. 3
      plugins/primevue.js

22
components/About.vue
Unescape View File

@ -0,0 +1,22 @@
<template>
<ClientOnly>
<Card style="margin-top: 78px; min-height: 200px;">
<template #content>
<Panel header="About this software" class="rounded-4 bg-white">
<span style="font-size:xx-large;">Wardrobe Master</span>
<p>Version: 0.1.0</p>
</Panel>
</template>
</Card>
</ClientOnly>
</template>
<script setup lang="ts">
import { ref } from "vue";
</script>

44
components/Bought.vue
Unescape View File

@ -0,0 +1,44 @@
<template>
<ClientOnly>
<Card style="margin-top: 78px; min-height: 200px;">
<template #content>
<Panel header="Bought, but not evaluated clothes" class="rounded-4 bg-white" >
<DataView :value="itemsb" paginator :rows="5">
<template #list="slotProps">
<div class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="`/photos/16266842344a52797c13c72c9c769e2c6b52e827b0.webp`" :alt="slotProps.data.bezeichnung" />
<div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
<div class="flex flex-column align-items-center sm:align-items-start gap-3">
<div class="text-2xl font-bold text-900">{{ slotProps.data.bezeichnung }}</div>
<div class="flex align-items-center gap-3">
<span class="flex align-items-center gap-2">
<i class="pi pi-tag"></i>
<span class="font-semibold">{{ slotProps.data.typid }}</span>
</span>
</div>
</div>
</div>
</div>
</div>
</template>
</DataView>
</Panel>
</template>
</Card>
</ClientOnly>
</template>
<script setup lang="ts">
import { ref } from "vue";
//const itemsb = ref();
const {data: itemsb } = await useFetch('http://ubodroid-2:8081/api/v1/itb');
</script>

152
components/Typ.vue
Unescape View File

@ -1,83 +1,87 @@
<template>
<ClientOnly>
<Panel header="Maintainance / Type" class="bg-white rounded-4" style="margin-top: 78px;">
<div tag="form" class="g-3 mb-20 needs-validation" novalidate @submit.prevent="checkForm">
<div class="grid nested-grid">
<div class="col-4">
<p>Image Galery</p>
</div>
<div class="col-8">
<div class="grid">
<div class="col-12 gap-2">
<label for="bezeichnung">Description *</label>
<InputText class="col-12"
v-model="bezeichnung"
invalidFeedback="Please provide a description of the clothing-type"
validFeedback="Looks good!"
required
/>
<small id="bezeichnung-help">Enter a description for the clothing</small>
<InputText type="hidden" v-model="id" />
</div>
<Card style="margin-top: 78px; min-height: 200px;">
<template #content>
<Panel header="Maintainance / Type" class="bg-white rounded-4">
<div class="col-12 gap-3 flex" style="margin-bottom:40px;">
<Button severity="primary" label=" NEW " icon="pi pi-check" @click="openNew" />
<Button severity="secondary" label=" UPDATE " icon="pi pi-file-edit" @click="onUpdate()" />
<Button severity="danger" label=" DELETE " icon="pi pi-trash" @click="onDelete()" />
<Button type="reset" severity="warning" label=" RESET " icon="pi pi-undo" />
</div>
</div>
</div>
</div>
</div>
<!--<MDBContainer class="bg-white rounded-4"> -->
<div class="grid" style="margin-bottom:40px;">
<div class="col-12">
<DataTable class="p-datatable-sm" :filters="filters" dataKey="id" filterDisplay="row" :value="typen"
showGridlines stripedRows paginator :rows="10" :rowsPerPageOptions="[5, 10, 20, 50]"
:globalFilterFields="['bezeichnung']"
v-model:selection="selectedTyp" selection-mode="single" @row-select="onRowSelect" :meta-key-selection="false"
tableStyle="min-width: 50rem;">
<template #header>
<div class="flex justify-content-end">
<span class="p-input-icon-left">
<i class="pi pi-search" />
<InputText v-model="filters['global'].value" placeholder="Keyword Search" />
</span>
<div tag="form" class="g-3 mb-20 needs-validation" novalidate @submit.prevent="checkForm">
<div class="grid nested-grid">
<div class="col-4">
<p>Image Galery</p>
</div>
<div class="col-8">
<div class="grid">
<div class="col-12 gap-2">
<label for="bezeichnung">Description *</label>
<InputText class="col-12"
v-model="bezeichnung"
invalidFeedback="Please provide a description of the clothing-type"
validFeedback="Looks good!"
required
/>
<small id="bezeichnung-help">Enter a description for the clothing</small>
<InputText type="hidden" v-model="id" />
</div>
<div class="col-12 gap-3 flex" style="margin-bottom:40px;">
<Button severity="primary" label=" NEW " icon="pi pi-check" @click="openNew" />
<Button severity="secondary" label=" UPDATE " icon="pi pi-file-edit" @click="onUpdate()" />
<Button severity="danger" label=" DELETE " icon="pi pi-trash" @click="onDelete()" />
<Button type="reset" severity="warning" label=" RESET " icon="pi pi-undo" />
</div>
</div>
</template>
<template #empty> No customers found. </template>
<!--<template #loading> Loading customers data. Please wait. </template> -->
<Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" sortable :filter-field="col.field" >
</Column>
</DataTable>
</div>
</div>
<!--</MDBContainer>-->
</div>
</div>
</div>
<!--<MDBContainer class="bg-white rounded-4"> -->
<div class="grid" style="margin-bottom:40px;">
<div class="col-12">
<DataTable class="p-datatable-sm" :filters="filters" dataKey="id" filterDisplay="row" :value="typen"
showGridlines stripedRows paginator :rows="10" :rowsPerPageOptions="[5, 10, 20, 50]"
:globalFilterFields="['bezeichnung']"
v-model:selection="selectedTyp" selection-mode="single" @row-select="onRowSelect" :meta-key-selection="false"
tableStyle="min-width: 50rem;">
<template #header>
<div class="flex justify-content-end">
<span class="p-input-icon-left">
<i class="pi pi-search" />
<InputText v-model="filters['global'].value" placeholder="Keyword Search" />
</span>
</div>
</template>
<template #empty> No customers found. </template>
<!--<template #loading> Loading customers data. Please wait. </template> -->
<Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" sortable :filter-field="col.field" >
</Column>
</DataTable>
</div>
</div>
<!--</MDBContainer>-->
<template #fallback>
<!-- this will be rendered on server side -->
<p>Loading comments...</p>
</template>
<Dialog :visible="createTypDialog" :style="{width: '450px'}" header="New Clothing Type" :modal="true" class="p-fluid">
<div class="field">
<label for="bezeichnung">Description</label>
<InputText id="bezeichnung" v-model.trim="typ.bezeichnung" required="true" autofocus />
<small id="bezeichnung-help" >Enter a description for the clothing</small>
</div>
<template #footer>
<Button label="Cancel" icon="pi pi-times" text @click="hideDialog"/>
<Button label="Save" icon="pi pi-check" text @click="onSubmit(typ)" />
<template #fallback>
<!-- this will be rendered on server side -->
<p>Loading comments...</p>
</template>
<Dialog :visible="createTypDialog" :style="{width: '450px'}" header="New Clothing Type" :modal="true" class="p-fluid">
<div class="field">
<label for="bezeichnung">Description</label>
<InputText id="bezeichnung" v-model.trim="typ.bezeichnung" required="true" autofocus />
<small id="bezeichnung-help" >Enter a description for the clothing</small>
</div>
<template #footer>
<Button label="Cancel" icon="pi pi-times" text @click="hideDialog"/>
<Button label="Save" icon="pi pi-check" text @click="onSubmit(typ)" />
</template>
</Dialog>
</Panel>
</template>
</Dialog>
</Panel>
</Card>
</ClientOnly>
</template>

5
pages/about.vue
Unescape View File

@ -0,0 +1,5 @@
<template>
<div>
<About />
</div>
</template>

5
pages/bought.vue
Unescape View File

@ -0,0 +1,5 @@
<template>
<div>
<Bought />
</div>
</template>

BIN
photos/16266842344a52797c13c72c9c769e2c6b52e827b0.webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 492 KiB

BIN
photos/16266842344a52797c13c72c9c769e2c6b52e827b0_thumbnail_600x.webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 102 KiB

3
plugins/primevue.js
Unescape View File

@ -12,7 +12,7 @@ import InputText from 'primevue/inputtext';
import ToastService from 'primevue/toastservice';
import Toast from 'primevue/toast';
import Dialog from 'primevue/dialog';
import DataView from "primevue/dataview";
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(PrimeVue, { ripple: true });
@ -28,4 +28,5 @@ export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(ToastService);
nuxtApp.vueApp.component("Toast", Toast);
nuxtApp.vueApp.component("Dialog", Dialog);
nuxtApp.vueApp.component("DataView", DataView);
});
Write Preview
Loading…
Cancel
Save