feat: now possible to add transactions

app/components/AddTransaction.tsx

@@ -0,0 +1,62 @@
+import { useRef } from "react";
+
+
+export default function AddTransaction() {
+    const API_URL = "http://localhost:2500";
+    const tier = useRef<HTMLSelectElement>(null);
+    const enchantment = useRef<HTMLSelectElement>(null);
+    const silver = useRef<HTMLInputElement>(null);
+    const type = useRef<HTMLInputElement>(null);
+
+    const submit = () => {
+      console.log("submit");
+      fetch(`${API_URL}/transactions`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          tier: Number(tier.current?.value),
+          enchantment: Number(enchantment.current?.value),
+          silver: Number(silver.current?.value),
+          type: type.current?.value,
+        }),
+      }).then((response) => {
+        if (response.ok) {
+          console.log("Transaction added");
+        } else {
+          console.error("Error adding transaction");
+        }
+      });
+    };
+
+    return (
+    <div>
+      <p>Add Transaction</p>
+      <label>Tier</label>
+      <select name="tier" ref={tier}>
+        <option value="1">1</option>
+        <option value="2">2</option>
+        <option value="3">3</option>
+        <option value="4">4</option>
+        <option value="5">5</option>
+        <option value="6">6</option>
+        <option value="7">7</option>
+        <option value="8">8</option>
+      </select>
+      <label>Enchantment</label>
+      <select name="enchantment" ref={enchantment}>
+        <option value="0">0</option>
+        <option value="1">1</option>
+        <option value="2">2</option>
+        <option value="3">3</option>
+        <option value="4">4</option>
+      </select>
+      <label>Silver</label>
+      <input type="number" name="silver" ref={silver} />
+      <label>Type</label>
+      <input type="text" name="type" ref={type} />
+      <button type="submit" onClick={submit}>Add Transaction</button>
+    </div>
+  );
+}

app/routes/home.tsx

@@ -1,9 +1,10 @@
 import type { Route } from "./+types/home";
 import { useEffect, useState } from "react";
 import "../../config.json";
+import AddTransaction from "~/components/AddTransaction";
 
-const API_URL = process.env.API_URL;
-type transaction = { id: number; tier: number; type: string; cost: number };
+const API_URL = "http://localhost:2500";
+type transaction = { id: number; tier: number; enchantment: number, type: string; silver: number; timestamp: number };
 
 export function meta({}: Route.MetaArgs) {
   return [{ title: "Albion Online Transaction Tracker" }];
@@ -12,6 +13,7 @@ export function meta({}: Route.MetaArgs) {
 export default function Home() {
   return (
     <>
+      <AddTransaction />
       <TransactionTable />
     </>
   );
@@ -40,10 +42,10 @@ function TransactionTable() {
         <tbody>
           {transactions.map((transaction) => (
             <tr key={transaction.id}>
-              <td></td>
-              <td>{transaction.tier}</td>
+              <td>{new Date(transaction.timestamp*1000).toLocaleDateString()} {new Date(transaction.timestamp*1000).toLocaleTimeString()}</td>
+              <td>{transaction.tier}.{transaction.enchantment}</td>
               <td>{transaction.type}</td>
-              <td>{transaction.cost}</td>
+              <td>{transaction.silver}</td>
             </tr>
           ))}
         </tbody>