Added Linting, IPv6

changelog.txt

@@ -1,4 +1,5 @@
-Version 0.2.4 (2017-11-nn)
+Version 0.2.4 (2018-01-02)
+- Added YAML linting @AtoxIO
 - Added IPv6 support @danielperna84
 
 Version 0.2.3 (2017-11-12)

configurator.py

@@ -66,7 +66,7 @@ SO.setLevel(LOGLEVEL)
 SO.setFormatter(logging.Formatter('%(levelname)s:%(asctime)s:%(name)s:%(message)s'))
 LOG.addHandler(SO)
 RELEASEURL = "https://api.github.com/repos/danielperna84/hass-configurator/releases/latest"
-VERSION = "0.2.3"
+VERSION = "0.2.4"
 BASEDIR = "."
 DEV = False
 HTTPD = None

dev.html

@@ -442,6 +442,24 @@
             100% { background-color: #f5f5f5; }
         }
 
+        #lint-status {
+            position: absolute;
+            top: 0.75rem;
+            right: 10px;
+        }
+
+        .cursor-pointer {
+            cursor: pointer;
+        }
+
+        #modal_lint.modal {
+            width: 80%;
+        }
+
+        #modal_lint textarea {
+            resize: none;
+            height: auto;
+        }
     </style>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js" type="text/javascript" charset="utf-8"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ext-modelist.js" type="text/javascript" charset="utf-8"></script>
@@ -1389,6 +1407,14 @@
           <a class=" modal-action modal-close waves-effect btn-flat light-blue-text">OK</a>
         </div>
     </div>
+    <div id="modal_lint" class="modal">
+        <div class="modal-content">
+            <textarea rows="8" readonly></textarea>
+        </div>
+        <div class="modal-footer">
+          <a class="modal-action modal-close waves-effect btn-flat light-blue-text">OK</a>
+        </div>
+    </div>
     <!-- Main Editor Area -->
     <div class="row">
         <div class="col m4 l3 hide-on-small-only">
@@ -1436,6 +1462,7 @@
         <div class="col s12 m8 l9">
           <div class="card input-field col s12 grey lighten-4 hoverable pathtip">
               <input class="currentfile_input" value="" id="currentfile" type="text">
+              <i class="material-icons" id="lint-status" onclick="show_lint_error()"></i>
           </div>
         </div>
         <div class="col s12 m8 l9 z-depth-2" id="editor"></div>
@@ -2209,6 +2236,7 @@
                 editor.session.getUndoManager().markClean();
                 $('.markdirty').each(function(i, o){o.classList.remove('red');});
                 $('.hidesave').css('opacity', 0);
+                check_lint();
             });
         }
     }
@@ -2653,6 +2681,58 @@
         foldstatus = !foldstatus;
     }
 
+</script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.10.0/js-yaml.js" type="text/javascript" charset="utf-8"></script>
+<script type="text/javascript">
+var lint_timeout;
+var lint_status = $('#lint-status'); // speed optimization
+var lint_error = "";
+
+function check_lint()
+{
+    if (document.getElementById('currentfile').value.match(".yaml$")) {
+        try {
+            var text = editor.getValue().replace(/!(include|secret)/g,".$1"); // hack because js-yaml does not like !include/!secret
+            jsyaml.safeLoad(text);
+            lint_status.text("check_circle");
+            lint_status.removeClass("cursor-pointer red-text grey-text");
+            lint_status.addClass("green-text");
+            lint_error = "";
+        } catch (err) {
+            lint_status.text("error");
+            lint_status.removeClass("green-text grey-text");
+            lint_status.addClass("cursor-pointer red-text");
+            lint_error = err.message;
+        }
+    } else {
+        lint_status.empty();
+    }
+}
+
+function queue_lint(e)
+{
+    if (document.getElementById('currentfile').value.match(".yaml$")) {
+        clearTimeout(lint_timeout);
+        lint_timeout = setTimeout(check_lint, 500);
+        if (lint_status.text() != "cached") {
+            lint_status.text("cached");
+            lint_status.removeClass("cursor-pointer red-text green-text");
+            lint_status.addClass("grey-text");
+        }
+    } else {
+        lint_status.empty();
+    }
+}
+
+function show_lint_error()
+{
+    if(lint_error) {
+        $("#modal_lint textarea").val(lint_error);
+        $("#modal_lint").modal('open');
+    }
+}
+
+editor.on('change', queue_lint);
 </script>
 </body>
 </html>