improved line editor and price editor

frontend/src/Components/LineEditor.svelte

@@ -2,18 +2,30 @@
     let { editable = false, value = $bindable(null) } = $props();
     let editing = $state(false);
 
-    function toggleEdit(){
-        editing = !editing;
+    let editValue = value;
+
+    function applyEdit(){
+        value = editValue;
+        editing=false;
+    }
+
+    function resetEdit(){
+        editing = false;
+        editValue = value;
+    }
+
+    function startEdit(){
+        editing = editable;
     }
 
     function typed(ev){
-        if (ev.keyCode == 13) toggleEdit();
+        if (ev.keyCode == 13) applyEdit();
+        if (ev.keyCode == 27) resetEdit();
     }
 </script>
 
 {#if editable && editing}
-<input bind:value onkeyup={typed} />
+<input bind:value={editValue} onkeyup={typed} autofocus />
 {:else}
-<div onclick={toggleEdit}>{value}</div>
+<div onclick={startEdit}>{value}</div>
 {/if}
-

frontend/src/Components/PriceEditor.svelte

@@ -2,18 +2,25 @@
     let { editable = false, currency, value = $bindable(null) } = $props();
     let editing = $state(false);
 
-    function toggleEdit(){
-        editing = !editing;
-        if (editing){
-            value /= 100;
-        }
+    let editValue = value/100;
+
+    function applyEdit(){
+        value = editValue * 100;
+        editing = false;
+    }
+
+    function resetEdit(){
+        editValue = value/100;
+        editing = false;
+    }
+
+    function startEdit(){
+        editing = editable;
     }
 
     function typed(ev){
-        if (ev.keyCode == 13) {
-            toggleEdit();
-            value *= 100;
-        }
+        if (ev.keyCode == 13) applyEdit();
+        if (ev.keyCode == 27) resetEdit();
     }
 </script>
 
@@ -22,8 +29,8 @@
 </style>
 
 {#if editable && editing}
-<input type="number" step=".01" bind:value onkeyup={typed} />&nbsp;{currency}
+<input type="number" step=".01" bind:value={editValue} onkeyup={typed} />&nbsp;{currency}
 {:else}
-<div onclick={toggleEdit}>{Number(value/100).toFixed(2)}&nbsp;{currency}</div>
+<div onclick={startEdit}>{Number(value/100).toFixed(2)}&nbsp;{currency}</div>
 {/if}