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

Updated "Add or Modify Sensors" #148

Closed
wants to merge 3 commits into from
Closed

Updated "Add or Modify Sensors" #148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
364bc7c
1) Updated views/sensor.py to refelct new database schema
Mar 18, 2020
edd9837
Merge branch 'frontend-team' into ray_develop
Mar 19, 2020
ca69ea8
Updated formatting
Mar 19, 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
73 changes: 22 additions & 51 deletions mercury/static/mercury/js/sensor.js
View file
Open in desktop
@@ -1,51 +1,22 @@
function addRow(){
var sensorList, field_name_li, field_type_li, field_name_input, field_type_select,
float_option, string_option, bool_option;

fields = document.getElementById("field-list");
// Make field name input
field_name_input = document.createElement("input");
field_name_input.setAttribute("type","text");
field_name_input.setAttribute("name","field-name");
field_name_input.setAttribute("class","inline-block-child");
fields.appendChild(field_name_input);

//Make field type
field_type_select = document.createElement("select");
field_type_select.setAttribute("name", "field-type");
field_type_select.setAttribute("class", "inline-block-child");

float_option = document.createElement("option");
float_option.setAttribute("value", "float");
float_option.appendChild(document.createTextNode("Float"));
field_type_select.appendChild(float_option);

string_option = document.createElement("option");
string_option.setAttribute("value", "string");
string_option.appendChild(document.createTextNode("String"));
field_type_select.appendChild(string_option);

bool_option = document.createElement("option");
bool_option.setAttribute("value", "bool");
bool_option.appendChild(document.createTextNode("Boolean"));
field_type_select.appendChild(bool_option);

fields.appendChild(field_type_select);

// Make unit input
unit_input = document.createElement("input");
unit_input.setAttribute("type","text");
unit_input.setAttribute("name","field-unit")
unit_input.setAttribute("class", "inline-block-child");
fields.appendChild(unit_input);

var hr = document.createElement('hr');
fields.appendChild(hr);
var table = document.getElementById("new-sensor-table");
var rowCount = table.rows.length;
var colCount = table.rows[0].cells.length;
var newRow = table.insertRow(rowCount);
for(var i=0; i<colCount; i++){
var newCell = newRow.insertCell(i);
/* set new cell to be same as cell in first data (non-header) row */
newCell.innerHTML = table.rows[1].cells[i].innerHTML
}
table.rows[rowCount].cells[0].innerHTML =rowCount
}

