raphael
596f690cce
- the color picker is from 'colorPick' which makes implementation easy. It's only a .js and a .css file which need to be included and the color-picker is simple enough to handle on the client side. The only main problem with it, is that accessing the 'id' information of the css it was called from is not straightforward - the toggle switch which is just implemented in .css currently has the checklist inverted, works but ugly - The Client sends this information back to the server via a json file, which defines the calendar id and either color or the toggle information. The server currently just prints this information.great stuff.
108 lines
3.7 KiB
HTML
108 lines
3.7 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: 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 %} |