🌐 Virtual Assistant Job Board

\n \n

Current Job Listings

\n {jobs.map((job, index) => (\n

{job.title}

{job.description}

\n 👤 Posted by: {job.author}\n 💰 Rate: {job.rate}\n 🛠 Skills: {job.skills}\n

\n \n {/* Comments Section */}\n

💬 Comments

\n {comments[job.id] && comments[job.id].map((comment, commentIndex) => (\n

\n {comment.author}: {comment.text}\n

\n ))}\n \n \n

\n ))}\n

\n\n

Post a Job

\n setNewJob({...newJob, author: e.target.value})}\n required \n />\n setNewJob({...newJob, title: e.target.value})}\n required \n />\n

setNewJob({...newJob, description: e.target.value})}\n            required \n          />\n          <input \n            type=\"text\" \n            placeholder=\"Hourly Rate\" \n            value={newJob.rate}\n            onChange={(e) => setNewJob({...newJob, rate: e.target.value})}\n          />\n          <input \n            type=\"text\" \n            placeholder=\"Required Skills\" \n            value={newJob.skills}\n            onChange={(e) => setNewJob({...newJob, skills: e.target.value})}\n          />\n          <button type=\"submit\">Post Job 📋</button>\n        </form>\n      </div>\n\n      <a \n        href={import.meta.url.replace(\"esm.town\", \"val.town\")} \n        target=\"_top\" \n        style={{color: '#888', textDecoration: 'none', fontSize: '0.8em'}}\n      >\n        View Source\n      </a>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<JobBoard />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n  const KEY = \"positiveLimeReptile\";\n  const SCHEMA_VERSION = 3; // Increment schema version due to comments table\n\n  // Updated jobs table schema\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_jobs_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      author TEXT NOT NULL,\n      title TEXT NOT NULL,\n      description TEXT NOT NULL,\n      rate TEXT,\n      skills TEXT,\n      created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  // Create comments table\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_comments_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      job_id INTEGER NOT NULL,\n      author TEXT NOT NULL,\n      text TEXT NOT NULL,\n      created_at DATETIME DEFAULT CURRENT_TIMESTAMP,\n      FOREIGN KEY(job_id) REFERENCES ${KEY}_jobs_${SCHEMA_VERSION}(id)\n    )\n  `);\n\n  // Handle job retrieval with ID\n  if (request.method === 'GET' && new URL(request.url).pathname === '/jobs') {\n    const jobs = await sqlite.execute(`\n      SELECT id, author, title, description, rate, skills \n      FROM ${KEY}_jobs_${SCHEMA_VERSION} \n      ORDER BY created_at DESC \n      LIMIT 50\n    `);\n    return new Response(JSON.stringify(jobs.rows), {\n      headers: { 'Content-Type': 'application/json' }\n    });\n  }\n\n  // Handle comments retrieval\n  if (request.method === 'GET' && new URL(request.url).pathname === '/comments') {\n    const url = new URL(request.url);\n    const jobId = url.searchParams.get('jobId');\n    \n    const comments = await sqlite.execute(`\n      SELECT author, text \n      FROM ${KEY}_comments_${SCHEMA_VERSION} \n      WHERE job_id = ? \n      ORDER BY created_at ASC\n    `, [jobId]);\n    \n    return new Response(JSON.stringify(comments.rows), {\n      headers: { 'Content-Type': 'application/json' }\n    });\n  }\n\n  // Handle job posting\n  if (request.method === 'POST' && new URL(request.url).pathname === '/postjob') {\n    const jobData = await request.json();\n    const result = await sqlite.execute(`\n      INSERT INTO ${KEY}_jobs_${SCHEMA_VERSION} \n      (author, title, description, rate, skills) \n      VALUES (?, ?, ?, ?, ?)\n    `, [\n      jobData.author,\n      jobData.title, \n      jobData.description, \n      jobData.rate, \n      jobData.skills\n    ]);\n    return new Response(JSON.stringify({ \n      status: 'Job Posted', \n      id: result.lastInsertRowid \n    }), {\n      headers: { 'Content-Type': 'application/json' }\n    });\n  }\n\n  // Handle comment posting\n  if (request.method === 'POST' && new URL(request.url).pathname === '/postcomment') {\n    const commentData = await request.json();\n    await sqlite.execute(`\n      INSERT INTO ${KEY}_comments_${SCHEMA_VERSION} \n      (job_id, author, text) \n      VALUES (?, ?, ?)\n    `, [\n      commentData.jobId,\n      commentData.author,\n      commentData.text\n    ]);\n    return new Response(JSON.stringify({ status: 'Comment Posted' }), {\n      headers: { 'Content-Type': 'application/json' }\n    });\n  }\n\n  // Serve HTML\n  return new Response(`\n    <html>\n      <head>\n        <title>Virtual Assistant Job Board</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        <style>${css}</style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: { 'Content-Type': 'text/html' }\n  });\n}\n\nconst css = `\nbody {\n  font-family: 'Arial', sans-serif;\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 20px;\n  background-color: #f4f4f4;\n}\n\n.job-board {\n  background: white;\n  padding: 20px;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.job-form {\n  background: #f9f9f9;\n  padding: 15px;\n  border-radius: 5px;\n  margin-top: 20px;\n}\n\n.job-form input, \n.job-form textarea {\n  width: 100%;\n  margin: 10px 0;\n  padding: 10px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\n.job-listings {\n  display: grid;\n  gap: 15px;\n}\n\n.job-card {\n  background: #f1f1f1;\n  padding: 15px;\n  border-radius: 5px;\n}\n\n.job-details {\n  display: flex;\n  justify-content: space-between;\n  margin-top: 10px;\n  color: #666;\n}\n\n.comments-section {\n  margin-top: 15px;\n  border-top: 1px solid #ddd;\n  padding-top: 10px;\n}\n\n.comment {\n  background: #f8f8f8;\n  padding: 8px;\n  margin: 5px 0;\n  border-radius: 4px;\n}\n\n.comment-form {\n  display: flex;\n  margin-top: 10px;\n}\n\n.comment-form input {\n  flex-grow: 1;\n  margin-right: 10px;\n}\n\nbutton {\n  background-color: #4CAF50;\n  color: white;\n  border: none;\n  padding: 10px 20px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\nbutton:hover {\n  background-color: #45a049;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/Amaks/vA/code/main.tsx","extension","actionData","errors"]
</article></body></html>