raphael/calendarwatch_frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fixes communication conflicts between frontend and database through backend;

Browse Source 
sets up visualization of DOMs in frontend through javascript
This commit is contained in:
Raphael Maenle
2020-04-17 16:54:35 +00:00
parent c3f815939d
commit 8f20be53e1
4 changed files with 59 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
template/calendar.html
View File

@ -17,8 +17,8 @@
<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>
<input class="toggle" id={{item.name}} type="checkbox" toggled={{item.toggle}} onclick="toggleReaction(this)">
<span class="slider round"></span>
</label>
</div>
@ -37,7 +37,11 @@
<script type="text/javascript">
var init = false;
// initialize all DOM items
$(".colorPickSelector").colorPick({
'initialColor': '#3498db',
'allowRecent': true,
@ -45,22 +49,36 @@
'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"));
// 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"));
// console.log($( this )[0].attributes.getNamedItem("style"));
}));
@ -95,26 +113,15 @@
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;
var data;
if(self.checked) {
data = "False";
} else {
data = "True";
}
request.open(method, url, shouldBeAsync);
// content type json makes app do error 400
request.setRequestHeader("Content-Type", "application/json");
request.send(postData);*/
post("toggle", self.id, data);
}
init = true;
</script>
{% endblock %}