Untitled

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
    <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
    <script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
    <script>

        var year;
        var month;
        var day;

        //TODO 0 - upravit tak aby se misto ukol 1, ukol 2, ukol 3 zobrazoval název úkolu
        //TODO 1 - k nazvu ukolu pridat a ulozit i uzivatelem zvolene datum
        //TODO 2 - doplnit funkci na stisk tlačítka, které odstraní všechny prvky z úložiště
        //TODO 3 - po zvoleni daneho ukolu zobrazit dialog s možností odstranit úkol
        //TODO 4 - po zvolení odstranit úkol - tento úkol skutečně odstranit z úložiště
        //TODO 5 - vytvorit objekt ukol a do uloziste ukladat a nacitat tento objekt pomoci JSON

        document.addEventListener('init', function (event) {
            showTodo();
        });

        function addTask() {

            var myDate = new Date();
            //vytvori klic pro ukladani zaznamu do local storage
            //klic muzete vytvorit i vlastni/jiny
            var myKey = myDate.getTime();
            //zaznam, ktery bude ulozen pod klicem
            var todoText = $("#taskName").val() + ' : ' + day + ' ' + month + ' ' + year;
            var obj = new Object();
            obj.task = $("#taskName").val();
            obj.date = new Date(myKey).toString();
            obj.text = $('.textarea').val();
            obj.priority = $('input[name=priority]:checked').parent().parent().prev().text().replace(/\s/g, '');
            obj.vibrate = document.getElementById('vib').checked;
            obj.volume = document.getElementById('vol').value;

                console.log(obj);


            /*
                onsItem.innerHTML = "abc" + "<div class expandable-content>" + "abc bacb badb" + "</div>"
                onsIte.SetAtribute("expandavble", "")
            */

            if (todoText.length) {
                //localStorage[myKey] = todoText;
                localStorage.setItem(myKey, todoText);
            }

            showTodo();
        }

        function removeAll() {
            ons.notification.alert("Remove All Items");
            $("#todoList").empty();
            localStorage.clear();
        }

        function itemClick() {
            var deleteButton = document.getElementById('del-btn');
            deleteButton.setAttribute('onclick', "deleteItem(" + myKey + ")");
            document.getElementById('dialog-2').show();
        }

        function deleteItem(id) {
            localStorage.removeItem(id);
            $('#' + id).remove();
        }

        function myDateFunc(myDate) {
            year = myDate.getFullYear();
            month = myDate.getMonth() + 1; //January is 0
            day = myDate.getDate();
            console.log("year: " + year + " month: " + month + " day: " + day);
        }


        function showTodo() {
            $("#todoList").empty();
            for (var i = 0; i < localStorage.length; i++) {
                var onsItem = document.createElement('ons-list-item');


                //ziskam klic pro pristup k zaznamu
                var myKey = localStorage.key(i);

                onsItem.setAttribute('onclick', "itemClick(" + myKey + ")");
                onsItem.setAttribute('id', myKey);


                onsItem.innerHTML = localStorage[myKey];
                onsItem.setAttribute('modifier', "tappable");
                document.getElementById('todoList').appendChild(onsItem);
            }
        }

        function addDialog(text) {
            console.log('dialog-' + text);
            document.getElementById('dialog-' + text).show();
        }

        function closeDialog(text) {
            document.getElementById('dialog-' + text).hide();
        }

    </script>

</head>

<body>
    <ons-navigator swipeable id="myNavigator" page="page1.html"></ons-navigator>

    <template id="page1.html">
        <ons-page id="page1">
            <ons-toolbar>
                <div class="center">Local Storage</div>
            </ons-toolbar>

            <p>TODO List</p>

            <ons-list id="todoList">
            </ons-list>
            <ons-button modifier="material" id="push-button2" onclick="addDialog('1');">Add Task Using Dialog</ons-button>
            <ons-button modifier="material" id="push-button3" onclick="removeAll();">Remove All Task</ons-button>
        </ons-page>
    </template>

    <ons-dialog id="dialog-1">

        <div style="text-align: center; padding: 10px;">

            <p>
                <ons-input id="taskName" modifier="underbar" placeholder="Task Name" float></ons-input>
            </p>
            <p style="text-align: center">
                <input style="font-size:200%" id="dateInput" type="date" modifier="underbar material" onchange="myDateFunc(new Date(this.value));"></input>
            </p>

            <textarea class="textarea" rows="3" placeholder="Textarea"></textarea>

            <ons-list>
                <ons-list-header>Task priority</ons-list-header>

                <ons-list-item tappable>
                    <label class="left">
                        <ons-radio name="priority" input-id="radio-1" checked></ons-radio>
                    </label>
                    <label for="radio-1" class="center" style="color: blue;">
                        Low
                    </label>
                </ons-list-item>
                <ons-list-item tappable>
                    <label class="left">
                        <ons-radio name="priority" input-id="radio-2"></ons-radio>
                    </label>
                    <label for="radio-2" class="center">
                        Medium
                    </label>
                </ons-list-item>
                <ons-list-item tappable>
                    <label class="left">
                        <ons-radio name="priority" input-id="radio-3"></ons-radio>
                    </label>
                    <label for="radio-3" class="center" style="color: red;">
                        High
                    </label>
                </ons-list-item>
            </ons-list>

            <ons-list>
                <ons-list-header>Notifications</ons-list-header>
                <ons-list-item>
                    <div class="center">
                        Enable Vibration
                    </div>
                    <div class="right">
                        <ons-switch id="vib"></ons-switch>
                    </div>
                </ons-list-item>

                <ons-list-item>

                    <ons-row>
                        <ons-col width="40px" style="text-align: center; line-height: 31px;">
                            <ons-icon icon="md-volume-down"></ons-icon>
                        </ons-col>
                        <ons-col>
                            <ons-range id="vol" style="width: 100%;" value="25"></ons-range>
                        </ons-col>
                        <ons-col width="40px" style="text-align: center; line-height: 31px;">
                            <ons-icon icon="md-volume-up"></ons-icon>
                        </ons-col>
                    </ons-row>
                </ons-list-item>


            </ons-list>

            <p>
                <ons-button modifier="material" id="push-button4" onclick="addTask('1');">Add Task</ons-button>
            </p>
            <p>
                <ons-button modifier="material" id="push-button5" onclick="closeDialog('1');">Close</ons-button>
            </p>
        </div>

    </ons-dialog>

    <ons-dialog id="dialog-2">

        <div style="text-align: center; padding: 10px;">
            <p>
                <ons-button modifier="material" id="del-btn">Delete Task</ons-button>
            </p>
            <p>
                <ons-button modifier="material" id="push-button5" onclick="closeDialog('2');">Close</ons-button>
            </p>
        </div>

    </ons-dialog>

</body>

</html>