cheddar/ncounter
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity Actions

Add option to set counter value

Browse source
This commit is contained in:
CheddarCrisp 2020-02-07 13:57:25 -05:00
parent 58d8b6fe36
commit 956b524a8b
2 changed files with 24 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/ncounter/App.svelte
View file

@ -40,8 +40,6 @@ function showAdd(){
history: [] history: []
} }
console.log({ newCounter });
showAddDialog = true; showAddDialog = true;
} }

34
src/ncounter/Counter.svelte
View file

@ -7,18 +7,20 @@
<div class="controls"> <div class="controls">
{#if !counter.isClickCounter} {#if !counter.isClickCounter}
<button on:click={ () => { showIncrement = true; } }><i class="material-icons">add</i></button> <button on:click={ () => { showIncrement = true; } }><i class="material-icons">add</i></button>
<button on:click={ () => { showSet = true; } }><i class="material-icons">create</i></button>
{/if} {/if}
<span class="message">{ message }</span> <span class="message">{ message }</span>
<button class="reset" on:click={ reset }><i class="material-icons">undo</i></button> <button class="reset" on:click={ reset }><i class="material-icons">undo</i></button>
<button on:click={ save }><i class="material-icons">save</i></button> <button on:click={ save }><i class="material-icons">save</i></button>
<button on:click={ remove }><i class="material-icons">delete</i></button> <button on:click={ remove }><i class="material-icons">delete</i></button>
</div> </div>
{#if showIncrement} {#if showDialog}
<div class="dialog"> <div class="dialog">
<div class="dialog-content"> <div class="dialog-content">
<input class="increment-value" type="number" bind:value={ incrementValue } use:focus /> <h1>{ showIncrement ? "Add" : "Set" }</h1>
<button on:click={ () => { showIncrement = false; } }>Cancel</button> <input class="dialog-value" type="number" bind:value={ dialogValue } use:focus />
<button class="ok" on:click={ increment }>OK</button> <button on:click={ dialogCancel }>Cancel</button>
<button class="ok" on:click={ dialogDone }>OK</button>
</div> </div>
</div> </div>
{/if} {/if}
@ -35,10 +37,13 @@ export let counterId;
$: counter = $counters.find(x => x.id == counterId); $: counter = $counters.find(x => x.id == counterId);
let incrementValue; let dialogValue;
let showIncrement; let showIncrement;
let showSet;
let message = ''; let message = '';
$: showDialog = showIncrement || showSet;
const formatter = new Intl.DateTimeFormat('en-US', const formatter = new Intl.DateTimeFormat('en-US',
{ {
month: 'short', month: 'short',
@ -56,16 +61,25 @@ function update(newCounter){
counters.update(newCounter); counters.update(newCounter);
} }
function increment(){ function dialogCancel(){
const newCounter = { showIncrement = false;
showSet = false;
}
function dialogDone(){
const newCounter = showIncrement ? {
...counter, ...counter,
value: counter.value + incrementValue value: counter.value + dialogValue
} : {
...counter,
value: dialogValue
} }
update(newCounter); update(newCounter);
showIncrement = false; showIncrement = false;
incrementValue = null; showSet = false;
dialogValue = null;
} }
function reset(e){ function reset(e){
@ -151,7 +165,7 @@ header {
margin-left: 0; margin-left: 0;
} }
.increment-value { .dialog-value {
width: 100%; width: 100%;
margin: 5px 0; margin: 5px 0;
} }