Update to v1.0.6

Added ability to load urls from a previous saved file. Updated domain check if is valid before running port check.

app/app.js

@@ -3,11 +3,10 @@ const fs = require('fs');
 const path = require('path');
 // for checking if ports are open
 var isPortReachable = require("is-port-reachable");
-
+var isReachable = require("is-reachable")
+
 $(document).ready(function() {
 
-    //$(".status").html(successState);
-
     $("#add_form").submit(function(e) {
         e.preventDefault();
     });
@@ -32,16 +31,15 @@ $(document).ready(function() {
                 //remove row
                 $(this).parents("tr").remove();
             }
-
         });
 
         // Reset the row counts. 
         var i = 0; 
         $("tr").find("td:first").each(function (i) {
-        // For each TR find the first TD and replace it with the row count
-        // We should have a small enough list updating the whole table 
-        // shouldn't be an issue instead of only modifying the ones that are after
-        $(this).html(i + 1);
+            // For each TR find the first TD and replace it with the row count
+            // We should have a small enough list updating the whole table 
+            // shouldn't be an issue instead of only modifying the ones that are after
+            $(this).html(i + 1);
         });
     });
 
@@ -84,12 +82,40 @@ $(document).ready(function() {
         // For each row run the checks
         $('#urltable > tbody  > tr').each(function() {
             // Get hostname and port
-            var hostname = $(this).closest('tr').find('td:eq(2)').text();
+            var domain = $(this).closest('tr').find('td:eq(2)').text();
             var port = $(this).closest('tr').find('td:eq(3)').text();
             //console.log(hostname+":"+port);
 
-            // Start the check
             (async () => {
+                // Check if domain is valid first
+                valid = await isReachable(domain);
+                if(valid == true){
+                    //console.log("It's true!!");
+                    // Start the check for the port
+                    (async () => {
+                        // use the hostname and port from the table. 
+                        var cmd = await isPortReachable(port, {host: domain});
+                        if(cmd == true){
+                            // if port works, send to console
+                            console.log(domain+":"+port+" is open.");
+                            // and set the staus to success
+                            $(this).closest('tr').find('td:eq(4)').html(successState);
+                        }
+                        else{
+                            // if port is not open, send to console
+                            console.log(domain+":"+port+" is closed.");
+                            // and set the status to failed
+                            $(this).closest('tr').find('td:eq(4)').html(failState);
+                        }
+                        //=> true
+                    })();
+                }else{
+                    console.log(domain + " is not reachable")
+                    $(this).closest('tr').find('td:eq(4)').html(failState);
+                }
+            })();
+            // Start the check
+            /* (async () => {
                 // use the hostname and port from the table. 
                 var cmd = await isPortReachable(port, {host: hostname});
                 if(cmd == true){
@@ -105,7 +131,77 @@ $(document).ready(function() {
                     $(this).closest('tr').find('td:eq(4)').html(failState);
                 }
                 //=> true
-            })();
+            })(); */
+        });
+    });
+
+    // Open Load URLs modal
+    $("#load-urls").click(function(e){
+        e.preventDefault();
+        $("#loadurlsModalCenter").modal('toggle');
+    });
+
+    // Create table from JSON
+
+    //implementation
+    //https://stackoverflow.com/questions/12694135/how-to-append-json-array-data-to-html-table-tbody/31810319#31810319
+    function jsonToHtmlTable(jsonObj, selector) {
+        addColumns(jsonObj, selector);
+        addRows(jsonObj, selector);
+    }
+
+    function addColumns(jsonObj, selector) {
+        if (!$.isArray(jsonObj) || jsonObj.length < 1)
+            return;
+        var object = jsonObj[0];
+        var theadHtml = "";
+        for (var property in object) {
+            if (object.hasOwnProperty(property))
+                theadHtml += "<th>" + property + "</th>";
+        }
+        $(selector + ' thead tr').html(theadHtml);
+    }
+
+    function addRows(jsonObj, selector) {
+        var tbody = $(selector + ' tbody');
+        $.each(jsonObj, function (i, d) {
+            var row = '<tr>';
+            $.each(d, function (j, e) {
+                row += '<td>' + e + '</td>';
+            });
+            row += '</tr>';
+            tbody.append(row);
         });
+    }
+
+    $('#loadurls_submit').click(function(){
+        // try to load our urls.json file and update our table. 
+        try {
+            const contents = fs.readFileSync(path.join(__dirname, "urls.json"), 'utf8')
+            var jsonContent = JSON.parse(contents)
+
+            jsonToHtmlTable(jsonContent, '#urltable');
+            // Reset the row counts. 
+            var i = 0; 
+            $("tr").find("td:first").each(function (i) {
+                // For each TR find the first TD and replace it with the row count
+                // We should have a small enough list updating the whole table 
+                // shouldn't be an issue instead of only modifying the ones that are after
+                $(this).html(i + 1);
+            });
+            // Set the html for the select box, edit attributes, and default status
+            $('#urltable > tbody  > tr').each(function() {
+                // Add input box
+                $(this).closest('tr').find('td:eq(1)').html(`<input type="checkbox" name="record"></input>`);
+                // Add Unknown state
+                $(this).closest('tr').find('td:eq(4)').html(unknownState);
+                // set content editable state
+                $(this).closest('tr').find('td:eq(2)').addClass("edit").attr("contentEditable","true");;
+                $(this).closest('tr').find('td:eq(3)').addClass("edit").attr("contentEditable","true");;
+            });
+            //console.log(data)
+          } catch (err) {
+            console.error(err)
+          }
     });
 });

