calendarwatch_frontend/template/calendar.html

{% extends "sidebar.html" %}
{% block body%}

<div style="height: 50px">
    <div style="width: 30%; float: left; margin-left: 10%">Calendar</div>
    <div style="width: 30%; float: left">Show on device</div>
    <div style="width: 30%; float: left">Color</div>
</div>

<div>
    {% for item in calendars %}
    <div style="height: 30px">
        <!--Name-->
        <div style="width: 30%; float: left; font-size: 10px; text-align: left; margin-left: 10%">{{ item.name }}</div>

        <!--Toggle-->
        <div style="width: 30%; float: left">
            <!-- Rounded switch -->
            <label class="switch">
                <input class="toggle" id={{item.name}} type="checkbox" toggled={{item.toggle}} onclick="toggleReaction(this)">
                <span class="slider round"></span>
            </label>
        </div>

        <!--Color Selector-->
        <div style="width: 30%; float: left">
        <div class="colorPickSelector" id={{item.name}}  defaultColor={{item.color}}></div>
            <!--svg height="20" width="20">
                <circle cx="10" cy="10" r="10" stroke="black" stroke-width="0" fill={{ item.color }} />
            </svg--> 
        </div>
        
    </div>
    {% endfor %}
 
</div>

<script type="text/javascript">
    
    
    var init = false;
    
    
    // initialize all DOM items
    $(".colorPickSelector").colorPick({
    'initialColor': '#3498db',
    'allowRecent': true,
    'recentMax': 5,
    'allowCustomColor': false,
    'palette': ["#1abc9c", "#16a085", "#2ecc71", "#27ae60", "#3498db", "#2980b9", "#9b59b6", "#8e44ad", "#34495e", "#2c3e50", "#f1c40f", "#f39c12", "#e67e22", "#d35400", "#e74c3c", "#c0392b", "#ecf0f1", "#bdc3c7", "#95a5a6", "#7f8c8d"],
    'onColorSelected': function() {
        if(!init) {
            return;
        }
        // Todo getting the element id is currently done over [0] [#02]
        this.element.css({'backgroundColor': this.color, 'color': this.color});
        post("color", this.element[0].id, this.color);
    }
    });

    ($(".toggle").each(function() {
        var toggle = true;
        console.log($(this).attr('toggled'));
        if($(this).attr('toggled') == "True") {
            toggle = false;
        } else if ($(this).attr('toggled') == "False") {
            toggle = true;
        }

        $(this).prop('checked', toggle);
    }));

    ($(".colorPickSelector").each(function() {
        // console.log($( this )[0].attributes.getNamedItem("style"));

        var color = $( this )[0].attributes.getNamedItem("defaultcolor").nodeValue;
        var style = document.createAttribute("style");
        style.value = 'background-color: ' + color + '; color: ' + color + ';';
        $( this )[0].attributes.setNamedItem(style); 

        // console.log($( this )[0].attributes.getNamedItem("style"));
        
    }));

    function post(type, id, data) {
        var url = "https://192.168.68.103.xip.io:1234/calendar";
        var method = "POST";
        switch (type) {
            case "color":
                var postData = JSON.stringify({"calendar_id": id.toString(), "color": data.toString()});
                break;
            case "toggle":
                var postData = JSON.stringify({"calendar_id": id.toString(), "toggle": data.toString()})        
                break;
            default:
                break;
        }
        console.log(postData);

        var shouldBeAsync = true;

        var request = new XMLHttpRequest();
        request.onload = function () {
            var status = request.status;
            var data = request.responseText;
        }

        request.open(method, url, shouldBeAsync);
        // content type json makes app do error 400
        request.setRequestHeader("Content-Type", "application/json");
        request.send(postData);
    }

    function toggleReaction(self) {
        // the slider used defaults to inverted information [#01]
        var data;
        if(self.checked) {
            data = "False";
        } else {
            data = "True";
        }
        post("toggle", self.id, data);
    }
    init = true;
</script>

{% endblock %}