ncounter.git

commit

956b524

parent

58d8b6f

author

CheddarCrisp

date

2020-02-07 19:57:25 +0100 CET

Add option to set counter value

1@@ -40,8 +40,6 @@ function showAdd(){
2         history: []
3     }
4 
5-    console.log({ newCounter });
6-
7     showAddDialog = true;
8 }
9 

 1@@ -7,18 +7,20 @@
 2     <div class="controls">
 3         {#if !counter.isClickCounter}
 4         <button on:click={ () => { showIncrement = true; } }><i class="material-icons">add</i></button>
 5+        <button on:click={ () => { showSet = true; } }><i class="material-icons">create</i></button>
 6         {/if}
 7         <span class="message">{ message }</span>
 8         <button class="reset" on:click={ reset }><i class="material-icons">undo</i></button>
 9         <button on:click={ save }><i class="material-icons">save</i></button>
10         <button on:click={ remove }><i class="material-icons">delete</i></button>
11     </div>
12-    {#if showIncrement}
13+    {#if showDialog}
14     <div class="dialog">
15         <div class="dialog-content">
16-            <input class="increment-value" type="number" bind:value={ incrementValue } use:focus />
17-            <button on:click={ () => { showIncrement = false; } }>Cancel</button>
18-            <button class="ok" on:click={ increment }>OK</button>
19+            <h1>{ showIncrement ? "Add" : "Set" }</h1>
20+            <input class="dialog-value" type="number" bind:value={ dialogValue } use:focus />
21+            <button on:click={ dialogCancel }>Cancel</button>
22+            <button class="ok" on:click={ dialogDone }>OK</button>
23         </div>
24     </div>
25     {/if}        
26@@ -35,10 +37,13 @@ export let counterId;
27 
28 $: counter = $counters.find(x => x.id == counterId);
29 
30-let incrementValue;
31+let dialogValue;
32 let showIncrement;
33+let showSet;
34 let message = '';
35 
36+$: showDialog = showIncrement || showSet;
37+
38 const formatter = new Intl.DateTimeFormat('en-US',
39         {
40             month: 'short',
41@@ -56,16 +61,25 @@ function update(newCounter){
42     counters.update(newCounter);
43 }
44 
45-function increment(){
46-    const newCounter = {
47+function dialogCancel(){
48+    showIncrement = false;
49+    showSet = false;
50+}
51+
52+function dialogDone(){
53+    const newCounter = showIncrement ? {
54+        ...counter,
55+        value: counter.value + dialogValue
56+    } : {
57         ...counter,
58-        value: counter.value + incrementValue
59+        value: dialogValue
60     }
61 
62     update(newCounter);
63     
64     showIncrement = false;
65-    incrementValue = null;
66+    showSet = false;
67+    dialogValue = null;
68 }
69 
70 function reset(e){
71@@ -151,7 +165,7 @@ header {
72     margin-left: 0;
73 }
74 
75-.increment-value {
76+.dialog-value {
77     width: 100%;
78     margin: 5px 0;
79 }