Users management

/** @jsxImportSource https://esm.sh/preact */ import { sqlite } from "https://esm.town/v/std/sqlite?v=4"; import { render } from "npm:preact-render-to-string"; const inputType = (type, name) => { const displayName = name.replace("_", " "); switch (type) { case "INTEGER": return (

{displayName}

); case "TIMESTAMP": return (

{displayName}

); } return (

{displayName}

); }; const getDatabaseStructure = async () => { let struct = []; try { const table = await sqlite.execute("PRAGMA table_info(users);"); const rows = await table.rows; const row = rows; const arr = Array.from(row); arr.forEach(v => { const name = v[1]; const type = v[2]; if (name === "id") return; struct.push([name, inputType(type, name)]); }); } catch (e) { console.error(e); } return struct; }; async function getUsersList() { const list = await sqlite.execute(` SELECT id, first_name, last_name, email, membership_until FROM users ORDER BY membership_until ASC `); return list.rows; } async function getFormData(req: Request, structure) { if (req.method !== "POST") return await getUsersList(); const data = await req.formData(); if (data.get("action") === "submit") { let namesList = ""; let dataList = ""; structure.forEach(v => { const name = v[0]; if (namesList.length > 1) { namesList += ", "; dataList += ", "; } namesList += name; const getVal = name === "membership_until" ? Number(Date.parse(data.get(name) as string) / 1000) : data.get(name); dataList += `'${getVal}'`; }); const query = `INSERT INTO users (${namesList}) VALUES(${dataList});`; await sqlite.execute(query); } if (data.get("action") === "update-date") { const query = ` UPDATE users SET membership_until=${Number(Date.parse(data.get("timestamp") as string) / 1000)} WHERE id=${data.get("id")}; `; await sqlite.execute(query); } if (data.get("action") === "delete") { const query = ` DELETE FROM users WHERE id=${data.get("id")}; `; await sqlite.execute(query); } return await getUsersList(); } const css = ` html { font-family: Roboto, "Open Sans", sans-serif; background: #eceaea; } h1 { text-align: center; } input { display: inline-block; padding: 0 16px 0 12px; width: 100%; line-height: 30px; height: 32px; border: 1px solid #dddbda; border-radius: 4px; background-color: #fff; color: rgb(8, 7, 7); transition: border .1s linear,background-color .1s linear; } input:focus{ border-color: #1b96ff; color: var(--sds-c-input-text-color-focus); box-shadow: rgb(1, 118, 211) 0px 0px 3px 0px; } button, .add-user_button { margin-top: 1rem; margin-right: 0.25rem; display: inline-block; outline: none; cursor: pointer; padding: 0 16px; background-color: #fff; border-radius: 0.25rem; border: 1px solid #0070d2; color: #0070d2; font-size: 13px; line-height: 30px; font-weight: 400; text-align: center; } button:hover { background-color: #f4f6f9; } .add-user_container { max-width: 500px; margin: auto; .add-user_form{ display: none; } .add-user_button { display:block; } } .add-user_container.open { .add-user_form{ display: block; } .add-user_button { display:none; } } .users-table { max-width: 750px; margin: auto; table { width: 100%; border-collapse: separate; border-bottom: 1px solid #e5e5e5; td { background: white; padding: 4px; } td:last-of-type { width: 50px; } } button { margin: 0; } } `; const js = ` let addOpen = false; const addClass = " open"; const addButton = document.querySelector(".add-user_button"); const cancelButton = document.querySelector(".cancel-add-user"); const form = document.querySelector(".add-user_container"); const cancel = ()=>{ addOpen = !addOpen; if(addOpen){ form.className = form.className + addClass; }else{ form.className = form.className.replace(addClass,""); } }; addButton.onclick = cancel; cancelButton.onclick = (e) => { e.preventDefault(); cancel(); } `; const UserRow = ({ user }) => { const [id, name, surname, email, timestamp] = user; return ( {name} {surname} {email} ); }; export default async function(req: Request) { const struct = await getDatabaseStructure(); const users = await getFormData(req, struct); return new Response( render( Users management

manage_users

Version 130