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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app.py
View File

@ -87,15 +87,10 @@ def get_google_provider_cfg():
return requests.get(GOOGLE_DISCOVERY_URL).json()
class Calendar:
def __init__(self, name, toggle=0, color="#000000"):
def __init__(self, name, toggle='False', color="#000000"):
self.name = name
self.color = color
if toggle == 0:
self.toggle = False
else:
self.toggle = True
self.toggle=toggle
def calendarsFromDb():
calendars = dbCalendar.getCalendars(current_user.id)
pyCalendars = []
@ -260,15 +255,14 @@ def downloader(user):
@login_required
def user():
if request.method == 'POST':
calId = request.json.get('calendar_id')
calName = request.json.get('calendar_id')
color = request.json.get('color')
toggle = request.json.get('toggle')
print(calId)
if color != None:
print(color)
dbCalendar.updateCalendar(current_user.id, calName, color=color)
if toggle != None:
print(toggle)
dbCalendar.updateCalendar(current_user.id, calName, toggle=toggle)
# toggle specific calendar of user
elif request.method == 'DELETE':
# do nothing

2
database/schema.sql
View File

@ -9,6 +9,6 @@ CREATE TABLE calendar (
usr_id TEXT NOT NULL,
calendar_id TEXT PRIMARY KEY,
name TEXT NOT NULL,
toggle INT NOT NULL,
toggle TEXT,
color TEXT
);

24
database/user.py
View File

@ -56,13 +56,33 @@ class dbCalendar():
def getCalendar(user_id, calendar_id):
db = get_db()
calendar = db.execute(
"SELECT * FROM calendar WHERE usr_id = ? AND calendar_id = ?", (user_id, calendar_id,)
"SELECT * FROM calendar WHERE usr_id = ? AND calendar_id = ?", (user_id, calendar_id)
).fetchone()
if not calendar:
return None
return calendar
@staticmethod
def create(user_id, calendar_id, name, color, toggle = False):
def updateCalendar(user_id, calendar_name, toggle=None, color=None):
db = get_db()
print("updating")
if(toggle != None):
print(toggle)
db.execute(
"UPDATE calendar SET toggle = ? WHERE usr_id = ? AND name = ?", (toggle, user_id, calendar_name)
)
db.commit()
if(color != None):
db.execute(
"UPDATE calendar SET color = ? WHERE usr_id = ? AND name = ?", (color, user_id, calendar_name)
)
db.commit()
@staticmethod
def create(user_id, calendar_id, name, color, toggle = 'True'):
db = get_db()
db.execute(
"INSERT INTO calendar (usr_id, calendar_id, name, toggle, color) "

53
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>
@ -38,6 +38,10 @@
<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 %}