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>
|
||||
</VAppBar>
|
||||
<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>
|
||||
<VListItem prepend-icon="mdi-login" title="Login" value="/login" @click="navigateTo('/login')" />
|
||||
<VListItem prepend-icon="mdi-account" title="Clients" value="/clients" @click="navigateTo('/clients')" />
|
||||
<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>
|
||||
</VNavigationDrawer>
|
||||
</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>
|
||||
import Test from '~/components/test.vue';
|
||||
<script setup lang="ts">
|
||||
import { navigateTo } from 'nuxt/app';
|
||||
|
||||
navigateTo("/clients");
|
||||
</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