CraftAttack/website
4
0
Fork 0
Code Issues 3 Pull Requests Actions Wiki Activity

remove table resizing and fix admin panel user scroll behavior
All checks were successful
delpoy / build-and-deploy (push) Successful in 56s
Details

Browse Source
This commit is contained in:
bytedream 2023-09-30 02:13:09 +02:00
parent b1f546ee94
commit 9ababd4847
4 changed files with 46 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/lib/components/Input/Select.svelte
View File

@ -1,9 +1,10 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
// eslint-disable-next-line no-undef
type T = $$Generic;
export let id: string | null = null;
export let name: string | null = null;
export let value: any | null = null;
export let value: T | null = null;
export let label: string | null = null;
export let notice: string | null = null;
export let required = false;

53
src/lib/components/utils.ts
View File

@ -3,56 +3,3 @@ export async function buttonTriggeredRequest<T>(e: MouseEvent, promise: Promise<
await promise;
(e.target as HTMLButtonElement).disabled = false;
}
export function resizeTableColumn(event: MouseEvent, dragOffset: number) {
const element = event.target as HTMLTableCellElement;
const rect = element.getBoundingClientRect();
const posX = event.clientX - rect.left;
const offset = rect.width - event.clientX;
if (posX <= dragOffset || posX >= rect.width - dragOffset) {
// do not resize if resize request is on the table left or right
if (
(posX <= dragOffset && !element.previousElementSibling) ||
(posX >= rect.width - dragOffset && !element.nextElementSibling)
) {
return;
}
const table = element.parentElement!.parentElement!.parentElement as HTMLTableElement;
let resizeRow: HTMLTableRowElement;
if (table.tBodies[0].rows[0].hasAttribute('resize-row')) {
resizeRow = table.tBodies[0].rows[0];
} else {
resizeRow = table.tBodies[0].insertRow(0);
resizeRow.setAttribute('resize-row', '');
resizeRow.style.height = '0';
resizeRow.style.border = '0';
resizeRow.style.overflow = 'hidden';
for (let i = 0; i < table.rows[0].cells.length; i++) {
const cell = resizeRow.insertCell();
cell.style.padding = '0';
}
// insert an additional to keep the zebra in place pattern which might be applied
const zebraGhostRow = table.tBodies[0].insertRow(1);
zebraGhostRow.hidden = true;
}
const resizeElement =
resizeRow.cells[element.cellIndex - ((posX <= dragOffset) as unknown as number)];
// eslint-disable-next-line svelte/no-inner-declarations,no-inner-declarations
function resize(e: MouseEvent) {
document.body.style.cursor = 'col-resize';
resizeElement.style.width = `${offset + e.clientX}px`;
}
document.addEventListener('mousemove', resize);
document.addEventListener('mouseup', () => {
document.removeEventListener('mousemove', resize);
document.body.style.cursor = 'initial';
});
}
}

61
src/routes/admin/admin/+page.svelte
View File

