commit 0429bf3dcad77e283061a14da5e338fd33273ad7
parent 07df94c9a82bc7e1582b5f13f1f6ce1bd13b5ce0
Author: triesap <137732411+triesap@users.noreply.github.com>
Date: Sun, 1 Sep 2024 12:42:34 +0000
Update model trade product routes, add document head metadata, add error page, add css
Diffstat:
9 files changed, 226 insertions(+), 137 deletions(-)
diff --git a/src/app.css b/src/app.css
@@ -8,7 +8,11 @@
@layer components {
.form-select-e {
- @apply select select-sm border-0 focus:border-0 outline-0 focus:outline-0;
+ @apply border-0 focus:border-0 outline-0 focus:outline-0;
+ }
+
+ select:focus {
+ outline: none;
}
.form-line-e {
@@ -29,8 +33,13 @@
@apply outline outline-[2px] outline-red-300/70;
}
- .taps {
- @apply active:scale-[94%] active:opacity-80 transition-all;
+ .tap-scale {
+ @apply active:scale-[94%];
+ }
+
+ .tap-scale,
+ .tap-color {
+ @apply active:opacity-80 transition-all;
}
.input-simple {
diff --git a/src/lib/components/nav.svelte b/src/lib/components/nav.svelte
@@ -3,7 +3,7 @@
import { app_layout, app_nav_blur, app_nav_visible } from "$lib/stores";
import type { INavBasis } from "$lib/types";
import { restart } from "$lib/utils";
- import { fill as Fill, glyph as Glyph } from "@radroots/svelte-lib";
+ import { fill as Fill, fmt_cl, glyph as Glyph } from "@radroots/svelte-lib";
import { onDestroy, onMount } from "svelte";
export let basis: INavBasis;
@@ -101,11 +101,11 @@
}}
/>
{/if}
- {#if `label` in basis.option}
+ {#if `label` in basis.option && basis.option.label}
<p
- class={`font-sans text-navPrevious text-layer-1-glyph-hl group-active:opacity-60 transition-opacity`}
+ class={`${fmt_cl(basis.option.label.classes)} font-sans text-navPrevious text-layer-1-glyph-hl group-active:opacity-60 transition-opacity`}
>
- {basis.option.label}
+ {basis.option.label.value}
</p>
{/if}
</button>
diff --git a/src/lib/conf.ts b/src/lib/conf.ts
@@ -1,6 +1,10 @@
import { PUBLIC_PREF_NOSTR_KEY_ACTIVE } from "$env/static/public";
export const _cf = {
+ app: {
+ title: `Radroots`,
+ description: `Creating networks between farmers, communities and small businesses that give customers greater access to natural foods and grow circular economies where profits are more fairly distributed. Radroots is built on the Nostr protocol and released under a copyleft open source license to provide transparency and give users the option to offer feedback and add or request new features.`
+ },
root_symbol: "ยป--`--,---",
- pref_key_active: PUBLIC_PREF_NOSTR_KEY_ACTIVE
+ pref_key_active: PUBLIC_PREF_NOSTR_KEY_ACTIVE,
};
\ No newline at end of file
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
@@ -1,17 +1,8 @@
<script lang="ts">
import { goto } from "$app/navigation";
- import { lc } from "$lib/client";
import LayoutView from "$lib/components/layout-view.svelte";
- import { _cf } from "$lib/conf";
import { app_tab_active, app_tabs_visible } from "$lib/stores";
- import { NDKKind } from "@nostr-dev-kit/ndk";
- import {
- glyph as Glyph,
- ndk,
- ndk_event,
- ndk_user,
- type GlyphKey,
- } from "@radroots/svelte-lib";
+ import { glyph as Glyph, type GlyphKey } from "@radroots/svelte-lib";
import { onMount } from "svelte";
onMount(async () => {
@@ -23,58 +14,9 @@
}
});
- const nostr_note_pub = async (): Promise<void> => {
- try {
- const content = `posting from radroots`;
- const ev = await ndk_event({
- $ndk,
- $ndk_user,
- basis: {
- kind: NDKKind.Text,
- content: JSON.stringify(content),
- },
- });
- console.log(JSON.stringify(ev, null, 4), `ev`);
- if (ev) await ev.publish();
- lc.dialog.alert(`Published content ${JSON.stringify(content)}`);
- } catch (e) {
- console.log(`(error) nostr_note_pub `, e);
- }
- };
-
- /*
-<div class={`grid grid-cols-12 w-full gap-8 pt-6 px-6`}>
- <button
- class={`button-base surface-1 col-span-6 h-24 rounded-2xl font-[500] text-lg font-mono`}
- on:click={async () => {
- await goto(`/models/location-gcs`);
- }}
- >
- {`Post `}
- </button>
- <button
- class={`button-base surface-1 col-span-6 h-32 rounded-2xl font-[500] text-lg font-mono`}
- on:click={async () => {
- await goto(`/models/location-gcs`);
- }}
- >
- {`Post `}
- </button>
- <button
- class={`button-base surface-1 col-span-6 h-32 rounded-2xl font-[500] text-lg font-mono`}
- on:click={async () => {
- await goto(`/models/location-gcs`);
- }}
- >
- {`Post `}
- </button>
-
- </div>
- */
-
let buttons: { route: string; label: string; key: GlyphKey }[] = [
{
- route: `/models/trade-product/add`,
+ route: `/models/trade-product`,
label: `Post Goods`,
key: `handbag-simple`,
},
@@ -86,8 +28,10 @@
class={`flex flex-col w-full justify-start items-start pt-6 gap-6 px-6`}
>
<div class={`flex flex-row w-full px-1 justify-start items-center`}>
- <p class={`font-mono font-[500] text-layer-2-glyph text-lg`}>
- {`radroots ${_cf.root_symbol}`}
+ <p
+ class={`font-mono font-[600] text-layer-2-glyph text-xl tracking-wide`}
+ >
+ {`radroots app (beta-1.0.0)`}
</p>
</div>
<button
@@ -115,7 +59,7 @@
}}
>
<div
- class={`flex flex-row w-full justify-between items-center`}
+ class={`flex flex-row w-full p-[2px] justify-between items-center`}
>
<div class={`flex flex-row justify-start items-center`}>
<Glyph
@@ -130,8 +74,9 @@
<Glyph
basis={{
key: `caret-right`,
- dim: `sm`,
+ dim: `sm-`,
weight: `bold`,
+ classes: `text-layer-2-glyph`,
}}
/>
</div>
diff --git a/src/routes/(app)/models/location-gcs/+page.svelte b/src/routes/(app)/models/location-gcs/+page.svelte
@@ -116,7 +116,7 @@
glyph: {
key: `arrow-counter-clockwise`,
dim: `md`,
- classes: `text-layer-1-glyph-hl taps`,
+ classes: `text-layer-1-glyph-hl tap-scale`,
},
callback: async () => {
await fetch_models();
diff --git a/src/routes/(app)/models/trade-product/+page.svelte b/src/routes/(app)/models/trade-product/+page.svelte
@@ -6,7 +6,11 @@
import Nav from "$lib/components/nav.svelte";
import { app_tabs_visible } from "$lib/stores";
import { type TradeProduct } from "@radroots/client";
- import { trellis as Trellis } from "@radroots/svelte-lib";
+ import {
+ locale,
+ time_fmt_db_iso,
+ trellis as Trellis,
+ } from "@radroots/svelte-lib";
import { onMount } from "svelte";
let models_list: TradeProduct[] = [];
@@ -34,60 +38,116 @@
<LayoutView>
<LayoutTrellis>
- <Trellis
- basis={{
- args: {
- layer: 1,
- title: {
- value: `Trade Products`,
- },
- list: [
- {
- touch: {
- label: {
- left: [
- {
- value: `Add new product`,
- classes: `capitalize`,
+ {#if models_list.length}
+ {#each models_list as li}
+ <Trellis
+ basis={{
+ args: {
+ layer: 1,
+ title: {
+ value: `Trade Products`,
+ },
+ list: [
+ {
+ hide_active: true,
+ touch: {
+ label: {
+ left: [
+ {
+ value: `Name:`,
+ classes: `capitalize`,
+ },
+ ],
+ right: [
+ {
+ value: li.key,
+ },
+ ],
},
- ],
+ callback: async () => {},
+ },
},
- callback: async () => {
- await goto(`/models/trade-product/add`);
+ {
+ hide_active: true,
+ touch: {
+ label: {
+ left: [
+ {
+ value: `Lot:`,
+ classes: `capitalize`,
+ },
+ ],
+ right: [
+ {
+ value: li.lot,
+ },
+ ],
+ },
+ callback: async () => {},
+ },
},
- end: {
- icon: {
- key: `caret-right`,
+ {
+ hide_active: true,
+ touch: {
+ label: {
+ left: [
+ {
+ value: `Varietal:`,
+ classes: `capitalize`,
+ },
+ ],
+ right: [
+ {
+ value: li.varietal,
+ },
+ ],
+ },
+ callback: async () => {},
},
},
- },
+ {
+ hide_active: true,
+ touch: {
+ label: {
+ left: [
+ {
+ value: `Date Created:`,
+ classes: `capitalize`,
+ },
+ ],
+ right: [
+ {
+ value: time_fmt_db_iso(
+ $locale,
+ li.created_at,
+ ),
+ },
+ ],
+ },
+ callback: async () => {},
+ },
+ },
+ ],
},
- ],
- },
- }}
- />
- <div class={`flex flex-col justify-center items-center pt-4 px-4`}>
- {#if models_list.length > 0}
- <p class={`font-sans font-[400] text-layer-0-glyph text-xs`}>
- {"Your products:"}
+ }}
+ />
+ {/each}
+ {:else}
+ <div
+ class={`flex flex-col w-full justify-center items-center px-4 gap-3`}
+ >
+ <p class={`font-sans font-[400] text-layer-2-glyph`}>
+ {`No items to display.`}
</p>
- {#each models_list as li}
- <div class={`flex flex-col justify-center items-center`}>
- <pre
- class={`font-sans font-[400] text-layer-0-glyph text-xs`}>{JSON.stringify(
- li,
- null,
- 4,
- )}
- </pre>
- </div>
- {/each}
- {:else}
- <p class={`font-sans font-[400] text-layer-0-glyph text-xs`}>
- {"No products saved"}
- </p>
- {/if}
- </div>
+ <a href={`/models/trade-product/add`}>
+ <p
+ class={`font-sans font-[400] text-layer-2-glyph-hl text-sm`}
+ >
+ {`Click to add a new product`}
+ </p>
+ </a>
+ </div>
+ {/if}
</LayoutTrellis>
</LayoutView>
<Nav
@@ -99,15 +159,16 @@
title: {
label: `Products`,
},
- option: {
- glyph: {
- key: `arrow-counter-clockwise`,
- dim: `md`,
- classes: `text-layer-1-glyph-hl taps`,
- },
- callback: async () => {
- await fetch_models();
- },
- },
+ option: models_list.length
+ ? {
+ label: {
+ value: `Add`,
+ classes: `tap-color`,
+ },
+ callback: async () => {
+ await goto(`/models/trade-product/add`);
+ },
+ }
+ : undefined,
}}
/>
diff --git a/src/routes/(app)/models/trade-product/add/+page.svelte b/src/routes/(app)/models/trade-product/add/+page.svelte
@@ -13,11 +13,14 @@
type LocationGcs,
} from "@radroots/client";
import {
+ fmt_capitalize,
fmt_id,
input_form as InputForm,
kv,
loading as Loading,
} from "@radroots/svelte-lib";
+ import { trade_keys } from "@radroots/utils";
+
import { onMount } from "svelte";
const texts_key = {
@@ -30,7 +33,7 @@
};
const texts_kv: Record<string, string> = {
- key: `Name`,
+ key: `Kind`,
};
let loading = false;
@@ -38,6 +41,7 @@
let ls_model_location_gcs: LocationGcs[] = [];
let val_model_location_gcs_selected = ``;
+ let val_model_trade_good_key = ``;
$: {
if (ls_model_location_gcs.length && !val_model_location_gcs_selected)
@@ -85,7 +89,10 @@
const field_k = parse_trade_product_form_keys(k);
if (!field_k) continue;
const field_id = fmt_id(field_k);
- const field_val = await $kv.get(field_id);
+ const field_val =
+ field_k === `key`
+ ? val_model_trade_good_key
+ : await $kv.get(field_id);
if (
(!field.optional && !field.validation.test(field_val)) ||
@@ -104,6 +111,8 @@
const res = await lc.db.trade_product_add(vals);
if (typeof res !== `string` && !Array.isArray(res)) {
await goto(`/models/trade-product`);
+ } else {
+ await lc.dialog.alert(`There was an error: ${res.toString()}`);
}
} catch (e) {
console.log(`(error) submit `, e);
@@ -118,8 +127,35 @@
<div
class={`flex flex-col w-full px-4 gap-3 justify-center items-center`}
>
- {#each Object.entries(trade_product_form_fields) as [field_k, field], field_i}
- {#if field_i === 1}
+ {#each Object.entries(trade_product_form_fields).filter((i) => i[0] !== `key`) as [field_k, field], field_i}
+ {#if field_i === 0}
+ <div
+ class={`flex flex-col w-full gap-1 justify-start items-start`}
+ >
+ <div
+ class={`flex flex-row w-full px-2 justify-start items-center`}
+ >
+ <p
+ class={`font-sans font-[400] uppercase text-layer-2-glyph text-sm`}
+ >
+ {`Product - Kind`}
+ </p>
+ </div>
+ <select
+ class={`form-select-e w-full bg-layer-1-surface rounded-xl text-layer-2-glyph`}
+ bind:value={val_model_trade_good_key}
+ on:change={async ({ currentTarget: el }) => {
+ const val = el.value;
+ console.log(`val `, val);
+ }}
+ >
+ {#each trade_keys as li}
+ <option value={li}>
+ {fmt_capitalize(li)}
+ </option>
+ {/each}
+ </select>
+ </div>
<div
class={`flex flex-col w-full gap-1 justify-start items-start`}
>
@@ -215,13 +251,13 @@
route: `/models/trade-product`,
},
title: {
- label: `Trade Product`,
+ label: `Add New`,
},
option: {
glyph: {
key: `info`,
dim: `md`,
- classes: `text-layer-1-glyph-hl taps`,
+ classes: `text-layer-1-glyph-hl tap-scale`,
},
callback: async () => {
//await fetch_models();
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+ import { page } from "$app/stores";
+ import LayoutView from "$lib/components/layout-view.svelte";
+</script>
+
+{#if $page}
+ <LayoutView>
+ <div class={`flex flex-col w-full justify-start items-start`}>
+ <div class={`flex flex-row w-full justify-center items-center`}>
+ <p class={`font-sans font-[400] text-layer-2-glyph`}>
+ {`${$page.status}: ${$page.error ? $page.error.message : `(no message)`}`}
+ </p>
+ </div>
+ <div
+ class={`flex flex-row w-full gap-2 justify-center items-center`}
+ >
+ <p class={`font-sans font-[400] text-layer-2-glyph`}>
+ {`There was an error.`}
+ </p>
+ <a href="/">
+ <p class={`font-sans font-[400] text-layer-1-glyph-hl`}>
+ {`Click to return.`}
+ </p>
+ </a>
+ </div>
+ </div>
+ </LayoutView>
+{/if}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -163,6 +163,12 @@
});
</script>
+<svelte:head>
+ <title>{_cf.app.title}</title>
+ <meta name="description" content={_cf.app.description} />
+ <meta property="og:title" content={_cf.app.title} />
+ <meta property="og:description" content={_cf.app.description} />
+</svelte:head>
{#if $app_render}
<LayoutWindow>
<slot />
