Skip to content

Commit 7d64215

Browse files
Kappuccino111Kappuccino111
committed
Update the graph to the center of the page
Signed-off-by: Akarshan Kapoor <data.akarshan@icloud.com>
1 parent e2683f6 commit 7d64215

File tree

1 file changed

+63
-54
lines changed

1 file changed

+63
-54
lines changed

‎server/django/sensordata/templates/device_dashboard.html

Lines changed: 63 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
{% block content %}
44
<div class="container-fluid">
5-
<div class="row">
6-
<div class="col-sm-12 col-md-6">
5+
<div class="row justify-content-center mb-4">
6+
<div class="col-md-8">
77
<form method="GET">
88
<div class="form-group">
99
<label for="endpoint">Select Endpoint:</label>
@@ -21,8 +21,8 @@
2121
</div>
2222

2323
{% if selected_endpoint %}
24-
<div class="row mt-4">
25-
<div class="col-sm-12">
24+
<div class="row justify-content-center mb-4">
25+
<div class="col-md-8">
2626
<h3>Endpoint Details</h3>
2727
<table class="table table-striped">
2828
<tr>
@@ -77,8 +77,17 @@ <h3>Endpoint Details</h3>
7777
</div>
7878
</div>
7979

80-
<div class="row mt-4">
81-
<div class="col-sm-12 col-md-6">
80+
<div class="row justify-content-center mb-4">
81+
<div class="col-md-10">
82+
<h3 id="chartTitle" class="text-center">Chart</h3>
83+
<div style="height: 500px;">
84+
<canvas id="resourceChart"></canvas>
85+
</div>
86+
</div>
87+
</div>
88+
89+
<div class="row justify-content-center mb-4">
90+
<div class="col-md-4">
8291
<div class="form-group">
8392
<label for="resource_type">Select Resource for Visualization:</label>
8493
<select class="form-control" id="resource_type" name="resource_type">
@@ -91,48 +100,48 @@ <h3>Endpoint Details</h3>
91100
</select>
92101
</div>
93102
</div>
94-
</div>
95-
96-
<div class="row mt-4">
97-
<div class="col-sm-12 col-md-6">
103+
<div class="col-md-4">
98104
<div class="form-group">
99105
<label for="event_type">Select Event for Visualization:</label>
100106
<select class="form-control" id="event_type" name="event_type">
101107
<option value="">-- Select an Event --</option>
102108
{% for event_type in event_types %}
103-
<option value="{{ event_type }}"> {{ event_type }} </option>
109+
<option value="{{ event_type }}"> {{ event_type }} </option>
104110
{% endfor %}
105111
</select>
106112
</div>
107113
</div>
108114
</div>
109115

110-
<div class="row mt-4">
111-
<div class="col-sm-12 col-md-6">
112-
<div class="form-group">
113-
<label for="lower_limit">Lower Reference Limit:</label>
114-
<input type="number" class="form-control" id="lower_limit" placeholder="Enter lower reference limit">
115-
</div>
116-
<div class="form-group mt-2">
117-
<label for="upper_limit">Upper Reference Limit:</label>
118-
<input type="number" class="form-control" id="upper_limit" placeholder="Enter upper reference limit">
119-
</div>
120-
<div class="form-group mt-2">
121-
<label for="max_y_value">Max Y-Axis Value:</label>
122-
<input type="number" class="form-control" id="max_y_value" placeholder="Enter max y-axis value">
123-
</div>
124-
<div class="mt-3">
125-
<button id="applySettings" class="btn btn-primary">Apply Settings</button>
126-
<button id="downloadCsv" class="btn btn-primary ml-2">Download CSV</button>
116+
<div class="row justify-content-center mb-4">
117+
<div class="col-md-8">
118+
<div class="row">
119+
<div class="col-md-4">
120+
<div class="form-group">
121+
<label for="lower_limit">Lower Reference Limit:</label>
122+
<input type="number" class="form-control" id="lower_limit"
123+
placeholder="Enter lower reference limit">
124+
</div>
125+
</div>
126+
<div class="col-md-4">
127+
<div class="form-group">
128+
<label for="upper_limit">Upper Reference Limit:</label>
129+
<input type="number" class="form-control" id="upper_limit"
130+
placeholder="Enter upper reference limit">
131+
</div>
132+
</div>
133+
<div class="col-md-4">
134+
<div class="form-group">
135+
<label for="max_y_value">Max Y-Axis Value:</label>
136+
<input type="number" class="form-control" id="max_y_value" placeholder="Enter max y-axis value">
137+
</div>
138+
</div>
127139
</div>
128-
</div>
129-
</div>
130-
131-
<div class="row mt-4">
132-
<div class="col-sm-12">
133-
<h3 id="chartTitle">Chart</h3>
134-
<div style="height: 400px; width: 100%;">
135-
<canvas id="resourceChart"></canvas>
140+
<div class="row mt-3">
141+
<div class="col-md-12 text-center">
142+
<button id="applySettings" class="btn btn-primary">Apply Settings</button>
143+
<button id="downloadCsv" class="btn btn-primary ml-2">Download CSV</button>
144+
</div>
136145
</div>
137146
</div>
138147
</div>
@@ -287,7 +296,7 @@ <h3 id="chartTitle">Chart</h3>
287296
var eventType = eventTypeElement ? eventTypeElement.value : '';
288297

289298
if (endpoint && resourceType) {
290-
fetch(`?endpoint=${endpoint}&resource_type=${resourceType}&event_type=${eventType}`, {
299+
fetch(`?endpoint=${endpoint}&resource_type=${resourceType}&event_type=${eventType}`, {
291300
headers: {
292301
'X-Requested-With': 'XMLHttpRequest'
293302
}
@@ -333,32 +342,32 @@ <h3 id="chartTitle">Chart</h3>
333342
});
334343

335344
document.addEventListener('DOMContentLoaded', function () {
336-
var downloadButton = document.getElementById('downloadCsv');
345+
var downloadButton = document.getElementById('downloadCsv');
337346

338-
downloadButton.addEventListener('click', function () {
339-
var endpoint = '{{ selected_endpoint.endpoint }}';
340-
var resourceType = document.getElementById('resource_type').value;
341-
var eventType = document.getElementById('event_type').value;
347+
downloadButton.addEventListener('click', function () {
348+
var endpoint = '{{ selected_endpoint.endpoint }}';
349+
var resourceType = document.getElementById('resource_type').value;
350+
var eventType = document.getElementById('event_type').value;
342351

343-
var url = `/download_csv/?endpoint=${endpoint}`;
344-
if (resourceType) {
345-
url += `&resource_type=${resourceType}`;
346-
}
347-
if (eventType) {
348-
url += `&event_type=${eventType}`;
349-
}
352+
var url = `/download_csv/?endpoint=${endpoint}`;
353+
if (resourceType) {
354+
url += `&resource_type=${resourceType}`;
355+
}
356+
if (eventType) {
357+
url += `&event_type=${eventType}`;
358+
}
350359

351-
window.location.href = url;
352-
});
360+
window.location.href = url;
353361
});
362+
});
354363
</script>
355364

356365
{% else %}
357-
<div class="row mt-4">
358-
<div class="col-sm-12">
366+
<div class="row justify-content-center mt-4">
367+
<div class="col-md-8 text-center">
359368
<p>Please select an endpoint to view its details and graphs.</p>
360369
</div>
361370
</div>
362371
{% endif %}
363372
</div>
364-
{% endblock %}
373+
{% endblock %}

0 commit comments

Comments
 (0)