@ -6,7 +6,7 @@
import { Permissions } from '$lib/permissions';
import { env } from '$env/dynamic/public';
import ErrorToast from '$lib/components/Toast/ErrorToast.svelte';
import { buttonTriggeredRequest, resizeTableColumn } from '$lib/components/utils';
import { buttonTriggeredRequest } from '$lib/components/utils';
import { goto } from '$app/navigation';
import { adminCount } from '$lib/stores';
@ -97,18 +97,18 @@
<table class="table table-zebra w-full">
<thead>
<tr>
<th on:mousedown={(e) => resizeTableColumn(e, 5)} />
<th on:mousedown={(e) => resizeTableColumn(e, 5)}>Benutzername</th>
<th on:mousedown={(e) => resizeTableColumn(e, 5)}>Passwort</th>
<th on:mousedown={(e) => resizeTableColumn(e, 5)}>Berechtigungen</th>
<th on:mousedown={(e) => resizeTableColumn(e, 5)} />
<th />
<th>Benutzername</th>
<th>Passwort</th>
<th>Berechtigungen</th>
<th />
</tr>
</thead>
<tbody>
{#each data.admins as admin, i}
<tr>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>{i + 1}</td>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}
<td>{i + 1}</td>
<td
><Input
type="text"
bind:value={admin.username}
@ -116,7 +116,7 @@
size="sm"
/></td
>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}
<td
><Input
type="password"
bind:value={admin.password}
@ -125,14 +125,14 @@
size="sm"
/></td
>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}
<td
><Badges
bind:value={admin.permissions}
available={allPermissionBadges}
disabled={!permissions.adminWrite() || !admin.edit}
/></td
>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<td>
<div>
{#if admin.edit}
<span class="w-min" class:cursor-not-allowed={!permissions.adminWrite()}>
@ -196,21 +196,17 @@
</tr>
{/each}
<tr>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>{data.admins.length + 1}</td>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}
><Input type="text" bind:value={newAdminUsername} size="sm" /></td
>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}
><Input type="password" bind:value={newAdminPassword} size="sm" /></td
>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}
<td>{data.admins.length + 1}</td>
<td><Input type="text" bind:value={newAdminUsername} size="sm" /></td>
<td><Input type="password" bind:value={newAdminPassword} size="sm" /></td>
<td
><Badges
bind:value={newAdminPermissions}
available={allPermissionBadges}
disabled={!permissions.adminWrite()}
/></td
>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<td>
<span
class="w-min"
class:cursor-not-allowed={!permissions.adminWrite() ||
@ -241,28 +237,3 @@
<ErrorToast show={errorMessage !== ''}>
<span />
</ErrorToast>
<style lang="scss">
thead tr th,
tbody tr td {
@apply relative;
&:not(:first-child) {
@apply border-l-[1px] border-dashed;
&::before {
@apply absolute left-0 bottom-0 h-full w-[5px] cursor-col-resize;
content: '';
}
}
&:not(:last-child) {
@apply border-r-[1px] border-dashed border-base-300;
&::after {
@apply absolute right-0 bottom-0 h-full w-[5px] cursor-col-resize;
content: '';
}
}
}
</style>

59
src/routes/admin/users/+page.svelte
View File

@ -5,7 +5,7 @@
import Select from '$lib/components/Input/Select.svelte';
import { env } from '$env/dynamic/public';
import type { User } from '$lib/server/database';
import { buttonTriggeredRequest, resizeTableColumn } from '$lib/components/utils';
import { buttonTriggeredRequest } from '$lib/components/utils';
import { browser } from '$app/environment';
import HeaderBar from './HeaderBar.svelte';
@ -120,16 +120,16 @@
}
</script>
<div>
<div class="h-screen flex flex-col overflow-hidden">
<HeaderBar bind:userFilter />
<hr class="divider my-1 mx-8 border-none" />
<div class="h-[90vh] overflow-scroll" bind:this={userTableContainerElement}>
<table class="table relative">
<div class="h-full overflow-scroll" bind:this={userTableContainerElement}>
<table class="table table-auto">
<thead>
<tr class="[&>th]:bg-base-100 [&>th]:z-[1] [&>th]:sticky [&>th]:top-0">
<th />
{#each headers as header}
<th on:mousedown={(e) => resizeTableColumn(e, 5)}>
<th>
<button
class="flex items-center"
on:click={() => {
@ -155,14 +155,14 @@
{#await currentPageUsersRequest then _}
{#each currentPageUsers as user, i}
<tr>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>{i + 1}</td>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<td>{i + 1}</td>
<td>
<Input type="text" bind:value={user.firstname} disabled={!user.edit} size="sm" />
</td>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<td>
<Input type="text" bind:value={user.lastname} disabled={!user.edit} size="sm" />
</td>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<td>
<Input
type="date"
value={new Date(user.birthday).toISOString().split('T')[0]}
@ -171,23 +171,23 @@
size="sm"
/>
</td>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<td>
<Input type="tel" bind:value={user.telephone} disabled={!user.edit} size="sm" />
</td>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<td>
<Input type="text" bind:value={user.username} disabled={!user.edit} size="sm" />
</td>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<td>
<Select id="edition" bind:value={user.playertype} disabled={!user.edit} size="sm">
<option value="java">Java Edition</option>
<option value="bedrock">Bedrock Edition</option>
<option value="cracked">Java cracked</option>
</Select>
</td>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<td>
<Input type="text" bind:value={user.password} disabled={!user.edit} size="sm" />
</td>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<td>
<Input
id="uuid"
type="text"
@ -196,7 +196,7 @@
size="sm"
/>
</td>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<td>
<div class="flex gap-1">
{#if user.edit}
<button
@ -242,8 +242,7 @@
{/key}
</tbody>
</table>
</div>
<div class="flex justify-center w-full mt-4 mb-6">
<div class="flex justify-center items-center mb-2 mt-4 w-full">
<div class="join">
{#each Array(Math.ceil(data.count / usersPerPage) || 1) as _, i}
<button
@ -256,29 +255,5 @@
{/each}
</div>
</div>
</div>
</div>
<style lang="scss">
thead tr th,
tbody tr td {
@apply relative;
&:not(:first-child) {
@apply border-l-[1px] border-dashed;
&::before {
@apply absolute left-0 bottom-0 h-full w-[5px] cursor-col-resize;
content: '';
}
}
&:not(:last-child) {
@apply border-r-[1px] border-dashed border-base-300;
&::after {
@apply absolute right-0 bottom-0 h-full w-[5px] cursor-col-resize;
content: '';
}
}
}
</style>