Skip to content

I
IoTSmartMeter
Commit b7f3427f authored by Kristian Tan's avatar Kristian Tan
Browse files
Options

styling

parent 267b0eb6
Hide whitespace changes
Inline Side-by-side
Showing with 78 additions and 81 deletions
templates/main.html
View file @ b7f3427f
<!DOCTYPE html> <!DOCTYPE html>
<head> <head>
<title>Current Status</title> <title>Current Status</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'></script>
</head> </head>
<div class="heading"> <div class="heading">
<h1>IoT Smart Meter and Lighting Control</h1> <h1 >IoT Smart Meter and Lighting Control</h1>
</div> </div>
<body> <body>
<div class="containerRows"> <div class="containerRows">
<div class="device_list"> <div class="device_list">
<h3 class="device_list_title">Device Listing and Status</h3> <h3 class="device_list_title">Device Listing and Status</h3>
{% for pin in pins %} {% for pin in pins %}
{% if pins[pin].name != None %} {% if pins[pin].name != None %}
<p> <p>
{{ pins[pin].name }} : {{ pins[pin].name }} :
{% if pins[pin].state == true %} {% if pins[pin].state == true %}
(<a href="/toggle/{{ pin }}">turn off</a>) (<a href="/toggle/{{pin}}">turn off</a>)
(<a href="/remove/{{ pin }}">remove</a>) (<a href="/remove/{{pin}}">remove</a>)
{% else %} {% else %}
(<a href="/toggle/{{ pin }}">turn on</a>) (<a href="/toggle/{{pin}}">turn on</a>)
(<a href="/remove/{{ pin }}">remove</a>) (<a href="/remove/{{pin}}">remove</a>)
</p> </p>
{% endif %} {% endif %}
{% endif %} {% endif %}
{% endfor %} {% endfor %}
<p><a href="/devices/add_device">Add device</a></p>
<p class="add_device"><a href="/devices/add_device">Add device</a></p> {% if display_change_kWh == True %}
</div>
<div class="inputs">
{% if display_change_kWh == True %}
<form action="{{ url_for('handle_change_kWh') }}" method="post"> <form action="{{ url_for('handle_change_kWh') }}" method="post">
Change cost per kWh: <input type="text" name="kWhprice" required> Change cost per kWh: <input type="text" name="kWhprice" required>
<input type="submit"> <input type="submit">
...@@ -43,75 +39,76 @@ ...@@ -43,75 +39,76 @@
{% if display_new_device_form == True %} {% if display_new_device_form == True %}
<div class=".add_new_device_form"> <div class=".add_new_device_form">
<form action="{{ url_for('handle_new_device') }}" method="post"> <form action="{{ url_for('handle_new_device') }}" method="post">
New device name: <input type="text" name="new_device_name" required> <br> New device name: <input type="text" name="new_device_name" required> <br>
New device wattage: <input type="number" name="new_device_wattage" required> <br> New device wattage: <input type="number" name="new_device_wattage" required> <br>
<input type="submit"> <input type="submit">
</form> </form>
</div> </div>
{% endif %} {% endif %}
</div>
<div class="smart_meter"> </div>
<div class="smart_meter_info">
{# Implement some way to display "No devices" message if none are in use#}
<p> Cost per kWh: £{{ cost_per_kWh }} <a href="/update_info/kWh"> (Update)</a></p>
<p> Total energy used today: {{ daily_total }} kWh.</p>
<p> Total cost of today's energy usage: £{{ todays_cost }}</p>
<p> Devices currently in use: </p> <div class="smart_meter">
<ul> <div class="smart_meter_info">
{% for pin in pins %} {# Implement some way to display "No devices" message if none are in use#}
<p> Cost per kWh: £{{ cost_per_kWh }} <a href="/update_info/kWh"> (Update)</a></p>
<p> Total energy used today: {{ daily_total }} kWh.</p>
<p> Total cost of today's energy usage: £{{ todays_cost }}</p>
<p> Devices currently in use: </p>
<ul>
{% for pin in pins %}
{% if pins[pin].state == true %} {% if pins[pin].state == true %}
<li>{{ pins[pin].name }}</li> <li>{{ pins[pin].name }}</li>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</ul> </ul>
{# <div class="chart">#} {# <div class="chart">#}
<h3 class="chart_title">Last weeks usage</h3> <h3 class="chart_title">Last weeks usage</h3>
<canvas id="chart" class="chart"></canvas> <canvas id="chart" class="chart" ></canvas>
<script> <script>
// bar chart data // bar chart data
var barData = { var barData = {
labels: [ labels : [
{% for item in labels %} {% for item in labels %}
"{{ item }}", "{{ item }}",
{% endfor %} {% endfor %}
], ],
datasets: [{ datasets : [{
fillColor: "rgba(151,187,205,0.2)", fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)", strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)", pointColor: "rgba(151,187,205,1)",
data: [ data : [
{% for item in values %} {% for item in values %}
"{{ item }}", "{{ item }}",
{% endfor %} {% endfor %}
] ]
} }
] ]
} }
// get bar chart canvas // get bar chart canvas
var mychart = document.getElementById("chart").getContext("2d"); var mychart = document.getElementById("chart").getContext("2d");
steps = 1 steps = 1
max = {{ max }} max = {{ max }}
// draw bar chart // draw bar chart
new Chart(mychart).Bar(barData, { new Chart(mychart).Bar(barData, {
scaleOverride: true, scaleOverride: true,
scaleSteps: steps, scaleSteps: steps,
scaleStepWidth: Math.ceil(max / steps), scaleStepWidth: Math.ceil(max / steps),
scaleStartValue: 0, scaleStartValue: 0,
scaleShowVerticalLines: true, scaleShowVerticalLines: true,
scaleShowGridLines: true, scaleShowGridLines : true,
barShowStroke: true, barShowStroke : true,
scaleShowLabels: true scaleShowLabels: true
} }
); );
</script> </script>
{# </div>#} {# </div>#}
</div>
</div> </div>
</div> </div>
</div>
</body> </body>
</html> </html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment