iou1name/Juice
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

svgs color correctly on page load

Browse Source
This commit is contained in:
iou1name 2019-06-19 10:15:08 -04:00
parent 33f071accd
commit a95b90002e
3 changed files with 43 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
juice.py
View File

@ -140,7 +140,13 @@ def index():
""" """
The index page. The index page.
""" """
return render_template('index.html', network=network) init_state = {}
for device in network:
device_state = {}
for sub_dev in device.sub_devices:
device_state[sub_dev.id] = sub_dev.state
init_state[device.id] = device_state
return render_template('index.html', network=network,init_state=init_state)
@app_views.route('/toggle') @app_views.route('/toggle')

14
static/juice.js
View File

@ -1,3 +1,17 @@
function load() {
Object.entries(init_state).forEach(([device_id, sub_devs]) => {
let device = document.querySelector('#' + device_id);
Object.entries(sub_devs).forEach(([sub_dev_id, state]) => {
let sub_dev = device.querySelector('#' + sub_dev_id);
let svg = sub_dev.querySelector('object').getSVGDocument().firstElementChild;
if (state) {
svg.classList.remove('off');
svg.classList.add('on');
}
});
});
}
function get_object_from_svg(svg) { function get_object_from_svg(svg) {
var all_objects = document.getElementsByTagName("object"); var all_objects = document.getElementsByTagName("object");
for (var i=0; i < all_objects.length; i++) { for (var i=0; i < all_objects.length; i++) {

22
templates/index.html
View File

@ -4,6 +4,8 @@
<title>Juice</title> <title>Juice</title>
<link rel="stylesheet" type="text/css" href="/static/juice.css"> <link rel="stylesheet" type="text/css" href="/static/juice.css">
<script type="text/javascript" src="/static/juice.js"></script> <script type="text/javascript" src="/static/juice.js"></script>
<script>var init_state = {{ init_state|tojson|safe }};</script>
<script>window.onload = load;</script>
</head> </head>
<body> <body>
<main> <main>
@ -27,5 +29,25 @@
{% endfor %} {% endfor %}
</div> </div>
</main> </main>
<template id="RelayDevice">
<div class="device RelayDevice" id="">
<div class="id"></div>
<div class="description"><span class="field_value"></span> <span class="edit" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
<div class="location"><span class="field_value"></span> <span class="edit" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
<div class="ip_address"><i></i></div>
<div class="sub_devices">
<div class="sub_device RelayOutlet" id="">
<div class="id"></div>
<object class="outlet_image" data="/static/outlet.svg"></object>
<div class="description"><span class="field_value"></span> <span class="edit" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
</div>
<div class="sub_device RelayOutlet" id="">
<div class="id"></div>
<object class="outlet_image" data="/static/outlet.svg"></object>
<div class="description"><span class="field_value"></span> <span class="edit" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
</div>
</div>
</div>
</template>
</body> </body>
</html> </html>