commit 8e9f4de1eec55f5102e48c0ceb736731380a19a3
parent c0582fce48f643555688d2d5dc933874971feceb
Author: triesap <137732411+triesap@users.noreply.github.com>
Date: Fri, 13 Sep 2024 07:16:09 +0000
Edit `/models/trade-product/add/preview`, edit models routes, edit trade product utils, add Magda Text font, edit/add css
Diffstat:
8 files changed, 550 insertions(+), 69 deletions(-)
diff --git a/src/app.css b/src/app.css
@@ -2,14 +2,19 @@
@import "./lib/css/spinner.css";
@import "./lib/css/spinner-6.css";
@import "./lib/css/spinner-12.css";
-@import "/static/webfonts/apercu//styles.css";
+@import "/static/webfonts/apercu-mono-pro/styles.css";
@import "/static/webfonts/sf-pro-display/styles.css";
+@import "/static/webfonts/magda-text/styles.css";
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
+ .font-mono-display {
+ @apply font-mono tracking-tighter;
+ }
+
.map-marker-popup-simple-open {
@apply h-40 w-72;
}
@@ -133,4 +138,8 @@
select::-ms-expand {
display: none;
}
+
+ div:focus {
+ outline: 4px solid transparent;
+ }
}
\ No newline at end of file
diff --git a/src/lib/components/layout-trellis.svelte b/src/lib/components/layout-trellis.svelte
@@ -1,3 +1,3 @@
-<div class={`flex flex-col w-full pt-4 px-4 pb-12 gap-4`}>
+<div class={`flex flex-col w-full pt-4 px-6 pb-12 gap-4`}>
<slot />
</div>
diff --git a/src/lib/css/form.css b/src/lib/css/form.css
@@ -7,16 +7,20 @@
@apply h-full w-full rounded-2xl;
}
+ .form-line-active {
+ @apply focus:outline-[4px] focus:outline-gray-400/30;
+ }
+
.form-line-wrap {
@apply flex flex-row h-form_line w-full rounded-2xl;
}
.form-input {
- @apply input w-full p-0 pl-2 placeholder:font-[300];
+ @apply input w-full p-0 pl-2 placeholder:font-[400];
}
.form-select,
.form-input {
- @apply flex flex-row justify-center items-center border-0 focus:border-0 outline-0 focus:outline-0 bg-transparent transition-all;
+ @apply flex flex-row justify-center items-center border-0 focus:border-0 outline-0 focus:outline-0 bg-transparent;
}
}
\ No newline at end of file
diff --git a/src/lib/utils/trade_product.ts b/src/lib/utils/trade_product.ts
@@ -1,8 +1,12 @@
import { parse_trade_product_form_keys, trade_product_form_fields, trade_product_form_vals, type TradeProductFormFields } from "@radroots/client";
import { kv } from "@radroots/svelte-lib";
-export const trade_product_kv_vals = async (kv_pref: string): Promise<TradeProductFormFields | undefined> => {
+export const trade_product_kv_vals = async (opts: {
+ kv_pref: string;
+ no_validation?: string[];
+}): Promise<TradeProductFormFields | string> => {
try {
+ let no_validation = opts.no_validation || [];
const vals = {
...trade_product_form_vals
};
@@ -12,14 +16,23 @@ export const trade_product_kv_vals = async (kv_pref: string): Promise<TradeProdu
)) {
const field_k = parse_trade_product_form_keys(k);
if (!field_k) continue;
- const field_id = `${kv_pref}-${field_k}`;
+ const field_id = `${opts.kv_pref}-${field_k}`;
const field_val = await kv.get(field_id);
if (field_val) vals[field_k] = field_val;
- //@todo add validation
+ if (
+ (!field.optional && !field.validation.test(field_val)) ||
+ (field.optional &&
+ field_val &&
+ !field.validation.test(field_val))
+ ) {
+ if (no_validation.includes(field_k)) continue;
+ else return field_k;
+ }
}
return vals;
} catch (e) {
console.log(`(error) trade_product_submit_preview `, e);
+ return ``
}
};
@@ -61,18 +74,7 @@ export const trade_product_kv_init = async (kv_pref: string): Promise<void> => {
field_val = sel_trade_product_key;
} else
- if (
- (!field.optional && !field.validation.test(field_val)) ||
- (field.optional &&
- field_val &&
- !field.validation.test(field_val))
- ) {
- loading = false;
- await lc.dialog.alert(
- `Invalid product ${field_k} value.`,
- );
- return;
- }
+
vals[field_k] = field_val;
}
diff --git a/src/routes/(app)/models/trade-product/add/+page.svelte b/src/routes/(app)/models/trade-product/add/+page.svelte
@@ -1,4 +1,7 @@
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+
<script lang="ts">
+ import { goto } from "$app/navigation";
import { lc } from "$lib/client";
import LayoutTrellisLine from "$lib/components/layout-trellis-line.svelte";
import LayoutTrellis from "$lib/components/layout-trellis.svelte";
@@ -14,13 +17,13 @@
type LocationGcs,
} from "@radroots/client";
import {
+ el_id,
fmt_id,
InputForm,
InputSelect,
kv,
Nav,
NotifyGlyph,
- sleep,
t,
} from "@radroots/svelte-lib";
import {
@@ -36,7 +39,7 @@
const trade_key_default: TradeKey = `coffee`;
- let el_trellis_wrap_1: HTMLElement | null;
+ let el_trellis_wrap_price: HTMLElement | null;
let loading_submit = false;
let loading_location = false;
@@ -79,9 +82,7 @@
fmt_id(`location_gcs_id`),
sel_location_gcs_id,
);
- } catch (e) {
- console.log(`e `, e);
- }
+ } catch (e) {}
})();
}
}
@@ -91,25 +92,41 @@
(async () => {
try {
const tup = parse_trade_mass_tuple(sel_qty_tup);
- console.log(`tup `, tup);
if (tup) {
await kv.set(fmt_id(`qty_amt`), tup[0].toString());
await kv.set(fmt_id(`qty_unit`), tup[1]);
await kv.set(fmt_id(`qty_label`), tup[2]);
+
+ //@note
+ await kv.set(fmt_id(`qty_avail`), `1`);
}
- } catch (e) {
- console.log(`e `, e);
- }
+ } catch (e) {}
+ })();
+ }
+ }
+
+ $: {
+ if (sel_price_currency) {
+ (async () => {
+ try {
+ await kv.set(fmt_id(`price_currency`), sel_price_currency);
+ } catch (e) {}
})();
}
}
onMount(async () => {
try {
- sel_price_currency = "usd";
+ sel_price_currency = "eur";
sel_price_qty_unit = "kg";
sel_qty_unit = "kg";
await fetch_models_location_gcs();
+
+ const el_focus = el_id(await kv.get(`*-el-focus`));
+ if (el_focus) {
+ await kv.delete(`*-el-focus`);
+ el_focus.focus();
+ }
} catch (e) {
} finally {
}
@@ -123,9 +140,7 @@
} else {
sel_key = trade_keys[0];
}
- } catch (e) {
- console.log(`(error) toggle_show_key_other `, e);
- }
+ } catch (e) {}
};
const toggle_show_qty_amt_other = async (
@@ -143,9 +158,7 @@
)
: ``;
}
- } catch (e) {
- console.log(`(error) toggle_show_qty_amt_other `, e);
- }
+ } catch (e) {}
};
const fetch_models_location_gcs = async (): Promise<void> => {
@@ -175,26 +188,26 @@
try {
loading_submit = true;
- const location_gcs_res = await lc.db.location_gcs_get({
- id: sel_location_gcs_id,
+ const vals = await trade_product_kv_vals({
+ kv_pref: fmt_id(),
+ no_validation: [`year`, `price_qty_amt`, `qty_avail`],
});
-
- if (typeof location_gcs_res === `string`) {
- await lc.dialog.alert(`The product location is missing.`);
+ if (typeof vals === `string`) {
+ await lc.dialog.alert(
+ `${$t(`trade.product.fields.${vals}.err_invalid`, { default: `Invalid ${vals}` })}`, //@todo
+ );
return;
}
- const vals = await trade_product_kv_vals(fmt_id());
- if (!vals) {
- alert(`@todo!`);
- return;
- }
- if (!vals.year) vals.year = new Date().getFullYear().toString();
- if (!vals.price_qty_amt) vals.price_qty_amt = `1`;
+ if (!vals.year)
+ await kv.set(
+ fmt_id(`year`),
+ new Date().getFullYear().toString(),
+ );
+ if (!vals.price_qty_amt) await kv.set(fmt_id(`price_qty_amt`), `1`);
+ if (!vals.qty_avail) await kv.set(fmt_id(`qty_avail`), `1`);
- console.log(JSON.stringify(vals, null, 4), `vals`);
-
- await sleep(1000);
+ await goto(`/models/trade-product/add/preview`);
} catch (e) {
console.log(`(error) submit `, e);
} finally {
@@ -245,7 +258,9 @@
<InputSelect
bind:value={sel_key}
basis={{
+ id_wrap: fmt_id(`key_wrap`),
id: fmt_id(`key`),
+ classes: `font-mono-display`,
sync: true,
options: [
...trade_keys.map((i) => ({
@@ -276,7 +291,9 @@
<InputSelect
bind:value={sel_location_gcs_id}
basis={{
+ id_wrap: fmt_id(`location_gcs_id_wrap`),
id: fmt_id(`location_gcs_id`),
+ classes: `font-mono-display`,
sync: true,
loading: loading_location,
options: ls_location_gcs.length
@@ -303,7 +320,6 @@
},
],
callback: async (val) => {
- console.log(`val `, val);
if (val === `add-new`) {
sel_location_gcs_id = ``;
await add_model_location_gcs();
@@ -331,7 +347,9 @@
}}
>
<div
- class={`relative flex flex-row w-full gap-3 justify-between items-center h-form_line bg-layer-1-surface text-layer-1-glyph/70 rounded-2xl transition-all`}
+ id={fmt_id(`qty_wrap`)}
+ tabindex={-1}
+ class={`relative form-line-active flex flex-row w-full gap-3 justify-between items-center h-form_line bg-layer-1-surface text-layer-1-glyph rounded-2xl transition-all`}
>
{#if show_sel_qty_tup_other}
<div
@@ -342,7 +360,7 @@
id: fmt_id(`qty_amt`),
layer: false,
sync: true,
- placeholder: `Enter number of ${$t(`trade.quantity.mass_unit.${sel_price_qty_unit}_ab`, { default: sel_price_qty_unit })} per order`,
+ placeholder: `Enter number of ${$t(`measurement.mass.unit.${sel_price_qty_unit}_ab`, { default: sel_price_qty_unit })} per order`,
field: {
charset:
trade_product_form_fields.qty_amt
@@ -361,12 +379,12 @@
bind:value={sel_qty_unit}
basis={{
id: fmt_id(`qty_unit`),
- classes: `w-[3.5rem] text-layer-1-glyph/70 font-[500]`,
+ classes: `w-[3.5rem] text-layer-1-glyph font-[500]`,
layer: false,
sync: true,
options: mass_units.map((i) => ({
value: i,
- label: `${$t(`trade.quantity.mass_unit.${i}_ab`, { default: i })}`,
+ label: `${$t(`measurement.mass.unit.${i}_ab`, { default: i })}`,
})),
}}
/>
@@ -376,10 +394,11 @@
<InputSelect
bind:value={sel_qty_tup}
basis={{
+ classes: `font-mono-display`,
options: [
...ls_trade_product_quantities.map((i) => ({
value: fmt_trade_quantity_val(i),
- label: `${i.mass} ${$t(`trade.quantity.mass_unit.${i.mass_unit}_ab`, { default: i.mass_unit })} ${i.label}`,
+ label: `${i.mass} ${$t(`measurement.mass.unit.${i.mass_unit}_ab`, { default: i.mass_unit })} ${i.label}`,
})),
{
value: `other`,
@@ -389,6 +408,8 @@
callback: async (val) => {
if (val === `other`) {
await toggle_show_qty_amt_other(true);
+ } else {
+ await kv.set(fmt_id(`qty_avail`), `1`);
}
},
}}
@@ -404,14 +425,17 @@
}}
>
<div
- bind:this={el_trellis_wrap_1}
- class={`relative flex flex-row w-full gap-3 justify-between items-center h-form_line bg-layer-1-surface text-layer-1-glyph/70 rounded-2xl transition-all`}
+ bind:this={el_trellis_wrap_price}
+ id={fmt_id(`price_wrap`)}
+ tabindex={-1}
+ class={`relative form-line-active flex flex-row w-full gap-3 justify-between items-center h-form_line bg-layer-1-surface text-layer-1-glyph rounded-2xl transition-all`}
>
<InputForm
basis={{
id: fmt_id(`price_amt`),
layer: false,
sync: true,
+ classes: `font-mono-display`,
placeholder: `Enter price`,
field: {
charset:
@@ -429,12 +453,12 @@
period_count < 2) ||
val.length < 1
) {
- el_trellis_wrap_1?.classList.remove(
+ el_trellis_wrap_price?.classList.remove(
`bg-layer-1-surface-err`,
);
show_sel_price_currency = false;
} else {
- el_trellis_wrap_1?.classList.add(
+ el_trellis_wrap_price?.classList.add(
`bg-layer-1-surface-err`,
);
show_sel_price_currency = true;
@@ -443,24 +467,24 @@
}}
/>
<div
- class={`flex flex-row gap-2 pr-4 justify-end items-center`}
+ class={`flex flex-row gap-2 pr-4 justify-end items-center text-layer-1-glyph/70`}
>
<InputSelect
bind:value={sel_price_currency}
basis={{
id: fmt_id(`price_currency`),
- classes: `w-fit`,
+ classes: `w-fit font-mono-display font-[500] text-lg`,
layer: false,
hide_arrows: true,
sync: true,
options: fiat_currencies.map((i) => ({
value: i,
- label: `${$t(`trade.currency.${i}.symbol`, { default: i })}`,
+ label: `${$t(`currency.${i}.symbol`, { default: i })}`,
})),
}}
/>
<p
- class={`font-sans font-[500] text-layer-1-glyph/60 text-lg -translate-y-[1px]`}
+ class={`font-sans font-[500] text-[1.1rem] -translate-y-[1px] scale-y-[110%]`}
>
{`/`}
</p>
@@ -468,20 +492,24 @@
bind:value={sel_price_qty_unit}
basis={{
id: fmt_id(`price_qty_unit`),
- classes: `w-fit`,
+ classes: `w-fit font-mono-display font-[600] text-[0.95rem] leading-[1rem]`,
layer: false,
hide_arrows: true,
sync: true,
options: mass_units.map((i) => ({
value: i,
- label: `${$t(`trade.quantity.mass_unit.${i}_ab`, { default: i })}`,
+ label: `${$t(`measurement.mass.unit.${i}_ab`, { default: i })}`,
})),
}}
/>
</div>
{#if show_sel_price_currency}
<NotifyGlyph
- basis={{ glyph: `warning-circle`, layer: 2 }}
+ basis={{
+ glyph: `warning-circle`,
+ layer: 2,
+ classes: `translate-x-[32px]`,
+ }}
/>
{/if}
</div>
@@ -499,6 +527,10 @@
},
title: {
label: `Add Product`,
+ callback: async () => {
+ const el = el_id(fmt_id(`key_wrap`));
+ el?.focus();
+ },
},
option: {
loading: loading_submit,
diff --git a/src/routes/(app)/models/trade-product/add/preview/+page.svelte b/src/routes/(app)/models/trade-product/add/preview/+page.svelte
@@ -0,0 +1,432 @@
+<script lang="ts">
+ import { goto } from "$app/navigation";
+ import { lc } from "$lib/client";
+ import LayoutView from "$lib/components/layout-view.svelte";
+ import { trade_product_kv_vals } from "$lib/utils/trade_product";
+ import {
+ type LocationGcs,
+ type TradeProductFormFields,
+ } from "@radroots/client";
+ import {
+ Fill,
+ Glyph,
+ int_step,
+ kv,
+ locale,
+ Nav,
+ t,
+ } from "@radroots/svelte-lib";
+ import { fmt_currency_tuple } from "@radroots/utils";
+ import { onMount } from "svelte";
+
+ const kv_pref = `models-trade_product-add`;
+
+ let preview_trade_product: TradeProductFormFields;
+ let preview_location_gcs: LocationGcs;
+
+ let qty_avail = 0;
+
+ $: num_qty_amt = preview_trade_product
+ ? Number(preview_trade_product.qty_amt)
+ : 0;
+
+ $: num_price_amt = preview_trade_product
+ ? Number(preview_trade_product.price_amt)
+ : 0;
+
+ let tup_price_amt: [string, string, string] = ["", "", ""];
+ $: tup_price_amt =
+ num_price_amt > 0
+ ? fmt_currency_tuple(
+ $locale,
+ preview_trade_product.price_currency,
+ num_price_amt,
+ )
+ : ["", "", ""];
+
+ onMount(async () => {
+ try {
+ qty_avail = await kv.get(`${kv_pref}-qty_avail`);
+ const vals = await trade_product_kv_vals({
+ kv_pref,
+ });
+ if (typeof vals === `string`) {
+ await lc.dialog.alert(`Invalid value ${vals}.`);
+ await goto(`/models/trade-product/add`);
+ return;
+ }
+
+ console.log(JSON.stringify(vals, null, 4), `vals`);
+
+ const location_gcs_res = await lc.db.location_gcs_get({
+ id: await kv.get(`${kv_pref}-location_gcs_id`),
+ });
+
+ console.log(`location_gcs_res `, location_gcs_res);
+
+ if (typeof location_gcs_res === `string`) {
+ await lc.dialog.alert(`The product location is missing.`);
+ await goto(`/models/trade-product/add`);
+ //@todo add focus
+ return;
+ }
+
+ preview_trade_product = vals;
+ preview_location_gcs = location_gcs_res[0];
+ } catch (e) {
+ } finally {
+ }
+ });
+
+ const submit = async (): Promise<void> => {
+ try {
+ const vals = await trade_product_kv_vals({
+ kv_pref,
+ no_validation: [`year`, `price_qty_amt`],
+ });
+ console.log(JSON.stringify(vals, null, 4), `vals`);
+ } catch (e) {
+ console.log(`(error) submit `, e);
+ }
+ };
+</script>
+
+<LayoutView>
+ {#if preview_trade_product}
+ <div
+ class={`flex flex-col w-full pt-4 px-4 justify-center items-center`}
+ >
+ <div
+ class={`relative flex flex-col w-full p-4 gap-2 justify-start items-start bg-layer-1-surface rounded-3xl`}
+ >
+ <div
+ class={`flex flex-row w-full h-6 justify-center items-center`}
+ >
+ <p class={`font-mono font-[400] text-layer-2-glyph`}>
+ {`Overview`}
+ </p>
+ </div>
+ <div
+ class={`flex flex-col w-full gap-3 justify-start items-center`}
+ >
+ <div
+ class={`flex flex-col w-full justify-start items-start`}
+ >
+ <p class={`font-mono font-[400] text-layer-2-glyph`}>
+ {`${$t(`common.product`)}:`}
+ </p>
+ <div
+ class={`flex flex-row w-full justify-between items-center`}
+ >
+ <div
+ class={`flex flex-row flex-grow gap-2 justify-start items-center`}
+ >
+ <p
+ class={`font-mono font-[400] text-layer-2-glyph pr-2`}
+ >
+ {`-`}
+ </p>
+ <p
+ class={`font-mono font-[400] text-layer-2-glyph`}
+ >
+ {preview_trade_product.key}
+ </p>
+ </div>
+ <div
+ class={`flex flex-row justify-end items-center`}
+ >
+ <button
+ class={`flex flex-row justify-start items-center active:opacity-60 transition-all`}
+ on:click={async () => {
+ await kv.set(
+ `*-el-focus`,
+ `${kv_pref}-key_wrap`,
+ );
+ await goto(`/models/trade-product/add`);
+ }}
+ >
+ <p
+ class={`font-mono font-[500] text-layer-2-glyph text-sm`}
+ >
+ {`${$t(`common.edit`)}`}
+ </p>
+ </button>
+ </div>
+ </div>
+ </div>
+ <div
+ class={`flex flex-col w-full justify-start items-start`}
+ >
+ <p class={`font-mono font-[400] text-layer-2-glyph`}>
+ {`${$t(`common.price`)}:`}
+ </p>
+ <div
+ class={`flex flex-row w-full justify-between items-center`}
+ >
+ <div
+ class={`flex flex-row flex-grow gap-2 justify-start items-center`}
+ >
+ <p
+ class={`font-mono font-[400] text-layer-2-glyph pr-2`}
+ >
+ {`-`}
+ </p>
+ <p
+ class={`font-mono font-[400] text-layer-2-glyph`}
+ >
+ {tup_price_amt[0]}
+ </p>
+ <p
+ class={`font-mono font-[400] text-layer-2-glyph`}
+ >
+ {tup_price_amt.slice(1).join(".")}
+ </p>
+ <p
+ class={`font-mono font-[400] text-layer-2-glyph lowercase`}
+ >
+ {`${$t(`common.per`)}`}
+ </p>
+ {#if preview_trade_product.price_qty_amt === `1`}
+ <p
+ class={`font-mono font-[400] text-layer-2-glyph`}
+ >
+ {`${$t(`measurement.mass.unit.${preview_trade_product.price_qty_unit}_ab`, { default: preview_trade_product.price_qty_unit })}`}
+ </p>
+ {/if}
+ </div>
+ <div
+ class={`flex flex-row justify-end items-center`}
+ >
+ <button
+ class={`flex flex-row justify-start items-center active:opacity-60 transition-all`}
+ on:click={async () => {
+ await kv.set(
+ `*-el-focus`,
+ `${kv_pref}-price_wrap`,
+ );
+ await goto(`/models/trade-product/add`);
+ }}
+ >
+ <p
+ class={`font-mono font-[500] text-layer-2-glyph text-sm`}
+ >
+ {`${$t(`common.edit`)}`}
+ </p>
+ </button>
+ </div>
+ </div>
+ </div>
+ <div
+ class={`flex flex-col w-full justify-start items-start`}
+ >
+ <p class={`font-mono font-[400] text-layer-2-glyph`}>
+ {`${$t(`common.quantity`)}:`}
+ </p>
+ <div
+ class={`flex flex-row w-full justify-between items-center`}
+ >
+ <div
+ class={`flex flex-row flex-grow gap-2 justify-start items-center`}
+ >
+ <p
+ class={`font-mono font-[400] text-layer-2-glyph pr-2`}
+ >
+ {`-`}
+ </p>
+ <p
+ class={`font-mono font-[400] text-layer-2-glyph`}
+ >
+ {preview_trade_product.qty_amt}
+ </p>
+ <p
+ class={`font-mono font-[400] text-layer-2-glyph`}
+ >
+ {`${$t(`measurement.mass.unit.${preview_trade_product.qty_unit}_ab`, { default: preview_trade_product.qty_unit })}`}
+ </p>
+ <p
+ class={`font-mono font-[400] text-layer-2-glyph`}
+ >
+ {preview_trade_product.qty_label}
+ </p>
+ </div>
+ <div
+ class={`flex flex-row justify-end items-center`}
+ >
+ <button
+ class={`flex flex-row justify-start items-center active:opacity-60 transition-all`}
+ on:click={async () => {
+ await kv.set(
+ `*-el-focus`,
+ `${kv_pref}-qty_wrap`,
+ );
+ await goto(`/models/trade-product/add`);
+ }}
+ >
+ <p
+ class={`font-mono font-[500] text-layer-2-glyph text-sm`}
+ >
+ {`${$t(`common.edit`)}`}
+ </p>
+ </button>
+ </div>
+ </div>
+ </div>
+ <div
+ class={`flex flex-col w-full justify-start items-start`}
+ >
+ <p class={`font-mono font-[400] text-layer-2-glyph`}>
+ {`${$t(`icu.*_available`, { value: `${$t(`common.quantity`)}` })}`}
+ </p>
+ <div
+ class={`flex flex-row w-full justify-between items-center`}
+ >
+ <div
+ class={`flex flex-row flex-grow gap-2 justify-start items-center`}
+ >
+ <p
+ class={`font-mono font-[400] text-layer-2-glyph pr-2`}
+ >
+ {`-`}
+ </p>
+ <p
+ class={`font-mono font-[400] text-layer-2-glyph`}
+ >
+ {qty_avail}
+ </p>
+ <p
+ class={`font-mono font-[400] text-layer-2-glyph`}
+ >
+ {`(${(qty_avail * num_qty_amt).toFixed(2)} ${$t(`measurement.mass.unit.${preview_trade_product.qty_unit}_ab`, { default: preview_trade_product.qty_unit })} total)`}
+ </p>
+ </div>
+ <div
+ class={`flex flex-row gap-[10px] justify-center items-center`}
+ >
+ <Glyph
+ basis={{
+ key: `arrow-down`,
+ dim: `xs`,
+ weight: `bold`,
+ classes: `h-5 w-5 text-layer-2-glyph bg-layer-2-surface active:opacity-60 rounded-full transition-all`,
+ callback: async () => {
+ qty_avail = int_step(
+ qty_avail,
+ `-`,
+ 1,
+ );
+ await kv.set(
+ `${kv_pref}-qty_avail`,
+ qty_avail.toString(),
+ );
+ },
+ }}
+ />
+ <Glyph
+ basis={{
+ key: `arrow-up`,
+ dim: `xs`,
+ weight: `bold`,
+ classes: `h-5 w-5 text-layer-2-glyph bg-layer-2-surface active:opacity-60 rounded-full transition-all`,
+ callback: async () => {
+ qty_avail = int_step(
+ qty_avail,
+ `+`,
+ );
+ await kv.set(
+ `${kv_pref}-qty_avail`,
+ qty_avail.toString(),
+ );
+ },
+ }}
+ />
+ </div>
+ </div>
+ </div>
+ <div
+ class={`flex flex-col w-full justify-start items-start`}
+ >
+ <p class={`font-mono font-[400] text-layer-2-glyph`}>
+ {`${$t(`common.location`)}:`}
+ </p>
+ <div
+ class={`flex flex-row w-full justify-between items-center`}
+ >
+ <div
+ class={`flex flex-row flex-grow gap-2 justify-start items-center`}
+ >
+ <p
+ class={`font-mono font-[400] text-layer-2-glyph pr-2`}
+ >
+ {`-`}
+ </p>
+ <p
+ class={`font-mono font-[400] text-layer-2-glyph`}
+ >
+ {preview_location_gcs.label}
+ </p>
+ </div>
+ <div
+ class={`flex flex-row justify-end items-center`}
+ >
+ <button
+ class={`flex flex-row justify-start items-center active:opacity-60 transition-all`}
+ on:click={async () => {
+ await kv.set(
+ `*-el-focus`,
+ `${kv_pref}-location_gcs_id_wrap`,
+ );
+ await goto(`/models/trade-product/add`);
+ }}
+ >
+ <p
+ class={`font-mono font-[500] text-layer-2-glyph text-sm`}
+ >
+ {`${$t(`common.edit`)}`}
+ </p>
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ class={`flex flex-row w-full pt-4 pb-2 justify-start items-center`}
+ >
+ <div
+ class={` flex flex-row h-[1px] w-full justify-start items-center bg-stone-400`}
+ >
+ <Fill />
+ </div>
+ </div>
+ <div
+ class={`flex flex-row w-full h-6 justify-center items-center`}
+ >
+ <p class={`font-mono font-[400] text-layer-2-glyph`}>
+ {`Product Fields`}
+ </p>
+ </div>
+ <div
+ class={`flex flex-col w-full justify-start items-center`}
+ ></div>
+ </div>
+ </div>
+ {/if}
+</LayoutView>
+<Nav
+ basis={{
+ prev: {
+ label: `Product`,
+ route: `/models/trade-product/add`,
+ },
+ title: {
+ label: `Preview`,
+ },
+ option: {
+ label: {
+ value: `Post`,
+ },
+ callback: async () => {
+ await submit();
+ },
+ },
+ }}
+/>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -147,10 +147,11 @@
console.log(`app_render `, app_render);
if (!app_render) return;
let init_route = `/`;
- const app_init_route = await kv.get(`app-init-route`);
+ init_route = `/models/trade-product/add`;
+ const app_init_route = await kv.get(`*-init-route`);
if (app_init_route) {
init_route = app_init_route;
- await kv.delete(`app-init-route`);
+ await kv.delete(`*-init-route`);
}
console.log(`init_route `, init_route);
await goto(init_route);
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -43,6 +43,7 @@ const config: Config = {
serif: [...tw_font.serif],
mono: [...tw_font.mono],
apercu: ['Apercu Mono Pro'],
+ magda: [`Magda Text`],
},
fontSize: {
line: ["1.05rem", { lineHeight: "1.33rem", fontWeight: 300 }],
