MCSM: перенос компонентов в отдельный файл

mcserver-manager/src/main/java/asys/mcsmanager/MCSM_WebModule.java

@@ -11,9 +11,12 @@ import java.io.IOException;
 import java.io.InputStream;
 import java.util.HashMap;
 import java.util.Map;
+import java.util.regex.Matcher;
+import java.util.regex.Pattern;
 
 public class MCSM_WebModule extends WebModule {
     private final String MODULE_NAME = "mcsmanager";
+    private final Pattern URL_PATTERN_JS = Pattern.compile("/"+MODULE_NAME+"/(\\w+)\\.js");
 
     @Override
     public String getName() {
@@ -35,8 +38,13 @@ public class MCSM_WebModule extends WebModule {
     @Override
     public boolean handle(HttpExchange httpExchange) throws IOException {
         String urlPath = httpExchange.getRequestURI().getPath();
-        if (urlPath.equals("/"+MODULE_NAME+"/module.js")) {
+        Matcher matcher = URL_PATTERN_JS.matcher(urlPath);
-            InputStream stream = getClass().getResourceAsStream("/module.js");
+        if (matcher.find()) {
+            InputStream stream = getClass().getResourceAsStream("/"+matcher.group(1)+".js");
+            if (stream == null) {
+                this.sendHttpCode(httpExchange, 404, "not found");
+                return true;
+            }
             httpExchange.getResponseHeaders().add("Content-Type", "text/javascript;charset=utf-8");
             this.sendContent(httpExchange, 0, stream);
             return true;

mcserver-manager/src/main/resources/components.js

@@ -0,0 +1,54 @@
+var NvLineChart = React.createClass({
+    sinAndCos: function(){
+        var sin = [],sin2 = [],cos = [];
+
+        //Data is represented as an array of {x,y} pairs.
+        for (var i = 0; i < 100; i++) {
+            sin.push({x: i, y: Math.sin(i/10)});
+            sin2.push({x: i, y: Math.sin(i/10) *0.25 + 0.5});
+            cos.push({x: i, y: .5 * Math.cos(i/10)});
+        }
+
+        //Line chart data should be sent as an array of series objects.
+        return [
+            {
+                values: sin,      //values - represents the array of {x,y} data points
+                key: 'Sine Wave', //key  - the name of the series.
+                color: '#ff7f0e'  //color - optional: choose your own line color.
+            },
+            {
+                values: cos,
+                key: 'Cosine Wave',
+                color: '#2ca02c'
+            },
+            {
+                values: sin2,
+                key: 'Another sine wave',
+                color: '#7777ff',
+                area: true      //area - set to true if you want this line to turn into a filled area chart.
+            }
+        ];
+    },
+    render: function(){return(
+        ce('div', {id: 'chart'}, ce('svg', {style: {'height': '500px'}}))
+    )},
+    componentDidMount: function(){
+        var _this = this;
+
+        nv.addGraph(function() {
+            var chart = nv.models.lineChart().useInteractiveGuideline(true);
+
+            chart.xAxis.axisLabel('Time (ms)').tickFormat(d3.format(',r'));
+
+            chart.yAxis.axisLabel('Voltage (v)').tickFormat(d3.format('.02f'));
+
+            d3.select('#chart svg')
+                .datum(_this.sinAndCos())
+                .transition().duration(500)
+                .call(chart);
+
+            nv.utils.windowResize(chart.update);
+            return chart;
+        });
+    }
+});

mcserver-manager/src/main/resources/module.js

@@ -1,58 +1,3 @@
-var NvLineChart = React.createClass({
-    sinAndCos: function(){
-        var sin = [],sin2 = [],cos = [];
-
-        //Data is represented as an array of {x,y} pairs.
-        for (var i = 0; i < 100; i++) {
-            sin.push({x: i, y: Math.sin(i/10)});
-            sin2.push({x: i, y: Math.sin(i/10) *0.25 + 0.5});
-            cos.push({x: i, y: .5 * Math.cos(i/10)});
-        }
-
-        //Line chart data should be sent as an array of series objects.
-        return [
-            {
-                values: sin,      //values - represents the array of {x,y} data points
-                key: 'Sine Wave', //key  - the name of the series.
-                color: '#ff7f0e'  //color - optional: choose your own line color.
-            },
-            {
-                values: cos,
-                key: 'Cosine Wave',
-                color: '#2ca02c'
-            },
-            {
-                values: sin2,
-                key: 'Another sine wave',
-                color: '#7777ff',
-                area: true      //area - set to true if you want this line to turn into a filled area chart.
-            }
-        ];
-    },
-    render: function(){return(
-        ce('div', {id: 'chart'}, ce('svg', {style: {'height': '500px'}}))
-    )},
-    componentDidMount: function(){
-        var _this = this;
-
-        nv.addGraph(function() {
-            var chart = nv.models.lineChart().useInteractiveGuideline(true);
-
-            chart.xAxis.axisLabel('Time (ms)').tickFormat(d3.format(',r'));
-
-            chart.yAxis.axisLabel('Voltage (v)').tickFormat(d3.format('.02f'));
-
-            d3.select('#chart svg')
-                .datum(_this.sinAndCos())
-                .transition().duration(500)
-                .call(chart);
-
-            nv.utils.windowResize(chart.update);
-            return chart;
-        });
-    }
-});
-
 var ContentModule = React.createClass({
     loadScript: function(url, fnLoad, fnError) {
         const script = document.createElement("script");
@@ -75,6 +20,7 @@ var ContentModule = React.createClass({
     componentWillMount: function(){
         var _this = this;
 
+        this.loadScript("/mcsmanager/components.js");
         this.loadScript(
             "https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js",
             function(){
@@ -104,4 +50,4 @@ var ContentModule = React.createClass({
             )
         )
     }
-});
+});