Initial checkin

src/index.js

@@ -0,0 +1,3 @@
+import App from './ncounter/App.svelte';
+
+new App({ target: document.body });

src/ncounter/App.svelte

@@ -0,0 +1,110 @@
+<div class="app">
+{#each counters as counter}
+<Counter counter={ counter } on:save={() => { save(counter); } }></Counter>
+{/each}
+</div>
+<button class="add" on:click="{ showAdd }"><i class="material-icons">add</i></button>
+{#if showAddDialog}
+<div class="dialog">
+    <div class="dialog-content">
+        <label>Name: <input type="text" bind:value={newCounter.title} use:focus/></label>
+        <label>Initial Value: <input type="number" bind:value={newCounter.value} /></label>
+        <label>Target: <input type="number" bind:value={newCounter.max} /></label>
+        <label>Click counter: <input type="checkbox" bind:value={newCounter.isClickCounter} /></label>
+        <button on:click={ () => { showAddDialog = false; } }>Cancel</button>
+        <button class="ok" on:click={ addCounter }>OK</button>
+    </div>
+</div>
+{/if}
+<script>
+import Counter from './Counter.svelte';
+
+let showAddDialog = false;
+
+let newCounter = null;
+
+let counters = [
+    {
+        title: 'Test 1',
+        value: 0
+    },
+    {
+        title: 'Test 2',
+        value: 10
+    },
+    {
+        title: 'Max Test',
+        value: 0,
+        max: 100
+    },
+    {
+        title: 'Click Test',
+        value: 0,
+        isClickCounter: true
+    }
+];
+
+function focus(node){
+    node.focus();
+}
+
+function save(counter){
+    alert('Save ' + counter.title);
+}
+
+function showAdd(){
+    newCounter = {
+        title: '',
+        value: 0,
+        isClickCounter: false
+    }
+
+    console.log({ newCounter });
+
+    showAddDialog = true;
+}
+
+function addCounter(){
+    counters = [...counters, newCounter];
+
+    showAddDialog = false;
+}
+</script>
+<style>
+    .add {
+        position: fixed;
+        bottom: 15px;
+        right: 15px;
+
+        background-color: #90C090;
+        border-radius: 50%;
+
+        width: 40px;
+        height: 40px;
+        color: white;
+    }
+
+    .dialog-content > label {
+        display: flex;
+        width: 100%;
+        margin-bottom: 5px;
+    }
+
+    .dialog-content > label > input {
+        margin-left: auto;
+    }
+
+    .ok {
+        margin-left: auto;
+    }
+
+    .dialog-content button {
+        padding: 10px;
+        font-size: 14px;
+        font-weight: 600;
+    }
+
+    .app {
+        margin-bottom: 60px;
+    }
+</style>

src/ncounter/Counter.svelte

@@ -0,0 +1,112 @@
+<div class="counter" on:click="{ clickCount }">
+    <header>{ counter.title }</header>
+    <span class="value">{ counter.value }</span>
+    {#if counter.max}
+    <MyProgress value={ counter.value } max={ counter.max }></MyProgress>
+    {/if}
+    <div class="controls">
+        {#if !counter.isClickCounter}
+        <button on:click={ () => { showIncrement = true; } }><i class="material-icons">add</i></button>
+        {/if}
+        <button class="reset" on:click={ reset }><i class="material-icons">undo</i></button>
+        <button on:click={ save }><i class="material-icons">save</i></button>
+    </div>
+    {#if showIncrement}
+    <div class="dialog">
+        <div class="dialog-content">
+            <input class="increment-value" type="number" bind:value={ incrementValue } use:focus />
+            <button on:click={ () => { showIncrement = false; } }>Cancel</button>
+            <button class="ok" on:click={ increment }>OK</button>
+        </div>
+    </div>
+    {/if}        
+</div>
+<script>
+import MyProgress from './MyProgress.svelte';
+import { tick } from 'svelte';
+import { createEventDispatcher } from 'svelte';
+
+const dispatch = createEventDispatcher();
+
+export let counter;
+
+let incrementValue;
+let showIncrement;
+
+function focus(node){
+    node.focus();
+}
+
+function increment(){
+    counter.value += incrementValue;
+    showIncrement = false;
+    incrementValue = null;
+}
+
+function reset(e){
+    e.stopPropagation();
+
+    if(confirm(`Reset ${counter.title}?`))
+        counter.value = 0;
+}
+
+function save(e) {
+    e.stopPropagation();
+
+    dispatch('save');
+    counter.value = 0;
+}
+
+function clickCount() {
+    if(!counter.isClickCounter)
+        return;
+
+    counter.value++;
+}
+</script>
+<style>
+.counter{
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+    margin-bottom: 12px;
+
+    display: flex;
+    flex-direction: column;
+
+    padding: 5px;
+}
+
+.controls {
+    display: flex;
+}
+
+.reset {
+    margin-left: auto;
+}
+
+header {
+    font-size: 22px;
+    font-weight: 600;
+    margin: 0 0 5px 0;
+}
+
+.value {
+    font-size: 18px;
+    font-weight: 500;
+    margin-left: 0;
+}
+
+.increment-value {
+    width: 100%;
+    margin: 5px 0;
+}
+
+.ok {
+    margin-left: auto;
+}
+
+.dialog-content button {
+    padding: 10px;
+    font-size: 14px;
+    font-weight: 600;
+}
+</style>

src/ncounter/MyProgress.svelte

@@ -0,0 +1,40 @@
+<div class="progress-bar">
+	<span class="progress" {style}></span>
+	<span class="text">{value} / {max}</span>
+</div>
+<script>
+export let value;
+export let max;
+
+$: style = `width: ${(Math.min(1, value / max) * 100)}%`;
+</script>
+<style>
+	.progress-bar {
+		width: 100%;
+
+		margin: 3px 0;
+
+		background-color: #F0F0F0;
+		border: 1px solid black;
+		height: 20px;
+
+		position: relative;
+	}
+
+	.progress-bar > .progress {
+		display: block;
+		background-color: #C0CFC0;
+		height: 100%;
+	}
+
+	.progress-bar > .text {
+		position: absolute;
+
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+
+		text-align: center;
+	}
+</style>