{\n e.target.onerror = null; \n e.target.src = 'https://maxm-imggenurl.web.val.run/school-placeholder';\n }}\n />\n

{school.name}

\n {school.type}\n 📍 {school.location}\n ⭐ {school.rating || 'N/A'}/5\n

{school.description}

📞 {school.phone}

🌐 {school.website}

\n \n

\n );\n}\n\nfunction SchoolSubmissionForm({ onSubmit }) {\n const [formData, setFormData] = useState({\n name: '',\n type: 'Public',\n location: '',\n description: '',\n phone: '',\n website: '',\n email: '',\n rating: 0,\n imageFile: null\n });\n\n const handleChange = (e) => {\n const { name, value, files } = e.target;\n setFormData(prev => ({\n ...prev,\n [name]: files ? files[0] : value\n }));\n };\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n \n // Create FormData for file upload\n const formDataToSend = new FormData();\n Object.keys(formData).forEach(key => {\n formDataToSend.append(key, formData[key]);\n });\n\n try {\n const response = await fetch('/submit-school', {\n method: 'POST',\n body: formDataToSend\n });\n\n const result = await response.json();\n\n if (result.success) {\n alert('School submitted successfully!');\n // Reset form\n setFormData({\n name: '',\n type: 'Public',\n location: '',\n description: '',\n phone: '',\n website: '',\n email: '',\n rating: 0,\n imageFile: null\n });\n // Refresh school list\n onSubmit();\n } else {\n alert(result.error || 'Failed to submit school');\n }\n } catch (error) {\n console.error('Submission error:', error);\n alert('Error submitting school');\n }\n };\n\n return (\n

🏫 List Your School

\n School Name\n \n

\n School Type\n \n

\n Location\n \n

\n Description\n

\n        </div>\n        <div className=\"form-group\">\n          <label>Phone Number</label>\n          <input \n            type=\"tel\" \n            name=\"phone\" \n            value={formData.phone} \n            onChange={handleChange} \n            required \n          />\n        </div>\n        <div className=\"form-group\">\n          <label>Website</label>\n          <input \n            type=\"url\" \n            name=\"website\" \n            value={formData.website} \n            onChange={handleChange} \n          />\n        </div>\n        <div className=\"form-group\">\n          <label>Contact Email</label>\n          <input \n            type=\"email\" \n            name=\"email\" \n            value={formData.email} \n            onChange={handleChange} \n            required \n          />\n        </div>\n        <div className=\"form-group\">\n          <label>School Image</label>\n          <input \n            type=\"file\" \n            name=\"imageFile\" \n            accept=\"image/*\" \n            onChange={handleChange} \n            required \n          />\n        </div>\n        <button type=\"submit\" className=\"submit-btn\">Submit School</button>\n      </form>\n    </div>\n  );\n}\n\nfunction App() {\n  const [schools, setSchools] = useState([]);\n  const [searchTerm, setSearchTerm] = useState('');\n  const [activeTab, setActiveTab] = useState('list');\n\n  const fetchSchools = () => {\n    fetch('/get-schools')\n      .then(response => response.json())\n      .then(data => setSchools(data))\n      .catch(error => console.error('Error fetching schools:', error));\n  };\n\n  useEffect(() => {\n    fetchSchools();\n  }, []);\n\n  const filteredSchools = schools.filter(school => \n    school.name.toLowerCase().includes(searchTerm.toLowerCase()) ||\n    school.location.toLowerCase().includes(searchTerm.toLowerCase())\n  );\n\n  return (\n    <div className=\"school-directory\">\n      <header>\n        <h1>🏫 School Directory</h1>\n        <div className=\"tab-navigation\">\n          <button \n            className={activeTab === 'list' ? 'active' : ''}\n            onClick={() => setActiveTab('list')}\n          >\n            School Listings\n          </button>\n          <button \n            className={activeTab === 'submit' ? 'active' : ''}\n            onClick={() => setActiveTab('submit')}\n          >\n            List Your School\n          </button>\n        </div>\n        {activeTab === 'list' && (\n          <input \n            type=\"text\" \n            placeholder=\"Search schools by name or location\" \n            value={searchTerm}\n            onChange={(e) => setSearchTerm(e.target.value)}\n            className=\"search-input\"\n          />\n        )}\n      </header>\n      \n      <main>\n        {activeTab === 'list' ? (\n          <div className=\"school-list\">\n            {filteredSchools.map(school => (\n              <SchoolCard key={school.id} school={school} />\n            ))}\n          </div>\n        ) : (\n          <SchoolSubmissionForm \n            onSubmit={fetchSchools}\n          />\n        )}\n      </main>\n\n      <footer>\n        <p>\n          <a \n            href={import.meta.url.replace(\"esm.town\", \"val.town\")} \n            target=\"_top\"\n          >\n            View Source\n          </a>\n        </p>\n      </footer>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  // Dynamic imports to avoid client-side errors\n  const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n  const { blob } = await import(\"https://esm.town/v/std/blob\");\n  const KEY = \"SchoolListingWebsite\";\n\n  // Define CSS directly in the server function\n  const css = `\n    body {\n      font-family: 'Arial', sans-serif;\n      background-color: #f4f6f9;\n      margin: 0;\n      padding: 0;\n      line-height: 1.6;\n    }\n\n    .school-directory {\n      max-width: 1200px;\n      margin: 0 auto;\n      padding: 20px;\n    }\n\n    header {\n      text-align: center;\n      background-color: #2c3e50;\n      color: white;\n      padding: 20px;\n      border-radius: 8px;\n      margin-bottom: 20px;\n    }\n\n    header h1 {\n      margin: 0;\n      font-size: 2.5em;\n    }\n\n    .tab-navigation {\n      display: flex;\n      justify-content: center;\n      margin-bottom: 15px;\n    }\n\n    .tab-navigation button {\n      background-color: #34495e;\n      color: white;\n      border: none;\n      padding: 10px 20px;\n      margin: 0 10px;\n      cursor: pointer;\n      border-radius: 5px;\n      transition: background-color 0.3s ease;\n    }\n\n    .tab-navigation button.active {\n      background-color: #3498db;\n    }\n\n    .search-input {\n      width: 100%;\n      max-width: 500px;\n      padding: 10px;\n      border: 2px solid #3498db;\n      border-radius: 5px;\n      font-size: 1em;\n    }\n\n    .school-list {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n      gap: 20px;\n    }\n\n    .school-card {\n      background-color: white;\n      border-radius: 10px;\n      box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n      overflow: hidden;\n      transition: transform 0.3s ease;\n    }\n\n    .school-card:hover {\n      transform: scale(1.03);\n    }\n\n    .school-image {\n      width: 100%;\n      height: 250px;\n      object-fit: cover;\n    }\n\n    .school-info {\n      padding: 15px;\n    }\n\n    .school-info h2 {\n      margin-top: 0;\n      color: #2c3e50;\n    }\n\n    .school-details {\n      display: flex;\n      justify-content: space-between;\n      margin-bottom: 10px;\n      color: #7f8c8d;\n    }\n\n    .school-description {\n      color: #34495e;\n    }\n\n    .school-contact {\n      margin-top: 10px;\n    }\n\n    .school-contact a {\n      color: #3498db;\n      text-decoration: none;\n    }\n\n    .learn-more-btn, .submit-btn {\n      background-color: #3498db;\n      color: white;\n      border: none;\n      padding: 10px 15px;\n      border-radius: 5px;\n      cursor: pointer;\n      transition: background-color 0.3s ease;\n      width: 100%;\n      margin-top: 10px;\n    }\n\n    .learn-more-btn:hover, .submit-btn:hover {\n      background-color: #2980b9;\n    }\n\n    .school-submission-form {\n      background-color: white;\n      padding: 30px;\n      border-radius: 10px;\n      box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n    }\n\n    .form-group {\n      margin-bottom: 15px;\n    }\n\n    .form-group label {\n      display: block;\n      margin-bottom: 5px;\n      color: #2c3e50;\n    }\n\n    .form-group input, \n    .form-group select, \n    .form-group textarea {\n      width: 100%;\n      padding: 10px;\n      border: 1px solid #bdc3c7;\n      border-radius: 5px;\n    }\n\n    footer {\n      text-align: center;\n      margin-top: 20px;\n      padding: 10px;\n      background-color: #2c3e50;\n      color: white;\n    }\n\n    footer a {\n      color: white;\n      text-decoration: none;\n    }\n\n    @media (max-width: 600px) {\n      .school-list {\n        grid-template-columns: 1fr;\n      }\n\n      .tab-navigation {\n        flex-direction: column;\n      }\n\n      .tab-navigation button {\n        margin: 5px 0;\n      }\n    }\n  `;\n\n  // Improved blob retrieval handler\n  if (request.method === 'GET' && new URL(request.url).pathname.startsWith('/blob/')) {\n    try {\n      const blobKey = new URL(request.url).pathname.split('/blob/')[1];\n      const blobData = await blob.get(blobKey);\n      \n      if (!blobData) {\n        return new Response('Blob not found', { status: 404 });\n      }\n\n      // Determine content type based on file extension or magic numbers\n      const contentType = (() => {\n        if (blobKey.endsWith('.png')) return 'image/png';\n        if (blobKey.endsWith('.gif')) return 'image/gif';\n        if (blobKey.endsWith('.webp')) return 'image/webp';\n        return 'image/jpeg'; // Default to JPEG\n      })();\n\n      return new Response(blobData, {\n        headers: {\n          'Content-Type': contentType,\n          'Cache-Control': 'public, max-age=31536000, immutable'\n        }\n      });\n    } catch (error) {\n      console.error('Blob retrieval error:', error);\n      return new Response('Error retrieving blob', { status: 500 });\n    }\n  }\n\n  // Ensure table exists\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_schools (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      name TEXT NOT NULL,\n      type TEXT NOT NULL,\n      location TEXT NOT NULL,\n      description TEXT,\n      phone TEXT,\n      website TEXT,\n      email TEXT,\n      rating REAL DEFAULT 0,\n      imageUrl TEXT\n    )\n  `);\n\n  // Handle school submission\n  if (request.method === 'POST' && new URL(request.url).pathname.endsWith('/submit-school')) {\n    try {\n      const formData = await request.formData();\n      const name = formData.get('name') as string;\n      const type = formData.get('type') as string;\n      const location = formData.get('location') as string;\n      const description = formData.get('description') as string;\n      const phone = formData.get('phone') as string;\n      const website = formData.get('website') as string;\n      const email = formData.get('email') as string;\n      const imageFile = formData.get('imageFile') as File;\n\n      // Generate a unique key for the image with file extension\n      const imageKey = `school_${Date.now()}_${name.toLowerCase().replace(/\\s+/g, '_')}.${\n        imageFile.name.split('.').pop()\n      }`;\n      \n      // Upload image to blob storage\n      const imageBuffer = await imageFile.arrayBuffer();\n      await blob.set(imageKey, new Uint8Array(imageBuffer), {\n        contentType: imageFile.type\n      });\n\n      // Get the blob URL\n      const imageUrl = `/blob/${imageKey}`;\n\n      // Insert school into database\n      await sqlite.execute(`\n        INSERT INTO ${KEY}_schools \n        (name, type, location, description, phone, website, email, imageUrl) \n        VALUES (?, ?, ?, ?, ?, ?, ?, ?)\n      `, [name, type, location, description, phone, website, email, imageUrl]);\n\n      return new Response(JSON.stringify({ \n        success: true,\n        message: 'School added successfully'\n      }), {\n        status: 200,\n        headers: { 'Content-Type': 'application/json' }\n      });\n    } catch (error) {\n      console.error('School submission error:', error);\n      return new Response(JSON.stringify({ \n        success: false, \n        error: error.message \n      }), {\n        status: 500,\n        headers: { 'Content-Type': 'application/json' }\n      });\n    }\n  }\n\n  // Handle school retrieval - now ordered by most recent first\n  if (request.method === 'GET' && new URL(request.url).pathname.endsWith('/get-schools')) {\n    try {\n      const schools = await sqlite.execute(`\n        SELECT * FROM ${KEY}_schools \n        ORDER BY id DESC\n      `);\n      return new Response(JSON.stringify(schools.rows), {\n        headers: { 'Content-Type': 'application/json' }\n      });\n    } catch (error) {\n      return new Response(JSON.stringify({ error: error.message }), {\n        status: 500,\n        headers: { 'Content-Type': 'application/json' }\n      });\n    }\n  }\n\n  // Serve HTML for initial page load\n  return new Response(`\n    <html>\n      <head>\n        <title>School Directory</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}","deleted","label",[98],"permalink","https://www.val.town/x/kamorudeenalo/SchoolListingWebsite/code/main.tsx","extension","actionData","errors"]
</article></body></html>