remove playground junk
This commit is contained in:
parent
90932a49c8
commit
4720202d8a
8 changed files with 4 additions and 282 deletions
|
|
@ -13,22 +13,10 @@ const navOpen = ref(!mobile.value);
|
||||||
<VToolbarTitle>Database Project</VToolbarTitle>
|
<VToolbarTitle>Database Project</VToolbarTitle>
|
||||||
</VAppBar>
|
</VAppBar>
|
||||||
<VNavigationDrawer v-model="navOpen" :temporary="mobile">
|
<VNavigationDrawer v-model="navOpen" :temporary="mobile">
|
||||||
<!-- <VList>
|
|
||||||
<VListItem
|
|
||||||
prepend-avatar="https://cdn.discordapp.com/avatars/317001025074757632/248f503c44bc95ac75f55f5835e6ff9f.png?size=512"
|
|
||||||
title="Anonymous"
|
|
||||||
/>
|
|
||||||
</VList> -->
|
|
||||||
|
|
||||||
<VDivider />
|
|
||||||
|
|
||||||
<VList density="compact" nav>
|
<VList density="compact" nav>
|
||||||
<VListItem prepend-icon="mdi-login" title="Login" value="/login" @click="navigateTo('/login')" />
|
<VListItem prepend-icon="mdi-login" title="Login" value="/login" @click="navigateTo('/login')" />
|
||||||
<VListItem prepend-icon="mdi-account" title="Clients" value="/clients" @click="navigateTo('/clients')" />
|
<VListItem prepend-icon="mdi-account" title="Clients" value="/clients" @click="navigateTo('/clients')" />
|
||||||
<VDivider />
|
<VDivider />
|
||||||
<VListItem prepend-icon="mdi-home" title="Home" value="/" @click="navigateTo('/')" />
|
|
||||||
<VListItem prepend-icon="mdi-table" title="Table Example" value="/tableExample" @click="navigateTo('/tableExample')" />
|
|
||||||
<VListItem prepend-icon="mdi-form-textarea" title="Echo Form" value="/forms" @click="navigateTo('/forms')" />
|
|
||||||
</VList>
|
</VList>
|
||||||
</VNavigationDrawer>
|
</VNavigationDrawer>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
<script setup>
|
|
||||||
import { ref } from 'vue';
|
|
||||||
|
|
||||||
const count = ref(0);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<VBtn @click="count++">
|
|
||||||
Clicky {{ count }} times
|
|
||||||
</VBtn>
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,124 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
/* global $fetch */
|
|
||||||
import { useFetch, createError } from "nuxt/app";
|
|
||||||
import { ref, Ref } from "vue";
|
|
||||||
import { definePageMeta } from "~/.nuxt/imports";
|
|
||||||
import { client as clientType } from "~/utils/types/database";
|
|
||||||
|
|
||||||
definePageMeta({ middleware: ["auth"] });
|
|
||||||
|
|
||||||
const clientsRequest = await useFetch("/api/clients");
|
|
||||||
if (clientsRequest.error.value) throw createError(clientsRequest.error.value?.data ?? "");
|
|
||||||
const clients = clientsRequest.data as Ref<NonNullable<typeof clientsRequest.data.value>>;
|
|
||||||
|
|
||||||
const countRequest = await useFetch("/api/clients/count");
|
|
||||||
if (countRequest.error.value) throw createError(countRequest.error.value?.data ?? "");
|
|
||||||
const count = countRequest.data as Ref<NonNullable<typeof countRequest.data.value>>;
|
|
||||||
|
|
||||||
function rowClicked(client: string, edit = false) {
|
|
||||||
console.log(client);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function rowDelete(client: string) {
|
|
||||||
try {
|
|
||||||
await $fetch<clientType>(`/api/clients/${client}`, {
|
|
||||||
method: "DELETE",
|
|
||||||
});
|
|
||||||
clients.value = clients.value.filter(e => e.id !== client);
|
|
||||||
count.value.count--;
|
|
||||||
} catch (e) {
|
|
||||||
// FIXME: show the error
|
|
||||||
console.log(e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const loadingMore = ref<boolean>(false);
|
|
||||||
async function loadBefore() {
|
|
||||||
loadingMore.value = true;
|
|
||||||
|
|
||||||
clients.value.push(...await $fetch("/api/clients", {
|
|
||||||
query: {
|
|
||||||
before: clients.value[clients.value.length - 1].id,
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
loadingMore.value = false;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<VOverlay
|
|
||||||
model-value
|
|
||||||
origin="top center"
|
|
||||||
:scrim="false"
|
|
||||||
height="fit-content"
|
|
||||||
persistent
|
|
||||||
no-click-animation
|
|
||||||
>
|
|
||||||
<VAlert class="alert">
|
|
||||||
owowowowowowowowo
|
|
||||||
</VAlert>
|
|
||||||
</VOverlay>
|
|
||||||
<VRow>
|
|
||||||
<VCol>
|
|
||||||
<VBreadcrumbs :items="['Clients']" />
|
|
||||||
<VSpacer />
|
|
||||||
<div class="text-h4">
|
|
||||||
There are {{ count?.count }} clients in the database.
|
|
||||||
</div>
|
|
||||||
</VCol>
|
|
||||||
</VRow>
|
|
||||||
<VRow>
|
|
||||||
<VCol cols="12">
|
|
||||||
<VCard>
|
|
||||||
<VTable>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Name</th>
|
|
||||||
<th>Address</th>
|
|
||||||
<th />
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr v-for="client in clients" :key="client.id">
|
|
||||||
<td @click="() => rowClicked(client.id)">
|
|
||||||
{{ client.name }}
|
|
||||||
</td>
|
|
||||||
<td @click="() => rowClicked(client.id)">
|
|
||||||
{{ client.address }}
|
|
||||||
</td>
|
|
||||||
<td class="buttons">
|
|
||||||
<div>
|
|
||||||
<VBtn icon="mdi-pencil" variant="text" @click="() => rowClicked(client.id, true)" />
|
|
||||||
<VBtn icon="mdi-delete" color="red" variant="text" @click="() => rowDelete(client.id)" />
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</VTable>
|
|
||||||
</VCard>
|
|
||||||
<VCol>
|
|
||||||
<VBtn
|
|
||||||
v-if="clients.length < count.count"
|
|
||||||
color="primary"
|
|
||||||
:loading="loadingMore"
|
|
||||||
@click="loadBefore"
|
|
||||||
>
|
|
||||||
Load more
|
|
||||||
</VBtn>
|
|
||||||
</VCol>
|
|
||||||
</VCol>
|
|
||||||
</VRow>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.buttons {
|
|
||||||
width: 0;
|
|
||||||
padding-right: 4px !important;
|
|
||||||
}
|
|
||||||
.buttons > div {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
/* global $fetch */
|
|
||||||
import { ref } from 'vue';
|
|
||||||
|
|
||||||
const question = ref();
|
|
||||||
const answer = ref();
|
|
||||||
|
|
||||||
async function getAnswer() {
|
|
||||||
const message = await $fetch("/api/echo", {
|
|
||||||
body: question.value,
|
|
||||||
method: "POST",
|
|
||||||
});
|
|
||||||
|
|
||||||
answer.value = message;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<VCard width="400px">
|
|
||||||
<template #text>
|
|
||||||
<VTextarea v-model="question" /><br>
|
|
||||||
<p>{{ answer }}</p>
|
|
||||||
<VBtn @click="getAnswer">
|
|
||||||
Send
|
|
||||||
</VBtn>
|
|
||||||
</template>
|
|
||||||
</VCard>
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,23 +1,5 @@
|
||||||
<script setup>
|
<script setup lang="ts">
|
||||||
import Test from '~/components/test.vue';
|
import { navigateTo } from 'nuxt/app';
|
||||||
|
|
||||||
|
navigateTo("/clients");
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
|
||||||
<h1>Hi mom!</h1>
|
|
||||||
<br>
|
|
||||||
<Test />
|
|
||||||
<Test />
|
|
||||||
<Test />
|
|
||||||
<Test />
|
|
||||||
<Test /><br>
|
|
||||||
<VCard
|
|
||||||
text="..."
|
|
||||||
variant="outlined"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
h1 {
|
|
||||||
color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { useFetch } from '#app';
|
|
||||||
import { ref } from 'vue';
|
|
||||||
const tableContent = ref(await useFetch("/api/dbtest").data);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<v-card width="min-content">
|
|
||||||
<v-table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>id</th>
|
|
||||||
<th>nazwa</th>
|
|
||||||
<th>adres</th>
|
|
||||||
<th>kontakt</th>
|
|
||||||
<th />
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr v-for="row in tableContent" :key="row.id">
|
|
||||||
<td>{{ row.id }}</td>
|
|
||||||
<td>{{ row.nazwa }}</td>
|
|
||||||
<td>{{ row.adres }}</td>
|
|
||||||
<td>{{ row.kontakt }}</td>
|
|
||||||
<td>
|
|
||||||
<v-btn-group variant="plain">
|
|
||||||
<v-btn icon="mdi-pencil" color="main" />
|
|
||||||
<v-btn icon="mdi-delete" color="red" />
|
|
||||||
</v-btn-group>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="last">
|
|
||||||
<td>*</td>
|
|
||||||
<td><v-text-field label="nazwa" density="compact" /></td>
|
|
||||||
<td><v-text-field label="adres" density="compact" /></td>
|
|
||||||
<td><v-text-field label="kontakt" density="compact" /></td>
|
|
||||||
<td><v-btn icon="mdi-plus" variant="plain" class="rounded" /></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</v-table>
|
|
||||||
</v-card>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.last td:not(:last-child):not(:first-child) {
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
/* global defineEventHandler */
|
|
||||||
|
|
||||||
import { database } from "../utils/database";
|
|
||||||
|
|
||||||
export default defineEventHandler(async () => {
|
|
||||||
const [owo] = await database.execute("SELECT * FROM `sch_baza_smartfony`.`lombardy`");
|
|
||||||
|
|
||||||
return owo as {id: number, nazwa: string, adres: string, kontakt: string}[];
|
|
||||||
});
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
/* global defineEventHandler, readBody */
|
|
||||||
|
|
||||||
import { RowDataPacket } from "mysql2";
|
|
||||||
|
|
||||||
import { database } from "../utils/database";
|
|
||||||
import { isString } from "../utils/isString";
|
|
||||||
|
|
||||||
export default defineEventHandler(async (e) => {
|
|
||||||
const data = await readBody(e);
|
|
||||||
|
|
||||||
const nazwa = data.nazwa;
|
|
||||||
const adres = data.adres;
|
|
||||||
const kontakt = data.kontakt;
|
|
||||||
|
|
||||||
if (!isString(nazwa)) throw new Error("nazwa is not string");
|
|
||||||
if (!isString(adres)) throw new Error("adres is not string");
|
|
||||||
if (!isString(kontakt)) throw new Error("kontakt is not string");
|
|
||||||
|
|
||||||
const [inserted] = await database.query("INSERT INTO `sch_baza_smartfony`.`lombardy` (`nazwa`, `adres`, `kontakt`) VALUES (?, ?, ?);", [nazwa, adres, kontakt]) as RowDataPacket[];
|
|
||||||
return {
|
|
||||||
id: inserted.insertId as number,
|
|
||||||
nazwa,
|
|
||||||
adres,
|
|
||||||
kontakt,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
Loading…
Reference in a new issue