<?xml version="1.0" encoding="UTF-8"?>
<!--
 * Name     :   Raj Janorkar
 * Date     :   28 Dec 15 
 * Desc     :   This is USER TO-DO Internal Gadget 
-->
<Module>
    <ModulePrefs title="To Do list" title_url="https://igoogleportal.com"
                 description="Put your To-Do list on portal, Easily manage and track everything you need To-Do. The gadget lets you create multiple To-Do lists, each with a unique purpose. Use To-Do List to create a list of your daily tasks."
                 author="iGoogle Portal"
                 scrolling="true"
                 author_email="raj.janorkar+gadget@gmail.com"
                 screenshot="https://igtab.com/gadgets/tasks/image.jpg"
                 thumbnail="https://igtab.com/gadgets/tasks/image.jpg"
                 category="tools" height="150">
        <Require feature="dynamic-height"/>
        <Require feature="views"/>
        <Require feature="setprefs"/>
    </ModulePrefs>
    <!-- Font color's -->
    <UserPref name="ftcolor" display_name="Font Color" datatype="enum" default_value="#333333">
        <EnumValue value="#333333" display_value="Black"/>
        <EnumValue value="#FFFF00" display_value="Yellow"/>
        <EnumValue value="#0000FF" display_value="Blue"/>
        <EnumValue value="#FF0000" display_value="Red"/>
        <EnumValue value="#00FF00" display_value="Green"/>
        <EnumValue value="#FFA500" display_value="Orange"/>
        <EnumValue value="#A52A2A" display_value="Brown"/>
        <EnumValue value="#800080" display_value="Purple"/>
    </UserPref>
    <!-- Font size -->
    <UserPref name="ftsize" display_name="Font Size" datatype="enum" default_value="15px">
        <EnumValue value="13px" display_value="13px"/>
        <EnumValue value="15px" display_value="15px"/>
        <EnumValue value="17px" display_value="17px"/>
        <EnumValue value="19px" display_value="19px"/>
        <EnumValue value="21px" display_value="21px"/>
        <EnumValue value="23px" display_value="23px"/>
    </UserPref>
    <UserPref name="height" display_name="Height (pixels)" datatype="String" default_value="150"/>
    <Content type="html" view="default, home, profile, canvas">
    <![CDATA[
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://igtab.com/gadgets/js/common.js"></script>

        <link rel="stylesheet" type="text/css" href="https://igtab.com/gadgets/css/common.css" />
        <link rel="stylesheet" type="text/css" href="https://igtab.com/gadgets/libs/font-awesome-4.7.0/css/font-awesome.min.css" />

        <style type="text/css">
            body, div, p, td, select, input {
                font-family: 'Avenir', Helvetica, Arial, sans-serif;
                font-size: 16px;
                color: #444444;
            }

            .task_list {
                padding-bottom: 10px;
                padding-top: 5px;
                border-bottom: 1px solid #ebebeb;
            }

            .task-update:hover {
                color: #5cb85c;
            }

            .task-delete:hover {
                color: #ca3523;
            }

            .title_link {
                text-decoration: none;
                vertical-align: middle;
                margin-left: 10px;
                vertical-align: middle;
            }

            .add_task {
                margin-top: 20px;
            }

            .error_msg {
                font-size: 14px;
                color: #A8A8A8;
                padding-left: 2px;
                margin-top: 10px;
            }

            input[type="text"] {
                display: block;
                margin: 0;
                width: 100%;
                font-size: 16px;
                appearance: none;
                box-shadow: none;
                border-radius: 0;
            }

            input[type="text"]:focus {
                outline: none;
            }

            .style-1 input[type="text"] {
                padding: 6px;
                border: solid 1px #dcdcdc;
                transition: box-shadow 0.3s, border 0.3s;
                margin-bottom: 10px;
            }

            .style-1 input[type="text"]:focus,
            .style-1 input[type="text"].focus {
                border: solid 1px #707070;
                box-shadow: 0 0 5px 1px #969696;
            }

            .list-unstyled {
                padding: 0;
                margin: 0;
                list-style: none;
            }

            /*------------------------------------------------------*\
             * Round checkbox
            \*------------------------------------------------------*/

            .round {
                position: relative;
            }

            .round label {
                background-color: #fff;
                border: 1px solid #ccc;
                border-radius: 50%;
                cursor: pointer;
                height: 20px;
                left: 0;
                position: absolute;
                top: 0;
                width: 20px;
            }

            .round label:after {
                border: 2px solid #fff;
                border-top: none;
                border-right: none;
                content: "";
                height: 6px;
                left: 3px;
                opacity: 0;
                position: absolute;
                top: 4px;
                transform: rotate(-45deg);
                width: 12px;
            }

            .round input[type="checkbox"] {
                visibility: hidden;
            }

            .round input[type="checkbox"]:checked + label {
                background-color: #66bb6a;
                border-color: #66bb6a;
            }

            .round input[type="checkbox"]:checked + label:after {
                opacity: 1;
            }


        </style>

        <script type="text/javascript">
            var prefs = new gadgets.Prefs();
            var ftcolor = prefs.getString("ftcolor");
            var ftsize = prefs.getString("ftsize");
            var height = parseInt(prefs.getString('height')) ? parseInt(prefs.getString('height')) : null;

            var all_array = [];

            // Get All Tasks for user
            function get_tasks() {
                // Get the logged in user notes
                $.ajax({
                    url: __APP_API_URL + 'tasks',
                    data: {},
                    type: "GET",
                    dataType: 'json',
                    cache: false,
                    async: true,
                })
                    .done(function (response) {
                        if (response.length === 0) {
                            display_welcome(); // display welcome message.
                        } else {
                            all_array = response
                            display_tasks(); // Display Tasks
                        }
                    })
                    .fail(function (jqXHR, textStatus, errorThrown) {
                        // something went wrong may be user not logged in
                        commonFailResponseMessage(jqXHR, '#error_msg');
                        display_welcome();
                    });

                display_task_button();
            }

            function display_tasks() {
                var l_s = '';
                $.each(all_array, function (i, task) {
                    // All tasks
                    l_s += '<div class="task_list">'
                            + '<div style="float: right">'
                                + '<a href="#" title="Update Task" onclick="update_task(' + i + ');return false;">'
                                    + '<i class="fa fa-pencil color-gray task-update" aria-hidden="true"></i>'
                                + '</a>&nbsp;&nbsp;&nbsp;'
                                + '<a href="#" title="Delete Task" onclick="delete_task(' + i + ');return false;">'
                                    +  '<i class="fa fa-trash-o color-gray task-delete" aria-hidden="true"></i>'
                                + '</a>'
                            + '</div>';

                        l_s +=  '<span class="round">'
                                    + '<input style="vertical-align: middle;" type="checkbox" id="checkbox"' + (task.is_completed == 1 ? 'checked="checked" ' : '') + '/>'
                                    + '<label for="checkbox" onclick="change_task_status(' + i + ')"></label>'
                                + '</span>'
                                + '<a class="title_link" href="#" onclick="detail_note(' + i + ');return false;" style="color:' + ftcolor + '; font-size:' + ftsize + ';">'
                                    + (task.is_completed == 1 ? '<strike>' : '')
                                        + task.title
                                    + (task.is_completed == 1 ? '</strike>' : '')
                                + '</a>'
                        + '</div>';
                });

                $("#tasks_list").empty().append(l_s);

                l_s = '<a href="#" class="button default" onclick="add_task();return false;"> <i class="fa fa-plus color-green" aria-hidden="true"></i>&nbsp;&nbsp;Add a task</a>';
                $("#add_task_button").empty().append(l_s);

                // Adjust height of the gadget
                _IG_AdjustIFrameHeight(height);
            }

            // Display default welcome message
            function display_welcome() {
                var l_s = "<h3>Easily store, manage and track everything you need To-Do.</h3>";
                $("#tasks_list").empty().append(l_s);
            }

            // display add a task button
            function display_task_button() {
                var l_s = '<a href="#" class="button default" onclick="add_task();return false;"><i class="fa fa-plus color-green" aria-hidden="true"></i>&nbsp;&nbsp;Add a task</a>';
                $("#add_task_button").empty().append(l_s);

                $("#error_msg").empty();

                // Adjust height of the gadget
                _IG_AdjustIFrameHeight();
            }

            // Add new task form
            function add_task() {
                var l_s = '<form action="" onsubmit="save_task_add(this);return false;">'
                        + '<table cellpadding="0">'
                            + "<tr><td></td>"
                            + "<td class='style-1'><input name='title' type='text' size='50' placeholder='Enter title in short' /></td>"
                            + "</tr>"
                            + "<tr><td></td>"
                            + "<td class='style-1'>"
                            + "<input name='description' type='text' size='50' placeholder='Enter task description' />"
                            + "</td></tr>"
                            + "<tr><td></td>"
                            + "<td class='pull-right'>"
                            + "<input class='button default' type='button' onclick='display_task_button();return false;' value='Cancel' />"
                            + "<input class='button green' type='submit' value='Add' /> "
                            + "</td></tr>"
                        + "</table>"
                    + "</form>";

                $("#add_task_button").empty();
                $("#error_msg").empty();
                $("#add_task_button").append(l_s);

                // Adjust height of the gadget
                _IG_AdjustIFrameHeight();

            };

            // update existing task
            function update_task(i) {
                var title = all_array[i].title;
                var description = all_array[i].description;
                var id = all_array[i].id;
                var is_completed = all_array[i].is_completed == 1 ? '1' : '0';

                var l_s = '<form action="" onsubmit="save_task_update(this);return false;">'
                    + '<table cellpadding="0">'
                    + "<tr><td></td>"
                    + "<td class='style-1'><input name='title' type='text' size='50' value='" + title + "' /></td>"
                    + "</tr>"
                    + "<tr><td></td>"
                    + "<td class='style-1'>"
                    + "<input name='description' type='text' size='50' value='" + (description ? description : '') + "' />"
                    + "</td></tr>"
                    + "<tr><td></td>"
                    + "<td>"
                    + "<input name='is_completed' type='hidden' value='" + is_completed + "' />"
                    + "<input name='id' type='hidden' value='" + id + "' />"
                    + "<input name='arrIndex' type='hidden' value='" + i + "' />"
                    + "<input class='button default' type='button' onclick='display_tasks();return false;' value='Cancel' />"
                    + "<input class='button green' type='submit' value='Save' /> "
                    + "</td></tr>"
                    + "</table>"
                    + "</form>";

                $("#tasks_list").empty();
                $("#error_msg").empty();
                $("#add_task_button").empty().append(l_s);

                // Adjust height of the gadget
                _IG_AdjustIFrameHeight();
            };

            // display note details
            function detail_note(i) {
                var l_s = "<p style='color:" + ftcolor + "; font-size:" + ftsize + ";'><b>" + all_array[i].title + "</b></p>";
                l_s += "<p style='color:" + ftcolor + "; font-size:" + ftsize + ";'>" + (all_array[i].description ? all_array[i].description : '') + "</p>";
                l_s += "<br />";
                l_s += "<center style='padding-top: 10px;'>";
                l_s += "<a type='button' onclick='display_tasks();return false;' class='button default'><i class='fa fa-arrow-left' aria-hidden='true'></i>&nbsp;&nbsp;Go back</a>";
                l_s += "<a href='#' class='button blue' type='button' onclick='update_task(" + i + ");return false;'> <i class='fa fa-pencil' aria-hidden='true'></i>&nbsp;&nbsp;Update</a>";
                l_s += "<a href='#' class='button red' type='button' onclick='delete_task(" + i + ");return false;'> <i class='fa fa-trash-o' aria-hidden='true'></i>&nbsp;&nbsp;Delete</a>";
                l_s += "</center>";

                // Display Details
                $("#tasks_list").empty().append(l_s);

                $("#add_task_button").empty();

                // Adjust height of the gadget
                _IG_AdjustIFrameHeight();
            };

            // Delete task from database
            function delete_task(i) {
                var id = all_array[i].id;

                // delete task
                $.ajax({
                    url: __APP_API_URL + 'tasks/delete-task',
                    data: {task_id: id},
                    type: "DELETE",
                    dataType: 'json',
                    cache: false,
                    async: true
                })
                    .done(function (response) {
                        var statusMessage = response.hasOwnProperty('message') ? response.message : null;
                        $("#error_msg").empty().append(statusMessage);
                        all_array.splice(i, 1);

                        display_tasks();
                    })
                    .fail(function (jqXHR, textStatus, errorThrown) {
                        // something went wrong may be user not logged in
                        commonFailResponseMessage(jqXHR, '#error_msg');
                    });

                display_task_button();
            }

            // store task in database
            function save_task_add(v_form) {
                var oTitle = $.trim(v_form.title.value);
                var oDescription = $.trim(v_form.description.value);

                if (oTitle != '') {
                    // Add new task
                    $.ajax({
                        url: __APP_API_URL + 'tasks/add-task',
                        data: {title: oTitle, description: oDescription},
                        type: "POST",
                        dataType: 'json',
                        cache: false,
                        async: true
                    })
                        .done(function (response) {
                            var id = response.hasOwnProperty('id') ? parseInt(response.id) : null;
                            all_array.push(response);

                            display_tasks();
                            var statusMessage = 'Todo successfully added.';
                            $("#error_msg").empty().append(statusMessage);
                        })
                        .fail(function (jqXHR, textStatus, errorThrown) {
                            // something went wrong may be user not logged in
                            commonFailResponseMessage(jqXHR, '#error_msg');
                        });
                } else {
                    var statusMessage = "Please fill task details correctly.";
                    $("#error_msg").empty().append(statusMessage);
                }
            }

            // update task details in database
            function save_task_update(v_form) {
                var oTitle = $.trim(v_form.title.value);
                var oDescription = $.trim(v_form.description.value);
                var oIsCompleted = v_form.is_completed.value;
                var oId = v_form.id.value;
                var arrIndex = v_form.arrIndex.value;

                if (oTitle != '') {
                    // update task
                    $.ajax({
                        url: __APP_API_URL + 'tasks/update-task',
                        data: {task_id: oId, title: oTitle, description: oDescription, is_completed: oIsCompleted},
                        type: "PATCH",
                        dataType: 'json',
                        cache: false,
                        async: true
                    })
                        .done(function (response) {
                            var id = response.hasOwnProperty('id') ? parseInt(response.id) : null;
                            all_array[arrIndex] = response;

                            display_tasks();
                            var statusMessage = 'Todo successfully updated.';
                            $("#error_msg").empty().append(statusMessage);
                        })
                        .fail(function (jqXHR, textStatus, errorThrown) {
                            // something went wrong may be user not logged in
                            commonFailResponseMessage(jqXHR, '#error_msg');
                        });
                } else {
                    var l_s = "Please fill task details correctly.";
                    $("#error_msg").empty().append(l_s);
                }
            }

            // Mark task in completed or not completed
            function change_task_status(i) {
                console.log(i);
                var id = all_array[i].id;
                var status = all_array[i].is_completed == 1 ? '0' : '1';

                // update task is_completed status
                $.ajax({
                    url: __APP_API_URL + 'tasks/update-task',
                    data: {task_id: id, title: all_array[i].title, description: all_array[i].description, is_completed: status},
                    type: "PATCH",
                    dataType: 'json',
                    cache: false,
                    async: true
                })
                    .done(function (response) {
                        var id = response.hasOwnProperty('id') ? parseInt(response.id) : null;
                        all_array[i].is_completed = response.is_completed;

                        display_tasks();
                        var statusMessage = 'Todo status changed successfully .';
                        $("#error_msg").empty().append(statusMessage);

                    })
                    .fail(function (jqXHR, textStatus, errorThrown) {
                        // something went wrong may be user not logged in
                        commonFailResponseMessage(jqXHR, '#error_msg');
                    });

                display_task_button();
            }

            // Start execution here
            gadgets.util.registerOnLoadHandler(get_tasks);

        </script>
    </head>
    
    <body>
        <div id="tasks_list"> </div>
        <div id="add_task_button" class="add_task"></div>
        <div id="error_msg" class="error_msg" align="center"></div>
    </body>
        
    ]]>
    </Content>
</Module>
