- commit
- 76557c7
- parent
- 956b524
- author
- CheddarCrisp
- date
- 2020-02-16 15:02:59 +0100 CET
Remove click counter and save Add option to automatically save history Create edit dialog Reset to inital value
4 files changed,
+86,
-79
+10,
-19
1@@ -8,9 +8,9 @@
2 <div class="dialog">
3 <div class="dialog-content">
4 <label>Name: <input type="text" bind:value={newCounter.title} use:focus/></label>
5- <label>Initial Value: <input type="number" bind:value={newCounter.value} /></label>
6+ <label>Initial Value: <input type="number" bind:value={newCounter.initialValue} /></label>
7 <label>Target: <input type="number" bind:value={newCounter.max} /></label>
8- <label>Click counter: <input type="checkbox" bind:value={newCounter.isClickCounter} /></label>
9+ <label>Save history: <input type="checkbox" bind:checked={newCounter.saveHistory} /></label>
10 <button on:click={ () => { showAddDialog = false; } }>Cancel</button>
11 <button class="ok" on:click={ add }>OK</button>
12 </div>
13@@ -28,15 +28,11 @@ function focus(node){
14 node.focus();
15 }
16
17-function save(counter){
18- alert('Save ' + counter.title);
19-}
20-
21 function showAdd(){
22 newCounter = {
23 title: '',
24- value: 0,
25- isClickCounter: false,
26+ initialValue: 0,
27+ saveHistory: false,
28 history: []
29 }
30
31@@ -44,7 +40,12 @@ function showAdd(){
32 }
33
34 function add(){
35- counters.add(newCounter);
36+ const counter = {
37+ ...newCounter,
38+ value: newCounter.initialValue
39+ }
40+
41+ counters.add(counter);
42
43 showAddDialog = false;
44 }
45@@ -67,16 +68,6 @@ function add(){
46 color: white;
47 }
48
49- .dialog-content > label {
50- display: flex;
51- width: 100%;
52- margin-bottom: 5px;
53- }
54-
55- .dialog-content > label > input {
56- margin-left: auto;
57- }
58-
59 .ok {
60 margin-left: auto;
61 }
+37,
-57
1@@ -1,20 +1,17 @@
2-<div class="counter" on:click="{ clickCount }">
3+<div class="counter">
4 <header>{ counter.title }</header>
5 <span class="value">{ counter.value }</span>
6 {#if counter.max}
7 <MyProgress value={ counter.value } max={ counter.max }></MyProgress>
8 {/if}
9 <div class="controls">
10- {#if !counter.isClickCounter}
11 <button on:click={ () => { showIncrement = true; } }><i class="material-icons">add</i></button>
12- <button on:click={ () => { showSet = true; } }><i class="material-icons">create</i></button>
13- {/if}
14- <span class="message">{ message }</span>
15+ <button on:click={ () => { showSet = true; } }><i class="material-icons">edit</i></button>
16 <button class="reset" on:click={ reset }><i class="material-icons">undo</i></button>
17- <button on:click={ save }><i class="material-icons">save</i></button>
18+ <button on:click={ startEdit }><i class="material-icons">edit</i></button>
19 <button on:click={ remove }><i class="material-icons">delete</i></button>
20 </div>
21- {#if showDialog}
22+ {#if showValueDialog}
23 <div class="dialog">
24 <div class="dialog-content">
25 <h1>{ showIncrement ? "Add" : "Set" }</h1>
26@@ -23,7 +20,19 @@
27 <button class="ok" on:click={ dialogDone }>OK</button>
28 </div>
29 </div>
30- {/if}
31+ {/if}
32+ {#if showEditDialog}
33+ <div class="dialog">
34+ <div class="dialog-content">
35+ <label>Name: <input type="text" bind:value={editingCounter.title} use:focus/></label>
36+ <label>Initial Value: <input type="number" bind:value={editingCounter.initialValue} /></label>
37+ <label>Target: <input type="number" bind:value={editingCounter.max} /></label>
38+ <label>Save history: <input type="checkbox" bind:checked={editingCounter.saveHistory} /></label>
39+ <button on:click={ () => { showEditDialog = false; } }>Cancel</button>
40+ <button class="ok" on:click={ finishEdit }>OK</button>
41+ </div>
42+ </div>
43+ {/if}
44 </div>
45 <script>
46 import MyProgress from './MyProgress.svelte';
47@@ -40,18 +49,10 @@ $: counter = $counters.find(x => x.id == counterId);
48 let dialogValue;
49 let showIncrement;
50 let showSet;
51-let message = '';
52-
53-$: showDialog = showIncrement || showSet;
54+let showEditDialog;
55+let editingCounter;
56
57-const formatter = new Intl.DateTimeFormat('en-US',
58- {
59- month: 'short',
60- day: 'numeric',
61- year: 'numeric',
62- hour: 'numeric',
63- minute: 'numeric'
64- });
65+$: showValueDialog = showIncrement || showSet;
66
67 function focus(node){
68 node.focus();
69@@ -61,6 +62,18 @@ function update(newCounter){
70 counters.update(newCounter);
71 }
72
73+function startEdit(e){
74+ e.stopPropagation();
75+
76+ editingCounter = {...counter};
77+ showEditDialog = true;
78+}
79+
80+function finishEdit(){
81+ update(editingCounter);
82+ showEditDialog = false;
83+}
84+
85 function dialogCancel(){
86 showIncrement = false;
87 showSet = false;
88@@ -88,50 +101,18 @@ function reset(e){
89 if(confirm(`Reset ${counter.title}?`)){
90 const newCounter = {
91 ...counter,
92- value: 0
93+ value: counter.initialValue
94 }
95
96 update(newCounter);
97 }
98 }
99
100-function save(e) {
101- e.stopPropagation();
102-
103- const time = new Date();
104-
105- const data = {
106- time,
107- value: counter.value
108- }
109-
110- const newCounter = {
111- ...counter,
112- history: [...counter.history, data]
113- }
114-
115- message = `Saved ${data.value} at ${formatter.format(data.time)}`;
116- setTimeout(() => message = '', 5000);
117-
118- update(newCounter);
119-}
120-
121 function remove(){
122 if(confirm(`Remove ${counter.title}?`))
123 counters.remove(counter);
124 }
125
126-function clickCount() {
127- if(!counter.isClickCounter)
128- return;
129-
130- const newCounter = {
131- ...counter,
132- value: counter.value + 1
133- }
134-
135- update(newCounter);
136-}
137 </script>
138 <style>
139 .counter{
140@@ -148,11 +129,6 @@ function clickCount() {
141 display: flex;
142 }
143
144-.message {
145- flex: 1;
146- text-align: center;
147-}
148-
149 header {
150 font-size: 22px;
151 font-weight: 600;
152@@ -165,6 +141,10 @@ header {
153 margin-left: 0;
154 }
155
156+.reset {
157+ margin-left: auto;
158+}
159+
160 .dialog-value {
161 width: 100%;
162 margin: 5px 0;
+28,
-2
1@@ -6,13 +6,37 @@ function createCounters(){
2 const {subscribe,set,update:updateVal} = writable([]);
3
4 getDb('counters').then(counters => {
5- if(counters)
6- set(counters);
7+ if(counters) {
8+ const updatedCounters = counters.map(counter => {
9+ return {
10+ initialValue: 0,
11+ showHistory: false,
12+ ...counter
13+ }
14+ });
15+
16+ set(updatedCounters);
17+ }
18 });
19
20+ function updateHistory(counter){
21+ if(counter.saveHistory){
22+ const time = new Date();
23+
24+ const data = {
25+ time,
26+ value: counter.value
27+ };
28+
29+ counter.history = [...counter.history, data];
30+ }
31+ }
32+
33 function add(counter){
34 const newCounter = { id: uuid(), ...counter };
35
36+ updateHistory(newCounter);
37+
38 updateVal(counters => {
39 const newCounters = [...counters, newCounter];
40
41@@ -23,6 +47,8 @@ function createCounters(){
42 }
43
44 function update(counter){
45+ updateHistory(counter);
46+
47 updateVal(counters => {
48 const counterIndex = counters.findIndex(x => x.id == counter.id);
49
+11,
-1
1@@ -50,7 +50,7 @@ button {
2 background-color: #E0E0E0;
3 pointer-events: all;
4
5- width: 250px;
6+ width: 300px;
7
8 border-radius: 5px;
9 box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
10@@ -60,6 +60,16 @@ button {
11 flex-wrap: wrap;
12 }
13
14+.dialog-content > label {
15+ display: flex;
16+ width: 100%;
17+ margin-bottom: 5px;
18+}
19+
20+.dialog-content > label > input {
21+ margin-left: auto;
22+}
23+
24 input[type="text"],
25 input[type="number"] {
26 font-size: 16px;