diff options
| author | Andrew Lee <andrew@alee14.me> | 2025-02-25 23:15:04 -0500 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2025-02-25 23:15:04 -0500 |
| commit | 44f7f14736aaf77858ee71c80abeb3c13343d3c2 (patch) | |
| tree | 47dc895e50fa95b52a894bf0806e1a6c1edc8818 /web/src | |
| parent | 9519602e73a53931be10438dcd990becea7989d9 (diff) | |
| parent | 5777f96394444dab18a81d6f085ac81df3e62008 (diff) | |
| download | AleeBot-44f7f14736aaf77858ee71c80abeb3c13343d3c2.tar.gz AleeBot-44f7f14736aaf77858ee71c80abeb3c13343d3c2.tar.bz2 AleeBot-44f7f14736aaf77858ee71c80abeb3c13343d3c2.zip | |
Merge pull request #36 from Alee14/beta
2.13 Release
Diffstat (limited to 'web/src')
| -rw-r--r-- | web/src/components/Quotes.jsx | 88 | ||||
| -rw-r--r-- | web/src/layouts/Layout.astro | 22 | ||||
| -rw-r--r-- | web/src/pages/index.astro | 45 | ||||
| -rw-r--r-- | web/src/styles/Quote.css | 33 |
4 files changed, 188 insertions, 0 deletions
diff --git a/web/src/components/Quotes.jsx b/web/src/components/Quotes.jsx new file mode 100644 index 0000000..1eb258a --- /dev/null +++ b/web/src/components/Quotes.jsx @@ -0,0 +1,88 @@ +import { useState, useEffect } from 'react'; +import '../styles/Quote.css' +import { API_URL } from "astro:env/client"; + +export function PendingQuotes() { + const [quotes, setQuotes] = useState([]); + + const fetchQuotes = async () => { + try { + const response = await fetch(`${API_URL}/api/pending-quotes`); + const data = await response.json(); + setQuotes(data); + } catch (error) { + console.error('Failed to fetch quotes:', error); + } + }; + + useEffect(() => { + fetchQuotes(); + }, []); + + const approveQuote = async (id) => { + try { + const response = await fetch(`${API_URL}/api/approve-quote`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ id }), + }); + + if (response.ok) { + fetchQuotes(); // Refresh the listing after approving the quote + } else { + console.error('Failed to approve quote'); + } + } catch (error) { + console.error('Error approving quote:', error); + } + }; + + const rejectQuote = async (id) => { + try { + const response = await fetch(`${API_URL}/api/reject-quote`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ id }), + }); + + if (response.ok) { + fetchQuotes(); // Refresh the listing after approving the quote + } else { + console.error('Failed to reject quote'); + } + } catch (error) { + console.error('Error rejecting quote:', error); + } + }; + + return ( + <div> + <h1>Pending Quotes</h1> + {quotes.length > 0 ? ( + <ul className="quoteList"> + {quotes.map((quote) => ( + <li key={quote.id} className="quoteList"> + <div className="quote"> + <div className="author"> + <img src={quote.authorImage} alt="No Profile" width="50" height="50"/> + <h1 className="quoteAuthor">{quote.author}</h1> + </div> + <p className="quoteText">{quote.quote}</p> + <small>- {quote.year}</small> + <small>Submitted by {quote.submitterAuthor} ({quote.submitterID})</small> + </div> + <button onClick={() => approveQuote(quote.id)}>Approve</button> + <button onClick={() => rejectQuote(quote.id)}>Reject</button> + </li> + ))} + </ul> + ) : ( + <p>No pending quotes available.</p> + )} + </div> + ); +} diff --git a/web/src/layouts/Layout.astro b/web/src/layouts/Layout.astro new file mode 100644 index 0000000..2f6032d --- /dev/null +++ b/web/src/layouts/Layout.astro @@ -0,0 +1,22 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width" /> + <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> + <meta name="generator" content={Astro.generator} /> + <title>AleeBot Web Interface</title> + </head> + <body> + <slot /> + </body> +</html> + +<style> + html, + body { + margin: 0; + width: 100%; + height: 100%; + } +</style> diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro new file mode 100644 index 0000000..f1dc6e7 --- /dev/null +++ b/web/src/pages/index.astro @@ -0,0 +1,45 @@ +--- +import Layout from '../layouts/Layout.astro'; +import { PendingQuotes } from '../components/Quotes'; + +--- + +<Layout> + <div class="container"> + <h1 id="version">AleeBot</h1> + <PendingQuotes client:load /> + </div> +</Layout> + +<style> + @import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap'); + html, + body { + margin: 0; + width: 100%; + height: 100%; + font-family: "Exo 2", sans-serif; + } + + .container { + margin: 2em; + } + +</style> + +<script> + import { API_URL } from "astro:env/client" + document.addEventListener('DOMContentLoaded', async () => { + try { + const version = await fetch(`${API_URL}/api/version`).then((res) => res.json()); + const versionElement = document.getElementById('version'); + if (versionElement) { + versionElement.textContent = `AleeBot ${version}`; + } else { + console.error('Element with ID "version" not found.'); + } + } catch (e) { + console.error('Failed to fetch version:', e); + } + }); +</script> diff --git a/web/src/styles/Quote.css b/web/src/styles/Quote.css new file mode 100644 index 0000000..8adfb29 --- /dev/null +++ b/web/src/styles/Quote.css @@ -0,0 +1,33 @@ +.quote { + display: flex; + flex-direction: column; + background: #555555; + color: #FFFFFF; + padding: 1em; +} + +ul.quoteList { + margin: 0; + padding: 0; +} + +li.quoteList { + list-style-type: none; + margin-top: 1em; + margin-bottom: 1em; +} + +.author { + display: flex; + flex-direction: row; +} + +h1.quoteAuthor { + font-size: 1.5em; + padding: 0; + margin: 0 0 0 .5em; +} + +.quoteText { + margin: .5em 0; +} |