Merge pull request #4 from forevermatt/develop

Release 0.1.4

README.md

@@ -1 +1,11 @@
 # Budget
+
+A simple way to budget your money and reconcile your statements, built using Svelte.
+
+## Roadmap
+
+Enable...
+
+- [x] Adding a category
+- [ ] Editing a category
+- [ ] ...

src/components/AmountInput.svelte

@@ -0,0 +1,110 @@
+<script>
+import { createEventDispatcher, onMount } from 'svelte';
+
+export let amount
+
+const dispatch = createEventDispatcher();
+
+let inputField
+let numeralsEntered = []
+let resultingAmount = null
+
+onMount(() => {
+  numeralsEntered = getNumeralsFromAmount(amount)
+  showNumerals(numeralsEntered)
+  recordAmount(Number(numeralsEntered.join('')))
+  inputField.focus();
+})
+
+function getNumeralsFromAmount(value) {
+  if ( ! value) {
+    return [];
+  }
+  
+  return String(value).split('').filter(function(char) {
+    return ('0123456789'.indexOf(char) >= 0);
+  })
+}
+
+function showNumerals(numerals) {
+  var text = '';
+
+  for (var i = 0; i < numerals.length; i++) {
+    if (i === (numerals.length - 2)) {
+      text += '.';
+    }
+    text += numerals[i];
+  }
+
+  if (text.length === 0) {
+    text = '0.00';
+  } else if (text.length === 1) {
+    text = '0.0' + text;
+  } else if (text.length === 2) {
+    text = '0.' + text;
+  } else if (text.length === 3) {
+    text = '0' + text;
+  }
+
+  inputField.value = text;
+}
+
+function recordAmount(amount) {
+  resultingAmount = amount
+}
+
+function onKeyDown(keyEvent) {
+  var code = keyEvent.which;
+  if (isPrintable(code)) {
+    keyEvent.preventDefault();
+  }
+
+  var numericCharEntered = getNumericCharFrom(code);
+  if (numericCharEntered) {
+    numeralsEntered.push(numericCharEntered);
+  } else if (isBackspace(code)) {
+    keyEvent.preventDefault();
+    numeralsEntered.pop();
+  }
+
+  showNumerals(numeralsEntered);
+  recordAmount(Number(numeralsEntered.join('')));
+}
+
+function isPrintable(code) {
+  return (code >= 32 && code < 112) ||
+         (code >= 123 && code < 127) ||
+         (code >= 186);
+}
+
+function getNumericCharFrom(code) {
+  if (code >= 48 && code < 58) {
+    return String(code - 48);
+  } else if (code >= 96 && code < 106) {
+    return String(code - 96);
+  }
+  return '';
+}
+
+function isBackspace(code) {
+  return (code === 8);
+}
+
+function onSubmit(formEvent) {
+  dispatch('next', resultingAmount);
+}
+</script>
+
+<form novalidate on:submit|preventDefault={onSubmit}>
+  <div class="input-group input-group-lg">
+    <div class="input-group-prepend">
+      <span class="input-group-text" id="amount-input-currency-symbol">$</span>
+    </div>
+    <input type="tel"
+           aria-describedby="amount-input-currency-symbol"
+           aria-label="Amount"
+           bind:this={inputField}
+           class="text-right form-control"
+           on:keydown={onKeyDown} />
+  </div>
+</form>

src/views/CategoryAmount.svelte

@@ -1,23 +1,21 @@
 <script>
+import AmountInput from '../components/AmountInput.svelte'
 import { categories, updateCategory } from '../data/categories'
 import { push } from 'svelte-spa-router'
 
 export let params // URL parameters provider by router.
 
-let amountInDollars = 0
-
 $: uuid = params.uuid
 $: category = $categories.find(category => category.uuid === uuid) || {}
+$: initialAmount = category.amount || 0
 
-function onSubmit() {
-  let amount = amountInDollars * 100
+function onSubmit(event) {
+  let amount = event.detail
   updateCategory(uuid, {amount})
   push(`/budget`)
 }
 </script>
 
 <h2>Amount for {category.name}</h2>
 
-<form on:submit|preventDefault={onSubmit}>
-  <input type="number" class="form-control" step="0.01" min="0" bind:value={amountInDollars} />
-</form>
+<AmountInput amount={initialAmount} on:next={onSubmit} />