feat: simple spending input

fastspend-api/src/handler.rs

@@ -24,8 +24,7 @@ fn err(body: impl Into<String>, status: u16) -> Res {
 }
 
 fn cors(res: Res) -> Res {
- res.unwrap()
- .with_cors(&Cors::default().with_origins(vec!["*"]))
+ res.unwrap().with_cors(&Cors::new().with_origins(vec!["*"]))
 }
 
 pub async fn command_handler(

fastspend-pwa/src/App.svelte

@@ -1,24 +1,40 @@
-<script>
+<script lang="ts">
  let command = ''
+ let loading = false
+ let error: string | null = null
 
  async function submit() {
- const res = await fetch('https://api.fastspend.poom.dev/command', {
- method: 'POST',
- body: JSON.stringify({command}),
- })
+ loading = true
 
- console.log(res.status)
+ try {
+ await fetch('https://api.fastspend.poom.dev/command', {
+ method: 'POST',
+ body: JSON.stringify({command}),
+ })
+
+ error = null
+ } catch (err) {
+ error = err.message
+ } finally {
+ command = ''
+ loading = false
+ }
  }
 </script>
 
-<div class="flex flex-col items-center justify-between v-fill bg-stone-100">
- <div>A</div>
- <div class="w-full">
- <input
- type="text"
- class="w-full bg-neutral-900 text-white px-4 py-4 text-3xl font-extralight rounded-none"
- bind:value={command}
- on:keypress={(e) => e.key === 'Enter' && submit()}
- />
- </div>
+<div
+ class="flex flex-col items-center justify-center min-h-screen bg-stone-100 space-y-4"
+>
+ <input
+ type="text"
+ class="bg-neutral-900 text-white px-4 py-4 text-3xl font-extralight rounded-md shadow-2xl text-center"
+ class:error-input={error}
+ class:loading-input={loading}
+ bind:value={command}
+ on:keypress={(e) => e.key === 'Enter' && submit()}
+ />
+
+ {#if error}
+ <div class="text-red-500">Error: {error}</div>
+ {/if}
 </div>

fastspend-pwa/src/app.css

@@ -11,3 +11,10 @@ body {
  min-height: -webkit-fill-available;
 }
 
+.error-input {
+ @apply bg-red-500 text-stone-100;
+}
+
+.loading-input {
+ @apply bg-neutral-700;
+}