migrate to WebSocket for frontend and backend communication

This commit is contained in:
2024-09-09 21:38:10 +07:00
parent b46915e46d
commit b23bf8898b
16 changed files with 309 additions and 202 deletions

View File

@ -6,7 +6,7 @@ import (
)
templ component(title string, files []types.FileData){
@layout.Base(title){
@layout.BaseAuth(title){
<div class="dark min-h-screen p-4 sm:p-6 bg-gray-900 text-white">
<div class="space-y-4">
<header class="text-center">

View File

@ -23,6 +23,28 @@ templ Base(title string){
</html>
}
templ BaseAuth(title string){
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Secure and reliable file hosting service. Upload, organize, and share your documents, images, videos, and more. Sign up now to keep your files always within reach." />
<meta name="keywords" content="file hosting, file sharing, cloud storage, data storage, secure file hosting, filekeeper, drive, mega" />
<meta name="author" content="Filekeeper" />
<link href="/public/output.css" rel="stylesheet"/>
<title>{ title }</title>
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
<script src="/public/main.js"></script>
</head>
<body>
<div id="content">
{ children... }
</div>
</body>
</html>
}
templ Navbar(user types.User) {
<header class="flex items-center justify-between border-b border-gray-200 bg-white px-6 py-4">
<div class="flex items-center gap-4">

View File

@ -3,7 +3,7 @@ package uploadView
import "github.com/fossyy/filekeeper/view/client/layout"
templ content(title string) {
@layout.Base(title){
@layout.BaseAuth(title){
<div class="flex items-center min-h-screen p-4 sm:p-6 bg-gray-900 text-white">
<div class="mx-auto w-full max-w-md space-y-8">
<div class="rounded-lg border bg-card text-card-foreground shadow-sm w-full max-w-md" data-v0-t="card">
@ -43,7 +43,23 @@ templ content(title string) {
</div>
</div>
</div>
<script src="/public/upload.js" />
<script type="text/javascript">
document.addEventListener("dragover", function (event) {
event.preventDefault();
});
document.addEventListener("drop", async function (event) {
event.preventDefault();
const file = event.dataTransfer.files[0]
await handleFile(file)
});
document.getElementById('dropzone-file').addEventListener('change', async function(event) {
event.preventDefault();
const file = event.target.files[0]
await handleFile(file)
});
</script>
}
}

View File

@ -6,7 +6,7 @@ import (
)
templ content(title string, qrcode string, code string, user types.User, msg types.Message) {
@layout.Base(title){
@layout.BaseAuth(title){
@layout.Navbar(user)
<main class="container mx-auto px-4 py-12 md:px-6 md:py-16 lg:py-10">
<a

View File

@ -7,7 +7,7 @@ import (
)
templ content(message types.Message, title string, user types.User, ListSession []*session.SessionInfo) {
@layout.Base(title){
@layout.BaseAuth(title){
@layout.Navbar(user)
<main class="container mx-auto px-4 py-12 md:px-6 md:py-16 lg:py-10">
<div class="grid gap-10 lg:grid-cols-[1fr_300px]">