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: 24px; text-align: left; margin-left: 10%">{{ item.name }}</div>

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

        <!--Color Selector-->
        <div style="width: 30%; float: left">
            <div class="colorPickSelector" id={{item.name}}></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">
    $(".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() {

        // Todo getting the element id is currently done over [0] [#02]
        this.element.css({'backgroundColor': this.color, 'color': this.color});
        console.log(this.element[0].id);
        console.log(this.color);
        post("color", this.element[0].id, this.color);
    }
    });

    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]
        post("toggle", self.id, !self.previousElementSibling.checked);
        
        /*console.log(self.id);
        var url = "https://192.168.68.103.xip.io:1234/calendar";
        var method = "POST";
        var postData = JSON.stringify({"calendar_id": self.id.toString() });
        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);*/
    }
</script>

{% endblock %}