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

adds writing the color as css attribute and then via jsqurey going through all of the class and adding this as background color

Browse Source
This commit is contained in:
Raphael Maenle 2020-04-15 18:47:41 +00:00
parent 04942268a6
commit c3f815939d
2 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app.py
View File

@ -104,6 +104,7 @@ def calendarsFromDb():
calId = calendar[1] calId = calendar[1]
toggle = calendar[3] toggle = calendar[3]
color = calendar[4] color = calendar[4]
pyCalendars.append(Calendar(name, toggle, color)) pyCalendars.append(Calendar(name, toggle, color))
return pyCalendars return pyCalendars

20
template/calendar.html
View File

@ -11,7 +11,7 @@
{% for item in calendars %} {% for item in calendars %}
<div style="height: 30px"> <div style="height: 30px">
<!--Name--> <!--Name-->
<div style="width: 30%; float: left; font-size: 24px; text-align: left; margin-left: 10%">{{ item.name }}</div> <div style="width: 30%; float: left; font-size: 10px; text-align: left; margin-left: 10%">{{ item.name }}</div>
<!--Toggle--> <!--Toggle-->
<div style="width: 30%; float: left"> <div style="width: 30%; float: left">
@ -24,7 +24,7 @@
<!--Color Selector--> <!--Color Selector-->
<div style="width: 30%; float: left"> <div style="width: 30%; float: left">
<div class="colorPickSelector" id={{item.name}}></div> <div class="colorPickSelector" id={{item.name}} defaultColor={{item.color}}></div>
<!--svg height="20" width="20"> <!--svg height="20" width="20">
<circle cx="10" cy="10" r="10" stroke="black" stroke-width="0" fill={{ item.color }} /> <circle cx="10" cy="10" r="10" stroke="black" stroke-width="0" fill={{ item.color }} />
</svg--> </svg-->
@ -36,6 +36,8 @@
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
$(".colorPickSelector").colorPick({ $(".colorPickSelector").colorPick({
'initialColor': '#3498db', 'initialColor': '#3498db',
'allowRecent': true, 'allowRecent': true,
@ -46,12 +48,22 @@
// Todo getting the element id is currently done over [0] [#02] // Todo getting the element id is currently done over [0] [#02]
this.element.css({'backgroundColor': this.color, 'color': this.color}); 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); post("color", this.element[0].id, this.color);
} }
}); });
($(".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) { function post(type, id, data) {
var url = "https://192.168.68.103.xip.io:1234/calendar"; var url = "https://192.168.68.103.xip.io:1234/calendar";
var method = "POST"; var method = "POST";