Skip to content

Commit b635a59

Browse files
dmytrotskodmytrotsko
authored
Merge pull request #31 from cmu-delphi/build_chart_for_selected_signals
Added 'shopping cart' like feature
2 parents 3f084bc + 73c1893 commit b635a59

File tree

6 files changed

+263
-14
lines changed

6 files changed

+263
-14
lines changed

‎src/assets/css/style.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1367,4 +1367,14 @@ h6 {
13671367

13681368
.tableformat td:nth-child(1){
13691369
width: 10rem;
1370+
}
1371+
1372+
1373+
.float{
1374+
position:fixed;
1375+
width:150px;
1376+
height:60px;
1377+
bottom:40px;
1378+
right:40px;
1379+
text-align:center;
13701380
}

‎src/assets/js/select_signals.js‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
// Function to update the modal content
2+
function updateSelectedSignalsModal() {
3+
var selectedSignals = localStorage.getItem('selectedSignals');
4+
var signals = selectedSignals ? JSON.parse(selectedSignals) : {};
5+
6+
var selectedSignalsList = document.getElementById('selectedSignalsList');
7+
selectedSignalsList.innerHTML = ''; // Clear existing items
8+
9+
10+
for (const signal in signals) {
11+
let data = JSON.parse(localStorage.getItem("selectedSignals"))[signal];
12+
console.log(data);
13+
var tr = document.createElement('tr');
14+
var memberName = document.createElement('td');
15+
memberName.textContent = data['info']['memberName'];
16+
tr.appendChild(memberName);
17+
var memberDescription = document.createElement('td');
18+
memberDescription.textContent = data['info']['memberDescription'];
19+
tr.appendChild(memberDescription);
20+
var dataSource = document.createElement('td');
21+
dataSource.textContent = data['epivis']['params']['data_source'];
22+
tr.appendChild(dataSource);
23+
var signalName = document.createElement('td');
24+
signalName.textContent = data['epivis']['params']['signal'];
25+
tr.appendChild(signalName);
26+
var timeType = document.createElement('td');
27+
timeType.textContent = data['epivis']['params']['time_type'];
28+
tr.appendChild(timeType);
29+
var geoType = document.createElement('td');
30+
geoType.textContent = data['epivis']['params']['geo_type'];
31+
tr.appendChild(geoType);
32+
var geoValue = document.createElement('td');
33+
geoValue.textContent = data['epivis']['params']['geo_value'];
34+
tr.appendChild(geoValue);
35+
selectedSignalsList.appendChild(tr);
36+
}
37+
}
38+
39+
function addSelectedSignals(dataSource, timeType, signalSetEndpoint) {
40+
let selectedSignals = localStorage.getItem("selectedSignals");
41+
selectedSignals = selectedSignals ? JSON.parse(selectedSignals) : {};
42+
var dataSignals = Array.from(document.getElementsByName('selectedSignal'), (signal) => (signal.checked) ? signal : null).filter((el) => el !== null);
43+
var geographicType = document.getElementById('geographic_type').value;
44+
// geographicValue is a comma separated string of geographic values. type can be string or integer
45+
// in case of string, it should be converted to lowercase
46+
// else it will be treated as integer
47+
var geographicValue = $('#geographic_value').select2('data').map((el) => (typeof el.id === 'string') ? el.id.toLowerCase() : el.id).join(',');
48+
49+
if (geographicType === 'Choose...' || geographicValue === '') {
50+
showWarningAlert("Geographic Type or Geographic Value is not selected.");
51+
return;
52+
}
53+
54+
var geographicValues = geographicValue.split(',');
55+
dataSignals.forEach((signal) => {
56+
geographicValues.forEach((geographicValue) => {
57+
selectedSignals[`${signal.value}_${geographicValue}`] = {
58+
info: {
59+
memberName: signal.getAttribute('data-member-name'),
60+
memberDescription: signal.getAttribute('data-member-description'),
61+
},
62+
epivis: {
63+
color: '#' + (Math.random() * 0xFFFFFF << 0).toString(16).padStart(6, '0'),
64+
title: "value",
65+
params: {
66+
_endpoint: signalSetEndpoint,
67+
data_source: dataSource,
68+
signal: signal.value,
69+
time_type: timeType,
70+
geo_type: geographicType,
71+
geo_value: geographicValue
72+
}
73+
}
74+
};
75+
});
76+
});
77+
localStorage.setItem("selectedSignals", JSON.stringify(selectedSignals));
78+
updateSelectedSignalsModal();
79+
$("#showSelectedSignalsButton").show();
80+
}
81+
82+
function plotData(epivisUrl) {
83+
var dataSets = [];
84+
for (const signal in JSON.parse(localStorage.getItem("selectedSignals"))) {
85+
dataSets.push(JSON.parse(localStorage.getItem("selectedSignals"))[signal]['epivis']);
86+
}
87+
var urlParamsEncoded = btoa(`{"datasets":${JSON.stringify(dataSets)}}`);
88+
89+
var linkToEpivis = `${epivisUrl}#${urlParamsEncoded}`
90+
window.open(linkToEpivis, '_blank').focus();
91+
}
92+
93+
document.addEventListener('DOMContentLoaded', function() {
94+
// Call the function to update the modal content when the page loads
95+
updateSelectedSignalsModal();
96+
97+
});
98+
99+
100+
101+
//for (const signal in JSON.parse(localStorage.getItem("selectedSignals"))) {console.log(JSON.parse(localStorage.getItem("selectedSignals"))[signal])}

‎src/signal_sets/views.py‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ def get_context_data(self, **kwargs: Any) -> dict[str, Any]:
6262
url_params_dict, url_params_str = self.get_url_params()
6363
context["url_params_dict"] = url_params_dict
6464
context["url_params_str"] = url_params_str
65+
context['epivis_url'] = settings.EPIVIS_URL
6566
context["form"] = SignalSetFilterForm(initial=url_params_dict)
6667
context["filter"] = SignalSetFilter(
6768
self.request.GET, queryset=self.get_queryset()

‎src/staticfiles/css/style.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1367,4 +1367,14 @@ h6 {
13671367

13681368
.tableformat td:nth-child(1){
13691369
width: 10rem;
1370+
}
1371+
1372+
1373+
.float{
1374+
position:fixed;
1375+
width:150px;
1376+
height:60px;
1377+
bottom:40px;
1378+
right:40px;
1379+
text-align:center;
13701380
}

‎src/templates/index.html‎

Lines changed: 77 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
{% load static %} {% load i18n %}
1+
{% load static %}
2+
{% load i18n %}
23

34
<!DOCTYPE html>
45
<html lang="en">
@@ -156,13 +157,53 @@
156157
</div>
157158
</div>
158159

159-
<button
160+
<!--<button
160161
type="button"
161162
class="btn btn-danger btn-floating btn-lg"
162163
id="btn-back-to-top"
163164
>
164165
<i class="fas fa-arrow-up"></i>
165-
</button>
166+
</button> -->
167+
168+
<!-- Button trigger modal -->
169+
<div class="float" id="showSelectedSignalsButton" style="display:none;">
170+
<a type="button" class="btn btn-primary" data-mdb-ripple-init data-mdb-modal-init data-mdb-target="#selectedSignalsModal">
171+
Show selected signals
172+
</a>
173+
</div>
174+
175+
176+
<!-- Modal -->
177+
<div class="modal fade" id="selectedSignalsModal" tabindex="-1" aria-labelledby="selectedSignalsModalLabel" aria-hidden="true">
178+
<div class="modal-dialog modal-xl modal-fullscreen-xl-down">
179+
<div class="modal-content">
180+
<div class="modal-header">
181+
<h5 class="modal-title" id="selectedSignalsModalLabel">Selected signals</h5>
182+
<button type="button" class="btn-close" data-mdb-ripple-init data-mdb-dismiss="modal" aria-label="Close"></button>
183+
</div>
184+
<div class="modal-body">
185+
<table class="table">
186+
<thead>
187+
<tr>
188+
<th scope="col">Signal name</th>
189+
<th scope="col">Signal description</th>
190+
<th scope="col">Data Source</th>
191+
<th scope="col">Signal tech name</th>
192+
<th scope="col">Time Type</th>
193+
<th scope="col">Geo Type</th>
194+
<th scope="col">Geo Value</th>
195+
</tr>
196+
</thead>
197+
<tbody id="selectedSignalsList"></tbody>
198+
</table>
199+
</div>
200+
<div class="modal-footer">
201+
<button type="button" class="btn btn-secondary" id="clearSelectedSignals" data-mdb-ripple-init >Reset selected signals</button>
202+
<button type="button" class="btn btn-primary" id="plotSelectedSignals" data-mdb-ripple-init>Show plot</button>
203+
</div>
204+
</div>
205+
</div>
206+
</div>
166207

167208
<footer class="py-3 my-4">
168209
<ul class="nav justify-content-center border-bottom pb-3 mb-3">
@@ -196,6 +237,38 @@
196237

197238
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
198239

199-
<script src="{% static 'js/back_to_top.js' %}"></script>
240+
<script src="{% static 'js/select_signals.js' %}"></script>
241+
242+
<script>
243+
const epivisUrl = "{{ epivis_url }}";
244+
$(document).ready(function () {
245+
if (localStorage.getItem("selectedSignals")) {
246+
$("#showSelectedSignalsButton").show();
247+
} else {
248+
$("#showSelectedSignalsButton").hide();
249+
}
250+
});
251+
252+
253+
var plotSelectedSignals = document.getElementById('plotSelectedSignals');
254+
plotSelectedSignals.addEventListener('click', function() {
255+
plotData(epivisUrl);
256+
});
257+
258+
document.addEventListener('DOMContentLoaded', function() {
259+
var clearButton = document.getElementById('clearSelectedSignals');
260+
261+
clearButton.addEventListener('click', function() {
262+
localStorage.removeItem('selectedSignals');
263+
selectedSignals = {}; // Replace 'selectedSignals' with the key you want to remove
264+
$("#selectedSignalsList").empty();
265+
$("#showSelectedSignalsButton").hide();
266+
alert('Selected signals have been cleared from localStorage.');
267+
});
268+
});
269+
</script>
270+
271+
272+
<!--<script src="{% static 'js/back_to_top.js' %}"></script> -->
200273
</body>
201274
</html>

0 commit comments

Comments
 (0)