ssr runner and more admin panel stuff
This commit is contained in:
@@ -1,13 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import { useUser } from '~/composables/useUser'
|
||||
const { getUser } = useUser()
|
||||
|
||||
definePageMeta({
|
||||
middleware: ["auth", "admin"],
|
||||
layout: "admin"
|
||||
});
|
||||
|
||||
let systemStatusData = await $fetch("/api/admin/system-status")
|
||||
let {data: systemStatusData, refresh} = await useFetch("/api/admin/status")
|
||||
|
||||
const calculateTimeSince = (time) => {
|
||||
const now = new Date();
|
||||
@@ -29,23 +26,22 @@ const calculateTimeSince = (time) => {
|
||||
return timeParts.join(', ');
|
||||
}
|
||||
|
||||
let uptime = ref('');
|
||||
let lastGcTime = ref('');
|
||||
let uptime = ref(calculateTimeSince(systemStatusData.value.uptime));
|
||||
let lastGcTime = ref(calculateTimeSince(systemStatusData.value.last_gc_time));
|
||||
|
||||
let systemStatusInterval;
|
||||
let timeInterval;
|
||||
|
||||
const updateTime = () => {
|
||||
uptime.value = calculateTimeSince(systemStatusData.uptime);
|
||||
lastGcTime.value = calculateTimeSince(systemStatusData.last_gc_time)
|
||||
uptime.value = calculateTimeSince(systemStatusData.value.uptime);
|
||||
lastGcTime.value = calculateTimeSince(systemStatusData.value.last_gc_time)
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
updateTime();
|
||||
|
||||
systemStatusInterval = setInterval(async () => {
|
||||
console.log("refresh")
|
||||
systemStatusData = await $fetch("/api/admin/system-status")
|
||||
refresh()
|
||||
}, 5000);
|
||||
|
||||
timeInterval = setInterval(updateTime, 1000);
|
||||
|
||||
82
ui/pages/admin/users/[id]/edit.vue
Normal file
82
ui/pages/admin/users/[id]/edit.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<script setup lang="ts">
|
||||
import type { Plan, User } from '~/types/user';
|
||||
|
||||
definePageMeta({
|
||||
middleware: ["auth", "admin"],
|
||||
layout: "admin"
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
let { data: user } = await useFetch<User>('/api/admin/users/' + route.params.id);
|
||||
|
||||
let username = ref(user.value?.username);
|
||||
let email = ref(user.value?.email);
|
||||
let password = ref('');
|
||||
let plan_id = ref(user.value?.plan.id);
|
||||
let is_admin = ref(user.value?.is_admin ? 'checked' : 'unchecked');
|
||||
|
||||
const updateUser = async () => {
|
||||
let body = {
|
||||
username: username.value,
|
||||
email: email.value,
|
||||
password: password.value,
|
||||
plan_id: plan_id.value,
|
||||
is_admin: is_admin.value === 'checked' ? true : false,
|
||||
}
|
||||
|
||||
if (password.value === '') {
|
||||
delete body.password
|
||||
}
|
||||
|
||||
await $fetch('/api/admin/users/edit/' + route.params.id, {
|
||||
method: "POST",
|
||||
body,
|
||||
})
|
||||
}
|
||||
|
||||
let { data: plans } = await useFetch<Plan[]>('/api/admin/plans');
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full h-fit mb-4">
|
||||
<div class="overflow-hidden rounded-md border text-[15px]">
|
||||
<h4 class="bg-surface px-3.5 py-3 border-b">Edit User Account
|
||||
</h4>
|
||||
<div class="p-4">
|
||||
<label for="username" class="block max-w-64 text-sm">Username</label>
|
||||
<Input v-model="username" :value="username" id="username" placeholder="Username" class="w-full mb-2" />
|
||||
<label for="email" class="block max-w-64 text-sm">Email</label>
|
||||
<Input v-model="email" :value="email" id="email" placeholder="Email" class="w-full mb-2" />
|
||||
<div class="mb-2">
|
||||
<label for="password" class="block max-w-64 text-sm">Password</label>
|
||||
<Input v-model="password" id="password" placeholder="Password" class="w-full" />
|
||||
<p class="text-muted text-sm">Leave the password empty to keep it unchanged</p>
|
||||
</div>
|
||||
<label for="plan_id" class="block max-w-64 text-sm">Plan</label>
|
||||
<!-- select the one with the value of user.value.plan_id -->
|
||||
<select v-model="plan_id" id="plan_id" :selected="plan_id"
|
||||
class="w-full max-w-64 px-4 py-2 rounded-md bg-overlay border hover:border-muted/40 focus:border-muted/60 cursor-pointer">
|
||||
<option v-for="plan in plans" :key="plan.id" :value="plan.id">
|
||||
{{ formatBytes(plan.max_storage) }}
|
||||
</option>
|
||||
</select>
|
||||
<hr class="my-4" />
|
||||
<div class="flex items-center">
|
||||
<Checkbox v-model="is_admin" id="is_admin" type="checkbox" class="mr-2" />
|
||||
<label for="is_admin" class="text-sm">
|
||||
Is Admin
|
||||
</label>
|
||||
</div>
|
||||
<hr class="my-4" />
|
||||
<div>
|
||||
<button
|
||||
class="transition-bg bg-pine/10 text-pine px-3 py-2 rounded-md hover:bg-pine/15 active:bg-pine/25"
|
||||
v-on:click="updateUser">
|
||||
Update User
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,7 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { useUser } from "~/composables/useUser"
|
||||
import type { User } from "~/types/user";
|
||||
const { getUser } = useUser()
|
||||
|
||||
definePageMeta({
|
||||
middleware: ["auth", "admin"],
|
||||
@@ -10,12 +8,18 @@ definePageMeta({
|
||||
|
||||
let page = ref(0)
|
||||
|
||||
const { data: users } = await useFetch<User[]>('/api/admin/get-users/' + page.value);
|
||||
const { data: usersCount } = await useFetch<{ total_users: number }>('/api/admin/get-total-users');
|
||||
const { data } = await useFetch<{ users: User[], total_users: number }>('/api/admin/users?page=' + page.value);
|
||||
|
||||
if (data.value === null) {
|
||||
throw new Error("Failed to fetch users");
|
||||
}
|
||||
|
||||
// let { users, total_users } = data.value;
|
||||
let users = ref(data.value.users);
|
||||
let total_users = ref(data.value.total_users);
|
||||
const fetchNextPage = async () => {
|
||||
page.value += 1;
|
||||
let moreUsers = await $fetch('/api/admin/get-users/' + page.value);
|
||||
let { users: moreUsers } = await $fetch<{ users: User[], total_users: number }>('/api/admin/users?page=' + page.value);
|
||||
console.log(moreUsers)
|
||||
users.value = users.value?.concat(moreUsers)
|
||||
}
|
||||
@@ -24,8 +28,17 @@ const fetchNextPage = async () => {
|
||||
<template>
|
||||
<div class="w-full h-fit mb-4">
|
||||
<div class="overflow-hidden rounded-md border text-[15px]">
|
||||
<h4 class="bg-surface px-3.5 py-3 border-b">User Account Management (Total: {{ usersCount.total_users }})
|
||||
</h4>
|
||||
<div class="flex bg-surface border-b items-center justify-between px-3.5 ">
|
||||
<h4 class="py-3 w-fit">User Account Management (Total: {{ total_users }})
|
||||
</h4>
|
||||
<NuxtLink to="/admin/users/new">
|
||||
<button
|
||||
class="transition-bg bg-pine/10 text-pine px-2 py-1.5 rounded-md hover:bg-pine/15 active:bg-pine/25 h-fit text-xs"
|
||||
v-on:click="updateUser">
|
||||
Create User Account
|
||||
</button>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="overflow-x-scroll max-w-full">
|
||||
<table class="min-w-full">
|
||||
<thead>
|
||||
@@ -40,7 +53,10 @@ const fetchNextPage = async () => {
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="user in users" class="border-t">
|
||||
<td class="py-2 px-4 max-w-44" :title="user.id">{{ user.id }}</td>
|
||||
<td class="py-2 px-4 max-w-44 whitespace-nowrap overflow-hidden text-ellipsis"
|
||||
:title="user.id">
|
||||
{{ user.id }}
|
||||
</td>
|
||||
<td class="py-2 px-4">
|
||||
{{ user.username }}
|
||||
<span v-if="user.is_admin"
|
||||
@@ -65,18 +81,20 @@ const fetchNextPage = async () => {
|
||||
}) }}</td>
|
||||
<td class="py-2 px-4 h-full">
|
||||
<div class="flex items-center justify-end">
|
||||
<NuxtLink :to="`/admin/users/${user.id}/edit`"></NuxtLink>
|
||||
<button
|
||||
class="my-auto hover:bg-muted/10 p-1 transition-bg active:bg-muted/20 rounded-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
|
||||
viewBox="0 0 24 24">
|
||||
<g class="stroke-blue-400/90" fill="none" stroke="currentColor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
|
||||
<path d="M7 7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-1" />
|
||||
<path d="M20.385 6.585a2.1 2.1 0 0 0-2.97-2.97L9 12v3h3zM16 5l3 3" />
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
<NuxtLink :to="`/admin/users/${user.id}/edit`">
|
||||
<button
|
||||
class="my-auto hover:bg-muted/10 p-1 transition-bg active:bg-muted/20 rounded-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
|
||||
viewBox="0 0 24 24">
|
||||
<g class="stroke-blue-400/90" fill="none" stroke="currentColor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
|
||||
<path d="M7 7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-1" />
|
||||
<path
|
||||
d="M20.385 6.585a2.1 2.1 0 0 0-2.97-2.97L9 12v3h3zM16 5l3 3" />
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -84,8 +102,9 @@ const fetchNextPage = async () => {
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full h-full flex justify-center mt-4" v-if="users?.length != usersCount.total_users">
|
||||
<button class="bg-accent/10 text-accent px-2 py-1 rounded-md hover:" v-on:click="fetchNextPage()">Load
|
||||
<div class="w-full h-full flex justify-center mt-4" v-if="users?.length != total_users">
|
||||
<button class="transition-bg bg-pine/10 text-pine px-2 py-1 rounded-md hover:bg-pine/15 active:bg-pine/25"
|
||||
v-on:click="fetchNextPage()">Load
|
||||
More</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
64
ui/pages/admin/users/new.vue
Normal file
64
ui/pages/admin/users/new.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<script setup lang="ts">
|
||||
import type { User } from '~/types/user';
|
||||
|
||||
definePageMeta({
|
||||
middleware: ["auth", "admin"],
|
||||
layout: "admin"
|
||||
});
|
||||
|
||||
let username = ref('')
|
||||
let email = ref('')
|
||||
let password = ref('')
|
||||
|
||||
let error = ref('')
|
||||
|
||||
let timeout;
|
||||
const submitForm = async () => {
|
||||
let { data, error: fetchError } = await useAsyncData<User, NuxtError<{ message: string }>>(
|
||||
() => $fetch('/api/admin/users/new', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
"username": username.value,
|
||||
"email": email.value,
|
||||
"password": password.value,
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
if (fetchError.value != null && fetchError.value.data !== undefined) {
|
||||
error.value = fetchError.value.data.message
|
||||
timeout = setTimeout(() => error.value = "", 15000)
|
||||
} else if (data.value !== null) {
|
||||
await navigateTo('/admin/users')
|
||||
}
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
clearTimeout(timeout)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full h-fit mb-4">
|
||||
<div class="overflow-hidden rounded-md border text-[15px]">
|
||||
<h4 class="bg-surface px-3.5 py-3 border-b">Create User Account
|
||||
</h4>
|
||||
<div class="p-4">
|
||||
<label for="username" class="block max-w-64 text-sm">Username</label>
|
||||
<Input v-model="username" :value="username" id="username" placeholder="Username" class="w-full mb-2" />
|
||||
<label for="email" class="block max-w-64 text-sm">Email</label>
|
||||
<Input v-model="email" :value="email" id="email" placeholder="Email" class="w-full mb-2" />
|
||||
<label for="password" class="block max-w-64 text-sm">Password</label>
|
||||
<Input v-model="password" id="password" type="password" placeholder="Password" class="w-full mb-2" />
|
||||
<p class="text-love mb-2">{{ error }}</p>
|
||||
<div>
|
||||
<button
|
||||
class="transition-bg bg-pine/10 text-pine px-3 py-2 rounded-md hover:bg-pine/15 active:bg-pine/25"
|
||||
v-on:click="submitForm">
|
||||
Create User Account
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user