Added HTML switch element

Former-commit-id: 426557a47577fd9b5b2002ed02d70f1effb92162

pandora_console/include/functions.php

@@ -3516,4 +3516,15 @@ function mask2cidr($mask){
 	return 32-log(($long ^ $base)+1,2);
 }
 
+/**
+ * Convert the checkbox result to 1 or 0
+ *
+ * @param string $value Param returned by swith fomulary.
+ *
+ * @return int 1 if value is "on". 0 otherwise.
+ */
+function switch_to_int(string $value) {
+	return $value === "on" ? 1 : 0;
+}
+
 ?>

pandora_console/include/functions_html.php

@@ -2580,4 +2580,23 @@ function html_print_csrf_error () {
 	);
 	return true;
 }
+
+/**
+ * Print an swith button
+ *
+ * @param array $atributes. Valid params:
+ * 		name: Usefull to handle in forms
+ * 		value: If is checked or not
+ * @return string with HTML of button
+ */
+function html_print_switch ($attributes = array()) {
+
+	$name_html = isset($attributes['name']) ? "name = {$attributes['name']}" : '';
+	$checked_html = (bool)$attributes['value'] ? 'checked' : '';
+	return
+		"<label class='p-switch'>
+			<input type='checkbox' $name_html $checked_html>
+			<span class='p-slider'></span>
+		</label>";
+}
 ?>

pandora_console/include/styles/pandora.css

@@ -5175,3 +5175,59 @@ input[type="submit"].ui-button-dialog {
   width: 90px !important;
 }
 /* --- END - JQUERY-UI --- */
+
+/* --- SWITCH --- */
+.p-switch {
+  position: relative;
+  display: inline-block;
+  width: 30px;
+  height: 17px;
+}
+
+.p-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.p-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+  border-radius: 34px;
+}
+
+.p-slider:before {
+  position: absolute;
+  content: "";
+  height: 13px;
+  width: 13px;
+  left: 2px;
+  bottom: 2px;
+  background-color: white;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+  border-radius: 50%;
+}
+
+input:checked + .p-slider {
+  background-color: #82b92e;
+}
+
+input:focus + .p-slider {
+  box-shadow: 0 0 1px #82b92e;
+}
+
+input:checked + .p-slider:before {
+  -webkit-transform: translateX(13px);
+  -ms-transform: translateX(13px);
+  transform: translateX(13px);
+}
+
+/* --- END SWITCH --- */