app/dashboard.css

@@ -68,3 +68,17 @@ h1 {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
 }
+
+/* set cursor to default when hovering */
+a.navbar-brand{
+  cursor: default;
+}
+
+/* prevent a tags from click and dragging */
+a{
+  -webkit-user-drag: none;
+  -khtml-user-drag: none;
+  -moz-user-drag: none;
+  -o-user-drag: none;
+  user-drag: none;
+}

app/index.html

@@ -13,23 +13,6 @@
     <header>
     <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
       <a class="navbar-brand" href="#">#</a>
-      <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-      </button>
-
-      <!--div class="collapse navbar-collapse" id="navbarsExampleDefault">
-        <ul class="navbar-nav mr-auto">
-          <li class="nav-item">
-            <a class="nav-link" href="#">Settings</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">Profile</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="help.html">Help</a>
-          </li>
-        </ul>
-      </div-->
     </nav>
   </header>
 
@@ -116,7 +99,7 @@ <h5 class="modal-title" id="invalidinputLabel">Invalid Input</h5>
           The value of the hostname and port cannot be left blank.
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+          <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
         </div>
       </div>
     </div>
@@ -174,11 +157,11 @@ <h5 class="modal-title" id="loadurlsModalLongTitle">Load URLs</h5>
           </button>
         </div>
         <div class="modal-body">
-          <p>Please Browse for file:</p>
+          <p>If there is a urls.json file in our application's directory, we will load that to our window.</p>
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-          <button type="button" class="btn btn-primary" data-dismiss="modal">Submit</button>
+          <button type="button" id="loadurls_submit" class="btn btn-primary" data-dismiss="modal">Submit</button>
         </div>
       </div>
     </div>

app/setup.js

@@ -27,12 +27,6 @@ $(document).ready(function() {
         e.preventDefault();
         $("#aboutModalCenter").modal('toggle');
     });
-
-    // Open Load URLs modal
-    $("#load-urls").on('click', function(e){
-        e.preventDefault();
-        $("#loadurlsModalCenter").modal('toggle');
-    });
 
     // TD content editable
     $(".edit").click(function(){

main.js

@@ -47,6 +47,7 @@ app.on('ready', function () {
   })
 
   mainWindow.onbeforeunload = (e) => {
+    //
     // Prevent Command-R from unloading the window contents.
     e.returnValue = false
   }