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

moved svg back to external reference

Browse Source
This commit is contained in:
iou1name 2019-06-18 12:49:01 -04:00
parent 77727249a5
commit c70e57c69d
4 changed files with 59 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
static/juice.css
View File

@ -1,10 +1,11 @@
body { body {
padding: 5%;
font-family: Helvetica,sans-serif; font-family: Helvetica,sans-serif;
background-color: lightblue; background-color: lightblue;
margin: 0;
} }
#container { #devices {
padding: 5%;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
@ -46,18 +47,6 @@ body {
height: 5em; height: 5em;
} }
path {
cursor: pointer;
}
.on {
stroke: red;
}
.off {
stroke: black;
}
@font-face { @font-face {
font-family: FontAwesome; font-family: FontAwesome;
src: url("/static/fontawesome-webfont.woff2"); src: url("/static/fontawesome-webfont.woff2");

12
static/juice.js
View File

@ -1,5 +1,15 @@
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;
}
function toggle_outlet(svg) { function toggle_outlet(svg) {
let sub_dev = svg.parentElement; let sub_dev = get_object_from_svg(svg).parentElement;
let params = { let params = {
device_id: sub_dev.parentElement.parentElement.id, device_id: sub_dev.parentElement.parentElement.id,
sub_dev_id: sub_dev.id sub_dev_id: sub_dev.id

30
static/outlet.svg
View File

@ -1,20 +1,20 @@
<svg class="off" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <svg class="off" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="red" <style>
d="M 23,10 path, rect {
L 77,10 cursor: pointer;
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" /> .on {
stroke: red;
}
<rect x="65" y="30" width="6" height="21" fill="none" stroke="red" /> .off {
stroke: black;
}
</style>
<path fill="none" stroke="red" <rect x="29" y="30" width="6" height="21" fill="none" />
d="M 43, 75 <rect x="65" y="30" width="6" height="21" fill="none" />
A 1 1 0 0 1 57,75 <path fill="none" d="M 43, 75 A 1 1 0 0 1 57,75 L 57,84 L 43,84 Z" />
L 57,84 <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="top.toggle_outlet(this.parentElement)" />
L 43,84
Z" />
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 438 B

After

Width:  |  Height:  |  Size: 549 B

11
templates/index.html
View File

@ -6,7 +6,8 @@
<script type="text/javascript" src="/static/juice.js"></script> <script type="text/javascript" src="/static/juice.js"></script>
</head> </head>
<body> <body>
<div id="container"> <main>
<div id="devices">
{% for dev_type, devices in network.items() %} {% for dev_type, devices in network.items() %}
{% for device in devices %} {% for device in devices %}
<div class="device {{ dev_type }}" id="{{ device.id }}"> <div class="device {{ dev_type }}" id="{{ device.id }}">
@ -19,12 +20,7 @@
{% for sub_dev in sub_devs %} {% for sub_dev in sub_devs %}
<div class="sub_device {{ sub_dev_type }}" id="{{ sub_dev.id }}"> <div class="sub_device {{ sub_dev_type }}" id="{{ sub_dev.id }}">
<div class="id">{{ sub_dev.id }}</div> <div class="id">{{ sub_dev.id }}</div>
<svg class="outlet_image {% if sub_dev.state %}on{% else %}off{% endif %}" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <object class="outlet_image" data="/static/outlet.svg"></object>
<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"><span class="field_value">{{ sub_dev.description }}</span> <span class="edit" onclick="edit_field(this.parentElement)">&#xe800;</span></div> <div class="description"><span class="field_value">{{ sub_dev.description }}</span> <span class="edit" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
</div> </div>
{% endfor %} {% endfor %}
@ -34,5 +30,6 @@
{% endfor %} {% endfor %}
{% endfor %} {% endfor %}
</div> </div>
</main>
</body> </body>
</html> </html>