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 {
padding: 5%;
font-family: Helvetica,sans-serif;
background-color: lightblue;
margin: 0;
}
#container {
#devices {
padding: 5%;
display: flex;
justify-content: center;
}
@ -46,18 +47,6 @@ body {
height: 5em;
}
path {
cursor: pointer;
}
.on {
stroke: red;
}
.off {
stroke: black;
}
@font-face {
font-family: FontAwesome;
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) {
let sub_dev = svg.parentElement;
let sub_dev = get_object_from_svg(svg).parentElement;
let params = {
device_id: sub_dev.parentElement.parentElement.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">
<path fill="none" stroke="red"
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" />
<style>
path, rect {
cursor: pointer;
}
<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"
d="M 43, 75
A 1 1 0 0 1 57,75
L 57,84
L 43,84
Z" />
<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="top.toggle_outlet(this.parentElement)" />
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 438 B

After

Width:  |  Height:  |  Size: 549 B

63
templates/index.html
View File

@ -1,38 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<title>Juice</title>
<link rel="stylesheet" type="text/css" href="/static/juice.css">
<script type="text/javascript" src="/static/juice.js"></script>
</head>
<body>
<div id="container">
{% for dev_type, devices in network.items() %}
{% for device in devices %}
<div class="device {{ dev_type }}" id="{{ device.id }}">
<div class="id">{{ device.id }}</div>
<div class="description"><span class="field_value">{{ device.description }}</span> <span class="edit" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
<div class="location"><span class="field_value">{{ device.location }}</span> <span class="edit" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
<div class="ip_address"><i>{{ device.ip_address }}</i></div>
<div class="sub_devices">
{% for sub_dev_type, sub_devs in device.sub_devices.items() %}
{% for sub_dev in sub_devs %}
<div class="sub_device {{ sub_dev_type }}" id="{{ sub_dev.id }}">
<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">
<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>
<head>
<title>Juice</title>
<link rel="stylesheet" type="text/css" href="/static/juice.css">
<script type="text/javascript" src="/static/juice.js"></script>
</head>
<body>
<main>
<div id="devices">
{% for dev_type, devices in network.items() %}
{% for device in devices %}
<div class="device {{ dev_type }}" id="{{ device.id }}">
<div class="id">{{ device.id }}</div>
<div class="description"><span class="field_value">{{ device.description }}</span> <span class="edit" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
<div class="location"><span class="field_value">{{ device.location }}</span> <span class="edit" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
<div class="ip_address"><i>{{ device.ip_address }}</i></div>
<div class="sub_devices">
{% for sub_dev_type, sub_devs in device.sub_devices.items() %}
{% 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>
<div class="description"><span class="field_value">{{ sub_dev.description }}</span> <span class="edit" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
</div>
{% endfor %}
{% endfor %}
</div>
</div>
{% endfor %}
{% endfor %}
{% endfor %}
{% endfor %}
</div>
</div>
{% endfor %}
{% endfor %}
</div>
</body>
</main>
</body>
</html>