new alert form polished

app/app/static/css/custom.css

@@ -51,3 +51,7 @@
 .glyphicon-graphnav {
 	font-size: 40px;
 }
+
+.notifelem {
+	margin-top: 10px;
+}

app/app/templates/public/alerts.html

@@ -30,11 +30,12 @@
 					{% endfor %}
 				</tbody>
 			</table>
-			<center><a href="/new-alert"><button class="btn btn-primary" type="submit">Create New Alert</button></a></center>
 		</div>
 		{% else %}
 		<center> There are no alarms for given application. </center>
 		{% endif %}
+		<br>
+		<center><a href="/new-alert"><button class="btn btn-primary" type="submit">Create New Alert</button></a></center>
 	</div>
 </div>
 

app/app/templates/public/new-alert.html

@@ -31,13 +31,12 @@
 				<option value="{{ d[1] }}">{{ d[0] }}</option>
 				{% endfor %}
 			</select>
-
-			<br>
-
-			{% if feedback %}
-			<p class="text-danger float-right">{{ feedback }}</p>
-			{% endif %}
 		</form>
+		
+		{% if feedback %}
+		<p class="text-danger float-right">{{ feedback }}</p>
+		{% endif %}
+		
 		<br>
 		<h4> THEN </h4>
 		<h5> Send email to </h5>
@@ -61,12 +60,19 @@
 		} else {
 			if (sel_op == "-") {
 				$("#varname").remove();
+				if (document.getElementById("operation")) {
+					$("#operation").remove();
+				}
+				if (document.getElementById("avalue")) {
+					$("#avalue").remove();
+				}
+
 			}
 		}
 	}
 	function onvar() {
 		if (!document.getElementById("operation")) {
-			$("#alertform").append("<br><select class='form-control' name='operaton' id='operation' onchange='onop()' required><option default>CHANGES</option><option>></option><option>>=</option><option><</option><option><=</option><option>==</option></select>");
+			$("#alertform").append("<select class='form-control notifelem' name='operaton' id='operation' onchange='onop()' required><option default>CHANGES</option><option>></option><option>>=</option><option><</option><option><=</option><option>==</option></select>");
 		} else {
 			var var_sel = document.getElementById("varname");
 			var sel_var = var_sel.options[var_sel.selectedIndex].value;
@@ -76,15 +82,13 @@
 		}
 	}
 	function onop() {
-		if (!document.getElementById("value")) {
-			var op_sel = document.getElementById("operation");
-			var sel_op = op_sel.options[op_sel.selectedIndex].text;
-			if (sel_op != "CHANGES" && !document.getElementById("avalue")) {
-				$("#alertform").append("<br><input type='numeric' class='form-control' name='avalue' id='avalue' placeholder='Value' required>");
-			} else {
-				if (document.getElementById("avalue")) {
-					$("#avalue").remove();
-				}
+		var op_sel = document.getElementById("operation");
+		var sel_op = op_sel.options[op_sel.selectedIndex].text;
+		if (sel_op != "CHANGES" && !document.getElementById("avalue")) {
+			$("#alertform").append("<input type='numeric' class='form-control notifelem' name='avalue' id='avalue' placeholder='Value' required>");
+		} else {
+			if (document.getElementById("avalue")) {
+				$("#avalue").remove();
 			}
 		}
 	}

app/app/views.py

@@ -327,7 +327,7 @@ def dev_vars():
     if 'name' in session:
         last = data.get_last_n(session['appkey'], request.args.get('id'), 1)
         if last[0]:
-            select = '<select class="form-control" id="varname" name="varname" onchange="onvar(event)" required>'
+            select = '<select class="form-control notifelem" id="varname" name="varname" onchange="onvar(event)" required>'
             select += '<option value="-">Select Variable</option>'
             for k in last[1][0][2]:
                 select += '<option>'+k+'</option>'