var add_field_button = document.getElementById("addfieldbutton");
add_field_button.onclick = function() {
addRow();
function deleteRow() {
var table = document.getElementById("new-sensor-table");
var rowCount = table.rows.length;
if (rowCount > 2){
table.deleteRow(rowCount-1)
}
}

/*
Expand All @@ -54,10 +25,10 @@ selectView displays the correct view of the "Add or Modify Sensors" page
-if a user submits a new sensor which posts and reloads page, then the add new sensor view should remain
*/
function selectView() {
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");
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 (sessionStorage.getItem('viewing') == 'addingNew'){
newSensorDiv.style.display = "block";
existingSensorDiv.style.display = 'none';
Expand All @@ -75,8 +46,8 @@ function selectView() {
}

function displayCurrentSensors() {
sessionStorage.setItem('viewing', 'existing');
selectView()
sessionStorage.setItem('viewing', 'existing');
selectView()
}

function displayAddNewSensor() {
Expand Down
38 changes: 35 additions & 3 deletions mercury/static/mercury/style.css
View file
Open in desktop
Expand Up @@ -11,10 +11,41 @@ body {

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

li{
nav ul{
display:flex;
justify-content: space-around;
}

nav li{
display: inline-block;
list-style-type: none; /* removes bulleting */
}

#sensor-container{
background-color:lightgray;
}

.inline-box{
display: inline-block;
margin: 0% 5%;
}

.inline-box label{
text-align:right;
width: auto;
min-width:150px;
}

.sensor-field-row{
display: inline-block;
vertical-align: middle;
border: 1px solid black;
}

.sensor-field-row-item{
display: inline-block;
vertical-align: middle;
margin: 5px;
min-height: 30px;
}

.topbar-container {
Expand Down Expand Up @@ -407,7 +438,7 @@ input#id_can_msg{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
article, aside, figcaption, figure, footer, header, hgroup, main, section {
display: block;
}

Expand All @@ -424,6 +455,7 @@ input#id_can_msg{
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 0.5rem;
text-align: center;
}

p {
Expand Down
147 changes: 63 additions & 84 deletions mercury/templates/sensor.html
View file
Open in desktop
@@ -1,3 +1,5 @@
<!-- Page styling must be fixed -->

{% load static %}
<!DOCTYPE html>
<html lang="en">
Expand All @@ -13,23 +15,17 @@
<body onload="selectView();">
{% 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>
<h1> Add or Modify Sensors </h1>

<div class="panel">
<nav>
<ul>
<li><button onclick="displayCurrentSensors()" id="current-sensor-btn" class="grafana-btn"> Modify Current Sensors </button></li>
<li><button onclick="displayAddNewSensor()" id="add-sensor-btn" class="grafana-btn"> Add New Sensor </button></li>
</ul>
</nav>
</div>
<nav>
<ul>
<!-- Note that the button tag without type="button" will default into type="submit" and POST / GET in some browsers and contexts (like when used inside form) -->
<li><button onclick="displayCurrentSensors()" type="button" id="current-sensor-btn" class="grafana-btn"> Modify Current Sensors </button></li>
<li><button onclick="displayAddNewSensor()" type= "button" id="add-sensor-btn" class="grafana-btn"> Add New Sensor </button></li>
</ul>
</nav>

<div class="panel" id="existing-sensors">
<div id="existing-sensors">
<h2>Existing sensors</h2>

{% if sensors %}
Expand Down Expand Up @@ -78,83 +74,66 @@ <h4 class="inline-block-child"><u>Field Unit</u></h4>
{% endif%}
</div> <!-- end existing sensors -->

<div class="panel" id="add-new-sensor">
<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>

<h4 class="inline-block-child">Field Name</h4>
<h4 class="inline-block-child">Field Type</h4>
<h4 class="inline-block-child">Field Unit</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 %}

{% 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"/>
<div id="add-new-sensor">
<h2>Configure a New Sensor</h2>
<br>
<form method="POST">
{% csrf_token %}
<div id = "sensor-container"> <!-- single div for configuring entire sensor -->
<div class="inline-box">
<label for="sensor-name"> <b>Sensor Name</b> </label>
<input type="text" id="sensor-name" name="sensor-name" required/>

<label for="sensor-id-num"> <b>Sensor ID Number</b> </label>
<input type="text" id="sensor-id-num" name="sensor-id-num" required/>
</div> <br>

<table id="new-sensor-table">
<thead>
<tr>
<th><b> Field Number </b></th>
<th><b> Field Name </b></th>
<th><b> Field Data Type </b></th>
<th><b> Unit </b> (optional) </th>
</tr>
</thead>

<tbody>
<tr>
<td> 1 </td>

<td> <input type="text" id="field-name" name="field-names" required/> </td>

<td>
<select id="data-type" name="data-types"/>
<option> Numeric </option>
<option> Character </option>
<option> Boolean </option>
</select>
</td>

<td> <input type="text" id="unit" name="units"/> </td>
</tr>
</tbody>
</table> <br>

<div class="inline-box">
<button type="button" onclick="addRow()" class="grafana-btn grafana-btn-gray"> Add Another Sensor Field </button>
<button type="button" onclick="deleteRow()" class="grafana-btn grafana-btn-red"> Delete Last Sensor Field </button> <br><br>
</div>

<hr>
</div> <br> <!-- end new sensor container -->

</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>
<button type="submit" class="grafana-btn grafana-btn-green"> Add New Sensor </button>
</form>
<br>
</div>

{% for message in messages %}
<p class="error"> {{ message }} </p>
{% endfor %}

</div> <!-- end add new sensors -->
</div> <!-- end grafana-base -->
</body>
Expand Down