Moved external JS scripts to lib folder, moved map JS to a seperate file

build.gradle

@@ -14,7 +14,7 @@ allprojects {
     }
 }
 
-subprojects {
+subprojects { 
     apply plugin: 'java-library'
 
     dependencies {

hal-core/resource/resource/web/js/map.js

@@ -0,0 +1,188 @@
+var svg;
+var editModeEnabled = false;
+
+$(function(){
+    if (!SVG.supported) {
+        alert("Image format(SVG) not supported by your browser.");
+        return;
+    }
+
+    // ------------------------------------------
+    // Setup map
+    // ------------------------------------------
+
+    svg = SVG("map");
+
+    // Initialize events
+
+    $("#button-edit").click(function() {
+        editMode(true);
+    });
+    $("#button-save").click(function() {
+        saveMap();
+        editMode(false);
+        drawMap();
+    });
+    $("#button-cancel").click(function() {
+        editMode(false);
+        drawMap();
+    });
+
+    // Initialize background image uploader
+
+    $("#button-bg-edit").click(function() {
+        // Reset modal
+        $('#bg-file-input').parent().show();
+        if ($("#file_input").prop("jFiler") != null)
+            $("#file_input").prop("jFiler").reset();
+        $('#bg-file-progress').parent().hide();
+        $('#bgUploadModal').modal('show');
+    });
+    $('#bg-file-input').filer({
+        limit: 1,
+        extensions: ['jpg','png','svg','gif'],
+        maxSize: 3, // in MB
+        uploadFile: {
+            url: "",
+            type: 'POST',
+            enctype: 'multipart/form-data',
+            beforeSend: function(){
+                $('#bg-file-input').parent().hide();
+                $('#bg-file-progress').parent().show();
+            },
+            success: function(data, el){
+                $('#bgUploadModal').modal('hide');
+                drawMap();
+            },
+            error: function(el){
+                $("#bg-file-progress").addClass("progress-bar-danger");
+            },
+            onProgress: function(t){
+                $("#bg-file-progress").css("width", t+"%");
+            },
+        }
+    });
+
+    // ------------------------------------------
+    // Start draw loop
+    // ------------------------------------------
+
+    setInterval(function() {
+        if (editModeEnabled == false)
+            drawMap();
+    }, 3000); // 3 sec
+
+});
+
+
+function editMode(enable){
+    if (editModeEnabled == enable)
+        return;
+    editModeEnabled = enable;
+    if (editModeEnabled){
+        $(".edit-mode").show();
+        $(".view-mode").hide();
+        $("#map").css("border-color", "#6eb16e");
+        svg.select(".draggable").draggable(true);
+    }
+    else {
+        $(".edit-mode").hide();
+        $(".view-mode").show();
+        $("#map").css("border-color", "");
+        svg.select(".draggable").draggable(false);
+    }
+}
+
+function drawMap(){
+    // Get map data
+    $.getJSON("/api/map?action=getdata", function(json){
+        // Reset map
+        svg.clear();
+
+        // --------------------------------------
+        // Draw
+        // --------------------------------------
+
+        // Background
+
+        svg.image("?bgimage", "100%", "100%").x(0).y(0).addClass("bg-image");
+
+        // Rooms
+
+        if (json.rooms != null) {
+            $.each(json.rooms, function(i, room) {
+                var group = svg.group();
+
+                group.rect(room.width, room.height);
+                group.text(room.name).move(10, 10).fill('#999');
+
+                group.addClass("draggable").addClass("room")
+                    .x(room.x)
+                    .y(room.y)
+                    .attr("room-id", room.id);
+            });
+        }
+
+        // Sensors
+
+        if (json.sensors != null) {
+            $.each(json.sensors, function(i, sensor) {
+                var group = svg.group();
+
+                group.image("/img/temperature.svg");
+                group.text(sensor.data).move(45, 15).fill('#999');
+
+                group.addClass("draggable").addClass("sensor")
+                    .x(sensor.x)
+                    .y(sensor.y)
+                    .attr("sensor-id", sensor.id);
+                group.title(sensor.name);
+            });
+        }
+
+        // Events
+
+        if (json.event != null) {
+            $.each(json.events, function(i, event) {
+                var group = svg.group();
+
+                var img = "/img/lightbulb_off.svg";
+                if (event.data == "ON")
+                    img = "/img/lightbulb_on.svg";
+                group.image(img);
+
+                group.addClass("draggable").addClass("event")
+                    .x(event.x)
+                    .y(event.y)
+                    .attr("event-id", event.id);
+                group.title(event.name);
+            });
+        }
+    });
+}
+
+function saveMap(){
+    svg.select(".room").each(function(){
+        saveDevice(this, "room", "room-id");
+    });
+    svg.select(".sensor").each(function(){
+        saveDevice(this, "sensor", "sensor-id");
+    });
+    svg.select(".event").each(function(){
+        saveDevice(this, "event", "event-id");
+    });
+}
+function saveDevice(element, type, id){
+    $.ajax({
+        async: false,
+        dataType: "json",
+        url: "/api/map?",
+        data: {
+            action: "save",
+            id: element.attr(id),
+            type: type,
+            x: element.x(),
+            y: element.y()
+        },
+    });
+}

hal-core/resource/resource/web/main_index.tmpl

@@ -14,15 +14,15 @@
     <link href="css/c3.min.css" rel="stylesheet">
     <link href="css/hal.css" rel="stylesheet">
 
-    <script src="js/jquery-1.11.3.min.js"></script>
-    <script src="js/bootstrap.min.js"></script>
-    <script src="js/bootstrap-switch.min.js"></script>
-    <script src="js/moment.js"></script>
+    <script src="js/lib/jquery-1.11.3.min.js"></script>
+    <script src="js/lib/bootstrap.min.js"></script>
+    <script src="js/lib/bootstrap-switch.min.js"></script>
+    <script src="js/lib/moment.js"></script>
     <script src="js/hal.js"></script>
 
     <!-- charts -->
-    <script src="js/d3.js"></script>
-    <script src="js/c3.js"></script>
+    <script src="js/lib/d3.js"></script>
+    <script src="js/lib/c3.js"></script>
 
 </head>
 

hal-core/resource/resource/web/map.tmpl

@@ -42,158 +42,12 @@
 </div>
 
 
-<script src="js/svg.min.js"></script>
-<script src="js/svg.title.js"></script>
-<script src="js/svg.draggable.min.js"></script>
-<script src="js/jquery.filer.min.js"></script>
+<script src="js/lib/svg.min.js"></script>
+<script src="js/lib/svg.title.js"></script>
+<script src="js/lib/svg.draggable.min.js"></script>
+<script src="js/lib/jquery.filer.min.js"></script>
 <link href="css/jquery.filer.css" rel="stylesheet">
-<script>
-    var svg;
-    var editModeEnabled = false;
-
-    $(function(){
-        if (!SVG.supported) {
-            alert("SVG not supported");
-            return;
-        }
-
-        svg = SVG("map");
-        drawLoop();
-
-        // set events
-        $("#button-edit").click(function() {
-            editMode(true);
-        });
-        $("#button-save").click(function() {
-            saveMap();
-            editMode(false);
-            drawMap();
-        });
-        $("#button-cancel").click(function() {
-            editMode(false);
-            drawMap();
-        });
-
-        // BG Upload
-        $("#button-bg-edit").click(function() {
-            // Reset modal
-            $('#bg-file-input').parent().show();
-            if ($("#file_input").prop("jFiler") != null)
-                $("#file_input").prop("jFiler").reset();
-            $('#bg-file-progress').parent().hide();
-            $('#bgUploadModal').modal('show');
-        });
-        $('#bg-file-input').filer({
-            limit: 1,
-            extensions: ['jpg','png','svg','gif'],
-            maxSize: 3, // in MB
-            uploadFile: {
-                url: "",
-                type: 'POST',
-                enctype: 'multipart/form-data',
-                beforeSend: function(){
-                    $('#bg-file-input').parent().hide();
-                    $('#bg-file-progress').parent().show();
-                },
-                success: function(data, el){
-                    $('#bgUploadModal').modal('hide');
-                    drawMap();
-                },
-                error: function(el){
-                    $("#bg-file-progress").addClass("progress-bar-danger");
-                },
-                onProgress: function(t){
-                    $("#bg-file-progress").css("width", t+"%");
-                },
-            }
-        });
-    });
-
-
-    function editMode(enable){
-        if (editModeEnabled == enable)
-            return;
-        editModeEnabled = enable;
-        if (editModeEnabled){
-            $(".edit-mode").show();
-            $(".view-mode").hide();
-            $("#map").css("border-color", "#6eb16e");
-            svg.select(".draggable").draggable(true);
-        }
-        else {
-            $(".edit-mode").hide();
-            $(".view-mode").show();
-            $("#map").css("border-color", "");
-            svg.select(".draggable").draggable(false);
-        }
-    }
-
-    function drawLoop(){
-        if (editModeEnabled == false)
-            drawMap();
-        setTimeout("drawLoop()", 10000);
-    }
-
-    function drawMap(){
-        // Get map data
-        $.getJSON("/api/map?action=getdata", function(json){
-            // reset map
-            svg.clear();
-
-            ////////////////  Draw
-            // Background
-            svg.image("?bgimage", "100%", "100%").x(0).y(0).addClass("bg-image");
-
-            // Sensors
-            $.each(json.sensors, function(i, sensor) {
-                var group = svg.group();
-                group.image("/img/temperature.svg");
-                group.text(sensor.data).move(45,15).fill('#999');
-
-                group.addClass("draggable").addClass("sensor")
-                    .x(sensor.x).y(sensor.y)
-                    .attr("device-id", sensor.id);
-                group.title(sensor.name);
-            });
-            // Events
-            $.each(json.events, function(i, event) {
-                var group = svg.group();
-                var img = "/img/lightbulb_off.svg";
-                if (event.data == "ON")
-                    img = "/img/lightbulb_on.svg";
-                group.image(img);
-
-                group.addClass("draggable").addClass("event")
-                    .x(event.x).y(event.y)
-                    .attr("device-id", event.id);
-                group.title(event.name);
-            });
-        });
-    }
-
-    function saveMap(){
-        svg.select(".sensor").each(function(){
-            saveDevice(this, "sensor");
-        });
-        svg.select(".event").each(function(){
-            saveDevice(this, "event");
-        });
-    }
-    function saveDevice(element, type){
-        $.ajax({
-            async: false,
-            dataType: "json",
-            url: "/api/map?",
-            data: {
-                action: "save",
-                id: element.attr("device-id"),
-                type: type,
-                x: element.x(),
-                y: element.y()
-            },
-        });
-    }
-</script>
+<script src="js/map.js"></script>
 
 
 <!------------------ MODALS ---------------------->

plugins/hal-nvr/resource/resource/web/camera_detail.tmpl

@@ -52,5 +52,5 @@
 </div>
 
 <link href="css/video-js.min.css" rel="stylesheet">
-<script src="js/video.min.js"></script>
-<script src="js/videojs-http-streaming.min.js"></script>
+<script src="js/lib/video.min.js"></script>
+<script src="js/lib/videojs-http-streaming.min.js"></script>

plugins/hal-nvr/resource/resource/web/camera_monitor.tmpl

@@ -39,6 +39,6 @@
     </tr>
 </table>
 
-<link href="css/video-js.min.css" rel="stylesheet">
-<script src="js/video.min.js"></script>
-<script src="js/videojs-http-streaming.min.js"></script>
+<link href="css/lib/video-js.min.css" rel="stylesheet">
+<script src="js/lib/video.min.js"></script>
+<script src="js/lib/videojs-http-streaming.min.js"></script>