128 lines
4.1 KiB
HTML
128 lines
4.1 KiB
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 %} |