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

adds device page and form for new device

Browse Source 
- form added to push new device id to backend
- device added to db model (needs to be pushed still)
- form return right now just prints
- design for device list created, still needs some updates
This commit is contained in:
Raphael Maenle
2020-05-21 18:33:58 +02:00
parent 46eece9b98
commit 3c6d950bbc
7 changed files with 86 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
server/template/calendar.html
View File

@ -1,20 +1,19 @@
{% 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 class="container">
<div style="width: 15rem; margin: 1rem">Calendar</div>
<div style="width: 10rem; margin: 1rem; padding-right: 5rem">Show on device</div>
<div style="width: 2rem; margin: 1rem">Color</div>
</div>
<div>
{% for item in calendars %}
<div style="height: 30px">
<div class="container">
<!--Name-->
<div style="width: 30%; float: left; font-size: 10px; text-align: left; margin-left: 10%">{{ item.name }}</div>
<div style="width: 15rem; margin: 1rem;">{{ item.name }}</div>
<!--Toggle-->
<div style="width: 30%; float: left">
<div style="width: 10rem; margin: 1rem; padding-right: 5rem">
<!-- Rounded switch -->
<label class="switch">
<input class="toggle" id={{item.calendarId}} type="checkbox" toggled={{item.toggle}} onclick="toggleReaction(this)">
@ -23,7 +22,7 @@
</div>
<!--Color Selector-->
<div style="width: 30%; float: left">
<div style="width: 2rem; margin: 1rem;">
<div class="colorPickSelector" id={{item.calendarId}} defaultColor={{item.color}}></div>
<!--svg height="20" width="20">
<circle cx="10" cy="10" r="10" stroke="black" stroke-width="0" fill={{ item.color }} />
@ -32,8 +31,9 @@
</div>
{% endfor %}
</div>
<div class="container">
<div class="button addcalendar" style="width: auto; margin: 4rem">Add Calendar</div>
</div>
<script type="text/javascript">