Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adding buttons to toggle between views on "Configure Sensors" #142

Merged
merged 2 commits into from Mar 16, 2020
Merged

Adding buttons to toggle between views on "Configure Sensors" #142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a75e28e
Added buttons to click between "add new sensors" view and "how existi…
Mar 16, 2020
439bfcf
Updating minor formatting issue as required by Black Python formatter
Mar 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
26 changes: 26 additions & 0 deletions mercury/static/mercury/js/sensor.js
View file
Open in desktop
Expand Up @@ -47,3 +47,29 @@ var add_field_button = document.getElementById("addfieldbutton");
add_field_button.onclick = function() {
addRow();
}

function displayCurrentSensors() {
var newSensorDiv = document.getElementById("add-new-sensor");
var existingSensorDiv = document.getElementById("existing-sensors");
var modifyButton = document.getElementById("current-sensor-btn");
var newButton = document.getElementById("add-sensor-btn");
if (existingSensorDiv.style.display === "none") {
newSensorDiv.style.display = "none";
existingSensorDiv.style.display = 'block';
modifyButton.style.backgroundColor = 'var(--green)';
newButton.style.backgroundColor = 'var(--light-accent)';
}
}

function displayAddNewSensor() {
var newSensorDiv = document.getElementById("add-new-sensor");
var existingSensorDiv = document.getElementById("existing-sensors");
var modifyButton = document.getElementById("current-sensor-btn");
var newButton = document.getElementById("add-sensor-btn");
if (newSensorDiv.style.display === "none") {
newSensorDiv.style.display = "block";
existingSensorDiv.style.display = 'none';
modifyButton.style.backgroundColor = 'var(--light-accent)';
newButton.style.backgroundColor = 'var(--green)';
}
}
6 changes: 6 additions & 0 deletions mercury/static/mercury/style.css
View file
Open in desktop
Expand Up @@ -11,6 +11,12 @@ body {

tr:nth-child(even) {background-color: #f2f2f2;}

li{
list-style-type: none; /* removes bulleting */
display: inline-block;
margin: 0% 5%;
}

.topbar-container {
margin-left: 14%;
position: fixed;
Expand Down
Binary file added mercury/static/mercury/technical_difficulties.jpg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
287 changes: 143 additions & 144 deletions mercury/templates/sensor.html
View file
Open in desktop
@@ -1,162 +1,161 @@
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Configure Sensors</title>
<link rel="icon" href="{% static 'mercury/motorsports_logo.png' %}">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'mercury/style.css' %}">
<script src="{% static "mercury/js/jquery-3.4.1.js" %}"></script>
<script src="{% static "mercury/js/sensor.js" %}" defer></script>
<script src="{% static "mercury/js/accordian.js" %}"></script>
</head>
<body>
{% include 'sidebar.html' %}
<div id="grafana-base">

<div class="panel">
<h1>
Configure Sensors
<a class="grafana-btn grafana-btn-gray" id= "accordion-btn" onclick="myFunction()">
<i class="material-icons-outlined" id="expand_more" style="display: block">expand_more</i>
<i class="material-icons-outlined" id="expand_less" style="display: none">expand_less</i>
</a>
</h1>
<div id="accordion-text">
This page is used to add new sensors to the database as well as edit currently existing sensors within the database.
<br>
</div>
<br>
</div>
<head>
<meta charset="UTF-8">
<title>Add or Modify Sensors</title>
<link rel="icon" href="{% static 'mercury/motorsports_logo.png' %}">
<link rel="preload" href="{% static 'mercury/technical_difficulties.jpg' %}">
<link rel="stylesheet" type="text/css" href="{% static 'mercury/style.css' %}">
<script src="{% static "mercury/js/sensor.js" %}" defer></script>
</head>

<body>
{% include 'sidebar.html' %}
<div id="grafana-base"> <!-- app default background -->
<div class="panel">
<h1> Add or Modify Sensors </h1>
<p>
This page is used to add new sensors to the database as well as edit currently existing sensors within the database.
</p>
</div>

{% for sensor in sensors %}
<div class="panel">
<h2 contenteditable="true" id="{{ sensor.sensor_name }}">
{{ sensor.sensor_name }}</h2>
<div class="panel">
<nav>
<ul>
<li><button onclick="displayCurrentSensors()" id="current-sensor-btn" class="grafana-btn" style="background-color:var(--green);"> Modify Current Sensors </button></li>
<li><button onclick="displayAddNewSensor()" id="add-sensor-btn" class="grafana-btn"> Add New Sensor </button></li>
</ul>
</nav>
</div>

<h4 class="inline-block-child"><u>Field Name</u></h4>
<h4 class="inline-block-child"><u>Field Type</u></h4>
<h4 class="inline-block-child"><u>Field Unit</u></h4>
<div class="panel" id="existing-sensors">
<h2>Existing sensors</h2>

{% if sensors %}
{% for sensor in sensors %}
<div class="panel">
<h2 contenteditable="true" id="{{ sensor.sensor_name }}">
{{ sensor.sensor_name }}</h2>

<h4 class="inline-block-child"><u>Field Name</u></h4>
<h4 class="inline-block-child"><u>Field Type</u></h4>
<h4 class="inline-block-child"><u>Field Unit</u></h4>

{% for field_name, unit_and_format in sensor.sensor_format.items %}
<div>
<p class="inline-block-child"
contenteditable="true">{{field_name}}</p>
<select class="inline-block-child">
{% if unit_and_format.format == "float" %}
<option selected="true">Float</option>
{% else %}
<option >Float</option>
{% endif %}

{% for field_name, unit_and_format in sensor.sensor_format.items %}
<div>
<p class="inline-block-child"
contenteditable="true">{{field_name}}</p>
<select class="inline-block-child">
{% if unit_and_format.format == "float" %}
<option selected="true">Float</option>
{% else %}
<option >Float</option>
{% endif %}

{% if unit_and_format.format == "string" %}
<option selected="true">String</option>
{% else %}
<option >String</option>
{% endif %}

{% if unit_and_format.format == "boolean" %}
<option selected="true">Boolean</option>
{% else %}
<option >Boolean</option>
{% endif %}
</select>
<p class="inline-block-child"
contenteditable="true">{{unit_and_format.unit}}</p>
{% if unit_and_format.format == "string" %}
<option selected="true">String</option>
{% else %}
<option >String</option>
{% endif %}

{% if unit_and_format.format == "boolean" %}
<option selected="true">Boolean</option>
{% else %}
<option >Boolean</option>
{% endif %}
</select>
<p class="inline-block-child"
contenteditable="true">{{unit_and_format.unit}}</p>
</div>
{% endfor %}
<input class="editbutton simulator-btn grafana-btn grafana-btn-green" type="submit" name="edit_sensor" value="Edit">
</div>
{% endfor %}
<input class="editbutton simulator-btn grafana-btn grafana-btn-green" type="submit" name="edit_sensor" value="Edit">
</div>
{% endfor %}

<div class="panel">
{% else %}
<p style="color:red;"><b> There are no sensors to display </b></p>
<img src="{% static 'mercury/technical_difficulties.jpg' %}">
{% endif%}
</div> <!-- end existing sensors -->

<div class="panel" id="add-new-sensor" style="display:none;">
<h2>Add a New Sensor</h2>
<br>

<form method="POST" action="" id="SensorForm"> <!-- Should there be an action? Does sensorForm imply anything?-->
{% csrf_token %}
<div>
<label for="sensor-name"><b><u>Sensor Name</u></b></label>
<input type="text" id="sensor-name" name="sensor-name"
value="{{ sensor_name }}"/>
</div>

<h2>
Create Sensor
</h2>

<form method="POST" action="" id="SensorForm">
{% csrf_token %}
<br>

<p>
<label for="sensor-name"><b><u>Sensor Name</u></b></label>
<input type="text" id="sensor-name" name="sensor-name"
value="{{ sensor_name }}"/>
</p>

<h4 class="inline-block-child"><u>Field Name</u></h4>
<h4 class="inline-block-child"><u>Field Type</u></h4>
<h4 class="inline-block-child"><u>Field Unit</u></h4>

<div id="field-list">

{% if sensor_format %}

{% for key, value in sensor_format.items %}

<input class="inline-block-child" type="text"
name="field-name" value="{{ key }}"/>
<select class="inline-block-child" name="field-type">
{% if value.format == "Float" %}
<option selected="true">Float</option>
{% else %}
<option >Float</option>
{% endif %}

{% if value.format == "String" %}
<option selected="true">String</option>
{% else %}
<option >String</option>
{% endif %}

{% if value.format == "Boolean" %}
<option selected="true">Boolean</option>
{% else %}
<option >Boolean</option>
{% endif %}
</select>
<input class="inline-block-child" type="text"
name="field-unit" value="{{ value.unit }}"/>
<hr>

{% endfor %}
<h4 class="inline-block-child">Field Name</h4>
<h4 class="inline-block-child">Field Type</h4>
<h4 class="inline-block-child">Field Unit</h4>

{% endif %}
<div id="field-list">

<input class="inline-block-child" type="text" name="field-name"/>
{% if sensor_format %}

{% for key, value in sensor_format.items %}

<input class="inline-block-child" type="text"
name="field-name" value="{{ key }}"/>
<select class="inline-block-child" name="field-type">
<option value="float">Float</option>
<option value="string">String</option>
<option value="bool">Boolean</option>
{% if value.format == "Float" %}
<option selected="true">Float</option>
{% else %}
<option >Float</option>
{% endif %}

{% if value.format == "String" %}
<option selected="true">String</option>
{% else %}
<option >String</option>
{% endif %}

{% if value.format == "Boolean" %}
<option selected="true">Boolean</option>
{% else %}
<option >Boolean</option>
{% endif %}
</select>
<input class="inline-block-child" type="text"
name="field-unit"/>

<hr>

</div>
<br>
<input align=right class="grafana-btn grafana-btn-blue" type="button" name="addfieldbutton" id="addfieldbutton" value="Add field""right">
<br> <br>
<div>
<input class="simulator-btn grafana-btn
grafana-btn-green" type="submit" name="submit"
value="Create sensor">
</div>
<br> <br>
</form>

{% for message in messages %}
<p class="error"> {{ message }} </p>
{% endfor %}
<input class="inline-block-child" type="text"
name="field-unit" value="{{ value.unit }}"/>
<hr>

{% endfor %}

<br>
{% endif %}

<input class="inline-block-child" type="text" name="field-name"/>
<select class="inline-block-child" name="field-type">
<option value="float">Float</option>
<option value="string">String</option>
<option value="bool">Boolean</option>
</select>
<input class="inline-block-child" type="text"
name="field-unit"/>

<hr>

</div>
</div>
</div>
</body>
<br>
<input align=right class="grafana-btn grafana-btn-blue" type="button" name="addfieldbutton" id="addfieldbutton" value="Add field""right">
<br> <br>
<div>
<input class="simulator-btn grafana-btn
grafana-btn-green" type="submit" name="submit"
value="Create sensor">
</div>
<br> <br>
</form>

{% for message in messages %}
<p class="error"> {{ message }} </p>
{% endfor %}
</div> <!-- end add new sensors -->
</div> <!-- end grafana-base -->
</body>
</html>
2 changes: 1 addition & 1 deletion mercury/templates/sidebar.html
View file
Open in desktop
Expand Up @@ -70,7 +70,7 @@
{% if request.path == "/sensor/" %}
<div class="grafana-current-tab sidebar-btn">
<i class="material-icons">tune</i>
<br>Configure Sensors
<br>Add or Modify Sensors
</div>
{% else %}
<a class="grafana-btn grafana-btn-gray sidebar-btn" href="{% url 'mercury:sensor' %}">
Expand Down
8 changes: 3 additions & 5 deletions mercury/views/sensor.py
View file
Open in desktop
Expand Up @@ -25,9 +25,7 @@ class CreateSensorView(TemplateView):
@require_event_code
def get(self, request, *args, **kwargs):
sensors = AGSensor.objects.all()

context = {"sensors": sensors}

return render(request, self.template_name, context)

@require_event_code
Expand Down Expand Up @@ -81,17 +79,17 @@ def post(self, request, *args, **kwargs):
"format": field_types[i],
}

sensors = AGSensor.objects.all()

if form_valid:
sensor = AGSensor.objects.create(
sensor_name=post_sensor_name,
sensor_processing_formula=0,
sensor_format=sensor_format,
)
context = {"sensors": sensors}
sensor.save()
sensors = AGSensor.objects.all()
context = {"sensors": sensors}
else:
sensors = AGSensor.objects.all()
context = {
"sensors": sensors,
"sensor_name": post_sensor_name,
Expand Down