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

changed svg to inline, clicking changes color, remembers state

Browse Source
This commit is contained in:
iou1name 2019-06-06 14:25:14 -04:00
parent cff42fe635
commit fec387cf6c
4 changed files with 39 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
static/juice.css
View File

@ -30,3 +30,15 @@ body {
width: 5em;
height: 5em;
}
path {
cursor: pointer;
}
.on {
stroke: red;
}
.off {
stroke: black;
}

24
static/juice.js
View File

@ -1,5 +1,5 @@
function toggle_outlet(svg) {
let sub_dev = get_object_from_svg(svg).parentElement;
let sub_dev = svg.parentElement;
let params = {
device_id: sub_dev.parentElement.parentElement.id,
sub_dev_id: sub_dev.id
@ -9,22 +9,16 @@ function toggle_outlet(svg) {
.join('&');
fetch(window.location.href + 'toggle?' + query)
.then(function(response) {
if (!response.ok) {
throw new Error('HTTP error, status = ' + response.status);
}
if (!response.ok) { throw new Error('HTTP error, status = ' + response.status); }
return response.json();
})
.then(function(json) {
console.log(json);
if (json[sub_dev.id]) {
svg.classList.remove('off');
svg.classList.add('on');
} else {
svg.classList.remove('on');
svg.classList.add('off');
}
});
}
function get_object_from_svg(svg) {
var all_objects = document.getElementsByTagName("object");
for (var i=0; i < all_objects.length; i++) {
if (svg === all_objects[i].getSVGDocument().firstElementChild) {
return all_objects[i];
}
}
return null;
}

38
static/outlet.svg
View File

@ -1,34 +1,20 @@
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<style>
path { cursor: pointer; }
</style>
<svg class="off" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="red"
d="M 29,30
L 35, 30
L 35, 51
L 29, 51
Z" />
<path fill="none" stroke="red"
d="M 65, 30
L 71, 30
L 71, 51
L 65, 51
Z" />
<path fill="none" stroke="red"
d="M 43, 75
A 1 1 0 0 1 57,75
L 57,84
L 43,84
Z" />
<path fill="white" fill-opacity="0.0" stroke="red"
onclick="top.toggle_outlet(this.parentElement)"
d="M 23,10
L 77,10
A 50 49 0 0 1 77,91
L 23,91
A 50 49 0 0 1 23,10
Z" />
<rect x="29" y="30" width="6" height="21" fill="none" stroke="red" />
<rect x="65" y="30" width="6" height="21" fill="none" stroke="red" />
<path fill="none" stroke="red"
d="M 43, 75
A 1 1 0 0 1 57,75
L 57,84
L 43,84
Z" />
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 576 B

After

Width:  |  Height:  |  Size: 438 B

7
templates/index.html
View File

@ -18,7 +18,12 @@
{% for sub_dev in sub_devs %}
<div class="sub_device {{ sub_dev_type }}" id="{{ sub_dev.id }}">
<div class="id">{{ sub_dev.id }}</div>
<object class="outlet_image" data="/static/outlet.svg"></object>
<svg class="outlet_image {% if sub_dev.state %}on{% else %}off{% endif %}" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect x="29" y="30" width="6" height="21" fill="none" />
<rect x="65" y="30" width="6" height="21" fill="none" />
<path fill="none" d="M 43, 75 A 1 1 0 0 1 57,75 L 57,84 L 43,84 Z" />
<path fill="white" fill-opacity="0.0" d="M 23,10 L 77,10 A 50 49 0 0 1 77,91 L 23,91 A 50 49 0 0 1 23,10 Z" onclick="toggle_outlet(this.parentElement)" />
</svg>
<div class="description">{{ sub_dev.description }}</div>
</div>
{% endfor %}