add: products ui

crates/app/src/public/html/economy/product.lisp

@@ -0,0 +1,67 @@
+(text "{% extends \"root.html\" %} {% block head %}")
+(title
+    (text "{{ product.title }} - {{ config.name }}"))
+(text "{% endblock %} {% block body %} {{ macros::nav(selected=\"\") }}")
+(main
+    ("class" "flex flex_col gap_2")
+    (div
+        ("class" "card flex flex_col gap_2")
+        (h3
+            ("style" "height: 32px")
+            (text "{{ product.title }}"))
+        (text "{{ components::full_username(user=owner) }}")
+
+        (text "{% if product.stock >= 0 -%}")
+        (span ("class" "red") (text "{{ product.stock }} remaining"))
+        (text "{%- endif %}")
+
+        (div
+            ("class" "card lowered w_full no_p_margin")
+            (text "{{ product.description|markdown|safe }}"))
+
+        (div
+            ("class" "flex gap_2 items_center")
+            (a
+                ("class" "button camo lowered")
+                ("href" "/wallet")
+                ("target" "_blank")
+                (icon (text "badge-cent"))
+                (text "{{ product.price }}"))
+            (text "{% if user.id != product.owner -%}")
+            (button
+                ("onclick" "purchase()")
+                ("disabled" "{{ product.stock == 0 }}")
+                (icon (text "piggy-bank"))
+                (str (text "economy:action.buy")))
+            (text "{% else %}")
+            (a
+                ("class" "button")
+                ("href" "/product/{{ product.id }}/edit")
+                (icon (text "settings"))
+                (str (text "general:label.edit")))
+            (text "{%- endif %}"))))
+
+(script
+    (text "async function purchase() {
+        await trigger(\"atto::debounce\", [\"products::buy\"]);
+
+        if (
+            !(await trigger(\"atto::confirm\", [
+                \"Are you sure you would like to do this? Your new balance will be {{ user.coins - product.price }} coins.\",
+            ]))
+        ) {
+            return;
+        }
+
+        fetch(\"/api/v1/products/{{ product.id }}/buy\", {
+            method: \"POST\",
+        })
+            .then((res) => res.json())
+            .then((res) => {
+                trigger(\"atto::toast\", [
+                    res.ok ? \"success\" : \"error\",
+                    res.message,
+                ]);
+            });
+    }"))
+(text "{% endblock %}")