enhance settings handling

snippets/scales.html

@@ -9,11 +9,16 @@
     </header>
     <section class="modal-card-body">
       <!-- Content ... -->
+      <p id="deveui" hidden></p>
       <div class="field">
         <label id="label" class="label">Bezeichnung (1234567812345678)</label>
-        <div class="control">
-          <input id="alias" class="input" type="text">
+        <div class="control has-icons-right">
+          <input id="alias" class="input" type="text" maxlength="16">
+          <span id="alias_exclamation" class="icon is-small is-right">
+            <i class="fas fa-exclamation-triangle"></i>
+          </span>
         </div>
+        <p id="alias_errormsg" class="help is-danger"></p>
       </div>
 
       <div class="field">
@@ -27,9 +32,13 @@
 
       <div class="field">
         <label class="label">Alarmnummer (SMS)</label>
-        <div class="control">
-          <input id="smsnumber" class="input" type="text">
+        <div class="control has-icons-right">
+          <input id="smsnumber" class="input" type="text" maxlength="16">
+          <span id="smsnumber_exclamation" class="icon is-small is-right">
+            <i class="fas fa-exclamation-triangle"></i>
+          </span>
         </div>
+        <p id="smsnumber_errormsg" class="help is-danger"></p>
       </div>
     </section>
     <footer class="modal-card-foot">
@@ -98,11 +107,23 @@
 {{end}}
 
 <script>
+function validate(what, text) {
+  if (what == 'alias') {
+    var re = /^[a-zA-Z0-9 ]{1,16}$/;
+  } else if (what == 'smsnumber') {
+    var re = /^\+[0-9]{11,11}$/;
+  }
+  return re.test(text);
+}
+
 // A $( document ).ready() block.
 $( document ).ready(function() {
 $(".show-modal").click(function() {
+  $("#alias_exclamation").hide();
+  $("#smsnumber_exclamation").hide();
   var alias = $(this).prev().html();
   var deveui = $(this).prev().attr('id').replace("alias_","");
+  $('#deveui').html(deveui);
   var alarmactive = $('#alarmactive_'+deveui).html();
   var smsnumber = $('#smsnumber_'+deveui).html();
   
@@ -125,8 +146,64 @@ $("#modal-close").click(function() {
 });
 
 $("#modal-save").click(function() {
-   console.log("save");
-   $("#modal").removeClass("is-active");
+  var alarmactive = "0";
+  if ($('#checkbox').prop('checked')) {
+    alarmactive = "1";
+  }
+
+  // Validation Code
+  if (!validate('alias',$('#alias').val())) {
+     $('#alias_errormsg').html('Ung&uuml;ltige Bezeichnung; erlaubte Zeichen A-Z, 0-9 und Leerschlag');
+     $("#alias").addClass("is-danger");  
+     $("#alias_exclamation").show();
+     return;
+  } else {
+     $('#alias_errormsg').html('');
+     $("#alias").removeClass("is-danger");  
+     $("#alias_exclamation").hide();
+  }
+
+  if (!validate('smsnumber',$('#smsnumber').val())) {
+     $('#smsnumber_errormsg').html('Beispiel einer g&uuml;ltigen SMS Nummer: +41761234567');
+     $("#smsnumber").addClass("is-danger");  
+     $("#smsnumber_exclamation").show();
+     return;
+  } else {
+     $('#smsnumber_errormsg').html('');
+     $("#smsnumber").removeClass("is-danger");  
+     $("#smsnumber_exclamation").hide();
+  }
+
+  $.ajax({
+    url: "save_scale_settings",
+    type: "get", //send it through get method
+    dataType: "json",
+    data: { 
+      deveui: $('#deveui').html(), 
+      alias: $('#alias').val(),
+      smsnumber: $("#smsnumber").val(), 
+      alarmactive: alarmactive
+    },
+    success: function(response) {
+      console.log('save success');
+      if (response.rc == 0) {
+         $('#alias_'+$('#deveui').html()).html($('#alias').val());
+         var alarmactive = "0";
+         if ($('#checkbox').prop('checked')) {
+           alarmactive = "1";
+         }
+         $('#alarmactive_'+$('#deveui').html()).html(alarmactive);
+         $('#smsnumber_'+$('#deveui').html()).html($('#smsnumber').val());
+      }
+    },
+    error: function(xhr) {
+      console.log('save error');
+      //Do Something to handle error
+    }
+  });
+
+  console.log("save");
+  $("#modal").removeClass("is-active");
 });
 
 });