gundb-test-app/index.html at master · amit-singhs/gundb-test-app · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<html>

<body>
    <h1>Todos</h1>

    <ul></ul>

    <form><input><button>Add</button></form>
    <script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
        var todos = Gun(['https://gundb-dev.herokuapp.com/gun']).get('todos')

        $('form').on('submit', function (event) {
            var input = $('form').find('input')
            todos.set({ title: input.val() })
            input.val('')
            event.preventDefault()
        })

        todos.map().on(function (todo, id) {
            var li = $('#' + id)
            if (!li.get(0)) {
                li = $('<li>').attr('id', id).appendTo('ul')
            }
            if (todo) {
                var html = '<span onclick="clickTitle(this)">' + todo.title + '</span>'
                html = '<input type="checkbox" onclick="clickCheck(this)" ' + (todo.done ? 'checked' : '') + '>' + html
                html += '<img onclick="clickDelete(this)" src="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-x.svg"/>'
                li.html(html)
            } else {
                li.remove()
            }
        })
        function clickCheck(element) {
            todos.get($(element).parent().attr('id')).put({ done: $(element).prop('checked') })
        }

        function clickTitle(element) {
            // Get the (jQuery) element of the text.
            element = $(element)
            // Check if the element does not yet contain an input field.
            // So we will only add one input field when clicked multiple times.
            if (!element.find('input').get(0)) {
                // Turn the elements text into an input.
                element.html('<input value="' + element.html() + '" onkeyup="keypressTitle(this)">')
            }
        }

        function keypressTitle(element) {
            // Is Enter pressed?
            if (event.keyCode === 13) {
                // Get the GUN item with the id that we store in the element.
                // And tell GUN to update the title of the todo item.
                todos.get($(element).parent().parent().attr('id')).put({ title: $(element).val() })
            }
        }
        function clickDelete(element) {
            todos.get($(element).parent().attr('id')).put(null)
        }
    </script>

    <style>
        ul {
            padding: 0;
        }

        li {
            display: flex;
        }

        li span {
            width: 150px;
            word-break: break-all;
        }

        img {
            height: 20px;
            margin-left: 8px;
            cursor: pointer;
        }

        input {
            width: 150px;
            margin-right: 8px;
        }

        input[type='checkbox'] {
            width: auto;
        }
    </style>
    <form method="post" action="todoDapp.html">
        <button type="submit">Goto Dapp</button>
    </form>
</body>

</html>