Skip to content

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

styling

parent 267b0eb6
Show whitespace changes
Inline Side-by-side
Showing with 78 additions and 81 deletions
templates/main.html
View file @ b7f3427f
......@@ -6,11 +6,11 @@
</head>
<div class="heading">
<h1>IoT Smart Meter and Lighting Control</h1>
<h1 >IoT Smart Meter and Lighting Control</h1>
</div>
<body>
<div class="containerRows">
<div class="containerRows">
<div class="device_list">
<h3 class="device_list_title">Device Listing and Status</h3>
......@@ -19,21 +19,17 @@
<p>
{{ pins[pin].name }} :
{% if pins[pin].state == true %}
(<a href="/toggle/{{ pin }}">turn off</a>)
(<a href="/remove/{{ pin }}">remove</a>)
(<a href="/toggle/{{pin}}">turn off</a>)
(<a href="/remove/{{pin}}">remove</a>)
{% else %}
(<a href="/toggle/{{ pin }}">turn on</a>)
(<a href="/remove/{{ pin }}">remove</a>)
(<a href="/toggle/{{pin}}">turn on</a>)
(<a href="/remove/{{pin}}">remove</a>)
</p>
{% endif %}
{% endif %}
{% endfor %}
<p><a href="/devices/add_device">Add device</a></p>
<p class="add_device"><a href="/devices/add_device">Add device</a></p>
</div>
<div class="inputs">
{% if display_change_kWh == True %}
<form action="{{ url_for('handle_change_kWh') }}" method="post">
Change cost per kWh: <input type="text" name="kWhprice" required>
......@@ -50,11 +46,12 @@
</form>
</div>
{% endif %}
</div>
<div class="smart_meter">
<div class="smart_meter_info">
{# Implement some way to display "No devices" message if none are in use#}
{# 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>
......@@ -68,22 +65,22 @@
{% endfor %}
</ul>
{# <div class="chart">#}
{# <div class="chart">#}
<h3 class="chart_title">Last weeks usage</h3>
<canvas id="chart" class="chart"></canvas>
<canvas id="chart" class="chart" ></canvas>
<script>
// bar chart data
var barData = {
labels: [
labels : [
{% for item in labels %}
"{{ item }}",
{% endfor %}
],
datasets: [{
datasets : [{
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
data: [
data : [
{% for item in values %}
"{{ item }}",
{% endfor %}
......@@ -102,16 +99,16 @@
scaleStepWidth: Math.ceil(max / steps),
scaleStartValue: 0,
scaleShowVerticalLines: true,
scaleShowGridLines: true,
barShowStroke: true,
scaleShowGridLines : true,
barShowStroke : true,
scaleShowLabels: true
}
);
</script>
{# </div>#}
{# </div>#}
</div>
</div>
</div>
</div>
</body>
</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